pengajuan claim

frontend/client-portal/src/pages/ClaimSubmit/DialogDetailClaim.tsx

@@ -1,7 +1,10 @@
 // @mui
+import { styled } from '@mui/material/styles';
 import {
   Button,
   Box,
+  LinearProgress,
+  linearProgressClasses,
   Stepper,
   Step,
   StepLabel,
@@ -9,19 +12,36 @@ import {
   Typography,
   Divider,
   Stack,
+  Grid,
+  Avatar,
 } from '@mui/material';
 import { Add } from '@mui/icons-material';
 // components
 import MuiDialog from '../../components/MuiDialog';
+/*------------------------------------ icon ----------------------------------- */
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 // theme
 import palette from '../../theme/palette';
 // React
-import { ReactElement } from 'react';
+import { ReactElement, useRef, useState } from 'react';
+import { useSearchParams, useNavigate, Link } from 'react-router-dom';
+import { fPostFormat } from '../../utils/formatTime';
+import { fCurrency } from '../../utils/formatNumber';
 
-type DataContent = {
-  info: string;
-  date: string;
-  time: string;
+// -------------------------------- type --------------------------------------
+type DataContentType = {
+  id: number;
+  fullName: string;
+  memberId: string;
+  limit: {
+    current: number;
+    total: number;
+    percentage: number;
+  };
+  avatar?: {
+    url?: string;
+    title?: string;
+  };
 };
 
 type MuiDialogProps = {
@@ -32,15 +52,33 @@ type MuiDialogProps = {
   openDialog: boolean;
   setOpenDialog: Function;
   content?: ReactElement;
-  data?: DataContent[];
+  data: DataContentType;
 };
 
+/* --------------------------------- styles --------------------------------- */
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 6,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 6,
+    background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
+  },
+}));
+/* -------------------------------------------------------------------------- */
+
+
 const steps = ['Review', 'Approval', 'Disbursement'];
 
 const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
   function clickHandler(arg0: string) {
     throw new Error('Function not implemented.');
   }
+  
+  const navigate = useNavigate();
+  const [serviceCode, setServiceCode] = useState('IP');
 
   // const getContent = () => (
 
@@ -48,29 +86,66 @@ const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialog
 
   return (
     <>
-      <Stack
-        alignItems="center"
-        justifyContent="space-between"
-        direction="row"
-        sx={{ marginTop: 1 }}
-      >
-        <Typography variant="subtitle1" sx={{ height: 'max-content' }}>
-          Claim Request
-        </Typography>
-        <Stack>
-          <Typography variant="caption">Submission date</Typography>
-          <Typography variant="caption">15 / 05 / 2022</Typography>
-        </Stack>
-      </Stack>
-      <Box sx={{ width: '100%', marginTop: 2 }}>
-        <Stepper alternativeLabel>
-          {steps.map((label) => (
-            <Step key={label}>
-              <StepLabel>{label}</StepLabel>
-            </Step>
-          ))}
-        </Stepper>
-      </Box>
+      <Grid container>
+        {/* Field 1 */}
+        <Grid item xs={12} paddingX="24px" paddingY="20px">
+          <Stack direction="row" alignItems="center">
+            <ArrowBackIosIcon onClick={() => navigate(`/corporate`)} sx={{ cursor: "pointer"  }} />
+            <Typography variant="h5" sx={{ flexGrow: 1 }}>Claim Submission </Typography>
+            <Typography variant="inherit"  sx={{ textAlign: "center", flexBasis: "15%" }}>Submission Date </Typography>
+            <Typography textAlign={'right'} variant="h6" sx={{ textAlign: "right" }}>
+              {fPostFormat(new Date(), 'dd MMM yyyy')}
+            </Typography>
+          </Stack>
+        </Grid>
+        <Grid item xs={12} paddingX="24px" paddingY="20px">
+          <Stack direction="row" spacing={4}>
+            <Button
+              sx={{ padding: 2, width: '50%',  border: serviceCode === 'OP' ? '1px solid #919EAB52' : '1px solid #19BBBB' }}
+              variant={serviceCode == 'IP' ? 'outlined' : ''}
+              onClick={() => {
+                setServiceCode('IP');
+              }}
+            >
+              Inpatient
+            </Button>
+            <Button
+              sx={{ padding: 2, width: '50%',border: serviceCode === 'IP' ? '1px solid #919EAB52' : '1px solid #19BBBB' }}
+              variant={serviceCode == 'OP' ? 'outlined' : ''}
+              onClick={() => {
+                setServiceCode('OP');
+              }}
+            >
+              Outpatient
+            </Button>
+          </Stack>
+        </Grid>
+        <Grid item xs={12}>
+          <Card sx={{ p: 2, marginBottom: 2 }}>
+            <Stack direction="row" alignContent={'center'}>
+              <Avatar
+                src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
+                alt={'test'}
+                sx={{ margin: 1, width: 56, height: 56 }}
+              />
+              <Stack sx={{ p: 1 }}>
+                <Typography variant='h5'>{'Alexandra Rhea Putranto'}</Typography>
+                <Typography variant='subtitle1' color={'#637381'}>{'KM002-01'}</Typography>
+              </Stack>
+              <Stack sx={{ p: 1 }}>
+                <Typography variant="body1" sx={{ marginBottom: 1, fontWeight: 600 }}>
+                  Total Limit
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={80} />
+                <Typography sx={{ textAlign: 'right', marginTop: 1 }}>
+                  {fCurrency(8000000)} / {fCurrency(100000)}
+                </Typography>
+              </Stack>
+            </Stack>
+          </Card>
+        </Grid>
+
+      </Grid>
       <Stack marginTop={2}>
         <Typography variant="subtitle1" paddingY={2}>
           17 Mei 2022

frontend/client-portal/src/pages/ClaimSubmit/Index.tsx

@@ -1,7 +1,7 @@
 /* ---------------------------------- react --------------------------------- */
 import { useContext, useEffect, useState } from 'react';
 /* ----------------------------------- mui ---------------------------------- */
-import { Container, Grid } from '@mui/material';
+import { Container, Grid, Typography } from '@mui/material';
 /* ------------------------------- components ------------------------------- */
 import Page from '../../components/Page';
 import TableList from '../../components/Table';
@@ -23,6 +23,9 @@ import Documents from '../Claims/components/Documents';
 // theme
 import palette from '../../theme/palette';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
+import { Stack } from '@mui/system';
+import { fDateSuffix } from '../../utils/formatTime';
+import DialogClaimSubmitMember from '../../sections/claim-submit/DialogClaimSubmitMember';
 
 interface ClaimStatusType {
   name: string;
@@ -30,6 +33,50 @@ interface ClaimStatusType {
   color: string;
 }
 
+/* ------------------------------ default data ------------------------------ */
+type DataMember = {
+  id: number;
+  fullName: string;
+  memberId: string;
+  limit: {
+    current: number;
+    total: number;
+    percentage: number;
+  };
+  avatar?: {
+    url?: string;
+    title?: string;
+  };
+};
+
+type CardPolicyProps = {
+  limit: {
+    myLimit: {
+      balance: number;
+      total: number;
+      percentage: number;
+    };
+    lockLimit: {
+      balance: number;
+      percentage: number;
+    };
+  };
+  topUpLimit: {
+    companyName: string;
+    policyNumber: number;
+    totalMembers: number;
+    totalCases: number;
+    totalPersen: number;
+    myLimit: {
+      balance: number;
+      total: number;
+      percentage: number;
+    };
+    maxTopUp: number;
+  };
+  members?: DataMember[];
+};
+
 export default function Drugs() {
   const { themeStretch } = useSettings();
   const { corporateValue } = useContext(UserCurrentCorporateContext);
@@ -48,9 +95,12 @@ export default function Drugs() {
     setIsLoading: setIsLoading,
   };
 
+  
+
   /* ------------------------------ handle params ----------------------------- */
   const [searchParams, setSearchParams] = useSearchParams();
   const [appliedParams, setAppliedParams] = useState({});
+  const [policyData, setPolicyData] = useState<CardPolicyProps>();
 
   const params = {
     searchParams: searchParams,
@@ -70,6 +120,11 @@ export default function Drugs() {
     orderBy: orderBy,
     setOrderBy: setOrderBy,
   };
+
+  
+  /* ---------------------------- Get Current Date ---------------------------- */
+  const current = new Date();
+  const date = fDateSuffix(current);
   /* -------------------------------------------------------------------------- */
 
   /* ---------------------------- handle pagination --------------------------- */
@@ -177,7 +232,7 @@ export default function Drugs() {
 
       setSearchParams(parameters);
 
-      setListAllMemberByClaimStatus(claim.data.data.allMembersByClaimStatus.data);
+      // setListAllMemberByClaimStatus(claim.data.data.allMembersByClaimStatus.data);
       setPaginationTable(claim.data.data.allMembersByClaimStatus);
 
       setIsLoading(false);
@@ -198,17 +253,21 @@ export default function Drugs() {
           />
       <Container maxWidth={themeStretch ? false : 'xl'}>
         <Grid container spacing={2}>
+          <Grid item xs={12} lg={6} md={6}>
+              <Typography variant="h6" sx={{marginLeft:'10px'}}> Select Employee</Typography>
+          </Grid>
+          <Grid item xs={12} lg={6} md={6} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Stack direction='row' alignItems='center'>
+              <Typography variant="inherit" align='right' sx={{ marginRight: '10px' }}>Submission Date</Typography>
+              <Typography variant="subtitle1" align='right' sx={{ marginRight: '10px' }}>{date}</Typography>
+            </Stack>
+          </Grid>
           <Grid item xs={12} lg={12} md={12}>
-            <List />
-
-            {/* <TableList
-              headCells={headCells}
-              rows={listAllMemberByClaimStatus}
-              orders={orders}
-              paginations={paginations}
-              loadings={loadings}
-              params={params}
-            /> */}
+            <DialogClaimSubmitMember
+            openDialog={true}
+            setOpenDialog={false}
+            title={{ name: 'te' }}
+          />
           </Grid>
         </Grid>
       </Container>

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

@@ -8,7 +8,7 @@ import { useContext, useEffect, useState } from 'react';
 
 /* -------------------------------- component ------------------------------- */
 import Iconify from '../../components/Iconify';
-import TableComponent from '../../components/Table';
+import CardClaimSubmit from '../../components/CardClaimSubmit';
 /* ---------------------------------- theme --------------------------------- */
 import palette from '../../theme/palette';
 import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
@@ -106,147 +106,30 @@ export default function List() {
     handleSearchSubmit: handleSearchSubmit,
   };
 
+
+  /* ------------------------------------------------------------------------- */
+  /*-------------------------------- handlle checkbox ------------------------ */
+  const handleCheckboxChange = async (event: React.FormEvent<HTMLFormElement>) => {
+    // Anda bisa menambahkan logika di sini
+    if (event.target.checked) {
+      // Checkbox dicentang
+      console.log('Checkbox dicentang');
+      // Tambahkan kode lain yang ingin Anda jalankan saat checkbox dicentang
+    } else {
+      // Checkbox tidak dicentang
+      console.log('Checkbox tidak dicentang');
+      // Tambahkan kode lain yang ingin Anda jalankan saat checkbox tidak dicentang
+    }
+  };
+
+
   /* -------------------------------- headCell -------------------------------- */
-  const headCells: HeadCell<never>[] = [
-    {
-      id: 'memberId',
-      align: 'left',
-      label: 'Member ID',
-      isSort: true,
-    },
-    {
-      id: 'codeRequest',
-      align: 'left',
-      label: 'Code Request',
-      isSort: true,
-    },
-    {
-      id: 'submissionDate',
-      align: 'left',
-      label: 'Request Date',
-      isSort: true,
-    },
-    {
-      id: 'fullName',
-      align: 'left',
-      label: 'Name',
-      isSort: true,
-    },
 
-    {
-      id: 'division',
-      align: 'left',
-      label: 'Divisi',
-      isSort: false,
-    },
-    {
-      id: 'status',
-      align: 'center',
-      label: 'Status',
-      isSort: false,
-    },
-    {
-      id: 'action',
-      align: 'right',
-      label: '',
-      isSort: false,
-    },
-  ];
-
-  useEffect(() => {
-    (async () => {
-      setIsLoading(true);
-
-      await new Promise((resolve) => setTimeout(resolve, 250));
-
-      const parameters =
-        Object.keys(appliedParams).length !== 0
-          ? appliedParams
-          : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
-
-      const response = await axios.get(`${corporateValue}/members`, {
-        params: { ...parameters, type: 'claim-report' },
-      });
-
-      setData(
-        response.data.data.map((obj: any) => ({
-          ...obj,
-          status:
-            obj.status === 'requested' ? (
-              <Button
-                onClick={() => navigate('dialog-detail')}
-                sx={{
-                  backgroundColor: 'rgba(84, 214, 44, 0.16)',
-                  color: palette.dark.success.dark,
-                  paddingX: 1.5,
-                  paddingY: 1,
-                  '&:hover': {
-                    backgroundColor: 'rgba(84, 214, 44, 0.16)',
-                    color: palette.dark.success.dark,
-                  },
-                }}
-              >
-                Request
-              </Button>
-            ) : obj.status === 'approved' ? (
-              <Button
-                sx={{
-                  backgroundColor: (theme) => theme.palette.secondary.main,
-                  color: '#FFFF',
-                  paddingX: 1.5,
-                  paddingY: 1,
-                  '&:hover': {
-                    backgroundColor: (theme) => theme.palette.secondary.dark,
-                    color: '#FFFF',
-                  },
-                }}
-              >
-                Approved
-              </Button>
-            ) : (
-              <Button
-                startIcon={<Iconify icon="fa6-solid:clock" />}
-                sx={{
-                  backgroundColor: '#CD7B2E',
-                  color: '#FFFF',
-                  paddingX: 1.5,
-                  paddingY: 1,
-                  '&:hover': {
-                    backgroundColor: '#BF6919',
-                    color: '#FFFF',
-                  },
-                }}
-              >
-                Ongoing
-              </Button>
-            ),
-            submissionDate:
-              obj.submissionDate ? fDate(obj.submissionDate) : ''
-        }))
-      );
-
-      setPaginationTable(response.data);
-      setRowsPerPage(response.data.per_page);
-
-      if (searchParams.get('page')) {
-        //@ts-ignore
-        const currentPage = parseInt(searchParams.get('page')) - 1;
-
-        paginationTable.current_page = currentPage;
-        setPage(currentPage);
-      }
-
-      setIsLoading(false);
-    })();
-  }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
 
   return (
     <Stack>
-      <TableComponent
-        headCells={headCells}
+      <CardClaimSubmit
         rows={data}
-        orders={orders}
-        paginations={paginations}
         loadings={loadings}
         params={params}
         searchs={searchs}

frontend/client-portal/src/pages/Corporate/Form.tsx

@@ -349,7 +349,7 @@ export default function CorporateForm({currentCorporate }: Props) {
     <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
       {/* <Card sx={{ p:3, mb:3, background: 'gray', color: 'white' }}><Typography>Corporate Detail</Typography></Card> */}
       <Grid container spacing={3}>
-        <Grid item xs={12} md={12}>
+        <Grid item xs={12} md={8}>
           <Card sx={{ p: 3 }}>
             <Stack spacing={3}>
               <Grid item xs={12}>
@@ -431,7 +431,7 @@ export default function CorporateForm({currentCorporate }: Props) {
           </Card>
         </Grid>
 
-        {/* <Grid item xs={12} md={4}>
+        <Grid item xs={12} md={4}>
           <Stack spacing={3}>
             <Card sx={{ p: 3 }}>
               <Stack spacing={3} mt={2}>
@@ -439,7 +439,7 @@ export default function CorporateForm({currentCorporate }: Props) {
                   <Typography align="center">Company Logo</Typography>
                   <UploadImage setFile={setFile} currentImage={currentImage} />
                 </Stack>
-                <Box>
+                {/* <Box>
                   <Box
                     sx={{ display: 'flex', placeContent: 'space-between', placeItems: 'center' }}
                   >
@@ -452,10 +452,10 @@ export default function CorporateForm({currentCorporate }: Props) {
                     <Typography>Company Automatic Linking</Typography>
                     <RHFSwitch name="automatic_linking" label="" labelPlacement="start" />
                   </Box>
-                </Box>
+                </Box> */}
               </Stack>
             </Card>
-            <Card sx={{ p: 3 }}>
+            {/* <Card sx={{ p: 3 }}>
               <Stack>
                 <Typography variant="subtitle2" sx={{ color: 'text.secondary' }}>
                   Linking Rules
@@ -464,9 +464,9 @@ export default function CorporateForm({currentCorporate }: Props) {
                   <RHFCustomMultiCheckbox name="linking_rules" options={linking_tools} />
                 </Stack>
               </Stack>
-            </Card>
+            </Card> */}
           </Stack>
-        </Grid> */}
+        </Grid>
 
           <Grid item xs={12} md={11}>
             <Stack direction="row" spacing={2} justifyContent="flex-end">