added Profile Page and Change password (also included breadcrumb

src/routes/__root.tsx

@@ -1,25 +1,25 @@
+import NotFound from '@/components/NotFound'
+import { Toaster } from '@/components/ui/sonner'
+import { sessionQueryOptions } from '@/hooks/use-session'
+import { setSSRLanguage } from '@/lib/i18n'
+import {
+  CheckIcon,
+  InfoIcon,
+  WarningIcon,
+  WarningOctagonIcon,
+} from '@phosphor-icons/react'
 import { TanStackDevtools } from '@tanstack/react-devtools'
+import type { QueryClient } from '@tanstack/react-query'
 import {
   HeadContent,
   Scripts,
   createRootRouteWithContext,
 } from '@tanstack/react-router'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
 import TanStackQueryDevtools from '../integrations/tanstack-query/devtools'
 import appCss from '../styles.css?url'
-import type { QueryClient } from '@tanstack/react-query'
-import React from 'react'
-import { setSSRLanguage } from '@/lib/i18n'
-import { useTranslation } from 'react-i18next'
-import { Toaster } from '@/components/ui/sonner'
-import { HugeiconsIcon } from '@hugeicons/react'
-import {
-  Alert02Icon,
-  AlertCircleIcon,
-  CheckmarkCircle01Icon,
-  InformationCircleIcon,
-} from '@hugeicons/core-free-icons'
-import { sessionQueryOptions } from '@/hooks/use-session'
 
 interface MyRouterContext {
   queryClient: QueryClient
@@ -44,6 +44,9 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
       {
         title: 'Fuware',
       },
+      {
+        description: 'Fuware is a platform for managing your business.',
+      },
     ],
     links: [
       {
@@ -53,7 +56,7 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
     ],
   }),
   shellComponent: RootDocument,
-  notFoundComponent: () => <div>404 Not Found</div>,
+  notFoundComponent: () => <NotFound />,
 })
 
 function RootDocument({ children }: { children: React.ReactNode }) {
@@ -80,34 +83,10 @@ function RootDocument({ children }: { children: React.ReactNode }) {
             },
           }}
           icons={{
-            success: (
-              <HugeiconsIcon
-                icon={CheckmarkCircle01Icon}
-                className="text-green-500"
-                size={16}
-              />
-            ),
-            error: (
-              <HugeiconsIcon
-                icon={AlertCircleIcon}
-                className="text-red-500"
-                size={16}
-              />
-            ),
-            info: (
-              <HugeiconsIcon
-                icon={InformationCircleIcon}
-                className="text-blue-500"
-                size={16}
-              />
-            ),
-            warning: (
-              <HugeiconsIcon
-                icon={Alert02Icon}
-                className="text-yellow-500"
-                size={16}
-              />
-            ),
+            success: <CheckIcon className="text-green-500" size={16} />,
+            error: <WarningOctagonIcon className="text-red-500" size={16} />,
+            info: <InfoIcon className="text-blue-500" size={16} />,
+            warning: <WarningIcon className="text-yellow-500" size={16} />,
           }}
         />
         <React.Suspense>