New CPM with Laravel 12 and React

2025-04-02 17:49:09 +05:45
commit ecc3d97909
190 changed files with 27148 additions and 0 deletions
--- a/resources/js/pages/users/index/columns.tsx
+++ b/resources/js/pages/users/index/columns.tsx
@ -0,0 +1,45 @@
+import { DataTableColumnHeaderSimple } from '@/components/data-table-column-header-simple-sort';
+import { DataTableColumnHeader } from '@/components/data-table-column-header-sort';
+import { Checkbox } from '@/components/ui/checkbox';
+import { User } from '@/types';
+import { ColumnDef } from '@tanstack/react-table';
+import RowActions from './row-actions';
+
+export const columns: ColumnDef<User>[] = [
+    {
+        id: 'select',
+        header: ({ table }) => (
+            <Checkbox
+                checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+                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,
+        enableHiding: false,
+    },
+    {
+        accessorKey: 'name',
+        header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="Name" />,
+    },
+    {
+        accessorKey: 'email',
+        header: ({ column }) => {
+            return <DataTableColumnHeader column={column} title="Email" />;
+        },
+    },
+    {
+        accessorKey: 'status',
+        header: 'Status',
+    },
+    {
+        id: 'actions',
+        cell: ({ row }) => {
+            const user = row.original;
+            return <RowActions user={user} />;
+        },
+    },
+];
--- a/resources/js/pages/users/index/page.tsx
+++ b/resources/js/pages/users/index/page.tsx
@ -0,0 +1,36 @@
+import { DataTable } from '@/components/data-table';
+import AppLayout from '@/layouts/app-layout';
+import { BreadcrumbItem, User } from '@/types';
+import { Head } from '@inertiajs/react';
+import { UserProvider } from '../user-context';
+import UserForm from '../user-form';
+import { columns } from './columns';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Dashboard',
+        href: '/dashboard',
+    },
+    {
+        title: 'Users',
+        href: '/users',
+    },
+];
+
+const Page = ({ users }: { users: User[] }) => {
+    return (
+        <UserProvider>
+            <AppLayout breadcrumbs={breadcrumbs}>
+                <Head title="Users" />
+                <div className="flex h-full flex-col gap-4 rounded-xl p-4">
+                    <div className="flex justify-end">
+                        <UserForm />
+                    </div>
+                    <DataTable columns={columns} data={users} />
+                </div>
+            </AppLayout>
+        </UserProvider>
+    );
+};
+
+export default Page;
--- a/resources/js/pages/users/index/row-actions.tsx
+++ b/resources/js/pages/users/index/row-actions.tsx
@ -0,0 +1,46 @@
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { User } from '@/types';
+import { MoreHorizontal, PenLine, Trash2, UserX } from 'lucide-react';
+import { useUser } from '../user-context';
+
+function RowActions({ user }: { user: User }) {
+    const { setOpen } = useUser();
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="h-8 w-8 p-0">
+                    <span className="sr-only">Open menu</span>
+                    <MoreHorizontal className="h-4 w-4" />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                <DropdownMenuItem onClick={() => setOpen(true, user)}>
+                    <PenLine className="mr-2 h-4 w-4" />
+                    Edit
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    Delete
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                    <UserX className="mr-2 h-4 w-4" />
+                    Deactivate
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
+
+export default RowActions;