zyflow 0.6.4

package/.shadcn-admin-ref/src/routes/(auth)/forgot-password.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ForgotPassword } from '@/features/auth/forgot-password'
+
+export const Route = createFileRoute('/(auth)/forgot-password')({
+  component: ForgotPassword,
+})

package/.shadcn-admin-ref/src/routes/(auth)/otp.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { Otp } from '@/features/auth/otp'
+
+export const Route = createFileRoute('/(auth)/otp')({
+  component: Otp,
+})

package/.shadcn-admin-ref/src/routes/(auth)/sign-in-2.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SignIn2 } from '@/features/auth/sign-in/sign-in-2'
+
+export const Route = createFileRoute('/(auth)/sign-in-2')({
+  component: SignIn2,
+})

package/.shadcn-admin-ref/src/routes/(auth)/sign-in.tsx

@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import { createFileRoute } from '@tanstack/react-router'
+import { SignIn } from '@/features/auth/sign-in'
+
+const searchSchema = z.object({
+  redirect: z.string().optional(),
+})
+
+export const Route = createFileRoute('/(auth)/sign-in')({
+  component: SignIn,
+  validateSearch: searchSchema,
+})

package/.shadcn-admin-ref/src/routes/(auth)/sign-up.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SignUp } from '@/features/auth/sign-up'
+
+export const Route = createFileRoute('/(auth)/sign-up')({
+  component: SignUp,
+})

package/.shadcn-admin-ref/src/routes/(errors)/401.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { UnauthorisedError } from '@/features/errors/unauthorized-error'
+
+export const Route = createFileRoute('/(errors)/401')({
+  component: UnauthorisedError,
+})

package/.shadcn-admin-ref/src/routes/(errors)/403.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ForbiddenError } from '@/features/errors/forbidden'
+
+export const Route = createFileRoute('/(errors)/403')({
+  component: ForbiddenError,
+})

package/.shadcn-admin-ref/src/routes/(errors)/404.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { NotFoundError } from '@/features/errors/not-found-error'
+
+export const Route = createFileRoute('/(errors)/404')({
+  component: NotFoundError,
+})

package/.shadcn-admin-ref/src/routes/(errors)/500.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { GeneralError } from '@/features/errors/general-error'
+
+export const Route = createFileRoute('/(errors)/500')({
+  component: GeneralError,
+})

package/.shadcn-admin-ref/src/routes/(errors)/503.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { MaintenanceError } from '@/features/errors/maintenance-error'
+
+export const Route = createFileRoute('/(errors)/503')({
+  component: MaintenanceError,
+})

package/.shadcn-admin-ref/src/routes/__root.tsx

@@ -0,0 +1,30 @@
+import { type QueryClient } from '@tanstack/react-query'
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { Toaster } from '@/components/ui/sonner'
+import { NavigationProgress } from '@/components/navigation-progress'
+import { GeneralError } from '@/features/errors/general-error'
+import { NotFoundError } from '@/features/errors/not-found-error'
+
+export const Route = createRootRouteWithContext<{
+  queryClient: QueryClient
+}>()({
+  component: () => {
+    return (
+      <>
+        <NavigationProgress />
+        <Outlet />
+        <Toaster duration={5000} />
+        {import.meta.env.MODE === 'development' && (
+          <>
+            <ReactQueryDevtools buttonPosition='bottom-left' />
+            <TanStackRouterDevtools position='bottom-right' />
+          </>
+        )}
+      </>
+    )
+  },
+  notFoundComponent: NotFoundError,
+  errorComponent: GeneralError,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/apps/index.tsx

@@ -0,0 +1,17 @@
+import z from 'zod'
+import { createFileRoute } from '@tanstack/react-router'
+import { Apps } from '@/features/apps'
+
+const appsSearchSchema = z.object({
+  type: z
+    .enum(['all', 'connected', 'notConnected'])
+    .optional()
+    .catch(undefined),
+  filter: z.string().optional().catch(''),
+  sort: z.enum(['asc', 'desc']).optional().catch(undefined),
+})
+
+export const Route = createFileRoute('/_authenticated/apps/')({
+  validateSearch: appsSearchSchema,
+  component: Apps,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/chats/index.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { Chats } from '@/features/chats'
+
+export const Route = createFileRoute('/_authenticated/chats/')({
+  component: Chats,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/errors/$error.tsx

@@ -0,0 +1,45 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ConfigDrawer } from '@/components/config-drawer'
+import { Header } from '@/components/layout/header'
+import { ProfileDropdown } from '@/components/profile-dropdown'
+import { Search } from '@/components/search'
+import { ThemeSwitch } from '@/components/theme-switch'
+import { ForbiddenError } from '@/features/errors/forbidden'
+import { GeneralError } from '@/features/errors/general-error'
+import { MaintenanceError } from '@/features/errors/maintenance-error'
+import { NotFoundError } from '@/features/errors/not-found-error'
+import { UnauthorisedError } from '@/features/errors/unauthorized-error'
+
+export const Route = createFileRoute('/_authenticated/errors/$error')({
+  component: RouteComponent,
+})
+
+// eslint-disable-next-line react-refresh/only-export-components
+function RouteComponent() {
+  const { error } = Route.useParams()
+
+  const errorMap: Record<string, React.ComponentType> = {
+    unauthorized: UnauthorisedError,
+    forbidden: ForbiddenError,
+    'not-found': NotFoundError,
+    'internal-server-error': GeneralError,
+    'maintenance-error': MaintenanceError,
+  }
+  const ErrorComponent = errorMap[error] || NotFoundError
+
+  return (
+    <>
+      <Header fixed className='border-b'>
+        <Search />
+        <div className='ms-auto flex items-center space-x-4'>
+          <ThemeSwitch />
+          <ConfigDrawer />
+          <ProfileDropdown />
+        </div>
+      </Header>
+      <div className='flex-1 [&>div]:h-full'>
+        <ErrorComponent />
+      </div>
+    </>
+  )
+}

package/.shadcn-admin-ref/src/routes/_authenticated/help-center/index.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ComingSoon } from '@/components/coming-soon'
+
+export const Route = createFileRoute('/_authenticated/help-center/')({
+  component: ComingSoon,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/index.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { Dashboard } from '@/features/dashboard'
+
+export const Route = createFileRoute('/_authenticated/')({
+  component: Dashboard,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/route.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { AuthenticatedLayout } from '@/components/layout/authenticated-layout'
+
+export const Route = createFileRoute('/_authenticated')({
+  component: AuthenticatedLayout,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/settings/account.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SettingsAccount } from '@/features/settings/account'
+
+export const Route = createFileRoute('/_authenticated/settings/account')({
+  component: SettingsAccount,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/settings/appearance.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SettingsAppearance } from '@/features/settings/appearance'
+
+export const Route = createFileRoute('/_authenticated/settings/appearance')({
+  component: SettingsAppearance,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/settings/display.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SettingsDisplay } from '@/features/settings/display'
+
+export const Route = createFileRoute('/_authenticated/settings/display')({
+  component: SettingsDisplay,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/settings/index.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SettingsProfile } from '@/features/settings/profile'
+
+export const Route = createFileRoute('/_authenticated/settings/')({
+  component: SettingsProfile,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/settings/notifications.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SettingsNotifications } from '@/features/settings/notifications'
+
+export const Route = createFileRoute('/_authenticated/settings/notifications')({
+  component: SettingsNotifications,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/settings/route.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { Settings } from '@/features/settings'
+
+export const Route = createFileRoute('/_authenticated/settings')({
+  component: Settings,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/tasks/index.tsx

@@ -0,0 +1,23 @@
+import z from 'zod'
+import { createFileRoute } from '@tanstack/react-router'
+import { Tasks } from '@/features/tasks'
+import { priorities, statuses } from '@/features/tasks/data/data'
+
+const taskSearchSchema = z.object({
+  page: z.number().optional().catch(1),
+  pageSize: z.number().optional().catch(10),
+  status: z
+    .array(z.enum(statuses.map((status) => status.value)))
+    .optional()
+    .catch([]),
+  priority: z
+    .array(z.enum(priorities.map((priority) => priority.value)))
+    .optional()
+    .catch([]),
+  filter: z.string().optional().catch(''),
+})
+
+export const Route = createFileRoute('/_authenticated/tasks/')({
+  validateSearch: taskSearchSchema,
+  component: Tasks,
+})

package/.shadcn-admin-ref/src/routes/_authenticated/users/index.tsx

@@ -0,0 +1,32 @@
+import z from 'zod'
+import { createFileRoute } from '@tanstack/react-router'
+import { Users } from '@/features/users'
+import { roles } from '@/features/users/data/data'
+
+const usersSearchSchema = z.object({
+  page: z.number().optional().catch(1),
+  pageSize: z.number().optional().catch(10),
+  // Facet filters
+  status: z
+    .array(
+      z.union([
+        z.literal('active'),
+        z.literal('inactive'),
+        z.literal('invited'),
+        z.literal('suspended'),
+      ])
+    )
+    .optional()
+    .catch([]),
+  role: z
+    .array(z.enum(roles.map((r) => r.value as (typeof roles)[number]['value'])))
+    .optional()
+    .catch([]),
+  // Per-column text filter (example for username)
+  username: z.string().optional().catch(''),
+})
+
+export const Route = createFileRoute('/_authenticated/users/')({
+  validateSearch: usersSearchSchema,
+  component: Users,
+})

package/.shadcn-admin-ref/src/routes/clerk/(auth)/route.tsx

@@ -0,0 +1,60 @@
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
+import { ClerkFullLogo } from '@/assets/clerk-full-logo'
+import { Logo } from '@/assets/logo'
+import { LearnMore } from '@/components/learn-more'
+
+export const Route = createFileRoute('/clerk/(auth)')({
+  component: ClerkAuthLayout,
+})
+
+// eslint-disable-next-line react-refresh/only-export-components
+function ClerkAuthLayout() {
+  return (
+    <div className='relative container grid h-svh flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0'>
+      <div className='relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-e'>
+        <div className='absolute inset-0 bg-slate-500' />
+        <Link
+          to='/'
+          className='relative z-20 flex items-center text-lg font-medium'
+        >
+          <Logo className='me-2' />
+          Shadcn Admin
+        </Link>
+
+        <ClerkFullLogo className='relative m-auto size-96' />
+
+        <div className='relative z-20 mt-auto'>
+          <blockquote className='space-y-2'>
+            <p className='text-lg'>
+              &ldquo; Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Sint, magni debitis inventore asperiores velit! &rdquo;
+            </p>
+            <footer className='text-sm'>John Doe</footer>
+          </blockquote>
+        </div>
+      </div>
+      <div className='lg:p-8'>
+        <div className='relative mx-auto flex w-full flex-col items-center justify-center gap-4'>
+          <LearnMore
+            defaultOpen
+            triggerProps={{
+              className: 'absolute -top-12 end-0 sm:end-20 size-6',
+            }}
+            contentProps={{ side: 'top', align: 'end', className: 'w-auto' }}
+          >
+            Welcome to the example Clerk auth page. <br />
+            Back to{' '}
+            <Link
+              to='/'
+              className='underline decoration-dashed underline-offset-2'
+            >
+              Dashboard
+            </Link>{' '}
+            ?
+          </LearnMore>
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  )
+}

package/.shadcn-admin-ref/src/routes/clerk/(auth)/sign-in.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SignIn } from '@clerk/clerk-react'
+import { Skeleton } from '@/components/ui/skeleton'
+
+export const Route = createFileRoute('/clerk/(auth)/sign-in')({
+  component: () => (
+    <SignIn
+      initialValues={{
+        emailAddress: 'your_mail+shadcn_admin@gmail.com',
+      }}
+      fallback={<Skeleton className='h-[30rem] w-[25rem]' />}
+    />
+  ),
+})

package/.shadcn-admin-ref/src/routes/clerk/(auth)/sign-up.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { SignUp } from '@clerk/clerk-react'
+import { Skeleton } from '@/components/ui/skeleton'
+
+export const Route = createFileRoute('/clerk/(auth)/sign-up')({
+  component: () => (
+    <SignUp fallback={<Skeleton className='h-[30rem] w-[25rem]' />} />
+  ),
+})

package/.shadcn-admin-ref/src/routes/clerk/_authenticated/route.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { AuthenticatedLayout } from '@/components/layout/authenticated-layout'
+
+export const Route = createFileRoute('/clerk/_authenticated')({
+  component: AuthenticatedLayout,
+})

package/.shadcn-admin-ref/src/routes/clerk/_authenticated/user-management.tsx

@@ -0,0 +1,184 @@
+/* eslint-disable react-refresh/only-export-components */
+import { useEffect, useState } from 'react'
+import {
+  createFileRoute,
+  Link,
+  useNavigate,
+  useRouter,
+} from '@tanstack/react-router'
+import { SignedIn, useAuth, UserButton } from '@clerk/clerk-react'
+import { ExternalLink, Loader2 } from 'lucide-react'
+import { ClerkLogo } from '@/assets/clerk-logo'
+import { Button } from '@/components/ui/button'
+import { Header } from '@/components/layout/header'
+import { Main } from '@/components/layout/main'
+import { LearnMore } from '@/components/learn-more'
+import { Search } from '@/components/search'
+import { ThemeSwitch } from '@/components/theme-switch'
+import { UsersDialogs } from '@/features/users/components/users-dialogs'
+import { UsersPrimaryButtons } from '@/features/users/components/users-primary-buttons'
+import { UsersProvider } from '@/features/users/components/users-provider'
+import { UsersTable } from '@/features/users/components/users-table'
+import { users } from '@/features/users/data/users'
+
+export const Route = createFileRoute('/clerk/_authenticated/user-management')({
+  component: UserManagement,
+})
+
+function UserManagement() {
+  const search = Route.useSearch()
+  const navigate = Route.useNavigate()
+
+  const [opened, setOpened] = useState(true)
+  const { isLoaded, isSignedIn } = useAuth()
+
+  if (!isLoaded) {
+    return (
+      <div className='flex h-svh items-center justify-center'>
+        <Loader2 className='size-8 animate-spin' />
+      </div>
+    )
+  }
+
+  if (!isSignedIn) {
+    return <Unauthorized />
+  }
+
+  return (
+    <>
+      <SignedIn>
+        <UsersProvider>
+          <Header fixed>
+            <Search />
+            <div className='ms-auto flex items-center space-x-4'>
+              <ThemeSwitch />
+              <UserButton />
+            </div>
+          </Header>
+
+          <Main>
+            <div className='mb-2 flex flex-wrap items-center justify-between space-y-2'>
+              <div>
+                <h2 className='text-2xl font-bold tracking-tight'>User List</h2>
+                <div className='flex gap-1'>
+                  <p className='text-muted-foreground'>
+                    Manage your users and their roles here.
+                  </p>
+                  <LearnMore
+                    open={opened}
+                    onOpenChange={setOpened}
+                    contentProps={{ side: 'right' }}
+                  >
+                    <p>
+                      This is the same as{' '}
+                      <Link
+                        to='/users'
+                        className='text-blue-500 underline decoration-dashed underline-offset-2'
+                      >
+                        '/users'
+                      </Link>
+                    </p>
+
+                    <p className='mt-4'>
+                      You can sign out or manage/delete your account via the
+                      User Profile menu in the top-right corner of the page.
+                      <ExternalLink className='inline-block size-4' />
+                    </p>
+                  </LearnMore>
+                </div>
+              </div>
+              <UsersPrimaryButtons />
+            </div>
+            <div className='-mx-4 flex-1 overflow-auto px-4 py-1 lg:flex-row lg:space-y-0 lg:space-x-12'>
+              <UsersTable data={users} navigate={navigate} search={search} />
+            </div>
+          </Main>
+
+          <UsersDialogs />
+        </UsersProvider>
+      </SignedIn>
+    </>
+  )
+}
+
+const COUNTDOWN = 5 // Countdown second
+
+function Unauthorized() {
+  const navigate = useNavigate()
+  const { history } = useRouter()
+
+  const [opened, setOpened] = useState(true)
+  const [cancelled, setCancelled] = useState(false)
+  const [countdown, setCountdown] = useState(COUNTDOWN)
+
+  // Set and run the countdown conditionally
+  useEffect(() => {
+    if (cancelled || opened) return
+    const interval = setInterval(() => {
+      setCountdown((prev) => (prev > 0 ? prev - 1 : 0))
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [cancelled, opened])
+
+  // Navigate to sign-in page when countdown hits 0
+  useEffect(() => {
+    if (countdown > 0) return
+    navigate({ to: '/clerk/sign-in' })
+  }, [countdown, navigate])
+
+  return (
+    <div className='h-svh'>
+      <div className='m-auto flex h-full w-full flex-col items-center justify-center gap-2'>
+        <h1 className='text-[7rem] leading-tight font-bold'>401</h1>
+        <span className='font-medium'>Unauthorized Access</span>
+        <p className='text-center text-muted-foreground'>
+          You must be authenticated via Clerk{' '}
+          <sup>
+            <LearnMore open={opened} onOpenChange={setOpened}>
+              <p>
+                This is the same as{' '}
+                <Link
+                  to='/users'
+                  className='text-blue-500 underline decoration-dashed underline-offset-2'
+                >
+                  '/users'
+                </Link>
+                .{' '}
+              </p>
+              <p>You must first sign in using Clerk to access this route. </p>
+
+              <p className='mt-4'>
+                After signing in, you'll be able to sign out or delete your
+                account via the User Profile dropdown on this page.
+              </p>
+            </LearnMore>
+          </sup>
+          <br />
+          to access this resource.
+        </p>
+        <div className='mt-6 flex gap-4'>
+          <Button variant='outline' onClick={() => history.go(-1)}>
+            Go Back
+          </Button>
+          <Button onClick={() => navigate({ to: '/clerk/sign-in' })}>
+            <ClerkLogo className='invert' /> Sign in
+          </Button>
+        </div>
+        <div className='mt-4 h-8 text-center'>
+          {!cancelled && !opened && (
+            <>
+              <p>
+                {countdown > 0
+                  ? `Redirecting to Sign In page in ${countdown}s`
+                  : `Redirecting...`}
+              </p>
+              <Button variant='link' onClick={() => setCancelled(true)}>
+                Cancel Redirect
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}