zyflow 0.6.4

package/.shadcn-admin-ref/src/features/users/components/users-delete-dialog.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { useState } from 'react'
+import { AlertTriangle } from 'lucide-react'
+import { showSubmittedData } from '@/lib/show-submitted-data'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { type User } from '../data/schema'
+
+type UserDeleteDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  currentRow: User
+}
+
+export function UsersDeleteDialog({
+  open,
+  onOpenChange,
+  currentRow,
+}: UserDeleteDialogProps) {
+  const [value, setValue] = useState('')
+
+  const handleDelete = () => {
+    if (value.trim() !== currentRow.username) return
+
+    onOpenChange(false)
+    showSubmittedData(currentRow, 'The following user has been deleted:')
+  }
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      handleConfirm={handleDelete}
+      disabled={value.trim() !== currentRow.username}
+      title={
+        <span className='text-destructive'>
+          <AlertTriangle
+            className='me-1 inline-block stroke-destructive'
+            size={18}
+          />{' '}
+          Delete User
+        </span>
+      }
+      desc={
+        <div className='space-y-4'>
+          <p className='mb-2'>
+            Are you sure you want to delete{' '}
+            <span className='font-bold'>{currentRow.username}</span>?
+            <br />
+            This action will permanently remove the user with the role of{' '}
+            <span className='font-bold'>
+              {currentRow.role.toUpperCase()}
+            </span>{' '}
+            from the system. This cannot be undone.
+          </p>
+
+          <Label className='my-2'>
+            Username:
+            <Input
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              placeholder='Enter username to confirm deletion.'
+            />
+          </Label>
+
+          <Alert variant='destructive'>
+            <AlertTitle>Warning!</AlertTitle>
+            <AlertDescription>
+              Please be careful, this operation can not be rolled back.
+            </AlertDescription>
+          </Alert>
+        </div>
+      }
+      confirmText='Delete'
+      destructive
+    />
+  )
+}

package/.shadcn-admin-ref/src/features/users/components/users-dialogs.tsx

@@ -0,0 +1,51 @@
+import { UsersActionDialog } from './users-action-dialog'
+import { UsersDeleteDialog } from './users-delete-dialog'
+import { UsersInviteDialog } from './users-invite-dialog'
+import { useUsers } from './users-provider'
+
+export function UsersDialogs() {
+  const { open, setOpen, currentRow, setCurrentRow } = useUsers()
+  return (
+    <>
+      <UsersActionDialog
+        key='user-add'
+        open={open === 'add'}
+        onOpenChange={() => setOpen('add')}
+      />
+
+      <UsersInviteDialog
+        key='user-invite'
+        open={open === 'invite'}
+        onOpenChange={() => setOpen('invite')}
+      />
+
+      {currentRow && (
+        <>
+          <UsersActionDialog
+            key={`user-edit-${currentRow.id}`}
+            open={open === 'edit'}
+            onOpenChange={() => {
+              setOpen('edit')
+              setTimeout(() => {
+                setCurrentRow(null)
+              }, 500)
+            }}
+            currentRow={currentRow}
+          />
+
+          <UsersDeleteDialog
+            key={`user-delete-${currentRow.id}`}
+            open={open === 'delete'}
+            onOpenChange={() => {
+              setOpen('delete')
+              setTimeout(() => {
+                setCurrentRow(null)
+              }, 500)
+            }}
+            currentRow={currentRow}
+          />
+        </>
+      )}
+    </>
+  )
+}

package/.shadcn-admin-ref/src/features/users/components/users-invite-dialog.tsx

@@ -0,0 +1,150 @@
+import { z } from 'zod'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { MailPlus, Send } from 'lucide-react'
+import { showSubmittedData } from '@/lib/show-submitted-data'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { SelectDropdown } from '@/components/select-dropdown'
+import { roles } from '../data/data'
+
+const formSchema = z.object({
+  email: z.email({
+    error: (iss) =>
+      iss.input === '' ? 'Please enter an email to invite.' : undefined,
+  }),
+  role: z.string().min(1, 'Role is required.'),
+  desc: z.string().optional(),
+})
+
+type UserInviteForm = z.infer<typeof formSchema>
+
+type UserInviteDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function UsersInviteDialog({
+  open,
+  onOpenChange,
+}: UserInviteDialogProps) {
+  const form = useForm<UserInviteForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { email: '', role: '', desc: '' },
+  })
+
+  const onSubmit = (values: UserInviteForm) => {
+    form.reset()
+    showSubmittedData(values)
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(state) => {
+        form.reset()
+        onOpenChange(state)
+      }}
+    >
+      <DialogContent className='sm:max-w-md'>
+        <DialogHeader className='text-start'>
+          <DialogTitle className='flex items-center gap-2'>
+            <MailPlus /> Invite User
+          </DialogTitle>
+          <DialogDescription>
+            Invite new user to join your team by sending them an email
+            invitation. Assign a role to define their access level.
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            id='user-invite-form'
+            onSubmit={form.handleSubmit(onSubmit)}
+            className='space-y-4'
+          >
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      type='email'
+                      placeholder='eg: john.doe@gmail.com'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='role'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Role</FormLabel>
+                  <SelectDropdown
+                    defaultValue={field.value}
+                    onValueChange={field.onChange}
+                    placeholder='Select a role'
+                    items={roles.map(({ label, value }) => ({
+                      label,
+                      value,
+                    }))}
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='desc'
+              render={({ field }) => (
+                <FormItem className=''>
+                  <FormLabel>Description (optional)</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      className='resize-none'
+                      placeholder='Add a personal note to your invitation (optional)'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+        <DialogFooter className='gap-y-2'>
+          <DialogClose asChild>
+            <Button variant='outline'>Cancel</Button>
+          </DialogClose>
+          <Button type='submit' form='user-invite-form'>
+            Invite <Send />
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/.shadcn-admin-ref/src/features/users/components/users-multi-delete-dialog.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { useState } from 'react'
+import { type Table } from '@tanstack/react-table'
+import { AlertTriangle } from 'lucide-react'
+import { toast } from 'sonner'
+import { sleep } from '@/lib/utils'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+
+type UserMultiDeleteDialogProps<TData> = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  table: Table<TData>
+}
+
+const CONFIRM_WORD = 'DELETE'
+
+export function UsersMultiDeleteDialog<TData>({
+  open,
+  onOpenChange,
+  table,
+}: UserMultiDeleteDialogProps<TData>) {
+  const [value, setValue] = useState('')
+
+  const selectedRows = table.getFilteredSelectedRowModel().rows
+
+  const handleDelete = () => {
+    if (value.trim() !== CONFIRM_WORD) {
+      toast.error(`Please type "${CONFIRM_WORD}" to confirm.`)
+      return
+    }
+
+    onOpenChange(false)
+
+    toast.promise(sleep(2000), {
+      loading: 'Deleting users...',
+      success: () => {
+        setValue('')
+        table.resetRowSelection()
+        return `Deleted ${selectedRows.length} ${
+          selectedRows.length > 1 ? 'users' : 'user'
+        }`
+      },
+      error: 'Error',
+    })
+  }
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      handleConfirm={handleDelete}
+      disabled={value.trim() !== CONFIRM_WORD}
+      title={
+        <span className='text-destructive'>
+          <AlertTriangle
+            className='me-1 inline-block stroke-destructive'
+            size={18}
+          />{' '}
+          Delete {selectedRows.length}{' '}
+          {selectedRows.length > 1 ? 'users' : 'user'}
+        </span>
+      }
+      desc={
+        <div className='space-y-4'>
+          <p className='mb-2'>
+            Are you sure you want to delete the selected users? <br />
+            This action cannot be undone.
+          </p>
+
+          <Label className='my-4 flex flex-col items-start gap-1.5'>
+            <span className=''>Confirm by typing "{CONFIRM_WORD}":</span>
+            <Input
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              placeholder={`Type "${CONFIRM_WORD}" to confirm.`}
+            />
+          </Label>
+
+          <Alert variant='destructive'>
+            <AlertTitle>Warning!</AlertTitle>
+            <AlertDescription>
+              Please be careful, this operation can not be rolled back.
+            </AlertDescription>
+          </Alert>
+        </div>
+      }
+      confirmText='Delete'
+      destructive
+    />
+  )
+}

package/.shadcn-admin-ref/src/features/users/components/users-primary-buttons.tsx

@@ -0,0 +1,21 @@
+import { MailPlus, UserPlus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { useUsers } from './users-provider'
+
+export function UsersPrimaryButtons() {
+  const { setOpen } = useUsers()
+  return (
+    <div className='flex gap-2'>
+      <Button
+        variant='outline'
+        className='space-x-1'
+        onClick={() => setOpen('invite')}
+      >
+        <span>Invite User</span> <MailPlus size={18} />
+      </Button>
+      <Button className='space-x-1' onClick={() => setOpen('add')}>
+        <span>Add User</span> <UserPlus size={18} />
+      </Button>
+    </div>
+  )
+}

package/.shadcn-admin-ref/src/features/users/components/users-provider.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import useDialogState from '@/hooks/use-dialog-state'
+import { type User } from '../data/schema'
+
+type UsersDialogType = 'invite' | 'add' | 'edit' | 'delete'
+
+type UsersContextType = {
+  open: UsersDialogType | null
+  setOpen: (str: UsersDialogType | null) => void
+  currentRow: User | null
+  setCurrentRow: React.Dispatch<React.SetStateAction<User | null>>
+}
+
+const UsersContext = React.createContext<UsersContextType | null>(null)
+
+export function UsersProvider({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useDialogState<UsersDialogType>(null)
+  const [currentRow, setCurrentRow] = useState<User | null>(null)
+
+  return (
+    <UsersContext value={{ open, setOpen, currentRow, setCurrentRow }}>
+      {children}
+    </UsersContext>
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useUsers = () => {
+  const usersContext = React.useContext(UsersContext)
+
+  if (!usersContext) {
+    throw new Error('useUsers has to be used within <UsersContext>')
+  }
+
+  return usersContext
+}

package/.shadcn-admin-ref/src/features/users/components/users-table.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useState } from 'react'
+import {
+  type SortingState,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { cn } from '@/lib/utils'
+import { type NavigateFn, useTableUrlState } from '@/hooks/use-table-url-state'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { DataTablePagination, DataTableToolbar } from '@/components/data-table'
+import { roles } from '../data/data'
+import { type User } from '../data/schema'
+import { DataTableBulkActions } from './data-table-bulk-actions'
+import { usersColumns as columns } from './users-columns'
+
+type DataTableProps = {
+  data: User[]
+  search: Record<string, unknown>
+  navigate: NavigateFn
+}
+
+export function UsersTable({ data, search, navigate }: DataTableProps) {
+  // Local UI-only states
+  const [rowSelection, setRowSelection] = useState({})
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+  const [sorting, setSorting] = useState<SortingState>([])
+
+  // Local state management for table (uncomment to use local-only state, not synced with URL)
+  // const [columnFilters, onColumnFiltersChange] = useState<ColumnFiltersState>([])
+  // const [pagination, onPaginationChange] = useState<PaginationState>({ pageIndex: 0, pageSize: 10 })
+
+  // Synced with URL states (keys/defaults mirror users route search schema)
+  const {
+    columnFilters,
+    onColumnFiltersChange,
+    pagination,
+    onPaginationChange,
+    ensurePageInRange,
+  } = useTableUrlState({
+    search,
+    navigate,
+    pagination: { defaultPage: 1, defaultPageSize: 10 },
+    globalFilter: { enabled: false },
+    columnFilters: [
+      // username per-column text filter
+      { columnId: 'username', searchKey: 'username', type: 'string' },
+      { columnId: 'status', searchKey: 'status', type: 'array' },
+      { columnId: 'role', searchKey: 'role', type: 'array' },
+    ],
+  })
+
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      pagination,
+      rowSelection,
+      columnFilters,
+      columnVisibility,
+    },
+    enableRowSelection: true,
+    onPaginationChange,
+    onColumnFiltersChange,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    getPaginationRowModel: getPaginationRowModel(),
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  })
+
+  useEffect(() => {
+    ensurePageInRange(table.getPageCount())
+  }, [table, ensurePageInRange])
+
+  return (
+    <div
+      className={cn(
+        'max-sm:has-[div[role="toolbar"]]:mb-16', // Add margin bottom to the table on mobile when the toolbar is visible
+        'flex flex-1 flex-col gap-4'
+      )}
+    >
+      <DataTableToolbar
+        table={table}
+        searchPlaceholder='Filter users...'
+        searchKey='username'
+        filters={[
+          {
+            columnId: 'status',
+            title: 'Status',
+            options: [
+              { label: 'Active', value: 'active' },
+              { label: 'Inactive', value: 'inactive' },
+              { label: 'Invited', value: 'invited' },
+              { label: 'Suspended', value: 'suspended' },
+            ],
+          },
+          {
+            columnId: 'role',
+            title: 'Role',
+            options: roles.map((role) => ({ ...role })),
+          },
+        ]}
+      />
+      <div className='overflow-hidden rounded-md border'>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className='group/row'>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead
+                      key={header.id}
+                      colSpan={header.colSpan}
+                      className={cn(
+                        'bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted',
+                        header.column.columnDef.meta?.className,
+                        header.column.columnDef.meta?.thClassName
+                      )}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                  className='group/row'
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={cn(
+                        'bg-background group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted',
+                        cell.column.columnDef.meta?.className,
+                        cell.column.columnDef.meta?.tdClassName
+                      )}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className='h-24 text-center'
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} className='mt-auto' />
+      <DataTableBulkActions table={table} />
+    </div>
+  )
+}

package/.shadcn-admin-ref/src/features/users/data/data.ts

@@ -0,0 +1,35 @@
+import { Shield, UserCheck, Users, CreditCard } from 'lucide-react'
+import { type UserStatus } from './schema'
+
+export const callTypes = new Map<UserStatus, string>([
+  ['active', 'bg-teal-100/30 text-teal-900 dark:text-teal-200 border-teal-200'],
+  ['inactive', 'bg-neutral-300/40 border-neutral-300'],
+  ['invited', 'bg-sky-200/40 text-sky-900 dark:text-sky-100 border-sky-300'],
+  [
+    'suspended',
+    'bg-destructive/10 dark:bg-destructive/50 text-destructive dark:text-primary border-destructive/10',
+  ],
+])
+
+export const roles = [
+  {
+    label: 'Superadmin',
+    value: 'superadmin',
+    icon: Shield,
+  },
+  {
+    label: 'Admin',
+    value: 'admin',
+    icon: UserCheck,
+  },
+  {
+    label: 'Manager',
+    value: 'manager',
+    icon: Users,
+  },
+  {
+    label: 'Cashier',
+    value: 'cashier',
+    icon: CreditCard,
+  },
+] as const

package/.shadcn-admin-ref/src/features/users/data/schema.ts

@@ -0,0 +1,32 @@
+import { z } from 'zod'
+
+const userStatusSchema = z.union([
+  z.literal('active'),
+  z.literal('inactive'),
+  z.literal('invited'),
+  z.literal('suspended'),
+])
+export type UserStatus = z.infer<typeof userStatusSchema>
+
+const userRoleSchema = z.union([
+  z.literal('superadmin'),
+  z.literal('admin'),
+  z.literal('cashier'),
+  z.literal('manager'),
+])
+
+const userSchema = z.object({
+  id: z.string(),
+  firstName: z.string(),
+  lastName: z.string(),
+  username: z.string(),
+  email: z.string(),
+  phoneNumber: z.string(),
+  status: userStatusSchema,
+  role: userRoleSchema,
+  createdAt: z.coerce.date(),
+  updatedAt: z.coerce.date(),
+})
+export type User = z.infer<typeof userSchema>
+
+export const userListSchema = z.array(userSchema)