feat: add audit log drawer to Tool, Material, and Consumable headers

Add audit history button to dropdown menus for all item types,
allowing users to view change history for tools, materials, and consumables.

Author: sidwebworks

apps/erp/app/modules/items/ui/Consumables/ConsumableHeader.tsx

@@ -4,18 +4,20 @@ import {
   DropdownMenuContent,
   DropdownMenuIcon,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   Heading,
   HStack,
   IconButton,
   useDisclosure,
   VStack
 } from "@carbon/react";
-import { LuEllipsisVertical, LuTrash } from "react-icons/lu";
+import { LuEllipsisVertical, LuHistory, LuTrash } from "react-icons/lu";
 import { Link, useParams } from "react-router";
+import { AuditLogDrawer } from "~/components/AuditLog";
 import { DetailsTopbar } from "~/components/Layout";
 import ConfirmDelete from "~/components/Modals/ConfirmDelete";
-import { usePermissions, useRouteData } from "~/hooks";
+import { usePermissions, useRouteData, useUser } from "~/hooks";
 import { path } from "~/utils/path";
 import type { Consumable } from "../../types";
 import { useConsumableNavigation } from "./useConsumableNavigation";
@@ -25,8 +27,10 @@ const ConsumableHeader = () => {
   const { itemId } = useParams();
   if (!itemId) throw new Error("itemId not found");
 
+  const { company } = useUser();
   const permissions = usePermissions();
   const deleteModal = useDisclosure();
+  const auditDrawer = useDisclosure();
 
   const routeData = useRouteData<{ consumableSummary: Consumable }>(
     path.to.consumable(itemId)
@@ -54,6 +58,11 @@ const ConsumableHeader = () => {
               />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
+              <DropdownMenuItem onClick={auditDrawer.onOpen}>
+                <DropdownMenuIcon icon={<LuHistory />} />
+                Audit History
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
               <DropdownMenuItem
                 disabled={
                   !permissions.can("delete", "parts") ||
@@ -88,6 +97,15 @@ const ConsumableHeader = () => {
           }}
         />
       )}
+      {auditDrawer.isOpen && company?.id && (
+        <AuditLogDrawer
+          isOpen={auditDrawer.isOpen}
+          onClose={auditDrawer.onClose}
+          entityType="item"
+          entityId={itemId}
+          companyId={company.id}
+        />
+      )}
     </div>
   );
 };

apps/erp/app/modules/items/ui/Materials/MaterialHeader.tsx

@@ -4,18 +4,20 @@ import {
   DropdownMenuContent,
   DropdownMenuIcon,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   Heading,
   HStack,
   IconButton,
   useDisclosure,
   VStack
 } from "@carbon/react";
-import { LuEllipsisVertical, LuTrash } from "react-icons/lu";
+import { LuEllipsisVertical, LuHistory, LuTrash } from "react-icons/lu";
 import { Link, useParams } from "react-router";
+import { AuditLogDrawer } from "~/components/AuditLog";
 import { DetailsTopbar } from "~/components/Layout";
 import ConfirmDelete from "~/components/Modals/ConfirmDelete";
-import { usePermissions, useRouteData } from "~/hooks";
+import { usePermissions, useRouteData, useUser } from "~/hooks";
 import { path } from "~/utils/path";
 import type { Material } from "../../types";
 import { useMaterialNavigation } from "./useMaterialNavigation";
@@ -25,8 +27,10 @@ const MaterialHeader = () => {
   const { itemId } = useParams();
   if (!itemId) throw new Error("itemId not found");
 
+  const { company } = useUser();
   const permissions = usePermissions();
   const deleteModal = useDisclosure();
+  const auditDrawer = useDisclosure();
 
   const routeData = useRouteData<{ materialSummary: Material }>(
     path.to.material(itemId)
@@ -55,6 +59,11 @@ const MaterialHeader = () => {
               />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
+              <DropdownMenuItem onClick={auditDrawer.onOpen}>
+                <DropdownMenuIcon icon={<LuHistory />} />
+                Audit History
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
               <DropdownMenuItem
                 disabled={
                   !permissions.can("delete", "parts") ||
@@ -89,6 +98,15 @@ const MaterialHeader = () => {
           }}
         />
       )}
+      {auditDrawer.isOpen && company?.id && (
+        <AuditLogDrawer
+          isOpen={auditDrawer.isOpen}
+          onClose={auditDrawer.onClose}
+          entityType="item"
+          entityId={itemId}
+          companyId={company.id}
+        />
+      )}
     </div>
   );
 };

apps/erp/app/modules/items/ui/Tools/ToolHeader.tsx

@@ -4,18 +4,20 @@ import {
   DropdownMenuContent,
   DropdownMenuIcon,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   Heading,
   HStack,
   IconButton,
   useDisclosure,
   VStack
 } from "@carbon/react";
-import { LuEllipsisVertical, LuTrash } from "react-icons/lu";
+import { LuEllipsisVertical, LuHistory, LuTrash } from "react-icons/lu";
 import { Link, useParams } from "react-router";
+import { AuditLogDrawer } from "~/components/AuditLog";
 import { DetailsTopbar } from "~/components/Layout";
 import ConfirmDelete from "~/components/Modals/ConfirmDelete";
-import { usePermissions, useRouteData } from "~/hooks";
+import { usePermissions, useRouteData, useUser } from "~/hooks";
 import { path } from "~/utils/path";
 import type { Tool } from "../../types";
 import { useToolNavigation } from "./useToolNavigation";
@@ -25,8 +27,10 @@ const ToolHeader = () => {
   const { itemId } = useParams();
   if (!itemId) throw new Error("itemId not found");
 
+  const { company } = useUser();
   const permissions = usePermissions();
   const deleteModal = useDisclosure();
+  const auditDrawer = useDisclosure();
 
   const routeData = useRouteData<{ toolSummary: Tool }>(path.to.tool(itemId));
 
@@ -51,6 +55,11 @@ const ToolHeader = () => {
               />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
+              <DropdownMenuItem onClick={auditDrawer.onOpen}>
+                <DropdownMenuIcon icon={<LuHistory />} />
+                Audit History
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
               <DropdownMenuItem
                 disabled={
                   !permissions.can("delete", "parts") ||
@@ -83,6 +92,15 @@ const ToolHeader = () => {
           }}
         />
       )}
+      {auditDrawer.isOpen && company?.id && (
+        <AuditLogDrawer
+          isOpen={auditDrawer.isOpen}
+          onClose={auditDrawer.onClose}
+          entityType="item"
+          entityId={itemId}
+          companyId={company.id}
+        />
+      )}
     </div>
   );
 };