fix: Homepage design

wip :Integrate quick pay for own bank
wip: Design account page as discussed

src/app/(main)/accounts/account_details/page.tsx

@@ -162,7 +162,7 @@ export default function AccountDetails() {
                                 </>
                             ) : (
                                 <Group p="apart">
-                                    <Text size="sm" fw={500} c="dimmed">Balance</Text>
+                                    <Text size="sm" fw={500} c="dimmed">Available Balance</Text>
                                     <Text size="md" c="green">
                                         ₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", {
                                             minimumFractionDigits: 2,

src/app/(main)/accounts/account_statement/accountStatement.tsx

@@ -203,7 +203,7 @@ export default function AccountStatementPage() {
                                                 <td style={{ ...cellStyle, textAlign: "left", color: txn.type === "DR" ? "#e03131" : "#2f9e44" }}>
                                                     {parseFloat(txn.amount).toLocaleString("en-IN", {
                                                         minimumFractionDigits: 2,
-                                                    })}
+                                                    })} <span style={{fontSize:'10px'}}>{txn.type==="DR"?"Dr.":"Cr."}</span>
                                                 </td>
                                             </tr>
                                         ))}

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

@@ -105,7 +105,10 @@ export default function AccountSummary() {
             <tr style={{ backgroundColor: "#3385ff" }}>
               <th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
               <th style={{ ...cellStyle, textAlign: "right" }}>Account No.</th>
-              <th style={{ ...cellStyle, textAlign: "right" }}>Book Balance</th>
+              {title.includes("Deposit Accounts (INR)") ?
+                (<th style={{ ...cellStyle, textAlign: "right" }}> Credit Book Balance</th>)
+                : (<th style={{ ...cellStyle, textAlign: "right" }}>Debit Book Balance</th>)}
+
             </tr>
           </thead>
           <tbody>{rows}</tbody>

src/app/(main)/funds_transfer/page.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { Button, Group, Modal, Paper, Radio, ScrollArea, Select, Stack, Text, TextInput, Title } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
-import { generateOTP } from'@/app/OTPGenerator';
+import { generateOTP } from '@/app/OTPGenerator';
 
 interface accountData {
   stAccountNo: string;
@@ -94,7 +94,7 @@ export default function QuickPay() {
   }, [authorized]);
 
 
-  async function handleValidate(){
+  async function handleValidate() {
     if (!selectedAccNo || !beneficiaryAcc ||
       !confirmBeneficiaryAcc
     ) {
@@ -149,7 +149,7 @@ export default function QuickPay() {
     }
   };
 
-  async function handleProceed(){
+  async function handleProceed() {
     if (!selectedAccNo || !beneficiaryAcc || !confirmBeneficiaryAcc || !beneficiaryType || !amount || !remarks) {
       notifications.show({
         title: "Validation Error",
@@ -167,6 +167,16 @@ export default function QuickPay() {
       });
       return;
     }
+    if (parseInt(amount) <= 0) {
+      notifications.show({
+        title: "Invalid amount",
+        message: "Amount Can not be less than Zero",
+        color: "red",
+      });
+      return;
+
+    }
+
     if (!showOtpField && !showTxnPassword && !showConfirmModel) {
       setConfirmModel(true);
       return;
@@ -218,7 +228,7 @@ export default function QuickPay() {
           toAccountType: beneficiaryType,
           amount: amount,
           narration: remarks,
-          tpassword:txnPassword,
+          tpassword: txnPassword,
         }),
       });
       const result = await res.json();
@@ -268,7 +278,7 @@ export default function QuickPay() {
           <Text><strong>Payee Account:</strong> {beneficiaryAcc}</Text>
           <Text><strong>Payee Name:</strong> {beneficiaryName}</Text>
           <Text><strong>Amount:</strong> ₹ {amount}</Text>
-          <Text><strong>Remarks:</strong> ₹ {remarks}</Text>
+          <Text><strong>Remarks:</strong>  {remarks}</Text>
         </Stack>
         <Group justify="flex-end" mt="md">
           <Button variant="default" onClick={() => setConfirmModel(false)}>Cancel</Button>
@@ -303,137 +313,137 @@ export default function QuickPay() {
         </Radio.Group>
 
         {bankType === "own" ? (
-            <div style={{ maxHeight: "320px", overflowY: "auto" }}>
-              <Stack gap="xs">
-                <Group grow>
-                  <Select
-                    label="Select Debit Account Number"
-                    placeholder="Choose account number"
-                    data={accountOptions}
-                    value={selectedAccNo}
-                    onChange={setSelectedAccNo}
-                    withAsterisk
-                    readOnly={isVisibilityLocked}
-                  />
-                  <TextInput
-                    label="Payee Account No"
-                    value={showPayeeAcc ? beneficiaryAcc : getFullMaskedAccount(beneficiaryAcc)}
-                    onChange={(e) => {
-                      const value = e.currentTarget.value;
-                      if (/^\d*$/.test(value)) {
-                        setBeneficiaryAcc(value);
-                        setShowPayeeAcc(true);
-                      }
-                    }}
-                    onBlur={() => setShowPayeeAcc(false)}
-                    onFocus={() => setShowPayeeAcc(true)}
-                    withAsterisk
-                    readOnly={isVisibilityLocked}
-                  />
+          <div style={{ maxHeight: "320px", overflowY: "auto" }}>
+            <Stack gap="xs">
+              <Group grow>
+                <Select
+                  label="Select Debit Account Number"
+                  placeholder="Choose account number"
+                  data={accountOptions}
+                  value={selectedAccNo}
+                  onChange={setSelectedAccNo}
+                  withAsterisk
+                  readOnly={isVisibilityLocked}
+                />
+                <TextInput
+                  label="Payee Account No"
+                  value={showPayeeAcc ? beneficiaryAcc : getFullMaskedAccount(beneficiaryAcc)}
+                  onChange={(e) => {
+                    const value = e.currentTarget.value;
+                    if (/^\d*$/.test(value)) {
+                      setBeneficiaryAcc(value);
+                      setShowPayeeAcc(true);
+                    }
+                  }}
+                  onBlur={() => setShowPayeeAcc(false)}
+                  onFocus={() => setShowPayeeAcc(true)}
+                  withAsterisk
+                  readOnly={isVisibilityLocked}
+                />
 
-                  <TextInput
-                    label="Confirm Payee Account No"
-                    value={confirmBeneficiaryAcc}
-                    onChange={(e) => {
-                      const value = e.currentTarget.value;
-                      if (/^\d*$/.test(value)) {
-                        setConfirmBeneficiaryAcc(value);
-                      }
-                    }}
-                    // onCopy={(e) => e.preventDefault()}
-                    // onPaste={(e) => e.preventDefault()}
-                    // onCut={(e) => e.preventDefault()}
-                    withAsterisk
-                    readOnly={isVisibilityLocked}
-                  />
+                <TextInput
+                  label="Confirm Payee Account No"
+                  value={confirmBeneficiaryAcc}
+                  onChange={(e) => {
+                    const value = e.currentTarget.value;
+                    if (/^\d*$/.test(value)) {
+                      setConfirmBeneficiaryAcc(value);
+                    }
+                  }}
+                  // onCopy={(e) => e.preventDefault()}
+                  // onPaste={(e) => e.preventDefault()}
+                  // onCut={(e) => e.preventDefault()}
+                  withAsterisk
+                  readOnly={isVisibilityLocked}
+                />
+              </Group>
+              <Group justify="space-between" >
+                <Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
+                  {selectedAccount ? selectedAccount.stAvailableBalance : 0}
+                </Text>
+                <Group justify="center">
+                  {validationStatus === "error" && <Text size="sm" fw={700} ta="right" c="red">{beneficiaryName}</Text>}
                 </Group>
-                <Group justify="space-between" >
-                  <Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
-                    {selectedAccount ? selectedAccount.stAvailableBalance : 0}
-                  </Text>
-                  <Group justify="center">
-                    {validationStatus === "error" && <Text size="sm" fw={700} ta="right" c="red">{beneficiaryName}</Text>}
-                  </Group>
-                </Group>
-                <Group grow>
-                  <TextInput
-                    label="Payee Name"
-                    value={validationStatus === "success" && beneficiaryName ? beneficiaryName : ""}
-                    // disabled
-                    readOnly
-                  />
+              </Group>
+              <Group grow>
+                <TextInput
+                  label="Payee Name"
+                  value={validationStatus === "success" && beneficiaryName ? beneficiaryName : ""}
+                  // disabled
+                  readOnly
+                />
 
-                  <Select
-                    label="Beneficiary A/c Type"
-                    placeholder="Select type"
-                    data={["Savings", "Current"]}
-                    value={beneficiaryType}
-                    onChange={setBeneficiaryType}
-                    withAsterisk
-                    readOnly={showOtpField}
-                  />
+                <Select
+                  label="Beneficiary A/c Type"
+                  placeholder="Select type"
+                  data={["Savings", "Current"]}
+                  value={beneficiaryType}
+                  onChange={setBeneficiaryType}
+                  withAsterisk
+                  readOnly={showOtpField}
+                />
 
+                <TextInput
+                  label="Amount"
+                  type="number"
+                  value={amount}
+                  onChange={(e) => setAmount(e.currentTarget.value)}
+                  error={
+                    selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
+                      "Amount exceeds available balance" : false}
+                  withAsterisk
+                  readOnly={showOtpField}
+                />
+
+                <TextInput
+                  label="Remarks"
+                  placeholder="Enter remarks"
+                  value={remarks}
+                  onChange={(e) => setRemarks(e.currentTarget.value)}
+                  withAsterisk
+                  readOnly={showOtpField}
+                />
+              </Group>
+              <Group grow>
+                {showOtpField && (
                   <TextInput
-                    label="Amount"
-                    type="number"
-                    value={amount}
-                    onChange={(e) => setAmount(e.currentTarget.value)}
-                    error={
-                      selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
-                        "Amount exceeds available balance" : false}
+                    label="OTP"
+                    placeholder="Enter OTP"
+                    type="otp"
+                    value={otp}
+                    onChange={(e) => setOtp(e.currentTarget.value)}
                     withAsterisk
-                    readOnly={showOtpField}
+                    disabled={showTxnPassword}
                   />
-
+                )}
+                {showTxnPassword && (
                   <TextInput
-                    label="Remarks"
-                    placeholder="Enter remarks"
-                    value={remarks}
-                    onChange={(e) => setRemarks(e.currentTarget.value)}
+                    label="Transaction Password"
+                    placeholder="Enter transaction password"
+                    type="password"
+                    value={txnPassword}
+                    onChange={(e) => setTxnPassword(e.currentTarget.value)}
                     withAsterisk
-                    readOnly={showOtpField}
                   />
-                </Group>
-                <Group grow>
-                  {showOtpField && (
-                    <TextInput
-                      label="OTP"
-                      placeholder="Enter OTP"
-                      type="otp"
-                      value={otp}
-                      onChange={(e) => setOtp(e.currentTarget.value)}
-                      withAsterisk
-                      disabled={showTxnPassword}
-                    />
-                  )}
-                  {showTxnPassword && (
-                    <TextInput
-                      label="Transaction Password"
-                      placeholder="Enter transaction password"
-                      type="password"
-                      value={txnPassword}
-                      onChange={(e) => setTxnPassword(e.currentTarget.value)}
-                      withAsterisk
-                    />
-                  )}
-                </Group>
+                )}
+              </Group>
 
-                <Group justify="flex-start">
-                  <Button variant="filled" color="blue" onClick={handleValidate} disabled={validationStatus === "success"}>
-                    Validate
-                  </Button>
-                  <Button
-                    variant="filled"
-                    color="blue"
-                    onClick={handleProceed}
-                    loading={isSubmitting}
-                    disabled={validationStatus !== "success"}
-                  >
-                    {!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
-                  </Button>
-                </Group>
-              </Stack>
-            </div>
+              <Group justify="flex-start">
+                <Button variant="filled" color="blue" onClick={handleValidate} disabled={validationStatus === "success"}>
+                  Validate
+                </Button>
+                <Button
+                  variant="filled"
+                  color="blue"
+                  onClick={handleProceed}
+                  loading={isSubmitting}
+                  disabled={validationStatus !== "success"}
+                >
+                  {!showTxnPassword && showOtpField ? "Validate the OTP" : showTxnPassword ? "Proceed to Pay" : "Proceed"}
+                </Button>
+              </Group>
+            </Stack>
+          </div>
         ) : (
           <Text size="lg" mt="md">
             hii