init

2025-04-17 18:28:54 +05:30
parent f583291d8a
commit 8825b0410a
2837 changed files with 241385 additions and 127578 deletions
--- a/worklenz-frontend/src/components/admin-center/billing/account-storage/account-storage.tsx
+++ b/worklenz-frontend/src/components/admin-center/billing/account-storage/account-storage.tsx
@@ -0,0 +1,95 @@
+import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
+import { fetchStorageInfo } from '@/features/admin-center/admin-center.slice';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { SUBSCRIPTION_STATUS } from '@/shared/constants';
+import { IBillingAccountStorage } from '@/types/admin-center/admin-center.types';
+import logger from '@/utils/errorLogger';
+import { Card, Progress, Typography } from 'antd/es';
+import { useEffect, useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface IAccountStorageProps {
+  themeMode: string;
+}
+
+const AccountStorage = ({ themeMode }: IAccountStorageProps) => {
+  const { t } = useTranslation('admin-center/current-bill');
+  const dispatch = useAppDispatch();
+  const [subscriptionType, setSubscriptionType] = useState<string>(SUBSCRIPTION_STATUS.TRIALING);
+
+  const { loadingBillingInfo, billingInfo, storageInfo } = useAppSelector(state => state.adminCenterReducer);
+
+  const formatBytes = useMemo(
+    () =>
+      (bytes = 0, decimals = 2) => {
+        if (!+bytes) return '0 MB';
+
+        const k = 1024;
+        const dm = decimals < 0 ? 0 : decimals;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        const formattedValue = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+        return `${formattedValue} ${subscriptionType !== SUBSCRIPTION_STATUS.FREE ? sizes[i] : 'MB'}`;
+      },
+    [subscriptionType]
+  );
+
+  useEffect(() => {
+    dispatch(fetchStorageInfo());
+  }, []);
+
+  useEffect(() => {
+    setSubscriptionType(billingInfo?.status ?? SUBSCRIPTION_STATUS.TRIALING);
+  }, [billingInfo?.status]);
+
+  const textColor = themeMode === 'dark' ? '#ffffffd9' : '#000000d9';
+
+  return (
+    <Card
+      style={{
+        height: '100%',
+      }}
+      loading={loadingBillingInfo}
+      title={
+        <span
+          style={{
+            color: textColor,
+            fontWeight: 500,
+            fontSize: '16px',
+          }}
+        >
+          {t('accountStorage')}
+        </span>
+      }
+    >
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div style={{ padding: '0 16px' }}>
+          <Progress
+            percent={billingInfo?.usedPercentage ?? 0}
+            type="circle"
+            format={percent => <span style={{ fontSize: '13px' }}>{percent}% Used</span>}
+          />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+          }}
+        >
+          <Typography.Text>
+            {t('used')} <strong>{formatBytes(storageInfo?.used ?? 0, 1)}</strong>
+          </Typography.Text>
+          <Typography.Text>
+            {t('remaining')} <strong>{formatBytes(storageInfo?.remaining ?? 0, 1)}</strong>
+          </Typography.Text>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default AccountStorage;