Skip to content

Commit

Permalink
Merge pull request #56 from Life-Pill/dev-test-frontend
Browse files Browse the repository at this point in the history 
UI Enhancements and New Components for Cashier Details
  • Loading branch information
@PramithaMJ
PramithaMJ committed Jun 21, 2024
2 parents 6fa30c6 + 9777ced commit 83b7448
Show file tree
Hide file tree
Showing 15 changed files with 486 additions and 216 deletions.
4 changes: 2 additions & 2 deletions src/features/branch-sales-summary/layouts/BranchSalesSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import React, { useEffect, useState } from 'react';
import useSalesSummary from '../services/SalesSummaryService';
import SalesChart from '../components/SalesChart';
import OrdersChart from '../components/OrdersChart';
import salesSummary from '../utils/FakeData';
// import salesSummary from '../utils/FakeData';
import { getToday } from '../utils/getToday';
import { generateMonthlySalesSummary } from '../utils/monthlySalesSummary';
import { exportToExcel, exportToPDF } from '../utils/exportUtils';
import { AiFillFileExcel, AiFillFilePdf } from 'react-icons/ai';

function BranchSalesSummary() {
const { getSalesSummary } = useSalesSummary();
const { getSalesSummary, salesSummary } = useSalesSummary();
const [startDate, setStartDate] = useState('2023-01-01');
const [endDate, setEndDate] = useState(getToday());
const [filterByMonth, setFilterByMonth] = useState(false);
Expand Down
4 changes: 2 additions & 2 deletions src/features/cashier-management/components/add-cashier/CashierBankDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const CashierBankDetails = () => {
employerId: cashierDetails.employerId,
monthlyPayment: cashierDetails.employerSalary,
});
}, [cashierBankDetails]);
}, []);

const goToSummary = () => {
console.log('Summary', cashierDetails);
Expand Down Expand Up @@ -132,7 +132,7 @@ const CashierBankDetails = () => {
onClick={goToSummary}
disabled={loading}
>
{loading ? 'Loading...' : 'Update'}
{loading ? 'Loading...' : 'Create Bank Details'}
</button>
</div>
</div>
Expand Down
9 changes: 6 additions & 3 deletions src/features/cashier-management/components/add-cashier/CashierDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ const CashierDetails = () => {
id='telephone'
className='mt-1 p-2 border-gray rounded-md w-64'
value={cashierDetails.employerPhone}
accept='tel'
onChange={(e) =>
setCashierDetails({
...cashierDetails,
Expand Down Expand Up @@ -265,6 +266,7 @@ const CashierDetails = () => {
id='role'
className='mt-1 p-2 border-gray rounded-md w-64'
value={cashierDetails.role}
placeholder='CASHIER, OTHER'
onChange={(e) =>
setCashierDetails({
...cashierDetails,
Expand All @@ -277,12 +279,13 @@ const CashierDetails = () => {
htmlFor='baseSalary'
className='block text-sm font-medium text-black mt-4'
>
Base Salary
Base Salary (LKR)
</label>
<input
type='text'
type='number'
id='baseSalary'
className='mt-1 p-2 border-gray rounded-md w-64'
accept='number'
value={cashierDetails.employerSalary}
onChange={(e) =>
setCashierDetails({
Expand Down Expand Up @@ -363,7 +366,7 @@ const CashierDetails = () => {
onClick={goToBankDetails}
disabled={loading}
>
{loading ? 'Loading...' : 'Create'}
{loading ? 'Loading...' : 'Create Employee'}
</button>

<button
Expand Down
167 changes: 88 additions & 79 deletions src/features/cashier-management/components/add-cashier/CashierDetailsSummary.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { ComponentState, useCashierContext } from '../../layout/AddCashier';
import { Link } from 'react-router-dom';
import TableRow from '../../../../shared/table_row/TableRow';

function CashierDetailsSummary() {
const { cashierDetails, setCurrentComponent, cashierBankDetails } =
Expand All @@ -11,89 +12,97 @@ function CashierDetailsSummary() {
};

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={cashierDetails.profileImageUrl} // Assuming profileImage is an array of strings (URLs)
alt='Profile'
className='h-64 w-64 rounded-full object-cover mr-2'
/>
<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}
/>

{/* Example of including an image */}
<div className='flex items-center mb-4'>
<img
src={cashierDetails.profileImageUrl} // Assuming profileImage is an array of strings (URLs)
alt='Profile'
className='h-16 w-16 rounded-full object-cover mr-2'
/>
<div>
<p className='font-semibold'>
{cashierDetails.employerFirstName}{' '}
{cashierDetails.employerLastName}
</p>
<p>{cashierDetails.employerEmail}</p>
</div>
<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'>Finish</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={goToBankDetails}
>
Back
</button>
</div>

<p>
<span className='font-semibold'>Nickname:</span>{' '}
{cashierDetails.employerNicName}
</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.toString().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}
</p>
<p>
<span className='font-semibold'>Pin:</span> {cashierDetails.pin}
</p>
<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>
<p>
<span className='font-semibold'>Additional Notes:</span>{' '}
{cashierBankDetails.employerDescription}
</p>

{/* Personal Information Section */}

<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'>Done</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={goToBankDetails}
>
Go To Bank Details
</button>

{/* Buttons */}
</div>
);
}
Expand Down
Loading

0 comments on commit 83b7448

Please sign in to comment.