updated the cashier details ui

Life-Pill · Jun 21, 2024 · 50c65ec · 50c65ec
1 parent d4c93ca
commit 50c65ec
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 72 deletions.
diff --git a/src/features/cashier-management/components/add-cashier/CashierDetails.tsx b/src/features/cashier-management/components/add-cashier/CashierDetails.tsx
@@ -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,
@@ -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,
@@ -277,7 +279,7 @@ const CashierDetails = () => {
             htmlFor='baseSalary'
             className='block text-sm font-medium text-black mt-4'
           >
-            Base Salary
+            Base Salary (LKR)
           </label>
           <input
             type='number'

diff --git a/src/features/cashier-management/components/add-cashier/CashierDetailsSummary.tsx b/src/features/cashier-management/components/add-cashier/CashierDetailsSummary.tsx
@@ -12,63 +12,18 @@ function CashierDetailsSummary() {
   };
 
   return (
-    <div>
+    <div className='flex flex-row justify-evenly items-center max-h-screen p-2'>
       {/* Image Section */}
-      <p className='text-lg font-bold mb-2'>
-        Employee {cashierDetails.employerFirstName}
-      </p>
-
-      <img
-        src={cashierDetails.profileImageUrl} // Assuming profileImage is an array of strings (URLs)
-        alt='Profile'
-        className='h-32 w-32 rounded-full object-cover mr-2'
-      />
-
-      {/* Personal Information Section */}
-      <div className='flex flex-row justify-center items-center'>
-        <div>
-          <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>
-        <div>
+      <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'>
@@ -94,24 +49,60 @@ function CashierDetailsSummary() {
             </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>
       </div>
 
-      {/* Buttons */}
-      <div className='flex justify-center items-center'>
-        <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}
-        >
-          Go To Bank Details
-        </button>
+      {/* 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>
+
+      {/* Buttons */}
     </div>
   );
 }