Fix: layout of the application

Feat: Create page for account Summary

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

@@ -0,0 +1,56 @@
+"use client";
+import { Divider, Stack, Text } from '@mantine/core';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import React from 'react';
+ 
+export default function Layout({ children }: { children: React.ReactNode }) {
+    const pathname = usePathname(); // get current route
+ 
+    const links = [
+        { label: "Account Summary", href: "/accounts" },
+        { label: "Statement of Account", href: "/accounts/account_statement" },
+    ];
+ 
+    return (
+        <div style={{ display: "flex", height: '100%' }}>
+            <div
+                style={{
+                    width: "15%",
+                    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' }}>
+                        Accounts
+                    </Text>
+                </Stack>
+ 
+                <Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}>
+                    {links.map(link => {
+                        const isActive = pathname === link.href || pathname.startsWith(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)/accounts/page.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+interface accountData {
+  stAccountNo: string;
+  stAccountType: string;
+  stAvailableBalance: string;
+  custname: string;
+}
+
+export default function SavingsAccount() {
+  const router = useRouter();
+  const [authorized, setAuthorized] = useState<boolean | null>(null);
+  const [accountData, setAccountData] = useState<accountData[]>([]);
+
+  async function FetchAccountDetails() {
+    try {
+      const token = localStorage.getItem("access_token");
+      const response = await fetch("/api/customer", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      const data = await response.json();
+      if (response.ok && Array.isArray(data)) {
+        setAccountData(data);
+      }
+    } catch {
+      notifications.show({
+        withBorder: true,
+        color: "red",
+        title: "Please try again later",
+        message: "Unable to Fetch, Please try again later",
+        autoClose: 5000,
+      });
+    }
+  }
+
+  useEffect(() => {
+    const token = localStorage.getItem("access_token");
+    if (!token) {
+      setAuthorized(false);
+      router.push("/login");
+    } else {
+      setAuthorized(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (authorized) {
+      FetchAccountDetails();
+    }
+  }, [authorized]);
+
+  const cellStyle = {
+    border: "1px solid #ccc",
+    padding: "10px",
+  };
+
+  const rows = accountData.map((acc, index) => (
+    <tr key={index}>
+      <td style={{ ...cellStyle, textAlign: "left" }}>{acc.custname}</td>
+      <td style={{ ...cellStyle, textAlign: "left" }}>{acc.stAccountType}</td>
+      <td style={{ ...cellStyle, textAlign: "right" }}>{acc.stAccountNo}</td>
+      <td style={{ ...cellStyle, textAlign: "right" }}>
+        {parseFloat(acc.stAvailableBalance).toLocaleString("en-IN", {
+          minimumFractionDigits: 2,
+        })}
+      </td>
+    </tr>
+  ));
+
+  if (authorized) {
+    return (
+      <Paper shadow="sm" radius="md" p="md" withBorder>
+        <Title order={3} mb="sm">
+          Account Summary (Currency - INR)
+        </Title>
+        <ScrollArea>
+          <Table style={{ borderCollapse: "collapse", width: "100%" }}>
+            <thead>
+              <tr style={{ backgroundColor: "#3385ff" }}>
+                <th style={{ ...cellStyle, textAlign: "left" }}>Customer Name</th>
+                <th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
+                <th style={{ ...cellStyle, textAlign: "right" }}>Account No.</th>
+                <th style={{ ...cellStyle, textAlign: "right" }}>Book Balance</th>
+              </tr>
+            </thead>
+            <tbody>{rows}</tbody>
+          </Table>
+        </ScrollArea>
+        <Text mt="sm" size="xs" c="dimmed">
+          * Book Balance includes uncleared effects.
+        </Text>
+      </Paper>
+    );
+  }
+  return null;
+}