update: comm coor widget settings ui

wip: themes for checkboxes
2026-11-09 08:00:02 -08:00
parent 7b3e7d3d0c
commit 5798b90ab7
5 changed files with 164 additions and 107 deletions
@@ -114,23 +114,26 @@ export default function CommCoorReport({ settings, widgetID }) {
    }
  }, [settings, widgetID, updateSettings, apiData]);

-  if (isLoading) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
-      <Spinner size="xl" color="blue.400" thickness="4px"/>
-    </Flex>
-  );
+  if (isLoading)
+    return (
+      <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
+        <Spinner size="xl" color="blue.400" thickness="4px"/>
+      </Flex>
+    );

-  if (error) return (
-    <Flex w="100%" h="100%" align="center" justify="center" textAlign="center" borderRadius="lg" bg="transparent">
-      <Text color="red.400">{error}</Text>
-    </Flex>
-  );
+  if (error)
+    return (
+      <Flex w="100%" h="100%" align="center" justify="center" textAlign="center" borderRadius="lg" bg="transparent">
+        <Text color="red.400">{error}</Text>
+      </Flex>
+    );

-  if (!apiData) return (
-    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
-      <Text textAlign="center" color="gray.400">No data</Text>
-    </Flex>
-  );
+  if (!apiData)
+    return (
+      <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="transparent">
+        <Text textAlign="center" color="gray.400">No data</Text>
+      </Flex>
+    );

  return (
    <Flex direction="row" w="100%" h="100%" p={1} overflowY="auto">
@@ -117,16 +117,14 @@ export default function IvansAlerts({ settings, widgetID }) {
                      </Flex>
                      {item?.files?.map((file, index) => {
                        return (
-                          <Box w="100%" h="100%" key={index} p={1}>
-                            <Flex direction="row" mb={2} gap={1} justify="space-between">
+                          <Box w="100%" h="100%" key={index}>
+                            <Flex direction="row" w="100%">
+                              <Text w="100%" p={1} fontWeight="semibold" bg="widgetBadgeBg" borderLeftRadius="lg" fontSize="sm" color="text">File: </Text>
                              <a href={`${file?.url}#view=FitV&toolbar=0`} target="_blank" rel="noopener noreferrer">
-                                <Text mr={1} truncate p={1} bg="widgetBadgeBg" borderRadius="lg" fontSize="sm" color="text">
-                                  File: {file?.name}
+                                <Text truncate w="100%" p={1} bg="widgetBadgeBg" borderRightRadius="lg" fontSize="sm" color="text">
+                                  {file?.name}
                                </Text>
                              </a>
-                              {/*<Box borderRadius="lg" bg="widgetBadgeBg" color="text" p={1} fontSize="sm" asChild>*/}
-                              {/*    Open*/}
-                              {/*</Box>*/}
                            </Flex>
                            <object
                              data={`${file?.url}#view=FitH&toolbar=1`}
@@ -1,4 +1,4 @@
-import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
+import {Button, Field, Flex, Input, Switch, Text, Fieldset, Separator, HStack} from "@chakra-ui/react";
 import {useDashboardStore} from "@/store/useDashboardStore.jsx";
 import {useState} from "react";

@@ -17,67 +17,80 @@ export default function CommCoorReportSettings({ widgetId, currentSettings }) {

  return (
    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
-      {/* COPY TO CLIPBOARD */}
-      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy Report</Button>
+      <Fieldset.Root>
+        <Fieldset.Content>
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+          {/* SELECTING DATE RANGE */}
+          <Flex direction="column" w="100%" h="100%" justify="center" gap="2">
+            <Field.Root invalid={!!startError}>
+              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
+                  Start Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    w="100%"
+                    type="date"
+                    value={currentSettings?.startDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {...currentSettings, startDate: value});

-      {/* DOWNLOAD REPORT */}
-      <Button w="fit" size="xs" onClick={handleDownloadReport}>Download Report</Button>
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);

-      {/* SELECTING DATE RANGE */}
-      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
-        <Field.Root invalid={!!startError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              Start Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
-                w="100%"
-                type="date"
-                value={currentSettings?.startDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, startDate: value});
+                      if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+                      else setStartError("");
+                    }}
+                  />
+                  {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>
+            <Field.Root invalid={!!endError}>
+              <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+                <Text w="50%" align="center" justify="center" mt={2} color="text">
+                  End Date
+                </Text>
+                <Flex direction="column" w="100%">
+                  <Input
+                    w="100%"
+                    type="date"
+                    value={currentSettings?.endDate || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      updateSettings(widgetId, {...currentSettings, endDate: value});

-                  const dateSelected = new Date(value);
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
+                      const dateSelected = new Date(value);
+                      const today = new Date();
+                      today.setHours(0, 0, 0, 0);

-                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
-                  else setStartError("");
-                }}
-              />
-              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
-            </Flex>
+                      if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+                      else setEndError("");
+                    }}
+                  />
+                  {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+                </Flex>
+              </Flex>
+            </Field.Root>
          </Flex>
-        </Field.Root>
-        <Field.Root invalid={!!endError}>
-          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
-            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
-              End Date
-            </Text>
-            <Flex direction="column" w="100%">
-              <Input
-                w="100%"
-                type="date"
-                value={currentSettings?.endDate || ""}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  updateSettings(widgetId, {...currentSettings, endDate: value});

-                  const dateSelected = new Date(value);
-                  const today = new Date();
-                  today.setHours(0, 0, 0, 0);
-
-                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
-                  else setEndError("");
-                }}
-              />
-              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
-            </Flex>
+          <HStack>
+            <Text flexShrink="0" fontWeight="semibold">Tools</Text>
+            <Separator flex="1" size="sm"/> {/*line seperator*/}
+          </HStack>
+          <Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
+            {/* COPY TO CLIPBOARD */}
+            <Button w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleCopyToClipboard}>Copy Report</Button>
+            {/* DOWNLOAD REPORT */}
+            <Button w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleDownloadReport}>Download Report</Button>
          </Flex>
-        </Field.Root>
-      </Flex>
+        </Fieldset.Content>
+      </Fieldset.Root>
    </Flex>
  )
 }
@@ -1,4 +1,16 @@
-import {Button, Field, Flex, Input, Switch, Text, Fieldset, CheckboxCard} from "@chakra-ui/react";
+import {
+  Button,
+  Field,
+  Flex,
+  Input,
+  Switch,
+  Text,
+  Fieldset,
+  CheckboxCard,
+  Separator,
+  HStack,
+  useSlotRecipe
+} from "@chakra-ui/react";
 import {useDashboardStore} from "../../../store/useDashboardStore.jsx";
 import {useState} from "react";

@@ -7,6 +19,10 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
  const [startError, setStartError] = useState(null);
  const [endError, setEndError] = useState(null);

+  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
+  const popoverStyles = popoverRecipe();
+
+
  const handleCopyToClipboard = () => {
    updateSettings(widgetId, {copyToClipboard: true});
  }
@@ -25,12 +41,11 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
        <Fieldset.Content>
          {/* SELECTING DATE RANGE */}
          <Flex direction="column" w="100%" h="100%" justify="center" gap={2}>
-            <Flex direction="column">
-              <Text w="100%" fontWeight="bold">
-                Date Range Selection
-              </Text>
-              <hr style={{borderColor: "red.700"}} /> {/*line seperator*/}
-            </Flex>
+            <HStack>
+              <Separator flex="1" size="md"/> {/*line seperator*/}
+              <Text flexShrink="0" fontWeight="semibold">Date Range Selection</Text>
+              <Separator flex="1" size="md"/> {/*line seperator*/}
+            </HStack>

            {/* start date */}
            <Field.Root invalid={!!startError}>
@@ -49,6 +64,7 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
                    type="date"
                    w="100%"
                    borderRadius="lg"
+                    bg="widgetBadgeBg"
                    value={currentSettings?.startDate || ""}
                    onChange={(e) => {
                      const value = e.target.value;
@@ -90,6 +106,7 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
                    type="date"
                    w="100%"
                    borderRadius="lg"
+                    bg="widgetBadgeBg"
                    value={currentSettings?.endDate || ""}
                    onChange={(e) => {
                      const value = e.target.value;
@@ -114,18 +131,17 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
          </Flex>

          {/* SORTS */}
-          <Flex direction="column">
-            <Text w="100%" fontWeight="bold">
-              Sorts
-            </Text>
-            <hr /> {/*line seperator*/}
-          </Flex>
+          <HStack>
+            <Separator flex="1" size="md"/> {/*line seperator*/}
+            <Text flexShrink="0" fontWeight="semibold">Sorts</Text>
+            <Separator flex="1" size="md"/> {/*line seperator*/}
+          </HStack>

          {/* time sort */}
          <Switch.Root
            checked={currentSettings?.activeSorts?.timeSort === "asc"}
            onCheckedChange={handleTimeSort}
-            colorPalette="blue"
+            colorPalette="orange"
          >
            <Switch.HiddenInput />
            <Switch.Control>
@@ -138,7 +154,7 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
          <Switch.Root
            checked={currentSettings?.activeSorts?.volcanoSort}
            onCheckedChange={handleVolcanoSort}
-            colorPalette="blue"
+            colorPalette="orange"
          >
            <Switch.HiddenInput />
            <Switch.Control>
@@ -147,18 +163,19 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
            <Switch.Label fontWeight={400}>Alphabetically by Volcano</Switch.Label>
          </Switch.Root>

-          <Flex direction="column">
-            <Text w="100%" fontWeight="bold">
-              Filters
-            </Text>
-            <hr /> {/*line seperator*/}
-          </Flex>
+          <HStack>
+            <Separator flex="1" size="md"/> {/*line seperator*/}
+            <Text flexShrink="0" fontWeight="semibold">Filters</Text>
+            <Separator flex="1" size="md"/> {/*line seperator*/}
+          </HStack>

          {/* elevated levels */}
          <CheckboxCard.Root
            size="sm"
            variant="surface"
            borderRadius="lg"
+            css={popoverStyles.checkboxcard}
+
            defaultChecked={currentSettings?.filters?.elevatedLevels}
            onCheckedChange={(e) => {
              updateSettings(widgetId, {
@@ -177,18 +194,17 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) {
                  Only Elevated Levels
                </CheckboxCard.Label>
              </CheckboxCard.Content>
-              <CheckboxCard.Indicator />
+              <CheckboxCard.Indicator css={popoverStyles.checkboxcard} />
            </CheckboxCard.Control>
          </CheckboxCard.Root>

          {/* COPY TO CLIPBOARD */}
-          <Flex direction="column">
-            <Text w="100%" fontWeight="bold">
-              Tools
-            </Text>
-            <hr /> {/*line seperator*/}
-            <Button mt={2} w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
-          </Flex>
+          <HStack>
+            <Separator flex="1" size="md"/> {/*line seperator*/}
+            <Text flexShrink="0" fontWeight="semibold">Tools</Text>
+            <Separator flex="1" size="md"/> {/*line seperator*/}
+          </HStack>
+          <Button mt={-2} colorPalette="orange" w="100%" size="xs" borderRadius="lg" variant="subtle" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
        </Fieldset.Content>
      </Fieldset.Root>
    </Flex>
@@ -346,7 +346,7 @@ const widgetRecipe = defineSlotRecipe({

 // 6. TRUE POPOVER: Compact floating card for 3-dots menus
 const glassPopoverRecipe = defineSlotRecipe({
-  slots: ["content", "arrow", "positioner"],
+  slots: ["content", "arrow", "positioner", "checkboxcard", "checkbox"],
  base: {
    content: {
      ...glassSurface,
@@ -357,6 +357,33 @@ const glassPopoverRecipe = defineSlotRecipe({
      backdropFilter: "blur(15px)",
      WebkitBackdropFilter: "blur(15px)",
    },
+    checkboxcard: {
+      bg: "widgetItemBg",
+      _hover: {
+        bg: "widgetBadgeBg"
+      },
+      _checked: {
+        bg: "orange.700"
+      },
+      _dark: {
+        bg: "widgetBadgeBg",
+        _hover: {
+          bg: "widgetInnerBadgeBg"
+        },
+        _checked: {
+          bg: "orange.700",
+          _hover: {
+            bg: "orange.700/50"
+          }
+        }
+      }
+    },
+    checkbox: {
+      bg: "widgetInnerBadgeBg",
+      _checked: {
+        bg: "orange"
+      }
+    }
  },
 });