feat : progress bar config for space is dynamic from api

src/pages/profile/section/ProductConfigList.tsx

@@ -64,6 +64,8 @@ const ProductConfigList = ({
                   isDisabled={false}
                   isShowTraffic={item.show_traffic}
                   textCopy={item.url}
+                  maxTraffic={item.max_traffic}
+                  traffic={item.traffic}
                 />
               </Fragment>
             );

src/pages/profile/section/components/ConfigItem.tsx

@@ -14,6 +14,8 @@ const ConfigItem = ({
   isDisabled,
   isShowTraffic,
   textCopy,
+  maxTraffic,
+  traffic,
 }: ConfigItemProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isOpenDropDown, setIsOpenDropDown] = useState(false);
@@ -40,6 +42,8 @@ const ConfigItem = ({
         nameConfig={configName}
         isShowTraffic={isShowTraffic}
         textCopy={textCopy}
+        maxTraffic={maxTraffic}
+        traffic={traffic}
       />
       <div className="relative w-full h-full rounded-md">
         {isDisabled && (
@@ -91,7 +95,7 @@ const ConfigItem = ({
                   حجم
                 </Button>
                 <DropdownItem widthTailwind="w-[20rem] left-0">
-                  <ProgressSpace startSpace={100} endSpace={200} />
+                  <ProgressSpace startSpace={traffic} endSpace={maxTraffic} />
                 </DropdownItem>
               </Dropdown>
             )}

src/pages/profile/section/components/ModalConfigDetails.tsx

@@ -14,7 +14,9 @@ const ModalConfigDetails = ({
   dateBuy,
   nameConfig,
   isShowTraffic,
-  textCopy
+  textCopy,
+  maxTraffic,
+  traffic
 }: {
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
@@ -23,6 +25,8 @@ const ModalConfigDetails = ({
   nameConfig: string;
   isShowTraffic: boolean;
   textCopy: string;
+  maxTraffic: number | "unlimited";
+  traffic: number;
 }) => {
   const navigate = useNavigate()
   const copyToClipboard = async (textToCopy: string) => {
@@ -64,9 +68,9 @@ const ModalConfigDetails = ({
             </>
           )}
         </div>
-        {!isDisabled || isShowTraffic && (
+        {!isDisabled && isShowTraffic && (
           <div className="w-full h-full">
-            <ProgressSpace startSpace={100} endSpace={200} />
+            <ProgressSpace startSpace={traffic} endSpace={maxTraffic} />
           </div>
         )}
       </div>