feat(silo): added in charts and historical data

frontend/src/components/layout/lst-sidebar.tsx

@@ -1,19 +1,24 @@
-import {Sidebar, SidebarContent, SidebarFooter, SidebarTrigger} from "../ui/sidebar";
-import {ProductionSideBar} from "./side-components/production";
-import {Header} from "./side-components/header";
-import {LogisticsSideBar} from "./side-components/logistics";
-import {QualitySideBar} from "./side-components/quality";
-import {ForkliftSideBar} from "./side-components/forklift";
-import {EomSideBar} from "./side-components/eom";
-import {AdminSideBar} from "./side-components/admin";
-import {useSessionStore} from "../../lib/store/sessionStore";
-import {hasAccess} from "../../utils/userAccess";
-import {moduleActive} from "../../utils/moduleActive";
-import {useModuleStore} from "../../lib/store/useModuleStore";
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarTrigger,
+} from "../ui/sidebar";
+import { ProductionSideBar } from "./side-components/production";
+import { Header } from "./side-components/header";
+import { LogisticsSideBar } from "./side-components/logistics";
+import { QualitySideBar } from "./side-components/quality";
+import { ForkliftSideBar } from "./side-components/forklift";
+import { EomSideBar } from "./side-components/eom";
+import { AdminSideBar } from "./side-components/admin";
+import { useSessionStore } from "../../lib/store/sessionStore";
+import { hasAccess } from "../../utils/userAccess";
+import { moduleActive } from "../../utils/moduleActive";
+import { useModuleStore } from "../../lib/store/useModuleStore";
 
 export function AppSidebar() {
-    const {user} = useSessionStore();
-    const {modules} = useModuleStore();
+    const { user } = useSessionStore();
+    const { modules } = useModuleStore();
 
     return (
         <Sidebar collapsible="icon">
@@ -22,19 +27,31 @@ export function AppSidebar() {
                 {moduleActive("production") && (
                     <ProductionSideBar
                         user={user}
-                        moduleID={modules.filter((n) => n.name === "production")[0].module_id as string}
+                        moduleID={
+                            modules.filter((n) => n.name === "production")[0]
+                                .module_id as string
+                        }
                     />
                 )}
                 {moduleActive("logistics") && (
                     <LogisticsSideBar
                         user={user}
-                        moduleID={modules.filter((n) => n.name === "logistics")[0].module_id as string}
+                        moduleID={
+                            modules.filter((n) => n.name === "logistics")[0]
+                                .module_id as string
+                        }
                     />
                 )}
-                {moduleActive("forklift") && hasAccess(user, "forklift", modules) && <ForkliftSideBar />}
-                {moduleActive("eom") && hasAccess(user, "eom", modules) && <EomSideBar />}
-                {moduleActive("quality") && hasAccess(user, "quality", modules) && <QualitySideBar />}
-                {moduleActive("admin") && hasAccess(user, "admin", modules) && <AdminSideBar />}
+                {moduleActive("forklift") &&
+                    hasAccess(user, "forklift", modules) && <ForkliftSideBar />}
+                {moduleActive("eom") && hasAccess(user, "eom", modules) && (
+                    <EomSideBar />
+                )}
+                {moduleActive("quality") &&
+                    hasAccess(user, "quality", modules) && <QualitySideBar />}
+                {moduleActive("admin") && hasAccess(user, "admin", modules) && (
+                    <AdminSideBar />
+                )}
             </SidebarContent>
             <SidebarFooter>
                 <SidebarTrigger />

frontend/src/components/logistics/siloAdjustments/ChartData.tsx

@@ -0,0 +1,113 @@
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+
+import { CardContent } from "@/components/ui/card";
+
+import {
+    ChartConfig,
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+} from "@/components/ui/chart";
+import { useQuery } from "@tanstack/react-query";
+import { getAdjustments } from "@/utils/querys/logistics/siloAdjustments/getAdjustments";
+import { LstCard } from "@/components/extendedUI/LstCard";
+import { format } from "date-fns";
+
+export default function ChartData(props: any) {
+    const { data, isError, isLoading } = useQuery(getAdjustments());
+    const chartConfig = {
+        stock: {
+            label: "Stock",
+            color: "rgb(255, 99, 132)",
+        },
+        actual: {
+            label: "Actual",
+            color: "rgb(53, 162, 235)",
+        },
+    } satisfies ChartConfig;
+
+    if (isLoading) return <div>Loading chart data</div>;
+    if (isError) return <div>Error in loading chart data</div>;
+
+    let adjustments: any = data.filter(
+        (l: any) => l.locationID === props.laneId
+    );
+    adjustments = adjustments.splice(0, 10).map((s: any) => {
+        return {
+            date: format(s.dateAdjusted.replace("Z", ""), "M/d/yyyy hh:mm"),
+            stock: s.currentStockLevel,
+            actual: s.newLevel,
+        };
+    });
+
+    return (
+        <LstCard className="w-[425px] h-[250px] m-1">
+            <CardContent>
+                {adjustments.length === 0 ? (
+                    <span>No silo data has been entered for this silo.</span>
+                ) : (
+                    <ChartContainer config={chartConfig}>
+                        <AreaChart
+                            accessibilityLayer
+                            data={adjustments}
+                            margin={{
+                                left: 35,
+                                right: 45,
+                                bottom: 50,
+                            }}
+                        >
+                            <CartesianGrid vertical={false} />
+                            <XAxis
+                                dataKey="date"
+                                tickLine={false}
+                                axisLine={false}
+                                tickMargin={14}
+                                angle={-45}
+                                textAnchor="end"
+                                dy={10}
+                                tickFormatter={(value) =>
+                                    format(value, "M/d/yyyy")
+                                }
+                            />
+                            <ChartTooltip
+                                cursor={false}
+                                content={
+                                    <ChartTooltipContent indicator="dot" />
+                                }
+                            />
+                            <Area
+                                dataKey="stock"
+                                type="natural"
+                                fill="rgba(53, 162, 235, 0.5)"
+                                fillOpacity={0.4}
+                                stroke="rgba(53, 162, 235, 0.5)"
+                                stackId="a"
+                            />
+                            <Area
+                                dataKey="actual"
+                                type="natural"
+                                fill="rgba(255, 99, 132, 0.5)"
+                                fillOpacity={0.4}
+                                stroke="rgba(255, 99, 132, 0.5)"
+                                stackId="a"
+                            />
+                        </AreaChart>
+                    </ChartContainer>
+                )}
+            </CardContent>
+            {/* <CardFooter>
+                <div className="flex w-full items-start gap-2 text-sm">
+                    <div className="grid gap-2">
+                        <div className="flex items-center gap-2 font-medium leading-none">
+                            Trending up by 5.2% this month{" "}
+                            <TrendingUp className="h-4 w-4" />
+                        </div>
+                        <div className="flex items-center gap-2 leading-none text-muted-foreground">
+                            January - June 2024
+                        </div>
+                    </div>
+                </div>
+            </CardFooter> */}
+        </LstCard>
+    );
+}

frontend/src/components/logistics/siloAdjustments/HistoricalData.tsx

@@ -0,0 +1,28 @@
+import { getAdjustments } from "@/utils/querys/logistics/siloAdjustments/getAdjustments";
+import { columns } from "@/utils/tableData/siloAdjustmentHist/siloAdjHist";
+import { DataTable } from "@/utils/tableData/siloAdjustmentHist/siloDate";
+import { useQuery } from "@tanstack/react-query";
+
+export default function HistoricalData(props: any) {
+    const { data, isError, isLoading } = useQuery(getAdjustments());
+
+    if (isLoading) return <div>Loading adjustmnet data...</div>;
+    if (isError) {
+        return (
+            <div>
+                <p>There was an error getting the adjustments.</p>
+            </div>
+        );
+    }
+    //console.log(data[0].locationID, parseInt(props.laneId));
+    const adjustments: any = data.filter(
+        (l: any) => l.locationID === parseInt(props.laneId)
+    );
+
+    console.log(adjustments);
+    return (
+        <div className="container mx-auto py-10">
+            <DataTable columns={columns} data={adjustments} />
+        </div>
+    );
+}

frontend/src/components/logistics/siloAdjustments/SiloCard.tsx

@@ -12,11 +12,13 @@ import {
 import { getStockSilo } from "@/utils/querys/logistics/siloAdjustments/getStockSilo";
 import { useForm } from "@tanstack/react-form";
 import { useQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
 import axios from "axios";
 import { format } from "date-fns";
 import { CircleAlert } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
+import ChartData from "./ChartData";
 
 export default function SiloCard(data: any) {
     const token = localStorage.getItem("auth_token");
@@ -183,9 +185,17 @@ export default function SiloCard(data: any) {
                         )}
                     </div>
                 </LstCard>
-                <div className="grow max-w-[400px]">
-                    <LstCard className="m-1 ">charts go here</LstCard>
-                    <LstCard className="m-1">extra options here</LstCard>
+                <div className="grow max-w-[600px]">
+                    <ChartData laneId={silo.LocationID} />
+
+                    <div className="flex justify-end m-1">
+                        <Link
+                            to={"/siloAdjustments/$hist"}
+                            params={{ hist: silo.LocationID }}
+                        >
+                            Historical Data
+                        </Link>
+                    </div>
                 </div>
             </div>
         </LstCard>