fix: design in view profile and account overview
feat : page add for e mandate otp
This commit is contained in:
@@ -2,16 +2,36 @@
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Group,
|
||||
Container,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
Group,
|
||||
Badge,
|
||||
Divider,
|
||||
Loader,
|
||||
Center,
|
||||
Card,
|
||||
SimpleGrid,
|
||||
ThemeIcon,
|
||||
Box,
|
||||
rem,
|
||||
Grid,
|
||||
} from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import {
|
||||
IconCreditCard,
|
||||
IconWallet,
|
||||
IconTrendingUp,
|
||||
IconBuilding,
|
||||
IconCircleCheck,
|
||||
IconAlertCircle,
|
||||
IconUser,
|
||||
IconFileText,
|
||||
IconCircleDot,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
interface accountData {
|
||||
stAccountNo: string;
|
||||
@@ -19,23 +39,21 @@ interface accountData {
|
||||
stAvailableBalance: string;
|
||||
custname: string;
|
||||
stBookingNumber: string;
|
||||
stApprovedAmount?: string; // optional for loan accounts
|
||||
stApprovedAmount?: string;
|
||||
}
|
||||
|
||||
export default function AccountDetails() {
|
||||
const router = useRouter();
|
||||
export default function App() {
|
||||
const [accountOptions, setAccountOptions] = useState<{ value: string; label: string }[]>([]);
|
||||
const [selectedAccNo, setSelectedAccNo] = useState<string | null>(null);
|
||||
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
||||
const [accountDetails, setAccountDetails] = useState<accountData | null>(null);
|
||||
const searchParams = useSearchParams();
|
||||
const passedAccNo = searchParams.get("accNo");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (!token) {
|
||||
setAuthorized(false);
|
||||
router.push("/login");
|
||||
// router.push("/login");
|
||||
} else {
|
||||
setAuthorized(true);
|
||||
}
|
||||
@@ -51,9 +69,6 @@ export default function AccountDetails() {
|
||||
value: acc.stAccountNo,
|
||||
}));
|
||||
setAccountOptions(options);
|
||||
if (passedAccNo) {
|
||||
handleAccountSelection(passedAccNo);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [authorized]);
|
||||
@@ -62,6 +77,8 @@ export default function AccountDetails() {
|
||||
setSelectedAccNo(accNo);
|
||||
setAccountDetails(null);
|
||||
if (!accNo) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem("access_token");
|
||||
const response = await fetch("/api/customer", {
|
||||
@@ -77,11 +94,10 @@ export default function AccountDetails() {
|
||||
if (response.ok && Array.isArray(data)) {
|
||||
const matched = data.find((acc) => acc.stAccountNo === accNo);
|
||||
if (matched) {
|
||||
// Simulate approvedBalance for loan accounts
|
||||
if (matched.stAccountType.toUpperCase().includes("LN")) {
|
||||
matched.stApprovedAmount = (
|
||||
parseFloat(matched.stAvailableBalance) + 20000
|
||||
).toFixed(2); // dummy logic
|
||||
).toFixed(2);
|
||||
}
|
||||
setAccountDetails(matched);
|
||||
} else {
|
||||
@@ -102,79 +118,270 @@ export default function AccountDetails() {
|
||||
title: "Fetch failed",
|
||||
message: "Could not fetch account details. Try again.",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getAccountIcon = (accountType: string) => {
|
||||
const type = accountType.toUpperCase();
|
||||
if (type.includes("LN")) return IconTrendingUp;
|
||||
if (type.includes("SA") || type.includes("SB") || type.includes("CC") || type.includes("OD") || type.includes("CA")) return IconWallet;
|
||||
return IconBuilding;
|
||||
};
|
||||
|
||||
const getAccountColor = (accountType: string) => {
|
||||
const type = accountType.toUpperCase();
|
||||
if (type.includes("LN")) return "violet";
|
||||
if (type.includes("SA") || type.includes("SB") || type.includes("CC") || type.includes("OD") || type.includes("CA")) return "blue";
|
||||
return "cyan";
|
||||
};
|
||||
|
||||
const isLoanAccount = accountDetails?.stAccountType.toUpperCase().includes("LN");
|
||||
const AccountIcon = accountDetails ? getAccountIcon(accountDetails.stAccountType) : IconCreditCard;
|
||||
const accountColor = accountDetails ? getAccountColor(accountDetails.stAccountType) : "blue";
|
||||
|
||||
if (!authorized) return null;
|
||||
|
||||
return (
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={500}>
|
||||
<Title order={3} mb="md">
|
||||
Account Details
|
||||
</Title>
|
||||
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="Select Account Number"
|
||||
placeholder="Choose account number"
|
||||
data={accountOptions}
|
||||
value={selectedAccNo}
|
||||
onChange={handleAccountSelection}
|
||||
searchable
|
||||
/>
|
||||
<Grid gutter="md">
|
||||
{/* Left side – Account Selector */}
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={500}>
|
||||
<Title order={4} mb="md">
|
||||
Account Selector
|
||||
</Title>
|
||||
<Select
|
||||
label="Select Account Number"
|
||||
placeholder="Choose an account number"
|
||||
data={accountOptions}
|
||||
value={selectedAccNo}
|
||||
onChange={handleAccountSelection}
|
||||
searchable
|
||||
size="sm"
|
||||
leftSection={<IconCreditCard size={20} />}
|
||||
styles={{
|
||||
input: {
|
||||
borderRadius: rem(12),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
|
||||
{accountDetails && (
|
||||
<Paper withBorder p="md" radius="md" bg="gray.0">
|
||||
<Stack gap="sm">
|
||||
<Group p="apart">
|
||||
<Text size="sm" fw={500} c="dimmed">Account Number</Text>
|
||||
<Text size="md">{accountDetails.stAccountNo}</Text>
|
||||
</Group>
|
||||
{/* Right side – Account Details */}
|
||||
<Grid.Col span={{ base: 12, md: 8 }}>
|
||||
<Paper
|
||||
shadow="sm"
|
||||
radius="md"
|
||||
p="md"
|
||||
withBorder
|
||||
h={500}
|
||||
style={{ display: "flex", flexDirection: "column", overflow: "auto" }}
|
||||
>
|
||||
<Title order={4} mb="md">
|
||||
Account Details
|
||||
</Title>
|
||||
|
||||
<Group p="apart">
|
||||
<Text size="sm" fw={500} c="dimmed">Account Type</Text>
|
||||
<Text size="md">{accountDetails.stAccountType}</Text>
|
||||
</Group>
|
||||
{/* Loading State */}
|
||||
{loading && (
|
||||
<Center style={{ flex: 1 }}>
|
||||
<Stack align="center" gap="md">
|
||||
<Loader size="lg" type="dots" />
|
||||
<Text c="dimmed">Loading account details...</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
)}
|
||||
|
||||
<Group p="apart">
|
||||
<Text size="sm" fw={500} c="dimmed">Description</Text>
|
||||
<Text size="md">{accountDetails.stBookingNumber}</Text>
|
||||
</Group>
|
||||
|
||||
{/* Show Loan-specific fields */}
|
||||
{accountDetails.stAccountType.toUpperCase().includes("LN") ? (
|
||||
<>
|
||||
<Group p="apart">
|
||||
<Text size="sm" fw={500} c="dimmed">Approved Balance</Text>
|
||||
<Text size="md" c="gray.8">
|
||||
₹{parseFloat(accountDetails.stApprovedAmount || "0").toLocaleString("en-IN", {
|
||||
minimumFractionDigits: 2,
|
||||
})}
|
||||
</Text>
|
||||
{/* Account Details */}
|
||||
{!loading && accountDetails && (
|
||||
<Stack gap="sm" style={{ flex: 1 }}>
|
||||
{/* Account Header Card */}
|
||||
<Paper
|
||||
shadow="md"
|
||||
p="xs"
|
||||
radius="md"
|
||||
style={{
|
||||
background: "linear-gradient(56deg, rgba(24,140,186,1) 0%, rgba(62,230,132,1) 86%)",
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" align="flex-start" wrap="wrap" mb="xs">
|
||||
<Group gap="sm">
|
||||
<ThemeIcon size={48} radius="md" variant="white" color={accountColor}>
|
||||
<AccountIcon size={28} />
|
||||
</ThemeIcon>
|
||||
<Box>
|
||||
<Text size="xs" c="white" opacity={0.8}>
|
||||
Account Number
|
||||
</Text>
|
||||
<Title order={3} c="white" style={{ letterSpacing: "0.5px" }}>
|
||||
{accountDetails.stAccountNo}
|
||||
</Title>
|
||||
</Box>
|
||||
</Group>
|
||||
<Group p="apart">
|
||||
<Text size="sm" fw={500} c="dimmed">Available Balance</Text>
|
||||
<Text size="md" c="red">
|
||||
– ₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", {
|
||||
minimumFractionDigits: 2,
|
||||
})}
|
||||
</Text>
|
||||
</Group>
|
||||
</>
|
||||
<Badge size="md" variant="white" color={accountColor} radius="md">
|
||||
{accountDetails.stAccountType}
|
||||
</Badge>
|
||||
</Group>
|
||||
|
||||
<Divider color="white" opacity={0.2} my="sm" />
|
||||
|
||||
<Box>
|
||||
<Text size="xs" c="white" opacity={0.8} mb={4}>
|
||||
Description
|
||||
</Text>
|
||||
<Text c="white">{accountDetails.stBookingNumber}</Text>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Balance Cards */}
|
||||
{isLoanAccount ? (
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="sm">
|
||||
{/* Approved Balance */}
|
||||
<Card shadow="sm" padding="md" radius="md" withBorder>
|
||||
<Group gap="xs" mb="xs">
|
||||
<ThemeIcon size={32} radius="md" variant="light" color="teal">
|
||||
<IconCircleCheck size={20} />
|
||||
</ThemeIcon>
|
||||
<Text size="xs" c="dimmed">
|
||||
Approved Balance
|
||||
</Text>
|
||||
</Group>
|
||||
<Title order={3} c="dark">
|
||||
₹
|
||||
{parseFloat(accountDetails.stApprovedAmount || "0").toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
minimumFractionDigits: 2,
|
||||
}
|
||||
)}
|
||||
</Title>
|
||||
</Card>
|
||||
|
||||
{/* Outstanding Amount */}
|
||||
<Card shadow="sm" padding="md" radius="md" withBorder>
|
||||
<Group gap="xs" mb="xs">
|
||||
<ThemeIcon size={32} radius="md" variant="light" color="red">
|
||||
<IconAlertCircle size={20} />
|
||||
</ThemeIcon>
|
||||
<Text size="xs" c="dimmed">
|
||||
Outstanding Amount
|
||||
</Text>
|
||||
</Group>
|
||||
<Title order={3} c="red">
|
||||
– ₹
|
||||
{parseFloat(accountDetails.stAvailableBalance).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
minimumFractionDigits: 2,
|
||||
}
|
||||
)}
|
||||
</Title>
|
||||
</Card>
|
||||
</SimpleGrid>
|
||||
) : (
|
||||
<Group p="apart">
|
||||
<Text size="sm" fw={500} c="dimmed">Available Balance</Text>
|
||||
<Text size="md" c="green">
|
||||
₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", {
|
||||
<Card shadow="sm" padding="md" radius="md" withBorder>
|
||||
<Group gap="xs" mb="xs">
|
||||
<ThemeIcon size={36} radius="md" variant="light" color="teal">
|
||||
<IconWallet size={24} />
|
||||
</ThemeIcon>
|
||||
<Text size="xs" c="dimmed">
|
||||
Available Balance
|
||||
</Text>
|
||||
</Group>
|
||||
<Title order={2} c="teal">
|
||||
₹
|
||||
{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", {
|
||||
minimumFractionDigits: 2,
|
||||
})}
|
||||
</Text>
|
||||
</Group>
|
||||
</Title>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Account Information */}
|
||||
<Paper shadow="sm" p="md" radius="md" withBorder>
|
||||
<Title order={5} mb="md">
|
||||
Account Information
|
||||
</Title>
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
|
||||
<Stack gap={4}>
|
||||
<Group gap="xs">
|
||||
<ThemeIcon size={18} radius="xl" variant="light" color="gray">
|
||||
<IconUser size={12} />
|
||||
</ThemeIcon>
|
||||
<Text size="xs" c="dimmed">
|
||||
Account Holder
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm">{accountDetails.custname}</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Group gap="xs">
|
||||
<ThemeIcon size={18} radius="xl" variant="light" color="gray">
|
||||
<IconCreditCard size={12} />
|
||||
</ThemeIcon>
|
||||
<Text size="xs" c="dimmed">
|
||||
Account Type
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm">{accountDetails.stAccountType}</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Group gap="xs">
|
||||
<ThemeIcon size={18} radius="xl" variant="light" color="gray">
|
||||
<IconFileText size={12} />
|
||||
</ThemeIcon>
|
||||
<Text size="xs" c="dimmed">
|
||||
Booking Number
|
||||
</Text>
|
||||
</Group>
|
||||
<Text size="sm">{accountDetails.stBookingNumber}</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Group gap="xs">
|
||||
<ThemeIcon size={18} radius="xl" variant="light" color="gray">
|
||||
<IconCircleDot size={12} />
|
||||
</ThemeIcon>
|
||||
<Text size="xs" c="dimmed">
|
||||
Status
|
||||
</Text>
|
||||
</Group>
|
||||
<Badge
|
||||
color="teal"
|
||||
variant="light"
|
||||
size="md"
|
||||
leftSection={<IconCircleDot size={10} />}
|
||||
>
|
||||
Active
|
||||
</Badge>
|
||||
</Stack>
|
||||
</SimpleGrid>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!loading && !accountDetails && (
|
||||
<Center style={{ flex: 1 }}>
|
||||
<Stack align="center" gap="md">
|
||||
<ThemeIcon size={56} radius="xl" variant="light" color="gray">
|
||||
<IconCreditCard size={28} />
|
||||
</ThemeIcon>
|
||||
<Text c="dimmed" size="sm">
|
||||
{selectedAccNo
|
||||
? "No account details available"
|
||||
: "Please select an account to view details"}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
)}
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
"use client";
|
||||
import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider, Center, Loader, Stack, Group, Card } from "@mantine/core";
|
||||
import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider, Center, Loader, Stack, Group, Card, ThemeIcon } from "@mantine/core";
|
||||
import { DateInput } from '@mantine/dates';
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import dayjs from 'dayjs';
|
||||
import { IconFileSpreadsheet, IconFileText, IconFileTypePdf } from "@tabler/icons-react";
|
||||
import { IconCopy, IconFileSpreadsheet, IconFileText, IconFileTypePdf } from "@tabler/icons-react";
|
||||
import { generatePDF } from "@/app/_components/statement_download/PdfGenerator";
|
||||
import { generateExcel } from "@/app/_components/statement_download/CsvGenerator";
|
||||
import { useMediaQuery } from "@mantine/hooks";
|
||||
@@ -169,7 +169,7 @@ export default function AccountStatementPage() {
|
||||
{/* Left side – form */}
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={500}>
|
||||
<Title order={4} mb="sm">Account Transactions</Title>
|
||||
<Title order={4} mb="sm">Transaction Filters</Title>
|
||||
<Select
|
||||
label="Select Account Number"
|
||||
placeholder="Choose account number"
|
||||
@@ -203,7 +203,7 @@ export default function AccountStatementPage() {
|
||||
{/* Right side – transaction list */}
|
||||
<Grid.Col span={{ base: 12, md: 8 }}>
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={500} style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Title order={5} mb="xs">Account Transactions</Title>
|
||||
<Title order={4} mb="xs">Account Transactions</Title>
|
||||
<Group justify="space-between" align="center" mt="sm">
|
||||
<div>
|
||||
<Text fw={500} ><strong>Account No :</strong> {selectedAccNo}</Text>
|
||||
@@ -230,9 +230,9 @@ export default function AccountStatementPage() {
|
||||
localStorage.getItem("remitter_name") || "",
|
||||
startDate ? dayjs(startDate).format("DD/MM/YYYY") : "",
|
||||
endDate ? dayjs(endDate).format("DD/MM/YYYY") : "",
|
||||
localStorage.getItem("remitter_branch_no") || "",
|
||||
localStorage.getItem("remitter_cif_no") || "",
|
||||
localStorage.getItem("remitter_address") || ""
|
||||
localStorage.getItem("remitter_branch_no") || "",
|
||||
localStorage.getItem("remitter_cif_no") || "",
|
||||
localStorage.getItem("remitter_address") || ""
|
||||
)
|
||||
}
|
||||
/>
|
||||
@@ -247,9 +247,9 @@ export default function AccountStatementPage() {
|
||||
localStorage.getItem("remitter_name") || "",
|
||||
startDate ? dayjs(startDate).format("DD/MM/YYYY") : "",
|
||||
endDate ? dayjs(endDate).format("DD/MM/YYYY") : "",
|
||||
localStorage.getItem("remitter_branch_no") || "",
|
||||
localStorage.getItem("remitter_cif_no") || "",
|
||||
localStorage.getItem("remitter_address") || ""
|
||||
localStorage.getItem("remitter_branch_no") || "",
|
||||
localStorage.getItem("remitter_cif_no") || "",
|
||||
localStorage.getItem("remitter_address") || ""
|
||||
)
|
||||
}
|
||||
/>
|
||||
@@ -278,7 +278,20 @@ export default function AccountStatementPage() {
|
||||
</Stack>
|
||||
</Center>
|
||||
) : transactions.length === 0 ? (
|
||||
<p>No transactions found.</p>
|
||||
// <p>No transactions found.</p>
|
||||
<Center style={{ flex: 1 }}>
|
||||
<Stack align="center" gap="md">
|
||||
<ThemeIcon size={56} radius="xl" variant="light" color="gray">
|
||||
<IconCopy
|
||||
size={28} />
|
||||
</ThemeIcon>
|
||||
<Text c="dimmed" size="sm">
|
||||
{selectedAccNo
|
||||
? "No account details available"
|
||||
: "Please select the filters to get the details"}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
) : isMobile ? (
|
||||
// ✅ Mobile View – Card Layout
|
||||
<Stack gap="sm">
|
||||
|
||||
@@ -126,7 +126,7 @@ export default function AccountSummary() {
|
||||
return (
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={500}>
|
||||
<Title
|
||||
order={isMobile ? 4 : 3}
|
||||
order={isMobile ? 4 : 4}
|
||||
mb="md"
|
||||
style={{ textAlign: isMobile ? "center" : "left" }}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user