Fix: layout of the application

Feat: Create page for account Summary
This commit is contained in:
2025-07-12 17:59:30 +05:30
parent 3ccd7eb690
commit 1023646751
12 changed files with 659 additions and 409 deletions

View File

@@ -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;
}