import React from 'react'; import AppSidebarLayout from '@/layouts/app/app-sidebar-layout'; import { Head, Link } from '@inertiajs/react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Badge } from '@/components/ui/badge'; import { MoreHorizontal, Plus, Search } from 'lucide-react'; // Define User interface directly here to avoid import issues for now interface User { id: number; name: string; email: string; role: string; avatar: string | null; status: string; created_at: string; } interface IndexProps { users: User[]; } export default function Index({ users }: IndexProps) { const breadcrumbs = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Users', href: '/admin/users' }, ]; const getRoleBadgeColor = (role: string) => { switch (role) { case 'superadmin': return 'bg-purple-100 text-purple-700 hover:bg-purple-200 border-purple-200'; case 'head': return 'bg-blue-100 text-blue-700 hover:bg-blue-200 border-blue-200'; case 'finance': return 'bg-green-100 text-green-700 hover:bg-green-200 border-green-200'; default: return 'bg-gray-100 text-gray-700 hover:bg-gray-200 border-gray-200'; } }; return (

Users

Manage your team members and their roles.

User Role Status Joined Actions {users.map((user) => (

{user.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase()}

{user.name} {user.email}

{user.role}

{user.status}

{new Date(user.created_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })} Edit Delete ))}

); }