Data Classification: Fund SFN, chart-segment hierarchy, grid UX, and ERN tab

client/src/components/dataClassification/DataClassificationStage.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import {
+  allClassified,
+  SEGMENT_TABS,
+  segmentsForType,
+  unclassifiedCount,
+} from './segments.ts';
+import { SegmentGrid } from './SegmentGrid.tsx';
+import {
+  chartStringSegmentsQueryOptions,
+  type ChartStringSegment,
+  useUpdateSegmentClassification,
+} from '@/queries/chartStringSegments.ts';
+import { Link } from '@tanstack/react-router';
+import { useQuery } from '@tanstack/react-query';
+
+export function DataClassificationStage() {
+  const { data: segments = [], isLoading } = useQuery(
+    chartStringSegmentsQueryOptions()
+  );
+  const updateClassification = useUpdateSegmentClassification();
+  const [activeType, setActiveType] = useState(SEGMENT_TABS[0].type);
+
+  if (isLoading) {
+    return <p>Loading segments...</p>;
+  }
+
+  const handleClassify = (
+    segment: ChartStringSegment,
+    includeInReport: boolean,
+    sfn: string | null
+  ) => {
+    updateClassification.mutate({
+      code: segment.code,
+      includeInReport,
+      segmentType: segment.segmentType,
+      sfn,
+    });
+  };
+
+  const gateOpen = allClassified(segments);
+
+  return (
+    <div className="space-y-4">
+      <p>
+        New chart-string segments need to be classified before they can be
+        included or excluded from the AD419 report.
+      </p>
+
+      <div className="tabs tabs-bordered" role="tablist">
+        {SEGMENT_TABS.map((tab) => {
+          const count = unclassifiedCount(segments, tab.type);
+
+          return (
+            <button
+              aria-selected={activeType === tab.type}
+              className={`tab ${activeType === tab.type ? 'tab-active' : ''}`}
+              key={tab.type}
+              onClick={() => setActiveType(tab.type)}
+              role="tab"
+              type="button"
+            >
+              {tab.label}
+              {count > 0 && (
+                <span className="badge badge-warning badge-sm ml-2">
+                  {count} new
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {activeType === 'Ern' && (
+        <div className="alert alert-info" role="note">
+          <span>
+            Note: ERN code classification affects FTE calculations only. It does not
+            affect dollar-amount calculations.
+          </span>
+        </div>
+      )}
+
+      <SegmentGrid
+        onClassify={handleClassify}
+        segments={segmentsForType(segments, activeType)}
+        segmentType={activeType}
+      />
+
+      <div className="flex items-center justify-between border-t pt-4">
+        <span className={gateOpen ? 'text-success' : 'text-warning'}>
+          {gateOpen
+            ? 'All segments classified.'
+            : 'Unclassified rows must be set before the next step.'}
+        </span>
+        {gateOpen ? (
+          <Link
+            className="btn btn-primary"
+            params={{ stageId: 'expense-review' }}
+            to="/workflow/$stageId"
+          >
+            Continue to Expense Review
+          </Link>
+        ) : (
+          <button className="btn btn-primary" disabled type="button">
+            Continue to Expense Review
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

client/src/components/dataClassification/SegmentClassificationControl.tsx

@@ -0,0 +1,73 @@
+import {
+  FUND_SFNS,
+  SFN_MULTIPLE,
+  type ChartStringSegment,
+} from '@/queries/chartStringSegments.ts';
+
+const EXCLUDED = 'Excluded';
+
+export function SegmentClassificationControl({
+  onClassify,
+  segment,
+}: {
+  onClassify: (includeInReport: boolean, sfn: string | null) => void;
+  segment: ChartStringSegment;
+}) {
+  if (segment.segmentType === 'Fund') {
+    const value =
+      segment.includeInReport === false
+        ? EXCLUDED
+        : (segment.sfn ?? '');
+
+    const handleChange = (selected: string) => {
+      if (selected === EXCLUDED) {
+        onClassify(false, null);
+      } else if (selected !== '') {
+        onClassify(true, selected);
+      }
+    };
+
+    return (
+      <select
+        className="select select-xs select-bordered"
+        onChange={(event) => handleChange(event.target.value)}
+        value={value}
+      >
+        <option disabled value="">
+          Unset
+        </option>
+        {FUND_SFNS.map((sfn) => (
+          <option key={sfn} value={sfn}>
+            {sfn}
+          </option>
+        ))}
+        <option value={SFN_MULTIPLE}>Multiple</option>
+        <option value={EXCLUDED}>Excluded</option>
+      </select>
+    );
+  }
+
+  const status = segment.includeInReport;
+
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        className={`btn btn-xs ${status === true ? 'btn-success' : 'btn-ghost'}`}
+        onClick={() => onClassify(true, null)}
+        type="button"
+      >
+        Include
+      </button>
+      <button
+        className={`btn btn-xs ${status === false ? 'btn-error' : 'btn-ghost'}`}
+        onClick={() => onClassify(false, null)}
+        type="button"
+      >
+        Exclude
+      </button>
+      {status === null && (
+        <span className="badge badge-warning badge-sm">Unset</span>
+      )}
+    </div>
+  );
+}

client/src/components/dataClassification/SegmentGrid.tsx

@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import { SegmentClassificationControl } from './SegmentClassificationControl.tsx';
+import type {
+  ChartStringSegment,
+  SegmentType,
+} from '@/queries/chartStringSegments.ts';
+import { DataTable } from '@/shared/dataTable.tsx';
+import type { ColumnDef } from '@tanstack/react-table';
+
+function classificationSortValue(segment: ChartStringSegment): string {
+  if (segment.includeInReport === null) {
+    return '';
+  }
+  return segment.includeInReport ? (segment.sfn ?? 'Included') : 'Excluded';
+}
+
+// Codes ordered with unclassified (unset) rows first, otherwise stable.
+function unsetFirstCodes(segments: ChartStringSegment[]): string[] {
+  return [...segments]
+    .sort(
+      (a, b) =>
+        (a.includeInReport === null ? 0 : 1) -
+        (b.includeInReport === null ? 0 : 1)
+    )
+    .map((segment) => segment.code);
+}
+
+export function SegmentGrid({
+  onClassify,
+  segments,
+  segmentType,
+}: {
+  onClassify: (
+    segment: ChartStringSegment,
+    includeInReport: boolean,
+    sfn: string | null
+  ) => void;
+  segments: ChartStringSegment[];
+  segmentType: SegmentType;
+}) {
+  const levelKeys = [
+    ...new Set(
+      segments.flatMap((segment) =>
+        segment.hierarchy.map((level) => level.level)
+      )
+    ),
+  ].sort();
+
+  const levelColumns: ColumnDef<ChartStringSegment>[] = levelKeys.map(
+    (levelKey) => ({
+      accessorFn: (segment) =>
+        segment.hierarchy.find((level) => level.level === levelKey)?.code ?? '',
+      cell: ({ row }) => {
+        const level = row.original.hierarchy.find(
+          (candidate) => candidate.level === levelKey
+        );
+        if (!level) {
+          return <span className="text-base-content/40">—</span>;
+        }
+        return (
+          <span
+            className="tooltip tooltip-right underline decoration-dotted cursor-help"
+            data-tip={level.name ?? level.code}
+          >
+            {level.code}
+          </span>
+        );
+      },
+      header: `Level ${levelKey}`,
+      id: `level-${levelKey}`,
+    })
+  );
+
+  const columns: ColumnDef<ChartStringSegment>[] = [
+    { accessorKey: 'code', header: 'Code' },
+    { accessorKey: 'description', header: 'Name' },
+    ...levelColumns,
+    {
+      accessorFn: classificationSortValue,
+      cell: ({ row }) => (
+        <SegmentClassificationControl
+          onClassify={(includeInReport, sfn) =>
+            onClassify(row.original, includeInReport, sfn)
+          }
+          segment={row.original}
+        />
+      ),
+      header: 'Classification',
+      id: 'classification',
+    },
+  ];
+
+  // Freeze the default row order when the tab is entered: unclassified rows on top,
+  // otherwise stable. Recomputed only when the segment type changes (the "adjust
+  // state when a prop changes" pattern), so classifying a row in place does not
+  // immediately move it. Column sorting (below) overrides this when a header is
+  // clicked.
+  const [order, setOrder] = useState<{ codes: string[]; type: SegmentType }>(
+    () => ({ codes: unsetFirstCodes(segments), type: segmentType })
+  );
+  if (order.type !== segmentType) {
+    setOrder({ codes: unsetFirstCodes(segments), type: segmentType });
+  }
+  const orderIndex = new Map(order.codes.map((code, index) => [code, index]));
+  const orderedSegments = [...segments].sort(
+    (a, b) => (orderIndex.get(a.code) ?? 0) - (orderIndex.get(b.code) ?? 0)
+  );
+
+  return (
+    <DataTable
+      columns={columns}
+      data={orderedSegments}
+      globalFilter="right"
+      initialState={{ pagination: { pageSize: 25 } }}
+      key={segmentType}
+    />
+  );
+}

client/src/components/dataClassification/segments.ts

@@ -0,0 +1,32 @@
+import type {
+  ChartStringSegment,
+  SegmentType,
+} from '@/queries/chartStringSegments.ts';
+
+export const SEGMENT_TABS: { label: string; type: SegmentType }[] = [
+  { label: 'Financial Dept', type: 'FinancialDepartment' },
+  { label: 'Natural Account', type: 'Account' },
+  { label: 'Fund', type: 'Fund' },
+  { label: 'Activity', type: 'Activity' },
+  { label: 'ERN', type: 'Ern' },
+];
+
+export function segmentsForType(
+  segments: ChartStringSegment[],
+  type: SegmentType
+): ChartStringSegment[] {
+  return segments.filter((segment) => segment.segmentType === type);
+}
+
+export function unclassifiedCount(
+  segments: ChartStringSegment[],
+  type: SegmentType
+): number {
+  return segmentsForType(segments, type).filter(
+    (segment) => segment.includeInReport === null
+  ).length;
+}
+
+export function allClassified(segments: ChartStringSegment[]): boolean {
+  return segments.every((segment) => segment.includeInReport !== null);
+}