Fix: layout of the application
Feat: Create page for account Summary
This commit is contained in:
105
src/app/(main)/accounts/page.tsx
Normal file
105
src/app/(main)/accounts/page.tsx
Normal 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;
|
||||
}
|
Reference in New Issue
Block a user