Skip to content

Commit

Permalink
updated the cashier summary
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheTharz
TheTharz committed Jun 21, 2024
1 parent 50c65ec commit 9777ced
Showing 1 changed file with 95 additions and 84 deletions.
179 changes: 95 additions & 84 deletions src/features/cashier-management/components/update-cashier/UpdateCashierSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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) {
Expand All @@ -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>
);
};
Expand Down

0 comments on commit 9777ced

Please sign in to comment.