116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
import Box from "@mui/material/Box";
|
|
import Breadcrumbs from "@mui/material/Breadcrumbs";
|
|
import Button from "@mui/material/Button";
|
|
import Card from "@mui/material/Card";
|
|
import CardContent from "@mui/material/CardContent";
|
|
import Divider from "@mui/material/Divider";
|
|
import Link from "@mui/material/Link";
|
|
import Grid from "@mui/material/Grid2";
|
|
import Typography from "@mui/material/Typography";
|
|
import AddIcon from "@mui/icons-material/Add";
|
|
import { Home } from "@mui/icons-material";
|
|
import ReactTable from "../components/ReactTable";
|
|
import { ColumnDef } from "@tanstack/react-table";
|
|
import IconButton from "../components/IconButton";
|
|
import { Edit } from "iconsax-react";
|
|
import useTitle from "../hooks/useTitle";
|
|
import { useFishboneStore } from "../stores/fishboneStore";
|
|
import { FishboneDataTable } from "../types/fishbone.types";
|
|
import FlashMessage from "../components/FlashMessage";
|
|
import { useEffect, useMemo } from "react";
|
|
|
|
export default function Fishbone() {
|
|
useTitle("Fishbone");
|
|
|
|
const { data, cacheExpired, getAll } = useFishboneStore();
|
|
|
|
const columns: ColumnDef<FishboneDataTable>[] = useMemo(
|
|
() => [
|
|
{
|
|
header: "Backbone",
|
|
accessorKey: "backbone",
|
|
},
|
|
{
|
|
header: "Device Start",
|
|
accessorKey: "device_start",
|
|
},
|
|
{
|
|
header: "Device End",
|
|
accessorKey: "device_end",
|
|
},
|
|
{
|
|
header: "Address",
|
|
accessorKey: "address",
|
|
},
|
|
{
|
|
header: "Core used",
|
|
accessorKey: "core_amount",
|
|
},
|
|
{
|
|
header: "",
|
|
accessorKey: "action",
|
|
enableSorting: false,
|
|
cell: ({ row }) => (
|
|
<>
|
|
<IconButton
|
|
variant="text"
|
|
color="secondary"
|
|
href={`/fishbone/${row.original.id}`}
|
|
>
|
|
<Edit variant="Bulk" color="currentColor" />
|
|
</IconButton>
|
|
</>
|
|
),
|
|
},
|
|
],
|
|
[]
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (cacheExpired()) {
|
|
(async () => {
|
|
await getAll();
|
|
})();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<Box component="main">
|
|
<Grid container spacing={2} alignItems={"center"} mb={4}>
|
|
<Grid size="grow">
|
|
<Typography variant="h3">Fishbone</Typography>
|
|
</Grid>
|
|
<Grid size="auto">
|
|
<Button
|
|
href="/fishbone/create"
|
|
variant="contained"
|
|
startIcon={<AddIcon color="inherit" />}
|
|
>
|
|
Add New
|
|
</Button>
|
|
</Grid>
|
|
<Grid size={12}>
|
|
<Breadcrumbs aria-label="breadcrumb">
|
|
<Link underline="hover" color="inherit" href="/dashboard">
|
|
<Home />
|
|
</Link>
|
|
<Typography sx={{ color: "text.primary" }}>Fishbone</Typography>
|
|
</Breadcrumbs>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<FlashMessage store={useFishboneStore} />
|
|
|
|
<Card>
|
|
<Box sx={{ p: 2 }}>
|
|
<Typography variant="h5">List Devices</Typography>
|
|
</Box>
|
|
<Divider />
|
|
<CardContent sx={{ flex: "1 0 auto", pt: 2, px: 0 }}>
|
|
<ReactTable data={data || []} columns={columns} />
|
|
</CardContent>
|
|
</Card>
|
|
</Box>
|
|
);
|
|
}
|