Shop about page

frontend/src/components/layout/data/sidebar-data.ts

@@ -1,5 +1,6 @@
 import {
 	IconBrowserCheck,
+	IconBuildingStore,
 	IconCoin,
 	IconForklift,
 	IconHelp,
@@ -18,28 +19,6 @@ import { AudioWaveform, Command, GalleryVerticalEnd } from "lucide-react";
 import { type SidebarData } from "../types";
 
 export const sidebarData: SidebarData = {
-	user: {
-		name: "satnaing",
-		email: "satnaingdev@gmail.com",
-		avatar: "/avatars/shadcn.jpg"
-	},
-	teams: [
-		{
-			name: "SwagShop Admin",
-			logo: Command,
-			plan: "Vite + ShadcnUI"
-		},
-		{
-			name: "Acme Inc",
-			logo: GalleryVerticalEnd,
-			plan: "Enterprise"
-		},
-		{
-			name: "Acme Corp.",
-			logo: AudioWaveform,
-			plan: "Startup"
-		}
-	],
 	navGroups: [
 		{
 			title: "Dashboard",
@@ -49,6 +28,11 @@ export const sidebarData: SidebarData = {
 					url: "/dashboard",
 					icon: IconLayoutDashboard
 				},
+				{
+					title: "Shop",
+					url: "/dashboard/shop",
+					icon: IconBuildingStore
+				},
 				{
 					title: "Products",
 					url: "/dashboard/products",

frontend/src/components/layout/types.ts

@@ -1,17 +1,5 @@
 import { LinkProps } from "@tanstack/react-router";
 
-interface User {
-	name: string;
-	email: string;
-	avatar: string;
-}
-
-interface Team {
-	name: string;
-	logo: React.ElementType;
-	plan: string;
-}
-
 interface BaseNavItem {
 	title: string;
 	badge?: string;
@@ -36,8 +24,6 @@ interface NavGroup {
 }
 
 interface SidebarData {
-	user: User;
-	teams: Team[];
 	navGroups: NavGroup[];
 }
 

frontend/src/pages/dashboard/index.tsx

@@ -20,7 +20,7 @@ export default function Dashboard() {
 		<>
 			{/* ===== Top Heading ===== */}
 			<Header>
-				<TopNav links={topNav} />
+				<Search />
 				<div className="ml-auto flex items-center space-x-4">
 					<Search />
 					<ThemeSwitch />

frontend/src/pages/products/index.tsx

@@ -62,10 +62,10 @@ export default function Products() {
 			<Main fixed>
 				<div>
 					<h1 className="text-2xl font-bold tracking-tight">
-						App Integrations
+						Products
 					</h1>
 					<p className="text-muted-foreground">
-						Here&apos;s a list of your apps for the integration!
+						Here&apos;s a list of your products!
 					</p>
 				</div>
 				<div className="my-4 flex items-end justify-between sm:my-0 sm:items-center">

frontend/src/pages/settings/security/index.tsx

@@ -0,0 +1,10 @@
+import ContentSection from "../components/content-section";
+import PasswordChangeForm from "./security-form";
+
+export default function SettingsSecurity() {
+	return (
+		<ContentSection title="Security" desc="You can change your password here">
+			<PasswordChangeForm />
+		</ContentSection>
+	);
+}

frontend/src/pages/settings/security/security-form.tsx

@@ -0,0 +1,116 @@
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage
+} from "@/components/ui/form";
+import { PasswordInput } from "@/components/password-input";
+import { toast } from "@/hooks/useToast";
+
+const passwordChangeSchema = z
+	.object({
+		oldPassword: z.string().min(1, {
+			message: "Please enter your existing password"
+		}),
+		newPassword: z
+			.string()
+			.min(1, { message: "Please enter your new password" })
+			.min(8, { message: "Password must be at least 8 characters long" })
+			.max(128, { message: "Password must be at most 128 characters long" })
+			.refine((password) => /[A-Z]/.test(password), {
+				message: "Password must contain at least one uppercase letter"
+			})
+			.refine((password) => /[a-z]/.test(password), {
+				message: "Password must contain at least one lowercase letter"
+			})
+			.refine((password) => /\d/.test(password), {
+				message: "Password must contain at least one number"
+			})
+			.refine((password) => /[@$!%*?&]/.test(password), {
+				message:
+					"Password must contain at least one special character (@, $, !, %, *, ?, &)"
+			}),
+		confirmNewPassword: z.string().min(1, {
+			message: "Please confirm your new password"
+		})
+	})
+	.refine((data) => data.newPassword === data.confirmNewPassword, {
+		message: "Passwords don't match.",
+		path: ["confirmNewPassword"]
+	});
+
+type PasswordChangeFormValues = z.infer<typeof passwordChangeSchema>;
+
+export default function PasswordChangeForm() {
+	const form = useForm<PasswordChangeFormValues>({
+		resolver: zodResolver(passwordChangeSchema),
+		defaultValues: {
+			oldPassword: "",
+			newPassword: "",
+			confirmNewPassword: ""
+		}
+	});
+
+	function onSubmit(data: PasswordChangeFormValues) {
+		toast({
+			title: "Password Changed (MOCK)",
+			description: "Your password has been updated."
+		});
+	}
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+				<FormField
+					control={form.control}
+					name="oldPassword"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Existing Password</FormLabel>
+							<FormControl>
+								<PasswordInput
+									placeholder="Enter current password"
+									{...field}
+								/>
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="newPassword"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>New Password</FormLabel>
+							<FormControl>
+								<PasswordInput placeholder="Enter new password" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="confirmNewPassword"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Confirm New Password</FormLabel>
+							<FormControl>
+								<PasswordInput placeholder="Confirm new password" {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<Button type="submit">Change Password</Button>
+			</form>
+		</Form>
+	);
+}

frontend/src/pages/shop/components/shop-about-form.tsx

@@ -0,0 +1,241 @@
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+import { PhoneInput } from "@/components/ui/phone-number-input";
+import { Input } from "@/components/ui/input";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+const shopAboutSchema = z.object({
+	name: z.string().min(1, "Name is required"),
+	description: z.string().min(1, "Description is required"),
+	currency: z.string().min(1, "Currency is required"),
+	contact_email: z.string().email("Invalid email"),
+	contact_phone_number: z.string().min(1, "Phone number is required"),
+	address: z.object({
+		street: z.string(),
+		city: z.string(),
+		state: z.string().optional(),
+		postal_code: z.string(),
+		country: z.string()
+	}),
+	status: z.enum(["active", "inactive", "suspended"])
+});
+
+type ShopAboutFormValues = z.infer<typeof shopAboutSchema>;
+
+export function ShopAboutForm() {
+	const defaultValues: ShopAboutFormValues = {
+		name: "My Shop",
+		description: "This is a sample shop description.",
+		currency: "USD",
+		contact_email: "user@example.com",
+		contact_phone_number: "+266018975510",
+		address: {
+			street: "123 Main St",
+			city: "Metropolis",
+			state: "",
+			postal_code: "12345",
+			country: "USA"
+		},
+		status: "inactive"
+	};
+
+	const form = useForm<ShopAboutFormValues>({
+		resolver: zodResolver(shopAboutSchema),
+		defaultValues,
+		mode: "onChange"
+	});
+
+	function onSubmit(data: ShopAboutFormValues) {
+		console.log("Submitted shop about data:", data);
+	}
+
+	return (
+		<ScrollArea
+			orientation="horizontal"
+			type="always"
+			className="hidden w-full min-w-40 bg-background px-1 md:block">
+			<Form {...form}>
+				<form
+					onSubmit={form.handleSubmit(onSubmit)}
+					className="space-y-6">
+					<Card>
+						<CardHeader>
+							<CardTitle className="text-xl">Basic Details</CardTitle>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<FormField
+								control={form.control}
+								name="name"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Shop Name</FormLabel>
+										<FormControl>
+											<Input placeholder="Enter shop name" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="currency"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Currency</FormLabel>
+										<FormControl>
+											<Input placeholder="e.g., USD" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="description"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Description</FormLabel>
+										<FormControl>
+											<Textarea placeholder="Describe your shop" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader>
+							<CardTitle className="text-xl">Contact Information</CardTitle>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<FormField
+								control={form.control}
+								name="contact_email"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Contact Email</FormLabel>
+										<FormControl>
+											<Input
+												type="email"
+												placeholder="user@example.com"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="contact_phone_number"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Phone Number</FormLabel>
+										<FormControl>
+											<PhoneInput {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader>
+							<CardTitle className="text-xl">Address</CardTitle>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<FormField
+								control={form.control}
+								name="address.street"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Street Address</FormLabel>
+										<FormControl>
+											<Input placeholder="123 Shop Street" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<div className="grid grid-cols-2 gap-4">
+								<FormField
+									control={form.control}
+									name="address.city"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>City</FormLabel>
+											<FormControl>
+												<Input placeholder="City" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="address.state"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>State/Province</FormLabel>
+											<FormControl>
+												<Input placeholder="State" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="address.postal_code"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Postal Code</FormLabel>
+											<FormControl>
+												<Input placeholder="Postal Code" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="address.country"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Country</FormLabel>
+											<FormControl>
+												<Input placeholder="Country" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</div>
+						</CardContent>
+					</Card>
+
+					<div className="flex justify-end gap-4">
+						<Button variant="outline">Cancel</Button>
+						<Button type="submit">Save Changes</Button>
+					</div>
+				</form>
+			</Form>
+		</ScrollArea>
+	);
+}

frontend/src/pages/shop/components/shop-sidebar.tsx

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+import {
+	Select,
+	SelectContent,
+	SelectTrigger,
+	SelectValue
+} from "@/components/ui/select";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { IconBuildingStore, IconClock, IconLink } from "@tabler/icons-react";
+
+export default function ShopSidebar({ ...props }) {
+	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></SelectContent>
+				</Select>
+			</div>
+
+			<Card className="sticky h-fit top-2">
+				<CardHeader>
+					<CardTitle className="font-heading text-2xl">Shop Preview</CardTitle>
+					<CardDescription className="text-muted-foreground">
+						Update your shop details and preferences
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<div className="relative mb-4 aspect-square w-full overflow-hidden rounded-lg">
+						<img
+							alt="Shop preview"
+							src="/images/placeholder.png"
+							width={400}
+							height={400}
+							className="object-cover"
+						/>
+						<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-background/90 to-background/0 p-4">
+							<Badge variant="secondary" className="mb-2">
+								Status: Inactive
+							</Badge>
+						</div>
+					</div>
+					<div className="space-y-4">
+						<div className="flex items-center gap-2">
+							<IconBuildingStore className="h-4 w-4 text-muted-foreground" />
+							<p className="text-sm text-muted-foreground">
+								Complete your profile to activate your shop
+							</p>
+						</div>
+						<div className="flex items-center gap-2">
+							<IconClock className="h-4 w-4 text-muted-foreground" />
+							<p className="text-sm text-muted-foreground">
+								Set business hours
+							</p>
+						</div>
+						<div className="flex items-center gap-2">
+							<IconLink className="h-4 w-4 text-muted-foreground" />
+							<p className="text-sm text-muted-foreground">
+								Add social media links
+							</p>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</>
+	);
+}

frontend/src/pages/shop/index.tsx

@@ -0,0 +1,48 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle
+} from "@/components/ui/card";
+import { Header } from "@/components/layout/header";
+import { Main } from "@/components/layout/main";
+import { TopNav } from "@/components/layout/top-nav";
+import { ProfileDropdown } from "@/components/profile-dropdown";
+import { ThemeSwitch } from "@/components/theme-switch";
+import { ShopAboutForm } from "./components/shop-about-form";
+import { Search } from "@/components/search";
+import ShopSidebar from "./components/shop-sidebar";
+import { Separator } from "@/components/ui/separator";
+
+export default function AboutPage() {
+	return (
+		<>
+			{/* ===== Top Heading ===== */}
+			<Header>
+				<Search />
+
+				<div className="ml-auto flex items-center space-x-4">
+					<ThemeSwitch />
+					<ProfileDropdown />
+				</div>
+			</Header>
+
+			{/* ===== Main ===== */}
+			<Main>
+				<div className="my-4">
+					<h1 className="text-2xl font-bold tracking-tight">About Your Shop</h1>
+					<p className="text-muted-foreground">
+						Here&apos;s an overview info about your shop
+					</p>
+				</div>
+				<Separator />
+				<div className="my-4 flex flex-row gap-4">
+					<ShopSidebar />
+
+					<ShopAboutForm />
+				</div>
+			</Main>
+		</>
+	);
+}

frontend/src/routeTree.gen.ts

@@ -44,6 +44,9 @@ const AuthenticatedDashboardUsersIndexLazyImport = createFileRoute(
 const AuthenticatedDashboardTasksIndexLazyImport = createFileRoute(
   '/_authenticated/dashboard/tasks/',
 )()
+const AuthenticatedDashboardShopIndexLazyImport = createFileRoute(
+  '/_authenticated/dashboard/shop/',
+)()
 const AuthenticatedDashboardSettingsIndexLazyImport = createFileRoute(
   '/_authenticated/dashboard/settings/',
 )()
@@ -56,6 +59,9 @@ const AuthenticatedDashboardProductsIndexLazyImport = createFileRoute(
 const AuthenticatedDashboardChatsIndexLazyImport = createFileRoute(
   '/_authenticated/dashboard/chats/',
 )()
+const AuthenticatedDashboardSettingsSecurityLazyImport = createFileRoute(
+  '/_authenticated/dashboard/settings/security',
+)()
 const AuthenticatedDashboardSettingsNotificationsLazyImport = createFileRoute(
   '/_authenticated/dashboard/settings/notifications',
 )()
@@ -223,6 +229,17 @@ const AuthenticatedDashboardTasksIndexLazyRoute =
     ),
   )
 
+const AuthenticatedDashboardShopIndexLazyRoute =
+  AuthenticatedDashboardShopIndexLazyImport.update({
+    id: '/dashboard/shop/',
+    path: '/dashboard/shop/',
+    getParentRoute: () => AuthenticatedRouteRoute,
+  } as any).lazy(() =>
+    import('./routes/_authenticated/dashboard/shop/index.lazy').then(
+      (d) => d.Route,
+    ),
+  )
+
 const AuthenticatedDashboardSettingsIndexLazyRoute =
   AuthenticatedDashboardSettingsIndexLazyImport.update({
     id: '/',
@@ -267,6 +284,17 @@ const AuthenticatedDashboardChatsIndexLazyRoute =
     ),
   )
 
+const AuthenticatedDashboardSettingsSecurityLazyRoute =
+  AuthenticatedDashboardSettingsSecurityLazyImport.update({
+    id: '/security',
+    path: '/security',
+    getParentRoute: () => AuthenticatedDashboardSettingsRouteLazyRoute,
+  } as any).lazy(() =>
+    import('./routes/_authenticated/dashboard/settings/security.lazy').then(
+      (d) => d.Route,
+    ),
+  )
+
 const AuthenticatedDashboardSettingsNotificationsLazyRoute =
   AuthenticatedDashboardSettingsNotificationsLazyImport.update({
     id: '/notifications',
@@ -491,6 +519,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedDashboardSettingsNotificationsLazyImport
       parentRoute: typeof AuthenticatedDashboardSettingsRouteLazyImport
     }
+    '/_authenticated/dashboard/settings/security': {
+      id: '/_authenticated/dashboard/settings/security'
+      path: '/security'
+      fullPath: '/dashboard/settings/security'
+      preLoaderRoute: typeof AuthenticatedDashboardSettingsSecurityLazyImport
+      parentRoute: typeof AuthenticatedDashboardSettingsRouteLazyImport
+    }
     '/_authenticated/dashboard/chats/': {
       id: '/_authenticated/dashboard/chats/'
       path: '/dashboard/chats'
@@ -519,6 +554,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedDashboardSettingsIndexLazyImport
       parentRoute: typeof AuthenticatedDashboardSettingsRouteLazyImport
     }
+    '/_authenticated/dashboard/shop/': {
+      id: '/_authenticated/dashboard/shop/'
+      path: '/dashboard/shop'
+      fullPath: '/dashboard/shop'
+      preLoaderRoute: typeof AuthenticatedDashboardShopIndexLazyImport
+      parentRoute: typeof AuthenticatedRouteImport
+    }
     '/_authenticated/dashboard/tasks/': {
       id: '/_authenticated/dashboard/tasks/'
       path: '/dashboard/tasks'
@@ -543,6 +585,7 @@ interface AuthenticatedDashboardSettingsRouteLazyRouteChildren {
   AuthenticatedDashboardSettingsAppearanceLazyRoute: typeof AuthenticatedDashboardSettingsAppearanceLazyRoute
   AuthenticatedDashboardSettingsDisplayLazyRoute: typeof AuthenticatedDashboardSettingsDisplayLazyRoute
   AuthenticatedDashboardSettingsNotificationsLazyRoute: typeof AuthenticatedDashboardSettingsNotificationsLazyRoute
+  AuthenticatedDashboardSettingsSecurityLazyRoute: typeof AuthenticatedDashboardSettingsSecurityLazyRoute
   AuthenticatedDashboardSettingsIndexLazyRoute: typeof AuthenticatedDashboardSettingsIndexLazyRoute
 }
 
@@ -556,6 +599,8 @@ const AuthenticatedDashboardSettingsRouteLazyRouteChildren: AuthenticatedDashboa
       AuthenticatedDashboardSettingsDisplayLazyRoute,
     AuthenticatedDashboardSettingsNotificationsLazyRoute:
       AuthenticatedDashboardSettingsNotificationsLazyRoute,
+    AuthenticatedDashboardSettingsSecurityLazyRoute:
+      AuthenticatedDashboardSettingsSecurityLazyRoute,
     AuthenticatedDashboardSettingsIndexLazyRoute:
       AuthenticatedDashboardSettingsIndexLazyRoute,
   }
@@ -574,6 +619,7 @@ interface AuthenticatedRouteRouteChildren {
   AuthenticatedDashboardChatsIndexLazyRoute: typeof AuthenticatedDashboardChatsIndexLazyRoute
   AuthenticatedDashboardProductsIndexLazyRoute: typeof AuthenticatedDashboardProductsIndexLazyRoute
   AuthenticatedDashboardSalesIndexLazyRoute: typeof AuthenticatedDashboardSalesIndexLazyRoute
+  AuthenticatedDashboardShopIndexLazyRoute: typeof AuthenticatedDashboardShopIndexLazyRoute
   AuthenticatedDashboardTasksIndexLazyRoute: typeof AuthenticatedDashboardTasksIndexLazyRoute
   AuthenticatedDashboardUsersIndexLazyRoute: typeof AuthenticatedDashboardUsersIndexLazyRoute
 }
@@ -593,6 +639,8 @@ const AuthenticatedRouteRouteChildren: AuthenticatedRouteRouteChildren = {
     AuthenticatedDashboardProductsIndexLazyRoute,
   AuthenticatedDashboardSalesIndexLazyRoute:
     AuthenticatedDashboardSalesIndexLazyRoute,
+  AuthenticatedDashboardShopIndexLazyRoute:
+    AuthenticatedDashboardShopIndexLazyRoute,
   AuthenticatedDashboardTasksIndexLazyRoute:
     AuthenticatedDashboardTasksIndexLazyRoute,
   AuthenticatedDashboardUsersIndexLazyRoute:
@@ -624,10 +672,12 @@ export interface FileRoutesByFullPath {
   '/dashboard/settings/appearance': typeof AuthenticatedDashboardSettingsAppearanceLazyRoute
   '/dashboard/settings/display': typeof AuthenticatedDashboardSettingsDisplayLazyRoute
   '/dashboard/settings/notifications': typeof AuthenticatedDashboardSettingsNotificationsLazyRoute
+  '/dashboard/settings/security': typeof AuthenticatedDashboardSettingsSecurityLazyRoute
   '/dashboard/chats': typeof AuthenticatedDashboardChatsIndexLazyRoute
   '/dashboard/products': typeof AuthenticatedDashboardProductsIndexLazyRoute
   '/dashboard/sales': typeof AuthenticatedDashboardSalesIndexLazyRoute
   '/dashboard/settings/': typeof AuthenticatedDashboardSettingsIndexLazyRoute
+  '/dashboard/shop': typeof AuthenticatedDashboardShopIndexLazyRoute
   '/dashboard/tasks': typeof AuthenticatedDashboardTasksIndexLazyRoute
   '/dashboard/users': typeof AuthenticatedDashboardUsersIndexLazyRoute
 }
@@ -653,10 +703,12 @@ export interface FileRoutesByTo {
   '/dashboard/settings/appearance': typeof AuthenticatedDashboardSettingsAppearanceLazyRoute
   '/dashboard/settings/display': typeof AuthenticatedDashboardSettingsDisplayLazyRoute
   '/dashboard/settings/notifications': typeof AuthenticatedDashboardSettingsNotificationsLazyRoute
+  '/dashboard/settings/security': typeof AuthenticatedDashboardSettingsSecurityLazyRoute
   '/dashboard/chats': typeof AuthenticatedDashboardChatsIndexLazyRoute
   '/dashboard/products': typeof AuthenticatedDashboardProductsIndexLazyRoute
   '/dashboard/sales': typeof AuthenticatedDashboardSalesIndexLazyRoute
   '/dashboard/settings': typeof AuthenticatedDashboardSettingsIndexLazyRoute
+  '/dashboard/shop': typeof AuthenticatedDashboardShopIndexLazyRoute
   '/dashboard/tasks': typeof AuthenticatedDashboardTasksIndexLazyRoute
   '/dashboard/users': typeof AuthenticatedDashboardUsersIndexLazyRoute
 }
@@ -685,10 +737,12 @@ export interface FileRoutesById {
   '/_authenticated/dashboard/settings/appearance': typeof AuthenticatedDashboardSettingsAppearanceLazyRoute
   '/_authenticated/dashboard/settings/display': typeof AuthenticatedDashboardSettingsDisplayLazyRoute
   '/_authenticated/dashboard/settings/notifications': typeof AuthenticatedDashboardSettingsNotificationsLazyRoute
+  '/_authenticated/dashboard/settings/security': typeof AuthenticatedDashboardSettingsSecurityLazyRoute
   '/_authenticated/dashboard/chats/': typeof AuthenticatedDashboardChatsIndexLazyRoute
   '/_authenticated/dashboard/products/': typeof AuthenticatedDashboardProductsIndexLazyRoute
   '/_authenticated/dashboard/sales/': typeof AuthenticatedDashboardSalesIndexLazyRoute
   '/_authenticated/dashboard/settings/': typeof AuthenticatedDashboardSettingsIndexLazyRoute
+  '/_authenticated/dashboard/shop/': typeof AuthenticatedDashboardShopIndexLazyRoute
   '/_authenticated/dashboard/tasks/': typeof AuthenticatedDashboardTasksIndexLazyRoute
   '/_authenticated/dashboard/users/': typeof AuthenticatedDashboardUsersIndexLazyRoute
 }
@@ -717,10 +771,12 @@ export interface FileRouteTypes {
     | '/dashboard/settings/appearance'
     | '/dashboard/settings/display'
     | '/dashboard/settings/notifications'
+    | '/dashboard/settings/security'
     | '/dashboard/chats'
     | '/dashboard/products'
     | '/dashboard/sales'
     | '/dashboard/settings/'
+    | '/dashboard/shop'
     | '/dashboard/tasks'
     | '/dashboard/users'
   fileRoutesByTo: FileRoutesByTo
@@ -745,10 +801,12 @@ export interface FileRouteTypes {
     | '/dashboard/settings/appearance'
     | '/dashboard/settings/display'
     | '/dashboard/settings/notifications'
+    | '/dashboard/settings/security'
     | '/dashboard/chats'
     | '/dashboard/products'
     | '/dashboard/sales'
     | '/dashboard/settings'
+    | '/dashboard/shop'
     | '/dashboard/tasks'
     | '/dashboard/users'
   id:
@@ -775,10 +833,12 @@ export interface FileRouteTypes {
     | '/_authenticated/dashboard/settings/appearance'
     | '/_authenticated/dashboard/settings/display'
     | '/_authenticated/dashboard/settings/notifications'
+    | '/_authenticated/dashboard/settings/security'
     | '/_authenticated/dashboard/chats/'
     | '/_authenticated/dashboard/products/'
     | '/_authenticated/dashboard/sales/'
     | '/_authenticated/dashboard/settings/'
+    | '/_authenticated/dashboard/shop/'
     | '/_authenticated/dashboard/tasks/'
     | '/_authenticated/dashboard/users/'
   fileRoutesById: FileRoutesById
@@ -855,6 +915,7 @@ export const routeTree = rootRoute
         "/_authenticated/dashboard/chats/",
         "/_authenticated/dashboard/products/",
         "/_authenticated/dashboard/sales/",
+        "/_authenticated/dashboard/shop/",
         "/_authenticated/dashboard/tasks/",
         "/_authenticated/dashboard/users/"
       ]
@@ -900,6 +961,7 @@ export const routeTree = rootRoute
         "/_authenticated/dashboard/settings/appearance",
         "/_authenticated/dashboard/settings/display",
         "/_authenticated/dashboard/settings/notifications",
+        "/_authenticated/dashboard/settings/security",
         "/_authenticated/dashboard/settings/"
       ]
     },
@@ -935,6 +997,10 @@ export const routeTree = rootRoute
       "filePath": "_authenticated/dashboard/settings/notifications.lazy.tsx",
       "parent": "/_authenticated/dashboard/settings"
     },
+    "/_authenticated/dashboard/settings/security": {
+      "filePath": "_authenticated/dashboard/settings/security.lazy.tsx",
+      "parent": "/_authenticated/dashboard/settings"
+    },
     "/_authenticated/dashboard/chats/": {
       "filePath": "_authenticated/dashboard/chats/index.lazy.tsx",
       "parent": "/_authenticated"
@@ -951,6 +1017,10 @@ export const routeTree = rootRoute
       "filePath": "_authenticated/dashboard/settings/index.lazy.tsx",
       "parent": "/_authenticated/dashboard/settings"
     },
+    "/_authenticated/dashboard/shop/": {
+      "filePath": "_authenticated/dashboard/shop/index.lazy.tsx",
+      "parent": "/_authenticated"
+    },
     "/_authenticated/dashboard/tasks/": {
       "filePath": "_authenticated/dashboard/tasks/index.lazy.tsx",
       "parent": "/_authenticated"

frontend/src/routes/_authenticated/dashboard/settings/security.lazy.tsx

@@ -0,0 +1,8 @@
+import SettingsSecurity from "@/pages/settings/security";
+import { createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute(
+	"/_authenticated/dashboard/settings/security"
+)({
+	component: SettingsSecurity
+});

frontend/src/routes/_authenticated/dashboard/shop/index.lazy.tsx

@@ -0,0 +1,6 @@
+import AboutPage from '@/pages/shop'
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/_authenticated/dashboard/shop/')({
+  component: AboutPage,
+})