Added tests with storybook and like API call with service interrupt test

client/src/components/Widgets/VaaActivity7Day.jsx

@@ -1,13 +1,16 @@
 import { useMemo } from 'react';
-import { Box, Flex, Text } from '@chakra-ui/react';
+import { Box, Flex, Spinner, Text } from '@chakra-ui/react';
 import Plot from 'react-plotly.js';
+import VdapApi from '../../hooks/useVdapApi.js'; // Adjust path as needed
+
+export default function VaaActivity7Day() {
+    // ONE LINE to handle all fetching, loading, and error states!
+    const { data: apiData, isLoading, error } = VdapApi('/api/v2/comm_coor_vaa');
 
-export default function VaaActivityChart({ data = [] }) {
-    // Transform flat database rows into Plotly's required "Traces"
     const plotTraces = useMemo(() => {
-        if (!data || data.length === 0) return [];
+        if (!apiData || apiData.length === 0) return [];
 
-        const groupedData = data.reduce((acc, curr) => {
+        const groupedData = apiData.reduce((acc, curr) => {
             const name = curr.volc_name || 'Unknown';
             if (!acc[name]) acc[name] = { x: [], y: [], text: [] };
 
@@ -27,21 +30,31 @@ export default function VaaActivityChart({ data = [] }) {
             hoverinfo: 'text',
             marker: { size: 8, line: { width: 1, color: 'white' } }
         }));
-    }, [data]);
+    }, [apiData]);
 
-    if (plotTraces.length === 0) {
-        return (
-            <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-                <Text color="gray.400">No flight level data available.</Text>
-            </Flex>
-        );
-    }
+    if (isLoading) return (
+        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
+            <Spinner size="xl" color="blue.400" thickness="4px" />
+        </Flex>
+    );
+
+    if (error) return (
+        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
+            <Text color="red.400">{error}</Text>
+        </Flex>
+    );
+
+    if (plotTraces.length === 0) return (
+        <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
+            <Text color="gray.400">No flight level data available.</Text>
+        </Flex>
+    );
 
     return (
         <Box height="100%" width="100%" bg="gray.800" borderRadius="md" overflow="hidden">
             <Plot
                 data={plotTraces}
-                useResizeHandler={true} // Crucial for reacting to grid drags
+                useResizeHandler={true}
                 style={{ width: '100%', height: '100%' }}
                 layout={{
                     autosize: true,