Refactor continuing to work on UI
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
import {useState, useMemo, useRef} from "react";
|
||||
import {
|
||||
Button,
|
||||
IconButton,
|
||||
Box,
|
||||
Text,
|
||||
Flex,
|
||||
@@ -10,7 +9,8 @@ import {
|
||||
Tabs,
|
||||
Badge,
|
||||
Menu,
|
||||
HStack
|
||||
HStack,
|
||||
useRecipe, useSlotRecipe
|
||||
} from "@chakra-ui/react";
|
||||
import {Settings, Plus, LayoutGrid, Move, Save, X} from 'lucide-react';
|
||||
import {useDashboardStore} from "../../store/useDashboardStore.jsx";
|
||||
@@ -20,13 +20,17 @@ export function SettingsButton() {
|
||||
// 1. ☁Store connections
|
||||
const isEditing = useDashboardStore(state => state.isEditing);
|
||||
const enterEditMode = useDashboardStore(state => state.enterEditMode);
|
||||
|
||||
// This now handles both local UI lock AND database saving!
|
||||
const saveEdit = useDashboardStore(state => state.saveEdit);
|
||||
|
||||
const cancelEdit = useDashboardStore(state => state.cancelEdit);
|
||||
const addWidget = useDashboardStore(state => state.addWidget);
|
||||
|
||||
const recipe = useRecipe({key: "glassTab"});
|
||||
const tabStyles = recipe();
|
||||
|
||||
// Pull the glass container styles for the dropdown
|
||||
const panelRecipe = useSlotRecipe({key: "glassPanel"});
|
||||
const panelStyles = panelRecipe({ layout: "dropdown" });
|
||||
|
||||
const [isLibraryOpen, setIsLibraryOpen] = useState(false);
|
||||
|
||||
// Smart Add Handler
|
||||
@@ -58,40 +62,42 @@ export function SettingsButton() {
|
||||
{/* THE STATIC DROPDOWN MENU */}
|
||||
<Menu.Root positioning={{getAnchorRect}}>
|
||||
<Menu.Trigger asChild>
|
||||
<IconButton
|
||||
<Box
|
||||
ref={menuRef}
|
||||
aria-label="Settings"
|
||||
bg="vdap.darkGreen"
|
||||
color="white"
|
||||
size="sm"
|
||||
borderRadius="md"
|
||||
_hover={{ bg: "vdap.darkGreenHover" }}
|
||||
as="button"
|
||||
css={tabStyles}
|
||||
>
|
||||
<Settings size={18} />
|
||||
</IconButton>
|
||||
{/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
|
||||
<Settings size={24} style={{flexShrink: 0}}/>
|
||||
|
||||
{/* Dynamic text based on editing state! */}
|
||||
<Box as="span">
|
||||
{isEditing ? "Editing Layout..." : "Dashboard Settings"}
|
||||
</Box>
|
||||
</Box>
|
||||
</Menu.Trigger>
|
||||
|
||||
<Menu.Positioner>
|
||||
<Menu.Content bg="white" boxShadow="lg" borderRadius="md" p={1} zIndex="dropdown">
|
||||
<Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
|
||||
{isEditing ? (
|
||||
<>
|
||||
{/* WIRE DIRECTLY TO saveEdit */}
|
||||
<Menu.Item onClick={saveEdit} color="green.600" fontWeight="bold" cursor="pointer" _hover={{ bg: "green.50" }}>
|
||||
<Menu.Item onClick={saveEdit} color="green.600" cursor="pointer" _hover={{fontWeight: "semibold"}}>
|
||||
<Save size={16} style={{marginRight: '8px'}}/> Save Layout
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}>
|
||||
<Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{fontWeight: "semibold"}}>
|
||||
<X size={16} style={{marginRight: '8px'}}/> Discard Changes
|
||||
</Menu.Item>
|
||||
</>
|
||||
) : (
|
||||
<Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{ bg: "gray.100" }}>
|
||||
<Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{fontWeight: "semibold"}}>
|
||||
<Move size={16} style={{marginRight: '8px'}}/> Edit Layout
|
||||
</Menu.Item>
|
||||
)}
|
||||
|
||||
<Menu.Separator my={1} borderColor="gray.200" />
|
||||
<Menu.Separator my={1} borderColor="glassSeperator"/>
|
||||
|
||||
<Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{ bg: "gray.100" }}>
|
||||
<Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{fontWeight: "semibold"}}>
|
||||
<LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
|
||||
</Menu.Item>
|
||||
</Menu.Content>
|
||||
@@ -103,7 +109,7 @@ export function SettingsButton() {
|
||||
<Dialog.Backdrop bg="blackAlpha.600"/>
|
||||
<Dialog.Positioner>
|
||||
<Dialog.Content bg="gray.50" borderRadius="xl" overflow="hidden" boxShadow="xl" maxW="800px">
|
||||
<Dialog.Header bg="vdap.darkGreen" color="white" py={4}>
|
||||
<Dialog.Header bg="gray.800" color="white" py={4}>
|
||||
<Dialog.Title fontSize="xl" fontWeight="bold">Add Dashboard Widgets</Dialog.Title>
|
||||
</Dialog.Header>
|
||||
|
||||
@@ -119,12 +125,14 @@ export function SettingsButton() {
|
||||
<Tabs.Content key={cat} value={cat} p={6}>
|
||||
<Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
|
||||
{categorizedWidgets[cat].map(widget => (
|
||||
<Flex key={widget.id} direction="column" bg="white" p={4} borderRadius="md" border="1px solid" borderColor="gray.200" boxShadow="sm">
|
||||
<Flex key={widget.id} direction="column" bg="white" p={4} borderRadius="md" border="1px solid"
|
||||
borderColor="gray.200" boxShadow="sm">
|
||||
<Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
|
||||
<Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
|
||||
|
||||
<Box borderTop="1px solid" borderColor="gray.100" pt={3}>
|
||||
<Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase" mb={2}>Add to Grid:</Text>
|
||||
<Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase" mb={2}>Add
|
||||
to Grid:</Text>
|
||||
<HStack gap={2} flexWrap="wrap">
|
||||
{Object.keys(widget.allowedSizes).map(sizeKey => (
|
||||
<Badge
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
import Widget from "./Widget.jsx";
|
||||
import { Fieldset, NativeSelect, For, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useState } from "react";
|
||||
import { Asterisk } from 'lucide-react';
|
||||
|
||||
export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
|
||||
const { register, handleSubmit, reset, formState: {errors} } = useForm();
|
||||
const [isSubmit, setIsSubmit] = useState(false);
|
||||
|
||||
const onSubmit = (data) => {
|
||||
setIsSubmit(true);
|
||||
reset();
|
||||
}
|
||||
|
||||
// Prop Forwarding
|
||||
const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit }
|
||||
|
||||
return (
|
||||
<Widget title="Alert Level" {...widgetProps} >
|
||||
{!isSubmit ? (
|
||||
// DISPLAYING INPUT FIElDS AND LABELS
|
||||
<Box
|
||||
as="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
width="100%"
|
||||
p={3}
|
||||
display="flex"
|
||||
flexDir="column"
|
||||
>
|
||||
<Fieldset.Root size="md" maxW="md">
|
||||
<Fieldset.Content>
|
||||
<Field.Root>
|
||||
<Field.Label fontWeight="semibold">Volcano</Field.Label>
|
||||
<Input name="volcanoname" />
|
||||
</Field.Root>
|
||||
|
||||
<Field.Root>
|
||||
<Field.Label fontWeight="semibold">Country</Field.Label>
|
||||
<NativeSelect.Root>
|
||||
<NativeSelect.Field name="country">
|
||||
<For each={["United Kingdom", "Canada", "United States"]}>
|
||||
{(item) => (
|
||||
<option key={item} value={item}>
|
||||
{item}
|
||||
</option>
|
||||
)}
|
||||
</For>
|
||||
</NativeSelect.Field>
|
||||
<NativeSelect.Indicator />
|
||||
</NativeSelect.Root>
|
||||
</Field.Root>
|
||||
</Fieldset.Content>
|
||||
|
||||
<Button type="submit" size="sm">Submit</Button>
|
||||
</Fieldset.Root>
|
||||
</Box>
|
||||
):(
|
||||
// DISPLAYING ALERT LEVEL DATA
|
||||
<Box p={1} mt={1} ml="auto" mr="auto" width="200px">
|
||||
<Box
|
||||
bg="bg"
|
||||
shadow="md"
|
||||
borderRadius="md"
|
||||
p={8}
|
||||
width="200px"
|
||||
height="10px"
|
||||
textAlign="center"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text fontsize="2xl" fontWeight="bold" color="gray.700">Alert Level Data Coming Soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Widget>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { Button } from "@chakra-ui/react";
|
||||
|
||||
export function CancelButton ({onCancel}) {
|
||||
return (
|
||||
<Button onClick={onCancel} borderRadius="md">Cancel</Button>
|
||||
)
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
// DEPRECATED
|
||||
|
||||
// import GlobalMap from "./views/GlobalMap";
|
||||
// import RegionalMap from "./views/RegionalMap";
|
||||
// import Volcano from "./views/Volcano";
|
||||
// import Admin from "./views/Admin";
|
||||
// import Account from "./views/Account"
|
||||
// import Home from "./views/Home";
|
||||
// import { DASHBOARD_VIEWS, ADMIN_VIEWS, VOLCANO_VIEWS } from "@/constants/viewKeys";
|
||||
// import { chakra } from "@chakra-ui/react";
|
||||
// import Personal from "./views/Personal";
|
||||
// import Security from "./views/Security";
|
||||
//
|
||||
// export default function Canvas(props) {
|
||||
// const { view } = props;
|
||||
//
|
||||
// return (
|
||||
// <chakra.div width="100%" height="100%">
|
||||
// {/* Check if view is a tab inside the Home Header */}
|
||||
// { DASHBOARD_VIEWS.includes(view) && (
|
||||
// <Home {...props}/>
|
||||
// )}
|
||||
// {/* Check if view is a tab inside the Volcano Header */}
|
||||
// { VOLCANO_VIEWS.includes(view) && (
|
||||
// <Volcano {...props}/>
|
||||
// )}
|
||||
// {/* Check if view is a tab inside the Admin Header */}
|
||||
// { ADMIN_VIEWS.includes(view) && (
|
||||
// <Admin {...props}/>
|
||||
// )}
|
||||
// {view === "global" && <GlobalMap />}
|
||||
// {view === "regional" && <RegionalMap />}
|
||||
// {view === "account" && <Account />}
|
||||
// {view === "settings" && <Personal />}
|
||||
// {view === "personal" && <Personal />}
|
||||
// {view === "security" && <Security />}
|
||||
// </chakra.div>
|
||||
// );
|
||||
// }
|
||||
@@ -1,27 +0,0 @@
|
||||
import { MoveDiagonal2 } from 'lucide-react';
|
||||
import React from "react";
|
||||
|
||||
const CustomResizeHandle = React.forwardRef((props, ref) => {
|
||||
const { handleAxis, isVisable, ...restProps } = props;
|
||||
if (!isVisable) return null;
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
{...restProps}
|
||||
className={`resize-hande-${handleAxis}`}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
cursor: "pointer",
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
zIndex: "1",
|
||||
}}
|
||||
>
|
||||
<MoveDiagonal2 />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default CustomResizeHandle;
|
||||
@@ -1,95 +0,0 @@
|
||||
// DEPRECATED
|
||||
|
||||
// import Header from './Header/Header.jsx';
|
||||
// import Sidebar from './Sidebar/Sidebar.jsx';
|
||||
// import Canvas from './Canvas/Canvas.jsx';
|
||||
// import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react';
|
||||
// import { useState } from 'react';
|
||||
// import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
|
||||
//
|
||||
// export default function Dashboard() {
|
||||
// const recipe = useRecipe({ key: "dashboard" });
|
||||
// const styles = recipe();
|
||||
//
|
||||
// const [darkMode, setDarkMode] = useState(false);
|
||||
// const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
|
||||
// const [isDelete, setIsDelete] = useState(false);
|
||||
// const [originalLayout, setOriginalLayout] = useState([]);
|
||||
// const [originalWidgets, setOriginalWidgets] = useState([]);
|
||||
// const [view, setView] = useState("mydashboard");
|
||||
// const [layout, setLayout] = useState([]);
|
||||
// const [widgetArray, setWidgetArray] = useState([]);
|
||||
// const dialog = useDialog();
|
||||
//
|
||||
// const beginEditIfNeeded = () => {
|
||||
// if ( !isEditable ) {
|
||||
// setOriginalLayout(layout);
|
||||
// setOriginalWidgets(widgetArray);
|
||||
// }
|
||||
// };
|
||||
//
|
||||
// const onCancel = () => {
|
||||
// console.log("canceling changes...");
|
||||
// console.log(originalWidgets);
|
||||
// if (originalLayout.length) {
|
||||
// setLayout(originalLayout.map(item => ({
|
||||
// ...item,
|
||||
// static: true
|
||||
// })));
|
||||
// };
|
||||
// setWidgetArray(originalWidgets);
|
||||
// setIsEditable(false);
|
||||
// setIsDelete(false);
|
||||
// setOriginalLayout([]);
|
||||
// setOriginalWidgets([]);
|
||||
// }
|
||||
//
|
||||
// // Prevent navigation while in Edit mode without saving or cancelling
|
||||
// const handleViewChange = (nextView) => {
|
||||
// console.log("1. handling view change")
|
||||
// if (view === "mydashboard" && isEditable) {
|
||||
// console.log("2. currently editing");
|
||||
// dialog.setOpen(true);
|
||||
// return;
|
||||
//
|
||||
// // const confirmed = window.confirm(
|
||||
// // "You have unsaved changes. Discard them and continue?"
|
||||
// // );
|
||||
// // if (!confirmed) return;
|
||||
// // onCancel();
|
||||
// }
|
||||
// setView(nextView);
|
||||
// };
|
||||
//
|
||||
// const onLayoutChange = (newLayout) => setLayout(newLayout);
|
||||
//
|
||||
// // Prop Forwarding
|
||||
// const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange,
|
||||
// onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, originalWidgets, setOriginalWidgets, beginEditIfNeeded
|
||||
// };
|
||||
// const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode };
|
||||
// const headerProps = { onChangeView: handleViewChange };
|
||||
//
|
||||
// return (
|
||||
// <>
|
||||
// <DialogPopup dialog={dialog} />
|
||||
// <Grid css={styles}
|
||||
// templateRows="1fr 11fr"
|
||||
// // templateColumns="1fr 20fr"
|
||||
// templateColumns="auto 1fr"
|
||||
// height="100vh"
|
||||
// width="100vw"
|
||||
// >
|
||||
// <GridItem rowSpan={1} colSpan={2}>
|
||||
// <Header {...headerProps}/>
|
||||
// </GridItem>
|
||||
// <GridItem colSpan={1}>
|
||||
// <Sidebar {...sidebarProps}/>
|
||||
// </GridItem>
|
||||
// <GridItem colSpan={1} width="100%" overflow="auto">
|
||||
// <Canvas {...canvasProps}/>
|
||||
// </GridItem>
|
||||
// </Grid>
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
@@ -1,9 +0,0 @@
|
||||
import { Button } from "@chakra-ui/react";
|
||||
|
||||
export default function DeleteAllButton ({onDeleteAll}) {
|
||||
return (
|
||||
<Button onClick={onDeleteAll} color="#FFFFFF" bg="#EF4444" _hover={{ bg: "bg.error", color: "#EF4444"}}>
|
||||
Delete All
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import { Box, Menu, Portal } from '@chakra-ui/react'
|
||||
import AlertLevel from "@/components/deprecated/AlertLevelWidget.jsx";
|
||||
|
||||
export default function FirstWidgetButton({ appendWidget }) {
|
||||
const triggerItem = (
|
||||
<>
|
||||
<Menu.Trigger asChild>
|
||||
<Box
|
||||
p={6}
|
||||
m="auto"
|
||||
mt={6}
|
||||
align="center"
|
||||
textAlign="center"
|
||||
justify="center"
|
||||
width="400px"
|
||||
borderRadius="md"
|
||||
boxShadow="md"
|
||||
border="2px dashed"
|
||||
borderColor="gray.300"
|
||||
bg="gray.50"
|
||||
cursor="pointer"
|
||||
_hover = {{
|
||||
bg: "gray.100",
|
||||
borderColor: "gray.400",
|
||||
boxShadow: "lg",
|
||||
}}
|
||||
>
|
||||
Add Your First Widget
|
||||
</Box>
|
||||
</Menu.Trigger>
|
||||
</>
|
||||
);
|
||||
const positioning = { placement: "bottom-middle" };
|
||||
// const WidgetMenuProps = { appendWidget, triggerItem, positioning };
|
||||
return (
|
||||
// <WidgetMenu {...WidgetMenuProps} />
|
||||
<Menu.Root positioning={positioning}>
|
||||
{triggerItem}
|
||||
<Portal>
|
||||
<Menu.Positioner>
|
||||
<Menu.Content>
|
||||
<Menu.Item
|
||||
value="AlertLevel"
|
||||
onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)} // width and height are passed through here for each widget
|
||||
>
|
||||
Alert Level
|
||||
</Menu.Item>
|
||||
<Menu.Item value="CO2">CO2</Menu.Item>
|
||||
<Menu.Item value="Ivans">IVANS</Menu.Item>
|
||||
<Menu.Item value="PlumeHeights">Plume Heights</Menu.Item>
|
||||
<Menu.Item value="AlertLevelChanges">Alert Level Changes</Menu.Item>
|
||||
</Menu.Content>
|
||||
</Menu.Positioner>
|
||||
</Portal>
|
||||
</Menu.Root>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { Button } from "@chakra-ui/react";
|
||||
|
||||
export function SaveButton ({onSave}) {
|
||||
return (
|
||||
<Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
|
||||
)
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
|
||||
import { Undo } from 'lucide-react';
|
||||
|
||||
export default function Widget(props) {
|
||||
// deconstructing props
|
||||
const { id, title, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit, children } = props;
|
||||
|
||||
const recipe = useSlotRecipe({ key: "widget" });
|
||||
const styles = recipe();
|
||||
|
||||
return (
|
||||
<Flex flexDirection="column" w="100%" h="auto">
|
||||
{/* HEADER */}
|
||||
<Flex css={styles.header} cursor={isEditable ? "move":"default"} flexDirection="row" w="100%" h="auto" justifyContent="space-between" alignItems="center">
|
||||
<Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
|
||||
{isDelete ? (
|
||||
<CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
|
||||
):(
|
||||
isSubmit ? (
|
||||
<IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><Undo fill="text" /></IconButton>
|
||||
):null
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{/* CHILDREN */}
|
||||
<Flex w="100%" h="auto">
|
||||
{children}
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
import { Menu, Portal } from "@chakra-ui/react";
|
||||
import AlertLevel from "./AlertLevelWidget.jsx";
|
||||
|
||||
export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
|
||||
return (
|
||||
<Menu.Root positioning={positioning}>
|
||||
{triggerItem}
|
||||
<Portal>
|
||||
<Menu.Positioner>
|
||||
<Menu.Content>
|
||||
<Menu.Item
|
||||
value="AlertLevel"
|
||||
onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)} // width and height are passed through here for each widget
|
||||
>
|
||||
Alert Level
|
||||
</Menu.Item>
|
||||
<Menu.Item value="CO2">CO2</Menu.Item>
|
||||
<Menu.Item value="Ivans">IVANS</Menu.Item>
|
||||
<Menu.Item value="PlumeHeights">Plume Heights</Menu.Item>
|
||||
<Menu.Item value="AlertLevelChanges">Alert Level Changes</Menu.Item>
|
||||
</Menu.Content>
|
||||
</Menu.Positioner>
|
||||
</Portal>
|
||||
</Menu.Root>
|
||||
)
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react'
|
||||
import * as React from 'react'
|
||||
|
||||
export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
||||
const {
|
||||
showArrow,
|
||||
children,
|
||||
disabled,
|
||||
portalled = true,
|
||||
content,
|
||||
contentProps,
|
||||
portalRef,
|
||||
...rest
|
||||
} = props
|
||||
|
||||
if (disabled) return children
|
||||
|
||||
return (
|
||||
<ChakraTooltip.Root {...rest}>
|
||||
<ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
|
||||
<Portal disabled={!portalled} container={portalRef}>
|
||||
<ChakraTooltip.Positioner>
|
||||
<ChakraTooltip.Content ref={ref} {...contentProps}>
|
||||
{showArrow && (
|
||||
<ChakraTooltip.Arrow>
|
||||
<ChakraTooltip.ArrowTip />
|
||||
</ChakraTooltip.Arrow>
|
||||
)}
|
||||
{content}
|
||||
</ChakraTooltip.Content>
|
||||
</ChakraTooltip.Positioner>
|
||||
</Portal>
|
||||
</ChakraTooltip.Root>
|
||||
)
|
||||
})
|
||||
@@ -1,60 +1,65 @@
|
||||
import { HStack, Flex, Box } from "@chakra-ui/react";
|
||||
import {HStack, Flex, Box, useRecipe} from "@chakra-ui/react";
|
||||
import {NavLink, Outlet, useLocation} from "react-router-dom";
|
||||
import {SearchBar} from "../../components/dashboard/SearchBar.jsx";
|
||||
import {SettingsButton} from "../../components/dashboard/SettingsButton.jsx";
|
||||
|
||||
// 1. Import your icons (Swap these for whichever you prefer!)
|
||||
import {LayoutDashboard, CalendarDays, Cloud, Satellite, Activity} from "lucide-react";
|
||||
|
||||
// 2. Define the tabs array
|
||||
const HOME_TABS = [
|
||||
{name: "My Dashboard", url: "/home", icon: LayoutDashboard, exact: true},
|
||||
{name: "Daily Activity", url: "/home/daily", icon: CalendarDays},
|
||||
{name: "Gas", url: "/home/gas", icon: Cloud},
|
||||
{name: "Remote Sensing", url: "/home/remote", icon: Satellite},
|
||||
{name: "Seismic", url: "/home/seismic", icon: Activity},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
const recipe = useRecipe({key: "glassTab"});
|
||||
const tabStyles = recipe();
|
||||
|
||||
const location = useLocation();
|
||||
const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";
|
||||
|
||||
// 1. CSS making this look like how we want it, TODO turn to theme?
|
||||
const tabStyles = {
|
||||
fontSize: "lg",
|
||||
fontWeight: "bold",
|
||||
color: "fg.muted",
|
||||
px: 2, // Horizontal padding
|
||||
// py: 2, // Vertical padding
|
||||
borderBottom: "1px solid transparent",
|
||||
transition: "all 0.2s",
|
||||
_hover: { color: "fg" },
|
||||
|
||||
"&.active": { // Target the active class applied by React Router NavLink
|
||||
color: "fg",
|
||||
borderColor: "fg",
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex direction="column" height="100%" width="100%">
|
||||
|
||||
{/* 2. 🛠️ SUB HEADER: Matches your original padding and background */}
|
||||
<Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="transparent" p={5} align="center" justify="space-between" width="100%">
|
||||
<Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="transparent" p={5} align="center"
|
||||
justify="space-between" width="100%">
|
||||
|
||||
{/* TABS CONTAINER */}
|
||||
<Flex gap={2} alignItems="center">
|
||||
{HOME_TABS.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
return (
|
||||
<Box
|
||||
key={tab.name}
|
||||
as={NavLink}
|
||||
to={tab.url}
|
||||
end={tab.exact} // CRITICAL: Forces exact match so "/home" deactivates on sub-routes
|
||||
css={tabStyles}
|
||||
>
|
||||
{/* flexShrink: 0 ensures the icon never squishes during the gooey animation */}
|
||||
<Icon size={24} style={{flexShrink: 0}}/>
|
||||
<Box as="span">{tab.name}</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
|
||||
{isPersonalDashboard && <SettingsButton/>}
|
||||
|
||||
{/* TABS CONTAINER - Replicates the Tabs.List line container */}
|
||||
<Flex borderBottom="1px solid" borderColor="fg.muted" gap={2}>
|
||||
<Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
|
||||
<Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</Box>
|
||||
<Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
|
||||
<Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
|
||||
<Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
|
||||
</Flex>
|
||||
|
||||
{/* EDIT MODE BUTTONS & CONTROLS */}
|
||||
{/* Leaving this HStack here in case you plan to put the SearchBar or other global tools back on the right side */}
|
||||
<HStack width="258px" justifyContent="flex-end">
|
||||
{isPersonalDashboard ? (
|
||||
<>
|
||||
<SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
|
||||
{/* This will eventually trigger your Zustand store's edit mode! */}
|
||||
<SettingsButton />
|
||||
</>
|
||||
) : (
|
||||
<SettingsButton />
|
||||
)}
|
||||
{/* Future global controls go here */}
|
||||
</HStack>
|
||||
|
||||
</Flex>
|
||||
|
||||
{/* 3. 🛠️ CANVAS AREA */}
|
||||
<Flex flex="1" overflow="auto">
|
||||
<Outlet/>
|
||||
</Flex>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Box, Text, Flex, IconButton, Spinner, Popover } from "@chakra-ui/react";
|
||||
import {Box, Text, Flex, IconButton, Spinner, Popover, useSlotRecipe} from "@chakra-ui/react";
|
||||
import {X, MoreVertical} from "lucide-react";
|
||||
import {Responsive, WidthProvider} from "react-grid-layout";
|
||||
import {useDashboardStore} from "@/store/useDashboardStore.jsx";
|
||||
@@ -33,9 +33,10 @@ export default function MyDashboard() {
|
||||
// 🔒 Safety lock to prevent infinite re-renders
|
||||
const hasHydrated = useRef(false);
|
||||
|
||||
// ==========================================
|
||||
// INITIAL LOAD: Grab data from Django
|
||||
// ==========================================
|
||||
// 1. Pull the new global slot recipe
|
||||
const recipe = useSlotRecipe({key: "glassPanel"});
|
||||
const styles = recipe({ layout: "widget" });
|
||||
|
||||
useEffect(() => {
|
||||
if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
|
||||
const savedLayout = user.preferences.dashboard_layout;
|
||||
@@ -45,7 +46,6 @@ export default function MyDashboard() {
|
||||
if (Array.isArray(savedLayout)) {
|
||||
setWidgets(savedLayout);
|
||||
}
|
||||
|
||||
hasHydrated.current = true;
|
||||
}
|
||||
}, [user, setWidgets]);
|
||||
@@ -72,17 +72,9 @@ export default function MyDashboard() {
|
||||
const SettingsUI = registryEntry.settingsComponent;
|
||||
|
||||
return (
|
||||
// The "Frame" that holds both the Title and the Chart
|
||||
<Flex direction="column" height="100%" width="100%" bg={frameBg}>
|
||||
|
||||
{/* THE TITLE BAR */}
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
px={3}
|
||||
py={2}
|
||||
>
|
||||
<Text color={titleColor} fontWeight="semibold" fontSize="md" isTruncated>
|
||||
<>
|
||||
<Box css={styles.header}>
|
||||
<Text color="titleColor" fontWeight="semibold" fontSize="md" isTruncated>
|
||||
{registryEntry.name}
|
||||
</Text>
|
||||
|
||||
@@ -94,6 +86,7 @@ export default function MyDashboard() {
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
color="gray.400"
|
||||
borderRadius="xl"
|
||||
_hover={{color: "white", bg: "gray.700"}}
|
||||
aria-label="Widget Settings"
|
||||
>
|
||||
@@ -116,21 +109,18 @@ export default function MyDashboard() {
|
||||
) : (
|
||||
<Box w="20px" h="20px"/>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{/* THE CHART CANVAS */}
|
||||
<Box flex="1" overflow="hidden" position="relative" p={1}>
|
||||
{/* Pass the settings object into the actual chart component */}
|
||||
<Component settings={widget.settings || {}} />
|
||||
</Box>
|
||||
|
||||
</Flex>
|
||||
<Box css={styles.body}>
|
||||
<Component settings={widget.settings || {}}/>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Fallback if someone asks for a widget that doesn't exist
|
||||
return (
|
||||
<Flex width="100%" height="100%" align="center" justify="center" direction="column" bg="gray.800">
|
||||
<Flex css={styles.body} align="center" justify="center" direction="column">
|
||||
<Text fontWeight="bold" color="red.400">Error</Text>
|
||||
<Text fontSize="sm" color="gray.400">Widget '{widget.type}' not found.</Text>
|
||||
</Flex>
|
||||
@@ -154,11 +144,12 @@ export default function MyDashboard() {
|
||||
{widgets.map(widget => (
|
||||
<Box
|
||||
key={widget.id}
|
||||
borderRadius="md"
|
||||
boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing
|
||||
border={isEditing ? "2px dashed gray" : "1px solid"}
|
||||
borderColor={isEditing ? "gray.400" : "gray.200"}
|
||||
overflow="hidden"
|
||||
css={styles.root}
|
||||
// 3. Grid-specific state overrides remain inline
|
||||
boxShadow={isEditing ? "outline" : styles.root.boxShadow}
|
||||
borderStyle={isEditing ? "dashed" : "solid"}
|
||||
borderWidth={isEditing ? "2px" : "1px"}
|
||||
borderColor={isEditing ? "gray.400" : styles.root.borderColor}
|
||||
cursor={isEditing ? "grab" : "default"}
|
||||
position="relative" // 3. REQUIRED so the absolute button stays inside this box
|
||||
>
|
||||
@@ -171,8 +162,9 @@ export default function MyDashboard() {
|
||||
right={2}
|
||||
size="xs"
|
||||
bg="white"
|
||||
color={iconColor}
|
||||
color="black"
|
||||
border="1px solid"
|
||||
borderRadius="xl"
|
||||
borderColor="gray.200"
|
||||
_hover={{bg: "red.50", color: "red.500", borderColor: "red.200"}}
|
||||
zIndex={2}
|
||||
@@ -186,13 +178,12 @@ export default function MyDashboard() {
|
||||
|
||||
{/* 4. SUSPENSE BOUNDARY wrapping the render function */}
|
||||
<Suspense fallback={
|
||||
<Flex w="100%" h="100%" align="center" justify="center" bg="gray.800">
|
||||
<Flex css={styles.body} align="center" justify="center">
|
||||
<Spinner size="md" color="blue.400" thickness="3px"/>
|
||||
</Flex>
|
||||
}>
|
||||
{renderWidget(widget)}
|
||||
</Suspense>
|
||||
|
||||
</Box>
|
||||
))}
|
||||
</ResponsiveGridLayout>
|
||||
|
||||
+151
-9
@@ -16,7 +16,7 @@ const headerRecipe = defineRecipe({
|
||||
|
||||
const dashboardRecipe = defineRecipe({
|
||||
base: {
|
||||
bg: "{testBackground}"
|
||||
bg: "{MainBackground}"
|
||||
}
|
||||
});
|
||||
|
||||
@@ -33,7 +33,10 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
base: {
|
||||
root: {
|
||||
// 1. Semi-transparent backgrounds
|
||||
bg: { base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)" },
|
||||
bg: {
|
||||
base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)",
|
||||
_dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)"
|
||||
},
|
||||
|
||||
// 2. The glass blur effect
|
||||
backdropFilter: "blur(12px)",
|
||||
@@ -94,11 +97,11 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
borderLeftRadius: "4xl",
|
||||
|
||||
"&.active": {
|
||||
bg: "{testBackground}",
|
||||
bg: "{MainBackground}",
|
||||
color: "{textInverted}",
|
||||
|
||||
_hover: {
|
||||
bg: "{testBackground}",
|
||||
bg: "{MainBackground}",
|
||||
color: "{textInverted}",
|
||||
fontWeight: "normal",
|
||||
"& svg": {
|
||||
@@ -114,7 +117,7 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
top: "-25px",
|
||||
width: "25px",
|
||||
height: "25px",
|
||||
bg: "inherit", // This forces the curve to match {testButton}
|
||||
bg: "inherit",
|
||||
WebkitMaskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
|
||||
maskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
|
||||
pointerEvents: "none",
|
||||
@@ -176,6 +179,142 @@ const widgetRecipe = defineSlotRecipe({
|
||||
}
|
||||
});
|
||||
|
||||
// const glassPanelRecipe = defineSlotRecipe({
|
||||
// slots: ["root", "header", "body"],
|
||||
// base: {
|
||||
// root: {
|
||||
// // Structure
|
||||
// display: "flex",
|
||||
// flexDirection: "column",
|
||||
// width: "100%",
|
||||
// height: "100%",
|
||||
// position: "relative",
|
||||
// overflow: "hidden",
|
||||
// borderRadius: "3xl",
|
||||
//
|
||||
// // Glass Aesthetics (Syncs nicely with your sidebar/tabs)
|
||||
// bg: { base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)" },
|
||||
// backdropFilter: "blur(12px)",
|
||||
// WebkitBackdropFilter: "blur(12px)",
|
||||
// border: "1px solid",
|
||||
// borderColor: { base: "gray.200", _dark: "whiteAlpha.200" },
|
||||
// boxShadow: "sm",
|
||||
// },
|
||||
// header: {
|
||||
// display: "flex",
|
||||
// justifyContent: "space-between",
|
||||
// alignItems: "center",
|
||||
// px: 3,
|
||||
// py: 2,
|
||||
// },
|
||||
// body: {
|
||||
// flex: "1",
|
||||
// overflow: "hidden",
|
||||
// position: "relative",
|
||||
// p: 1,
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
const glassPanelRecipe = defineSlotRecipe({
|
||||
slots: ["root", "header", "body"],
|
||||
|
||||
// 🧊 THE GLASS MATH (Applies to everything)
|
||||
base: {
|
||||
root: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
|
||||
backdropFilter: "blur(12px)",
|
||||
WebkitBackdropFilter: "blur(12px)",
|
||||
border: "1px solid",
|
||||
borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
|
||||
boxShadow: "sm",
|
||||
}
|
||||
},
|
||||
|
||||
// 📏 THE LAYOUTS (Applies selectively)
|
||||
variants: {
|
||||
layout: {
|
||||
widget: {
|
||||
root: {width: "100%", height: "100%", borderRadius: "3xl"},
|
||||
header: {display: "flex", justifyContent: "space-between", alignItems: "center", px: 3, pt: 2, pb: 0},
|
||||
body: {flex: "1", overflow: "hidden", position: "relative", px: 1, pb: 1, pt: 0}
|
||||
},
|
||||
dropdown: {
|
||||
root: {borderRadius: "xl", p: 1}
|
||||
// (Header and body slots are ignored here because dropdowns don't use them)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
defaultVariants: {
|
||||
layout: "widget"
|
||||
}
|
||||
});
|
||||
const glassTabRecipe = defineRecipe({
|
||||
base: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
height: "40px",
|
||||
|
||||
// The Circle State (Inactive)
|
||||
maxWidth: "40px",
|
||||
minWidth: "40px",
|
||||
px: "8px",
|
||||
gap: 2,
|
||||
|
||||
// CRITICAL: Locks the shape to a perfect circle/pill
|
||||
borderRadius: "full",
|
||||
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textDecoration: "none",
|
||||
fontWeight: "bold",
|
||||
color: "fg.muted",
|
||||
|
||||
// --- THE GLASS EFFECT (Inactive) ---
|
||||
// Uses a highly transparent white/black depending on mode
|
||||
bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.03)"},
|
||||
backdropFilter: "blur(12px)",
|
||||
WebkitBackdropFilter: "blur(12px)",
|
||||
border: "1px solid",
|
||||
borderColor: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.08)"},
|
||||
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.02)", // Tiny shadow to lift it off the canvas
|
||||
|
||||
transition: "all 0.85s cubic-bezier(0.34, 1.56, 0.64, 1)",
|
||||
|
||||
"&:hover, &[data-state='open'], &[aria-expanded='true']": {
|
||||
maxWidth: "250px",
|
||||
pr: "16px",
|
||||
// --- THE GLASS EFFECT (Hover) ---
|
||||
// Becomes slightly more opaque when you mouse over
|
||||
bg: {base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)"},
|
||||
borderColor: {base: "rgba(0, 0, 0, 0.1)", _dark: "rgba(255, 255, 255, 0.15)"},
|
||||
color: "fg",
|
||||
textDecoration: "none",
|
||||
},
|
||||
|
||||
"&.active": {
|
||||
maxWidth: "250px",
|
||||
pr: "16px",
|
||||
|
||||
bg: "{gooeyButtonBackground}",
|
||||
borderColor: "transparent",
|
||||
color: "{textInverted}",
|
||||
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)", // Stronger shadow for the active tab
|
||||
|
||||
_hover: {
|
||||
bg: "{gooeyButtonBackground}",
|
||||
cursor: "default",
|
||||
textDecoration: "none",
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const config = defineConfig({
|
||||
globalCss: {
|
||||
".react-grid-placeholder": {
|
||||
@@ -261,10 +400,11 @@ const config = defineConfig({
|
||||
text: {value: {base: "#000000", _dark: "#FFFFFF"}},
|
||||
textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}},
|
||||
icon: {value: {base: "#000000", _dark: "#FFFFFF"}},
|
||||
testBackground: { value: {base: "#F9F9F9", _dark: "#141414"} },
|
||||
testSidebar: { value: {base: "#FBFBFB", _dark: "#272421"} },
|
||||
testButton: { value: {base: "#FFFFFF", _dark: "#C09754"} },
|
||||
|
||||
gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}},
|
||||
MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}},
|
||||
titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}},
|
||||
iconColor: {value: {base: "gray.600", _dark: "#000000"}},
|
||||
glassSeperator: {value: {base: "#0000001A", _dark: "#FFFFFF3F"}},
|
||||
},
|
||||
},
|
||||
tokens: {
|
||||
@@ -276,10 +416,12 @@ const config = defineConfig({
|
||||
header: headerRecipe,
|
||||
dashboard: dashboardRecipe,
|
||||
canvas: canvasRecipe,
|
||||
glassTab: glassTabRecipe
|
||||
},
|
||||
slotRecipes: {
|
||||
sidebar: sidebarRecipe,
|
||||
widget: widgetRecipe,
|
||||
glassPanel: glassPanelRecipe,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user