Fix: design and few function
This commit is contained in:
@@ -108,7 +108,7 @@ export default function AccountDetails() {
|
||||
if (!authorized) return null;
|
||||
|
||||
return (
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={400}>
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={500}>
|
||||
<Title order={3} mb="md">
|
||||
Account Details
|
||||
</Title>
|
||||
|
||||
@@ -168,7 +168,7 @@ export default function AccountStatementPage() {
|
||||
<Grid gutter="md">
|
||||
{/* Left side – form */}
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={400}>
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={500}>
|
||||
<Title order={4} mb="sm">Account Transactions</Title>
|
||||
<Select
|
||||
label="Select Account Number"
|
||||
@@ -202,7 +202,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={400} style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={500} style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Title order={5} mb="xs">Account Transactions</Title>
|
||||
<Group justify="space-between" align="center" mt="sm">
|
||||
<div>
|
||||
@@ -291,13 +291,68 @@ export default function AccountStatementPage() {
|
||||
) : (
|
||||
// ✅ Desktop View – Table Layout
|
||||
<Table style={{ borderCollapse: "collapse", width: "100%" }}>
|
||||
<thead style={{ backgroundColor: "#3385ff" }}>
|
||||
{/* <tr>
|
||||
<th style={{ ...cellStyle, textAlign: "left", color: "white" }}>Narration</th>
|
||||
<th style={{ ...cellStyle, textAlign: "left", color: "white" }}>Date</th>
|
||||
<th style={{ ...cellStyle, textAlign: "right", color: "white" }}>Amount (₹)</th>
|
||||
<th style={{ ...cellStyle, textAlign: "right", color: "white" }}>Balance (₹)</th>
|
||||
</tr> */}
|
||||
<thead
|
||||
style={{
|
||||
background: "linear-gradient(56deg, rgba(24,140,186,1) 0%, rgba(62,230,132,1) 86%)",
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
zIndex: 5,
|
||||
}}
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
style={{
|
||||
...cellStyle,
|
||||
textAlign: "left",
|
||||
color: "white",
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
// background: "linear-gradient(56deg, rgba(24,140,186,1) 0%, rgba(62,230,132,1) 86%)",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
Narration
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
...cellStyle,
|
||||
textAlign: "left",
|
||||
color: "white",
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
// background: "linear-gradient(56deg, rgba(24,140,186,1) 0%, rgba(62,230,132,1) 86%)",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
Date
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
...cellStyle,
|
||||
textAlign: "right",
|
||||
color: "white",
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
// background: "linear-gradient(56deg, rgba(24,140,186,1) 0%, rgba(62,230,132,1) 86%)",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
Amount (₹)
|
||||
</th>
|
||||
<th
|
||||
style={{
|
||||
...cellStyle,
|
||||
textAlign: "right",
|
||||
color: "white",
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
// background: "linear-gradient(56deg, rgba(24,140,186,1) 0%, rgba(62,230,132,1) 86%)",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
Balance (₹)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactions.map((txn, i) => (
|
||||
|
||||
@@ -16,7 +16,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
const [drawerOpened, setDrawerOpened] = useState(false);
|
||||
|
||||
const links = [
|
||||
{ label: "Account Summary", href: "/accounts" },
|
||||
{ label: " Account Summary", href: "/accounts" },
|
||||
{ label: "Account Statement ", href: "/accounts/account_statement" },
|
||||
{ label: "Account Details", href: "/accounts/account_details" },
|
||||
];
|
||||
@@ -98,7 +98,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
color="white"
|
||||
/>
|
||||
<Text fw={600} c="white">
|
||||
Send Money
|
||||
Accounts
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -131,7 +131,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
style={{ borderRadius: "50%" }}
|
||||
/>
|
||||
<Text fw={700} ml="10px" style={{ fontSize: "19px", color: "#1565c0" }}>
|
||||
Send Money
|
||||
Accounts
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -106,7 +106,7 @@ export default function AccountSummary() {
|
||||
<ScrollArea>
|
||||
<Table style={{ borderCollapse: "collapse", width: "100%" }}>
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: "#3385ff" }}>
|
||||
<tr style={{ background: "linear-gradient(56deg, rgba(24,140,186,1) 0%, rgba(62,230,132,1) 86%)", }}>
|
||||
<th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
|
||||
<th style={{ ...cellStyle, textAlign: "right" }}>Account No.</th>
|
||||
{title.includes("Deposit Accounts (INR)") ?
|
||||
@@ -124,7 +124,7 @@ export default function AccountSummary() {
|
||||
if (!authorized) return null;
|
||||
|
||||
return (
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={400}>
|
||||
<Paper shadow="sm" radius="md" p="md" withBorder h={500}>
|
||||
<Title
|
||||
order={isMobile ? 4 : 3}
|
||||
mb="md"
|
||||
@@ -133,7 +133,7 @@ export default function AccountSummary() {
|
||||
Account Summary
|
||||
</Title>
|
||||
|
||||
{/* ✅ Responsive layout: Group for desktop, Stack for mobile */}
|
||||
{/* Responsive layout: Group for desktop, Stack for mobile */}
|
||||
{isMobile ? (
|
||||
<Stack gap="md">
|
||||
{depositAccounts.length > 0 &&
|
||||
|
||||
Reference in New Issue
Block a user