chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor continuing to work on UI

Browse Source
This commit is contained in:
chight
2026-07-29 13:48:38 -07:00
parent 2283d156ea
commit 6d0af310ae
15 changed files with 545 additions and 812 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/home/Home.jsx
+53 -48
View File
@@ -1,64 +1,69 @@
import { HStack, Flex, Box } 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";
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%">
<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 - 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>
{/* 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>
);
})}
{/* EDIT MODE BUTTONS & CONTROLS */}
<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 />
)}
</HStack>
{/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
{isPersonalDashboard && <SettingsButton/>}
</Flex>
{/* 3. 🛠️ CANVAS AREA */}
<Flex flex="1" overflow="auto">
<Outlet />
</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">
{/* Future global controls go here */}
</HStack>
</Flex>
<Flex flex="1" overflow="auto">
<Outlet/>
</Flex>
</Flex>
);
}
client/src/pages/home/tabs/MyDashboard.jsx
+173 -182
View File
@@ -1,208 +1,199 @@
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';
import { useColorModeValue } from "@/components/ui/color-mode";
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";
import {Suspense, useEffect, useRef} from 'react';
import {useColorModeValue} from "@/components/ui/color-mode";
// 1. Import database messenger
import useAuthStore from "@/store/authStore";
// 2. Import registry
import { WIDGET_REGISTRY } from '@/constants/widgetRegistry.jsx';
import {WIDGET_REGISTRY} from '@/constants/widgetRegistry.jsx';
// React-Grid-Layout requires this wrapper to automatically calculate screen width
const ResponsiveGridLayout = WidthProvider(Responsive);
export default function MyDashboard() {
// 🌗 Let's adjust for our light and dark mode
const frameBg = useColorModeValue("FFFFFF0A", "#FFFFFF0A");
const titleColor = useColorModeValue("gray.800", "#FFFFFF");
const iconColor = useColorModeValue("gray.600", "#FFFFFF");
const iconHoverBg = useColorModeValue("gray.100", "gray.700");
// 🌗 Let's adjust for our light and dark mode
const frameBg = useColorModeValue("FFFFFF0A", "#FFFFFF0A");
const titleColor = useColorModeValue("gray.800", "#FFFFFF");
const iconColor = useColorModeValue("gray.600", "#FFFFFF");
const iconHoverBg = useColorModeValue("gray.100", "gray.700");
// ☁️ Database Connection
const { user } = useAuthStore();
// ☁️ Database Connection
const {user} = useAuthStore();
// ☁️ Local UI Connections
const widgets = useDashboardStore(state => state.widgets);
const isEditing = useDashboardStore(state => state.isEditing);
const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
const removeWidget = useDashboardStore(state => state.removeWidget);
const setWidgets = useDashboardStore(state => state.setWidgets); // The injection action
// ☁️ Local UI Connections
const widgets = useDashboardStore(state => state.widgets);
const isEditing = useDashboardStore(state => state.isEditing);
const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
const removeWidget = useDashboardStore(state => state.removeWidget);
const setWidgets = useDashboardStore(state => state.setWidgets); // The injection action
// 🔒 Safety lock to prevent infinite re-renders
const hasHydrated = useRef(false);
// 🔒 Safety lock to prevent infinite re-renders
const hasHydrated = useRef(false);
// ==========================================
// INITIAL LOAD: Grab data from Django
// ==========================================
useEffect(() => {
if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
const savedLayout = user.preferences.dashboard_layout;
// 1. Pull the new global slot recipe
const recipe = useSlotRecipe({key: "glassPanel"});
const styles = recipe({ layout: "widget" });
// Safety check: Only inject if it's actually an array of widgets.
// (Prevents a crash if MariaDB returns a default empty object {})
if (Array.isArray(savedLayout)) {
setWidgets(savedLayout);
}
useEffect(() => {
if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
const savedLayout = user.preferences.dashboard_layout;
hasHydrated.current = true;
}
}, [user, setWidgets]);
// Safety check: Only inject if it's actually an array of widgets.
// (Prevents a crash if MariaDB returns a default empty object {})
if (Array.isArray(savedLayout)) {
setWidgets(savedLayout);
}
hasHydrated.current = true;
}
}, [user, setWidgets]);
// 🛠️ Format the data for RGL
const rglLayout = widgets.map(w => ({
i: w.id,
x: w.x,
y: w.y,
w: w.w,
h: w.h,
isResizable: false // 🚫 The magic lock! No resizing allowed globally.
}));
// 🛠️ Format the data for RGL
const rglLayout = widgets.map(w => ({
i: w.id,
x: w.x,
y: w.y,
w: w.w,
h: w.h,
isResizable: false // 🚫 The magic lock! No resizing allowed globally.
}));
// 3. THE COMPONENT MAPPER
const renderWidget = (widget) => {
const registryEntry = WIDGET_REGISTRY[widget.type];
// 3. THE COMPONENT MAPPER
const renderWidget = (widget) => {
const registryEntry = WIDGET_REGISTRY[widget.type];
if (registryEntry && registryEntry.component) {
const Component = registryEntry.component;
if (registryEntry && registryEntry.component) {
const Component = registryEntry.component;
// 1. Check if this widget type has a settings component registered
const SettingsUI = registryEntry.settingsComponent;
// 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={frameBg}>
return (
<>
<Box css={styles.header}>
<Text color="titleColor" fontWeight="semibold" fontSize="md" isTruncated>
{registryEntry.name}
</Text>
{/* THE TITLE BAR */}
<Flex
justify="space-between"
align="center"
px={3}
py={2}
>
<Text color={titleColor} fontWeight="semibold" fontSize="md" isTruncated>
{registryEntry.name}
</Text>
{/* THE SETTINGS ELLIPSIS */}
{SettingsUI ? (
<Popover.Root positioning={{placement: "bottom-end"}}>
<Popover.Trigger asChild>
<IconButton
size="xs"
variant="ghost"
color="gray.400"
borderRadius="xl"
_hover={{color: "white", bg: "gray.700"}}
aria-label="Widget Settings"
>
<MoreVertical size={16}/>
</IconButton>
</Popover.Trigger>
{/* 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>
{/* 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>
);
}
// 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">
<Text fontWeight="bold" color="red.400">Error</Text>
<Text fontSize="sm" color="gray.400">Widget '{widget.type}' not found.</Text>
</Flex>
);
};
return (
<Box width="100%" height="100%">
<ResponsiveGridLayout
className="layout"
layouts={{ lg: rglLayout }} // We feed it the formatted layout map
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} // Our 12-column master grid
rowHeight={30}
isDraggable={isEditing} // Only allows dragging when Settings tools toggle this
isResizable={false} // Double lock-down
onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
compactType="vertical" // Auto-packs widgets to the top
>
{/* 3. 🎨 Paint the Widgets */}
{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"
cursor={isEditing ? "grab" : "default"}
position="relative" // 3. REQUIRED so the absolute button stays inside this box
>
{/* 4. THE DELETE BUTTON */}
{isEditing && (
<IconButton
aria-label="Remove widget"
position="absolute"
top={2}
right={2}
size="xs"
bg="white"
color={iconColor}
border="1px solid"
borderColor="gray.200"
_hover={{ bg: "red.50", color: "red.500", borderColor: "red.200" }}
zIndex={2}
onClick={() => removeWidget(widget.id)}
onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
>
<X size={14} />
</IconButton>
)}
{/* 4. SUSPENSE BOUNDARY wrapping the render function */}
<Suspense fallback={
<Flex w="100%" h="100%" align="center" justify="center" bg="gray.800">
<Spinner size="md" color="blue.400" thickness="3px" />
</Flex>
}>
{renderWidget(widget)}
</Suspense>
</Box>
))}
</ResponsiveGridLayout>
{/* Empty State Helper */}
{widgets.length === 0 && (
<Flex width="100%" height="200px" align="center" justify="center">
<Text color="gray.400">Your dashboard is empty. Click Settings to add widgets.</Text>
</Flex>
{/* 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"/>
)}
</Box>
</Box>
<Box css={styles.body}>
<Component settings={widget.settings || {}}/>
</Box>
</>
);
}
// Fallback if someone asks for a widget that doesn't exist
return (
<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>
);
};
return (
<Box width="100%" height="100%">
<ResponsiveGridLayout
className="layout"
layouts={{lg: rglLayout}} // We feed it the formatted layout map
breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}} // Our 12-column master grid
rowHeight={30}
isDraggable={isEditing} // Only allows dragging when Settings tools toggle this
isResizable={false} // Double lock-down
onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
compactType="vertical" // Auto-packs widgets to the top
>
{/* 3. 🎨 Paint the Widgets */}
{widgets.map(widget => (
<Box
key={widget.id}
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
>
{/* 4. THE DELETE BUTTON */}
{isEditing && (
<IconButton
aria-label="Remove widget"
position="absolute"
top={2}
right={2}
size="xs"
bg="white"
color="black"
border="1px solid"
borderRadius="xl"
borderColor="gray.200"
_hover={{bg: "red.50", color: "red.500", borderColor: "red.200"}}
zIndex={2}
onClick={() => removeWidget(widget.id)}
onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
>
<X size={14}/>
</IconButton>
)}
{/* 4. SUSPENSE BOUNDARY wrapping the render function */}
<Suspense fallback={
<Flex css={styles.body} align="center" justify="center">
<Spinner size="md" color="blue.400" thickness="3px"/>
</Flex>
}>
{renderWidget(widget)}
</Suspense>
</Box>
))}
</ResponsiveGridLayout>
{/* Empty State Helper */}
{widgets.length === 0 && (
<Flex width="100%" height="200px" align="center" justify="center">
<Text color="gray.400">Your dashboard is empty. Click Settings to add widgets.</Text>
</Flex>
)}
</Box>
);
}