- added settings page and function

- add Role Ring for avatar and display role for user nav

src/routes/(app)/(auth)/change-password.tsx

@@ -1,11 +1,11 @@
-import ChangePasswordForm from '@/components/form/change-password-form'
-import i18n from '@/lib/i18n'
-import { createFileRoute } from '@tanstack/react-router'
+import ChangePasswordForm from '@/components/form/change-password-form';
+import i18n from '@/lib/i18n';
+import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/(app)/(auth)/change-password')({
   component: RouteComponent,
   staticData: { breadcrumb: i18n.t('nav.change_password') },
-})
+});
 
 function RouteComponent() {
   return (
@@ -14,5 +14,5 @@ function RouteComponent() {
         <ChangePasswordForm />
       </div>
     </div>
-  )
+  );
 }

src/routes/(app)/(auth)/dashboard.tsx

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

src/routes/(app)/(auth)/profile.tsx

@@ -1,11 +1,11 @@
-import ProfileForm from '@/components/form/profile-form'
-import i18n from '@/lib/i18n'
-import { createFileRoute } from '@tanstack/react-router'
+import ProfileForm from '@/components/form/profile-form';
+import i18n from '@/lib/i18n';
+import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/(app)/(auth)/profile')({
   component: RouteComponent,
   staticData: { breadcrumb: i18n.t('nav.profile') },
-})
+});
 
 function RouteComponent() {
   return (
@@ -14,5 +14,5 @@ function RouteComponent() {
         <ProfileForm />
       </div>
     </div>
-  )
+  );
 }

src/routes/(app)/(auth)/route.tsx

@@ -1,18 +1,14 @@
-import { authMiddleware } from '@/lib/middleware'
-import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/(app)/(auth)')({
   beforeLoad: async ({ context }) => {
     if (!context.userSession) {
-      throw redirect({ to: '/sign-in' })
+      throw redirect({ to: '/sign-in' });
     }
   },
   component: RouteComponent,
-  server: {
-    middleware: [authMiddleware],
-  },
-})
+});
 
 function RouteComponent() {
-  return <Outlet />
+  return <Outlet />;
 }

src/routes/(app)/(auth)/settings.tsx

@@ -0,0 +1,18 @@
+import SettingsForm from '@/components/form/settings-form';
+import i18n from '@/lib/i18n';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/(app)/(auth)/settings')({
+  component: RouteComponent,
+  staticData: { breadcrumb: i18n.t('nav.settings') },
+});
+
+function RouteComponent() {
+  return (
+    <div className="@container/main flex flex-1 flex-col gap-2 p-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-gradient-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
+        <SettingsForm />
+      </div>
+    </div>
+  );
+}

src/routes/(app)/route.tsx

@@ -1,23 +1,20 @@
-import { AuthProvider } from '@/components/auth/auth-provider'
-import Header from '@/components/Header'
-import AppSidebar from '@/components/sidebar/app-sidebar'
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
-import { createFileRoute, Outlet } from '@tanstack/react-router'
+import Header from '@/components/Header';
+import AppSidebar from '@/components/sidebar/app-sidebar';
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/(app)')({
   component: RouteComponent,
-})
+});
 
 function RouteComponent() {
   return (
-    <AuthProvider>
-      <SidebarProvider defaultOpen={false}>
-        <AppSidebar />
-        <SidebarInset>
-          <Header />
-          <Outlet />
-        </SidebarInset>
-      </SidebarProvider>
-    </AuthProvider>
-  )
+    <SidebarProvider defaultOpen={false}>
+      <AppSidebar />
+      <SidebarInset>
+        <Header />
+        <Outlet />
+      </SidebarInset>
+    </SidebarProvider>
+  );
 }