Bulk commit

src/components/app-sidebar.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react'
 import {
-  AudioWaveform,
   BookOpen,
   Bot,
-  Command,
   Frame,
   LifeBuoy,
   Map,
@@ -17,7 +15,7 @@ import { TeamSwitcher } from '../features/Mandant/components/team-switcher'
 import { NavMain } from '@/components/nav-main'
 import { NavProjects } from '@/components/nav-projects'
 import { NavSecondary } from '@/components/nav-secondary'
-import { NavUser } from '@/components/nav-user'
+import { NavUser } from '@/features/Auth/components/nav-user'
 import {
   Sidebar,
   SidebarContent,
@@ -29,91 +27,101 @@ const data = {
   user: {
     name: 'shadcn',
     email: 'm@example.com',
-    avatar: '/avatars/shadcn.jpg',
+    avatar: 'https://avatars.githubusercontent.com/u/124599?v=4',
   },
   navMain: [
     {
-      title: 'Playground',
+      title: 'Dashboard',
-      url: '/about',
+      url: '/dashboard',
       icon: SquareTerminal,
       isActive: true,
       items: [
         {
-          title: 'History',
+          title: 'Kanban',
-          url: '#',
+          url: '/kanban',
         },
         {
-          title: 'Starred',
+          title: 'Notifications',
-          url: '#',
+          url: '/notifications',
-        },
-        {
-          title: 'Settings',
-          url: '#',
-        },
-      ],
-    },
-    {
-      title: 'Models',
-      url: '#',
-      icon: Bot,
-      items: [
-        {
-          title: 'Genesis',
-          url: '#',
-        },
-        {
-          title: 'Explorer',
-          url: '#',
-        },
-        {
-          title: 'Quantum',
-          url: '#',
-        },
-      ],
-    },
-    {
-      title: 'Documentation',
-      url: '#',
-      icon: BookOpen,
-      items: [
-        {
-          title: 'Introduction',
-          url: '#',
-        },
-        {
-          title: 'Get Started',
-          url: '#',
-        },
-        {
-          title: 'Tutorials',
-          url: '#',
         },
         {
           title: 'Changelog',
-          url: '#',
+          url: '/changelog',
         },
       ],
     },
     {
-      title: 'Settings',
+      title: 'Projects',
-      url: '#',
+      url: '/projects',
+      icon: Bot,
+      items: [
+        {
+          title: 'Create',
+          url: '/projects/create',
+        },
+        {
+          title: 'Current',
+          url: '/projects/current',
+        },
+        {
+          title: 'Archive',
+          url: '/projects/archive',
+        },
+      ],
+    },
+    {
+      title: 'CRM',
+      url: '/crm',
+      icon: BookOpen,
+      items: [
+        {
+          title: 'Firmen',
+          url: '/crm/companies',
+        },
+        {
+          title: 'Ansprechpartner',
+          url: '/crm/ansprechpartner',
+        },
+        {
+          title: 'Kostenstellen',
+          url: '/crm/kostenstellen',
+        },
+        {
+          title: 'Lieferanten',
+          url: '/crm/lieferanten',
+        },
+        {
+          title: 'Dienstleister',
+          url: '/crm/dienstleister',
+        },
+      ],
+    },
+    {
+      title: 'Dokumente',
+      url: '/documents',
+      icon: Settings2,
+    },
+    {
+      title: 'Kalender',
+      url: '/kalendar',
+      icon: Settings2,
+    },
+    {
+      title: 'Lager',
+      url: '/storage',
       icon: Settings2,
       items: [
         {
-          title: 'General',
+          title: 'Lagerplatz',
-          url: '#',
+          url: '/storage/racks',
         },
         {
-          title: 'Team',
+          title: 'Material',
-          url: '#',
+          url: '/storage/material',
         },
         {
-          title: 'Billing',
+          title: 'Scaner',
-          url: '#',
+          url: '/scanner',
-        },
-        {
-          title: 'Limits',
-          url: '#',
         },
       ],
     },
@@ -121,12 +129,12 @@ const data = {
   navSecondary: [
     {
       title: 'Support',
-      url: '#',
+      url: 'https://git.kocoder.xyz/kocoded/vt/issues/new',
       icon: LifeBuoy,
     },
     {
       title: 'Feedback',
-      url: '#',
+      url: 'https://git.kocoder.xyz/kocoded/vt/wiki',
       icon: Send,
     },
   ],
@@ -149,29 +157,11 @@ const data = {
   ],
 }
 
-const teams = [
-  {
-    name: 'Acme Inc',
-    logo: Command,
-    plan: 'Enterprise',
-  },
-  {
-    name: 'Acme Corp.',
-    logo: AudioWaveform,
-    plan: 'Startup',
-  },
-  {
-    name: 'Evil Corp.',
-    logo: Command,
-    plan: 'Free',
-  },
-]
-
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
     <Sidebar variant="inset" {...props}>
       <SidebarHeader>
-        <TeamSwitcher teams={teams} />
+        <TeamSwitcher />
       </SidebarHeader>
       <SidebarContent>
         <NavMain items={data.navMain} />

src/components/nav-secondary.tsx

@@ -1,5 +1,6 @@
-import * as React from "react"
+import * as React from 'react'
-import { type LucideIcon } from "lucide-react"
+import { Link } from '@tanstack/react-router'
+import type { LucideIcon } from 'lucide-react'
 
 import {
   SidebarGroup,
@@ -7,17 +8,17 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "@/components/ui/sidebar"
+} from '@/components/ui/sidebar'
 
 export function NavSecondary({
   items,
   ...props
 }: {
-  items: {
+  items: Array<{
     title: string
     url: string
     icon: LucideIcon
-  }[]
+  }>
 } & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
   return (
     <SidebarGroup {...props}>
@@ -26,10 +27,10 @@ export function NavSecondary({
           {items.map((item) => (
             <SidebarMenuItem key={item.title}>
               <SidebarMenuButton asChild size="sm">
-                <a href={item.url}>
+                <Link to={item.url}>
                   <item.icon />
                   <span>{item.title}</span>
-                </a>
+                </Link>
               </SidebarMenuButton>
             </SidebarMenuItem>
           ))}

src/features/Auth/components/nav-user.tsx

@@ -1,19 +1,9 @@
-"use client"
+'use client'
 
-import {
+import { BadgeCheck, Bell, ChevronsUpDown, LogOut } from 'lucide-react'
-  BadgeCheck,
-  Bell,
-  ChevronsUpDown,
-  CreditCard,
-  LogOut,
-  Sparkles,
-} from "lucide-react"
 
-import {
+import { Link } from '@tanstack/react-router'
-  Avatar,
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/ui/avatar"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -22,13 +12,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from '@/components/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from "@/components/ui/sidebar"
+} from '@/components/ui/sidebar'
 
 export function NavUser({
   user,
@@ -63,7 +53,7 @@ export function NavUser({
           </DropdownMenuTrigger>
           <DropdownMenuContent
             className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-            side={isMobile ? "bottom" : "right"}
+            side={isMobile ? 'bottom' : 'right'}
             align="end"
             sideOffset={4}
           >
@@ -80,32 +70,38 @@ export function NavUser({
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownMenuGroup>
+            {/* <DropdownMenuGroup>
               <DropdownMenuItem>
                 <Sparkles />
                 Upgrade to Pro
               </DropdownMenuItem>
             </DropdownMenuGroup>
-            <DropdownMenuSeparator />
+            <DropdownMenuSeparator /> */}
             <DropdownMenuGroup>
-              <DropdownMenuItem>
+              <Link to="/about">
-                <BadgeCheck />
+                <DropdownMenuItem>
-                Account
+                  <BadgeCheck />
-              </DropdownMenuItem>
+                  Account
-              <DropdownMenuItem>
+                </DropdownMenuItem>
+              </Link>
+              {/* <DropdownMenuItem>
                 <CreditCard />
                 Billing
-              </DropdownMenuItem>
+              </DropdownMenuItem> */}
-              <DropdownMenuItem>
+              <Link to="/">
-                <Bell />
+                <DropdownMenuItem>
-                Notifications
+                  <Bell />
-              </DropdownMenuItem>
+                  Notifications
+                </DropdownMenuItem>
+              </Link>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem>
+            <a href="http://localhost:3000/api/logout">
-              <LogOut />
+              <DropdownMenuItem>
-              Log out
+                <LogOut />
-            </DropdownMenuItem>
+                Log out
+              </DropdownMenuItem>
+            </a>
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>

src/features/Auth/components/session.tsx

@@ -0,0 +1,14 @@
+import { useCurrentSession } from '../queries'
+
+function Session() {
+  const { data: session } = useCurrentSession()
+
+  return (
+    <div>
+      Session
+      {JSON.stringify(session)}
+    </div>
+  )
+}
+
+export default Session

src/features/Auth/queries.ts

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query'
+
+const sessionKeys = {
+  all: ['sessions'] as const,
+  current: () => [...sessionKeys.all, 'current'] as const,
+}
+
+export type Session = {
+  Token: string
+  UserID: number
+  CreatedAt: Date
+}
+
+export function useCurrentSession() {
+  return useQuery<Session>({
+    queryKey: sessionKeys.current(),
+    queryFn: async () => {
+      const data = await fetch(
+        'http://localhost:3000/api/auth/currentSession',
+        {
+          credentials: 'include',
+        },
+      )
+      return await data.json()
+    },
+  })
+}

src/features/CRM/components/detail.tsx

@@ -1,10 +1,72 @@
 import { Button } from '@/components/ui/button'
-import { useAnsprechpartner } from '../queries'
+import {
+  Ansprechpartner,
+  useAnsprechpartner,
+  useAnsprechpartnerEditMutation,
+} from '../queries'
+import { useAppForm } from '@/hooks/demo.form'
 
 function AnsprechpartnerDetail({ id }: { id: number }) {
   const { data: ansprechpartner } = useAnsprechpartner(id)
+  const editAnsprechpartnerMutation = useAnsprechpartnerEditMutation()
 
-  return <div></div>
+  const defaultValues: Ansprechpartner = {
+    ID: ansprechpartner.ID ?? -1,
+    CreatedAt: ansprechpartner.CreatedAt ?? new Date(0),
+    UpdatedAt: ansprechpartner.UpdatedAt ?? new Date(0),
+    DeletedAt: ansprechpartner.DeletedAt ?? new Date(0),
+    active: ansprechpartner.active ?? false,
+    image_url: ansprechpartner.image_url ?? '',
+    title: ansprechpartner.title ?? '',
+    first_name: ansprechpartner.first_name ?? '',
+    last_name: ansprechpartner.last_name ?? '',
+    last_title: ansprechpartner.last_title ?? '',
+    e_mail: ansprechpartner.e_mail ?? '',
+    phone: ansprechpartner.phone ?? '',
+    mobile: ansprechpartner.mobile ?? '',
+    description: ansprechpartner.description ?? '',
+    notes: ansprechpartner.notes ?? '',
+    gender: ansprechpartner.gender ?? -1,
+  }
+
+  const form = useAppForm({
+    defaultValues,
+    onSubmit: ({ value: ap }) => {
+      editAnsprechpartnerMutation.mutate(ap)
+    },
+  })
+
+  return (
+    <div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          form.handleSubmit()
+        }}
+      >
+        <form.AppField
+          name="title"
+          children={(field) => <field.TextField label="Title: " />}
+        />
+        <form.AppField
+          name="first_name"
+          children={(field) => <field.TextField label="First Name" />}
+        />
+        <form.AppField
+          name="last_name"
+          children={(field) => <field.TextField label="Last Name" />}
+        />
+        <form.AppField
+          name="last_title"
+          children={(field) => <field.TextField label="Last Title" />}
+        />
+        <form.AppForm>
+          <form.SubscribeButton label="Speichern" />
+        </form.AppForm>
+      </form>
+    </div>
+  )
 }
 
 export default AnsprechpartnerDetail

src/features/CRM/queries.ts

@@ -35,7 +35,9 @@ export function useAllAnsprechpartners() {
   return useQuery<Ansprechpartner>({
     queryKey: ansprechpartnerKeys.lists(),
     queryFn: async () => {
-      const data = await fetch('http://localhost:3000/v1/ansprechpartner/all')
+      const data = await fetch('http://localhost:3000/v1/ansprechpartner/all', {
+        credentials: 'include',
+      })
       return await data.json()
     },
   })
@@ -45,7 +47,10 @@ export function useAnsprechpartner(id: number) {
   return useSuspenseQuery<Ansprechpartner>({
     queryKey: ansprechpartnerKeys.detail(id),
     queryFn: async () => {
-      const data = await fetch('http://localhost:3000/v1/ansprechpartner/' + id)
+      const data = await fetch(
+        'http://localhost:3000/v1/ansprechpartner/' + id,
+        { credentials: 'include' },
+      )
       return await data.json()
     },
   })
@@ -56,7 +61,7 @@ export function useAnsprechpartnerEditMutation() {
 
   return useMutation({
     mutationFn: async (ansprechpartner: Ansprechpartner) => {
-      const res = await fetch(
+      await fetch(
         'http://localhost:3000/v1/ansprechpartner/' + ansprechpartner.ID,
         {
           headers: {
@@ -64,9 +69,12 @@ export function useAnsprechpartnerEditMutation() {
           },
           method: 'PUT',
           body: JSON.stringify(ansprechpartner),
+          credentials: 'include',
         },
       )
 
+      console.log('Invalidating queries.')
+
       queryClient.invalidateQueries({
         queryKey: [
           ansprechpartnerKeys.detail(ansprechpartner.ID),

src/features/Mandant/components/team-switcher.tsx

@@ -37,9 +37,10 @@ export function TeamSwitcher() {
         if (mandanten && currentMandant) {
           const mandant = mandanten[numKey]
 
-          if (mandant.id === currentMandant.id) {
+          if (mandant.ID === currentMandant.ID) {
             return
           }
+          console.log(mandant, currentMandant)
 
           editCurrentTeamMutation.mutate(mandanten[numKey])
         }
@@ -83,7 +84,13 @@ export function TeamSwitcher() {
               Teams
             </DropdownMenuLabel>
             {mandanten.map((mandant, index) => {
-              return <MandantDMI mandant={mandant} index={index} />
+              return (
+                <MandantDMI
+                  mandant={mandant}
+                  currentMandant={currentMandant}
+                  index={index}
+                />
+              )
             })}
             <DropdownMenuSeparator />
             <DropdownMenuItem className="gap-2 p-2">
@@ -99,17 +106,22 @@ export function TeamSwitcher() {
   )
 }
 
-function MandantDMI({ mandant, index }: { mandant: Mandant; index: number }) {
+function MandantDMI({
-  const { data: currentMandant } = useCurrentMandant()
+  mandant,
+  currentMandant,
+  index,
+}: {
+  mandant: Mandant
+  currentMandant: Mandant
+  index: number
+}) {
   const editCurrentMandantMutaiton = useCurrentMandantMutation()
 
-  if (!currentMandant) return <p>Loading...</p>
-
   return (
     <DropdownMenuItem
-      key={mandant.name}
+      key={mandant.ID}
       onClick={() => editCurrentMandantMutaiton.mutate(mandant)}
-      disabled={mandant.id === currentMandant.id}
+      disabled={mandant.ID === currentMandant.ID}
       className="gap-2 p-2"
     >
       <div

src/features/Mandant/queries.ts

@@ -7,7 +7,7 @@ const mandantKeys = {
 }
 
 export type Mandant = {
-  id: string
+  ID: string
   name: string
   logo: string
   plan: string
@@ -18,7 +18,9 @@ export function useCurrentMandant() {
   return useQuery<Mandant>({
     queryKey: mandantKeys.current(),
     queryFn: async () => {
-      const data = await fetch('http://localhost:3000/v1/mandant/current')
+      const data = await fetch('http://localhost:3000/v1/mandant/current', {
+        credentials: 'include',
+      })
       return await data.json()
     },
   })
@@ -28,7 +30,9 @@ export function useAllMandanten() {
   return useQuery<Array<Mandant>>({
     queryKey: mandantKeys.lists(),
     queryFn: async () => {
-      const data = await fetch('http://localhost:3000/v1/mandant/all')
+      const data = await fetch('http://localhost:3000/v1/mandant/all', {
+        credentials: 'include',
+      })
       return await data.json()
     },
   })
@@ -45,6 +49,7 @@ export function useCurrentMandantMutation() {
         },
         method: 'PUT',
         body: JSON.stringify(mandant),
+        credentials: 'include',
       })
       const newCurrentMandant = await res.json()
       queryClient.setQueryData(

src/integrations/tanstack-query/root-provider.tsx

@@ -1,13 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 export function getContext() {
-  const queryClient = new QueryClient({
+  const queryClient = new QueryClient()
-    defaultOptions: {
-      queries: {
-        experimental_prefetchInRender: true,
-      },
-    },
-  })
 
   return {
     queryClient,

src/routeTree.gen.ts

@@ -12,7 +12,27 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as SidebarRouteImport } from './routes/_sidebar'
 import { Route as SidebarIndexRouteImport } from './routes/_sidebar/index'
 import { Route as DemoTanstackQueryRouteImport } from './routes/demo.tanstack-query'
+import { Route as SidebarScannerRouteImport } from './routes/_sidebar/scanner'
+import { Route as SidebarNotificationsRouteImport } from './routes/_sidebar/notifications'
+import { Route as SidebarKanbanRouteImport } from './routes/_sidebar/kanban'
+import { Route as SidebarKalendarRouteImport } from './routes/_sidebar/kalendar'
+import { Route as SidebarDocumentsRouteImport } from './routes/_sidebar/documents'
+import { Route as SidebarDashboardRouteImport } from './routes/_sidebar/dashboard'
+import { Route as SidebarChangelogRouteImport } from './routes/_sidebar/changelog'
 import { Route as SidebarAboutRouteImport } from './routes/_sidebar/about'
+import { Route as SidebarStorageIndexRouteImport } from './routes/_sidebar/storage/index'
+import { Route as SidebarProjectsIndexRouteImport } from './routes/_sidebar/projects/index'
+import { Route as SidebarCrmIndexRouteImport } from './routes/_sidebar/crm/index'
+import { Route as SidebarStorageRacksRouteImport } from './routes/_sidebar/storage/racks'
+import { Route as SidebarStorageMaterialRouteImport } from './routes/_sidebar/storage/material'
+import { Route as SidebarProjectsCurrentRouteImport } from './routes/_sidebar/projects/current'
+import { Route as SidebarProjectsCreateRouteImport } from './routes/_sidebar/projects/create'
+import { Route as SidebarProjectsArchiveRouteImport } from './routes/_sidebar/projects/archive'
+import { Route as SidebarCrmLeieferantenRouteImport } from './routes/_sidebar/crm/leieferanten'
+import { Route as SidebarCrmKostenstelleRouteImport } from './routes/_sidebar/crm/kostenstelle'
+import { Route as SidebarCrmFirmenRouteImport } from './routes/_sidebar/crm/firmen'
+import { Route as SidebarCrmDienstleisterRouteImport } from './routes/_sidebar/crm/dienstleister'
+import { Route as SidebarCrmAnsprechpartnerRouteImport } from './routes/_sidebar/crm/ansprechpartner'
 
 const SidebarRoute = SidebarRouteImport.update({
   id: '/_sidebar',
@@ -28,40 +48,267 @@ const DemoTanstackQueryRoute = DemoTanstackQueryRouteImport.update({
   path: '/demo/tanstack-query',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SidebarScannerRoute = SidebarScannerRouteImport.update({
+  id: '/scanner',
+  path: '/scanner',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarNotificationsRoute = SidebarNotificationsRouteImport.update({
+  id: '/notifications',
+  path: '/notifications',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarKanbanRoute = SidebarKanbanRouteImport.update({
+  id: '/kanban',
+  path: '/kanban',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarKalendarRoute = SidebarKalendarRouteImport.update({
+  id: '/kalendar',
+  path: '/kalendar',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarDocumentsRoute = SidebarDocumentsRouteImport.update({
+  id: '/documents',
+  path: '/documents',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarDashboardRoute = SidebarDashboardRouteImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarChangelogRoute = SidebarChangelogRouteImport.update({
+  id: '/changelog',
+  path: '/changelog',
+  getParentRoute: () => SidebarRoute,
+} as any)
 const SidebarAboutRoute = SidebarAboutRouteImport.update({
   id: '/about',
   path: '/about',
   getParentRoute: () => SidebarRoute,
 } as any)
+const SidebarStorageIndexRoute = SidebarStorageIndexRouteImport.update({
+  id: '/storage/',
+  path: '/storage/',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarProjectsIndexRoute = SidebarProjectsIndexRouteImport.update({
+  id: '/projects/',
+  path: '/projects/',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarCrmIndexRoute = SidebarCrmIndexRouteImport.update({
+  id: '/crm/',
+  path: '/crm/',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarStorageRacksRoute = SidebarStorageRacksRouteImport.update({
+  id: '/storage/racks',
+  path: '/storage/racks',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarStorageMaterialRoute = SidebarStorageMaterialRouteImport.update({
+  id: '/storage/material',
+  path: '/storage/material',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarProjectsCurrentRoute = SidebarProjectsCurrentRouteImport.update({
+  id: '/projects/current',
+  path: '/projects/current',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarProjectsCreateRoute = SidebarProjectsCreateRouteImport.update({
+  id: '/projects/create',
+  path: '/projects/create',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarProjectsArchiveRoute = SidebarProjectsArchiveRouteImport.update({
+  id: '/projects/archive',
+  path: '/projects/archive',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarCrmLeieferantenRoute = SidebarCrmLeieferantenRouteImport.update({
+  id: '/crm/leieferanten',
+  path: '/crm/leieferanten',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarCrmKostenstelleRoute = SidebarCrmKostenstelleRouteImport.update({
+  id: '/crm/kostenstelle',
+  path: '/crm/kostenstelle',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarCrmFirmenRoute = SidebarCrmFirmenRouteImport.update({
+  id: '/crm/firmen',
+  path: '/crm/firmen',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarCrmDienstleisterRoute = SidebarCrmDienstleisterRouteImport.update({
+  id: '/crm/dienstleister',
+  path: '/crm/dienstleister',
+  getParentRoute: () => SidebarRoute,
+} as any)
+const SidebarCrmAnsprechpartnerRoute =
+  SidebarCrmAnsprechpartnerRouteImport.update({
+    id: '/crm/ansprechpartner',
+    path: '/crm/ansprechpartner',
+    getParentRoute: () => SidebarRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/about': typeof SidebarAboutRoute
+  '/changelog': typeof SidebarChangelogRoute
+  '/dashboard': typeof SidebarDashboardRoute
+  '/documents': typeof SidebarDocumentsRoute
+  '/kalendar': typeof SidebarKalendarRoute
+  '/kanban': typeof SidebarKanbanRoute
+  '/notifications': typeof SidebarNotificationsRoute
+  '/scanner': typeof SidebarScannerRoute
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
   '/': typeof SidebarIndexRoute
+  '/crm/ansprechpartner': typeof SidebarCrmAnsprechpartnerRoute
+  '/crm/dienstleister': typeof SidebarCrmDienstleisterRoute
+  '/crm/firmen': typeof SidebarCrmFirmenRoute
+  '/crm/kostenstelle': typeof SidebarCrmKostenstelleRoute
+  '/crm/leieferanten': typeof SidebarCrmLeieferantenRoute
+  '/projects/archive': typeof SidebarProjectsArchiveRoute
+  '/projects/create': typeof SidebarProjectsCreateRoute
+  '/projects/current': typeof SidebarProjectsCurrentRoute
+  '/storage/material': typeof SidebarStorageMaterialRoute
+  '/storage/racks': typeof SidebarStorageRacksRoute
+  '/crm': typeof SidebarCrmIndexRoute
+  '/projects': typeof SidebarProjectsIndexRoute
+  '/storage': typeof SidebarStorageIndexRoute
 }
 export interface FileRoutesByTo {
   '/about': typeof SidebarAboutRoute
+  '/changelog': typeof SidebarChangelogRoute
+  '/dashboard': typeof SidebarDashboardRoute
+  '/documents': typeof SidebarDocumentsRoute
+  '/kalendar': typeof SidebarKalendarRoute
+  '/kanban': typeof SidebarKanbanRoute
+  '/notifications': typeof SidebarNotificationsRoute
+  '/scanner': typeof SidebarScannerRoute
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
   '/': typeof SidebarIndexRoute
+  '/crm/ansprechpartner': typeof SidebarCrmAnsprechpartnerRoute
+  '/crm/dienstleister': typeof SidebarCrmDienstleisterRoute
+  '/crm/firmen': typeof SidebarCrmFirmenRoute
+  '/crm/kostenstelle': typeof SidebarCrmKostenstelleRoute
+  '/crm/leieferanten': typeof SidebarCrmLeieferantenRoute
+  '/projects/archive': typeof SidebarProjectsArchiveRoute
+  '/projects/create': typeof SidebarProjectsCreateRoute
+  '/projects/current': typeof SidebarProjectsCurrentRoute
+  '/storage/material': typeof SidebarStorageMaterialRoute
+  '/storage/racks': typeof SidebarStorageRacksRoute
+  '/crm': typeof SidebarCrmIndexRoute
+  '/projects': typeof SidebarProjectsIndexRoute
+  '/storage': typeof SidebarStorageIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/_sidebar': typeof SidebarRouteWithChildren
   '/_sidebar/about': typeof SidebarAboutRoute
+  '/_sidebar/changelog': typeof SidebarChangelogRoute
+  '/_sidebar/dashboard': typeof SidebarDashboardRoute
+  '/_sidebar/documents': typeof SidebarDocumentsRoute
+  '/_sidebar/kalendar': typeof SidebarKalendarRoute
+  '/_sidebar/kanban': typeof SidebarKanbanRoute
+  '/_sidebar/notifications': typeof SidebarNotificationsRoute
+  '/_sidebar/scanner': typeof SidebarScannerRoute
   '/demo/tanstack-query': typeof DemoTanstackQueryRoute
   '/_sidebar/': typeof SidebarIndexRoute
+  '/_sidebar/crm/ansprechpartner': typeof SidebarCrmAnsprechpartnerRoute
+  '/_sidebar/crm/dienstleister': typeof SidebarCrmDienstleisterRoute
+  '/_sidebar/crm/firmen': typeof SidebarCrmFirmenRoute
+  '/_sidebar/crm/kostenstelle': typeof SidebarCrmKostenstelleRoute
+  '/_sidebar/crm/leieferanten': typeof SidebarCrmLeieferantenRoute
+  '/_sidebar/projects/archive': typeof SidebarProjectsArchiveRoute
+  '/_sidebar/projects/create': typeof SidebarProjectsCreateRoute
+  '/_sidebar/projects/current': typeof SidebarProjectsCurrentRoute
+  '/_sidebar/storage/material': typeof SidebarStorageMaterialRoute
+  '/_sidebar/storage/racks': typeof SidebarStorageRacksRoute
+  '/_sidebar/crm/': typeof SidebarCrmIndexRoute
+  '/_sidebar/projects/': typeof SidebarProjectsIndexRoute
+  '/_sidebar/storage/': typeof SidebarStorageIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/about' | '/demo/tanstack-query' | '/'
+  fullPaths:
+    | '/about'
+    | '/changelog'
+    | '/dashboard'
+    | '/documents'
+    | '/kalendar'
+    | '/kanban'
+    | '/notifications'
+    | '/scanner'
+    | '/demo/tanstack-query'
+    | '/'
+    | '/crm/ansprechpartner'
+    | '/crm/dienstleister'
+    | '/crm/firmen'
+    | '/crm/kostenstelle'
+    | '/crm/leieferanten'
+    | '/projects/archive'
+    | '/projects/create'
+    | '/projects/current'
+    | '/storage/material'
+    | '/storage/racks'
+    | '/crm'
+    | '/projects'
+    | '/storage'
   fileRoutesByTo: FileRoutesByTo
-  to: '/about' | '/demo/tanstack-query' | '/'
+  to:
+    | '/about'
+    | '/changelog'
+    | '/dashboard'
+    | '/documents'
+    | '/kalendar'
+    | '/kanban'
+    | '/notifications'
+    | '/scanner'
+    | '/demo/tanstack-query'
+    | '/'
+    | '/crm/ansprechpartner'
+    | '/crm/dienstleister'
+    | '/crm/firmen'
+    | '/crm/kostenstelle'
+    | '/crm/leieferanten'
+    | '/projects/archive'
+    | '/projects/create'
+    | '/projects/current'
+    | '/storage/material'
+    | '/storage/racks'
+    | '/crm'
+    | '/projects'
+    | '/storage'
   id:
     | '__root__'
     | '/_sidebar'
     | '/_sidebar/about'
+    | '/_sidebar/changelog'
+    | '/_sidebar/dashboard'
+    | '/_sidebar/documents'
+    | '/_sidebar/kalendar'
+    | '/_sidebar/kanban'
+    | '/_sidebar/notifications'
+    | '/_sidebar/scanner'
     | '/demo/tanstack-query'
     | '/_sidebar/'
+    | '/_sidebar/crm/ansprechpartner'
+    | '/_sidebar/crm/dienstleister'
+    | '/_sidebar/crm/firmen'
+    | '/_sidebar/crm/kostenstelle'
+    | '/_sidebar/crm/leieferanten'
+    | '/_sidebar/projects/archive'
+    | '/_sidebar/projects/create'
+    | '/_sidebar/projects/current'
+    | '/_sidebar/storage/material'
+    | '/_sidebar/storage/racks'
+    | '/_sidebar/crm/'
+    | '/_sidebar/projects/'
+    | '/_sidebar/storage/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -92,6 +339,55 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DemoTanstackQueryRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/_sidebar/scanner': {
+      id: '/_sidebar/scanner'
+      path: '/scanner'
+      fullPath: '/scanner'
+      preLoaderRoute: typeof SidebarScannerRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/notifications': {
+      id: '/_sidebar/notifications'
+      path: '/notifications'
+      fullPath: '/notifications'
+      preLoaderRoute: typeof SidebarNotificationsRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/kanban': {
+      id: '/_sidebar/kanban'
+      path: '/kanban'
+      fullPath: '/kanban'
+      preLoaderRoute: typeof SidebarKanbanRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/kalendar': {
+      id: '/_sidebar/kalendar'
+      path: '/kalendar'
+      fullPath: '/kalendar'
+      preLoaderRoute: typeof SidebarKalendarRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/documents': {
+      id: '/_sidebar/documents'
+      path: '/documents'
+      fullPath: '/documents'
+      preLoaderRoute: typeof SidebarDocumentsRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/dashboard': {
+      id: '/_sidebar/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof SidebarDashboardRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/changelog': {
+      id: '/_sidebar/changelog'
+      path: '/changelog'
+      fullPath: '/changelog'
+      preLoaderRoute: typeof SidebarChangelogRouteImport
+      parentRoute: typeof SidebarRoute
+    }
     '/_sidebar/about': {
       id: '/_sidebar/about'
       path: '/about'
@@ -99,17 +395,148 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SidebarAboutRouteImport
       parentRoute: typeof SidebarRoute
     }
+    '/_sidebar/storage/': {
+      id: '/_sidebar/storage/'
+      path: '/storage'
+      fullPath: '/storage'
+      preLoaderRoute: typeof SidebarStorageIndexRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/projects/': {
+      id: '/_sidebar/projects/'
+      path: '/projects'
+      fullPath: '/projects'
+      preLoaderRoute: typeof SidebarProjectsIndexRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/crm/': {
+      id: '/_sidebar/crm/'
+      path: '/crm'
+      fullPath: '/crm'
+      preLoaderRoute: typeof SidebarCrmIndexRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/storage/racks': {
+      id: '/_sidebar/storage/racks'
+      path: '/storage/racks'
+      fullPath: '/storage/racks'
+      preLoaderRoute: typeof SidebarStorageRacksRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/storage/material': {
+      id: '/_sidebar/storage/material'
+      path: '/storage/material'
+      fullPath: '/storage/material'
+      preLoaderRoute: typeof SidebarStorageMaterialRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/projects/current': {
+      id: '/_sidebar/projects/current'
+      path: '/projects/current'
+      fullPath: '/projects/current'
+      preLoaderRoute: typeof SidebarProjectsCurrentRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/projects/create': {
+      id: '/_sidebar/projects/create'
+      path: '/projects/create'
+      fullPath: '/projects/create'
+      preLoaderRoute: typeof SidebarProjectsCreateRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/projects/archive': {
+      id: '/_sidebar/projects/archive'
+      path: '/projects/archive'
+      fullPath: '/projects/archive'
+      preLoaderRoute: typeof SidebarProjectsArchiveRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/crm/leieferanten': {
+      id: '/_sidebar/crm/leieferanten'
+      path: '/crm/leieferanten'
+      fullPath: '/crm/leieferanten'
+      preLoaderRoute: typeof SidebarCrmLeieferantenRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/crm/kostenstelle': {
+      id: '/_sidebar/crm/kostenstelle'
+      path: '/crm/kostenstelle'
+      fullPath: '/crm/kostenstelle'
+      preLoaderRoute: typeof SidebarCrmKostenstelleRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/crm/firmen': {
+      id: '/_sidebar/crm/firmen'
+      path: '/crm/firmen'
+      fullPath: '/crm/firmen'
+      preLoaderRoute: typeof SidebarCrmFirmenRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/crm/dienstleister': {
+      id: '/_sidebar/crm/dienstleister'
+      path: '/crm/dienstleister'
+      fullPath: '/crm/dienstleister'
+      preLoaderRoute: typeof SidebarCrmDienstleisterRouteImport
+      parentRoute: typeof SidebarRoute
+    }
+    '/_sidebar/crm/ansprechpartner': {
+      id: '/_sidebar/crm/ansprechpartner'
+      path: '/crm/ansprechpartner'
+      fullPath: '/crm/ansprechpartner'
+      preLoaderRoute: typeof SidebarCrmAnsprechpartnerRouteImport
+      parentRoute: typeof SidebarRoute
+    }
   }
 }
 
 interface SidebarRouteChildren {
   SidebarAboutRoute: typeof SidebarAboutRoute
+  SidebarChangelogRoute: typeof SidebarChangelogRoute
+  SidebarDashboardRoute: typeof SidebarDashboardRoute
+  SidebarDocumentsRoute: typeof SidebarDocumentsRoute
+  SidebarKalendarRoute: typeof SidebarKalendarRoute
+  SidebarKanbanRoute: typeof SidebarKanbanRoute
+  SidebarNotificationsRoute: typeof SidebarNotificationsRoute
+  SidebarScannerRoute: typeof SidebarScannerRoute
   SidebarIndexRoute: typeof SidebarIndexRoute
+  SidebarCrmAnsprechpartnerRoute: typeof SidebarCrmAnsprechpartnerRoute
+  SidebarCrmDienstleisterRoute: typeof SidebarCrmDienstleisterRoute
+  SidebarCrmFirmenRoute: typeof SidebarCrmFirmenRoute
+  SidebarCrmKostenstelleRoute: typeof SidebarCrmKostenstelleRoute
+  SidebarCrmLeieferantenRoute: typeof SidebarCrmLeieferantenRoute
+  SidebarProjectsArchiveRoute: typeof SidebarProjectsArchiveRoute
+  SidebarProjectsCreateRoute: typeof SidebarProjectsCreateRoute
+  SidebarProjectsCurrentRoute: typeof SidebarProjectsCurrentRoute
+  SidebarStorageMaterialRoute: typeof SidebarStorageMaterialRoute
+  SidebarStorageRacksRoute: typeof SidebarStorageRacksRoute
+  SidebarCrmIndexRoute: typeof SidebarCrmIndexRoute
+  SidebarProjectsIndexRoute: typeof SidebarProjectsIndexRoute
+  SidebarStorageIndexRoute: typeof SidebarStorageIndexRoute
 }
 
 const SidebarRouteChildren: SidebarRouteChildren = {
   SidebarAboutRoute: SidebarAboutRoute,
+  SidebarChangelogRoute: SidebarChangelogRoute,
+  SidebarDashboardRoute: SidebarDashboardRoute,
+  SidebarDocumentsRoute: SidebarDocumentsRoute,
+  SidebarKalendarRoute: SidebarKalendarRoute,
+  SidebarKanbanRoute: SidebarKanbanRoute,
+  SidebarNotificationsRoute: SidebarNotificationsRoute,
+  SidebarScannerRoute: SidebarScannerRoute,
   SidebarIndexRoute: SidebarIndexRoute,
+  SidebarCrmAnsprechpartnerRoute: SidebarCrmAnsprechpartnerRoute,
+  SidebarCrmDienstleisterRoute: SidebarCrmDienstleisterRoute,
+  SidebarCrmFirmenRoute: SidebarCrmFirmenRoute,
+  SidebarCrmKostenstelleRoute: SidebarCrmKostenstelleRoute,
+  SidebarCrmLeieferantenRoute: SidebarCrmLeieferantenRoute,
+  SidebarProjectsArchiveRoute: SidebarProjectsArchiveRoute,
+  SidebarProjectsCreateRoute: SidebarProjectsCreateRoute,
+  SidebarProjectsCurrentRoute: SidebarProjectsCurrentRoute,
+  SidebarStorageMaterialRoute: SidebarStorageMaterialRoute,
+  SidebarStorageRacksRoute: SidebarStorageRacksRoute,
+  SidebarCrmIndexRoute: SidebarCrmIndexRoute,
+  SidebarProjectsIndexRoute: SidebarProjectsIndexRoute,
+  SidebarStorageIndexRoute: SidebarStorageIndexRoute,
 }
 
 const SidebarRouteWithChildren =

src/routes/__root.tsx

@@ -6,8 +6,6 @@ import {
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import { TanstackDevtools } from '@tanstack/react-devtools'
 
-import Header from '../components/Header'
-
 import StoreDevtools from '../lib/demo-store-devtools'
 
 import TanStackQueryDevtools from '../integrations/tanstack-query/devtools'

src/routes/_sidebar/changelog.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/changelog')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/chagelog"!</div>
+}

src/routes/_sidebar/crm/ansprechpartner.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/crm/ansprechpartner')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/crm/ansprechpartner"!</div>
+}

src/routes/_sidebar/crm/dienstleister.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/crm/dienstleister')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/crm/dienstleister"!</div>
+}

src/routes/_sidebar/crm/firmen.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/crm/firmen')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/crm/firmen"!</div>
+}

src/routes/_sidebar/crm/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/crm/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/crm/"!</div>
+}

src/routes/_sidebar/crm/kostenstelle.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/crm/kostenstelle')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/crm/kostenstelle"!</div>
+}

src/routes/_sidebar/crm/leieferanten.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/crm/leieferanten')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/crm/leieferanten"!</div>
+}

src/routes/_sidebar/dashboard.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/dashboard')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/dashboard"!</div>
+}

src/routes/_sidebar/documents.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/documents')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/documents"!</div>
+}

src/routes/_sidebar/index.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import logo from '../../logo.svg'
+import Session from '@/features/Auth/components/session'
 
 export const Route = createFileRoute('/_sidebar/')({
   component: App,
@@ -9,6 +9,7 @@ function App() {
   return (
     <div>
       <h1 className="text-xl">Hi Konstantin Hintermayer!</h1>
+      <Session />
     </div>
   )
 }

src/routes/_sidebar/kalendar.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/kalendar')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/kalendar"!</div>
+}

src/routes/_sidebar/kanban.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/kanban')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/kanban"!</div>
+}

src/routes/_sidebar/notifications.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/notifications')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/notifications"!</div>
+}

src/routes/_sidebar/projects/archive.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/projects/archive')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/projects/archive"!</div>
+}

src/routes/_sidebar/projects/create.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/projects/create')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/projects/create"!</div>
+}

src/routes/_sidebar/projects/current.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/projects/current')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/projects/current"!</div>
+}

src/routes/_sidebar/projects/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/projects/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/projects/"!</div>
+}

src/routes/_sidebar/scanner.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/scanner')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/storage/scanner"!</div>
+}

src/routes/_sidebar/storage/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/storage/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/storage/"!</div>
+}

src/routes/_sidebar/storage/material.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/storage/material')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/storage/material"!</div>
+}

src/routes/_sidebar/storage/racks.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_sidebar/storage/racks')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/_sidebar/storage/racks"!</div>
+}