Refactor made changes to file structures
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
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";
|
||||
|
||||
export default function Home() {
|
||||
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: "normal",
|
||||
color: "fg.muted",
|
||||
px: 4, // Horizontal padding
|
||||
py: 2, // Vertical padding
|
||||
borderBottom: "2px solid transparent",
|
||||
mb: "-2px", // 🔥 The trick: Pulls the active border down to overlap the container's line
|
||||
transition: "all 0.2s",
|
||||
_hover: { color: "fg" },
|
||||
_activeLink: {
|
||||
color: "color", // Or whatever your primary text color is
|
||||
borderColor: "currentColor", // The active underline
|
||||
}
|
||||
};
|
||||
|
||||
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="base200" p={5} align="center" justify="space-between" width="100%">
|
||||
|
||||
{/* TABS CONTAINER - Replicates the Tabs.List line container */}
|
||||
<Flex borderBottom="2px solid" borderColor="border.muted" gap={2}>
|
||||
<Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
|
||||
<Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
|
||||
<Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
|
||||
<Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
|
||||
<Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</Box>
|
||||
</Flex>
|
||||
|
||||
{/* 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 />
|
||||
</>
|
||||
) : (
|
||||
<SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
</Flex>
|
||||
|
||||
{/* 3. 🛠️ CANVAS AREA */}
|
||||
<Flex flex="1" overflow="auto">
|
||||
<Outlet />
|
||||
</Flex>
|
||||
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function DailyActivity() {
|
||||
return(
|
||||
<Box p={8} mt={4} ml="auto" mr="auto" width="600px">
|
||||
<Box
|
||||
bg="bg"
|
||||
shadow="md"
|
||||
borderRadius="md"
|
||||
p={8}
|
||||
width="600px"
|
||||
height="100px"
|
||||
textAlign="center"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text fontsize="2xl" fontWeight="bold" color="gray.700">Daily Activity dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function Gas() {
|
||||
return(
|
||||
<Box p={8} mt={4} ml="auto" mr="auto" width="600px">
|
||||
<Box
|
||||
bg="bg"
|
||||
shadow="md"
|
||||
borderRadius="md"
|
||||
p={8}
|
||||
width="600px"
|
||||
height="100px"
|
||||
textAlign="center"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text fontsize="2xl" fontWeight="bold" color="gray.700">Gas dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Box, Text, Flex } from "@chakra-ui/react";
|
||||
import { Responsive, WidthProvider } from "react-grid-layout";
|
||||
import { useDashboardStore } from "@/store/useDashboardStore.jsx";
|
||||
|
||||
// React-Grid-Layout requires this wrapper to automatically calculate screen width
|
||||
const ResponsiveGridLayout = WidthProvider(Responsive);
|
||||
|
||||
export default function MyDashboard() {
|
||||
// 1. ☁️ Connect to the Cloud (Zustand)
|
||||
const widgets = useDashboardStore(state => state.widgets);
|
||||
const isEditing = useDashboardStore(state => state.isEditing);
|
||||
const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
|
||||
|
||||
// 2. 🛠️ Format the data for RGL
|
||||
// RGL expects a very specific array format for its layout prop
|
||||
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.
|
||||
}));
|
||||
|
||||
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 your 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}
|
||||
bg="white"
|
||||
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"}
|
||||
>
|
||||
{/* 🚧 Temporary Placeholder!
|
||||
Eventually, we will swap this block out for a dynamic component loader
|
||||
that looks at widget.type and loads the correct graph or table.
|
||||
*/}
|
||||
<Flex width="100%" height="100%" align="center" justify="center" direction="column">
|
||||
<Text fontWeight="bold" color="gray.600">{widget.type}</Text>
|
||||
<Text fontSize="sm" color="gray.400">Size: {widget.size}</Text>
|
||||
</Flex>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function RemoteSensing() {
|
||||
return(
|
||||
<Box p={8} mt={4} ml="auto" mr="auto" width="600px">
|
||||
<Box
|
||||
bg="bg"
|
||||
shadow="md"
|
||||
borderRadius="md"
|
||||
p={8}
|
||||
width="600px"
|
||||
height="100px"
|
||||
textAlign="center"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text fontsize="2xl" fontWeight="bold" color="gray.700">Remote Sensing dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Box, Text } from "@chakra-ui/react";
|
||||
|
||||
export function Seismic() {
|
||||
return(
|
||||
<Box p={8} mt={4} ml="auto" mr="auto" width="600px">
|
||||
<Box
|
||||
bg="bg"
|
||||
shadow="md"
|
||||
borderRadius="md"
|
||||
p={8}
|
||||
width="600px"
|
||||
height="100px"
|
||||
textAlign="center"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text fontsize="2xl" fontWeight="bold" color="gray.700">Seismic dashboard coming soon.</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user