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

added tabs and file restructure

Browse Source
This commit is contained in:
vkuchenik
2025-07-24 08:52:20 -07:00
parent 0ca419a093
commit 1d5b00448b
13 changed files with 184 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/Canvas/Canvas.jsx
+11 -13
View File
@@ -1,25 +1,23 @@
// This Canvas component will be used to dynamically populate
// the main canvas section of the web App with a default state
// of 'WidgetCanvas'
// of 'DashboardCanvas'
import { Box } from "@chakra-ui/react";
import CanvasHeader from "./CanvasHeader";
import WidgetCanvas from "./views/WidgetCanvas";
import GlobalMapCanvas from "./views/GlobalMapCanvas";
import RegionalMapCanvas from "./views/RegionalMapCanvas";
import VolcanoCanvas from "./views/VolcanoCanvas";
import AdminCanvas from "./views/AdminCanvas";
import { DashboardCanvas } from "./views/DashboardCanvas";
export default function Canvas({ view }) {
return (
<Box height="100%" width="100%">
<CanvasHeader />
{view === "widget" && <WidgetCanvas />}
{view === "global" && <GlobalMapCanvas />}
{view === "regional" && <RegionalMapCanvas />}
{view === "volcano" && <VolcanoCanvas />}
{view === "admin" && <AdminCanvas />}
</Box>
);
return (
<Box height="100%" width="100%">
{view === "widget" && <DashboardCanvas />}
{view === "global" && <GlobalMapCanvas />}
{view === "regional" && <RegionalMapCanvas />}
{view === "volcano" && <VolcanoCanvas />}
{view === "admin" && <AdminCanvas />}
</Box>
);
}
client/src/components/layout/Canvas/CanvasHeader.jsx
-33
View File
@@ -1,33 +0,0 @@
import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react";
import { CanvasHeaderNav } from "./CanvasHeaderNav";
import { SearchBar } from "./SearchBar";
import { SettingsButton } from "./SettingsButton";
export default function CanvasHeader() {
const recipe = useRecipe({ key: "canvas" });
const styles = recipe();
return (
<chakra.div css={styles}>
<Flex
as="header"
position="sticky"
top="0"
bg="base200"
borderBottom="1px solid"
borderColor="gray.200"
px={6}
py={3}
align="center"
justify="space-between"
>
<CanvasHeaderNav />
<HStack spacing={3}>
<SearchBar />
<SettingsButton />
</HStack>
</Flex>
</chakra.div>
);
}
client/src/components/layout/Canvas/CanvasHeaderNav.jsx
-22
View File
@@ -1,22 +0,0 @@
import { HStack, Link } from "@chakra-ui/react"
const navItems = [
{ label: "My Dashboard", href: "#dashboard" },
{ label: "Gas", href: "#gas" },
{ label: "Seismic", href: "#seismic" },
{ label: "Remote Sensing", href: "#remote" },
{ label: "Daily Activity", href: "#daily" },
];
export function CanvasHeaderNav() {
return (
<HStack as="nav" gap="8">
{navItems.map(({ label, href }) => (
<Link key={href} href={href} fontWeight="medium">
{label}
</Link>
))}
</HStack>
);
}
client/src/components/layout/Canvas/SearchBar.jsx → client/src/components/layout/Canvas/components/SearchBar.jsx
View File
client/src/components/layout/Canvas/SettingsButton.jsx → client/src/components/layout/Canvas/components/SettingsButton.jsx
View File
client/src/components/layout/Canvas/Widget.jsx → client/src/components/layout/Canvas/components/Widget.jsx
View File
client/src/components/layout/Canvas/views/AdminCanvas.jsx
+20 -20
View File
@@ -1,24 +1,24 @@
import { Box, Text } from '@chakra-ui/react';
export default function AdminCanvas() {
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">
Admin Canvas coming soon!
</Text>
</Box>
</Box>
);
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">
Admin Canvas coming soon!
</Text>
</Box>
</Box>
);
}
client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+64
View File
@@ -0,0 +1,64 @@
import { HStack, Flex, Tabs } from "@chakra-ui/react";
import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas";
import { SearchBar } from "../components/SearchBar";
import { SettingsButton } from "../components/SettingsButton";
import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
import { Gas } from "./DashboardCanvasNav/Gas";
import { Seismic } from "./DashboardCanvasNav/Seismic";
import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
export function DashboardCanvas() {
return (
<Tabs.Root defaultValue="my dashboard">
<Flex
as="header"
position="sticky"
top="0"
bg="base200"
px={6}
py={3}
align="center"
justify="space-between"
>
<Tabs.List>
<Tabs.Trigger value="my dashboard">
My Dashboard
</Tabs.Trigger>
<Tabs.Trigger value="gas">
Gas
</Tabs.Trigger>
<Tabs.Trigger value="seismic">
Seismic
</Tabs.Trigger>
<Tabs.Trigger value="remote sensing">
Remote Sensing
</Tabs.Trigger>
<Tabs.Trigger value="daily activity">
Daily Activity
</Tabs.Trigger>
</Tabs.List>
<HStack>
<SearchBar />
<SettingsButton />
</HStack>
</Flex>
<Tabs.Content value="my dashboard">
<WidgetCanvas />
</Tabs.Content>
<Tabs.Content value="gas">
<Gas />
</Tabs.Content>
<Tabs.Content value="seismic">
<Seismic />
</Tabs.Content>
<Tabs.Content value="remote sensing">
<RemoteSensing />
</Tabs.Content>
<Tabs.Content value="daily activity">
<DailyActivity />
</Tabs.Content>
</Tabs.Root>
);
}
client/src/components/layout/Canvas/views/DashboardCanvasNav/DailyActivity.jsx
+22
View File
@@ -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>
);
}
client/src/components/layout/Canvas/views/DashboardCanvasNav/Gas.jsx
+22
View File
@@ -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>
);
}
client/src/components/layout/Canvas/views/DashboardCanvasNav/RemoteSensing.jsx
+22
View File
@@ -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>
);
}
client/src/components/layout/Canvas/views/DashboardCanvasNav/Seismic.jsx
+22
View File
@@ -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>
);
}
client/src/components/layout/Canvas/views/WidgetCanvas.jsx → client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx
+1 -1
View File
@@ -4,7 +4,7 @@
import { useState } from 'react';
import GridLayout, { WidthProvider } from 'react-grid-layout';
import Widget from '../Widget.jsx';
import Widget from '../../components/Widget.jsx';
import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
export default function WidgetCanvas() {