🎁 WorkOrder Notifications (#1153)

* Added notifications to workorder

libs/workordersidesheet/src/lib/types/index.ts

@@ -1,2 +1,3 @@
 export type { WorkOrderMaterial } from './workOrderMaterial';
 export type { WorkOrderMccr } from './workOrderMccr';
+export type { WorkOrderNotification } from './workOrderNotification';

libs/workordersidesheet/src/lib/types/workOrderNotification.ts

@@ -0,0 +1,8 @@
+export type WorkOrderNotification = {
+    notificationNo: string;
+    type: string;
+    title: string;
+    status: string;
+    nextToSign: string;
+    notificationUrl: string;
+}

libs/workordersidesheet/src/lib/ui-sidesheet/WorkorderSidesheet.tsx

@@ -5,6 +5,7 @@ import {
   LinkCell,
   MaterialTab,
   MccrTab,
+  NotificationTab,
   PackageStatus,
   StatusCircle,
   colorMap,
@@ -34,6 +35,7 @@ import { ModelViewerTab, TagOverlay } from '@cc-components/modelviewer';
 import { useMaterial, useMccr } from '../utils-sidesheet';
 import { DetailsTab } from './DetailsTab';
 import { useGetEchoConfig } from '../utils-sidesheet/useGetEchoConfig';
+import { useNotifications } from '../utils-sidesheet/useNotifications';
 
 const viewerOptions = {
   statusResolver: (status: string) => {
@@ -56,6 +58,12 @@ export const WorkorderSidesheet = (props: {
     error: materialError,
   } = useMaterial(props.id);
 
+  const {
+    data: notifications,
+    isFetching: isFetchingNotifications,
+    error: notificationsError,
+  } = useNotifications(props.id);
+
   const {
     data: modelConfig,
     isFetching: isFetchingModelConfig,
@@ -164,6 +172,10 @@ export const WorkorderSidesheet = (props: {
             <Tabs.Tab>
               Material <TabTitle data={material} isLoading={isFetchingMaterial} />
             </Tabs.Tab>
+            <Tabs.Tab>
+              Notifications
+              <TabTitle data={notifications} isLoading={isFetchingNotifications} />
+            </Tabs.Tab>
             <Tabs.Tab>
               3D <TabTitle data={modelConfig?.tags} isLoading={isFetchingModelConfig} />
             </Tabs.Tab>
@@ -188,6 +200,13 @@ export const WorkorderSidesheet = (props: {
               error={materialError as Error | null}
             />
           </StyledPanel>
+          <StyledPanel>
+            <NotificationTab
+              notifications={notifications}
+              isFetching={isFetchingNotifications}
+              error={notificationsError}
+            />
+          </StyledPanel>
           <StyledPanel style={{ height: '100%' }}>
             <ModelViewerTab
               tagOverlay={tagsOverlay}

libs/workordersidesheet/src/lib/utils-sidesheet/useNotifications.ts

@@ -0,0 +1,23 @@
+import { useContextId, useHttpClient } from '@cc-components/shared';
+import { useQuery } from '@tanstack/react-query';
+import { WorkOrderNotification } from '../types';
+
+export const useNotifications = (workOrderId: string) => {
+  const client =  useHttpClient();
+  const contextId = useContextId();
+
+  const { data, isFetching, error } = useQuery<WorkOrderNotification[], Error>({
+    queryKey: ['workOrder', workOrderId, 'notification'],
+    queryFn: async({ signal }) => {
+        const response = await client.fetch(`/api/contexts/${contextId}/work-orders/${workOrderId}/notifications`, { signal });
+
+        if (!response.ok) {
+          throw new Error('Failed to get notifications', { cause: response });
+        }
+
+        return response.json();
+    },
+  });
+
+    return { data, isFetching, error };
+};