diff --git a/client/src/components/Widgets/CommCoorReport.jsx b/client/src/components/Widgets/CommCoorReport.jsx index 9012ed8..4cb2d88 100644 --- a/client/src/components/Widgets/CommCoorReport.jsx +++ b/client/src/components/Widgets/CommCoorReport.jsx @@ -114,23 +114,26 @@ export default function CommCoorReport({ settings, widgetID }) { } }, [settings, widgetID, updateSettings, apiData]); - if (isLoading) return ( - - - - ); + if (isLoading) + return ( + + + + ); - if (error) return ( - - {error} - - ); + if (error) + return ( + + {error} + + ); - if (!apiData) return ( - - No data - - ); + if (!apiData) + return ( + + No data + + ); return ( diff --git a/client/src/components/Widgets/IvansAlerts.jsx b/client/src/components/Widgets/IvansAlerts.jsx index e0e77b2..33a54af 100644 --- a/client/src/components/Widgets/IvansAlerts.jsx +++ b/client/src/components/Widgets/IvansAlerts.jsx @@ -117,16 +117,14 @@ export default function IvansAlerts({ settings, widgetID }) { {item?.files?.map((file, index) => { return ( - - + + + File: - - File: {file?.name} + + {file?.name} - {/**/} - {/* Open*/} - {/**/} - {/* COPY TO CLIPBOARD */} - + + + + Date Range Selection + {/*line seperator*/} + + {/* SELECTING DATE RANGE */} + + + + + Start Date + + + { + const value = e.target.value; + updateSettings(widgetId, {...currentSettings, startDate: value}); - {/* DOWNLOAD REPORT */} - + const dateSelected = new Date(value); + const today = new Date(); + today.setHours(0, 0, 0, 0); - {/* SELECTING DATE RANGE */} - - - - - Start Date - - - { - const value = e.target.value; - updateSettings(widgetId, {...currentSettings, startDate: value}); + if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date"); + else setStartError(""); + }} + /> + {startError && {startError}} + + + + + + + End Date + + + { + 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 && {startError}} - + if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date"); + else setEndError(""); + }} + /> + {endError && {endError}} + + + - - - - - End Date - - - { - 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 && {endError}} - + + Tools + {/*line seperator*/} + + + {/* COPY TO CLIPBOARD */} + + {/* DOWNLOAD REPORT */} + - - + + ) } \ No newline at end of file diff --git a/client/src/components/Widgets/settings/IvansAlertsSettings.jsx b/client/src/components/Widgets/settings/IvansAlertsSettings.jsx index 924caa2..d64da90 100644 --- a/client/src/components/Widgets/settings/IvansAlertsSettings.jsx +++ b/client/src/components/Widgets/settings/IvansAlertsSettings.jsx @@ -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 }) { {/* SELECTING DATE RANGE */} - - - Date Range Selection - -
{/*line seperator*/} - + + {/*line seperator*/} + Date Range Selection + {/*line seperator*/} + {/* start date */} @@ -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 }) { {/* SORTS */} - - - Sorts - -
{/*line seperator*/} - + + {/*line seperator*/} + Sorts + {/*line seperator*/} + {/* time sort */} @@ -138,7 +154,7 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) { @@ -147,18 +163,19 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) { Alphabetically by Volcano - - - Filters - -
{/*line seperator*/} - + + {/*line seperator*/} + Filters + {/*line seperator*/} + {/* elevated levels */} { updateSettings(widgetId, { @@ -177,18 +194,17 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) { Only Elevated Levels - + {/* COPY TO CLIPBOARD */} - - - Tools - -
{/*line seperator*/} - - + + {/*line seperator*/} + Tools + {/*line seperator*/} + + diff --git a/client/src/theme.js b/client/src/theme.js index ff53040..7dd4d5d 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -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" + } + } }, });