LMSN-213

Client/User dapat melihat List Claim dan Total Claim

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

@@ -250,24 +250,24 @@ export default function List() {
     
     {
       id: 'start_date',
-      align: 'left',
+      align: 'center',
       label: 'Start Date',
       isSort: true,
     },
     {
       id: 'end_date',
-      align: 'left',
+      align: 'center',
       label: 'End Date',
       isSort: true,
     },
     {
       id: 'status',
-      align: 'left',
+      align: 'center',
       label: 'Status',
       isSort: true,
     },
     {
-      id: 'view',
+      id: 'action',
       align: 'center',
       label: '',
       isSort: true,
@@ -289,9 +289,7 @@ export default function List() {
       const response = await axios.get(`${corporateValue}/members?type=employee-data`, {
         params: { ...parameters },
       });
-
-      console.log(response.data.data);
-
+      
       setData(
         response.data.data.map((obj: any) => {
           return {
@@ -303,34 +301,48 @@ export default function List() {
             // ,
             status:
               obj.status === 1 ? (
-                <Button
-                  variant="outlined"
-                  color="success"
-                  size="small"
-                  sx={{cursor:'default'}}
+                <Typography
+                  variant="body2"
+                  sx={{
+                    width: 'Hug (6px)',
+                    height: 'Hug (22px)',
+                    left: '862px',
+                    top: '17px',
+                    color: '#229A16',
+                    backgroundColor: '#54D62C29',
+                    padding: '1px, 8px',
+                    borderRadius: '6px',
+                  }}
                 >
                   Active
-                </Button>
+                </Typography>
               ) : (
-                <Button
-                  variant="outlined"
-                  color="error"
-                  size="small"
-                  sx={{cursor:'default'}}
+                <Typography
+                  variant="body2"
+                  sx={{
+                    width: 'Hug (6px)',
+                    height: 'Hug (22px)',
+                    left: '862px',
+                    top: '17px',
+                    color: '#B72136',
+                    backgroundColor: '#FF484229',
+                    padding: '1px, 8px',
+                    borderRadius: '6px',
+                  }}
                 >
                   Inactive
-                </Button>
+                </Typography>
               ),
               start_date:
                 <Typography
                   sx={{
                     backgroundColor: (theme) => theme.palette.grey[300],
                     borderRadius: '4px',
-                    width: '95%',
+                    width: '70%',
                   }}
                   variant="body2"
                 >
-                  {obj.start_date ? format(new Date(obj.start_date), "dd MMMM yyyy HH:mm:ss") : ''}
+                  {obj.start_date ? format(new Date(obj.start_date), "dd MMM yyyy") : ''}
                 </Typography>
               ,
               end_date:
@@ -338,11 +350,11 @@ export default function List() {
                   sx={{
                     backgroundColor: (theme) => theme.palette.grey[300],
                     borderRadius: '4px',
-                    width: '95%',
+                    width: '70%',
                   }}
                   variant="body2"
                 >
-                  {obj.end_date ? format(new Date(obj.end_date), "d MMMM yyyy HH:mm:ss") : ''}
+                  {obj.end_date ? format(new Date(obj.end_date), "d MMM yyyy") : ''}
                 </Typography>
               ,
               fullName:
@@ -359,7 +371,7 @@ export default function List() {
                   {obj.memberId}
                 </Typography>
               ,
-              view:
+              action:
                 <TableMoreMenu actions={
                   <>
                     <MenuItem onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}>