Engagements Using AI Widget

src/scenes/Dashboard/Dashboard.tsx

@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 import { NotFoundRoute } from '~/components/Error';
 import { WidgetGrid } from '~/components/Widgets/WidgetGrid';
 import { DashboardLayout } from './DashboardLayout';
+import { EngagementsUsingAIWidget } from './EngagementsUsingAIWidget/EngagementsUsingAIWidget';
 import { PnpProblemsWidget } from './PnpProblemsWidget/PnpProblemsWidget';
 import { ProgressReportsWidget } from './ProgressReportsWidget/ProgressReportsWidget';
 
@@ -12,6 +13,10 @@ export const DashboardRoutes = () => (
       <Route index element={<MainDashboard />} />
       <Route path="/progress-reports" element={<ExpandedProgressReports />} />
       <Route path="/pnp-errors" element={<ExpandedPnpProblems />} />
+      <Route
+        path="/engagements-using-ai"
+        element={<ExpandedEngagementsUsingAI />}
+      />
       {NotFoundRoute}
     </Routes>
   </DashboardLayout>
@@ -20,6 +25,7 @@ export const DashboardRoutes = () => (
 const MainDashboard = () => (
   <WidgetGrid>
     <ProgressReportsWidget colSpan={8} rowSpan={6} expanded={false} />
+    <EngagementsUsingAIWidget colSpan={8} rowSpan={6} expanded={false} />
     <PnpProblemsWidget colSpan={8} rowSpan={6} expanded={false} />
   </WidgetGrid>
 );
@@ -40,3 +46,14 @@ const ExpandedPnpProblems = () => (
     <PnpProblemsWidget colSpan={12} rowSpan={12} expanded sx={{ flex: 1 }} />
   </Stack>
 );
+
+const ExpandedEngagementsUsingAI = () => (
+  <Stack sx={{ flex: 1 }}>
+    <EngagementsUsingAIWidget
+      colSpan={12}
+      rowSpan={12}
+      expanded
+      sx={{ flex: 1 }}
+    />
+  </Stack>
+);

src/scenes/Dashboard/EngagementsUsingAIWidget/EngagementsUsingAIGrid.tsx

@@ -0,0 +1,239 @@
+import {
+  DataGridPro,
+  DataGridProProps as DataGridProps,
+  GridColDef,
+  GridToolbarColumnsButton,
+  GridToolbarFilterButton,
+} from '@mui/x-data-grid-pro';
+import { merge } from 'lodash';
+import { useMemo } from 'react';
+import { SetOptional } from 'type-fest';
+import {
+  AiAssistedTranslationLabels,
+  AiAssistedTranslationList,
+  EngagementFilters,
+  EngagementListInput,
+} from '~/api/schema.graphql';
+import { CalendarDate, extendSx } from '~/common';
+import {
+  booleanColumn,
+  DefaultDataGridStyles,
+  enumColumn,
+  getInitialVisibility,
+  noHeaderFilterButtons,
+  QuickFilterButton,
+  QuickFilterResetButton,
+  QuickFilters,
+  textColumn,
+  Toolbar,
+  useDataGridSource,
+  useFilterToggle,
+} from '~/components/Grid';
+import { LinkColumn } from '~/components/Grid/Columns/LinkColumn';
+import { ProjectNameColumn } from '~/components/Grid/Columns/ProjectNameColumn';
+import { Link } from '~/components/Routing';
+import {
+  EngagementUsingAiDataGridRowFragment as EngagementUsingAI,
+  EngagementUsingAiListDocument,
+} from './engagementsUsingAIDataGridRow.graphql';
+
+export type EngagementUsingAIColumnMapShape = Record<
+  string,
+  SetOptional<GridColDef<EngagementUsingAI>, 'field'>
+>;
+
+export const EngagementUsingAIColumnMap = {
+  project: ProjectNameColumn({
+    field: 'project.name',
+    valueGetter: (_, engagement) => engagement.project,
+  }),
+  language: {
+    headerName: 'Language / Intern',
+    field: 'nameProjectLast',
+    ...textColumn(),
+    width: 200,
+    valueGetter: (_, row) => {
+      return row.__typename === 'LanguageEngagement'
+        ? row.language.value?.name.value
+        : row.__typename === 'InternshipEngagement'
+        ? row.intern.value?.fullName
+        : null;
+    },
+    renderCell: ({ value, row }) => {
+      return row.__typename === 'LanguageEngagement' ? (
+        <Link to={`/languages/${row.language.value!.id}`}>{value}</Link>
+      ) : row.__typename === 'InternshipEngagement' ? (
+        <Link to={`/users/${row.intern.value!.id}`}>{value}</Link>
+      ) : null;
+    },
+    hideable: false,
+    serverFilter: (value): EngagementFilters => ({ engagedName: value }),
+  },
+  viewEngagement: LinkColumn({
+    field: 'Engagement',
+    headerName: '',
+    valueGetter: (_, engagement) => engagement,
+    destination: (id) => `/engagements/${id}`,
+  }),
+  usingAIAssistedTranslation: {
+    headerName: 'AI Assistance',
+    description: 'Is using AI assistance in translation?',
+    field: 'usingAIAssistedTranslation',
+    width: 130,
+    ...enumColumn(AiAssistedTranslationList, AiAssistedTranslationLabels),
+    valueGetter: (_, row) =>
+      row.__typename === 'LanguageEngagement'
+        ? row.usingAIAssistedTranslation.value
+        : null,
+    filterable: true,
+    editable: true,
+    isEditable: ({ row }) =>
+      row.__typename === 'LanguageEngagement' &&
+      row.usingAIAssistedTranslation.canEdit,
+    valueSetter: (value, row) =>
+      row.__typename === 'LanguageEngagement'
+        ? {
+            ...row,
+            usingAIAssistedTranslation: {
+              ...row.usingAIAssistedTranslation,
+              value,
+            },
+          }
+        : row,
+  },
+  isMember: {
+    headerName: 'Mine',
+    field: 'project.isMember',
+    ...booleanColumn(),
+    valueGetter: (_, engagement) => engagement.project.isMember,
+  },
+  pinned: {
+    headerName: 'Pinned',
+    field: 'project.pinned',
+    ...booleanColumn(),
+    valueGetter: (_, engagement) => engagement.project.pinned,
+  },
+} satisfies EngagementUsingAIColumnMapShape;
+
+const columns = Object.values(EngagementUsingAIColumnMap);
+
+export interface EngagementsUsingAIGridProps extends DataGridProps {
+  quarter: CalendarDate;
+  expanded: boolean;
+}
+
+export const EngagementsUsingAIGrid = ({
+  quarter,
+  expanded,
+  ...props
+}: Omit<EngagementsUsingAIGridProps, 'columns'>) => {
+  const source = useMemo(() => {
+    return {
+      query: EngagementUsingAiListDocument,
+      variables: {
+        input: {
+          filter: {
+            // project: {
+            //   status: ['Active'],
+            // },
+            usingAIAssistedTranslation: ['Check', 'Draft', 'DraftAndCheck'],
+          },
+        } satisfies EngagementListInput,
+      },
+      listAt: 'engagements',
+      initialInput: {
+        sort: 'project.name',
+        order: 'ASC',
+      },
+    } as const;
+  }, []);
+
+  const [dataGridProps] = useDataGridSource({
+    ...source,
+    apiRef: props.apiRef,
+  });
+
+  const initialState = {
+    columns: {
+      columnVisibilityModel: {
+        ...getInitialVisibility(columns),
+        viewReport: expanded,
+        'project.isMember': false,
+        'project.pinned': false,
+      },
+    },
+  } satisfies DataGridProps['initialState'];
+
+  const toolbarSlot = {
+    toolbar: EngagementsUsingAIToolbar,
+  } satisfies DataGridProps['slots'];
+
+  const slots = useMemo(
+    () =>
+      merge(
+        {},
+        DefaultDataGridStyles.slots,
+        dataGridProps.slots,
+        props.slots,
+        expanded && toolbarSlot
+      ),
+    [dataGridProps.slots, props.slots, toolbarSlot, expanded]
+  );
+
+  const slotProps = useMemo(
+    () =>
+      merge(
+        {},
+        DefaultDataGridStyles.slotProps,
+        dataGridProps.slotProps,
+        props.slotProps
+      ),
+    [dataGridProps.slotProps, props.slotProps]
+  );
+
+  return (
+    <DataGridPro
+      {...DefaultDataGridStyles}
+      {...dataGridProps}
+      {...props}
+      columns={columns}
+      initialState={initialState}
+      slots={slots}
+      slotProps={slotProps}
+      disableColumnMenu={!expanded}
+      sx={[
+        noHeaderFilterButtons,
+        !expanded &&
+          ((theme) => ({
+            '.MuiDataGrid-main': {
+              borderTop: `thin solid ${theme.palette.divider}`,
+            },
+          })),
+        ...extendSx(props.sx),
+      ]}
+    />
+  );
+};
+
+const EngagementsUsingAIToolbar = () => (
+  <Toolbar
+    sx={{
+      px: 2,
+      justifyContent: 'flex-start',
+      gap: 2,
+      backgroundColor: 'inherit',
+    }}
+  >
+    <GridToolbarColumnsButton />
+    <GridToolbarFilterButton />
+    <QuickFilters sx={{ flex: 1 }}>
+      <QuickFilterResetButton />
+      <QuickFilterButton {...useFilterToggle('project.isMember')}>
+        Mine
+      </QuickFilterButton>
+      <QuickFilterButton {...useFilterToggle('project.pinned')}>
+        Pinned
+      </QuickFilterButton>
+    </QuickFilters>
+  </Toolbar>
+);

src/scenes/Dashboard/EngagementsUsingAIWidget/EngagementsUsingAIWidget.tsx

@@ -0,0 +1,50 @@
+import { useLocation } from 'react-router-dom';
+import { flexLayout } from '~/components/Grid';
+import {
+  ExpanderButton,
+  TableWidget,
+  Widget,
+  WidgetHeader,
+  WidgetProps,
+} from '~/components/Widgets';
+import { useQuarterState } from '../ProgressReportsWidget/useQuarterState';
+import { EngagementsUsingAIGrid } from './EngagementsUsingAIGrid';
+
+export const EngagementsUsingAIWidget = ({
+  expanded,
+  ...props
+}: WidgetProps & { expanded: boolean }) => {
+  const quarter = useQuarterState();
+  const location = useLocation();
+
+  return (
+    <Widget {...props}>
+      <WidgetHeader
+        title="Engagements Using AI"
+        expandAction={
+          <ExpanderButton
+            expanded={expanded}
+            to={{
+              pathname: expanded ? '..' : 'engagements-using-ai',
+              search: location.search,
+            }}
+          />
+        }
+      />
+      <TableWidget>
+        <EngagementsUsingAIGrid
+          quarter={quarter.current}
+          hideFooter
+          expanded={expanded}
+          sx={[
+            {
+              border: 'none',
+              '--unstable_DataGrid-radius': 0,
+            },
+            flexLayout,
+          ]}
+        />
+      </TableWidget>
+    </Widget>
+  );
+};

src/scenes/Dashboard/EngagementsUsingAIWidget/engagementsUsingAIDataGridRow.graphql

@@ -0,0 +1,13 @@
+query EngagementUsingAIList($input: EngagementListInput) {
+  engagements(input: $input) {
+    items {
+      ...engagementDataGridRow
+    }
+    total
+    hasMore
+  }
+}
+
+fragment engagementUsingAIDataGridRow on Engagement {
+  ...engagementDataGridRow
+}

src/scenes/Dashboard/ProgressReportsWidget/progressReportsDataGridRow.graphql

@@ -6,6 +6,7 @@ query ProgressReports($input: ProgressReportListInput) {
       ...progressReportsDataGridRow
     }
     total
+    hasMore
   }
 }