+>(({ className, ...props }, ref) => (
+ | [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+};
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 00000000..52d563ac
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "../../lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
new file mode 100644
index 00000000..e4591255
--- /dev/null
+++ b/src/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+ "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+ {
+ variants: {
+ variant: {
+ default: "border bg-background text-foreground",
+ destructive:
+ "destructive group border-destructive bg-destructive text-destructive-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+);
+
+const Toast = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, ...props }, ref) => {
+ return (
+
+ );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef;
+
+type ToastActionElement = React.ReactElement;
+
+export {
+ type ToastProps,
+ type ToastActionElement,
+ ToastProvider,
+ ToastViewport,
+ Toast,
+ ToastTitle,
+ ToastDescription,
+ ToastClose,
+ ToastAction,
+};
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
new file mode 100644
index 00000000..80fc7975
--- /dev/null
+++ b/src/components/ui/toaster.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+import {
+ Toast,
+ ToastClose,
+ ToastDescription,
+ ToastProvider,
+ ToastTitle,
+ ToastViewport,
+} from "../../components/ui/toast";
+import { useToast } from "../../components/ui/use-toast";
+
+export function Toaster() {
+ const { toasts } = useToast();
+
+ return (
+
+ {toasts.map(function ({ id, title, description, action, ...props }) {
+ return (
+
+
+ {title && {title}}
+ {description && (
+ {description}
+ )}
+
+ {action}
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/src/components/ui/use-toast.ts b/src/components/ui/use-toast.ts
new file mode 100644
index 00000000..60ed9f0a
--- /dev/null
+++ b/src/components/ui/use-toast.ts
@@ -0,0 +1,189 @@
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "../../components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+ id: string;
+ title?: React.ReactNode;
+ description?: React.ReactNode;
+ action?: ToastActionElement;
+};
+
+const actionTypes = {
+ ADD_TOAST: "ADD_TOAST",
+ UPDATE_TOAST: "UPDATE_TOAST",
+ DISMISS_TOAST: "DISMISS_TOAST",
+ REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+ count = (count + 1) % Number.MAX_SAFE_INTEGER;
+ return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+ | {
+ type: ActionType["ADD_TOAST"];
+ toast: ToasterToast;
+ }
+ | {
+ type: ActionType["UPDATE_TOAST"];
+ toast: Partial;
+ }
+ | {
+ type: ActionType["DISMISS_TOAST"];
+ toastId?: ToasterToast["id"];
+ }
+ | {
+ type: ActionType["REMOVE_TOAST"];
+ toastId?: ToasterToast["id"];
+ };
+
+interface State {
+ toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map>();
+
+const addToRemoveQueue = (toastId: string) => {
+ if (toastTimeouts.has(toastId)) {
+ return;
+ }
+
+ const timeout = setTimeout(() => {
+ toastTimeouts.delete(toastId);
+ dispatch({
+ type: "REMOVE_TOAST",
+ toastId: toastId,
+ });
+ }, TOAST_REMOVE_DELAY);
+
+ toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+ switch (action.type) {
+ case "ADD_TOAST":
+ return {
+ ...state,
+ toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+ };
+
+ case "UPDATE_TOAST":
+ return {
+ ...state,
+ toasts: state.toasts.map((t) =>
+ t.id === action.toast.id ? { ...t, ...action.toast } : t
+ ),
+ };
+
+ case "DISMISS_TOAST": {
+ const { toastId } = action;
+
+ // ! Side effects ! - This could be extracted into a dismissToast() action,
+ // but I'll keep it here for simplicity
+ if (toastId) {
+ addToRemoveQueue(toastId);
+ } else {
+ state.toasts.forEach((toast) => {
+ addToRemoveQueue(toast.id);
+ });
+ }
+
+ return {
+ ...state,
+ toasts: state.toasts.map((t) =>
+ t.id === toastId || toastId === undefined
+ ? {
+ ...t,
+ open: false,
+ }
+ : t
+ ),
+ };
+ }
+ case "REMOVE_TOAST":
+ if (action.toastId === undefined) {
+ return {
+ ...state,
+ toasts: [],
+ };
+ }
+ return {
+ ...state,
+ toasts: state.toasts.filter((t) => t.id !== action.toastId),
+ };
+ }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+ memoryState = reducer(memoryState, action);
+ listeners.forEach((listener) => {
+ listener(memoryState);
+ });
+}
+
+type Toast = Omit;
+
+function toast({ ...props }: Toast) {
+ const id = genId();
+
+ const update = (props: ToasterToast) =>
+ dispatch({
+ type: "UPDATE_TOAST",
+ toast: { ...props, id },
+ });
+ const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+ dispatch({
+ type: "ADD_TOAST",
+ toast: {
+ ...props,
+ id,
+ open: true,
+ onOpenChange: (open) => {
+ if (!open) dismiss();
+ },
+ },
+ });
+
+ return {
+ id: id,
+ dismiss,
+ update,
+ };
+}
+
+function useToast() {
+ const [state, setState] = React.useState(memoryState);
+
+ React.useEffect(() => {
+ listeners.push(setState);
+ return () => {
+ const index = listeners.indexOf(setState);
+ if (index > -1) {
+ listeners.splice(index, 1);
+ }
+ };
+ }, [state]);
+
+ return {
+ ...state,
+ toast,
+ dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+ };
+}
+
+export { useToast, toast };
diff --git a/src/components/utils/generateExcel.ts b/src/components/utils/generateExcel.ts
new file mode 100644
index 00000000..4287b0f5
--- /dev/null
+++ b/src/components/utils/generateExcel.ts
@@ -0,0 +1,161 @@
+import ExcelJS from "exceljs";
+
+interface ExpItem {
+ id: number;
+ room_id: number;
+ item_id: number;
+ quantity: number;
+ uom: string;
+ expiry_date: string;
+ createdAt: string;
+ updatedAt: string;
+ item: { serial_num: string; item_name: string };
+ room: { name: string };
+}
+
+interface ParItem {
+ id: number;
+ itemTotal: number;
+ item_name: string;
+ par_level: number;
+ serial_num: string;
+}
+
+export interface AllItemsTable {
+ id: number;
+ serial_num: string;
+ item_name: string;
+ par_level: number;
+ room: string;
+ quantity: number;
+ uom: string;
+ expiry_date: string;
+}
+
+export const generateExpItemExcel = async (expItems: ExpItem[]) => {
+ const workbook = new ExcelJS.Workbook();
+ const worksheet = workbook.addWorksheet("ExpItems");
+
+ worksheet.columns = [
+ { header: "Serial No.", key: "serial_num", width: 20 },
+ { header: "Item Name", key: "item_name", width: 30 },
+ { header: "Room", key: "room_name", width: 20 },
+ { header: "Quantity", key: "quantity", width: 10 },
+ { header: "UOM", key: "uom", width: 10 },
+ { header: "Exp Date", key: "expiry_date", width: 15 },
+ ];
+
+ expItems.forEach((item) => {
+ worksheet.addRow({
+ serial_num: item.item.serial_num,
+ item_name: item.item.item_name,
+ room_name: item.room.name,
+ quantity: Number(item.quantity),
+ uom: item.uom,
+ expiry_date: new Date(item.expiry_date).toLocaleDateString(),
+ });
+ });
+
+ // Use a Blob to generate a file in-memory and trigger a download
+ const buffer = await workbook.xlsx.writeBuffer();
+ const blob = new Blob([buffer], {
+ type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+ });
+ const url = URL.createObjectURL(blob);
+
+ // Create a temporary anchor to trigger download
+ const anchor = document.createElement("a");
+ anchor.href = url;
+ anchor.download = "ExpItems.xlsx"; // Name of the file to be downloaded
+ document.body.appendChild(anchor); // Required for Firefox
+ anchor.click();
+
+ // Clean up
+ document.body.removeChild(anchor);
+ URL.revokeObjectURL(url);
+};
+
+export const generateParItemExcel = async (expItems: ParItem[]) => {
+ const workbook = new ExcelJS.Workbook();
+ const worksheet = workbook.addWorksheet("ParItems");
+
+ worksheet.columns = [
+ { header: "Serial No.", key: "serial_num", width: 20 },
+ { header: "Item Name", key: "item_name", width: 30 },
+ { header: "Par Level", key: "par", width: 10 },
+ { header: "Quantity", key: "quantity", width: 10 },
+ ];
+
+ expItems.forEach((item) => {
+ worksheet.addRow({
+ serial_num: item.serial_num,
+ item_name: item.item_name,
+ par: Number(item.par_level),
+ quantity: Number(item.itemTotal),
+ });
+ });
+
+ // Use a Blob to generate a file in-memory and trigger a download
+ const buffer = await workbook.xlsx.writeBuffer();
+ const blob = new Blob([buffer], {
+ type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+ });
+ const url = URL.createObjectURL(blob);
+
+ // Create a temporary anchor to trigger download
+ const anchor = document.createElement("a");
+ anchor.href = url;
+ anchor.download = "ParItems.xlsx"; // Name of the file to be downloaded
+ document.body.appendChild(anchor); // Required for Firefox
+ anchor.click();
+
+ // Clean up
+ document.body.removeChild(anchor);
+ URL.revokeObjectURL(url);
+};
+
+export const generateAllItemsTableExcel = async (allItems: any[]) => {
+ console.log(allItems);
+ const workbook = new ExcelJS.Workbook();
+ const worksheet = workbook.addWorksheet("AllItems");
+
+ worksheet.columns = [
+ { header: "Serial No.", key: "serial_num", width: 20 },
+ { header: "Item Name", key: "item_name", width: 30 },
+ { header: "Par Level", key: "par_level", width: 15 },
+ { header: "Room", key: "room", width: 15 },
+ { header: "Quantity", key: "quantity", width: 10 },
+ { header: "UOM", key: "uom", width: 10 },
+ { header: "Exp Date", key: "expiry_date", width: 15 },
+ ];
+
+ allItems.forEach((item) => {
+ worksheet.addRow({
+ serial_num: item.serial_num,
+ item_name: item.item_name,
+ par_level: item.par_level,
+ room: item.room,
+ quantity: Number(item.quantity),
+ uom: item.uom,
+ expiry_date: item.expiry_date,
+ });
+ });
+
+ // Use a Blob to generate a file in-memory and trigger a download
+ const buffer = await workbook.xlsx.writeBuffer();
+ const blob = new Blob([buffer], {
+ type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+ });
+ const url = URL.createObjectURL(blob);
+
+ // Create a temporary anchor to trigger download
+ const anchor = document.createElement("a");
+ anchor.href = url;
+ anchor.download = "AllItems.xlsx"; // Name of the file to be downloaded
+ document.body.appendChild(anchor); // Required for Firefox
+ anchor.click();
+
+ // Clean up
+ document.body.removeChild(anchor);
+ URL.revokeObjectURL(url);
+};
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 00000000..1cc46964
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1 @@
+export const BACKEND_URL = "http://localhost:3000";
diff --git a/src/firebase.ts b/src/firebase.ts
new file mode 100644
index 00000000..621cfdb8
--- /dev/null
+++ b/src/firebase.ts
@@ -0,0 +1,17 @@
+import { initializeApp } from "firebase/app";
+import { getStorage } from "firebase/storage";
+
+const firebaseConfig = {
+ apiKey: process.env.REACT_APP_API_API_KEY,
+ authDomain: process.env.REACT_APP_AUTHDOMAIN,
+ projectId: process.env.REACT_APP_PROJECT_ID,
+ storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
+ messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
+ appId: process.env.REACT_APP_APP_ID,
+ measurementId: process.env.REACT_APP_MEASUREMENT_ID,
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+export const storage = getStorage(app);
diff --git a/src/hooks/useBuildings.tsx b/src/hooks/useBuildings.tsx
new file mode 100644
index 00000000..f7223356
--- /dev/null
+++ b/src/hooks/useBuildings.tsx
@@ -0,0 +1,50 @@
+import { useUser } from "../components/UserContext";
+import { useAuthenticatedRequest } from "../authenticatedRequest";
+
+interface room {
+ id: number;
+ name: string;
+ left: number;
+ top: number;
+ height: number;
+ width: number;
+ building_id: number;
+ createdAt: string;
+ updatedAt: string;
+}
+interface user {
+ id: number;
+ building_id: number;
+ user_id: number;
+ admin: boolean;
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface building {
+ id: number;
+ name: string;
+ image_size: string;
+ building_img_url: string;
+ createdAt: string;
+ updatedAt: string;
+ rooms: room[];
+ users: user[];
+}
+
+export type buildingList = building[];
+
+export const useBuildings = () => {
+ const sendRequest = useAuthenticatedRequest();
+ const { userId } = useUser();
+
+ const fetchBuildings = async () => {
+ const fetchedBuildings = await sendRequest(`/buildings/${userId}`, {
+ method: "GET",
+ });
+ const fetchedBuildingsData = await fetchedBuildings.data;
+ return fetchedBuildingsData as buildingList;
+ };
+
+ return { fetchBuildings };
+};
diff --git a/src/hooks/useFetchFormData.tsx b/src/hooks/useFetchFormData.tsx
new file mode 100644
index 00000000..6735030a
--- /dev/null
+++ b/src/hooks/useFetchFormData.tsx
@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { useUser } from "../components/UserContext";
+import { useAuthenticatedRequest } from "../authenticatedRequest";
+
+export const useRooms = () => {
+ interface Room {
+ id: number;
+ name: string;
+ }
+
+ const [rooms, setRooms] = useState([]);
+ const [error, setError] = useState("");
+ const [isLoading, setIsLoading] = useState(true);
+ const { userId } = useUser();
+ const sendRequest = useAuthenticatedRequest();
+
+ useEffect(() => {
+ setIsLoading(true);
+
+ const fetchRooms = async () => {
+ try {
+ const roomsData = await sendRequest(`/allrooms/${userId}`, {
+ method: "GET",
+ });
+ setRooms(roomsData.data);
+ setIsLoading(false);
+ } catch (err) {
+ console.error(err);
+ setError((err as Error).message);
+ setIsLoading(false);
+ }
+ };
+
+ fetchRooms();
+ }, []);
+
+ return { rooms, error, isLoading };
+};
+
+export const useAllItems = () => {
+ interface Item {
+ id: number;
+ serial_num: string;
+ item_name: string;
+ par_level: number;
+ roomItems: {
+ id: number;
+ room_id: number;
+ item_id: number;
+ quantity: number;
+ uom: string;
+ expiry_date: Date;
+ room: {
+ name: string;
+ };
+ }[];
+ }
+ const [allItems, setAllItems] = useState([]);
+ const [error, setError] = useState("");
+ const [isLoading, setIsLoading] = useState(true);
+ const { userId } = useUser();
+ const sendRequest = useAuthenticatedRequest();
+
+ useEffect(() => {
+ const fetchAllItems = async () => {
+ setIsLoading(true);
+ try {
+ const allItemsData = await sendRequest(`/allitems/${userId}`, {
+ method: "GET",
+ });
+ setAllItems(allItemsData.data);
+ setIsLoading(false);
+ } catch (err) {
+ console.error(err);
+ setError((err as Error).message);
+ setIsLoading(false);
+ }
+ };
+
+ fetchAllItems();
+ }, []);
+ return { allItems, error, isLoading };
+};
diff --git a/src/index.css b/src/index.css
index 4a1df4db..3411c7b9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,75 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+@font-face {
+ font-family: "Geist";
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url("./lib/fonts/Geist-1.3.0/variable-ttf/GeistVF.ttf") format("ttf");
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 210 20% 98%;
+ --foreground: 210 25% 20%;
+ --card: 210 15% 95%;
+ --card-foreground: 210 30% 15%;
+ --popover: 210 20% 98%;
+ --popover-foreground: 210 25% 20%;
+ --primary: 210 30% 60%;
+ --primary-foreground: 210 20% 98%;
+ --secondary: 210 15% 85%;
+ --secondary-foreground: 210 40% 20%;
+ --muted: 210 10% 90%;
+ --muted-foreground: 210 20% 40%;
+ --accent: 195 25% 70%;
+ --accent-foreground: 210 20% 98%;
+ --destructive: 0 20% 70%;
+ --destructive-foreground: 210 20% 98%;
+ --border: 210 20% 88%;
+ --input: 210 25% 90%;
+ --ring: 210 30% 60%;
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 11.2%;
+
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+
+ --accent: 217.2 32.6% 17.5%;
+ --accent-foreground: 210 40% 98%;
+
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 212.7 26.8% 83.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index a64e7d56..00000000
--- a/src/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render();
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 00000000..be58a690
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import { Auth0Provider } from "@auth0/auth0-react";
+import { Toaster } from "./components/ui/toaster";
+import { UserProvider } from "./components/UserContext";
+
+const root = ReactDOM.createRoot(
+ document.getElementById("root") as HTMLElement
+);
+root.render(
+
+
+
+
+
+
+);
diff --git a/src/lib/fonts/Geist-1.3.0/LICENSE.TXT b/src/lib/fonts/Geist-1.3.0/LICENSE.TXT
new file mode 100644
index 00000000..df71062c
--- /dev/null
+++ b/src/lib/fonts/Geist-1.3.0/LICENSE.TXT
@@ -0,0 +1,92 @@
+Geist Sans and Geist Mono Font
+(C) 2023 Vercel, made in collaboration with basement.studio
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is available with a FAQ at: http://scripts.sil.org/OFL and copied below
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Black.otf b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Black.otf
new file mode 100644
index 00000000..a48677bd
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Black.otf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Bold.otf b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Bold.otf
new file mode 100644
index 00000000..46bc63b5
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Bold.otf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Light.otf b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Light.otf
new file mode 100644
index 00000000..408b6f8b
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Light.otf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Medium.otf b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Medium.otf
new file mode 100644
index 00000000..80d9f5c6
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Medium.otf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Regular.otf b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Regular.otf
new file mode 100644
index 00000000..dd118020
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Regular.otf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-SemiBold.otf b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-SemiBold.otf
new file mode 100644
index 00000000..c5f4210e
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-SemiBold.otf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Thin.otf b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Thin.otf
new file mode 100644
index 00000000..7292885b
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-Thin.otf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-UltraBlack.otf b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-UltraBlack.otf
new file mode 100644
index 00000000..9ae0c583
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-UltraBlack.otf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-UltraLight.otf b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-UltraLight.otf
new file mode 100644
index 00000000..6bd8dc6a
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-otf/Geist-UltraLight.otf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Black.ttf b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Black.ttf
new file mode 100644
index 00000000..1e12d25a
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Black.ttf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Bold.ttf b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Bold.ttf
new file mode 100644
index 00000000..5625c00a
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Bold.ttf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Light.ttf b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Light.ttf
new file mode 100644
index 00000000..21adca02
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Light.ttf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Medium.ttf b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Medium.ttf
new file mode 100644
index 00000000..90d2c717
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Medium.ttf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Regular.ttf b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Regular.ttf
new file mode 100644
index 00000000..a10d58ae
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Regular.ttf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-SemiBold.ttf b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-SemiBold.ttf
new file mode 100644
index 00000000..5732da7a
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-SemiBold.ttf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Thin.ttf b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Thin.ttf
new file mode 100644
index 00000000..adf7db76
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-Thin.ttf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-UltraBlack.ttf b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-UltraBlack.ttf
new file mode 100644
index 00000000..2320b8a4
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-UltraBlack.ttf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-UltraLight.ttf b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-UltraLight.ttf
new file mode 100644
index 00000000..208a1fff
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-ttf/Geist-UltraLight.ttf differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Black.woff b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Black.woff
new file mode 100644
index 00000000..ec90276b
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Black.woff differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Black.woff2 b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Black.woff2
new file mode 100644
index 00000000..0b7a8b47
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Black.woff2 differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Bold.woff b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Bold.woff
new file mode 100644
index 00000000..b9396830
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Bold.woff differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Bold.woff2 b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Bold.woff2
new file mode 100644
index 00000000..5f83f58f
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Bold.woff2 differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Light.woff b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Light.woff
new file mode 100644
index 00000000..8a3cdb87
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Light.woff differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Light.woff2 b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Light.woff2
new file mode 100644
index 00000000..8cf3acbf
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Light.woff2 differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Medium.woff b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Medium.woff
new file mode 100644
index 00000000..8cb98258
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Medium.woff differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Medium.woff2 b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Medium.woff2
new file mode 100644
index 00000000..a4a98d94
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Medium.woff2 differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Regular.woff b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Regular.woff
new file mode 100644
index 00000000..aed5f867
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Regular.woff differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Regular.woff2 b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Regular.woff2
new file mode 100644
index 00000000..23e992fe
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Regular.woff2 differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-SemiBold.woff b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-SemiBold.woff
new file mode 100644
index 00000000..a005d469
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-SemiBold.woff differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-SemiBold.woff2 b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-SemiBold.woff2
new file mode 100644
index 00000000..ca99ebfa
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-SemiBold.woff2 differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Thin.woff b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Thin.woff
new file mode 100644
index 00000000..4ef7a791
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Thin.woff differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Thin.woff2 b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Thin.woff2
new file mode 100644
index 00000000..f52087be
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-Thin.woff2 differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraBlack.woff b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraBlack.woff
new file mode 100644
index 00000000..827c02cc
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraBlack.woff differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraBlack.woff2 b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraBlack.woff2
new file mode 100644
index 00000000..57d14bcd
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraBlack.woff2 differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraLight.woff b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraLight.woff
new file mode 100644
index 00000000..7e8c3105
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraLight.woff differ
diff --git a/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraLight.woff2 b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraLight.woff2
new file mode 100644
index 00000000..93a914c2
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/statics-woff/Geist-UltraLight.woff2 differ
diff --git a/src/lib/fonts/Geist-1.3.0/variable-ttf/GeistVF.ttf b/src/lib/fonts/Geist-1.3.0/variable-ttf/GeistVF.ttf
new file mode 100644
index 00000000..a4fcf1da
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/variable-ttf/GeistVF.ttf differ
diff --git a/src/lib/fonts/Geist-1.3.0/variable-woff/GeistVF.woff b/src/lib/fonts/Geist-1.3.0/variable-woff/GeistVF.woff
new file mode 100644
index 00000000..1b62daac
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/variable-woff/GeistVF.woff differ
diff --git a/src/lib/fonts/Geist-1.3.0/variable-woff/GeistVF.woff2 b/src/lib/fonts/Geist-1.3.0/variable-woff/GeistVF.woff2
new file mode 100644
index 00000000..9983e92a
Binary files /dev/null and b/src/lib/fonts/Geist-1.3.0/variable-woff/GeistVF.woff2 differ
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 00000000..d084ccad
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/logo.png b/src/logo.png
deleted file mode 100755
index a7e08590..00000000
Binary files a/src/logo.png and /dev/null differ
diff --git a/src/pages/AddNewItem.tsx b/src/pages/AddNewItem.tsx
new file mode 100644
index 00000000..4ffbec00
--- /dev/null
+++ b/src/pages/AddNewItem.tsx
@@ -0,0 +1,334 @@
+import React from "react";
+import { cn } from "../lib/utils";
+import { useAuthenticatedRequest } from "../authenticatedRequest";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { CalendarIcon } from "@radix-ui/react-icons";
+import { format } from "date-fns";
+import { Calendar } from "../components/ui/calendar";
+import { Separator } from "../components/ui/separator";
+import { z } from "zod";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "../components/ui/popover";
+import { toast } from "../components/ui/use-toast";
+import { Button } from "../components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "../components/ui/form";
+import { Input } from "../components/ui/input";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../components/ui/select";
+import { useRooms } from "../hooks/useFetchFormData";
+
+const formSchema = z.object({
+ serialNum: z.string().min(1, "Serial number cannot be blank"),
+ itemName: z.string().min(1, "Item name cannot be blank"),
+ quantity: z.coerce.number().min(1, "Quantity cannot be blank"),
+ uom: z.string().min(1, "UOM cannot be blank"),
+ par: z.coerce.number().min(1, "Par level cannot be blank"),
+ expiryDate: z.date({
+ required_error: "An expiry date is required.",
+ }),
+ roomSelect: z.coerce.number().min(1, "Please select a room to display."),
+});
+
+export const AddNewItem = () => {
+ // Define your form.
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ serialNum: "",
+ itemName: "",
+ quantity: 0,
+ uom: "",
+ par: 0,
+ roomSelect: 0,
+ },
+ });
+
+ const sendRequest = useAuthenticatedRequest();
+
+ const searchWithSerialNum = async (serialNum: string, selectRoom: number) => {
+ try {
+ const response = await sendRequest(
+ `/findserial/${serialNum}/${selectRoom}`,
+ { method: "GET" }
+ );
+ form.setValue("itemName", response.data.item_name);
+ form.setValue("uom", response.data.roomItems[0].uom);
+ form.setValue(
+ "expiryDate",
+ new Date(response.data.roomItems[0].expiry_date)
+ );
+ } catch (error) {
+ console.error("Error searching backend:", error);
+ }
+ };
+
+ const { rooms, error: roomsError, isLoading: roomsLoading } = useRooms();
+
+ const onSubmit = async (formData: z.infer) => {
+ try {
+ const response = await sendRequest(`/addnewitem/`, {
+ method: "POST",
+ data: formData,
+ });
+ response.data.success === true && form.reset();
+ toast({
+ title: "Item added",
+ });
+ } catch (error) {
+ console.error("Error searching backend:", error);
+ }
+ };
+
+ return (
+ <>
+
+
+
+ );
+};
diff --git a/src/pages/AllItems.tsx b/src/pages/AllItems.tsx
new file mode 100644
index 00000000..30bbc67b
--- /dev/null
+++ b/src/pages/AllItems.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { useAllItems } from "../hooks/useFetchFormData";
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../components/ui/table";
+
+export const AllItems = () => {
+ const { allItems, error: allItemsError } = useAllItems();
+ if (allItemsError) return Error loading items. ;
+ if (!allItems.length) return Loading items... ;
+
+ return (
+ <>
+
+ All Items
+
+
+ A list of all items.
+
+
+ Serial No.
+ Item Name
+ Par Level
+ Room
+ Quantity
+ Expiry Date
+
+
+
+ {allItems.map((item) => (
+
+ {item.serial_num}
+ {item.item_name}
+ {item.par_level}
+
+ {item.roomItems.map((roomItem) => (
+ {roomItem.room.name}
+ ))}
+
+
+ {item.roomItems.map((roomItem) => (
+
+
+ {roomItem.quantity} {roomItem.uom}
+
+
+ {roomItem.expiry_date ? (
+
+ {new Date(
+ roomItem.expiry_date
+ ).toLocaleDateString()}
+
+ ) : (
+ "N/A"
+ )}
+
+
+
+ {Object.keys(room).length > 0 ? (
+
+ ) : (
+ <>
+
+
+
+ )}
+
+ {(error as Error).message}
+
+ ),
+ });
+ console.error("Error searching backend:", error as Error);
+ }
+ };
+
+ const searchWithSerialNum = async (serialNum: string, selectRoom: number) => {
+ try {
+ const response = await sendRequest(
+ `/findserial/${serialNum}/${selectRoom}`,
+ { method: "GET" }
+ );
+ form.setValue("itemName", response.data.serial_num);
+ form.setValue("quantity", response.data.roomItems[0].quantity);
+ form.setValue(
+ "expiryDate",
+ new Date(response.data.roomItems[0].expiry_date)
+ );
+ } catch (error) {
+ console.error("Error searching backend:", error);
+ }
+ };
+
+ return (
+ <>
+
+
+ form.reset()} />
+
+ );
+};
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
new file mode 100644
index 00000000..960fa0af
--- /dev/null
+++ b/src/pages/Dashboard.tsx
@@ -0,0 +1,345 @@
+import React, { useEffect, useState } from "react";
+import {
+ ArrowUpRight,
+ BatteryLowIcon,
+ Clock4Icon,
+ Building,
+} from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
+import { Badge } from "../components/ui/badge";
+import { Button } from "../components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "../components/ui/card";
+import { useAuthenticatedRequest } from "../authenticatedRequest";
+import { building, buildingList, useBuildings } from "../hooks/useBuildings";
+import {
+ generateExpItemExcel,
+ generateParItemExcel,
+} from "../components/utils/generateExcel";
+import {
+ Select,
+ SelectTrigger,
+ SelectValue,
+ SelectContent,
+ SelectItem,
+} from "../components/ui/select";
+
+interface ExpItem {
+ id: number;
+ room_id: number;
+ item_id: number;
+ quantity: number;
+ uom: string;
+ expiry_date: string;
+ createdAt: string;
+ updatedAt: string;
+ item: { serial_num: string; item_name: string };
+ room: { name: string };
+}
+
+interface ParItem {
+ id: number;
+ itemTotal: number;
+ item_name: string;
+ par_level: number;
+ serial_num: string;
+}
+
+export const Dashboard = () => {
+ const sendRequest = useAuthenticatedRequest();
+ const [expCount, setExpCount] = useState(0);
+ const [expItems, setExpItems] = useState([]);
+ const [parCount, setParCount] = useState(0);
+ const [parItems, setParItems] = useState([]);
+ const [buildings, setBuildings] = useState([]);
+ const [currentBuilding, setCurrentBuilding] = useState(
+ undefined
+ );
+
+ const { fetchBuildings } = useBuildings();
+
+ const getShortExp = async () => {
+ try {
+ if (currentBuilding !== undefined) {
+ const response = await sendRequest(`/getexpiry/${currentBuilding.id}`, {
+ method: "GET",
+ });
+ setExpCount(response.data.count);
+ setExpItems(response.data.items);
+ }
+ } catch (error) {
+ console.error("Error searching backend:", error);
+ }
+ };
+
+ const getBelowPar = async () => {
+ try {
+ if (currentBuilding !== undefined) {
+ const response = await sendRequest(
+ `/getbelowpar/${currentBuilding.id}`,
+ {
+ method: "GET",
+ }
+ );
+ setParCount(response.data.count[0].count);
+ setParItems(response.data.items);
+ }
+ } catch (error) {
+ console.error("Error searching backend:", error);
+ }
+ };
+
+ const getBuildings = async () => {
+ try {
+ const newBuildings = await fetchBuildings();
+ setBuildings(newBuildings);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ useEffect(() => {
+ getShortExp();
+ getBelowPar();
+ getBuildings();
+ }, [currentBuilding]);
+
+ function calculateDaysTillExpiry(expiryDate: string) {
+ const currentDate = new Date();
+ const expDate = new Date(expiryDate);
+ const timeDiff = expDate.getTime() - currentDate.getTime();
+ const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
+ return daysDiff >= 0 ? daysDiff : 0; // Ensures negative days are not shown
+ }
+
+ const buildingContent = () => {
+ if (currentBuilding !== undefined) {
+ return (
+
+
+ 
+
+
+
+ You're now in
+
+
+ {currentBuilding.name}
+
+
+
+
+ You do not have any active buildings
+
+
+
+
+
+
+ Short Expiry Items
+
+
+
+
+
+ {expCount}
+
+
+ Expiry less than 6 months from today
+
+
+
+
+
+
+ Near Par Items
+
+
+
+
+
+ {parCount}
+
+
+ Below 150% par level
+
+
+
+
+
+
+
+
+ {buildingContent()}
+
+
+
+
+
+
+
+ Items to Re-order
+
+
+ Items with less than 150% par level
+
+
+
+
+ {/* {parDisplay} */}
+ {parItems.length > 0 ? (
+ parItems.map((item, index) => (
+
+
+
+
+
+ {index + 1}
+
+
+
+
+ {item.item_name}
+
+
+ {item.serial_num}
+
+
+ Par: {item.par_level}
+
+
+
+
+ {item.itemTotal} left
+
+
+
+
+
+
+
+
+ Short Expiry
+
+
+ Items expiring in 6 months
+
+
+
+
+ {expItems.length > 0 ? (
+ expItems.map((item, index) => (
+
+
+
+
+ {index + 1}
+
+
+
+
+ {item.item.item_name}
+
+
+ {item.item.serial_num}
+
+
+
+ Exp: {new Date(item.expiry_date).toLocaleDateString()}
+
+
+ {item.room.name}
+
+
+
+
+
+ {calculateDaysTillExpiry(item.expiry_date)} days till
+ expiry
+
+
+
+
+
+
+ {JSON.stringify((error as Error).message, null, 2)}
+
+
+ ),
+ });
+ }
+ };
+
+ useEffect(() => {
+ checkUser();
+ }, [isAuthenticated]);
+
+ return (
+
+
+
+ );
+ };
+ return (
+ <>
+
+
+
+
+
+ Stock Trackr
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {pageTitle}
+
+
+
+
+
+
+ My Account
+
+ Logout
+
+
+
+
+
+
+
+ props.setRoom({})}
+ className="inline mt-[5px]"
+ />
+
+ {props.room.name}
+ In: {props.room.building}
+
+
+
+
+
+
+
+
+
+ Add New Item
+
+
+
+
+
+
+ Items:
+ {roomItems.length > 0 ? (
+ {roomCards}
+ ) : (
+
+ This room has no items yet.
+
+ )}
+
+ );
+};
diff --git a/src/pages/allitems/columns.tsx b/src/pages/allitems/columns.tsx
new file mode 100644
index 00000000..3560bff0
--- /dev/null
+++ b/src/pages/allitems/columns.tsx
@@ -0,0 +1,191 @@
+import React from "react";
+import { z } from "zod";
+import { ColumnDef } from "@tanstack/react-table";
+import { CaretSortIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { Button } from "../../components/ui/button";
+import { Checkbox } from "../../components/ui/checkbox";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu";
+
+export const TableSchema = z.object({
+ id: z.string(),
+ serial_num: z.string(),
+ item_name: z.string(),
+ par_level: z.number(),
+ room: z.string(),
+ quantity: z.number(),
+ uom: z.string(),
+ expiry_date: z.string(),
+});
+
+export const columns: ColumnDef>[] = [
+ {
+ id: "select",
+ header: ({ table }) => (
+ table.toggleAllPageRowsSelected(!!value)}
+ aria-label="Select all"
+ className="ml-2 h-4 w-4"
+ />
+ ),
+ cell: ({ row }) => (
+ row.toggleSelected(!!value)}
+ aria-label="Select row"
+ className="ml-2 h-4 w-4"
+ />
+ ),
+ enableSorting: false,
+ enableHiding: false,
+ },
+ {
+ accessorKey: "serial_num",
+ header: ({ column }) => {
+ return (
+
+ );
+ },
+ cell: ({ row }) => (
+ {row.getValue("serial_num")}
+ ),
+ },
+ {
+ accessorKey: "item_name",
+ header: ({ column }) => {
+ return (
+
+
+
+ );
+ },
+ cell: ({ row }) => (
+ {row.getValue("item_name")}
+ ),
+ },
+ {
+ accessorKey: "par_level",
+ header: ({ column }) => {
+ return (
+
+ );
+ },
+ cell: ({ row }) => (
+ {row.getValue("par_level")}
+ ),
+ },
+ {
+ accessorKey: "room",
+ header: ({ column }) => {
+ return (
+
+ );
+ },
+ cell: ({ row }) => (
+ {row.getValue("room")}
+ ),
+ },
+ {
+ accessorKey: "quantity",
+ header: ({ column }) => {
+ return (
+
+ );
+ },
+ cell: ({ row }) => (
+ {row.getValue("quantity")}
+ ),
+ },
+ {
+ accessorKey: "uom",
+ header: "UOM",
+ },
+ {
+ accessorKey: "expiry_date",
+ header: ({ column }) => {
+ return (
+
+ );
+ },
+ cell: ({ row }) => (
+ {row.getValue("expiry_date")}
+ ),
+ },
+ {
+ id: "actions",
+ cell: ({ row }) => {
+ const item = row.original;
+
+ return (
+
+
+
+
+
+ Actions
+ navigator.clipboard.writeText(item.serial_num)}
+ >
+ Copy serial number
+
+
+
+ );
+ },
+ },
+];
diff --git a/src/pages/allitems/data-table.tsx b/src/pages/allitems/data-table.tsx
new file mode 100644
index 00000000..1fada936
--- /dev/null
+++ b/src/pages/allitems/data-table.tsx
@@ -0,0 +1,222 @@
+import React from "react";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { CaretDownIcon } from "@radix-ui/react-icons";
+import {
+ ColumnDef,
+ ColumnFiltersState,
+ SortingState,
+ VisibilityState,
+ flexRender,
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table";
+
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu";
+
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "../../components/ui/table";
+import { Separator } from "../../components/ui/separator";
+import { DownloadIcon, Search } from "lucide-react";
+import { generateAllItemsTableExcel } from "../../components/utils/generateExcel";
+
+interface DataTableProps {
+ columns: ColumnDef[];
+ data: TData[];
+}
+
+export function DataTable({
+ columns,
+ data,
+}: DataTableProps) {
+ const [sorting, setSorting] = React.useState([]);
+ const [columnFilters, setColumnFilters] = React.useState(
+ []
+ );
+ const [columnVisibility, setColumnVisibility] =
+ React.useState({});
+ const [rowSelection, setRowSelection] = React.useState({});
+
+ const table = useReactTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ onSortingChange: setSorting,
+ getSortedRowModel: getSortedRowModel(),
+ onColumnFiltersChange: setColumnFilters,
+ getFilteredRowModel: getFilteredRowModel(),
+ onColumnVisibilityChange: setColumnVisibility,
+ onRowSelectionChange: setRowSelection,
+ state: {
+ sorting,
+ columnFilters,
+ columnVisibility,
+ rowSelection,
+ },
+ });
+
+ return (
+ <>
+
+
+
+
+ table.getColumn("serial_num")?.setFilterValue(event.target.value)
+ }
+ className="w-full appearance-none bg-background pl-8 shadow-none"
+ />
+
+
+
+
+
+ table.getColumn("item_name")?.setFilterValue(event.target.value)
+ }
+ className="w-full appearance-none bg-background pl-8 shadow-none"
+ />
+
+
+
+
+
+
+ {table
+ .getAllColumns()
+ .filter((column) => column.getCanHide())
+ .map((column) => {
+ return (
+
+ column.toggleVisibility(!!value)
+ }
+ >
+ {column.id}
+
+ );
+ })}
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ return (
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ );
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows?.length ? (
+ table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+
+ ))}
+
+ ))
+ ) : (
+
+
+ No results.
+
+
+ )}
+
+
+
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+
+
+
+ Error loading items. ;
+ if (!allItems.length) return Loading items... ;
+
+ // Flatten the allItems array to have a separate entry for each roomItem
+ const data = allItems.flatMap((item) =>
+ item.roomItems.map((roomItem) => ({
+ serial_num: item.serial_num,
+ item_name: item.item_name,
+ par_level: item.par_level,
+ room: roomItem.room.name,
+ quantity: roomItem.quantity,
+ uom: roomItem.uom,
+ expiry_date: new Date(roomItem.expiry_date).toLocaleDateString(),
+ id: roomItem.id.toString(),
+ }))
+ );
+
+ return (
+ <>
+
+
+
+
+ );
+};
diff --git a/storage.rules b/storage.rules
new file mode 100644
index 00000000..f08744f0
--- /dev/null
+++ b/storage.rules
@@ -0,0 +1,12 @@
+rules_version = '2';
+
+// Craft rules based on data in your Firestore database
+// allow write: if firestore.get(
+// /databases/(default)/documents/users/$(request.auth.uid)).data.isAdmin;
+service firebase.storage {
+ match /b/{bucket}/o {
+ match /{allPaths=**} {
+ allow read, write: if false;
+ }
+ }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..ba6d3cd1
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,81 @@
+/** @type {import('tailwindcss').Config} */
+const defaultTheme = require("tailwindcss/defaultTheme");
+module.exports = {
+ darkMode: ["class"],
+ content: [
+ "./pages/**/*.{ts,tsx}",
+ "./components/**/*.{ts,tsx}",
+ "./app/**/*.{ts,tsx}",
+ "./src/**/*.{ts,tsx}",
+ ],
+ prefix: "",
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ fontFamily: {
+ sans: ['"Geist"', ...defaultTheme.fontFamily.sans],
+ },
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: "0" },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..21af3e9a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "module": "ESNext",
+ "allowJs": true,
+ "checkJs": true,
+ "strict": true,
+ "esModuleInterop": true,
+ "moduleResolution": "node",
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "jsx": "react",
+ "rootDir": "./",
+ // "outDir": "./dist",
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["**/*.ts", "**/*.tsx"],
+ "$schema": "https://json.schemastore.org/tsconfig",
+ "display": "Recommended"
+}
|