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

Add new tabs and views under Admin sidebar tab

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-08-13 15:18:03 -07:00
parent 54530f324f
commit c496396092
7 changed files with 242 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/Canvas.jsx
+6 -3
View File
@@ -4,7 +4,7 @@ import Volcano from "./views/Volcano";
import Admin from "./views/Admin";
import Account from "./views/Account"
import Home from "./views/Home";
import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
import { DASHBOARD_VIEWS, ADMIN_VIEWS } from "@/constants/viewKeys";
import { chakra } from "@chakra-ui/react";
import Personal from "./views/Personal";
import Security from "./views/Security";
@@ -13,14 +13,17 @@ export default function Canvas(props) {
const { view } = props;
return (
<chakra.div width="100%" height="100%">
{/* Check if view is a tab inside the Canvas Header */}
{/* Check if view is a tab inside the Home Header */}
{ DASHBOARD_VIEWS.includes(view) && (
<Home {...props}/>
)}
{/* Check if view is a tab inside the Admin Header */}
{ ADMIN_VIEWS.includes(view) && (
<Admin {...props}/>
)}
{view === "global" && <GlobalMap />}
{view === "regional" && <RegionalMap />}
{view === "volcano" && <Volcano />}
{view === "admin" && <Admin />}
{view === "account" && <Account />}
{view === "settings" && <Personal />}
{view === "personal" && <Personal />}
client/src/components/Canvas/views/Admin.jsx
+140 -20
View File
@@ -1,24 +1,144 @@
import { Box, Text } from '@chakra-ui/react';
import { Box, Text, Flex, Tabs, HStack } from '@chakra-ui/react';
import { MEDataEntry } from './AdminTabs/MEDataEntry';
import { ProjectCollector } from './AdminTabs/ProjectCollector';
import { NASApplication } from './AdminTabs/NASApplication';
import { IVANS } from './AdminTabs/IVANS'
import { SearchBar } from "../CanvasComponents/SearchBar";
import { SettingsButton } from "../CanvasComponents/SettingsButton";
export default function Admin() {
export default function Admin({ view, onChangeView, onEditWidgets, appendWidget }) {
// Prop Forwarding
// const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, setOriginalWidgets,
// isDelete, setIsDelete, beginEditIfNeeded, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
// const MyDashboardProps = { layout, onLayoutChange, isEditable, beginEditIfNeeded, isDelete, DeleteWidget, widgetArray, appendWidget };
const settingsButtonProps = { onEditWidgets, appendWidget };
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"
/* HEADER */
<Tabs.Root
width="100%"
height="100%"
lazyMount
value={ view }
variant="line"
// Prevent navigation away from 'My Dashboard' while in Edit mode
onValueChange={(e) => {
const nextView = e.value;
onChangeView(nextView);
}}
>
<Flex
as="header"
position="sticky"
top="0"
zIndex="dropdown" // zIndex: 1100
bg="base200"
px={5}
pt={3}
pb={2}
align="center"
justify="space-between"
width="100%"
>
<Text fontsize="2xl" fontWeight="bold" color="gray.700">
Admin Canvas coming soon!
</Text>
</Box>
</Box>
<Tabs.List>
<Tabs.Trigger value="medataentry" fontSize="lg">
M&E Data Entry
</Tabs.Trigger>
<Tabs.Trigger value="projectcollector" fontSize="lg">
Project Collector
</Tabs.Trigger>
<Tabs.Trigger value="nasapplication" fontSize="lg">
NAS Application
</Tabs.Trigger><Tabs.Trigger value="ivans" fontSize="lg">
IVANS
</Tabs.Trigger>
</Tabs.List>
<HStack width="258px" justifyContent="flex-end">
<SearchBar />
<SettingsButton {...settingsButtonProps}/>
</HStack>
</Flex>
{/* CANVAS */}
<Tabs.Content value="medataentry">
<MEDataEntry />
</Tabs.Content>
<Tabs.Content value="projectcollector">
<ProjectCollector />
</Tabs.Content>
<Tabs.Content value="nasapplication">
<NASApplication />
</Tabs.Content>
<Tabs.Content value="ivans">
<IVANS />
</Tabs.Content>
</Tabs.Root>
);
}
}
// return (
// /* HEADER */
// <Tabs.Root
// width="100%"
// height="100%"
// lazyMount
// value={ view }
// variant="line"
// // Prevent navigation away from 'My Dashboard' while in Edit mode
// onValueChange={(e) => {
// const nextView = e.value;
// onChangeView(nextView);
// }}
// >
// <Flex
// as="header"
// position="sticky"
// top="0"
// zIndex="dropdown" // zIndex: 1100
// bg="base200"
// px={5}
// pt={3}
// pb={2}
// align="center"
// justify="space-between"
// width="100%"
// >
// <Tabs.List>
// <Tabs.Trigger value="medataentry" fontSize="lg">
// M&E Data Entry
// </Tabs.Trigger>
// <Tabs.Trigger value="projectcollector" fontSize="lg">
// Project Collector
// </Tabs.Trigger>
// <Tabs.Trigger value="nasapplication" fontSize="lg">
// NAS Application
// </Tabs.Trigger><Tabs.Trigger value="ivans" fontSize="lg">
// IVANS
// </Tabs.Trigger>
// </Tabs.List>
// <HStack width="258px" justifyContent="flex-end">
// <SearchBar />
// <SettingsButton onEditWidgets={onEditWidgets} appendWidget={appendWidget}/>
// </HStack>
// </Flex>
// {/* CANVAS */}
// <Tabs.Content value="medataentry">
// <MEDataEntry />
// </Tabs.Content>
// <Tabs.Content value="projectcollector">
// <ProjectCollector />
// </Tabs.Content>
// <Tabs.Content value="nasapplication">
// <NASApplication />
// </Tabs.Content>
// <Tabs.Content value="ivans">
// <IVANS />
// </Tabs.Content>
// </Tabs.Root>
// );
// }
client/src/components/Canvas/views/AdminTabs/IVANS.jsx
+22
View File
@@ -0,0 +1,22 @@
import { Box, Text } from "@chakra-ui/react";
export function IVANS() {
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">IVANS dashboard coming soon.</Text>
</Box>
</Box>
);
}
client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx
+22
View File
@@ -0,0 +1,22 @@
import { Box, Text } from "@chakra-ui/react";
export function MEDataEntry() {
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">M&E Data Entry dashboard coming soon.</Text>
</Box>
</Box>
);
}
client/src/components/Canvas/views/AdminTabs/NASApplication.jsx
+22
View File
@@ -0,0 +1,22 @@
import { Box, Text } from "@chakra-ui/react";
export function NASApplication() {
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">NAS Application dashboard coming soon.</Text>
</Box>
</Box>
);
}
client/src/components/Canvas/views/AdminTabs/ProjectCollector.jsx
+22
View File
@@ -0,0 +1,22 @@
import { Box, Text } from "@chakra-ui/react";
export function ProjectCollector() {
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">Project Collector dashboard coming soon.</Text>
</Box>
</Box>
);
}
client/src/constants/viewKeys.js
+8 -1
View File
@@ -1,6 +1,9 @@
// Main views called from Sidebar
// Main views called from Home tab -> Canvas navigation header
export const DASHBOARD_VIEWS = ["mydashboard", "gas", "seismic", "remote", "daily"]
// Admin views called from Admin tab -> Canvas navigation header
export const ADMIN_VIEWS = ["admin", "medataentry", "projectcollector", "nasapplication", "ivans"]
// Sub views called from inside Home.jsx
export const VIEW_LABELS = {
mydashboard: "My Dashboard",
@@ -12,4 +15,8 @@ export const VIEW_LABELS = {
regional: "Regional Map",
volcano: "Volcano",
admin: "Admin",
medataentry: "M&E Data Entry",
projectcollector: "Project Collector",
nasapplication: "NAS Application",
ivans: "IVANS"
};