Initial commit

2026-06-17 13:51:22 +02:00
commit 4898bf7142
81 changed files with 12522 additions and 0 deletions
@@ -0,0 +1,146 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { ColumnDef } from "@tanstack/react-table"
+import { DataTable } from "@/components/shared/data-table"
+import { DataTableColumnHeader } from "@/components/shared/data-table-column-header"
+import { UserStatusBadge } from "./user-status-badge"
+import { UserFormDialog } from "./user-form-dialog"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { User } from "@/types"
+import { Pencil, Power, PowerOff } from "lucide-react"
+
+interface UsersTableProps {
+  data: User[]
+  loading?: boolean
+}
+
+export function UsersTable({ data, loading }: UsersTableProps) {
+  const [editingUser, setEditingUser] = useState<User | null>(null)
+  const [editOpen, setEditOpen] = useState(false)
+
+  const columns: ColumnDef<User>[] = useMemo(
+    () => [
+      {
+        id: "select",
+        header: ({ table }) => (
+          <Checkbox
+            checked={table.getIsAllPageRowsSelected()}
+            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            aria-label="Select all"
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+          />
+        ),
+        enableSorting: false,
+      },
+      {
+        accessorKey: "name",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Name" />
+        ),
+        cell: ({ row }) => (
+          <div className="flex items-center gap-3">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src={row.original.avatar} />
+              <AvatarFallback>{row.original.name[0]}</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="font-medium">{row.original.name}</p>
+              <p className="text-xs text-muted-foreground">{row.original.email}</p>
+            </div>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "email",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Email" />
+        ),
+        cell: ({ row }) => (
+          <span className="text-muted-foreground">{row.getValue("email")}</span>
+        ),
+      },
+      {
+        accessorKey: "role",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Role" />
+        ),
+        cell: ({ row }) => {
+          const role = row.getValue("role") as string
+          return (
+            <Badge
+              variant="outline"
+              className={role === "admin"
+                ? "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20 capitalize"
+                : "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20 capitalize"
+              }
+            >
+              {role}
+            </Badge>
+          )
+        },
+      },
+      {
+        accessorKey: "active",
+        header: ({ column }) => (
+          <DataTableColumnHeader column={column} title="Status" />
+        ),
+        cell: ({ row }) => <UserStatusBadge active={row.getValue("active")} />,
+      },
+      {
+        id: "actions",
+        cell: ({ row }) => {
+          const user = row.original
+          return (
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => {
+                  setEditingUser(user)
+                  setEditOpen(true)
+                }}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-muted-foreground hover:text-destructive"
+              >
+                {user.active ? <PowerOff className="h-4 w-4" /> : <Power className="h-4 w-4" />}
+              </Button>
+            </div>
+          )
+        },
+      },
+    ],
+    []
+  )
+
+  return (
+    <>
+      <DataTable
+        columns={columns}
+        data={data}
+        loading={loading}
+        emptyMessage="No users found."
+      />
+      <UserFormDialog
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        user={editingUser}
+      />
+    </>
+  )
+}