Merge remote-tracking branch 'origin/staging' into origin/production

frontend/client-portal/src/pages/AlarmCenter/ListMember.tsx

@@ -1,5 +1,5 @@
 /* ---------------------------------- @mui ---------------------------------- */
-import { Stack, Typography, MenuItem, Grid } from '@mui/material';
+import { SelectChangeEvent, Stack, Typography, MenuItem, Grid } from '@mui/material';
 /* ---------------------------------- axios --------------------------------- */
 // import axios from 'axios';
 import axios from '../../utils/axios';
@@ -122,6 +122,12 @@ export default function List() {
       label: 'Service Type',
       isSort: false,
     },
+    {
+        id: 'files_by_type',
+        align: 'left',
+        label: 'File Upload',
+        isSort: false,
+    },
     {
       id: 'status',
       align: 'center',
@@ -136,6 +142,57 @@ export default function List() {
     },
   ];
   /* -------------------------------------------------------------------------- */
+  /* ------------------------------ handle search ----------------------------- */
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (searchText === '') {
+      searchParams.delete('search');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
+      setAppliedParams(params);
+    }
+  };
+
+  const searchs = {
+    useSearchs: true,
+    searchText: searchText,
+    setSearchText: setSearchText,
+    handleSearchSubmit: handleSearchSubmit,
+  };
+  /* ------------------------------ handle filter ----------------------------- */
+  const [statusValue, setStatusValue] = useState('all');
+  const [filterData, setStatusData] = useState([]);
+  // handle status
+  const handleStatusChanges = (event: SelectChangeEvent) => {
+    setStatusValue(event.target.value as string);
+
+    if (event.target.value === 'all') {
+      searchParams.delete('status');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([
+        ...searchParams.entries(),
+        ['status', event.target.value as string],
+      ]);
+      setAppliedParams(params);
+    }
+  };
+
+  const filterStatus = {
+    useFilter: true,
+    config: {
+      label: 'Status',
+      statusValue: statusValue,
+      statusData: filterData,
+      handleStatusChange: handleStatusChanges,
+    },
+  };
 
   useEffect(() => {
     (async () => {
@@ -154,6 +211,14 @@ export default function List() {
 
       setSearchParams(parameters);
 
+      const status = [
+        { id: 'kondisi', name: 'Dokumen Billing' },
+        { id: 'diagnosa', name: 'Dokumen Diagnosa' },
+        { id: 'result', name: 'Dokumen Penduk Medis' },
+        { id: 'none', name: 'Belum ada Dokumen' },
+      ];
+      setStatusData(status);
+
       setData({
         full_name: response.data.full_name,
         paginations: response.data.paginations.data.map((obj: any) => ({
@@ -168,6 +233,35 @@ export default function List() {
           ) : (
             ''
           ),
+          files_by_type:
+          <>
+            {obj.files_by_type?.final_log_diagnosis?.length > 0 ? (
+                <>
+                  <Label variant='ghost' color='primary'>
+                    File Diagnosa {obj.files_by_type.final_log_diagnosis.length}
+                  </Label>
+                  <br />
+                </>
+            ):('')}
+            {obj.files_by_type?.final_log_kondisi?.length > 0 ? (
+                <>
+                  <Label variant='ghost' color='success'>
+                    File Billing {obj.files_by_type.final_log_kondisi.length}
+                    </Label>
+                    <br />
+                </>
+            ):('')}
+            {obj.files_by_type?.final_log_result?.length > 0 ? (
+                <>
+                  <Label variant='ghost' color='warning'>
+                    File Pendukung Medis {obj.files_by_type.final_log_result.length}
+                </Label>
+                </>
+            ) : (
+                ''
+            )}
+          </>
+            ,
           status:
             obj.status === 'Done' ? (
               <Label color="success">Done</Label>
@@ -221,12 +315,14 @@ export default function List() {
       <Grid item xs={12}>
         <Stack>
           <TableComponent
+            searchs={searchs}
             headCells={headCells}
             rows={data.paginations}
             orders={orders}
             paginations={paginations}
             loadings={loadings}
             params={params}
+            filterStatus={filterStatus}
           />
         </Stack>
       </Grid>