App Dashboard

 
import { useCallback, useMemo, useRef, useState } from "react";
import type { ColDef } from "ag-grid-community";
import EccTable from "@/ecc/components/forms/EccGrid";
import { ProcessDetail } from "@/ecc/components/widgets/ProcessDetail";
import { EccProcessTemplate } from "@/ecc/components/widgets/EccProcessTemplate";
import { EccSavedProcesses } from "@/ecc/components/widgets/EccSavedProcesses";
import { SavedProcessDetail } from "@/ecc/components/widgets/SavedProcessDetail";
import { fetchProcessList } from "@/ecc/services/ApiService";
import { getJsonValue } from "@/ecc/core/eccJsonResolve";
import type { EccProcess } from "@/ecc/types/taskTypes";

const columnDefs: ColDef<EccProcess>[] = [
  { colId: "key",   headerName: "Key",   width: 170, valueGetter: (p) => p.data?.businessKey ?? "" },
  { colId: "state", headerName: "State", width: 110, valueGetter: (p) => p.data?.state ?? "" },
  { colId: "type",  headerName: "Type",  flex: 1,    valueGetter: (p) => String(getJsonValue(p.data, "variables.purchase.requestType") ?? "") },
];

export default function PurchaseDashboard() {
  const [selected, setSelected] = useState<EccProcess | null>(null);
  const [selectedDraft, setSelectedDraft] = useState<EccProcess | null>(null);
  const reloadDrafts = useRef<(() => void) | null>(null);

  const tiles = useMemo<EccProcess[]>(() => [
    { eccType: "process", processId: "purchase", processName: "Purchase Request", templateDescription: "Request goods or services" },
  ], []);

  const dataFetcher = useCallback(
    (page: number, size: number, query?: string, sortBy?: string, sortOrder?: "asc" | "desc") =>
      fetchProcessList("purchase", page, size, query, sortBy, sortOrder),
    []);

  return (
    <div className="ecc-page">
      <div className="container-fluid">
        <h1>Purchasing</h1>
        <div className="row">
          <div className="col-12 col-md-8">
            <EccProcessTemplate processes={tiles} />
            <EccTable<EccProcess>
              dataFetcher={dataFetcher}
              columnDefs={columnDefs}
              onRowEvent={setSelected}
              getRowId={(row) => row.processInstanceId ?? ""}
              selectedRowId={selected?.processInstanceId}
              pageSize={20}
            />
            <EccSavedProcesses
              onSelectProcess={setSelectedDraft}
              selectedProcessId={selectedDraft?.processInstanceId}
              onReloadRef={(fn) => { reloadDrafts.current = fn; }}
            />
          </div>
          <div className="col-12 col-md-4">
            {selectedDraft
              ? <SavedProcessDetail process={selectedDraft} onDeleted={() => { setSelectedDraft(null); reloadDrafts.current?.(); }} />
              : <ProcessDetail process={selected} />}
          </div>
        </div>
      </div>
    </div>
  );
}

 
import PurchaseDashboard from "@/apps/purchase/PurchaseDashboard";

<Route path="/procurement" element={<PurchaseDashboard />} />