[V0_FILE]typescriptreact:file="components/login-button.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { useAuth } from "@/hooks/use-auth" import { LogIn } from "lucide-react" interface LoginButtonProps { size?: "default" | "sm" | "lg" | "icon" } export function LoginButton({ size = "default" }: LoginButtonProps) { const { user, login, logout } = useAuth() if (user) { return (

) } return ( ) } [V0_FILE]typescriptreact:file="hooks/use-auth.ts" isMerged="true" "use client" import { useContext } from "react" import { AuthContext } from "@/components/auth-provider" export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Overview } from "@/components/dashboard/overview" import { RecentLogs } from "@/components/dashboard/recent-logs" import { getServerSession } from "@/lib/auth" export default async function DashboardPage() { const session = await getServerSession() return (

Dashboard

Bem-vindo, {session?.user?.username}

Visão Geral Logs Recentes

) } [V0_FILE]typescriptreact:file="components/ui/date-picker.tsx" isMerged="true" "use client" import { format } from "date-fns" import { CalendarIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" interface DatePickerProps { date: Date | null setDate: (date: Date | null) => void placeholder?: string } export function DatePicker({ date, setDate, placeholder = "Selecione uma data" }: DatePickerProps) { return ( ) } [V0_FILE]typescriptreact:file="components/users/users-table.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { MoreHorizontal, Edit, Trash, Shield } from "lucide-react" type User = { id: string name: string discordId: string avatar?: string role: "admin" | "moderator" | "user" isApproved: boolean lastLogin: string fivemId?: string } export function UsersTable() { const [users, setUsers] = useState([]) const [loading, setLoading] = useState(true) const [selectedUser, setSelectedUser] = useState(null) const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const [editRole, setEditRole] = useState("") useEffect(() => { const fetchUsers = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/users"); // const data = await res.json(); // Simulated data for demo setUsers([ { id: "1", name: "John Doe", discordId: "johndoe#1234", avatar: "/placeholder.svg?height=40&width=40", role: "admin", isApproved: true, lastLogin: "2023-06-14T10:30:00Z", fivemId: "steam:1100001xxxxxx", }, { id: "2", name: "Alex Smith", discordId: "alexsmith#5678", avatar: "/placeholder.svg?height=40&width=40", role: "moderator", isApproved: true, lastLogin: "2023-06-13T15:45:00Z", fivemId: "steam:1100002xxxxxx", }, { id: "3", name: "Sarah Jones", discordId: "sarahjones#9012", avatar: "/placeholder.svg?height=40&width=40", role: "user", isApproved: true, lastLogin: "2023-06-12T09:15:00Z", fivemId: "steam:1100003xxxxxx", }, { id: "4", name: "Mike Brown", discordId: "mikebrown#3456", avatar: "/placeholder.svg?height=40&width=40", role: "user", isApproved: false, lastLogin: "2023-06-10T14:20:00Z", }, { id: "5", name: "Emily Wilson", discordId: "emilywilson#7890", avatar: "/placeholder.svg?height=40&width=40", role: "user", isApproved: true, lastLogin: "2023-06-09T11:10:00Z", fivemId: "steam:1100005xxxxxx", }, ]) } catch (error) { console.error("Failed to fetch users:", error) } finally { setLoading(false) } } fetchUsers() }, []) const handleApprovalToggle = (userId: string, isApproved: boolean) => { setUsers((prev) => prev.map((user) => (user.id === userId ? { ...user, isApproved } : user))) } const handleEditUser = (user: User) => { setSelectedUser(user) setEditRole(user.role) setIsEditDialogOpen(true) } const handleSaveEdit = () => { if (selectedUser) { setUsers((prev) => prev.map((user) => (user.id === selectedUser.id ? { ...user, role: editRole as any } : user))) setIsEditDialogOpen(false) } } const handleDeleteUser = (userId: string) => { setUsers((prev) => prev.filter((user) => user.id !== userId)) } const getRoleBadge = (role: User["role"]) => { switch (role) { case "admin": return Admin case "moderator": return Moderador case "user": return Usuário default: return Desconhecido } } if (loading) { return (

{[...Array(5)].map((_, i) => (

))}

) } return (

Usuário Função Discord ID FiveM ID Último Login Aprovado Ações {users.map((user) => (

{user.name.substring(0, 2).toUpperCase()} {user.name}

{getRoleBadge(user.role)} {user.discordId} {user.fivemId || "Não vinculado"} {new Date(user.lastLogin).toLocaleString()} handleApprovalToggle(user.id, checked)} /> Ações handleEditUser(user)}> Editar handleDeleteUser(user.id)}> Excluir ))}

) } [V0_FILE]typescriptreact:file="app/pending-approval/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { AlertTriangle } from "lucide-react" import Link from "next/link" export default function PendingApprovalPage() { return (

Aprovação Pendente Sua conta está aguardando aprovação de um administrador

Um administrador precisa aprovar sua conta antes que você possa acessar o sistema. Isso geralmente leva menos de 24 horas.

Precisa de ajuda? Entre em contato com um administrador no Discord

) } [V0_FILE]typescriptreact:file="app/dashboard/webhooks/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { WebhooksTable } from "@/components/webhooks/webhooks-table" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" export default function WebhooksPage() { return (

Webhooks

Webhooks do Discord Configure webhooks para enviar logs para canais do Discord

) } [V0_FILE]typescriptreact:file="app/api/auth/login/route.ts" isMerged="true" import { NextResponse } from "next/server" // This is a mock implementation for the demo // In a real app, you would use NextAuth.js or a similar library for Discord OAuth export async function GET() { // In a real app, this would redirect to Discord OAuth // For the demo, we'll just redirect to the dashboard return NextResponse.redirect(new URL("/dashboard", process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000")) } [V0_FILE]typescriptreact:file="app/api/auth/logout/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function POST() { // In a real app, this would clear the session return NextResponse.json({ success: true }) } [V0_FILE]typescriptreact:file="app/dashboard/settings/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { SettingsForm } from "@/components/settings/settings-form" export default function SettingsPage() { return (

Configurações

Configurações Gerais Configure as opções gerais do sistema

) } [V0_FILE]typescriptreact:file="app/super-admin/login/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { SuperAdminLoginForm } from "@/components/super-admin/login-form" export default function SuperAdminLoginPage() { return (

Super Admin Entre para gerenciar as instâncias do FiveM Log Manager

Painel exclusivo para administradores do sistema

) } [V0_FILE]typescriptreact:file="lib/super-admin-auth.ts" isMerged="true" // This is a mock implementation for the demo // In a real app, you would use a proper authentication system export async function getSuperAdminSession() { // Mock session data return { user: { id: "1", email: "admin@fivemlogmanager.com", role: "super_admin", }, } } [V0_FILE]typescriptreact:file="lib/tenant-context.ts" isMerged="true" "use client" // This file would be used to manage tenant context in a real implementation import { createContext, useContext } from "react" export type Tenant = { id: string name: string subdomain: string createdAt: string expiresAt: string settings: { theme: string logo?: string primaryColor?: string } } type TenantContextType = { tenant: Tenant | null isLoading: boolean } export const TenantContext = createContext({ tenant: null, isLoading: true, }) export const useTenant = () => useContext(TenantContext) [V0_FILE]typescriptreact:file="components/tenant-provider.tsx" isMerged="true" "use client" import { type ReactNode, useEffect, useState } from "react" import { TenantContext, type Tenant } from "@/lib/tenant-context" interface TenantProviderProps { children: ReactNode } export function TenantProvider({ children }: TenantProviderProps) { const [tenant, setTenant] = useState(null) const [isLoading, setIsLoading] = useState(true) useEffect(() => { const fetchTenant = async () => { try { // In a real app, this would fetch tenant data based on the current hostname/subdomain // const hostname = window.location.hostname // const subdomain = hostname.split('.')[0] // const res = await fetch(`/api/tenants/by-subdomain/${subdomain}`) // const data = await res.json() // Simulate API call await new Promise((resolve) => setTimeout(resolve, 500)) // Mock tenant data based on hostname const hostname = window.location.hostname const isLocalhost = hostname === "localhost" || hostname === "127.0.0.1" // For demo purposes, we'll use a mock tenant setTenant({ id: "1", name: "Servidor RPCity", subdomain: isLocalhost ? "demo" : hostname.split(".")[0], createdAt: "2023-05-10T14:30:00Z", expiresAt: "2024-05-10T14:30:00Z", settings: { theme: "dark", primaryColor: "#3b82f6", }, }) } catch (error) { console.error("Failed to fetch tenant data:", error) } finally { setIsLoading(false) } } fetchTenant() }, []) return {children} } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" import { AuthProvider } from "@/components/auth-provider" import { TenantProvider } from "@/components/tenant-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "FiveM Log Manager", description: "Log management system for FiveM servers with Discord integration", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/auth-provider.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useEffect, useState } from "react" import { useTenant } from "@/lib/tenant-context" type User = { id: string username: string avatar: string isApproved: boolean role: "admin" | "moderator" | "user" tenantId: string // Added tenantId to associate user with a tenant } type AuthContextType = { user: User | null login: () => void logout: () => void loading: boolean } export const AuthContext = createContext({ user: null, login: () => {}, logout: () => {}, loading: true, }) export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) const { tenant } = useTenant() useEffect(() => { // Check if user is logged in const checkAuth = async () => { try { // In a real app, this would include the tenant ID in the request // const res = await fetch("/api/auth/session?tenantId=" + tenant?.id) const res = await fetch("/api/auth/session") if (res.ok) { const data = await res.json() if (data.user) { // Only set the user if they belong to the current tenant if (tenant && data.user.tenantId === tenant.id) { setUser(data.user) } } } } catch (error) { console.error("Failed to fetch session:", error) } finally { setLoading(false) } } if (tenant) { checkAuth() } }, [tenant]) const login = () => { // Redirect to Discord OAuth with tenant ID if (tenant) { window.location.href = `/api/auth/login?tenantId=${tenant.id}` } else { console.error("Cannot login: No tenant context available") } } const logout = async () => { try { await fetch("/api/auth/logout", { method: "POST" }) setUser(null) window.location.href = "/" } catch (error) { console.error("Failed to logout:", error) } } return {children} } [V0_FILE]typescriptreact:file="lib/auth.ts" isMerged="true" // This is a mock implementation for the demo // In a real app, you would use NextAuth.js or a similar library import { cookies } from "next/headers" export async function getServerSession() { // Get the tenant ID from the hostname const cookieStore = cookies() const tenantId = cookieStore.get("tenantId")?.value || "1" // Mock session data with tenant ID return { user: { id: "1", username: "John Doe", avatar: "/placeholder.svg?height=40&width=40", isApproved: true, role: "admin", tenantId: tenantId, // Associate the user with the current tenant }, } } [V0_FILE]typescriptreact:file="app/api/auth/session/route.ts" isMerged="true" import { NextResponse } from "next/server" import { cookies } from "next/headers" export async function GET(request: Request) { // Get the tenant ID from the query string or cookies const url = new URL(request.url) const tenantId = url.searchParams.get("tenantId") || cookies().get("tenantId")?.value || "1" // Mock session data with tenant ID return NextResponse.json({ user: { id: "1", username: "John Doe", avatar: "/placeholder.svg?height=40&width=40", isApproved: true, role: "admin", tenantId: tenantId, // Associate the user with the current tenant }, }) } [V0_FILE]typescriptreact:file="components/super-admin/mobile-nav.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" import { Menu } from "lucide-react" import { SuperAdminSidebar } from "@/components/super-admin/super-admin-sidebar" export function MobileNav() { const [open, setOpen] = useState(false) return ( ) } [V0_FILE]typescriptreact:file="components/super-admin/notifications-popover.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Bell } from "lucide-react" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" import Link from "next/link" type Notification = { id: string title: string description: string timestamp: string read: boolean type: "info" | "warning" | "error" | "success" } export function NotificationsPopover() { const [notifications, setNotifications] = useState([]) const [open, setOpen] = useState(false) useEffect(() => { const fetchNotifications = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/notifications"); // const data = await res.json(); // Simulated data for demo setNotifications([ { id: "1", title: "Nova instância criada", description: "A instância 'Novo Horizonte RP' foi criada com sucesso.", timestamp: "2023-08-28T14:30:00Z", read: false, type: "success", }, { id: "2", title: "Pagamento recebido", description: "Pagamento de R$ 149,90 recebido para 'Brasil RP'.", timestamp: "2023-08-28T12:15:00Z", read: false, type: "info", }, { id: "3", title: "Instância suspensa", description: "A instância 'Los Santos Life' foi suspensa por falta de pagamento.", timestamp: "2023-08-28T10:45:00Z", read: true, type: "warning", }, { id: "4", title: "Erro no sistema", description: "Falha na sincronização de dados com o servidor de backup.", timestamp: "2023-08-27T16:20:00Z", read: true, type: "error", }, ]) } catch (error) { console.error("Failed to fetch notifications:", error) } } fetchNotifications() }, []) const unreadCount = notifications.filter((n) => !n.read).length const markAsRead = (id: string) => { setNotifications((prev) => prev.map((notification) => (notification.id === id ? { ...notification, read: true } : notification)), ) } const markAllAsRead = () => { setNotifications((prev) => prev.map((notification) => ({ ...notification, read: true }))) } const getNotificationIcon = (type: Notification["type"]) => { switch (type) { case "info": return

case "warning": return

case "error": return

case "success": return

} } return (

Notificações

{unreadCount > 0 && ( )}

{notifications.length === 0 ? (

Nenhuma notificação

) : (

{notifications.map((notification) => (

markAsRead(notification.id)} >

{getNotificationIcon(notification.type)}

{notification.title}

{new Date(notification.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", })}

{notification.description}

))}

)}

) } [V0_FILE]typescriptreact:file="components/super-admin/search.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@/components/ui/command" import { SearchIcon } from "lucide-react" import { useRouter } from "next/navigation" export function Search() { const [open, setOpen] = useState(false) const router = useRouter() const runCommand = (command: () => void) => { setOpen(false) command() } return ( <> Nenhum resultado encontrado. runCommand(() => router.push("/super-admin"))}> Dashboard runCommand(() => router.push("/super-admin/tenants"))}> Instâncias runCommand(() => router.push("/super-admin/customers"))}> Clientes runCommand(() => router.push("/super-admin/subscriptions"))}> Assinaturas runCommand(() => router.push("/super-admin/tenants/new"))}> Criar nova instância runCommand(() => router.push("/super-admin/settings"))}> Configurações ) } [V0_FILE]typescriptreact:file="app/super-admin/tenants/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { getSuperAdminSession } from "@/lib/super-admin-auth" import { DashboardHeader } from "@/components/super-admin/dashboard-header" import { DashboardShell } from "@/components/super-admin/dashboard-shell" import { TenantsTable } from "@/components/super-admin/tenants-table" import { Card, CardContent } from "@/components/ui/card" export default async function TenantsPage() { const session = await getSuperAdminSession() if (!session || !session.user || session.user.role !== "super_admin") { redirect("/super-admin/login") } return ( ) } [V0_FILE]typescriptreact:file="components/super-admin/charts/usage-chart.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts" type UsageData = { name: string logs: number users: number api: number } export function UsageChart() { const [data, setData] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { const fetchData = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/usage"); // const data = await res.json(); // Simulated data for demo setData([ { name: "Jan", logs: 4000, users: 2400, api: 1400 }, { name: "Fev", logs: 5000, users: 2800, api: 1600 }, { name: "Mar", logs: 6000, users: 3200, api: 1800 }, { name: "Abr", logs: 7000, users: 3600, api: 2000 }, { name: "Mai", logs: 8000, users: 4000, api: 2200 }, { name: "Jun", logs: 9000, users: 4400, api: 2400 }, { name: "Jul", logs: 10000, users: 4800, api: 2600 }, { name: "Ago", logs: 11000, users: 5200, api: 2800 }, ]) } catch (error) { console.error("Failed to fetch usage data:", error) } finally { setLoading(false) } } fetchData() }, []) if (loading) { return ( Uso do Sistema Métricas de uso por recurso ) } return ( Uso do Sistema Métricas de uso por recurso ) } [V0_FILE]typescriptreact:file="components/super-admin/charts/growth-metrics.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ComposedChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts" type GrowthData = { name: string newTenants: number churnRate: number growthRate: number } export function GrowthMetrics() { const [data, setData] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { const fetchData = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/growth"); // const data = await res.json(); // Simulated data for demo setData([ { name: "Jan", newTenants: 4, churnRate: 0, growthRate: 0 }, { name: "Fev", newTenants: 5, churnRate: 1, growthRate: 10 }, { name: "Mar", newTenants: 7, churnRate: 2, growthRate: 15 }, { name: "Abr", newTenants: 6, churnRate: 1, growthRate: 12 }, { name: "Mai", newTenants: 8, churnRate: 2, growthRate: 18 }, { name: "Jun", newTenants: 10, churnRate: 1, growthRate: 22 }, { name: "Jul", newTenants: 9, churnRate: 3, growthRate: 15 }, { name: "Ago", newTenants: 12, churnRate: 2, growthRate: 25 }, ]) } catch (error) { console.error("Failed to fetch growth data:", error) } finally { setLoading(false) } } fetchData() }, []) if (loading) { return ( Métricas de Crescimento Novos clientes e taxa de retenção ) } return ( Métricas de Crescimento Novos clientes e taxa de retenção ) } [V0_FILE]typescriptreact:file="app/super-admin/customers/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { getSuperAdminSession } from "@/lib/super-admin-auth" import { DashboardHeader } from "@/components/super-admin/dashboard-header" import { DashboardShell } from "@/components/super-admin/dashboard-shell" import { CustomersTable } from "@/components/super-admin/customers-table" import { Card, CardContent } from "@/components/ui/card" export default async function CustomersPage() { const session = await getSuperAdminSession() if (!session || !session.user || session.user.role !== "super_admin") { redirect("/super-admin/login") } return ( ) } [V0_FILE]typescriptreact:file="app/super-admin/expirations/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { getSuperAdminSession } from "@/lib/super-admin-auth" import { DashboardHeader } from "@/components/super-admin/dashboard-header" import { DashboardShell } from "@/components/super-admin/dashboard-shell" import { ExpirationsTable } from "@/components/super-admin/expirations-table" import { Card, CardContent } from "@/components/ui/card" export default async function ExpirationsPage() { const session = await getSuperAdminSession() if (!session || !session.user || session.user.role !== "super_admin") { redirect("/super-admin/login") } return ( ) } [V0_FILE]typescriptreact:file="components/super-admin/expirations-table.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Calendar } from "@/components/ui/calendar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { format } from "date-fns" import { ptBR } from "date-fns/locale" import { MoreHorizontal, Search, CalendarIcon, ExternalLink } from "lucide-react" import { useToast } from "@/hooks/use-toast" type Tenant = { id: string name: string subdomain: string ownerEmail: string createdAt: string expiresAt: string status: "active" | "suspended" | "expired" daysLeft: number } export function ExpirationsTable() { const { toast } = useToast() const [tenants, setTenants] = useState([]) const [loading, setLoading] = useState(true) const [searchQuery, setSearchQuery] = useState("") const [isExtendDialogOpen, setIsExtendDialogOpen] = useState(false) const [selectedTenant, setSelectedTenant] = useState(null) const [newExpirationDate, setNewExpirationDate] = useState(undefined) useEffect(() => { const fetchTenants = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/tenants/expirations"); // const data = await res.json(); // Simulated data for demo setTenants([ { id: "1", name: "Servidor RPCity", subdomain: "rpcity", ownerEmail: "admin@rpcity.com", createdAt: "2023-05-10T14:30:00Z", expiresAt: "2023-09-15T14:30:00Z", status: "active", daysLeft: 7, }, { id: "2", name: "Brasil RP", subdomain: "brasilrp", ownerEmail: "admin@brasilrp.com", createdAt: "2023-06-15T10:00:00Z", expiresAt: "2023-09-20T10:00:00Z", status: "active", daysLeft: 12, }, { id: "3", name: "Los Santos Life", subdomain: "lslife", ownerEmail: "admin@lslife.com", createdAt: "2023-04-20T09:15:00Z", expiresAt: "2023-09-10T09:15:00Z", status: "expired", daysLeft: 0, }, { id: "4", name: "Cidade Alta", subdomain: "cidadealta", ownerEmail: "admin@cidadealta.com", createdAt: "2023-07-01T16:45:00Z", expiresAt: "2023-09-25T16:45:00Z", status: "active", daysLeft: 17, }, { id: "5", name: "Novo Horizonte RP", subdomain: "novohorizonte", ownerEmail: "admin@novohorizonte.com", createdAt: "2023-08-01T11:30:00Z", expiresAt: "2023-10-15T11:30:00Z", status: "active", daysLeft: 37, }, ]) } catch (error) { console.error("Failed to fetch tenants:", error) } finally { setLoading(false) } } fetchTenants() }, []) const filteredTenants = tenants.filter( (tenant) => tenant.name.toLowerCase().includes(searchQuery.toLowerCase()) || tenant.subdomain.toLowerCase().includes(searchQuery.toLowerCase()) || tenant.ownerEmail.toLowerCase().includes(searchQuery.toLowerCase()), ) const handleExtendExpiration = (tenant: Tenant) => { setSelectedTenant(tenant) setNewExpirationDate(undefined) setIsExtendDialogOpen(true) } const handleSaveExtension = () => { if (selectedTenant && newExpirationDate) { // In a real app, this would send a request to your API setTenants((prev) => prev.map((tenant) => { if (tenant.id === selectedTenant.id) { const expiresAt = newExpirationDate.toISOString() const now = new Date() const diffTime = newExpirationDate.getTime() - now.getTime() const daysLeft = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) return { ...tenant, expiresAt, daysLeft, status: daysLeft > 0 ? "active" : "expired", } } return tenant }), ) toast({ title: "Data de expiração atualizada", description: `A data de expiração de ${selectedTenant.name} foi atualizada com sucesso.`, }) setIsExtendDialogOpen(false) } } const getDaysLeftColor = (days: number) => { if (days <= 0) return "text-red-500" if (days <= 7) return "text-red-500" if (days <= 30) return "text-orange-500" return "text-green-500" } const getStatusBadge = (status: Tenant["status"]) => { switch (status) { case "active": return Ativo case "suspended": return Suspenso case "expired": return Expirado } } if (loading) { return (

{[...Array(5)].map((_, i) => (

))}

) } return (

setSearchQuery(e.target.value)} />

Instância Subdomínio Email do Admin Data de Expiração Dias Restantes Status Ações {filteredTenants.length === 0 ? ( Nenhuma instância encontrada ) : ( filteredTenants.map((tenant) => ( {tenant.name} {tenant.subdomain}.fivemlogmanager.com {tenant.ownerEmail} {new Date(tenant.expiresAt).toLocaleDateString()} {tenant.daysLeft <= 0 ? "Expirado" : `${tenant.daysLeft} dias`} {getStatusBadge(tenant.status)} Ações handleExtendExpiration(tenant)}> Estender Expiração Acessar Instância )) )}

) } [V0_FILE]typescriptreact:file="components/logs/discord-logs-interface.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { cn } from "@/lib/utils" import { ScrollArea } from "@/components/ui/scroll-area" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Badge } from "@/components/ui/badge" import { Search, Hash, VolumeX, Bell, Pin, Users, HelpCircle, Send } from "lucide-react" type LogCategory = { id: string name: string icon?: React.ReactNode channels: LogChannel[] isExpanded: boolean } type LogChannel = { id: string name: string type: "text" | "voice" unread?: boolean mentions?: number } type LogMessage = { id: string content: string timestamp: string author: { id: string name: string avatar?: string role: string roleColor: string } attachments?: { type: "image" | "embed" content: any }[] } type LogEmbed = { title?: string description?: string color?: string fields?: { name: string value: string inline?: boolean }[] footer?: { text: string icon_url?: string } thumbnail?: string timestamp?: string author?: { name: string icon_url?: string } } export function DiscordLogsInterface() { const [categories, setCategories] = useState([]) const [selectedChannel, setSelectedChannel] = useState(null) const [messages, setMessages] = useState([]) const [inputValue, setInputValue] = useState("") const [loading, setLoading] = useState(true) const messagesEndRef = useRef(null) useEffect(() => { const fetchData = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/logs/categories"); // const data = await res.json(); // Simulated data for demo setCategories([ { id: "1", name: "INFORMAÇÕES", isExpanded: true, channels: [ { id: "101", name: "bem-vindo", type: "text" }, { id: "102", name: "regras", type: "text" }, { id: "103", name: "anúncios", type: "text", unread: true }, ], }, { id: "2", name: "LOGS GERAIS", isExpanded: true, channels: [ { id: "201", name: "chat-global", type: "text", unread: true, mentions: 2 }, { id: "202", name: "entradas-saídas", type: "text" }, { id: "203", name: "mortes", type: "text" }, ], }, { id: "3", name: "LOGS ADMIN", isExpanded: true, channels: [ { id: "301", name: "kicks-bans", type: "text" }, { id: "302", name: "comandos-admin", type: "text", unread: true }, { id: "303", name: "warns", type: "text" }, ], }, { id: "4", name: "LOGS ECONOMIA", isExpanded: true, channels: [ { id: "401", name: "transações", type: "text" }, { id: "402", name: "compras-vendas", type: "text" }, { id: "403", name: "salários", type: "text" }, ], }, { id: "5", name: "LOGS VEÍCULOS", isExpanded: false, channels: [ { id: "501", name: "spawn-veículos", type: "text" }, { id: "502", name: "tunagem", type: "text" }, { id: "503", name: "garagens", type: "text" }, ], }, { id: "6", name: "LOGS PROPRIEDADES", isExpanded: false, channels: [ { id: "601", name: "casas", type: "text" }, { id: "602", name: "empresas", type: "text" }, { id: "603", name: "acessos", type: "text" }, ], }, ]) // Set default selected channel setSelectedChannel({ id: "201", name: "chat-global", type: "text", unread: true, mentions: 2 }) } catch (error) { console.error("Failed to fetch categories:", error) } finally { setLoading(false) } } fetchData() }, []) useEffect(() => { if (selectedChannel) { fetchMessages(selectedChannel.id) } }, [selectedChannel]) useEffect(() => { scrollToBottom() }, [messages]) const fetchMessages = async (channelId: string) => { try { setLoading(true) // In a real app, this would fetch from your API // const res = await fetch(`/api/logs/channels/${channelId}/messages`); // const data = await res.json(); // Simulated data for demo let mockMessages: LogMessage[] = [] if (channelId === "201") { // Chat global mockMessages = [ { id: "1001", content: "Alguém pode me ajudar com uma missão?", timestamp: "2023-08-28T14:30:00Z", author: { id: "user1", name: "JohnDoe", avatar: "/placeholder.svg?height=40&width=40", role: "Jogador", roleColor: "#3498db", }, }, { id: "1002", content: "Qual missão você está tentando fazer?", timestamp: "2023-08-28T14:32:00Z", author: { id: "user2", name: "AlexSmith", avatar: "/placeholder.svg?height=40&width=40", role: "Jogador VIP", roleColor: "#e74c3c", }, }, { id: "1003", content: "A missão do banco central, preciso de mais uma pessoa", timestamp: "2023-08-28T14:33:00Z", author: { id: "user1", name: "JohnDoe", avatar: "/placeholder.svg?height=40&width=40", role: "Jogador", roleColor: "#3498db", }, }, { id: "1004", content: "Eu posso te ajudar, me encontre no centro da cidade", timestamp: "2023-08-28T14:35:00Z", author: { id: "user3", name: "SarahJones", avatar: "/placeholder.svg?height=40&width=40", role: "Moderador", roleColor: "#9b59b6", }, }, { id: "1005", content: "Obrigado! Estou indo para aí agora", timestamp: "2023-08-28T14:36:00Z", author: { id: "user1", name: "JohnDoe", avatar: "/placeholder.svg?height=40&width=40", role: "Jogador", roleColor: "#3498db", }, }, ] } else if (channelId === "301") { // Kicks-bans mockMessages = [ { id: "2001", content: "", timestamp: "2023-08-28T13:15:00Z", author: { id: "system", name: "Sistema", avatar: "/placeholder.svg?height=40&width=40", role: "Sistema", roleColor: "#f1c40f", }, attachments: [ { type: "embed", content: { title: "Usuário Banido", description: "O jogador **MikeBrown** foi banido permanentemente do servidor.", color: "#e74c3c", fields: [ { name: "Motivo", value: "Uso de cheats (Aimbot)" }, { name: "Admin", value: "AlexModerator" }, { name: "ID Steam", value: "STEAM_0:1:12345678" }, { name: "ID Discord", value: "123456789012345678" }, ], footer: { text: "ID do Ban: BAN-2023-08-28-001", }, timestamp: "2023-08-28T13:15:00Z", }, }, ], }, { id: "2002", content: "", timestamp: "2023-08-28T12:45:00Z", author: { id: "system", name: "Sistema", avatar: "/placeholder.svg?height=40&width=40", role: "Sistema", roleColor: "#f1c40f", }, attachments: [ { type: "embed", content: { title: "Usuário Kickado", description: "O jogador **JaneDoe** foi kickado do servidor.", color: "#f39c12", fields: [ { name: "Motivo", value: "Linguagem inapropriada" }, { name: "Admin", value: "SarahModerator" }, { name: "ID Steam", value: "STEAM_0:1:87654321" }, ], footer: { text: "ID do Kick: KICK-2023-08-28-002", }, timestamp: "2023-08-28T12:45:00Z", }, }, ], }, ] } else if (channelId === "401") { // Transações mockMessages = [ { id: "3001", content: "", timestamp: "2023-08-28T14:10:00Z", author: { id: "system", name: "Sistema", avatar: "/placeholder.svg?height=40&width=40", role: "Sistema", roleColor: "#f1c40f", }, attachments: [ { type: "embed", content: { title: "Transferência de Dinheiro", description: "Uma transferência de dinheiro foi realizada.", color: "#2ecc71", fields: [ { name: "De", value: "JohnDoe (ID: 1001)" }, { name: "Para", value: "AlexSmith (ID: 1002)" }, { name: "Valor", value: "$50,000" }, { name: "Motivo", value: "Pagamento de carro" }, ], footer: { text: "ID da Transação: TRX-2023-08-28-001", }, timestamp: "2023-08-28T14:10:00Z", }, }, ], }, { id: "3002", content: "", timestamp: "2023-08-28T13:55:00Z", author: { id: "system", name: "Sistema", avatar: "/placeholder.svg?height=40&width=40", role: "Sistema", roleColor: "#f1c40f", }, attachments: [ { type: "embed", content: { title: "Saque no Caixa Eletrônico", description: "Um saque foi realizado em um caixa eletrônico.", color: "#e67e22", fields: [ { name: "Jogador", value: "SarahJones (ID: 1003)" }, { name: "Valor", value: "$2,500" }, { name: "Local", value: "Caixa Eletrônico - Centro da Cidade" }, { name: "Saldo Restante", value: "$15,750" }, ], footer: { text: "ID da Transação: ATM-2023-08-28-005", }, timestamp: "2023-08-28T13:55:00Z", }, }, ], }, ] } else { // Default messages for other channels mockMessages = [ { id: "4001", content: `Logs do canal ${selectedChannel?.name}`, timestamp: "2023-08-28T14:00:00Z", author: { id: "system", name: "Sistema", avatar: "/placeholder.svg?height=40&width=40", role: "Sistema", roleColor: "#f1c40f", }, }, { id: "4002", content: `Este é um exemplo de log para o canal ${selectedChannel?.name}`, timestamp: "2023-08-28T14:05:00Z", author: { id: "system", name: "Sistema", avatar: "/placeholder.svg?height=40&width=40", role: "Sistema", roleColor: "#f1c40f", }, }, ] } setMessages(mockMessages) } catch (error) { console.error(`Failed to fetch messages for channel ${channelId}:`, error) } finally { setLoading(false) } } const toggleCategory = (categoryId: string) => { setCategories((prev) => prev.map((category) => { if (category.id === categoryId) { return { ...category, isExpanded: !category.isExpanded } } return category }), ) } const handleChannelSelect = (channel: LogChannel) => { setSelectedChannel(channel) // Mark channel as read setCategories((prev) => prev.map((category) => ({ ...category, channels: category.channels.map((ch) => { if (ch.id === channel.id) { return { ...ch, unread: false, mentions: 0 } } return ch }), })), ) } const handleSendMessage = (e: React.FormEvent) => { e.preventDefault() if (!inputValue.trim() || !selectedChannel) return const newMessage: LogMessage = { id: `msg-${Date.now()}`, content: inputValue, timestamp: new Date().toISOString(), author: { id: "current-user", name: "Admin", avatar: "/placeholder.svg?height=40&width=40", role: "Administrador", roleColor: "#e74c3c", }, } setMessages((prev) => [...prev, newMessage]) setInputValue("") } const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } const renderEmbed = (embed: LogEmbed) => { return (

{embed.author && (

{embed.author.icon_url && (

)} {embed.author.name}

)} {embed.title &&

{embed.title}

} {embed.description &&

{embed.description}

} {embed.thumbnail && (

)} {embed.fields && embed.fields.length > 0 && (

{embed.fields.map((field, index) => (

{field.name}

{field.value}

))}

)} {embed.footer && (

{embed.footer.icon_url && (

)} {embed.footer.text} {embed.timestamp && ( <> • {new Date(embed.timestamp).toLocaleString()} )}

)}

) } return (

{/* Sidebar - Categories and Channels */}

FiveM Log Manager

{categories.map((category) => (

toggleCategory(category.id)} > {category.name}

{category.isExpanded && (

{category.channels.map((channel) => (

handleChannelSelect(channel)} > {channel.type === "text" ? ( ) : ( )} {channel.name} {channel.mentions && channel.mentions > 0 && ( {channel.mentions} )} {channel.unread && !channel.mentions && (

)}

))}

)}

))}

{/* Main Content - Channel and Messages */}

{/* Channel Header */}

{selectedChannel?.name}

Notificações Mensagens Fixadas Lista de Membros

Ajuda

{/* Messages */}

{loading ? (

) : ( messages.map((message, index) => { // Check if this message is from the same author as the previous one const prevMessage = index > 0 ? messages[index - 1] : null const sameAuthor = prevMessage && prevMessage.author.id === message.author.id const timeDiff = prevMessage ? new Date(message.timestamp).getTime() - new Date(prevMessage.timestamp).getTime() : 0 const showHeader = !sameAuthor || timeDiff > 5 * 60 * 1000 // 5 minutes return (

{showHeader ? ( {message.author.name.substring(0, 2).toUpperCase()} ) : (

)}

{showHeader && (

{message.author.name} {message.author.role} {new Date(message.timestamp).toLocaleString()}

)} {message.content &&

{message.content}

} {message.attachments?.map((attachment, i) => (

{attachment.type === "image" && (

)} {attachment.type === "embed" && renderEmbed(attachment.content)}

))}

) }) )}

{/* Message Input */}

) } [V0_FILE]typescriptreact:file="app/super-admin/notifications/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { getSuperAdminSession } from "@/lib/super-admin-auth" import { DashboardHeader } from "@/components/super-admin/dashboard-header" import { DashboardShell } from "@/components/super-admin/dashboard-shell" import { NotificationsTable } from "@/components/super-admin/notifications-table" import { Button } from "@/components/ui/button" import { Bell } from "lucide-react" export default async function NotificationsPage() { const session = await getSuperAdminSession() if (!session || !session.user || session.user.role !== "super_admin") { redirect("/super-admin/login") } return ( Marcar todas como lidas } /> ) } [V0_FILE]typescriptreact:file="components/super-admin/notifications-table.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { Search, Filter, Bell, BellOff, Check, Trash } from "lucide-react" type Notification = { id: string title: string message: string type: "info" | "warning" | "error" | "success" timestamp: string read: boolean source: string } export function NotificationsTable() { const [notifications, setNotifications] = useState([]) const [loading, setLoading] = useState(true) const [selectedNotifications, setSelectedNotifications] = useState([]) const [filterType, setFilterType] = useState("all") const [searchQuery, setSearchQuery] = useState("") useEffect(() => { const fetchNotifications = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/notifications"); // const data = await res.json(); // Simulated data for demo const mockNotifications: Notification[] = [ { id: "1", title: "Nova instância criada", message: "Uma nova instância foi criada para o cliente Servidor RPCity.", type: "success", timestamp: "2023-08-28T14:30:00Z", read: false, source: "system", }, { id: "2", title: "Expiração próxima", message: "A instância do cliente GTA Brasil expira em 3 dias.", type: "warning", timestamp: "2023-08-28T10:15:00Z", read: false, source: "system", }, { id: "3", title: "Erro de sistema", message: "Falha na sincronização de logs para a instância RPCity.", type: "error", timestamp: "2023-08-27T22:45:00Z", read: true, source: "system", }, { id: "4", title: "Novo cliente registrado", message: "O cliente 'Cidade Alta' se registrou na plataforma.", type: "info", timestamp: "2023-08-27T16:20:00Z", read: true, source: "system", }, { id: "5", title: "Uso de API acima do normal", message: "A instância 'RPCity' está com uso de API 50% acima do normal.", type: "warning", timestamp: "2023-08-26T09:10:00Z", read: true, source: "monitoring", }, ] setNotifications(mockNotifications) } catch (error) { console.error("Failed to fetch notifications:", error) } finally { setLoading(false) } } fetchNotifications() }, []) const handleSelectAll = (checked: boolean) => { if (checked) { setSelectedNotifications(filteredNotifications.map((notification) => notification.id)) } else { setSelectedNotifications([]) } } const handleSelectNotification = (notificationId: string, checked: boolean) => { if (checked) { setSelectedNotifications((prev) => [...prev, notificationId]) } else { setSelectedNotifications((prev) => prev.filter((id) => id !== notificationId)) } } const handleMarkAsRead = () => { setNotifications((prev) => prev.map((notification) => selectedNotifications.includes(notification.id) ? { ...notification, read: true } : notification, ), ) setSelectedNotifications([]) } const handleDelete = () => { setNotifications((prev) => prev.filter((notification) => !selectedNotifications.includes(notification.id))) setSelectedNotifications([]) } const getTypeColor = (type: string) => { switch (type) { case "info": return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300" case "warning": return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300" case "error": return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300" case "success": return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300" default: return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300" } } const filteredNotifications = notifications.filter((notification) => { // Filter by type if (filterType !== "all" && notification.type !== filterType) { return false } // Filter by search query if ( searchQuery && !notification.title.toLowerCase().includes(searchQuery.toLowerCase()) && !notification.message.toLowerCase().includes(searchQuery.toLowerCase()) ) { return false } return true }) if (loading) { return (

{[...Array(5)].map((_, i) => (

))}

) } return (

setSearchQuery(e.target.value)} />

0 && selectedNotifications.length === filteredNotifications.length } onCheckedChange={handleSelectAll} /> Notificação Tipo Data Origem {filteredNotifications.length === 0 ? ( Nenhuma notificação encontrada ) : ( filteredNotifications.map((notification) => ( handleSelectNotification(notification.id, checked as boolean)} /> {notification.read ? ( ) : ( )}

{notification.title}

{notification.message}

{notification.type === "info" && "Informação"} {notification.type === "warning" && "Aviso"} {notification.type === "error" && "Erro"} {notification.type === "success" && "Sucesso"} {new Date(notification.timestamp).toLocaleString()} {notification.source === "system" ? "Sistema" : "Monitoramento"} )) )}

) } [V0_FILE]typescriptreact:file="app/super-admin/reports/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { getSuperAdminSession } from "@/lib/super-admin-auth" import { DashboardHeader } from "@/components/super-admin/dashboard-header" import { DashboardShell } from "@/components/super-admin/dashboard-shell" import { ReportsTable } from "@/components/super-admin/reports-table" import { Button } from "@/components/ui/button" import { FileText } from "lucide-react" export default async function ReportsPage() { const session = await getSuperAdminSession() if (!session || !session.user || session.user.role !== "super_admin") { redirect("/super-admin/login") } return ( Gerar Relatório } /> ) } [V0_FILE]typescriptreact:file="components/super-admin/reports-table.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { format } from "date-fns" import { Search, Filter, Download, Eye, CalendarIcon } from "lucide-react" type Report = { id: string name: string type: "usage" | "logs" | "system" | "tenants" format: "pdf" | "csv" | "excel" createdAt: string createdBy: string size: string } export function ReportsTable() { const [reports, setReports] = useState([]) const [loading, setLoading] = useState(true) const [filterType, setFilterType] = useState("all") const [searchQuery, setSearchQuery] = useState("") const [dateRange, setDateRange] = useState<{ from: Date | undefined to: Date | undefined }>({ from: undefined, to: undefined, }) useEffect(() => { const fetchReports = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/reports"); // const data = await res.json(); // Simulated data for demo const mockReports: Report[] = [ { id: "1", name: "Relatório de Uso - Agosto 2023", type: "usage", format: "pdf", createdAt: "2023-08-28T14:30:00Z", createdBy: "Admin", size: "1.2 MB", }, { id: "2", name: "Logs Consolidados - Julho 2023", type: "logs", format: "csv", createdAt: "2023-07-31T10:15:00Z", createdBy: "Sistema", size: "4.5 MB", }, { id: "3", name: "Status do Sistema - Q2 2023", type: "system", format: "pdf", createdAt: "2023-06-30T22:45:00Z", createdBy: "Admin", size: "2.8 MB", }, { id: "4", name: "Clientes Ativos - Junho 2023", type: "tenants", format: "excel", createdAt: "2023-06-15T16:20:00Z", createdBy: "Sistema", size: "1.5 MB", }, { id: "5", name: "Análise de Logs - Q1 2023", type: "logs", format: "pdf", createdAt: "2023-03-31T09:10:00Z", createdBy: "Admin", size: "3.2 MB", }, ] setReports(mockReports) } catch (error) { console.error("Failed to fetch reports:", error) } finally { setLoading(false) } } fetchReports() }, []) const getTypeLabel = (type: string) => { switch (type) { case "usage": return "Uso" case "logs": return "Logs" case "system": return "Sistema" case "tenants": return "Clientes" default: return type } } const getFormatLabel = (format: string) => { switch (format) { case "pdf": return "PDF" case "csv": return "CSV" case "excel": return "Excel" default: return format } } const filteredReports = reports.filter((report) => { // Filter by type if (filterType !== "all" && report.type !== filterType) { return false } // Filter by search query if (searchQuery && !report.name.toLowerCase().includes(searchQuery.toLowerCase())) { return false } // Filter by date range if (dateRange.from && new Date(report.createdAt) < dateRange.from) { return false } if (dateRange.to) { const endOfDay = new Date(dateRange.to) endOfDay.setHours(23, 59, 59, 999) if (new Date(report.createdAt) > endOfDay) { return false } } return true }) if (loading) { return (

{[...Array(5)].map((_, i) => (

))}

) } return (

setSearchQuery(e.target.value)} />

Nome Tipo Formato Data de Criação Criado Por Tamanho Ações {filteredReports.length === 0 ? ( Nenhum relatório encontrado ) : ( filteredReports.map((report) => ( {report.name} {getTypeLabel(report.type)} {getFormatLabel(report.format)} {new Date(report.createdAt).toLocaleString()} {report.createdBy} {report.size}

)) )}

) } [V0_FILE]typescriptreact:file="components/logs/logs-content.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { ScrollArea } from "@/components/ui/scroll-area" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { format } from "date-fns" import { Search, Filter, CalendarIcon, X } from "lucide-react" type LogEntry = { id: string content: string timestamp: string category: string subcategory: string user?: { id: string name: string avatar?: string } metadata?: Record embed?: LogEmbed } type LogEmbed = { title?: string description?: string color?: string fields?: { name: string value: string inline?: boolean }[] footer?: { text: string icon_url?: string } thumbnail?: string timestamp?: string author?: { name: string icon_url?: string } } interface LogsContentProps { category: string subcategory: string } export function LogsContent({ category, subcategory }: LogsContentProps) { const [logs, setLogs] = useState([]) const [loading, setLoading] = useState(true) const [searchQuery, setSearchQuery] = useState("") const [showFilters, setShowFilters] = useState(false) const [filters, setFilters] = useState({ startDate: null as Date | null, endDate: null as Date | null, users: [] as string[], }) const messagesEndRef = useRef(null) // Get category and subcategory names const getCategoryName = () => { const categories = { logs_gerais: "Logs Gerais", logs_admin: "Logs Admin", logs_economia: "Logs Economia", logs_veiculos: "Logs Veículos", logs_propriedades: "Logs Propriedades", } return categories[category as keyof typeof categories] || category } const getSubcategoryName = () => { const subcategories = { chat: "Chat", conexoes: "Conexões", mortes: "Mortes", survival: "Survival", comandos: "Comandos", kicks: "Kicks", bans: "Bans", warns: "Warns", transacoes: "Transações", compras: "Compras", vendas: "Vendas", salarios: "Salários", spawn: "Spawn", tunagem: "Tunagem", garagens: "Garagens", casas: "Casas", empresas: "Empresas", acessos: "Acessos", } return subcategories[subcategory as keyof typeof subcategories] || subcategory } useEffect(() => { const fetchLogs = async () => { setLoading(true) try { // In a real app, this would fetch from your API // const res = await fetch(`/api/logs/${category}/${subcategory}`); // const data = await res.json(); // Simulated data for demo let mockLogs: LogEntry[] = [] if (category === "logs_admin" && subcategory === "bans") { mockLogs = [ { id: "1", content: "Usuário banido", timestamp: "2023-08-28T13:15:00Z", category: "logs_admin", subcategory: "bans", user: { id: "admin1", name: "Admin", avatar: "/placeholder.svg?height=40&width=40", }, embed: { title: "Usuário Banido", description: "O jogador **MikeBrown** foi banido permanentemente do servidor.", color: "#e74c3c", fields: [ { name: "Motivo", value: "Uso de cheats (Aimbot)" }, { name: "Admin", value: "AlexModerator" }, { name: "ID Steam", value: "STEAM_0:1:12345678" }, { name: "ID Discord", value: "123456789012345678" }, ], footer: { text: "ID do Ban: BAN-2023-08-28-001", }, timestamp: "2023-08-28T13:15:00Z", }, }, { id: "2", content: "Usuário banido", timestamp: "2023-08-27T10:30:00Z", category: "logs_admin", subcategory: "bans", user: { id: "admin1", name: "Admin", avatar: "/placeholder.svg?height=40&width=40", }, embed: { title: "Usuário Banido", description: "O jogador **JaneDoe** foi banido por 7 dias do servidor.", color: "#e74c3c", fields: [ { name: "Motivo", value: "Ofensas a outros jogadores" }, { name: "Admin", value: "SarahModerator" }, { name: "ID Steam", value: "STEAM_0:1:87654321" }, { name: "Duração", value: "7 dias" }, ], footer: { text: "ID do Ban: BAN-2023-08-27-002", }, timestamp: "2023-08-27T10:30:00Z", }, }, ] } else if (category === "logs_economia" && subcategory === "transacoes") { mockLogs = [ { id: "3", content: "Transferência de dinheiro", timestamp: "2023-08-28T14:10:00Z", category: "logs_economia", subcategory: "transacoes", embed: { title: "Transferência de Dinheiro", description: "Uma transferência de dinheiro foi realizada.", color: "#2ecc71", fields: [ { name: "De", value: "JohnDoe (ID: 1001)" }, { name: "Para", value: "AlexSmith (ID: 1002)" }, { name: "Valor", value: "$50,000" }, { name: "Motivo", value: "Pagamento de carro" }, ], footer: { text: "ID da Transação: TRX-2023-08-28-001", }, timestamp: "2023-08-28T14:10:00Z", }, }, { id: "4", content: "Saque no caixa eletrônico", timestamp: "2023-08-28T13:55:00Z", category: "logs_economia", subcategory: "transacoes", embed: { title: "Saque no Caixa Eletrônico", description: "Um saque foi realizado em um caixa eletrônico.", color: "#e67e22", fields: [ { name: "Jogador", value: "SarahJones (ID: 1003)" }, { name: "Valor", value: "$2,500" }, { name: "Local", value: "Caixa Eletrônico - Centro da Cidade" }, { name: "Saldo Restante", value: "$15,750" }, ], footer: { text: "ID da Transação: ATM-2023-08-28-005", }, timestamp: "2023-08-28T13:55:00Z", }, }, ] } else if (category === "logs_gerais" && subcategory === "chat") { mockLogs = [ { id: "5", content: "Alguém pode me ajudar com uma missão?", timestamp: "2023-08-28T14:30:00Z", category: "logs_gerais", subcategory: "chat", user: { id: "user1", name: "JohnDoe", avatar: "/placeholder.svg?height=40&width=40", }, }, { id: "6", content: "Qual missão você está tentando fazer?", timestamp: "2023-08-28T14:32:00Z", category: "logs_gerais", subcategory: "chat", user: { id: "user2", name: "AlexSmith", avatar: "/placeholder.svg?height=40&width=40", }, }, { id: "7", content: "A missão do banco central, preciso de mais uma pessoa", timestamp: "2023-08-28T14:33:00Z", category: "logs_gerais", subcategory: "chat", user: { id: "user1", name: "JohnDoe", avatar: "/placeholder.svg?height=40&width=40", }, }, ] } else { // Default logs for other categories/subcategories mockLogs = [ { id: "8", content: `Exemplo de log para ${subcategory}`, timestamp: "2023-08-28T14:00:00Z", category, subcategory, user: { id: "system", name: "Sistema", avatar: "/placeholder.svg?height=40&width=40", }, }, { id: "9", content: `Outro exemplo de log para ${subcategory}`, timestamp: "2023-08-27T10:30:00Z", category, subcategory, user: { id: "system", name: "Sistema", avatar: "/placeholder.svg?height=40&width=40", }, }, ] } setLogs(mockLogs) } catch (error) { console.error(`Failed to fetch logs for ${category}/${subcategory}:`, error) } finally { setLoading(false) } } fetchLogs() }, [category, subcategory]) useEffect(() => { // Scroll to bottom when new logs are loaded if (messagesEndRef.current) { messagesEndRef.current.scrollIntoView({ behavior: "smooth" }) } }, [logs]) const renderEmbed = (embed: LogEmbed) => { return (

{embed.author && (

{embed.author.icon_url && (

)} {embed.author.name}

)} {embed.title &&

{embed.title}

} {embed.description &&

{embed.description}

} {embed.thumbnail && (

)} {embed.fields && embed.fields.length > 0 && (

{embed.fields.map((field, index) => (

{field.name}

{field.value}

))}

)} {embed.footer && (

{embed.footer.icon_url && (

)} {embed.footer.text} {embed.timestamp && ( <> • {new Date(embed.timestamp).toLocaleString()} )}

)}

) } const filteredLogs = logs.filter((log) => { if (searchQuery && !log.content?.toLowerCase().includes(searchQuery.toLowerCase())) { return false } if (filters.startDate && new Date(log.timestamp) < filters.startDate) { return false } if (filters.endDate) { const endDateWithTime = new Date(filters.endDate) endDateWithTime.setHours(23, 59, 59, 999) if (new Date(log.timestamp) > endDateWithTime) { return false } } if (filters.users.length > 0 && log.user && !filters.users.includes(log.user.id)) { return false } return true }) return (

{/* Header with filters */}

{getCategoryName()} / {getSubcategoryName()}

setSearchQuery(e.target.value)} />

{/* Filters */} {showFilters && (

Período

setFilters({ ...filters, startDate: date })} initialFocus /> setFilters({ ...filters, endDate: date })} initialFocus />

Usuários

)} {/* Logs Content - Discord-style */} {loading ? (

) : filteredLogs.length === 0 ? (

Nenhum log encontrado para os filtros selecionados

) : (

{filteredLogs.map((log) => (

{(log.user?.name || "S").substring(0, 2).toUpperCase()}

{log.user?.name || "Sistema"} {new Date(log.timestamp).toLocaleString()}

{log.content &&

{log.content}

} {log.embed && renderEmbed(log.embed)}

))}

)}

) } [V0_FILE]typescriptreact:file="app/dashboard/logs/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { getServerSession } from "@/lib/auth" export default async function LogsPage() { const session = await getServerSession() if (!session || !session.user) { redirect("/") } if (!session.user.isApproved) { redirect("/pending-approval") } // Redirect to a default logs category/subcategory redirect("/dashboard/logs/logs_gerais/chat") } [V0_FILE]typescriptreact:file="components/webhooks/webhooks-table.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { MoreHorizontal, Edit, Trash, ExternalLink } from "lucide-react" import { useForm } from "react-hook-form" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" type Webhook = { id: string name: string url: string channel: string categories: string[] subcategories: string[] isActive: boolean lastTriggered?: string } export function WebhooksTable() { const [webhooks, setWebhooks] = useState([]) const [loading, setLoading] = useState(true) const [isDialogOpen, setIsDialogOpen] = useState(false) const [selectedWebhook, setSelectedWebhook] = useState(null) const [categories, setCategories] = useState< { id: string; name: string; subcategories: { id: string; name: string }[] }[] >([]) const formSchema = z.object({ name: z.string().min(2, { message: "Nome deve ter pelo menos 2 caracteres" }), url: z.string().url({ message: "URL inválida" }), channel: z.string().min(1, { message: "Canal é obrigatório" }), categories: z.array(z.string()).min(1, { message: "Selecione pelo menos uma categoria" }), subcategories: z.array(z.string()).min(1, { message: "Selecione pelo menos uma subcategoria" }), isActive: z.boolean().default(true), }) const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { name: "", url: "", channel: "", categories: [], subcategories: [], isActive: true, }, }) useEffect(() => { const fetchCategories = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/logs/categories"); // const data = await res.json(); // Simulated data for demo - categories would be auto-detected from logs const mockCategories = [ { id: "logs_gerais", name: "Logs Gerais", subcategories: [ { id: "chat", name: "Chat" }, { id: "conexoes", name: "Conexões" }, { id: "mortes", name: "Mortes" }, { id: "survival", name: "Survival" }, ], }, { id: "logs_admin", name: "Logs Admin", subcategories: [ { id: "comandos", name: "Comandos" }, { id: "kicks", name: "Kicks" }, { id: "bans", name: "Bans" }, { id: "warns", name: "Warns" }, ], }, { id: "logs_economia", name: "Logs Economia", subcategories: [ { id: "transacoes", name: "Transações" }, { id: "compras", name: "Compras" }, { id: "vendas", name: "Vendas" }, { id: "salarios", name: "Salários" }, ], }, { id: "logs_veiculos", name: "Logs Veículos", subcategories: [ { id: "spawn", name: "Spawn" }, { id: "tunagem", name: "Tunagem" }, { id: "garagens", name: "Garagens" }, ], }, { id: "logs_propriedades", name: "Logs Propriedades", subcategories: [ { id: "casas", name: "Casas" }, { id: "empresas", name: "Empresas" }, { id: "acessos", name: "Acessos" }, ], }, ] setCategories(mockCategories) } catch (error) { console.error("Failed to fetch categories:", error) } } fetchCategories() }, []) useEffect(() => { const fetchWebhooks = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/webhooks"); // const data = await res.json(); // Simulated data for demo setWebhooks([ { id: "1", name: "Admin Alerts", url: "https://discord.com/api/webhooks/123456789/abcdef", channel: "#admin-alerts", categories: ["logs_admin"], subcategories: ["bans", "kicks"], isActive: true, lastTriggered: "2023-06-14T10:30:00Z", }, { id: "2", name: "Chat Logs", url: "https://discord.com/api/webhooks/987654321/ghijkl", channel: "#chat-logs", categories: ["logs_gerais"], subcategories: ["chat"], isActive: true, lastTriggered: "2023-06-13T15:45:00Z", }, { id: "3", name: "Transaction Monitor", url: "https://discord.com/api/webhooks/456789123/mnopqr", channel: "#transactions", categories: ["logs_economia"], subcategories: ["transacoes"], isActive: false, lastTriggered: "2023-06-10T09:15:00Z", }, ]) } catch (error) { console.error("Failed to fetch webhooks:", error) } finally { setLoading(false) } } fetchWebhooks() }, []) const handleEditWebhook = (webhook: Webhook) => { setSelectedWebhook(webhook) form.reset({ name: webhook.name, url: webhook.url, channel: webhook.channel, categories: webhook.categories, subcategories: webhook.subcategories, isActive: webhook.isActive, }) setIsDialogOpen(true) } const handleCreateWebhook = () => { setSelectedWebhook(null) form.reset({ name: "", url: "", channel: "", categories: [], subcategories: [], isActive: true, }) setIsDialogOpen(true) } const handleDeleteWebhook = (webhookId: string) => { setWebhooks((prev) => prev.filter((webhook) => webhook.id !== webhookId)) } const handleToggleWebhook = (webhookId: string, isActive: boolean) => { setWebhooks((prev) => prev.map((webhook) => (webhook.id === webhookId ? { ...webhook, isActive } : webhook))) } const onSubmit = (values: z.infer) => { if (selectedWebhook) { // Update existing webhook setWebhooks((prev) => prev.map((webhook) => (webhook.id === selectedWebhook.id ? { ...webhook, ...values } : webhook)), ) } else { // Create new webhook const newWebhook: Webhook = { id: `webhook-${Date.now()}`, ...values, } setWebhooks((prev) => [...prev, newWebhook]) } setIsDialogOpen(false) } const getCategoryName = (categoryId: string) => { const category = categories.find((c) => c.id === categoryId) return category ? category.name : categoryId } const getSubcategoryName = (subcategoryId: string) => { for (const category of categories) { const subcategory = category.subcategories.find((s) => s.id === subcategoryId) if (subcategory) return subcategory.name } return subcategoryId } const getAvailableSubcategories = () => { const selectedCategories = form.watch("categories") return categories .filter((category) => selectedCategories.includes(category.id)) .flatMap((category) => category.subcategories) } if (loading) { return (

{[...Array(3)].map((_, i) => (

))}

) } return (

Nome Canal Categorias Subcategorias Último Disparo Status Ações {webhooks.map((webhook) => ( {webhook.name} {webhook.channel}

{webhook.categories.map((categoryId) => ( {getCategoryName(categoryId)} ))}

{webhook.subcategories.map((subcategoryId) => ( {getSubcategoryName(subcategoryId)} ))}

{webhook.lastTriggered ? new Date(webhook.lastTriggered).toLocaleString() : "Nunca"} handleToggleWebhook(webhook.id, checked)} /> Ações handleEditWebhook(webhook)}> Editar handleDeleteWebhook(webhook.id)}> Excluir Abrir no Discord ))}

) } [V0_FILE]typescriptreact:file="components/ui/section-header.tsx" isMerged="true" import type React from "react" import { cn } from "@/lib/utils" interface SectionHeaderProps { title: string description?: string className?: string actions?: React.ReactNode } export function SectionHeader({ title, description, className, actions }: SectionHeaderProps) { return (

{title}

{description &&

{description}

}

{actions &&

{actions}

}

) } [V0_FILE]typescriptreact:file="components/ui/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; /* Sidebar variables */ --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 240 10% 4%; --foreground: 0 0% 98%; --card: 240 10% 6%; --card-foreground: 0 0% 98%; --popover: 240 10% 6%; --popover-foreground: 0 0% 98%; --primary: 217 91% 60%; --primary-foreground: 0 0% 98%; --secondary: 240 5% 12%; --secondary-foreground: 0 0% 98%; --muted: 240 5% 10%; --muted-foreground: 240 5% 65%; --accent: 217 91% 60%; --accent-foreground: 0 0% 98%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5% 15%; --input: 240 5% 15%; --ring: 217 91% 60%; /* Sidebar variables */ --sidebar-background: 240 10% 5%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 217 91% 60%; --sidebar-primary-foreground: 240 5.9% 10%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: hsl(var(--muted)); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); } /* Animations */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Animation classes */ .animate-fadeIn { animation: fadeIn 0.5s ease-in-out; } .animate-slideInUp { animation: slideInUp 0.5s ease-out; } .animate-slideInRight { animation: slideInRight 0.5s ease-out; } .animate-bounce-slow { animation: bounce 2s infinite; } /* Glass effect */ .glass-effect { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } /* Card hover effects */ .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } /* Gradient text */ .gradient-text { background: linear-gradient(90deg, hsl(var(--primary)), hsl(217, 91%, 60%)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Glow effect */ .glow { box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); } .glow-text { text-shadow: 0 0 10px rgba(59, 130, 246, 0.5); } /* Discord-style log */ .discord-log { border-left: 4px solid hsl(var(--primary)); background: hsl(var(--card)); padding: 12px; margin-bottom: 12px; border-radius: var(--radius); transition: all 0.2s ease; } .discord-log:hover { transform: translateX(2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Loading animation */ .loading-dots:after { content: "."; animation: dots 1.5s steps(5, end) infinite; } @keyframes dots { 0%, 20% { content: "."; } 40% { content: ".."; } 60% { content: "..."; } 80%, 100% { content: ""; } } /* Shimmer effect for loading states */ .shimmer { background: linear-gradient( 90deg, hsl(var(--muted)) 0%, hsl(var(--muted-foreground) / 0.1) 50%, hsl(var(--muted)) 100% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Table row hover animation */ .table-row-hover { transition: all 0.2s ease; } .table-row-hover:hover { background-color: hsl(var(--muted)); transform: scale(1.01); } /* Sidebar active item indicator */ .sidebar-active-item { position: relative; } .sidebar-active-item::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; height: 20px; background: hsl(var(--primary)); border-radius: 0 4px 4px 0; } /* Badge pulse animation */ .badge-pulse { animation: pulse 2s infinite; } [V0_FILE]typescriptreact:file="components/ui/loading-spinner.tsx" isMerged="true" "use client" import { cn } from "@/lib/utils" import { motion } from "framer-motion" interface LoadingSpinnerProps { size?: number className?: string variant?: "default" | "dots" | "pulse" | "bars" } export function LoadingSpinner({ size = 24, className, variant = "default" }: LoadingSpinnerProps) { if (variant === "dots") { return (

{[0, 1, 2].map((i) => ( ))}

) } if (variant === "pulse") { return (

) } if (variant === "bars") { return (

{[0, 1, 2, 3].map((i) => ( ))}

) } // Default spinner return ( ) } [V0_FILE]typescriptreact:file="components/ui/page-transition.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { motion, AnimatePresence } from "framer-motion" interface PageTransitionProps { children: React.ReactNode className?: string } export function PageTransition({ children, className }: PageTransitionProps) { const [isVisible, setIsVisible] = useState(false) useEffect(() => { setIsVisible(true) return () => setIsVisible(false) }, []) return ( {isVisible && ( {children} )} ) } [V0_FILE]typescriptreact:file="components/ui/skeleton-pulse.tsx" isMerged="true" import { cn } from "@/lib/utils" interface SkeletonPulseProps { className?: string width?: number | string height?: number | string } export function SkeletonPulse({ className, width, height }: SkeletonPulseProps) { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/logs/[category]/[subcategory]/page.tsx" isMerged="true" import { LogsInterface } from "@/components/logs/logs-interface" interface LogsPageProps { params: { category: string subcategory: string } } export default function LogsPage({ params }: LogsPageProps) { return (

) } [V0_FILE]typescriptreact:file="app/dashboard/notifications/page.tsx" isMerged="true" import { SectionHeader } from "@/components/ui/section-header" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { CheckCircle, AlertCircle, Info, Settings, MoreHorizontal, Clock } from "lucide-react" import { format } from "date-fns" import { ptBR } from "date-fns/locale" export default function NotificationsPage() { // Dados simulados para demonstração const notifications = [ { id: "1", title: "Nova licença adquirida", message: "O cliente 'Servidor RP Horizonte' adquiriu uma nova licença.", type: "success", read: false, timestamp: "2023-09-01T10:30:00Z", }, { id: "2", title: "Licença expirando", message: "A licença do cliente 'RP Cidade Alta' expira em 3 dias.", type: "warning", read: false, timestamp: "2023-09-01T09:15:00Z", }, { id: "3", title: "Erro no sistema", message: "Falha ao processar logs do servidor 'RP Brasil'. Verifique a conexão.", type: "error", read: false, timestamp: "2023-08-31T22:45:00Z", }, { id: "4", title: "Atualização disponível", message: "Nova versão 2.5.0 do sistema de logs está disponível para instalação.", type: "info", read: true, timestamp: "2023-08-30T14:20:00Z", }, { id: "5", title: "Novo cliente registrado", message: "O cliente 'Servidor RP Vida Real' se registrou na plataforma.", type: "success", read: true, timestamp: "2023-08-29T11:10:00Z", }, ] const unreadCount = notifications.filter((n) => !n.read).length const getNotificationIcon = (type: string) => { switch (type) { case "success": return case "warning": return case "error": return case "info": default: return } } return (

Configurações } /> Todas {notifications.length} Não lidas {unreadCount} Lidas {notifications.length - unreadCount} {notifications.map((notification) => ( ))} {notifications .filter((n) => !n.read) .map((notification) => ( ))} {notifications .filter((n) => n.read) .map((notification) => ( ))}

) function NotificationCard({ notification }: { notification: any }) { return (

{getNotificationIcon(notification.type)}

{notification.title}

{format(new Date(notification.timestamp), "dd MMM yyyy 'às' HH:mm", { locale: ptBR, })}

{notification.message}

{!notification.read && ( )}

) } } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isQuickEdit="true" isMerged="true" import type React from "react" import { Sidebar } from "@/components/sidebar" export default function DashboardLayout({ children }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { motion, AnimatePresence } from "framer-motion" import { BarChart3, Users, Settings, LogOut, ChevronDown, Bell, Webhook, FileText, Home, Menu, X } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" interface SidebarProps { className?: string } interface SidebarItemProps { icon: React.ElementType label: string href: string active?: boolean badge?: number onClick?: () => void isCollapsed?: boolean } interface SidebarCategoryProps { label: string icon: React.ElementType children: React.ReactNode defaultOpen?: boolean isCollapsed?: boolean } function SidebarItem({ icon: Icon, label, href, active, badge, onClick, isCollapsed }: SidebarItemProps) { const content = (

{!isCollapsed && {label}} {badge !== undefined && !isCollapsed && ( {badge} )}

) if (onClick) { return ( ) } return ( {isCollapsed ? ( {content} {label} ) : ( content )} ) } function SidebarCategory({ label, icon: Icon, children, defaultOpen = false, isCollapsed }: SidebarCategoryProps) { const [isOpen, setIsOpen] = useState(defaultOpen) // If sidebar is collapsed, force category to be closed useEffect(() => { if (isCollapsed) { setIsOpen(false) } }, [isCollapsed]) return (

{isCollapsed ? (

{children} ) : ( {isOpen && (

{children}

)} )}

) } // Componente para categoria de logs function LogCategory({ category, pathname, isCollapsed, }: { category: { id: string name: string subcategories: { id: string; name: string }[] } pathname: string isCollapsed: boolean }) { const [isOpen, setIsOpen] = useState(false) // Verificar se alguma subcategoria está ativa const isActive = category.subcategories.some( (subcategory) => pathname === `/dashboard/logs/${category.id}/${subcategory.id}`, ) // Se o sidebar estiver colapsado, forçar categoria a ficar fechada useEffect(() => { if (isCollapsed) { setIsOpen(false) } }, [isCollapsed]) return (

{!isCollapsed && ( {isOpen && (

{category.subcategories.map((subcategory) => (

{subcategory.name} ))}

)} )}

) } export function Sidebar({ className }: SidebarProps) { const pathname = usePathname() const [isCollapsed, setIsCollapsed] = useState(false) const [isMobileOpen, setIsMobileOpen] = useState(false) const [logsExpanded, setLogsExpanded] = useState(false) // Define log categories and subcategories const logCategories = [ { id: "logs_gerais", name: "Logs Gerais", subcategories: [ { id: "chat", name: "Chat" }, { id: "conexoes", name: "Conexões" }, { id: "mortes", name: "Mortes" }, { id: "survival", name: "Survival" }, ], }, { id: "logs_admin", name: "Logs Admin", subcategories: [ { id: "comandos", name: "Comandos" }, { id: "kicks", name: "Kicks" }, { id: "bans", name: "Bans" }, { id: "warns", name: "Warns" }, ], }, { id: "logs_economia", name: "Logs Economia", subcategories: [ { id: "transacoes", name: "Transações" }, { id: "compras", name: "Compras" }, { id: "vendas", name: "Vendas" }, { id: "salarios", name: "Salários" }, ], }, { id: "logs_veiculos", name: "Logs Veículos", subcategories: [ { id: "spawn", name: "Spawn" }, { id: "tunagem", name: "Tunagem" }, { id: "garagens", name: "Garagens" }, ], }, { id: "logs_propriedades", name: "Logs Propriedades", subcategories: [ { id: "casas", name: "Casas" }, { id: "empresas", name: "Empresas" }, { id: "acessos", name: "Acessos" }, ], }, ] // Verificar se estamos em alguma página de logs const isLogsPage = pathname.includes("/dashboard/logs") return ( <> {/* Mobile sidebar toggle */} {/* Mobile overlay */} {isMobileOpen && ( setIsMobileOpen(false)} /> )} {/* Sidebar */} {/* Header */}

{!isCollapsed && ( FiveM Logs )}

{/* Scrollable content */}

{/* Logs section with toggle */}

{/* Logs categories */} {!isCollapsed && ( {logsExpanded && (

{logCategories.map((category) => ( ))}

)} )}

{/* Footer - always visible */}

AD {!isCollapsed && (

Admin admin@example.com

)}

{!isCollapsed && ( )}

) } [V0_FILE]typescriptreact:file="components/users/role-permissions.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import { Slider } from "@/components/ui/slider" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Plus, Save, Trash, Edit, Shield, Eye, EyeOff, Lock } from "lucide-react" import { ScrollArea } from "@/components/ui/scroll-area" type Role = { id: string name: string color: string level: number permissions: { viewLogs: boolean maxLogLevel: number manageUsers: boolean manageWebhooks: boolean manageSettings: boolean viewStats: boolean exportLogs: boolean deleteUsers: boolean createRoles: boolean deleteRoles: boolean editRoles: boolean } } export function RolePermissions() { const [roles, setRoles] = useState([ { id: "1", name: "Administrador", color: "#FF5555", level: 100, permissions: { viewLogs: true, maxLogLevel: 100, manageUsers: true, manageWebhooks: true, manageSettings: true, viewStats: true, exportLogs: true, deleteUsers: true, createRoles: true, deleteRoles: true, editRoles: true, }, }, { id: "2", name: "Moderador", color: "#5555FF", level: 50, permissions: { viewLogs: true, maxLogLevel: 75, manageUsers: true, manageWebhooks: false, manageSettings: false, viewStats: true, exportLogs: true, deleteUsers: false, createRoles: false, deleteRoles: false, editRoles: false, }, }, { id: "3", name: "Usuário", color: "#55AA55", level: 10, permissions: { viewLogs: true, maxLogLevel: 25, manageUsers: false, manageWebhooks: false, manageSettings: false, viewStats: true, exportLogs: false, deleteUsers: false, createRoles: false, deleteRoles: false, editRoles: false, }, }, ]) const [selectedRole, setSelectedRole] = useState(null) const [newRole, setNewRole] = useState>({ name: "", color: "#7C3AED", level: 25, permissions: { viewLogs: true, maxLogLevel: 50, manageUsers: false, manageWebhooks: false, manageSettings: false, viewStats: true, exportLogs: false, deleteUsers: false, createRoles: false, deleteRoles: false, editRoles: false, }, }) const [isNewRoleDialogOpen, setIsNewRoleDialogOpen] = useState(false) const [isEditRoleDialogOpen, setIsEditRoleDialogOpen] = useState(false) const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) const handleCreateRole = () => { const id = `role-${Date.now()}` setRoles([...roles, { id, ...newRole }]) setNewRole({ name: "", color: "#7C3AED", level: 25, permissions: { viewLogs: true, maxLogLevel: 50, manageUsers: false, manageWebhooks: false, manageSettings: false, viewStats: true, exportLogs: false, deleteUsers: false, createRoles: false, deleteRoles: false, editRoles: false, }, }) setIsNewRoleDialogOpen(false) } const handleUpdateRole = () => { if (selectedRole) { setRoles(roles.map((role) => (role.id === selectedRole.id ? selectedRole : role))) setIsEditRoleDialogOpen(false) } } const handleDeleteRole = () => { if (selectedRole) { setRoles(roles.filter((role) => role.id !== selectedRole.id)) setIsDeleteDialogOpen(false) } } const handlePermissionChange = (roleId: string, permission: keyof Role["permissions"], value: boolean | number) => { setRoles( roles.map((role) => { if (role.id === roleId) { return { ...role, permissions: { ...role.permissions, [permission]: value, }, } } return role }), ) } const handleEditSelectedPermissionChange = (permission: keyof Role["permissions"], value: boolean | number) => { if (selectedRole) { setSelectedRole({ ...selectedRole, permissions: { ...selectedRole.permissions, [permission]: value, }, }) } } const handleNewRolePermissionChange = (permission: keyof Role["permissions"], value: boolean | number) => { setNewRole({ ...newRole, permissions: { ...newRole.permissions, [permission]: value, }, }) } return (

Configuração de Cargos e Permissões

{roles.map((role) => ( {role.name} Nível {role.level} ))} {roles.map((role) => (

{role.name} Nível {role.level} - Configure as permissões deste cargo

Permissões de Visualização

Ver Logs handlePermissionChange(role.id, "viewLogs", checked)} />

{role.permissions.viewLogs && (

Nível Máximo de Logs

Logs acima deste nível serão ocultados

handlePermissionChange(role.id, "maxLogLevel", value[0])} /> {role.permissions.maxLogLevel}

)}

Ver Estatísticas handlePermissionChange(role.id, "viewStats", checked)} />

Permissões de Gerenciamento

Gerenciar Usuários handlePermissionChange(role.id, "manageUsers", checked)} />

Gerenciar Webhooks handlePermissionChange(role.id, "manageWebhooks", checked)} />

Gerenciar Configurações handlePermissionChange(role.id, "manageSettings", checked)} />

Exportar Logs handlePermissionChange(role.id, "exportLogs", checked)} />

Excluir Usuários handlePermissionChange(role.id, "deleteUsers", checked)} />

Permissões de Cargos

Criar Cargos handlePermissionChange(role.id, "createRoles", checked)} />

Editar Cargos handlePermissionChange(role.id, "editRoles", checked)} />

Excluir Cargos handlePermissionChange(role.id, "deleteRoles", checked)} />

))}

) } [V0_FILE]typescriptreact:file="app/dashboard/users/page.tsx" isMerged="true" import { SectionHeader } from "@/components/ui/section-header" import { UsersTable } from "@/components/users/users-table" import { RolePermissions } from "@/components/users/role-permissions" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function UsersPage() { return (

Usuários Cargos e Permissões

) } [V0_FILE]typescriptreact:file="components/logs/discord-embed.tsx" isQuickEdit="true" isMerged="true" "\"use client" interface DiscordEmbedProps { embed: { author?: { name: string icon_url?: string } title?: string description?: string color?: string fields?: { name: string value: string inline?: boolean }[] footer?: { text: string icon_url?: string } thumbnail?: { url: string } timestamp?: string } } export function DiscordEmbed({ embed }: DiscordEmbedProps) { return (

{embed.author && (

{embed.author.icon_url && (

)} {embed.author.name}

)} {embed.title &&

{embed.title}

} {embed.description &&

{embed.description}

} {embed.thumbnail && (

)} {embed.fields && embed.fields.length > 0 && (

{embed.fields.map((field, index) => (

{field.name}

{field.value}

))}

)} {embed.footer && (

{embed.footer.icon_url && (

)} {embed.footer.text} {embed.timestamp && ( <> • {new Date(embed.timestamp).toLocaleString()} )}

)}

) } [V0_FILE]typescriptreact:file="components/logs/logs-filter.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { DatePicker } from "@/components/ui/date-picker" import { Search, RefreshCw, Filter, ChevronDown, ChevronUp, Clock, User, Hash } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { motion, AnimatePresence } from "framer-motion" import { Card, CardContent } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" export function LogsFilter() { const [filters, setFilters] = useState({ type: "", playerId: "", severity: "", startDate: null as Date | null, endDate: null as Date | null, content: "", minLevel: 0, maxLevel: 100, showAdvanced: false, }) const [selectedTags, setSelectedTags] = useState([]) const [isExpanded, setIsExpanded] = useState(false) const handleChange = (field: string, value: any) => { setFilters((prev) => ({ ...prev, [field]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // In a real app, this would trigger a fetch with the filters console.log("Applying filters:", filters) } const handleReset = () => { setFilters({ type: "", playerId: "", severity: "", startDate: null, endDate: null, content: "", minLevel: 0, maxLevel: 100, showAdvanced: false, }) setSelectedTags([]) } const toggleTag = (tag: string) => { if (selectedTags.includes(tag)) { setSelectedTags(selectedTags.filter((t) => t !== tag)) } else { setSelectedTags([...selectedTags, tag]) } } const commonTags = [ "Conexão", "Desconexão", "Spawn", "Morte", "Dinheiro", "Inventário", "Veículo", "Arma", "Chat", "Comando", "Admin", "Erro", ] return (

Pesquisa

handleChange("content", e.target.value)} className="pl-4 border-primary/20 bg-background/50 focus-visible:ring-primary" />

Tipo de Log

Severidade

{selectedTags.map((tag) => ( toggleTag(tag)} > {tag} × ))}

{commonTags.map((tag) => ( toggleTag(tag)} > {tag} ))}

{filters.showAdvanced && (

ID do Jogador handleChange("playerId", e.target.value)} className="border-primary/20 bg-background/50" />

Nível do Log

{ handleChange("minLevel", value[0]) handleChange("maxLevel", value[1]) }} className="[&>span]:bg-primary" />

{filters.minLevel} {filters.maxLevel}

Data Inicial handleChange("startDate", date)} placeholder="Selecione a data inicial" className="border-primary/20 bg-background/50" />

Data Final handleChange("endDate", date)} placeholder="Selecione a data final" className="border-primary/20 bg-background/50" />

)}

) } [V0_FILE]typescriptreact:file="components/dashboard/overview.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { FileText, AlertTriangle, AlertOctagon, Info, AlertCircle } from "lucide-react" import { Bar, BarChart, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, PieChart, Pie, Cell, } from "recharts" // Dados simulados para todas as categorias const logActivityData = [ { name: "00:00", admin: 5, gerais: 12, economia: 8, veiculos: 3, propriedades: 2, }, { name: "03:00", admin: 3, gerais: 8, economia: 5, veiculos: 2, propriedades: 1, }, { name: "06:00", admin: 7, gerais: 15, economia: 10, veiculos: 4, propriedades: 3, }, { name: "09:00", admin: 12, gerais: 25, economia: 18, veiculos: 8, propriedades: 5, }, { name: "12:00", admin: 15, gerais: 30, economia: 22, veiculos: 10, propriedades: 7, }, { name: "15:00", admin: 18, gerais: 35, economia: 25, veiculos: 12, propriedades: 9, }, { name: "18:00", admin: 20, gerais: 40, economia: 30, veiculos: 15, propriedades: 10, }, { name: "21:00", admin: 15, gerais: 32, economia: 24, veiculos: 11, propriedades: 8, }, ] const weeklyLogData = [ { name: "Seg", logs: 120, alertas: 5, }, { name: "Ter", logs: 140, alertas: 8, }, { name: "Qua", logs: 135, alertas: 6, }, { name: "Qui", logs: 150, alertas: 10, }, { name: "Sex", logs: 180, alertas: 12, }, { name: "Sáb", logs: 210, alertas: 15, }, { name: "Dom", logs: 200, alertas: 14, }, ] const logCategoryData = [ { name: "Admin", value: 35 }, { name: "Gerais", value: 40 }, { name: "Economia", value: 15 }, { name: "Veículos", value: 10 }, { name: "Propriedades", value: 5 }, ] const COLORS = ["#4f46e5", "#16a34a", "#ea580c", "#9333ea", "#e11d48"] const logSeverityData = [ { name: "Info", valor: 65, }, { name: "Warning", valor: 28, }, { name: "Error", valor: 15, }, { name: "Critical", valor: 5, }, ] export function Overview() { // Função para gerar dados dinâmicos const getDynamicData = () => { // Em um cenário real, esses dados viriam da API const totalLogs = Math.floor(Math.random() * 3000) + 1000 // Distribuição por severidade (percentuais aproximados) const infoPercent = 0.65 const warningPercent = 0.25 const errorPercent = 0.08 const criticalPercent = 0.02 const infoLogs = Math.floor(totalLogs * infoPercent) const warningLogs = Math.floor(totalLogs * warningPercent) const errorLogs = Math.floor(totalLogs * errorPercent) const criticalLogs = Math.floor(totalLogs * criticalPercent) return { totalLogs, infoLogs, warningLogs, errorLogs, criticalLogs, // Diferenças para "desde ontem" totalDiff: Math.floor(Math.random() * 300) - 50, infoDiff: Math.floor(Math.random() * 200) - 30, warningDiff: Math.floor(Math.random() * 50) - 10, errorDiff: Math.floor(Math.random() * 20) - 5, criticalDiff: Math.floor(Math.random() * 5) - 2, } } const dynamicData = getDynamicData() return (

Total de Logs

+{dynamicData.totalLogs.toLocaleString()}

{dynamicData.totalDiff >= 0 ? "+" : ""} {dynamicData.totalDiff} desde ontem

Logs Info

+{dynamicData.infoLogs.toLocaleString()}

{dynamicData.infoDiff >= 0 ? "+" : ""} {dynamicData.infoDiff} desde ontem

Logs Warning

+{dynamicData.warningLogs.toLocaleString()}

{dynamicData.warningDiff >= 0 ? "+" : ""} {dynamicData.warningDiff} desde ontem

Logs Error

+{dynamicData.errorLogs}

{dynamicData.errorDiff >= 0 ? "+" : ""} {dynamicData.errorDiff} desde ontem

Logs Critical

+{dynamicData.criticalLogs}

{dynamicData.criticalDiff >= 0 ? "+" : ""} {dynamicData.criticalDiff} desde ontem

Atividade de Logs Logs registrados nas últimas 24 horas Atividade Categorias Severidade

Logs Admin

Logs Gerais

Logs Economia

Logs Veículos

Logs Propriedades

`${name}: ${(percent * 100).toFixed(0)}%`} > {logCategoryData.map((entry, index) => ( ))} [`${value} logs`, "Quantidade"]} />

{logCategoryData.map((entry, index) => (

{entry.name}

))}

[`${value} logs`, "Quantidade"]} /> {logCategoryData.map((entry, index) => ( ))}

`${name}: ${(percent * 100).toFixed(0)}%`} > {/* Info - Blue */} {/* Warning - Yellow */} {/* Error - Red */} {/* Critical - Dark Red */} [`${value} logs`, "Quantidade"]} />

Info

Warning

Error

Critical

[`${value} logs`, "Quantidade"]} /> {/* Info - Blue */} {/* Warning - Yellow */} {/* Error - Red */} {/* Critical - Dark Red */}

) } [V0_FILE]typescriptreact:file="components/logs/logs-discord-view.tsx" isQuickEdit="true" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" import { format } from "date-fns" import { ptBR } from "date-fns/locale" import { Copy, Download, MoreHorizontal } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" // Tipo completo para embeds do Discord interface DiscordEmbed { title?: string description?: string url?: string timestamp?: string color?: string footer?: { text: string icon_url?: string } image?: { url: string } thumbnail?: { url: string } author?: { name: string url?: string icon_url?: string } fields?: { name: string value: string inline?: boolean }[] } // Modificar a interface LogEntry para remover a propriedade user interface Log { id: string timestamp: string category: string subcategory: string content: string type?: string severity?: string embed?: DiscordEmbed } interface LogsDiscordViewProps { log?: Log } // Função para renderizar texto com formatação Markdown do Discord function renderDiscordMarkdown(text: string) { // Substituir **texto** por texto let formattedText = text.replace(/\*\*(.*?)\*\*/g, "$1") // Substituir *texto* por texto formattedText = formattedText.replace(/\*(.*?)\*/g, "$1") // Substituir __texto__ por texto formattedText = formattedText.replace(/__(.*?)__/g, "$1") // Substituir ~~texto~~ por ~~texto~~ formattedText = formattedText.replace(/~~(.*?)~~/g, "$1") // Substituir `texto` por texto formattedText = formattedText.replace(/`(.*?)`/g, "$1") // Substituir \`\`\`texto\`\`\` por

texto

formattedText = formattedText.replace( /```(.*?)```/gs, "

$1

", ) // Substituir > texto por blockquote formattedText = formattedText.replace( /^> (.*)$/gm, "

$1

", ) // Substituir URLs por links formattedText = formattedText.replace( /(https?:\/\/[^\s]+)/g, "$1", ) return formattedText } // Componente para exibir um único embed do Discord export function DiscordEmbed({ embed }: { embed: DiscordEmbed }) { return (

{/* Autor */} {embed.author && (

{embed.author.name}

)} {/* Título */} {embed.title && (

{embed.url ? ( {embed.title} ) : (

{embed.title}

)}

)} {/* Descrição */} {embed.description && (

)} {/* Campos */} {embed.fields && embed.fields.length > 0 && (

{embed.fields.map((field, index) => (

{field.name}

))}

)} {/* Footer */} {(embed.footer || embed.timestamp) && (

{embed.footer && {embed.footer.text}} {embed.timestamp && ( <> {embed.footer && •} {format(new Date(embed.timestamp), "dd MMM yyyy 'às' HH:mm", { locale: ptBR })} )}

)}

) } // Modificar a função LogsDiscordView para usar informações do embed em vez de user export function LogsDiscordView({ log }: LogsDiscordViewProps) { // Se não houver log, exibir um exemplo const exampleLog: Log = log || { id: "example", timestamp: new Date().toISOString(), category: "logs_admin", subcategory: "bans", content: "Usuário banido", embed: { title: "Usuário Banido", description: "O jogador **MikeBrown** foi banido permanentemente do servidor.", color: "#e74c3c", fields: [ { name: "Motivo", value: "Uso de cheats (Aimbot)", inline: true }, { name: "Admin", value: "AlexModerator", inline: true }, { name: "ID Steam", value: "STEAM_0:1:12345678", inline: true }, { name: "ID Discord", value: "123456789012345678", inline: false }, ], footer: { text: "ID do Ban: BAN-2023-08-28-001", }, timestamp: new Date().toISOString(), }, } const currentLog = log || exampleLog const formattedDate = format(new Date(currentLog.timestamp), "dd MMM yyyy 'às' HH:mm", { locale: ptBR }) // Obter o nome do jogador do embed const playerName = currentLog.embed?.fields?.find((f) => f.name === "Jogador")?.value || currentLog.embed?.fields?.find((f) => f.name.toLowerCase().includes("jogador"))?.value || "Desconhecido" return (

{/* Identificador do usuário (substituindo o avatar) */} {/*

{currentLog.user?.name.charAt(0) || "?"}

*/}

{/* Cabeçalho da mensagem */}

{playerName} {formattedDate} {currentLog.subcategory} {/* Menu de ações */}

Copiar Exportar

{/* Conteúdo da mensagem */}

{currentLog.content}

{/* Embed do Discord */} {currentLog.embed && }

) } [V0_FILE]typescriptreact:file="components/logs/logs-table.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationNext, } from "@/components/ui/pagination" import { Eye, ChevronDown, ChevronUp, Copy, Clock, AlertCircle } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { cn } from "@/lib/utils" import { format } from "date-fns" import { ptBR } from "date-fns/locale" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Card, CardContent } from "@/components/ui/card" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" type LogEntry = { id: string type: "ban" | "kick" | "chat" | "transaction" | "login" | "death" | "spawn" | "command" | "error" | "admin" severity: "info" | "warning" | "error" | "critical" timestamp: string content: string message?: string details?: string ip?: string serverId?: string data?: Record category?: string subcategory?: string source?: string embed?: { title?: string description?: string color?: string fields?: { name: string value: string inline?: boolean }[] footer?: { text: string } timestamp?: string } } // Atualizar a interface de props para aceitar logs diretamente interface LogsTableProps { category?: string subcategory?: string logs?: LogEntry[] loading?: boolean } export function LogsTable({ category, subcategory, logs: propLogs, loading: propLoading }: LogsTableProps) { const [logs, setLogs] = useState([]) const [loading, setLoading] = useState(true) const [page, setPage] = useState(1) const [totalPages, setTotalPages] = useState(1) const [sort, setSort] = useState({ field: "timestamp", direction: "desc" }) const [selectedLog, setSelectedLog] = useState(null) const [isDialogOpen, setIsDialogOpen] = useState(false) const [copied, setCopied] = useState(false) useEffect(() => { // Se logs forem fornecidos como prop, use-os if (propLogs) { setLogs(propLogs) setLoading(false) setTotalPages(Math.max(1, Math.ceil(propLogs.length / 10))) return } // Caso contrário, busque logs com base na categoria/subcategoria if (propLoading !== undefined) { setLoading(propLoading) } else { setLoading(true) } const fetchLogs = async () => { try { // Simulate loading await new Promise((resolve) => setTimeout(resolve, 800)) // Simulated data for demo const mockLogs: LogEntry[] = Array.from({ length: 20 }, (_, i) => { const types = [ "ban", "kick", "chat", "transaction", "login", "death", "spawn", "command", "error", "admin", ] as const const severities = ["info", "warning", "error", "critical"] as const return { id: `log-${i + 1}`, type: types[Math.floor(Math.random() * types.length)], severity: severities[Math.floor(Math.random() * severities.length)], content: `Log ${i + 1} para ${subcategory || "todos"}`, timestamp: new Date(Date.now() - Math.floor(Math.random() * 7 * 24 * 60 * 60 * 1000)).toISOString(), category: category || "logs_admin", subcategory: subcategory || "bans", embed: { title: `Log de ${subcategory || "exemplo"}`, description: `Este é um log para a categoria ${category || "logs_admin"} e subcategoria ${subcategory || "bans"}.`, color: ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6"][Math.floor(Math.random() * 5)], fields: [ { name: "Categoria", value: category || "logs_admin", inline: true }, { name: "Subcategoria", value: subcategory || "bans", inline: true }, { name: "ID", value: `LOG-${Date.now()}-${i}`, inline: true }, { name: "Detalhes", value: "Este é um log gerado dinamicamente.", inline: false }, ], footer: { text: "Sistema de Logs FiveM", }, timestamp: new Date().toISOString(), }, } }) setLogs(mockLogs) setTotalPages(Math.ceil(mockLogs.length / 10)) setLoading(false) } catch (error) { console.error("Failed to fetch logs:", error) setLoading(false) } } if (!propLogs) { fetchLogs() } }, [category, subcategory, propLogs, propLoading]) const handleSort = (field: string) => { setSort((prev) => ({ field, direction: prev.field === field && prev.direction === "asc" ? "desc" : "asc", })) } const handleViewLog = (log: LogEntry) => { setSelectedLog(log) setIsDialogOpen(true) } const handleCopyLog = (log: LogEntry) => { navigator.clipboard.writeText(JSON.stringify(log, null, 2)) setCopied(true) setTimeout(() => setCopied(false), 2000) } const getLogTypeColor = (type?: LogEntry["type"]) => { if (!type) return "bg-gray-500/20 text-gray-500 border-gray-500/50" switch (type) { case "ban": return "bg-red-500/20 text-red-500 border-red-500/50" case "kick": return "bg-orange-500/20 text-orange-500 border-orange-500/50" case "chat": return "bg-blue-500/20 text-blue-500 border-blue-500/50" case "transaction": return "bg-green-500/20 text-green-500 border-green-500/50" case "login": return "bg-purple-500/20 text-purple-500 border-purple-500/50" case "death": return "bg-red-500/20 text-red-500 border-red-500/50" case "spawn": return "bg-green-500/20 text-green-500 border-green-500/50" case "command": return "bg-yellow-500/20 text-yellow-500 border-yellow-500/50" case "error": return "bg-red-500/20 text-red-500 border-red-500/50" case "admin": return "bg-blue-500/20 text-blue-500 border-blue-500/50" default: return "bg-gray-500/20 text-gray-500 border-gray-500/50" } } const getSeverityColor = (severity?: LogEntry["severity"]) => { if (!severity) return "bg-gray-500/20 text-gray-500 border-gray-500/50" switch (severity) { case "info": return "bg-blue-500/20 text-blue-500 border-blue-500/50" case "warning": return "bg-yellow-500/20 text-yellow-500 border-yellow-500/50" case "error": return "bg-red-500/20 text-red-500 border-red-500/50" case "critical": return "bg-red-500/20 text-red-500 border-red-500/50 border-2" default: return "bg-gray-500/20 text-gray-500 border-gray-500/50" } } const SortIcon = ({ field }: { field: string }) => { if (sort.field !== field) return null return sort.direction === "asc" ? ( ) : ( ) } if (loading) { return (

{Array.from({ length: 5 }).map((_, i) => (

))}

) } return (

handleSort("type")}>

Tipo

handleSort("source")}>

Fonte

handleSort("timestamp")}>

Data/Hora

Mensagem Ações {logs.map((log, index) => (

{log.type ? ( {log.type.toUpperCase()} ) : ( GENERICO )} {log.severity && log.severity !== "info" && ( {log.severity.toUpperCase()} )}

{log.embed?.fields?.find((f) => f.name === "Jogador")?.value || log.embed?.fields?.find((f) => f.name.toLowerCase().includes("jogador"))?.value || "Desconhecido"}

{format(new Date(log.timestamp), "HH:mm:ss")}

{format(new Date(log.timestamp), "PPP 'às' HH:mm:ss", { locale: ptBR })} {log.severity === "critical" && ( )} {log.content}

{copied ? "Copiado!" : "Copiar log"}

))}

Mostrando página {page} de {totalPages}

setPage((p) => Math.max(1, p - 1))} disabled={page === 1} className={page === 1 ? "opacity-50 cursor-not-allowed" : "hover:bg-primary/10"} /> {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => ( ))} setPage((p) => Math.min(totalPages, p + 1))} disabled={page === totalPages} className={page === totalPages ? "opacity-50 cursor-not-allowed" : "hover:bg-primary/10"} />

) } [V0_FILE]typescriptreact:file="components/logs/logs-interface.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { LogsFilter } from "@/components/logs/logs-filter" import { LogsTable } from "@/components/logs/logs-table" import { SectionHeader } from "@/components/ui/section-header" import { Button } from "@/components/ui/button" import { Download, RefreshCw } from "lucide-react" import { PageTransition } from "@/components/ui/page-transition" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { LogsDiscordView } from "@/components/logs/logs-discord-view" import { useRef } from "react" type LogCategory = { id: string name: string subcategories: LogSubcategory[] isExpanded: boolean } type LogSubcategory = { id: string name: string isExpanded: boolean } type LogEntry = { id: string content: string timestamp: string category: string subcategory: string type: string severity: string message?: string source?: string metadata?: Record embed?: { title?: string description?: string color?: string fields?: { name: string value: string inline?: boolean }[] footer?: { text: string } timestamp?: string } } interface LogsInterfaceProps { category?: string subcategory?: string } // Função para gerar logs de forma dinâmica - Centralizada para ser usada em todos os componentes export function generateLogs(count: number, baseConfig: Partial) { const types = ["ban", "kick", "chat", "transaction", "login", "death", "spawn", "command", "error", "admin"] as const const severities = ["info", "warning", "error", "critical"] as const return Array.from({ length: count }, (_, i) => ({ id: `${baseConfig.category}-${baseConfig.subcategory}-${i}`, content: `Log ${i + 1} para ${baseConfig.subcategory}`, timestamp: new Date(Date.now() - Math.floor(Math.random() * 7 * 24 * 60 * 60 * 1000)).toISOString(), category: baseConfig.category || "", subcategory: baseConfig.subcategory || "", type: types[Math.floor(Math.random() * types.length)], severity: severities[Math.floor(Math.random() * severities.length)], embed: { title: `Log de ${baseConfig.subcategory}`, description: `Este é um log para a categoria ${baseConfig.category} e subcategoria ${baseConfig.subcategory}.`, color: ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6"][Math.floor(Math.random() * 5)], fields: [ { name: "Categoria", value: baseConfig.category || "", inline: true }, { name: "Subcategoria", value: baseConfig.subcategory || "", inline: true }, { name: "ID", value: `LOG-${Date.now()}-${i}`, inline: true }, { name: "Detalhes", value: "Este é um log gerado dinamicamente.", inline: false }, { name: "Jogador", value: ["JohnDoe", "AlexSmith", "SarahJones", "MikeBrown", "EmilyWilson"][Math.floor(Math.random() * 5)], inline: true, }, ], footer: { text: "Sistema de Logs FiveM", }, timestamp: new Date().toISOString(), }, })) } export function LogsInterface({ category, subcategory }: LogsInterfaceProps) { const [isRefreshing, setIsRefreshing] = useState(false) const [viewMode, setViewMode] = useState<"table" | "discord">("discord") const [categories, setCategories] = useState([]) const [logs, setLogs] = useState([]) const [selectedCategory, setSelectedCategory] = useState(null) const [selectedSubcategory, setSelectedSubcategory] = useState(null) const [loading, setLoading] = useState(true) const [searchQuery, setSearchQuery] = useState("") const [showFilters, setShowFilters] = useState(false) const [filters, setFilters] = useState({ startDate: null as Date | null, endDate: null as Date | null, types: [] as string[], }) const messagesEndRef = useRef(null) useEffect(() => { const fetchCategories = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/logs/categories"); // const data = await res.json(); // Simulated data for demo - categories would be auto-detected from logs const mockCategories: LogCategory[] = [ { id: "logs_gerais", name: "Logs Gerais", isExpanded: false, subcategories: [ { id: "chat", name: "Chat", isExpanded: false }, { id: "conexoes", name: "Conexões", isExpanded: false }, { id: "mortes", name: "Mortes", isExpanded: false }, { id: "survival", name: "Survival", isExpanded: false }, ], }, { id: "logs_admin", name: "Logs Admin", isExpanded: false, subcategories: [ { id: "comandos", name: "Comandos", isExpanded: false }, { id: "kicks", name: "Kicks", isExpanded: false }, { id: "bans", name: "Bans", isExpanded: false }, { id: "warns", name: "Warns", isExpanded: false }, ], }, { id: "logs_economia", name: "Logs Economia", isExpanded: false, subcategories: [ { id: "transacoes", name: "Transações", isExpanded: false }, { id: "compras", name: "Compras", isExpanded: false }, { id: "vendas", name: "Vendas", isExpanded: false }, { id: "salarios", name: "Salários", isExpanded: false }, ], }, { id: "logs_veiculos", name: "Logs Veículos", isExpanded: false, subcategories: [ { id: "spawn", name: "Spawn", isExpanded: false }, { id: "tunagem", name: "Tunagem", isExpanded: false }, { id: "garagens", name: "Garagens", isExpanded: false }, ], }, { id: "logs_propriedades", name: "Logs Propriedades", isExpanded: false, subcategories: [ { id: "casas", name: "Casas", isExpanded: false }, { id: "empresas", name: "Empresas", isExpanded: false }, { id: "acessos", name: "Acessos", isExpanded: false }, ], }, ] setCategories(mockCategories) } catch (error) { console.error("Failed to fetch categories:", error) } finally { setLoading(false) } } fetchCategories() // Fetch example logs if (category && subcategory) { fetchLogs(category, subcategory) setSelectedCategory(category) setSelectedSubcategory(subcategory) } else { // Fetch some default logs fetchLogs("logs_admin", "bans") setSelectedCategory("logs_admin") setSelectedSubcategory("bans") } }, [category, subcategory]) useEffect(() => { // Scroll to bottom when new logs are loaded if (messagesEndRef.current) { messagesEndRef.current.scrollIntoView({ behavior: "smooth" }) } }, [logs]) const fetchLogs = async (category: string, subcategory: string) => { setLoading(true) try { // In a real app, this would fetch from your API // const res = await fetch(`/api/logs/${category}/${subcategory}`); // const data = await res.json(); // Gerar logs com base na categoria e subcategoria const logCount = Math.floor(Math.random() * 5) + 3 // Entre 3 e 7 logs const mockLogs = generateLogs(logCount, { category, subcategory }) setLogs(mockLogs) } catch (error) { console.error(`Failed to fetch logs for ${category}/${subcategory}:`, error) } finally { setLoading(false) } } const toggleCategory = (categoryId: string) => { setCategories((prev) => prev.map((category) => { if (category.id === categoryId) { return { ...category, isExpanded: !category.isExpanded } } return category }), ) } const toggleSubcategory = (categoryId: string, subcategoryId: string) => { setSelectedCategory(categoryId) setSelectedSubcategory(subcategoryId) fetchLogs(categoryId, subcategoryId) } const filteredLogs = logs.filter((log) => { if (searchQuery && !log.content.toLowerCase().includes(searchQuery.toLowerCase())) { return false } if (filters.startDate && new Date(log.timestamp) < filters.startDate) { return false } if (filters.endDate) { const endDateWithTime = new Date(filters.endDate) endDateWithTime.setHours(23, 59, 59, 999) if (new Date(log.timestamp) > endDateWithTime) { return false } } if (filters.types.length > 0 && !filters.types.includes(log.type)) { return false } return true }) const handleRefresh = async () => { setIsRefreshing(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) if (selectedCategory && selectedSubcategory) { await fetchLogs(selectedCategory, selectedSubcategory) } else if (category && subcategory) { await fetchLogs(category, subcategory) } else { await fetchLogs("logs_admin", "bans") } setIsRefreshing(false) } const title = category && subcategory ? `Logs: ${category.charAt(0).toUpperCase() + category.slice(1)} › ${subcategory.charAt(0).toUpperCase() + subcategory.slice(1)}` : "Todos os Logs" return (

} /> setViewMode(value as "table" | "discord")} >

Tabela Estilo Discord

{loading ? ( Array.from({ length: 3 }).map((_, i) => (

)) ) : filteredLogs.length > 0 ? ( filteredLogs.map((log) => ) ) : (

Nenhum log encontrado

)}

) } [V0_FILE]typescriptreact:file="components/dashboard/recent-logs.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { format } from "date-fns" import { ptBR } from "date-fns/locale" import { Button } from "@/components/ui/button" import { Eye } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { generateLogs } from "@/components/logs/logs-interface" // Usando o mesmo tipo de LogEntry que é usado em logs-interface type LogEntry = { id: string content: string timestamp: string category: string subcategory: string type: string severity: string message?: string source?: string metadata?: Record embed?: { title?: string description?: string color?: string fields?: { name: string value: string inline?: boolean }[] footer?: { text: string } timestamp?: string } } export function RecentLogs() { const [logs, setLogs] = useState([]) const [loading, setLoading] = useState(true) const [selectedLog, setSelectedLog] = useState(null) const [isDialogOpen, setIsDialogOpen] = useState(false) useEffect(() => { const fetchRecentLogs = async () => { try { // Em uma aplicação real, isso buscaria da sua API // const res = await fetch("/api/logs/recent"); // const data = await res.json(); // Simulando logs recentes de várias categorias usando a mesma função generateLogs // que é usada no componente LogsInterface const recentLogs: LogEntry[] = [ ...generateLogs(1, { category: "logs_admin", subcategory: "bans" }), ...generateLogs(1, { category: "logs_gerais", subcategory: "chat" }), ...generateLogs(1, { category: "logs_admin", subcategory: "kicks" }), ...generateLogs(1, { category: "logs_economia", subcategory: "transacoes" }), ...generateLogs(1, { category: "logs_gerais", subcategory: "conexoes" }), ] // Ordenar por timestamp (mais recente primeiro) recentLogs.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()) setLogs(recentLogs) } catch (error) { console.error("Failed to fetch recent logs:", error) } finally { setLoading(false) } } fetchRecentLogs() }, []) const getLogTypeColor = (type: string) => { switch (type) { case "ban": return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300" case "kick": return "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300" case "chat": return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300" case "transaction": return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300" case "login": return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300" default: return "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300" } } const handleViewLog = (log: LogEntry) => { setSelectedLog(log) setIsDialogOpen(true) } const getPlayerName = (log: LogEntry) => { // Buscar o nome do jogador nos campos do embed const playerField = log.embed?.fields?.find( (f) => f.name === "Jogador" || f.name === "De" || f.name.toLowerCase().includes("jogador"), ) return playerField?.value || "Desconhecido" } if (loading) { return ( Logs Recentes Os últimos eventos do servidor

{[...Array(5)].map((_, i) => (

))}

) } return ( Logs Recentes Os últimos eventos do servidor

{logs.map((log) => (

{getPlayerName(log)}

{format(new Date(log.timestamp), "dd MMM, HH:mm", { locale: ptBR })}

{log.content}

{log.type.toUpperCase()}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { LoginForm } from "@/components/login-form" import { ThemeToggle } from "@/components/theme-toggle" export default function Home() { return (

{/* Header */}

FiveM Log Manager

{/* Main Content */}

Gerencie seus logs do FiveM com facilidade

Uma solução completa para visualizar, filtrar e analisar todos os logs do seu servidor.

Visualização em tempo real

Acompanhe todas as atividades do seu servidor

Estilo Discord

Interface familiar e fácil de usar

Filtros avançados

Encontre exatamente o que você precisa

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/login-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { LoadingSpinner } from "@/components/ui/loading-spinner" import { AlertCircle, LogIn } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" export function LoginForm() { const router = useRouter() const [loading, setLoading] = useState(false) const [error, setError] = useState("") const [formData, setFormData] = useState({ username: "", password: "", remember: false, }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleCheckboxChange = (checked: boolean) => { setFormData((prev) => ({ ...prev, remember: checked })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) setError("") try { // Simulando uma chamada de API await new Promise((resolve) => setTimeout(resolve, 1500)) // Em uma aplicação real, você faria uma chamada para sua API de autenticação // const response = await fetch('/api/auth/login', { // method: 'POST', // headers: { 'Content-Type': 'application/json' }, // body: JSON.stringify({ username: formData.username, password: formData.password }), // }); // if (!response.ok) throw new Error('Credenciais inválidas'); // Simulando credenciais para demonstração if (formData.username === "admin" && formData.password === "admin") { router.push("/dashboard") } else { throw new Error("Credenciais inválidas") } } catch (err) { setError(err instanceof Error ? err.message : "Ocorreu um erro ao fazer login") } finally { setLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/super-admin/overview-cards.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Users, Server, Database, Activity, TrendingUp, TrendingDown } from "lucide-react" export function OverviewCards() { const [stats, setStats] = useState({ activeInstances: 0, totalCustomers: 0, totalLogs: 0, activeUsers: 0, activeInstancesChange: 0, totalCustomersChange: 0, totalLogsChange: 0, activeUsersChange: 0, }) const [loading, setLoading] = useState(true) useEffect(() => { const fetchStats = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/stats"); // const data = await res.json(); // Simulated data for demo setStats({ activeInstances: 28, totalCustomers: 42, totalLogs: 1248000, activeUsers: 156, activeInstancesChange: 12.5, totalCustomersChange: 8.3, totalLogsChange: 15.2, activeUsersChange: 5.7, }) } catch (error) { console.error("Failed to fetch stats:", error) } finally { setLoading(false) } } fetchStats() }, []) const formatNumber = (value: number) => { if (value >= 1000000) { return `${(value / 1000000).toFixed(1)}M` } else if (value >= 1000) { return `${(value / 1000).toFixed(1)}K` } return value.toString() } const renderChangeIndicator = (value: number) => { if (value > 0) { return (

+{value.toFixed(1)}%

) } else if (value < 0) { return (

{value.toFixed(1)}%

) } return null } if (loading) { return (

{[...Array(4)].map((_, i) => (

))}

) } return (

Instâncias Ativas

{stats.activeInstances}

Instâncias em uso

{renderChangeIndicator(stats.activeInstancesChange)}

Total de Clientes

{stats.totalCustomers}

Clientes registrados

{renderChangeIndicator(stats.totalCustomersChange)}

Total de Logs

{formatNumber(stats.totalLogs)}

Logs processados

{renderChangeIndicator(stats.totalLogsChange)}

Usuários Ativos

{stats.activeUsers}

Últimos 30 dias

{renderChangeIndicator(stats.activeUsersChange)}

) } [V0_FILE]typescriptreact:file="components/super-admin/dashboard-header.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import { Button } from "@/components/ui/button" import { PlusCircle } from "lucide-react" import Link from "next/link" interface DashboardHeaderProps { heading: string text?: string user?: { email: string role: string } children?: React.ReactNode action?: React.ReactNode } export function DashboardHeader({ heading, text, children, action }: DashboardHeaderProps) { return (

{heading}

{text &&

{text}

}

{children} {action ? ( action ) : ( )}

) } [V0_FILE]typescriptreact:file="app/super-admin/activity/page.tsx" isQuickEdit="true" isMerged="true" import { redirect } from "next/navigation" import { getSuperAdminSession } from "@/lib/super-admin-auth" import { DashboardHeader } from "@/components/super-admin/dashboard-header" import { DashboardShell } from "@/components/super-admin/dashboard-shell" import { RecentActivities } from "@/components/super-admin/recent-activities" export default async function ActivityPage() { const session = await getSuperAdminSession() if (!session || !session.user || session.user.role !== "super_admin") { redirect("/super-admin/login") } return (

) } [V0_FILE]typescriptreact:file="components/super-admin/recent-activities.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" import Link from "next/link" type Activity = { id: string type: "tenant_created" | "tenant_suspended" | "tenant_renewed" | "user_login" | "system_update" user: { name: string email: string avatar?: string } tenant?: { name: string subdomain: string } timestamp: string details?: string } interface RecentActivitiesProps { fullList?: boolean } export function RecentActivities({ fullList = false }: RecentActivitiesProps) { const [activities, setActivities] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { const fetchData = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/activities"); // const data = await res.json(); // Simulated data for demo const mockActivities = [ { id: "1", type: "tenant_created", user: { name: "Admin", email: "admin@fivemlogmanager.com", avatar: "/placeholder.svg?height=40&width=40", }, tenant: { name: "Novo Horizonte RP", subdomain: "novohorizonte", }, timestamp: "2023-08-28T14:30:00Z", details: "Instância criada com plano Premium", }, { id: "3", type: "tenant_suspended", user: { name: "Admin", email: "admin@fivemlogmanager.com", avatar: "/placeholder.svg?height=40&width=40", }, tenant: { name: "Los Santos Life", subdomain: "lslife", }, timestamp: "2023-08-28T10:45:00Z", details: "Suspensão por expiração", }, { id: "4", type: "tenant_renewed", user: { name: "Sistema", email: "system@fivemlogmanager.com", }, tenant: { name: "Cidade Alta", subdomain: "cidadealta", }, timestamp: "2023-08-28T09:20:00Z", details: "Renovação por 12 meses", }, { id: "5", type: "user_login", user: { name: "Admin", email: "admin@fivemlogmanager.com", avatar: "/placeholder.svg?height=40&width=40", }, timestamp: "2023-08-28T08:05:00Z", }, { id: "6", type: "tenant_created", user: { name: "Admin", email: "admin@fivemlogmanager.com", avatar: "/placeholder.svg?height=40&width=40", }, tenant: { name: "Brasil RP", subdomain: "brasilrp", }, timestamp: "2023-08-27T15:45:00Z", details: "Instância criada com plano Standard", }, { id: "7", type: "user_login", user: { name: "Suporte", email: "support@fivemlogmanager.com", }, timestamp: "2023-08-27T13:20:00Z", }, { id: "8", type: "tenant_renewed", user: { name: "Sistema", email: "system@fivemlogmanager.com", }, tenant: { name: "RPCity", subdomain: "rpcity", }, timestamp: "2023-08-27T11:10:00Z", details: "Renovação por 6 meses", }, ] // If this is a full list request, use all activities, otherwise use only 4 setActivities(fullList ? mockActivities : mockActivities.slice(0, 4)) } catch (error) { console.error("Failed to fetch activities:", error) } finally { setLoading(false) } } fetchData() }, [fullList]) const getActivityBadge = (type: Activity["type"]) => { switch (type) { case "tenant_created": return ( Nova Instância ) case "tenant_suspended": return Suspensão case "tenant_renewed": return Renovação case "system_update": return Sistema case "user_login": return Login default: return Atividade } } if (loading) { return ( Atividades Recentes Últimas ações no sistema ) } return ( Atividades Recentes Últimas ações no sistema

{activities.map((activity) => (

{activity.user.name.substring(0, 2).toUpperCase()}

{activity.user.name} {getActivityBadge(activity.type)} {new Date(activity.timestamp).toLocaleString()}

{activity.type === "tenant_created" && `Criou uma nova instância: ${activity.tenant?.name}`} {activity.type === "tenant_suspended" && `Suspendeu a instância: ${activity.tenant?.name}`} {activity.type === "tenant_renewed" && `Renovou a instância: ${activity.tenant?.name}`} {activity.type === "system_update" && "Atualizou o sistema"} {activity.type === "user_login" && "Fez login no sistema"}

{activity.details &&

{activity.details}

}

))}

{!fullList && (

)} ) } [V0_FILE]typescriptreact:file="components/super-admin/tenants-overview.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts" import { Badge } from "@/components/ui/badge" type TenantStatus = { name: string value: number color: string } export function TenantsOverview() { const [data, setData] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { const fetchData = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/tenants/status"); // const data = await res.json(); // Simulated data for demo setData([ { name: "Ativas", value: 28, color: "#22c55e" }, { name: "Suspensas", value: 5, color: "#f59e0b" }, { name: "Expiradas", value: 9, color: "#ef4444" }, ]) } catch (error) { console.error("Failed to fetch tenant status data:", error) } finally { setLoading(false) } } fetchData() }, []) if (loading) { return ( Status das Instâncias Distribuição por status ) } const total = data.reduce((acc, item) => acc + item.value, 0) return ( Status das Instâncias Distribuição por status

`${name} ${(percent * 100).toFixed(0)}%`} > {data.map((entry, index) => ( ))} [`${value} instâncias`, name]} labelFormatter={() => ""} />

{data.map((status) => (

{status.name}

{status.value}

{((status.value / total) * 100).toFixed(1)}%

))}

) } [V0_FILE]typescriptreact:file="app/super-admin/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { redirect } from "next/navigation" import { getSuperAdminSession } from "@/lib/super-admin-auth" import { DashboardHeader } from "@/components/super-admin/dashboard-header" import { DashboardShell } from "@/components/super-admin/dashboard-shell" import { OverviewCards } from "@/components/super-admin/overview-cards" import { RecentActivities } from "@/components/super-admin/recent-activities" import { TenantsOverview } from "@/components/super-admin/tenants-overview" import { UpcomingExpirations } from "@/components/super-admin/upcoming-expirations" export default async function SuperAdminDashboard() { const session = await getSuperAdminSession() if (!session || !session.user || session.user.role !== "super_admin") { redirect("/super-admin/login") } return (

) } [V0_FILE]typescriptreact:file="components/super-admin/new-tenant-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" import { useRouter } from "next/navigation" import { Loader2, Eye, EyeOff } from "lucide-react" export function NewTenantForm() { const { toast } = useToast() const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [showPassword, setShowPassword] = useState(false) const [formData, setFormData] = useState({ name: "", subdomain: "", ownerName: "", ownerEmail: "", ownerPassword: "", expirationDate: "", }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubdomainChange = (e: React.ChangeEvent) => { // Convert to lowercase and remove special characters const value = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, "") setFormData((prev) => ({ ...prev, subdomain: value })) } const toggleShowPassword = () => { setShowPassword(!showPassword) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { // Validate form if ( !formData.name || !formData.subdomain || !formData.ownerEmail || !formData.ownerPassword || !formData.expirationDate ) { throw new Error("Todos os campos são obrigatórios") } if (formData.ownerPassword.length < 8) { throw new Error("A senha deve ter pelo menos 8 caracteres") } // In a real app, this would send a request to your API // const response = await fetch("/api/super-admin/tenants", { // method: "POST", // headers: { "Content-Type": "application/json" }, // body: JSON.stringify(formData), // }); // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1500)) toast({ title: "Instância criada com sucesso", description: `A instância ${formData.name} foi criada e está pronta para uso.`, }) // Redirect back to tenant list router.push("/super-admin") } catch (error) { toast({ title: "Erro ao criar instância", description: error instanceof Error ? error.message : "Ocorreu um erro ao criar a instância", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Nome da Instância

Nome que identifica esta instância no seu painel de administração

Subdomínio

.fivemlogmanager.com

O subdomínio deve conter apenas letras minúsculas, números e hífens

Nome do Administrador

Email do Administrador

Senha do Administrador

Esta será a senha para o primeiro acesso do administrador da instância

Data de Expiração

A instância ficará disponível até esta data

) } [V0_FILE]typescriptreact:file="components/super-admin/upcoming-expirations.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { CalendarClock, ArrowRight } from "lucide-react" import Link from "next/link" type ExpiringTenant = { id: string name: string subdomain: string expiresAt: string daysLeft: number } export function UpcomingExpirations() { const [tenants, setTenants] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { const fetchData = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/tenants/expiring"); // const data = await res.json(); // Simulated data for demo setTenants([ { id: "1", name: "Servidor RPCity", subdomain: "rpcity", expiresAt: "2023-09-15T14:30:00Z", daysLeft: 7, }, { id: "2", name: "Brasil RP", subdomain: "brasilrp", expiresAt: "2023-09-20T10:00:00Z", daysLeft: 12, }, { id: "3", name: "Los Santos Life", subdomain: "lslife", expiresAt: "2023-09-10T09:15:00Z", daysLeft: 2, }, { id: "4", name: "Cidade Alta", subdomain: "cidadealta", expiresAt: "2023-09-25T16:45:00Z", daysLeft: 17, }, ]) } catch (error) { console.error("Failed to fetch expiring tenants:", error) } finally { setLoading(false) } } fetchData() }, []) const getDaysLeftColor = (days: number) => { if (days <= 3) return "text-red-500" if (days <= 7) return "text-orange-500" return "text-green-500" } if (loading) { return ( Assinaturas a Expirar Instâncias que expirarão em breve ) } return (

Assinaturas a Expirar Instâncias que expirarão em breve

{tenants.length === 0 ? (

Nenhuma assinatura expirando nos próximos 30 dias

) : ( tenants.map((tenant) => (

{tenant.name}

{tenant.subdomain}.fivemlogmanager.com

{tenant.daysLeft} dias

)) )}

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { Moon, Sun } from "lucide-react" import { usePathname } from "next/navigation" export function ThemeToggle() { const { theme, setTheme } = useTheme() const pathname = usePathname() // Não mostrar o toggle de tema no painel de super admin if (pathname?.startsWith("/super-admin")) { return null } return ( ) } [V0_FILE]typescriptreact:file="components/super-admin/super-admin-nav.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" export function SuperAdminNav() { const pathname = usePathname() const isActive = (path: string) => { if (path === "/super-admin" && pathname === "/super-admin") { return true } if (path !== "/super-admin" && pathname.startsWith(path)) { return true } return false } return ( ) } [V0_FILE]typescriptreact:file="components/super-admin/tenants/new-tenant-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useToast } from "@/hooks/use-toast" export function NewTenantForm() { const router = useRouter() const { toast } = useToast() const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { // Simulação de criação de tenant await new Promise((resolve) => setTimeout(resolve, 1500)) toast({ title: "Instância criada com sucesso", description: "A nova instância foi criada e está pronta para uso.", }) router.push("/super-admin/tenants") } catch (error) { toast({ title: "Erro ao criar instância", description: "Ocorreu um erro ao criar a instância. Tente novamente.", variant: "destructive", }) } finally { setIsLoading(false) } } return ( Nova Instância Crie uma nova instância para um cliente

Nome da Instância

Subdomínio

.fivemlogmanager.com

O subdomínio será usado para acessar a instância

Data de Expiração

Email do Administrador

Nome do Administrador

Senha Inicial

Esta será a senha inicial do administrador da instância

Confirmar Senha

Número Máximo de Usuários

Limite de Logs (por dia)

) } [V0_FILE]typescriptreact:file="app/super-admin/tenants/new/page.tsx" isEdit="true" isMerged="true" import { redirect } from "next/navigation" import { getSuperAdminSession } from "@/lib/super-admin-auth" import { DashboardHeader } from "@/components/super-admin/dashboard-header" import { DashboardShell } from "@/components/super-admin/dashboard-shell" import { NewTenantForm } from "@/components/super-admin/tenants/new-tenant-form" export default async function NewTenantPage() { const session = await getSuperAdminSession() if (!session || !session.user || session.user.role !== "super_admin") { redirect("/super-admin/login") } return ( ) } [V0_FILE]typescriptreact:file="components/super-admin/tenants-table.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { MoreHorizontal, Edit, Trash, ExternalLink, Key } from "lucide-react" import { useToast } from "@/hooks/use-toast" type Tenant = { id: string name: string subdomain: string ownerEmail: string createdAt: string expiresAt: string status: "active" | "suspended" | "expired" usersCount: number logsCount: number maxUsers: number maxLogs: number } export function TenantsTable() { const { toast } = useToast() const [tenants, setTenants] = useState([]) const [loading, setLoading] = useState(true) const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const [isResetPasswordDialogOpen, setIsResetPasswordDialogOpen] = useState(false) const [selectedTenant, setSelectedTenant] = useState(null) const [newPassword, setNewPassword] = useState("") const [editForm, setEditForm] = useState({ name: "", subdomain: "", ownerEmail: "", expiresAt: "", maxUsers: 0, maxLogs: 0, }) useEffect(() => { const fetchTenants = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/tenants"); // const data = await res.json(); // Simulated data for demo setTenants([ { id: "1", name: "Servidor RPCity", subdomain: "rpcity", ownerEmail: "admin@rpcity.com", createdAt: "2023-05-10T14:30:00Z", expiresAt: "2024-05-10T14:30:00Z", status: "active", usersCount: 12, logsCount: 5432, maxUsers: 20, maxLogs: 10000, }, { id: "2", name: "Brasil RP", subdomain: "brasilrp", ownerEmail: "admin@brasilrp.com", createdAt: "2023-06-15T10:00:00Z", expiresAt: "2024-06-15T10:00:00Z", status: "active", usersCount: 8, logsCount: 3210, maxUsers: 15, maxLogs: 8000, }, { id: "3", name: "Los Santos Life", subdomain: "lslife", ownerEmail: "admin@lslife.com", createdAt: "2023-04-20T09:15:00Z", expiresAt: "2023-10-20T09:15:00Z", status: "expired", usersCount: 5, logsCount: 1876, maxUsers: 10, maxLogs: 5000, }, { id: "4", name: "Cidade Alta", subdomain: "cidadealta", ownerEmail: "admin@cidadealta.com", createdAt: "2023-07-01T16:45:00Z", expiresAt: "2024-07-01T16:45:00Z", status: "suspended", usersCount: 15, logsCount: 7890, maxUsers: 25, maxLogs: 15000, }, ]) } catch (error) { console.error("Failed to fetch tenants:", error) } finally { setLoading(false) } } fetchTenants() }, []) const handleEditTenant = (tenant: Tenant) => { setSelectedTenant(tenant) setEditForm({ name: tenant.name, subdomain: tenant.subdomain, ownerEmail: tenant.ownerEmail, expiresAt: tenant.expiresAt.split("T")[0], maxUsers: tenant.maxUsers, maxLogs: tenant.maxLogs, }) setIsEditDialogOpen(true) } const handleResetPassword = (tenant: Tenant) => { setSelectedTenant(tenant) setNewPassword("") setIsResetPasswordDialogOpen(true) } const handleEditFormChange = (e: React.ChangeEvent) => { const { name, value } = e.target setEditForm((prev) => ({ ...prev, [name]: name === "maxUsers" || name === "maxLogs" ? Number.parseInt(value) || 0 : value, })) } const handleSaveEdit = () => { // In a real app, this would send a request to your API if (selectedTenant) { setTenants((prev) => prev.map((tenant) => { if (tenant.id === selectedTenant.id) { return { ...tenant, name: editForm.name, subdomain: editForm.subdomain, ownerEmail: editForm.ownerEmail, expiresAt: editForm.expiresAt + "T00:00:00Z", maxUsers: editForm.maxUsers, maxLogs: editForm.maxLogs, } } return tenant }), ) } toast({ title: "Instância atualizada", description: `As alterações para ${selectedTenant?.name} foram salvas.`, }) setIsEditDialogOpen(false) } const handleSavePassword = () => { // In a real app, this would send a request to your API toast({ title: "Senha redefinida", description: `A senha do administrador de ${selectedTenant?.name} foi redefinida.`, }) setIsResetPasswordDialogOpen(false) } const handleDeleteTenant = (tenantId: string) => { // In a real app, this would send a request to your API setTenants((prev) => prev.filter((tenant) => tenant.id !== tenantId)) toast({ title: "Instância excluída", description: "A instância foi excluída permanentemente.", variant: "destructive", }) } const handleToggleTenant = (tenantId: string, isActive: boolean) => { setTenants((prev) => prev.map((tenant) => { if (tenant.id === tenantId) { return { ...tenant, status: isActive ? "active" : "suspended", } } return tenant }), ) toast({ title: isActive ? "Instância ativada" : "Instância suspensa", description: isActive ? "A instância foi ativada com sucesso." : "A instância foi suspensa com sucesso.", }) } const getStatusBadge = (status: Tenant["status"]) => { switch (status) { case "active": return Ativo case "suspended": return Suspenso case "expired": return Expirado default: return Desconhecido } } if (loading) { return (

{[...Array(4)].map((_, i) => (

))}

) } return (

Nome Subdomínio Email do Admin Expira em Status Usuários Logs Ações {tenants.map((tenant) => ( {tenant.name} {tenant.subdomain}.fivemlogmanager.com {tenant.ownerEmail} {new Date(tenant.expiresAt).toLocaleDateString()} {getStatusBadge(tenant.status)} {tenant.usersCount} / {tenant.maxUsers} {tenant.logsCount} / {tenant.maxLogs} Ações handleEditTenant(tenant)}> Editar handleResetPassword(tenant)}> Redefinir Senha handleToggleTenant(tenant.id, tenant.status !== "active")}> {}} onClick={(e) => e.stopPropagation()} /> {tenant.status === "active" ? "Suspender" : "Ativar"} Acessar Painel handleDeleteTenant(tenant.id)} > Excluir ))}

) } [V0_FILE]typescriptreact:file="components/super-admin/customers-table.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { MoreHorizontal, ExternalLink } from "lucide-react" import { useToast } from "@/hooks/use-toast" type Customer = { id: string name: string email: string avatar?: string tenantId: string tenantName: string role: "admin" | "moderator" | "user" status: "active" | "inactive" lastLogin: string } export function CustomersTable() { const { toast } = useToast() const [customers, setCustomers] = useState([]) const [loading, setLoading] = useState(true) const [searchQuery, setSearchQuery] = useState("") useEffect(() => { const fetchCustomers = async () => { try { // In a real app, this would fetch from your API // const res = await fetch("/api/super-admin/customers"); // const data = await res.json(); // Simulated data for demo setCustomers([ { id: "1", name: "João Silva", email: "joao@rpcity.com", avatar: "/placeholder.svg?height=40&width=40", tenantId: "1", tenantName: "Servidor RPCity", role: "admin", status: "active", lastLogin: "2023-08-28T14:30:00Z", }, { id: "2", name: "Maria Souza", email: "maria@brasilrp.com", avatar: "/placeholder.svg?height=40&width=40", tenantId: "2", tenantName: "Brasil RP", role: "admin", status: "active", lastLogin: "2023-08-27T10:15:00Z", }, { id: "3", name: "Pedro Santos", email: "pedro@lslife.com", avatar: "/placeholder.svg?height=40&width=40", tenantId: "3", tenantName: "Los Santos Life", role: "moderator", status: "inactive", lastLogin: "2023-08-20T09:45:00Z", }, { id: "4", name: "Ana Oliveira", email: "ana@cidadealta.com", avatar: "/placeholder.svg?height=40&width=40", tenantId: "4", tenantName: "Cidade Alta", role: "admin", status: "active", lastLogin: "2023-08-28T11:20:00Z", }, { id: "5", name: "Carlos Pereira", email: "carlos@novohorizonte.com", avatar: "/placeholder.svg?height=40&width=40", tenantId: "5", tenantName: "Novo Horizonte RP", role: "user", status: "active", lastLogin: "2023-08-26T16:40:00Z", }, ]) } catch (error) { console.error("Failed to fetch customers:", error) } finally { setLoading(false) } } fetchCustomers() }, []) const filteredCustomers = customers.filter( (customer) => customer.name.toLowerCase().includes(searchQuery.toLowerCase()) || customer.email.toLowerCase().includes(searchQuery.toLowerCase()) || customer.tenantName.toLowerCase().includes(searchQuery.toLowerCase()), ) const getRoleBadge = (role: Customer["role"]) => { switch (role) { case "admin": return Admin case "moderator": return Moderador case "user": return Usuário } } const getStatusBadge = (status: Customer["status"]) => { switch (status) { case "active": return Ativo case "inactive": return Inativo } } if (loading) { return (

{[...Array(5)].map((_, i) => (

))}

) } return (

setSearchQuery(e.target.value)} />

Usuário Instância Função Status Último Login Ações {filteredCustomers.length === 0 ? ( Nenhum usuário encontrado ) : ( filteredCustomers.map((customer) => (

{customer.name.substring(0, 2).toUpperCase()}

{customer.name}

{customer.email}

{customer.tenantName} {getRoleBadge(customer.role)} {getStatusBadge(customer.status)} {new Date(customer.lastLogin).toLocaleString()} Ações Acessar Instância )) )}

) } [V0_FILE]typescriptreact:file="app/super-admin/analytics/page.tsx" isEdit="true" isMerged="true" import { redirect } from "next/navigation" import { getSuperAdminSession } from "@/lib/super-admin-auth" import { DashboardHeader } from "@/components/super-admin/dashboard-header" import { DashboardShell } from "@/components/super-admin/dashboard-shell" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { UsageChart } from "@/components/super-admin/charts/usage-chart" import { GrowthMetrics } from "@/components/super-admin/charts/growth-metrics" export default async function AnalyticsPage() { const session = await getSuperAdminSession() if (!session || !session.user || session.user.role !== "super_admin") { redirect("/super-admin/login") } return ( Logs Clientes Atividade

Volume de Logs Total de logs processados por período Tipos de Logs Distribuição por categorias

Gráfico de distribuição de tipos de logs

Tendências de Logs Análise de tendências ao longo do tempo

Gráfico de tendências de logs

Análise de Clientes Crescimento e atividade de clientes Atividade do Sistema Monitoramento de atividades e eventos

Gráfico de atividades do sistema

) } [V0_FILE]typescriptreact:file="components/super-admin/dashboard-shell.tsx" isEdit="true" isMerged="true" import type React from "react" import { SuperAdminNav } from "@/components/super-admin/super-admin-nav" import { SuperAdminSidebar } from "@/components/super-admin/super-admin-sidebar" import { NotificationsPopover } from "@/components/super-admin/notifications-popover" import { MobileNav } from "@/components/super-admin/mobile-nav" import { UserNav } from "@/components/super-admin/user-nav" import { Search } from "@/components/super-admin/search" interface DashboardShellProps { children: React.ReactNode } export function DashboardShell({ children }: DashboardShellProps) { return (

{/* Sidebar for desktop */}

{children}

) } [V0_FILE]typescriptreact:file="components/super-admin/super-admin-sidebar.tsx" isEdit="true" isMerged="true" import type React from "react" import Link from "next/link" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { LayoutDashboard, Users, BarChart3, FileText, Shield, Globe, Clock, History, UserPlus } from "lucide-react" interface SuperAdminSidebarProps extends React.HTMLAttributes {} export function SuperAdminSidebar({ className }: SuperAdminSidebarProps) { return (

FiveM Manager

Visão Geral

Clientes

Administração

) } [V0_FILE]typescriptreact:file="components/super-admin/user-nav.tsx" isEdit="true" isMerged="true" "use client" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useRouter } from "next/navigation" import { User, LogOut } from "lucide-react" export function UserNav() { const router = useRouter() return (

Admin

admin@fivemlogmanager.com

router.push("/super-admin/profile")}> Perfil router.push("/super-admin/logout")}> Sair ) } [V0_FILE]typescriptreact:file="app/super-admin/profile/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { getSuperAdminSession } from "@/lib/super-admin-auth" import { DashboardHeader } from "@/components/super-admin/dashboard-header" import { DashboardShell } from "@/components/super-admin/dashboard-shell" import { SuperAdminProfileForm } from "@/components/super-admin/profile-form" export default async function SuperAdminProfilePage() { const session = await getSuperAdminSession() if (!session || !session.user || session.user.role !== "super_admin") { redirect("/super-admin/login") } return (

) } [V0_FILE]typescriptreact:file="components/super-admin/profile-form.tsx" isMerged="true" "use client" import { useState } from "react" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import * as z from "zod" import { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { toast } from "@/components/ui/use-toast" import { LoadingSpinner } from "@/components/ui/loading-spinner" const passwordFormSchema = z .object({ currentPassword: z.string().min(1, { message: "A senha atual é obrigatória.", }), newPassword: z.string().min(8, { message: "A nova senha deve ter pelo menos 8 caracteres.", }), confirmPassword: z.string().min(8, { message: "Confirme sua nova senha.", }), }) .refine((data) => data.newPassword === data.confirmPassword, { message: "As senhas não coincidem.", path: ["confirmPassword"], }) type PasswordFormValues = z.infer export function SuperAdminProfileForm() { const [isLoading, setIsLoading] = useState(false) const form = useForm({ resolver: zodResolver(passwordFormSchema), defaultValues: { currentPassword: "", newPassword: "", confirmPassword: "", }, }) async function onSubmit(data: PasswordFormValues) { setIsLoading(true) try { // Simulação de uma chamada de API para alterar a senha await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Senha alterada", description: "Sua senha foi alterada com sucesso.", }) form.reset() } catch (error) { toast({ title: "Erro", description: "Ocorreu um erro ao alterar sua senha. Tente novamente.", variant: "destructive", }) } finally { setIsLoading(false) } } return ( Alterar Senha Atualize sua senha para manter sua conta segura. ) } [V0_FILE]typescriptreact:file="components/settings/settings-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" import { Copy, RefreshCw } from "lucide-react" export function SettingsForm() { const { toast } = useToast() const [isLoading, setIsLoading] = useState(false) const [isGeneratingKey, setIsGeneratingKey] = useState(false) const [isGeneratingSecret, setIsGeneratingSecret] = useState(false) const [generalSettings, setGeneralSettings] = useState({ logsRetentionDays: "30", }) const [apiSettings, setApiSettings] = useState({ apiKey: "abc123xyz789", apiSecret: "s3cr3t_k3y_h4sh", apiUrl: "https://api.fivemlogmanager.com/logs/v1/instance/123456", }) const handleGeneralChange = (field: string, value: any) => { setGeneralSettings((prev) => ({ ...prev, [field]: value })) } const handleSaveGeneral = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Configurações salvas", description: "As configurações gerais foram salvas com sucesso.", }) setIsLoading(false) } const generateNewApiKey = async () => { setIsGeneratingKey(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Generate a random API key const newApiKey = Array(24) .fill(0) .map(() => Math.random().toString(36).charAt(2)) .join("") setApiSettings((prev) => ({ ...prev, apiKey: newApiKey })) toast({ title: "Chave de API gerada", description: "Uma nova chave de API foi gerada com sucesso.", }) setIsGeneratingKey(false) } const generateNewSecret = async () => { setIsGeneratingSecret(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) // Generate a random secret const newSecret = Array(32) .fill(0) .map(() => Math.random().toString(36).charAt(2)) .join("") setApiSettings((prev) => ({ ...prev, apiSecret: newSecret })) toast({ title: "Secret gerado", description: "Um novo secret foi gerado com sucesso.", }) setIsGeneratingSecret(false) } const copyToClipboard = (text: string, message: string) => { navigator.clipboard.writeText(text) toast({ title: "Copiado!", description: message, }) } return (

Configurações de API

Estas credenciais são necessárias para enviar logs para o sistema.

URL da API

Este é o endpoint para enviar logs para o sistema

Chave da API

Chave de API para autenticação com o sistema

Secret

Secret para autenticação com o sistema

) } [V0_FILE]typescriptreact:file="app/dashboard/stats/page.tsx" isEdit="true" import type React from "react" import { SectionHeader } from "@/components/ui/section-header" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Download, Calendar, ArrowUpRight, ArrowDownRight, FileText, AlertTriangle, Ban } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Bar, BarChart, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, PieChart, Pie, Cell, } from "recharts" // Dados simulados para os gráficos const logsByTimeData = [ { name: "00:00", quantidade: 45 }, { name: "03:00", quantidade: 28 }, { name: "06:00", quantidade: 15 }, { name: "09:00", quantidade: 67 }, { name: "12:00", quantidade: 89 }, { name: "15:00", quantidade: 120 }, { name: "18:00", quantidade: 150 }, { name: "21:00", quantidade: 95 }, ] const logsByCategoryData = [ { name: "Admin", value: 350 }, { name: "Gerais", value: 520 }, { name: "Economia", value: 280 }, { name: "Veículos", value: 190 }, { name: "Propriedades", value: 120 }, ] const logsBySubcategoryData = [ { name: "Bans", value: 120 }, { name: "Kicks", value: 80 }, { name: "Chat", value: 230 }, { name: "Conexões", value: 190 }, { name: "Transações", value: 150 }, { name: "Compras", value: 130 }, { name: "Spawn", value: 110 }, { name: "Casas", value: 90 }, ] const logsBySeverityData = [ { name: "Info", value: 850 }, { name: "Warning", value: 320 }, { name: "Error", value: 150 }, { name: "Critical", value: 45 }, ] const COLORS = ["#4f46e5", "#16a34a", "#ea580c", "#9333ea", "#e11d48", "#0891b2", "#84cc16", "#f97316"] const SEVERITY_COLORS = ["#3b82f6", "#eab308", "#ef4444", "#7f1d1d"] export default function StatsPage() { return (

Exportar Relatório } /> Visão Geral Categorias Severidade Tempo

} /> } /> } /> } />

Distribuição de Logs por Categoria Últimos 30 dias

`${name}: ${(percent * 100).toFixed(0)}%`} > {logsByCategoryData.map((entry, index) => ( ))} [`${value} logs`, "Quantidade"]} />

Atividade por Hora do Dia Últimos 30 dias

[`${value} logs`, "Quantidade"]} />

Tendências de Logs Comparação dos últimos 3 meses

Admin

Gerais

Economia

Veículos

Propriedades

Distribuição de Logs por Subcategoria Últimos 30 dias

[`${value} logs`, "Quantidade"]} /> {logsBySubcategoryData.map((entry, index) => ( ))}

} /> } /> } /> } />

Distribuição por Severidade Últimos 30 dias

`${name}: ${(percent * 100).toFixed(0)}%`} > {logsBySeverityData.map((entry, index) => ( ))} [`${value} logs`, "Quantidade"]} />

[`${value} logs`, "Quantidade"]} /> {logsBySeverityData.map((entry, index) => ( ))}

} /> } /> } />

Distribuição de Logs por Hora Últimos 30 dias

[`${value} logs`, "Quantidade"]} />

Distribuição de Logs por Dia da Semana Últimos 30 dias

[`${value} logs`, "Quantidade"]} />

) } function StatsCard({ title, value, description, trend, percentage, icon, }: { title: string value: string description: string trend: "up" | "down" percentage: string icon: React.ReactNode }) { return (

{icon}

{trend === "up" ? : } {percentage}%

{value}

{title}

{description}

) } function LogCategoryCard({ category, count, trend, percentage, color, }: { category: string count: number trend: "up" | "down" percentage: number color: string }) { const getColorClass = (color: string) => { switch (color) { case "blue": return "bg-blue-500/10 text-blue-500" case "green": return "bg-green-500/10 text-green-500" case "red": return "bg-red-500/10 text-red-500" case "purple": return "bg-purple-500/10 text-purple-500" case "orange": return "bg-orange-500/10 text-orange-500" default: return "bg-gray-500/10 text-gray-500" } } return (

{category}

{trend === "up" ? : } {percentage}%

{count.toLocaleString()}

Total de logs

) } [V0_FILE]typescriptreact:file="app/dashboard/profile/page.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ProfileForm } from "@/components/profile/profile-form" export default function ProfilePage() { return (

Perfil

Seu Perfil Gerencie suas informações pessoais e senha

) } [V0_FILE]typescriptreact:file="components/profile/profile-form.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useToast } from "@/hooks/use-toast" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Loader2 } from "lucide-react" export function ProfileForm() { const { toast } = useToast() const [isLoading, setIsLoading] = useState(false) const [isChangingPassword, setIsChangingPassword] = useState(false) const [profileData, setProfileData] = useState({ name: "João Silva", email: "joao.silva@exemplo.com", username: "joaosilva", }) const [passwordData, setPasswordData] = useState({ currentPassword: "", newPassword: "", confirmPassword: "", }) const handleProfileChange = (field: string, value: string) => { setProfileData((prev) => ({ ...prev, [field]: value })) } const handlePasswordChange = (field: string, value: string) => { setPasswordData((prev) => ({ ...prev, [field]: value })) } const handleSaveProfile = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Perfil atualizado", description: "Suas informações foram atualizadas com sucesso.", }) setIsLoading(false) } const handleChangePassword = async (e: React.FormEvent) => { e.preventDefault() setIsChangingPassword(true) // Validate passwords if (passwordData.newPassword !== passwordData.confirmPassword) { toast({ title: "Erro", description: "As senhas não coincidem.", variant: "destructive", }) setIsChangingPassword(false) return } if (passwordData.newPassword.length < 6) { toast({ title: "Erro", description: "A senha deve ter pelo menos 6 caracteres.", variant: "destructive", }) setIsChangingPassword(false) return } // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Senha alterada", description: "Sua senha foi alterada com sucesso.", }) // Reset password fields setPasswordData({ currentPassword: "", newPassword: "", confirmPassword: "", }) setIsChangingPassword(false) } return ( Informações Senha

{profileData.name.substring(0, 2).toUpperCase()}

{profileData.name}

{profileData.email}

Nome handleProfileChange("name", e.target.value)} />

Email handleProfileChange("email", e.target.value)} />

Nome de usuário handleProfileChange("username", e.target.value)} />

) } [V0_FILE]typescriptreact:file="app/super-admin-login/page.tsx" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { SuperAdminLoginForm } from "@/components/super-admin/login-form" export default function SuperAdminLoginPage() { return (

Super Admin Entre para gerenciar as instâncias do FiveM Log Manager

Painel exclusivo para administradores do sistema

) } [V0_FILE]typescriptreact:file="components/super-admin/login-form.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useToast } from "@/hooks/use-toast" import { useRouter } from "next/navigation" import { Loader2, Shield } from "lucide-react" export function SuperAdminLoginForm() { const { toast } = useToast() const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [formData, setFormData] = useState({ email: "", password: "", }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { // In a real app, this would send a request to your API // const response = await fetch("/api/super-admin/login", { // method: "POST", // headers: { "Content-Type": "application/json" }, // body: JSON.stringify(formData), // }); // Simulate API delay await new Promise((resolve) => setTimeout(resolve, 1000)) // For demo purposes, hardcode a valid login if (formData.email === "admin@fivemlogmanager.com" && formData.password === "admin123") { router.push("/super-admin") } else { throw new Error("Credenciais inválidas") } } catch (error) { toast({ title: "Erro ao fazer login", description: error instanceof Error ? error.message : "Ocorreu um erro ao fazer login", variant: "destructive", }) } finally { setIsLoading(false) } } return ( ) }

Dashboard

Webhooks

Configurações

Notificações

FiveM Log Manager

{getCategoryName()} / {getSubcategoryName()}

{title}

{notification.title}

Configuração de Cargos e Permissões

Permissões de Visualização

Permissões de Gerenciamento

Permissões de Cargos

Gerencie seus logs do FiveM com facilidade

Visualização em tempo real

Estilo Discord

Filtros avançados

Bem-vindo de volta

{heading}

Visão Geral

Clientes

Administração

Configurações de API

{value}

{count.toLocaleString()}

Perfil

{profileData.name}