wip: Frontend for quick pay

src/app/(main)/settings/layout.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { Divider, Stack, Text } from '@mantine/core';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import React, { useEffect, useState } from 'react';
+import { useRouter } from "next/navigation";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    const [authorized, SetAuthorized] = useState<boolean | null>(null);
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const links = [
+        { label: "View Profile", href: "/settings" },
+        { label: "Change Login Password", href: "/settings/change_login_password" },
+        { label: "Change transaction Password", href: "/settings/change_transaction_password" },
+        { label: "Set transaction Password", href: "/settings/set_transaction_password" },
+    ];
+    useEffect(() => {
+        const token = localStorage.getItem("access_token");
+        if (!token) {
+            SetAuthorized(false);
+            router.push("/login");
+        }
+        else {
+            SetAuthorized(true);
+        }
+    }, []);
+
+    if (authorized) {
+        return (
+            <div style={{ display: "flex", height: '100%' }}>
+                <div
+                    style={{
+                        width: "16%",
+                        backgroundColor: '#c5e4f9',
+                        borderRight: "1px solid #ccc",
+                    }}
+                >
+                    <Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}>
+                        <Text fw={700} fs="italic" c='white' style={{ textAlign: 'center', marginTop: '10px' }}>
+                            Settings
+                        </Text>
+                    </Stack>
+
+                    <Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}>
+                        {links.map(link => {
+                            const isActive = pathname === link.href;
+                            return (
+                                <Text
+                                    key={link.href}
+                                    component={Link}
+                                    href={link.href}
+                                    c={isActive ? 'darkblue' : 'blue'}
+                                    style={{
+                                        textDecoration: isActive ? 'underline' : 'none',
+                                        fontWeight: isActive ? 600 : 400,
+                                    }}
+                                >
+                                    {link.label}
+                                </Text>
+                            );
+                        })}
+                    </Stack>
+                </div>
+
+                <div style={{ flex: 1, padding: '1rem' }}>
+                    {children}
+                </div>
+            </div>
+        );
+    }
+}

src/app/(main)/settings/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+import { Divider, Stack, Text } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import { useRouter } from "next/navigation";
+
+export default function settings() {
+    return(
+        <Text>Hii</Text>
+    )
+
+}