Update Hospital portal

frontend/hospital-portal/public/lang/en-US.json

@@ -57,5 +57,7 @@
   "txtCancel": "Cancel",
   "txtDecline": "Decline",
   "txtApprove": "Approve",
-  "txtDialogConfirmation": "Are you sure you want to proceed with this action?"
+  "txtDialogConfirmation": "Are you sure you want to proceed with this action?",
+  "txtStartDate": "Start Date",
+  "txtEndDate": "End Date"
 }

frontend/hospital-portal/public/lang/id-ID.json

@@ -57,5 +57,7 @@
   "txtCancel": "Batal",
   "txtDecline": "Tolak",
   "txtApprove": "Terima",
-  "txtDialogConfirmation": "Apakah Anda yakin ingin melanjutkan tindakan ini?"
+  "txtDialogConfirmation": "Apakah Anda yakin ingin melanjutkan tindakan ini?",
+  "txtStartDate": "Tanggal Mulai",
+  "txtEndDate": "Tanggal Akhir"
 }

frontend/hospital-portal/src/components/Table.tsx

@@ -26,6 +26,10 @@ import {
   linearProgressClasses,
 } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
+
+import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
+
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 /* ---------------------------------- axios --------------------------------- */
 import axios from '../utils/axios';
 /* ---------------------------------- react --------------------------------- */
@@ -297,7 +301,7 @@ export default function Table<T>({
             {/* Start date */}
             {filterStartDate && filterStartDate.useFilter ? (
               <Grid item xs={12} lg={2} xl={2}>
-              <form onChange={(event) => filterStartDate.handleStartDateChange(event)}>
+              {/* <form onChange={(event) => filterStartDate.handleStartDateChange(event)}>
                 <TextField
                   id="date-input"
                   type="date"
@@ -309,7 +313,18 @@ export default function Table<T>({
                     shrink: true,
                   }}
                 />
-              </form>
+              </form> */}
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DatePicker
+                  label={localeData.txtStartDate}
+                  value={filterStartDate.startDate}
+                  onChange={(newValue:any) => {
+                    filterStartDate.setStartDate(  (newValue));
+                  }}
+                  inputFormat="dd-MM-yyyy"
+                  renderInput={(params) => <TextField sx={{width:'40%'}} {...params} required/>}
+                />
+              </LocalizationProvider>
             </Grid>
             ) : null }
 
@@ -317,7 +332,7 @@ export default function Table<T>({
 
             {filterEndDate && filterEndDate.useFilter ? (
               <Grid item xs={12} lg={2} xl={2}>
-              <form onChange={(event) => filterEndDate.handleEndDateChange(event)}>
+              {/* <form onChange={(event) => filterEndDate.handleEndDateChange(event)}>
                 <TextField
                   id="date-input"
                   type="date"
@@ -329,7 +344,18 @@ export default function Table<T>({
                     shrink: true,
                   }}
                 />
-              </form>
+              </form> */}
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DatePicker
+                  label={localeData.txtEndDate}
+                  value={filterEndDate.endDate}
+                  onChange={(newValue:any) => {
+                    filterEndDate.setEndDate(  (newValue));
+                  }}
+                  inputFormat="dd-MM-yyyy"
+                  renderInput={(params) => <TextField sx={{width:'40%'}} {...params} required/>}
+                />
+              </LocalizationProvider>
             </Grid>
             ) : null }
 

frontend/hospital-portal/src/sections/claim/TableList.tsx

@@ -304,12 +304,12 @@ export default function TableList() {
       label: localeData.txtStatus,
       isSort: true,
     },
-    {
+    // {
-      id: 'action',
+    //   id: 'action',
-      align: 'right',
+    //   align: 'right',
-      label: '',
+    //   label: '',
-      isSort: false,
+    //   isSort: false,
-    },
+    // },
   ];
   
 
@@ -363,15 +363,15 @@ export default function TableList() {
                 {obj.submission_date ? fDateSuffix(obj.submission_date) : ''}
               </Label>
             ,
-            action:
+            // action:
-                <TableMoreMenu actions={
+            //     <TableMoreMenu actions={
-                  <>
+            //       <>
-                    <MenuItem onClick={() => navigate ('/claim/detail/'+obj.claim_request_id)}>
+            //         <MenuItem onClick={() => navigate ('/claim/detail/'+obj.claim_request_id)}>
-                      <Iconify icon="eva:eye-fill" />
+            //           <Iconify icon="eva:eye-fill" />
-                      View
+            //           View
-                    </MenuItem>
+            //         </MenuItem>
-                  </>
+            //       </>
-                 } />
+            //      } />
         }))
       );
 

frontend/hospital-portal/src/sections/dashboard/TableListReqLog.tsx

@@ -239,7 +239,7 @@ export default function TableList() {
   };
 
   // handle start date
-  const [startDateValue, setStartDateValue] = useState('');
+  const [startDateValue, setStartDateValue] = useState(null);
 
   const handleStartDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -263,7 +263,7 @@ export default function TableList() {
   };
 
   // handle end date
-  const [endDateValue, setEndDateValue] = useState('');
+  const [endDateValue, setEndDateValue] = useState(null);
 
   const handleEndDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -494,8 +494,8 @@ export default function TableList() {
           searchs={searchs}
           filterStatus={filterStatus}
           selected={selected}
-          // filterStartDate={filterStartDate}
+          //filterStartDate={filterStartDate}
-          // filterEndDate={filterEndDate}
+          //filterEndDate={filterEndDate}
         />
       <MuiDialog
         title={{name: nameMember}}