Update widgets and added settings

client/src/pages/home/tabs/MyDashboard.jsx

@@ -1,5 +1,5 @@
-import { Box, Text, Flex, IconButton, Spinner } from "@chakra-ui/react";
-import { X } from "lucide-react";
+import { Box, Text, Flex, IconButton, Spinner, Popover } from "@chakra-ui/react";
+import { X, MoreVertical } from "lucide-react";
 import { Responsive, WidthProvider } from "react-grid-layout";
 import { useDashboardStore } from "@/store/useDashboardStore.jsx";
 import { Suspense, useEffect, useRef } from 'react';
@@ -62,30 +62,60 @@ export default function MyDashboard() {
         if (registryEntry && registryEntry.component) {
             const Component = registryEntry.component;
 
+            // 1. Check if this widget type has a settings component registered
+            const SettingsUI = registryEntry.settingsComponent;
+
             return (
                 // The "Frame" that holds both the Title and the Chart
                 <Flex direction="column" height="100%" width="100%" bg="gray.800">
 
-                    {/* 1. THE TITLE BAR (Dynamically pulled from registry!) */}
+                    {/* THE TITLE BAR */}
                     <Flex
                         justify="space-between"
                         align="center"
                         px={3}
                         py={2}
-                        // borderBottom="1px solid"
-                        // borderColor="gray.700"
                     >
                         <Text color="gray.100" fontWeight="semibold" fontSize="md" isTruncated>
                             {registryEntry.name}
                         </Text>
 
-                        {/* (Optional) This is exactly where the ellipsis/settings icon will go later! */}
-                        <Box w="20px" h="20px" />
+                        {/* THE SETTINGS ELLIPSIS */}
+                        {SettingsUI ? (
+                            <Popover.Root positioning={{ placement: "bottom-end" }}>
+                                <Popover.Trigger asChild>
+                                    <IconButton
+                                        size="xs"
+                                        variant="ghost"
+                                        color="gray.400"
+                                        _hover={{ color: "white", bg: "gray.700" }}
+                                        aria-label="Widget Settings"
+                                    >
+                                        <MoreVertical size={16} />
+                                    </IconButton>
+                                </Popover.Trigger>
+
+                                {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
+                                <Popover.Positioner zIndex={10}>
+                                    <Popover.Content bg="gray.50" p={4} boxShadow="xl" borderRadius="md">
+                                        <Suspense fallback={<Spinner size="sm" />}>
+                                            <SettingsUI
+                                                widgetId={widget.id}
+                                                currentSettings={widget.settings || {}}
+                                            />
+                                        </Suspense>
+                                    </Popover.Content>
+                                </Popover.Positioner>
+                            </Popover.Root>
+                        ) : (
+                            <Box w="20px" h="20px" />
+                        )}
                     </Flex>
 
-                    {/* 2. THE CHART CANVAS */}
+                    {/* THE CHART CANVAS */}
                     <Box flex="1" overflow="hidden" position="relative" p={1}>
-                        <Component />
+                        {/* Pass the settings object into the actual chart component */}
+                        <Component settings={widget.settings || {}} />
                     </Box>
 
                 </Flex>