feat: ✨ add cutoff tab

libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/CutoffTab.tsx

@@ -0,0 +1,27 @@
+import { TabTable } from '../../../../../../table-helpers/src/lib/table/TabTable';
+import { StyledContentWrapper } from '../tabs.styles';
+import { columns } from './columns';
+import { CutoffBase } from './types';
+
+type CutoffTabProps<T> = {
+  cutoff: T[] | undefined;
+  isFetching: boolean;
+  error: Error | null;
+};
+export const CutoffTab = <T extends CutoffBase>({
+  error,
+  isFetching,
+  cutoff: Cutoff,
+}: CutoffTabProps<T>): JSX.Element => {
+  return (
+    <StyledContentWrapper>
+      <TabTable
+        columns={columns}
+        error={error}
+        isFetching={isFetching}
+        packages={Cutoff}
+        resourceName="Cutoff"
+      />
+    </StyledContentWrapper>
+  );
+};

libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/columns.tsx

@@ -0,0 +1,66 @@
+import { ColDef, ICellRendererProps } from '@equinor/workspace-ag-grid';
+import { CutoffBase } from './types';
+import { DateCell, DescriptionCell } from '../../../../../../table-helpers';
+
+export const columns: ColDef<CutoffBase>[] = [
+  {
+    field: 'Cutoff',
+    headerName: 'Cutoff',
+    valueGetter: (pkg) => pkg.data?.cutoffWeek,
+    valueFormatter: (pkg) =>
+      pkg.data?.cutoffWeek
+        ? `${pkg.data.cutoffWeek.slice(0, 4)}w${pkg.data.cutoffWeek.slice(4)}`
+        : '',
+    minWidth: 150,
+  },
+  {
+    field: 'Title',
+    valueGetter: (pkg) => pkg.data?.title,
+    cellRenderer: (props: ICellRendererProps<CutoffBase, string | null>) => {
+      return <DescriptionCell description={props.value} />;
+    },
+  },
+  {
+    field: 'Project',
+    valueGetter: (pkg) => pkg.data?.project,
+  },
+  {
+    field: 'Milestone',
+    valueGetter: (pkg) => pkg.data?.milestone,
+  },
+  {
+    field: 'SubMilestone',
+    valueGetter: (pkg) => pkg.data?.subMilestone,
+  },
+  {
+    field: 'Comm.Pkg',
+    valueGetter: (pkg) => pkg.data?.commissioningPackageNo,
+  },
+  {
+    field: 'Area',
+    valueGetter: (pkg) => pkg.data?.location,
+  },
+  {
+    field: 'HoldBy',
+    valueGetter: (pkg) => pkg.data?.holdBy,
+  },
+  {
+    field: 'StartupDate',
+    valueGetter: (pkg) => pkg.data?.plannedStartupDate,
+    cellRenderer: (props: ICellRendererProps<CutoffBase, string | null>) => (
+      <DateCell dateString={props.data?.plannedStartupDate} />
+    ),
+  },
+  {
+    field: 'FinishDate',
+    valueGetter: (pkg) => pkg.data?.plannedCompletionDate,
+    cellRenderer: (props: ICellRendererProps<CutoffBase, string | null>) => (
+      <DateCell dateString={props.data?.plannedCompletionDate} />
+    ),
+  },
+
+  {
+    field: 'Responsible',
+    valueGetter: (pkg) => pkg.data?.responsible,
+  },
+];

libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/index.ts

@@ -0,0 +1 @@
+export { CutoffTab } from './CutoffTab';

libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/types.ts

@@ -0,0 +1,13 @@
+export type CutoffBase = {
+  cutoffWeek: string;
+  title: string | null;
+  project: string | null;
+  commissioningPackageNo: string | null;
+  location: string | null;
+  holdBy: string | null;
+  plannedStartupDate: string | null;
+  plannedCompletionDate: string | null;
+  milestone: string;
+  subMilestone: string | null;
+  responsible: string | null;
+};

libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/index.ts

@@ -8,6 +8,7 @@ export * from './unsignedAction';
 export * from './unsignedTask';
 export * from './details';
 export * from './material';
+export * from './cutoff';
 export * from './mccr';
 export { TabsWrapper } from './TabList';
 export { StyledTabs, StyledPanels } from './tabs.styles';

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

@@ -0,0 +1,40 @@
+export type WorkOrderCutoff = {
+  sourceName: string | null;
+  sourceIdentity: string;
+  facility: string;
+  project: string;
+  cutoffWeek: string;
+  cutoffDate: string;
+  expendedManHoursLastWeek: number;
+  earnedManHoursLastWeek: number;
+  workOrderNo: string;
+  title: string | null;
+  description: string | null;
+  plannedStartupDate: string;
+  actualStartupDate: string | null;
+  plannedCompletionDate: string;
+  actualCompletionDate: string | null;
+  commissioningPackageNo: string | null;
+  milestone: string;
+  category: string | null;
+  holdBy: string | null;
+  typeOfWork: string | null;
+  onshoreOffshore: string | null;
+  projectProgress: number;
+  workOrderType: string | null;
+  jobStatus: string;
+  materialStatus: string;
+  estimatedManHours: number;
+  expendedManHours: number;
+  remainingManHours: string | null;
+  earnedManHours: number;
+  subMilestone: string | null;
+  responsible: string;
+  discipline: string;
+  location: string | null;
+  updatedDate: string;
+  workOrderId: string;
+  constructionComments: string | null;
+  materialComments: string | null;
+  commissioningPackageId: string | null;
+};

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

@@ -1,5 +1,6 @@
 import {
   BannerItem,
+  CutoffTab,
   LinkCell,
   MaterialTab,
   MccrTab,
@@ -27,6 +28,7 @@ import { useState } from 'react';
 import styled from 'styled-components';
 import { useMaterial, useMccr } from '../utils-sidesheet';
 import { DetailsTab } from './DetailsTab';
+import { useCutoff } from '../utils-sidesheet/useCutoff';
 
 export const StyledTabListWrapper: (props: any) => JSX.Element = styled.div`
   overflow: hidden;
@@ -57,6 +59,8 @@ export const WorkorderSidesheet = createWidget<WorkorderProps>(({ frame, props }
     error: materialError,
   } = useMaterial(props.id);
 
+  const { data: cutoffList, error: cutoffError, isLoading } = useCutoff(props.id);
+
   const client = useHttpClient();
   const contextId = useContextId();
 
@@ -156,6 +160,9 @@ export const WorkorderSidesheet = createWidget<WorkorderProps>(({ frame, props }
             <Tabs.Tab>
               Material <TabTitle data={material} isLoading={isFetchingMaterial} />
             </Tabs.Tab>
+            <Tabs.Tab>
+              Cutoff <TabTitle data={cutoffList} isLoading={isLoading} />
+            </Tabs.Tab>
           </StyledTabsList>
         </StyledTabListWrapper>
 
@@ -177,6 +184,13 @@ export const WorkorderSidesheet = createWidget<WorkorderProps>(({ frame, props }
               error={materialError as Error | null}
             />
           </Tabs.Panel>
+          <Tabs.Panel>
+            <CutoffTab
+              cutoff={cutoffList}
+              isFetching={isLoading}
+              error={cutoffError as Error | null}
+            />
+          </Tabs.Panel>
         </StyledPanels>
       </StyledTabs>
     </StyledSideSheetContainer>

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

@@ -0,0 +1,39 @@
+import { useContextId, useHttpClient } from '@cc-components/shared';
+import { useQuery } from '@tanstack/react-query';
+import { WorkOrderCutoff } from '../types/workOrderCutoff';
+
+const fetchCutoff = async (
+  ccClient: ReturnType<typeof useHttpClient>,
+  contextId: string | undefined,
+  packageId: string | null,
+  signal?: AbortSignal
+) => {
+  const res = await ccClient.fetch(
+    `/api/contexts/${contextId}/work-orders/${packageId}/cutoff`,
+    {
+      signal,
+    }
+  );
+
+  if (!res.ok) {
+    throw new Error('failed to fetch cutoff');
+  }
+
+  return (await res.json()) as WorkOrderCutoff[];
+};
+export const useCutoff = (packageId: string | null) => {
+  const ccApp = useHttpClient();
+  const contextId = useContextId();
+
+  const { data, isLoading, error } = useQuery({
+    queryFn: (a) => fetchCutoff(ccApp, contextId, packageId, a.signal),
+    queryKey: ['cutoff', packageId],
+    useErrorBoundary: false,
+  });
+  return {
+    //Rip performance
+    data,
+    isLoading,
+    error,
+  };
+};