create-app-ui 1.0.0

package/templates/admin-portal/src/pages/components/demo-columns.tsx

@@ -0,0 +1,170 @@
+import { type ColumnDef } from "@tanstack/react-table";
+import { Pencil, Trash2 } from "lucide-react";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DataTable,
+  DataTableColumnHeader,
+  dataTableActionsColumn,
+  type DataTableFilterableColumn,
+} from "@/components/data-table";
+
+export type DemoUser = {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: "active" | "invited" | "disabled";
+};
+
+const initialDemoUsers: DemoUser[] = [
+  { id: "1", name: "Ava Johnson", email: "ava@company.com", role: "Admin", status: "active" },
+  { id: "2", name: "Noah Patel", email: "noah@company.com", role: "Editor", status: "active" },
+  { id: "3", name: "Mia Chen", email: "mia@company.com", role: "Viewer", status: "invited" },
+  { id: "4", name: "Liam Brooks", email: "liam@company.com", role: "Editor", status: "disabled" },
+  { id: "5", name: "Sofia Rossi", email: "sofia@company.com", role: "Admin", status: "active" },
+  { id: "6", name: "Ethan Wright", email: "ethan@company.com", role: "Viewer", status: "invited" },
+  { id: "7", name: "Isla Martin", email: "isla@company.com", role: "Editor", status: "active" },
+  { id: "8", name: "James Lee", email: "james@company.com", role: "Viewer", status: "disabled" },
+  { id: "9", name: "Olivia Brown", email: "olivia@company.com", role: "Admin", status: "active" },
+  { id: "10", name: "Lucas Kim", email: "lucas@company.com", role: "Editor", status: "invited" },
+  { id: "11", name: "Emma Davis", email: "emma@company.com", role: "Viewer", status: "active" },
+  { id: "12", name: "Henry Wilson", email: "henry@company.com", role: "Editor", status: "disabled" },
+];
+
+export const demoUsers = initialDemoUsers;
+
+const statusVariant: Record<DemoUser["status"], "default" | "secondary" | "outline"> = {
+  active: "default",
+  invited: "secondary",
+  disabled: "outline",
+};
+
+const multiSelectFilter = (row: { getValue: (id: string) => unknown }, id: string, value: unknown) => {
+  const filters = value as string[] | undefined;
+  if (!filters?.length) {
+    return true;
+  }
+  return filters.includes(String(row.getValue(id)));
+};
+
+export const demoUserColumns: ColumnDef<DemoUser>[] = [
+  {
+    accessorKey: "name",
+    meta: { title: "Name" },
+    enableHiding: true,
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+    cell: ({ row }) => <span className="font-medium">{row.getValue("name")}</span>,
+  },
+  {
+    accessorKey: "email",
+    meta: { title: "Email" },
+    enableHiding: true,
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
+  },
+  {
+    accessorKey: "role",
+    meta: { title: "Role" },
+    enableHiding: true,
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Role" />,
+    filterFn: multiSelectFilter,
+  },
+  {
+    accessorKey: "status",
+    meta: { title: "Status" },
+    enableHiding: true,
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
+    filterFn: multiSelectFilter,
+    cell: ({ row }) => {
+      const status = row.getValue("status") as DemoUser["status"];
+      return <Badge variant={statusVariant[status]}>{status}</Badge>;
+    },
+  },
+  dataTableActionsColumn<DemoUser>({
+    getActions: (user) => [
+      {
+        tooltip: "Update",
+        icon: <Pencil className="h-4 w-4" />,
+        onClick: () => toast.message(`Editing ${user.name}`),
+      },
+      {
+        tooltip: "Delete",
+        icon: <Trash2 className="h-4 w-4" />,
+        variant: "destructive",
+        onClick: () => toast.message(`Removed ${user.name}`),
+      },
+    ],
+  }),
+];
+
+export const demoUserFilterableColumns: DataTableFilterableColumn[] = [
+  {
+    id: "status",
+    title: "Status",
+    options: [
+      { label: "Active", value: "active" },
+      { label: "Invited", value: "invited" },
+      { label: "Disabled", value: "disabled" },
+    ],
+  },
+  {
+    id: "role",
+    title: "Role",
+    options: [
+      { label: "Admin", value: "Admin" },
+      { label: "Editor", value: "Editor" },
+      { label: "Viewer", value: "Viewer" },
+    ],
+  },
+];
+
+export function DemoUsersDataTable() {
+  const [users, setUsers] = useState<DemoUser[]>(initialDemoUsers);
+  const [selectedUsers, setSelectedUsers] = useState<DemoUser[]>([]);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefresh = useCallback(async () => {
+    setIsRefreshing(true);
+    await new Promise((resolve) => setTimeout(resolve, 700));
+    setUsers([...initialDemoUsers]);
+    setIsRefreshing(false);
+    toast.success("User list refreshed");
+  }, []);
+
+  const handleExport = useCallback(() => {
+    toast.success(`Exported ${users.length} user(s)`);
+  }, [users.length]);
+
+  return (
+    <DataTable
+      columns={demoUserColumns}
+      data={users}
+      pageSize={10}
+      pageSizeOptions={[5, 10, 20, 30]}
+      searchPlaceholder="Search name, email, or role..."
+      filterableColumns={demoUserFilterableColumns}
+      enableRowSelection
+      onSelectionChange={setSelectedUsers}
+      onRefresh={handleRefresh}
+      isRefreshing={isRefreshing}
+      onExport={handleExport}
+      searchAction={{
+        label: "Add user",
+        onClick: () => toast.message("Add user"),
+      }}
+      bulkActions={
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8"
+          onClick={() => toast.message(`Deleted ${selectedUsers.length} user(s)`)}
+        >
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </Button>
+      }
+    />
+  );
+}