zyflow 0.6.4

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

@@ -0,0 +1,33 @@
+import { faker } from '@faker-js/faker'
+
+// Set a fixed seed for consistent data generation
+faker.seed(67890)
+
+export const users = Array.from({ length: 500 }, () => {
+  const firstName = faker.person.firstName()
+  const lastName = faker.person.lastName()
+  return {
+    id: faker.string.uuid(),
+    firstName,
+    lastName,
+    username: faker.internet
+      .username({ firstName, lastName })
+      .toLocaleLowerCase(),
+    email: faker.internet.email({ firstName }).toLocaleLowerCase(),
+    phoneNumber: faker.phone.number({ style: 'international' }),
+    status: faker.helpers.arrayElement([
+      'active',
+      'inactive',
+      'invited',
+      'suspended',
+    ]),
+    role: faker.helpers.arrayElement([
+      'superadmin',
+      'admin',
+      'cashier',
+      'manager',
+    ]),
+    createdAt: faker.date.past(),
+    updatedAt: faker.date.recent(),
+  }
+})

package/.shadcn-admin-ref/src/features/users/index.tsx

@@ -0,0 +1,47 @@
+import { getRouteApi } from '@tanstack/react-router'
+import { ConfigDrawer } from '@/components/config-drawer'
+import { Header } from '@/components/layout/header'
+import { Main } from '@/components/layout/main'
+import { ProfileDropdown } from '@/components/profile-dropdown'
+import { Search } from '@/components/search'
+import { ThemeSwitch } from '@/components/theme-switch'
+import { UsersDialogs } from './components/users-dialogs'
+import { UsersPrimaryButtons } from './components/users-primary-buttons'
+import { UsersProvider } from './components/users-provider'
+import { UsersTable } from './components/users-table'
+import { users } from './data/users'
+
+const route = getRouteApi('/_authenticated/users/')
+
+export function Users() {
+  const search = route.useSearch()
+  const navigate = route.useNavigate()
+
+  return (
+    <UsersProvider>
+      <Header fixed>
+        <Search />
+        <div className='ms-auto flex items-center space-x-4'>
+          <ThemeSwitch />
+          <ConfigDrawer />
+          <ProfileDropdown />
+        </div>
+      </Header>
+
+      <Main className='flex flex-1 flex-col gap-4 sm:gap-6'>
+        <div className='flex flex-wrap items-end justify-between gap-2'>
+          <div>
+            <h2 className='text-2xl font-bold tracking-tight'>User List</h2>
+            <p className='text-muted-foreground'>
+              Manage your users and their roles here.
+            </p>
+          </div>
+          <UsersPrimaryButtons />
+        </div>
+        <UsersTable data={users} search={search} navigate={navigate} />
+      </Main>
+
+      <UsersDialogs />
+    </UsersProvider>
+  )
+}

package/.shadcn-admin-ref/src/hooks/use-dialog-state.tsx

@@ -0,0 +1,18 @@
+import { useState } from 'react'
+
+/**
+ * Custom hook for confirm dialog
+ * @param initialState string | null
+ * @returns A stateful value, and a function to update it.
+ * @example const [open, setOpen] = useDialogState<"approve" | "reject">()
+ */
+export default function useDialogState<T extends string | boolean>(
+  initialState: T | null = null
+) {
+  const [open, _setOpen] = useState<T | null>(initialState)
+
+  const setOpen = (str: T | null) =>
+    _setOpen((prev) => (prev === str ? null : str))
+
+  return [open, setOpen] as const
+}

package/.shadcn-admin-ref/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}

package/.shadcn-admin-ref/src/hooks/use-table-url-state.ts

@@ -0,0 +1,219 @@
+import { useMemo, useState } from 'react'
+import type {
+  ColumnFiltersState,
+  OnChangeFn,
+  PaginationState,
+} from '@tanstack/react-table'
+
+type SearchRecord = Record<string, unknown>
+
+export type NavigateFn = (opts: {
+  search:
+    | true
+    | SearchRecord
+    | ((prev: SearchRecord) => Partial<SearchRecord> | SearchRecord)
+  replace?: boolean
+}) => void
+
+type UseTableUrlStateParams = {
+  search: SearchRecord
+  navigate: NavigateFn
+  pagination?: {
+    pageKey?: string
+    pageSizeKey?: string
+    defaultPage?: number
+    defaultPageSize?: number
+  }
+  globalFilter?: {
+    enabled?: boolean
+    key?: string
+    trim?: boolean
+  }
+  columnFilters?: Array<
+    | {
+        columnId: string
+        searchKey: string
+        type?: 'string'
+        // Optional transformers for custom types
+        serialize?: (value: unknown) => unknown
+        deserialize?: (value: unknown) => unknown
+      }
+    | {
+        columnId: string
+        searchKey: string
+        type: 'array'
+        serialize?: (value: unknown) => unknown
+        deserialize?: (value: unknown) => unknown
+      }
+  >
+}
+
+type UseTableUrlStateReturn = {
+  // Global filter
+  globalFilter?: string
+  onGlobalFilterChange?: OnChangeFn<string>
+  // Column filters
+  columnFilters: ColumnFiltersState
+  onColumnFiltersChange: OnChangeFn<ColumnFiltersState>
+  // Pagination
+  pagination: PaginationState
+  onPaginationChange: OnChangeFn<PaginationState>
+  // Helpers
+  ensurePageInRange: (
+    pageCount: number,
+    opts?: { resetTo?: 'first' | 'last' }
+  ) => void
+}
+
+export function useTableUrlState(
+  params: UseTableUrlStateParams
+): UseTableUrlStateReturn {
+  const {
+    search,
+    navigate,
+    pagination: paginationCfg,
+    globalFilter: globalFilterCfg,
+    columnFilters: columnFiltersCfg = [],
+  } = params
+
+  const pageKey = paginationCfg?.pageKey ?? ('page' as string)
+  const pageSizeKey = paginationCfg?.pageSizeKey ?? ('pageSize' as string)
+  const defaultPage = paginationCfg?.defaultPage ?? 1
+  const defaultPageSize = paginationCfg?.defaultPageSize ?? 10
+
+  const globalFilterKey = globalFilterCfg?.key ?? ('filter' as string)
+  const globalFilterEnabled = globalFilterCfg?.enabled ?? true
+  const trimGlobal = globalFilterCfg?.trim ?? true
+
+  // Build initial column filters from the current search params
+  const initialColumnFilters: ColumnFiltersState = useMemo(() => {
+    const collected: ColumnFiltersState = []
+    for (const cfg of columnFiltersCfg) {
+      const raw = (search as SearchRecord)[cfg.searchKey]
+      const deserialize = cfg.deserialize ?? ((v: unknown) => v)
+      if (cfg.type === 'string') {
+        const value = (deserialize(raw) as string) ?? ''
+        if (typeof value === 'string' && value.trim() !== '') {
+          collected.push({ id: cfg.columnId, value })
+        }
+      } else {
+        // default to array type
+        const value = (deserialize(raw) as unknown[]) ?? []
+        if (Array.isArray(value) && value.length > 0) {
+          collected.push({ id: cfg.columnId, value })
+        }
+      }
+    }
+    return collected
+  }, [columnFiltersCfg, search])
+
+  const [columnFilters, setColumnFilters] =
+    useState<ColumnFiltersState>(initialColumnFilters)
+
+  const pagination: PaginationState = useMemo(() => {
+    const rawPage = (search as SearchRecord)[pageKey]
+    const rawPageSize = (search as SearchRecord)[pageSizeKey]
+    const pageNum = typeof rawPage === 'number' ? rawPage : defaultPage
+    const pageSizeNum =
+      typeof rawPageSize === 'number' ? rawPageSize : defaultPageSize
+    return { pageIndex: Math.max(0, pageNum - 1), pageSize: pageSizeNum }
+  }, [search, pageKey, pageSizeKey, defaultPage, defaultPageSize])
+
+  const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === 'function' ? updater(pagination) : updater
+    const nextPage = next.pageIndex + 1
+    const nextPageSize = next.pageSize
+    navigate({
+      search: (prev) => ({
+        ...(prev as SearchRecord),
+        [pageKey]: nextPage <= defaultPage ? undefined : nextPage,
+        [pageSizeKey]:
+          nextPageSize === defaultPageSize ? undefined : nextPageSize,
+      }),
+    })
+  }
+
+  const [globalFilter, setGlobalFilter] = useState<string | undefined>(() => {
+    if (!globalFilterEnabled) return undefined
+    const raw = (search as SearchRecord)[globalFilterKey]
+    return typeof raw === 'string' ? raw : ''
+  })
+
+  const onGlobalFilterChange: OnChangeFn<string> | undefined =
+    globalFilterEnabled
+      ? (updater) => {
+          const next =
+            typeof updater === 'function'
+              ? updater(globalFilter ?? '')
+              : updater
+          const value = trimGlobal ? next.trim() : next
+          setGlobalFilter(value)
+          navigate({
+            search: (prev) => ({
+              ...(prev as SearchRecord),
+              [pageKey]: undefined,
+              [globalFilterKey]: value ? value : undefined,
+            }),
+          })
+        }
+      : undefined
+
+  const onColumnFiltersChange: OnChangeFn<ColumnFiltersState> = (updater) => {
+    const next =
+      typeof updater === 'function' ? updater(columnFilters) : updater
+    setColumnFilters(next)
+
+    const patch: Record<string, unknown> = {}
+
+    for (const cfg of columnFiltersCfg) {
+      const found = next.find((f) => f.id === cfg.columnId)
+      const serialize = cfg.serialize ?? ((v: unknown) => v)
+      if (cfg.type === 'string') {
+        const value =
+          typeof found?.value === 'string' ? (found.value as string) : ''
+        patch[cfg.searchKey] =
+          value.trim() !== '' ? serialize(value) : undefined
+      } else {
+        const value = Array.isArray(found?.value)
+          ? (found!.value as unknown[])
+          : []
+        patch[cfg.searchKey] = value.length > 0 ? serialize(value) : undefined
+      }
+    }
+
+    navigate({
+      search: (prev) => ({
+        ...(prev as SearchRecord),
+        [pageKey]: undefined,
+        ...patch,
+      }),
+    })
+  }
+
+  const ensurePageInRange = (
+    pageCount: number,
+    opts: { resetTo?: 'first' | 'last' } = { resetTo: 'first' }
+  ) => {
+    const currentPage = (search as SearchRecord)[pageKey]
+    const pageNum = typeof currentPage === 'number' ? currentPage : defaultPage
+    if (pageCount > 0 && pageNum > pageCount) {
+      navigate({
+        replace: true,
+        search: (prev) => ({
+          ...(prev as SearchRecord),
+          [pageKey]: opts.resetTo === 'last' ? pageCount : undefined,
+        }),
+      })
+    }
+  }
+
+  return {
+    globalFilter: globalFilterEnabled ? (globalFilter ?? '') : undefined,
+    onGlobalFilterChange,
+    columnFilters,
+    onColumnFiltersChange,
+    pagination,
+    onPaginationChange,
+    ensurePageInRange,
+  }
+}

package/.shadcn-admin-ref/src/lib/cookies.ts

@@ -0,0 +1,43 @@
+/**
+ * Cookie utility functions using manual document.cookie approach
+ * Replaces js-cookie dependency for better consistency
+ */
+
+const DEFAULT_MAX_AGE = 60 * 60 * 24 * 7 // 7 days
+
+/**
+ * Get a cookie value by name
+ */
+export function getCookie(name: string): string | undefined {
+  if (typeof document === 'undefined') return undefined
+
+  const value = `; ${document.cookie}`
+  const parts = value.split(`; ${name}=`)
+  if (parts.length === 2) {
+    const cookieValue = parts.pop()?.split(';').shift()
+    return cookieValue
+  }
+  return undefined
+}
+
+/**
+ * Set a cookie with name, value, and optional max age
+ */
+export function setCookie(
+  name: string,
+  value: string,
+  maxAge: number = DEFAULT_MAX_AGE
+): void {
+  if (typeof document === 'undefined') return
+
+  document.cookie = `${name}=${value}; path=/; max-age=${maxAge}`
+}
+
+/**
+ * Remove a cookie by setting its max age to 0
+ */
+export function removeCookie(name: string): void {
+  if (typeof document === 'undefined') return
+
+  document.cookie = `${name}=; path=/; max-age=0`
+}

package/.shadcn-admin-ref/src/lib/handle-server-error.ts

@@ -0,0 +1,24 @@
+import { AxiosError } from 'axios'
+import { toast } from 'sonner'
+
+export function handleServerError(error: unknown) {
+  // eslint-disable-next-line no-console
+  console.log(error)
+
+  let errMsg = 'Something went wrong!'
+
+  if (
+    error &&
+    typeof error === 'object' &&
+    'status' in error &&
+    Number(error.status) === 204
+  ) {
+    errMsg = 'Content not found.'
+  }
+
+  if (error instanceof AxiosError) {
+    errMsg = error.response?.data.title
+  }
+
+  toast.error(errMsg)
+}

package/.shadcn-admin-ref/src/lib/show-submitted-data.tsx

@@ -0,0 +1,15 @@
+import { toast } from 'sonner'
+
+export function showSubmittedData(
+  data: unknown,
+  title: string = 'You submitted the following values:'
+) {
+  toast.message(title, {
+    description: (
+      // w-[340px]
+      <pre className='mt-2 w-full overflow-x-auto rounded-md bg-slate-950 p-4'>
+        <code className='text-white'>{JSON.stringify(data, null, 2)}</code>
+      </pre>
+    ),
+  })
+}

package/.shadcn-admin-ref/src/lib/utils.ts

@@ -0,0 +1,60 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function sleep(ms: number = 1000) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+/**
+ * Generates page numbers for pagination with ellipsis
+ * @param currentPage - Current page number (1-based)
+ * @param totalPages - Total number of pages
+ * @returns Array of page numbers and ellipsis strings
+ *
+ * Examples:
+ * - Small dataset (≤5 pages): [1, 2, 3, 4, 5]
+ * - Near beginning: [1, 2, 3, 4, '...', 10]
+ * - In middle: [1, '...', 4, 5, 6, '...', 10]
+ * - Near end: [1, '...', 7, 8, 9, 10]
+ */
+export function getPageNumbers(currentPage: number, totalPages: number) {
+  const maxVisiblePages = 5 // Maximum number of page buttons to show
+  const rangeWithDots = []
+
+  if (totalPages <= maxVisiblePages) {
+    // If total pages is 5 or less, show all pages
+    for (let i = 1; i <= totalPages; i++) {
+      rangeWithDots.push(i)
+    }
+  } else {
+    // Always show first page
+    rangeWithDots.push(1)
+
+    if (currentPage <= 3) {
+      // Near the beginning: [1] [2] [3] [4] ... [10]
+      for (let i = 2; i <= 4; i++) {
+        rangeWithDots.push(i)
+      }
+      rangeWithDots.push('...', totalPages)
+    } else if (currentPage >= totalPages - 2) {
+      // Near the end: [1] ... [7] [8] [9] [10]
+      rangeWithDots.push('...')
+      for (let i = totalPages - 3; i <= totalPages; i++) {
+        rangeWithDots.push(i)
+      }
+    } else {
+      // In the middle: [1] ... [4] [5] [6] ... [10]
+      rangeWithDots.push('...')
+      for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+        rangeWithDots.push(i)
+      }
+      rangeWithDots.push('...', totalPages)
+    }
+  }
+
+  return rangeWithDots
+}

package/.shadcn-admin-ref/src/main.tsx

@@ -0,0 +1,107 @@
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom/client'
+import { AxiosError } from 'axios'
+import {
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { useAuthStore } from '@/stores/auth-store'
+import { handleServerError } from '@/lib/handle-server-error'
+import { DirectionProvider } from './context/direction-provider'
+import { FontProvider } from './context/font-provider'
+import { ThemeProvider } from './context/theme-provider'
+// Generated Routes
+import { routeTree } from './routeTree.gen'
+// Styles
+import './styles/index.css'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: (failureCount, error) => {
+        // eslint-disable-next-line no-console
+        if (import.meta.env.DEV) console.log({ failureCount, error })
+
+        if (failureCount >= 0 && import.meta.env.DEV) return false
+        if (failureCount > 3 && import.meta.env.PROD) return false
+
+        return !(
+          error instanceof AxiosError &&
+          [401, 403].includes(error.response?.status ?? 0)
+        )
+      },
+      refetchOnWindowFocus: import.meta.env.PROD,
+      staleTime: 10 * 1000, // 10s
+    },
+    mutations: {
+      onError: (error) => {
+        handleServerError(error)
+
+        if (error instanceof AxiosError) {
+          if (error.response?.status === 304) {
+            toast.error('Content not modified!')
+          }
+        }
+      },
+    },
+  },
+  queryCache: new QueryCache({
+    onError: (error) => {
+      if (error instanceof AxiosError) {
+        if (error.response?.status === 401) {
+          toast.error('Session expired!')
+          useAuthStore.getState().auth.reset()
+          const redirect = `${router.history.location.href}`
+          router.navigate({ to: '/sign-in', search: { redirect } })
+        }
+        if (error.response?.status === 500) {
+          toast.error('Internal Server Error!')
+          // Only navigate to error page in production to avoid disrupting HMR in development
+          if (import.meta.env.PROD) {
+            router.navigate({ to: '/500' })
+          }
+        }
+        if (error.response?.status === 403) {
+          // router.navigate("/forbidden", { replace: true });
+        }
+      }
+    },
+  }),
+})
+
+// Create a new router instance
+const router = createRouter({
+  routeTree,
+  context: { queryClient },
+  defaultPreload: 'intent',
+  defaultPreloadStaleTime: 0,
+})
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById('root')!
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider>
+          <FontProvider>
+            <DirectionProvider>
+              <RouterProvider router={router} />
+            </DirectionProvider>
+          </FontProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </StrictMode>
+  )
+}