diff --git a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/CutoffTab.tsx b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/CutoffTab.tsx new file mode 100644 index 000000000..15fcad689 --- /dev/null +++ b/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 = { + cutoff: T[] | undefined; + isFetching: boolean; + error: Error | null; +}; +export const CutoffTab = ({ + error, + isFetching, + cutoff: Cutoff, +}: CutoffTabProps): JSX.Element => { + return ( + + + + ); +}; diff --git a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/columns.tsx b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/columns.tsx new file mode 100644 index 000000000..ad9c7c7ec --- /dev/null +++ b/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[] = [ + { + 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) => { + return ; + }, + }, + { + 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) => ( + + ), + }, + { + field: 'FinishDate', + valueGetter: (pkg) => pkg.data?.plannedCompletionDate, + cellRenderer: (props: ICellRendererProps) => ( + + ), + }, + + { + field: 'Responsible', + valueGetter: (pkg) => pkg.data?.responsible, + }, +]; diff --git a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/index.ts b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/index.ts new file mode 100644 index 000000000..af91dbb91 --- /dev/null +++ b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/index.ts @@ -0,0 +1 @@ +export { CutoffTab } from './CutoffTab'; diff --git a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/types.ts b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/cutoff/types.ts new file mode 100644 index 000000000..b052b23f6 --- /dev/null +++ b/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; +}; diff --git a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/index.ts b/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/index.ts index 50aadbbd4..c5895a627 100644 --- a/libs/shared/src/packages/sidesheet/src/lib/sidesheet/tabs/index.ts +++ b/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'; diff --git a/libs/workordersidesheet/src/lib/types/workOrderCutoff.ts b/libs/workordersidesheet/src/lib/types/workOrderCutoff.ts new file mode 100644 index 000000000..9c94268f8 --- /dev/null +++ b/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; +}; diff --git a/libs/workordersidesheet/src/lib/ui-sidesheet/WorkorderSidesheet.tsx b/libs/workordersidesheet/src/lib/ui-sidesheet/WorkorderSidesheet.tsx index 0685f1852..bab90f469 100644 --- a/libs/workordersidesheet/src/lib/ui-sidesheet/WorkorderSidesheet.tsx +++ b/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(({ 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(({ frame, props } Material + + Cutoff + @@ -177,6 +184,13 @@ export const WorkorderSidesheet = createWidget(({ frame, props } error={materialError as Error | null} /> + + + diff --git a/libs/workordersidesheet/src/lib/utils-sidesheet/useCutoff.ts b/libs/workordersidesheet/src/lib/utils-sidesheet/useCutoff.ts new file mode 100644 index 000000000..0ce2aa8f0 --- /dev/null +++ b/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, + 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, + }; +};