zyflow 0.6.4

package/.shadcn-admin-ref/src/features/errors/general-error.tsx

@@ -0,0 +1,36 @@
+import { useNavigate, useRouter } from '@tanstack/react-router'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type GeneralErrorProps = React.HTMLAttributes<HTMLDivElement> & {
+  minimal?: boolean
+}
+
+export function GeneralError({
+  className,
+  minimal = false,
+}: GeneralErrorProps) {
+  const navigate = useNavigate()
+  const { history } = useRouter()
+  return (
+    <div className={cn('h-svh w-full', className)}>
+      <div className='m-auto flex h-full w-full flex-col items-center justify-center gap-2'>
+        {!minimal && (
+          <h1 className='text-[7rem] leading-tight font-bold'>500</h1>
+        )}
+        <span className='font-medium'>Oops! Something went wrong {`:')`}</span>
+        <p className='text-center text-muted-foreground'>
+          We apologize for the inconvenience. <br /> Please try again later.
+        </p>
+        {!minimal && (
+          <div className='mt-6 flex gap-4'>
+            <Button variant='outline' onClick={() => history.go(-1)}>
+              Go Back
+            </Button>
+            <Button onClick={() => navigate({ to: '/' })}>Back to Home</Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/.shadcn-admin-ref/src/features/errors/maintenance-error.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@/components/ui/button'
+
+export function MaintenanceError() {
+  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'>503</h1>
+        <span className='font-medium'>Website is under maintenance!</span>
+        <p className='text-center text-muted-foreground'>
+          The site is not available at the moment. <br />
+          We'll be back online shortly.
+        </p>
+        <div className='mt-6 flex gap-4'>
+          <Button variant='outline'>Learn more</Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/.shadcn-admin-ref/src/features/errors/not-found-error.tsx

@@ -0,0 +1,25 @@
+import { useNavigate, useRouter } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+
+export function NotFoundError() {
+  const navigate = useNavigate()
+  const { history } = useRouter()
+  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'>404</h1>
+        <span className='font-medium'>Oops! Page Not Found!</span>
+        <p className='text-center text-muted-foreground'>
+          It seems like the page you're looking for <br />
+          does not exist or might have been removed.
+        </p>
+        <div className='mt-6 flex gap-4'>
+          <Button variant='outline' onClick={() => history.go(-1)}>
+            Go Back
+          </Button>
+          <Button onClick={() => navigate({ to: '/' })}>Back to Home</Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/.shadcn-admin-ref/src/features/errors/unauthorized-error.tsx

@@ -0,0 +1,25 @@
+import { useNavigate, useRouter } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+
+export function UnauthorisedError() {
+  const navigate = useNavigate()
+  const { history } = useRouter()
+  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'>
+          Please log in with the appropriate credentials <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: '/' })}>Back to Home</Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/.shadcn-admin-ref/src/features/settings/account/account-form.tsx

@@ -0,0 +1,173 @@
+import { z } from 'zod'
+import { useForm } from 'react-hook-form'
+import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { showSubmittedData } from '@/lib/show-submitted-data'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { DatePicker } from '@/components/date-picker'
+
+const languages = [
+  { label: 'English', value: 'en' },
+  { label: 'French', value: 'fr' },
+  { label: 'German', value: 'de' },
+  { label: 'Spanish', value: 'es' },
+  { label: 'Portuguese', value: 'pt' },
+  { label: 'Russian', value: 'ru' },
+  { label: 'Japanese', value: 'ja' },
+  { label: 'Korean', value: 'ko' },
+  { label: 'Chinese', value: 'zh' },
+] as const
+
+const accountFormSchema = z.object({
+  name: z
+    .string()
+    .min(1, 'Please enter your name.')
+    .min(2, 'Name must be at least 2 characters.')
+    .max(30, 'Name must not be longer than 30 characters.'),
+  dob: z.date('Please select your date of birth.'),
+  language: z.string('Please select a language.'),
+})
+
+type AccountFormValues = z.infer<typeof accountFormSchema>
+
+// This can come from your database or API.
+const defaultValues: Partial<AccountFormValues> = {
+  name: '',
+}
+
+export function AccountForm() {
+  const form = useForm<AccountFormValues>({
+    resolver: zodResolver(accountFormSchema),
+    defaultValues,
+  })
+
+  function onSubmit(data: AccountFormValues) {
+    showSubmittedData(data)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
+        <FormField
+          control={form.control}
+          name='name'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input placeholder='Your name' {...field} />
+              </FormControl>
+              <FormDescription>
+                This is the name that will be displayed on your profile and in
+                emails.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='dob'
+          render={({ field }) => (
+            <FormItem className='flex flex-col'>
+              <FormLabel>Date of birth</FormLabel>
+              <DatePicker selected={field.value} onSelect={field.onChange} />
+              <FormDescription>
+                Your date of birth is used to calculate your age.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='language'
+          render={({ field }) => (
+            <FormItem className='flex flex-col'>
+              <FormLabel>Language</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant='outline'
+                      role='combobox'
+                      className={cn(
+                        'w-[200px] justify-between',
+                        !field.value && 'text-muted-foreground'
+                      )}
+                    >
+                      {field.value
+                        ? languages.find(
+                            (language) => language.value === field.value
+                          )?.label
+                        : 'Select language'}
+                      <CaretSortIcon className='ms-2 h-4 w-4 shrink-0 opacity-50' />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className='w-[200px] p-0'>
+                  <Command>
+                    <CommandInput placeholder='Search language...' />
+                    <CommandEmpty>No language found.</CommandEmpty>
+                    <CommandGroup>
+                      <CommandList>
+                        {languages.map((language) => (
+                          <CommandItem
+                            value={language.label}
+                            key={language.value}
+                            onSelect={() => {
+                              form.setValue('language', language.value)
+                            }}
+                          >
+                            <CheckIcon
+                              className={cn(
+                                'size-4',
+                                language.value === field.value
+                                  ? 'opacity-100'
+                                  : 'opacity-0'
+                              )}
+                            />
+                            {language.label}
+                          </CommandItem>
+                        ))}
+                      </CommandList>
+                    </CommandGroup>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                This is the language that will be used in the dashboard.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type='submit'>Update account</Button>
+      </form>
+    </Form>
+  )
+}

package/.shadcn-admin-ref/src/features/settings/account/index.tsx

@@ -0,0 +1,14 @@
+import { ContentSection } from '../components/content-section'
+import { AccountForm } from './account-form'
+
+export function SettingsAccount() {
+  return (
+    <ContentSection
+      title='Account'
+      desc='Update your account settings. Set your preferred language and
+          timezone.'
+    >
+      <AccountForm />
+    </ContentSection>
+  )
+}

package/.shadcn-admin-ref/src/features/settings/appearance/appearance-form.tsx

@@ -0,0 +1,162 @@
+import { z } from 'zod'
+import { useForm } from 'react-hook-form'
+import { ChevronDownIcon } from '@radix-ui/react-icons'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { fonts } from '@/config/fonts'
+import { showSubmittedData } from '@/lib/show-submitted-data'
+import { cn } from '@/lib/utils'
+import { useFont } from '@/context/font-provider'
+import { useTheme } from '@/context/theme-provider'
+import { Button, buttonVariants } from '@/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+
+const appearanceFormSchema = z.object({
+  theme: z.enum(['light', 'dark']),
+  font: z.enum(fonts),
+})
+
+type AppearanceFormValues = z.infer<typeof appearanceFormSchema>
+
+export function AppearanceForm() {
+  const { font, setFont } = useFont()
+  const { theme, setTheme } = useTheme()
+
+  // This can come from your database or API.
+  const defaultValues: Partial<AppearanceFormValues> = {
+    theme: theme as 'light' | 'dark',
+    font,
+  }
+
+  const form = useForm<AppearanceFormValues>({
+    resolver: zodResolver(appearanceFormSchema),
+    defaultValues,
+  })
+
+  function onSubmit(data: AppearanceFormValues) {
+    if (data.font != font) setFont(data.font)
+    if (data.theme != theme) setTheme(data.theme)
+
+    showSubmittedData(data)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
+        <FormField
+          control={form.control}
+          name='font'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Font</FormLabel>
+              <div className='relative w-max'>
+                <FormControl>
+                  <select
+                    className={cn(
+                      buttonVariants({ variant: 'outline' }),
+                      'w-[200px] appearance-none font-normal capitalize',
+                      'dark:bg-background dark:hover:bg-background'
+                    )}
+                    {...field}
+                  >
+                    {fonts.map((font) => (
+                      <option key={font} value={font}>
+                        {font}
+                      </option>
+                    ))}
+                  </select>
+                </FormControl>
+                <ChevronDownIcon className='absolute end-3 top-2.5 h-4 w-4 opacity-50' />
+              </div>
+              <FormDescription className='font-manrope'>
+                Set the font you want to use in the dashboard.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='theme'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Theme</FormLabel>
+              <FormDescription>
+                Select the theme for the dashboard.
+              </FormDescription>
+              <FormMessage />
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className='grid max-w-md grid-cols-2 gap-8 pt-2'
+              >
+                <FormItem>
+                  <FormLabel className='[&:has([data-state=checked])>div]:border-primary'>
+                    <FormControl>
+                      <RadioGroupItem value='light' className='sr-only' />
+                    </FormControl>
+                    <div className='items-center rounded-md border-2 border-muted p-1 hover:border-accent'>
+                      <div className='space-y-2 rounded-sm bg-[#ecedef] p-2'>
+                        <div className='space-y-2 rounded-md bg-white p-2 shadow-xs'>
+                          <div className='h-2 w-[80px] rounded-lg bg-[#ecedef]' />
+                          <div className='h-2 w-[100px] rounded-lg bg-[#ecedef]' />
+                        </div>
+                        <div className='flex items-center space-x-2 rounded-md bg-white p-2 shadow-xs'>
+                          <div className='h-4 w-4 rounded-full bg-[#ecedef]' />
+                          <div className='h-2 w-[100px] rounded-lg bg-[#ecedef]' />
+                        </div>
+                        <div className='flex items-center space-x-2 rounded-md bg-white p-2 shadow-xs'>
+                          <div className='h-4 w-4 rounded-full bg-[#ecedef]' />
+                          <div className='h-2 w-[100px] rounded-lg bg-[#ecedef]' />
+                        </div>
+                      </div>
+                    </div>
+                    <span className='block w-full p-2 text-center font-normal'>
+                      Light
+                    </span>
+                  </FormLabel>
+                </FormItem>
+                <FormItem>
+                  <FormLabel className='[&:has([data-state=checked])>div]:border-primary'>
+                    <FormControl>
+                      <RadioGroupItem value='dark' className='sr-only' />
+                    </FormControl>
+                    <div className='items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground'>
+                      <div className='space-y-2 rounded-sm bg-slate-950 p-2'>
+                        <div className='space-y-2 rounded-md bg-slate-800 p-2 shadow-xs'>
+                          <div className='h-2 w-[80px] rounded-lg bg-slate-400' />
+                          <div className='h-2 w-[100px] rounded-lg bg-slate-400' />
+                        </div>
+                        <div className='flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-xs'>
+                          <div className='h-4 w-4 rounded-full bg-slate-400' />
+                          <div className='h-2 w-[100px] rounded-lg bg-slate-400' />
+                        </div>
+                        <div className='flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-xs'>
+                          <div className='h-4 w-4 rounded-full bg-slate-400' />
+                          <div className='h-2 w-[100px] rounded-lg bg-slate-400' />
+                        </div>
+                      </div>
+                    </div>
+                    <span className='block w-full p-2 text-center font-normal'>
+                      Dark
+                    </span>
+                  </FormLabel>
+                </FormItem>
+              </RadioGroup>
+            </FormItem>
+          )}
+        />
+
+        <Button type='submit'>Update preferences</Button>
+      </form>
+    </Form>
+  )
+}

package/.shadcn-admin-ref/src/features/settings/appearance/index.tsx

@@ -0,0 +1,14 @@
+import { ContentSection } from '../components/content-section'
+import { AppearanceForm } from './appearance-form'
+
+export function SettingsAppearance() {
+  return (
+    <ContentSection
+      title='Appearance'
+      desc='Customize the appearance of the app. Automatically switch between day
+          and night themes.'
+    >
+      <AppearanceForm />
+    </ContentSection>
+  )
+}

package/.shadcn-admin-ref/src/features/settings/components/content-section.tsx

@@ -0,0 +1,22 @@
+import { Separator } from '@/components/ui/separator'
+
+type ContentSectionProps = {
+  title: string
+  desc: string
+  children: React.JSX.Element
+}
+
+export function ContentSection({ title, desc, children }: ContentSectionProps) {
+  return (
+    <div className='flex flex-1 flex-col'>
+      <div className='flex-none'>
+        <h3 className='text-lg font-medium'>{title}</h3>
+        <p className='text-sm text-muted-foreground'>{desc}</p>
+      </div>
+      <Separator className='my-4 flex-none' />
+      <div className='faded-bottom h-full w-full overflow-y-auto scroll-smooth pe-4 pb-12'>
+        <div className='-mx-1 px-1.5 lg:max-w-xl'>{children}</div>
+      </div>
+    </div>
+  )
+}

package/.shadcn-admin-ref/src/features/settings/components/sidebar-nav.tsx

@@ -0,0 +1,84 @@
+import { useState, type JSX } from 'react'
+import { useLocation, useNavigate, Link } from '@tanstack/react-router'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+
+type SidebarNavProps = React.HTMLAttributes<HTMLElement> & {
+  items: {
+    href: string
+    title: string
+    icon: JSX.Element
+  }[]
+}
+
+export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
+  const { pathname } = useLocation()
+  const navigate = useNavigate()
+  const [val, setVal] = useState(pathname ?? '/settings')
+
+  const handleSelect = (e: string) => {
+    setVal(e)
+    navigate({ to: e })
+  }
+
+  return (
+    <>
+      <div className='p-1 md:hidden'>
+        <Select value={val} onValueChange={handleSelect}>
+          <SelectTrigger className='h-12 sm:w-48'>
+            <SelectValue placeholder='Theme' />
+          </SelectTrigger>
+          <SelectContent>
+            {items.map((item) => (
+              <SelectItem key={item.href} value={item.href}>
+                <div className='flex gap-x-4 px-2 py-1'>
+                  <span className='scale-125'>{item.icon}</span>
+                  <span className='text-md'>{item.title}</span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <ScrollArea
+        orientation='horizontal'
+        type='always'
+        className='hidden w-full min-w-40 bg-background px-1 py-2 md:block'
+      >
+        <nav
+          className={cn(
+            'flex space-x-2 py-1 lg:flex-col lg:space-y-1 lg:space-x-0',
+            className
+          )}
+          {...props}
+        >
+          {items.map((item) => (
+            <Link
+              key={item.href}
+              to={item.href}
+              className={cn(
+                buttonVariants({ variant: 'ghost' }),
+                pathname === item.href
+                  ? 'bg-muted hover:bg-accent'
+                  : 'hover:bg-accent hover:underline',
+                'justify-start'
+              )}
+            >
+              <span className='me-2'>{item.icon}</span>
+              {item.title}
+            </Link>
+          ))}
+        </nav>
+      </ScrollArea>
+    </>
+  )
+}