comitting

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

@@ -102,7 +102,7 @@ const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props
   })
 );
 
-export default function Drugs() {
+export default function ServiceMonitoring() {
   const { themeStretch } = useSettings();
 
   const [value, setValue] = useState(0);

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

@@ -0,0 +1,63 @@
+// mui
+import { IconButton, Container, Grid, Stack, Typography } from '@mui/material';
+// components
+import Page from '../../components/Page';
+import Iconify from '../../components/Iconify';
+// utils
+import useSettings from '../../hooks/useSettings';
+// section
+import CardPersonalInformation from '../../sections/alarm-center/user-profile/CardPersonalInformation';
+import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
+import CardPolicyNumber from '../../sections/alarm-center/user-profile/CardPolicyNumber';
+import CardBenefitSummary from '../../sections/alarm-center/user-profile/CardBenefitSummary';
+import CardClaimHistory from '../../sections/alarm-center/user-profile/CardClaimHistory';
+// react
+import { useNavigate } from 'react-router';
+
+// ----------------------------------------------------------------------
+
+export default function UserProfile() {
+  const { themeStretch } = useSettings();
+  const navigate = useNavigate();
+
+  return (
+    <Page title="Profile Peserta Jessica Lie">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
+          <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate(-1)}>
+            <Iconify icon="heroicons-outline:arrow-narrow-left" />
+          </IconButton>
+          <Typography variant="h5">Profil Peserta</Typography>
+        </Stack>
+        <Grid container spacing={2}>
+          {/* Row 1 */}
+          <Grid item xs={12} md={6}>
+            <Grid container spacing={2}>
+              {/* Item 1 */}
+              <Grid item xs={12} md={12}>
+                <CardPersonalInformation />
+              </Grid>
+              {/* Item 2 */}
+              <Grid item xs={12} md={12}>
+                <CardFamilyInformation />
+              </Grid>
+            </Grid>
+          </Grid>
+          {/* Row 2 */}
+          <Grid item xs={12} md={6}>
+            <Grid container spacing={2}>
+              {/* Item 1 */}
+              <Grid item xs={12}>
+                <CardPolicyNumber />
+              </Grid>
+              {/* Item 2 */}
+              <Grid item xs={12}>
+                <CardClaimHistory />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Container>
+    </Page>
+  );
+}