From 9777cedefd1f22de79561ddb4fd3dd7e87cd09ef Mon Sep 17 00:00:00 2001
From: Tharindu Jayawardhana <tharinduimalka915@gmail.com>
Date: Fri, 21 Jun 2024 19:15:50 +0530
Subject: [PATCH] updated the cashier summary

---
 .../update-cashier/UpdateCashierSummary.tsx   | 179 ++++++++++--------
 1 file changed, 95 insertions(+), 84 deletions(-)

diff --git a/src/features/cashier-management/components/update-cashier/UpdateCashierSummary.tsx b/src/features/cashier-management/components/update-cashier/UpdateCashierSummary.tsx
index fef2394..dd26646 100644
--- a/src/features/cashier-management/components/update-cashier/UpdateCashierSummary.tsx
+++ b/src/features/cashier-management/components/update-cashier/UpdateCashierSummary.tsx
@@ -4,6 +4,7 @@ import useBankCRUDService from '../../services/BankDetailsCRUDService';
 import useCashierCRUDService from '../../services/CashierCRUDService';
 import { useEffect } from 'react';
 import { toast } from 'react-toastify';
+import TableRow from '../../../../shared/table_row/TableRow';
 
 const UpdateCashierSummary = () => {
   const { setCurrentComponent } = useCashierContext();
@@ -16,8 +17,12 @@ const UpdateCashierSummary = () => {
   //
   //
   const { cashierBankDetails, fetchBankDetailsById } = useBankCRUDService();
-  const { cashierDetails, fetchCashierById, fetchImageOfEmployer,profileImageUrl } =
-    useCashierCRUDService();
+  const {
+    cashierDetails,
+    fetchCashierById,
+    fetchImageOfEmployer,
+    profileImageUrl,
+  } = useCashierCRUDService();
 
   useEffect(() => {
     if (employerId) {
@@ -30,94 +35,100 @@ const UpdateCashierSummary = () => {
   }, []);
 
   return (
-    <div className='grid grid-cols-2 gap-4'>
-      <div className='bg-gray-100 p-4 rounded-lg'>
-        <p className='text-lg font-bold mb-2'>Personal Information</p>
+    <div className='flex flex-row justify-evenly items-center max-h-screen p-2'>
+      {/* Image Section */}
+      <div className='flex justify-center items-center flex-col gap-2'>
         <img
-            src={
-              profileImageUrl ||
-              'https://static-00.iconduck.com/assets.00/person-icon-1901x2048-a9h70k71.png'
-            }
-            alt='Profile'
-            className='w-64 h-64 rounded-full'
-          />
-        <p>
-          <span className='font-semibold'>Name:</span>{' '}
-          {cashierDetails.employerFirstName} {cashierDetails.employerLastName}
-        </p>
-        <p>
-          <span className='font-semibold'>Nickname:</span>{' '}
-          {cashierDetails.employerNicName}
-        </p>
-        <p>
-          <span className='font-semibold'>Email:</span>{' '}
-          {cashierDetails.employerEmail}
-        </p>
-        <p>
-          <span className='font-semibold'>Phone Number:</span>{' '}
-          {cashierDetails.employerPhone}
-        </p>
-        <p>
-          <span className='font-semibold'>Address:</span>{' '}
-          {cashierDetails.employerAddress}
-        </p>
-        <p>
-          <span className='font-semibold'>Date of Birth:</span>{' '}
-          {cashierDetails.dateOfBirth?.slice(0, 10)}
-        </p>
-      </div>
-      <div className='bg-gray-100 p-4 rounded-lg'>
-        <p className='text-lg font-bold mb-2'>Employment Details</p>
-        <p>
-          <span className='font-semibold'>Role:</span> {cashierDetails.role}
-        </p>
-        <p>
-          <span className='font-semibold'>Assign Branch:</span>{' '}
-          {cashierDetails.branchId}
-        </p>
-        <p>
-          <span className='font-semibold'>Base Salary:</span>{' '}
-          {cashierDetails.employerSalary}
+          src={
+            profileImageUrl ||
+            'https://static-00.iconduck.com/assets.00/person-icon-1901x2048-a9h70k71.png'
+          }
+          alt='Profile'
+          className='w-64 h-64 rounded-full'
+        />
+        <p className='text-lg font-bold mb-2'>
+          Employee {cashierDetails.employerFirstName}
         </p>
+        <div className='flex items-center justify-center flex-col gap-2'>
+          {/* Employment Details Section */}
+          <p className='text-lg font-bold mb-2'>Bank Details</p>
+          <table className='min-w-full divide-y divide-gray-200'>
+            <tbody className='bg-white divide-y divide-gray-200'>
+              <TableRow
+                label='Account Number'
+                value={cashierBankDetails.bankAccountNumber}
+              />
+              <TableRow label='Bank Name' value={cashierBankDetails.bankName} />
+              <TableRow
+                label='Branch Name'
+                value={cashierBankDetails.bankBranchName}
+              />
 
-        <p>
-          <span className='font-semibold'>Bank Account Number:</span>{' '}
-          {cashierBankDetails.bankAccountNumber}
-        </p>
-        <p>
-          <span className='font-semibold'>Bank Name:</span>{' '}
-          {cashierBankDetails.bankName}
-        </p>
-        <p>
-          <span className='font-semibold'>Branch Name:</span>{' '}
-          {cashierBankDetails.bankBranchName}
-        </p>
+              <TableRow
+                label='Base Salary (LKR)'
+                value={cashierBankDetails.monthlyPayment}
+              />
+              <TableRow
+                label='Additional Notes'
+                value={cashierBankDetails.employerDescription}
+              />
+            </tbody>
+          </table>
+        </div>
+        <div className='flex justify-center items-center gap-4'>
+          <button
+            type='button'
+            className='py-2.5 px-5 me-2 mb-2 text-sm font-medium text-slate-900 focus:outline-none bg-white rounded-lg border border-gray hover:bg-gray'
+          >
+            <Link to='/manager-dashboard/Cashiers'>Continue</Link>
+          </button>
+          <button
+            type='button'
+            className='text-white bg-blueDarker hover:bg-blue font-medium py-2.5 px-5 me-2 mb-2 rounded-lg'
+            onClick={goToBack}
+          >
+            Back
+          </button>
+        </div>
+      </div>
 
-        <p>
-          <span className='font-semibold'>Additional Notes:</span>{' '}
-          {cashierBankDetails.employerDescription}
-        </p>
+      {/* Personal Information Section */}
 
-        <p>
-          <span className='font-semibold'>Monthly Payment:</span>{' '}
-          {cashierBankDetails.monthlyPayment}
-        </p>
+      <div className='flex justify-center items-center flex-col gap-2'>
+        <p className='text-lg font-bold mb-2'>Employment Information</p>
+        <table className='min-w-full divide-y divide-gray-200'>
+          <tbody className='bg-white divide-y divide-gray-200'>
+            <TableRow label='EmployerID' value={cashierDetails.employerId} />
+            <TableRow
+              label='First Name'
+              value={cashierDetails.employerFirstName}
+            />
+            <TableRow
+              label='Last Name'
+              value={cashierDetails.employerLastName}
+            />
+            <TableRow label='Nic Name' value={cashierDetails.employerNicName} />
+            <TableRow label='NIC Number' value={cashierDetails.employerNic} />
+            <TableRow label='E-mail' value={cashierDetails.employerEmail} />
+            <TableRow
+              label='Phone Number'
+              value={cashierDetails.employerPhone}
+            />
+            <TableRow label='Address' value={cashierDetails.employerAddress} />
+            <TableRow
+              label='Date of Birth'
+              value={cashierDetails.dateOfBirth.toString().slice(0, 10)}
+            />
+            <TableRow
+              label='Gender'
+              value={cashierDetails.gender.toUpperCase()}
+            />
+            <TableRow label='Role' value={cashierDetails.role.toUpperCase()} />
+          </tbody>
+        </table>
       </div>
-      <button
-        type='button'
-        className='py-2.5 px-5 me-2 mb-2 text-sm font-medium text-slate-900 focus:outline-none bg-white rounded-lg border border-gray hover:bg-gray'
-      >
-        <Link to='/manager-dashboard/Cashiers'>
-          Continue to cashier manager
-        </Link>
-      </button>
-      <button
-        type='button'
-        className='text-white bg-blueDarker hover:bg-blue font-medium py-2.5 px-5 me-2 mb-2 rounded-lg'
-        onClick={goToBack}
-      >
-        Go To Bank Details
-      </button>
+
+      {/* Buttons */}
     </div>
   );
 };