update componen label

frontend/client-portal/src/pages/EmployeeData/List.tsx

@@ -33,12 +33,13 @@ import palette from '../../theme/palette';
 import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
 import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
 import { useSearchParams, useNavigate, Link } from 'react-router-dom';
-import { fDate } from '../../utils/formatTime';
+import { fDate, fDateSuffix } from '../../utils/formatTime';
 import { format } from 'date-fns';
 import Typography from '@mui/material/Typography';
 import TableMoreMenu from '../../components/table/TableMoreMenu';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
+import Label from '../../components/Label';
 
 
 /* ---------------------------------- types --------------------------------- */
@@ -301,61 +302,23 @@ export default function List() {
             // ,
             status:
               obj.status === 1 ? (
-                <Typography
-                  variant="body2"
-                  sx={{
-                    width: 'Hug (6px)',
-                    height: 'Hug (22px)',
-                    left: '862px',
-                    top: '17px',
-                    color: '#229A16',
-                    backgroundColor: '#54D62C29',
-                    padding: '1px, 8px',
-                    borderRadius: '6px',
-                  }}
-                >
+                <Label color='success'>
                   Active
-                </Typography>
+                </Label>
               ) : (
-                <Typography
-                  variant="body2"
-                  sx={{
-                    width: 'Hug (6px)',
-                    height: 'Hug (22px)',
-                    left: '862px',
-                    top: '17px',
-                    color: '#B72136',
-                    backgroundColor: '#FF484229',
-                    padding: '1px, 8px',
-                    borderRadius: '6px',
-                  }}
-                >
+                <Label color='error'>
                   Inactive
-                </Typography>
+                </Label>
               ),
               start_date:
-                <Typography
-                  sx={{
-                    backgroundColor: (theme) => theme.palette.grey[300],
-                    borderRadius: '4px',
-                    width: '70%',
-                  }}
-                  variant="body2"
-                >
-                  {obj.start_date ? format(new Date(obj.start_date), "dd MMM yyyy") : ''}
-                </Typography>
+                <Label>
+                  {obj.start_date ? fDateSuffix(obj.start_date) : ''}
+                </Label>
               ,
               end_date:
-                <Typography
-                  sx={{
-                    backgroundColor: (theme) => theme.palette.grey[300],
-                    borderRadius: '4px',
-                    width: '70%',
-                  }}
-                  variant="body2"
-                >
-                  {obj.end_date ? format(new Date(obj.end_date), "d MMM yyyy") : ''}
-                </Typography>
+                <Label>
+                  {obj.end_date ? fDateSuffix(obj.end_date) : ''}
+                </Label>
               ,
               fullName:
                 <Typography