request

frontend/client-portal/src/sections/alarm-center/user-profile/CardPolicyNumber.tsx

@@ -21,6 +21,22 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
 }));
 
 
+type DataMember = {
+  id: number;
+  fullName: string;
+  memberId: string;
+  limit: {
+    current: number;
+    total: number;
+    percentage: number;
+  };
+  avatar: {
+    url: string;
+    title: string;
+  };
+  status: JSX.Element;
+};
+
 type CardPolicyProps = {
   limit: {
     myLimit: {
@@ -49,6 +65,8 @@ type CardPolicyProps = {
   members?: DataMember[];
 };
 
+
+
 // ----------------------------------------------------------------------
  
 export default function CardPolicyNumber() {
@@ -85,6 +103,42 @@ export default function CardPolicyNumber() {
       //   topUpLimit: corporateTopUpLimit.data.data,
       // });
   }, [corporateValue]);
+
+  const calculateProgressValue = (current:number,total:number) => {
+    return (current/total) * 100;
+  };
+
+  const getMemberLimitUsage = (memberId: string) => {
+    if (policyData?.members) {
+      const member = policyData.members.find(member => member.memberId === memberId);
+      if (member) {
+        return member.limit;
+      }
+    }
+    return null;
+  };
+
+  const renderYearlyLimit = () => {
+    if (policyData) {
+      const { myLimit } = policyData.limit;
+      const { balance, total, percentage } = myLimit;
+      const progressValue = calculateProgressValue(balance, total);
+
+      return (
+        <Stack spacing={1} sx={{ width: '206.5px' }}>
+          <Typography variant="subtitle2">Yearly Limit</Typography>
+          <BorderLinearProgress variant="determinate" value={progressValue} />
+          <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+            {balance.toLocaleString()} /{' '}
+            <Typography variant="body2" color="#757575" component="span">
+              {total.toLocaleString()}
+            </Typography>
+          </Typography>
+        </Stack>
+      );
+    }
+    return null;
+  };
  
    return (
     <Card sx={{ padding: 2 }}>