first commit

components/collections/roles-table.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { CollectionTable } from "@/components/collections/collection-table";
+import { Badge } from "@/components/ui/badge";
+import { AccessRole } from "@/lib/types";
+
+export function RolesTable() {
+  const columns = [
+    {
+      key: "_id",
+      label: "ID",
+      render: (value: unknown) => (
+        <span className="font-mono text-xs">{String(value).slice(-8)}</span>
+      ),
+    },
+    {
+      key: "name",
+      label: "Nom du rôle",
+      render: (value: unknown) => (
+        <span className="font-semibold">{String(value)}</span>
+      ),
+    },
+    {
+      key: "permissions",
+      label: "Permissions",
+      render: (value: unknown) => {
+        if (!Array.isArray(value)) return "-";
+        return (
+          <div className="flex flex-wrap gap-1">
+            {value.slice(0, 3).map((permission, index) => (
+              <Badge key={index} variant="secondary" className="text-xs">
+                {String(permission)}
+              </Badge>
+            ))}
+            {value.length > 3 && (
+              <Badge variant="outline" className="text-xs">
+                +{value.length - 3}
+              </Badge>
+            )}
+          </div>
+        );
+      },
+    },
+  ];
+
+  return (
+    <CollectionTable<AccessRole>
+      collectionName="accessroles"
+      title="Liste des rôles"
+      columns={columns}
+    />
+  );
+}