Update ServerLimitationBar.tsx

resources/scripts/components/elements/server/ServerLimitationBar.tsx

@@ -8,7 +8,7 @@ import Spinner from '@/components/elements/Spinner';
 import ContentBox from '@/components/elements/ContentBox';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
 import StoreContainer from '@/components/elements/StoreContainer';
-import { useServerContext } from '@/state/server'; // Import the custom hook
+import { ServerContext } from '@/state/server';
 
 const Wrapper = styled.div`
     ${tw`text-2xl flex flex-row justify-center items-center`};
@@ -29,14 +29,10 @@ interface BoxProps {
 }
 
 export default ({ className, titles }: RowProps) => {
-    const serverData = useServerContext(); // Access server data through context
+    const limits = ServerContext.useStoreState((state) => state.server.data!.limits);
+    const featureLimits = ServerContext.useStoreState((state) => state.server.data!.featureLimits);
     const [limits, setLimits] = useState<any>(null);
 
-    useEffect(() => {
-        if (serverData) {
-            setLimits(serverData.limits);
-        }
-    }, [serverData]);
 
     if (!limits) return <Spinner size={'large'} centered />;
 
@@ -56,56 +52,44 @@ export default ({ className, titles }: RowProps) => {
 
     return (
         <StoreContainer className={classNames(className, 'grid grid-cols-2 sm:grid-cols-7 gap-x-6 gap-y-2')}>
-            <ResourceBox
-                title={'Credits'}
-                description={'The amount of credits you have available.'}
-                icon={<Icon.DollarSign />}
-                amount={limits.credits || 0}
-            />
             <ResourceBox
                 title={'CPU'}
-                description={'The amount of CPU (in %) you have available.'}
+                description={'The amount of CPU (in %) currently assigned to the server.'}
                 icon={<Icon.Cpu />}
                 amount={limits.cpu || 0}
                 suffix={'%'}
             />
             <ResourceBox
                 title={'Memory'}
-                description={'The amount of RAM (in MB/GB) you have available.'}
+                description={'The amount of RAM (in MB/GB) currently assigned to the server.'}
                 icon={<Icon.PieChart />}
                 amount={limits.memory || 0}
                 toHuman
             />
             <ResourceBox
                 title={'Disk'}
-                description={'The amount of storage (in MB/GB) you have available.'}
+                description={'The amount of storage (in MB/GB) currently assigned to the server.'}
                 icon={<Icon.HardDrive />}
                 amount={limits.disk || 0}
                 toHuman
             />
-            <ResourceBox
-                title={'Slots'}
-                description={'The amount of servers you are able to deploy.'}
-                icon={<Icon.Server />}
-                amount={limits.slots || 0}
-            />
             <ResourceBox
                 title={'Ports'}
-                description={'The amount of ports you can add to your servers.'}
+                description={'The amount of ports currently assigned to the server.'}
                 icon={<Icon.Share2 />}
-                amount={limits.ports || 0}
+                amount={featureLimits.allocations || 0}
             />
             <ResourceBox
                 title={'Backups'}
-                description={'The amount of backup slots you can add to your servers.'}
+                description={'The amount of backup slots currently assigned to the server.'}
                 icon={<Icon.Archive />}
-                amount={limits.backups || 0}
+                amount={featureLimits.backups || 0}
             />
             <ResourceBox
                 title={'Databases'}
-                description={'The amount of database slots you can add to your servers.'}
+                description={'The amount of database slots currently assigned to the server.'}
                 icon={<Icon.Database />}
-                amount={limits.databases || 0}
+                amount={featureLimits.databases || 0}
             />
         </StoreContainer>
     );