create-bluecopa-react-app 1.0.20 → 1.0.22

package/templates/latest/app/routes/apitest.tsx

@@ -0,0 +1,1963 @@
+import React, { useState } from "react";
+import { AppSidebar } from "~/components/app-sidebar";
+import { SiteHeader } from "~/components/site-header";
+import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { toast } from "sonner";
+import {
+  useGetWorkbookDetails,
+  useSaveWorkbook,
+  usePublishWorkbook,
+  useGetTaskDetails,
+  useRunRecon,
+  useFileUpload,
+  useFileDownload,
+  useGetFormSchema,
+  useGetFormData,
+  useGetAuditLogs,
+  useCreateAuditLog,
+  useGetAllTemplatedPipelines,
+  useGetAllRecon,
+  useGetFormById,
+  useCreateOrUpdateForm,
+  useMarkTaskDone,
+  useReassignTask,
+} from "@bluecopa/react";
+
+// Default values for examples
+const DEFAULT_WORKBOOK_ID = "MJ2T21GQ8O8DQXIOHZBF";
+const DEFAULT_TASK_ID = "0V4Kxc7LhIpUvwZeORaj";
+const DEFAULT_WORKFLOW_ID = "MJ02HD1HUJ4VCN66U0V0";
+const DEFAULT_FORM_INSTANCE_ID = "0V5W3KVAWdRnVOZczmSN";
+const DEFAULT_FORM_REVISION = 21949795;
+const DEFAULT_FORM_ID = "0V5W3KVAWdRnVOZczmSN";
+const DEFAULT_FILE_UPLOAD_PAYLOAD = {
+  id: "0URYQ4DIHB1mVzPA87ZW",
+  name: "octobereighteennnqq",
+  description: "",
+  sequence: [
+    {
+      step_id: "0URYQFlVMr1DuDagpmlS",
+      name: "activity_1_",
+      type: "UPDATE_AND_RUN_RECON",
+      description: "",
+      inputs: {
+        recon_run_config_id: "${0URYQEEuxOPKIlGouLr2.form_data.recon_form}",
+      },
+    },
+  ],
+};
+
+// Default values for audit log examples
+const DEFAULT_AUDIT_LOG_REQUEST = {
+  entityId: "0TOlmUqx0TKseTn8W6gW",
+  source: "UI",
+  limit: 20,
+};
+
+const DEFAULT_AUDIT_RECORD = [
+  {
+    source: "UI",
+    userId: "0TOlmUqx0TKseTn8W6gW",
+    entityId: "0TOlmUqx0TKseTn8W6gW",
+    entityType: "Dataset",
+    action: "CREATE",
+    eventType: "API",
+  },
+];
+
+const DEFAULT_NEW_ASSIGNEE = "0TOlmUqx0TKseTn8W6gW";
+
+// Workbook Test Component
+function WorkbookTestSection() {
+  const [workbookId, setWorkbookId] = useState<string>("");
+  const [workbookData, setWorkbookData] = useState<any>(null);
+
+  // Save Workbook inputs
+  const [saveWorkbookData, setSaveWorkbookData] = useState<string>("");
+  const [sheetInputs, setSheetInputs] = useState<string>("[]");
+
+  // Publish Workbook input
+  const [publishWorkbookId, setPublishWorkbookId] = useState<string>("");
+
+  // Get Workbook Details Hook - disabled by default, only runs on user action
+  const workbookDetailsQuery = useGetWorkbookDetails(workbookId || null, {
+    enabled: false, // No automatic fetching - all calls are user-initiated
+  });
+
+  // Save Workbook Hook
+  const saveWorkbookMutation = useSaveWorkbook();
+
+  // Publish Workbook Hook
+  const publishWorkbookMutation = usePublishWorkbook();
+
+  // Handle Load Example for Get Workbook
+  const handleLoadExample = () => {
+    setWorkbookId(DEFAULT_WORKBOOK_ID);
+    toast.info(
+      'Example workbook ID loaded. Click "Get Workbook Details" to fetch.'
+    );
+  };
+
+  // Handle Load Example for Save Workbook
+  const handleLoadSaveExample = () => {
+    // Create a minimal example workbook structure
+    const exampleWorkbook = {
+      name: "sap_test1",
+      description: null,
+      parentId: null,
+      type: "PROCESS",
+      addToHome: false,
+      path: "prod/MJ2T21GQ8O8DQXIOHZBF",
+      sheetIds: ["MJ2T1S6CAWSVEHR5136Z"],
+      sheetRevisionById: {
+        MJ2T1S6CAWSVEHR5136Z: 21944090,
+      },
+      published: false,
+      sheets: [
+        {
+          name: "Process",
+          sources: null,
+          parentId: "MJ2T21GQ8O8DQXIOHZBF",
+          parentVersion: null,
+          parentType: "PROCESS",
+          type: "PROCESS_SHEET",
+          published: false,
+          customFields: {},
+          publishedVersion: null,
+          externalUrl:
+            "gs://gcp-dev-v3-stage-out/PROC_DEFINITION/MJ6WV5IW2FT808T2JWFK.json",
+          modelUrl:
+            "gs://gcp-dev-v3-stage-out/PROC_CUSTOM_MODEL/MJ6WV5IYWOZI9YY6M3UR.json",
+          tags: null,
+          createdBy: "0TOlmUqx0TKseTn8W6gW",
+          createdDate: "2025-12-12T11:50:09.155+00:00",
+          lastModifiedBy: "0TOlmUqx0TKseTn8W6gW",
+          lastModifiedDate: "2025-12-15T08:47:53.402+00:00",
+          id: "MJ2T1S6CAWSVEHR5136Z",
+          workspaceId: "prod",
+          entityVersion: 13,
+          definitionFileId: "PROC_DEFINITION/MJ6WV5IW2FT808T2JWFK.json",
+          modelFileId: "PROC_CUSTOM_MODEL/MJ6WV5IYWOZI9YY6M3UR.json",
+          externalDataId: "PROC_DEFINITION/MJ6WV5IW2FT808T2JWFK.json",
+          modelId: "PROC_CUSTOM_MODEL/MJ6WV5IYWOZI9YY6M3UR.json",
+        },
+      ],
+      customFields: {
+        formTriggered: {
+          value: false,
+        },
+        httpTriggered: {
+          value: false,
+        },
+        manualTriggered: {
+          value: true,
+        },
+        scheduledTriggered: {
+          value: false,
+        },
+      },
+      indexedForAssistant: false,
+      tags: null,
+      builderSpaceType: null,
+      latestVersionPublished: true,
+      createdBy: "0TOlmUqx0TKseTn8W6gW",
+      createdDate: "2025-12-12T11:50:09.183+00:00",
+      lastModifiedBy: "0TOlmUqx0TKseTn8W6gW",
+      lastModifiedDate: "2025-12-16T05:35:08.035+00:00",
+      id: "MJ2T21GQ8O8DQXIOHZBF",
+      workspaceId: "prod",
+      entityVersion: 9,
+    };
+
+    setSaveWorkbookData(JSON.stringify(exampleWorkbook, null, 2));
+    setSheetInputs("[]");
+    toast.info('Example workbook data loaded. Click "Save Workbook" to save.');
+  };
+
+  // Handle Load Example for Publish Workbook
+  const handleLoadPublishExample = () => {
+    setPublishWorkbookId(DEFAULT_WORKBOOK_ID);
+    toast.info(
+      'Example workbook ID loaded. Click "Publish Workbook" to publish.'
+    );
+  };
+
+  // Handle Get Workbook Details
+  const handleGetWorkbookDetails = async () => {
+    if (!workbookId) {
+      toast.error("Please enter a workbook ID");
+      return;
+    }
+    try {
+      const result = await workbookDetailsQuery.refetch();
+      if (result.data) {
+        setWorkbookData(result.data);
+        console.log("Workbook details:", result.data);
+        toast.success("Workbook details loaded! Check console for data.");
+      }
+    } catch (error: any) {
+      toast.error(`Error: ${error.message}`);
+    }
+  };
+
+  // Handle Save Workbook
+  const handleSaveWorkbook = async () => {
+    if (!saveWorkbookData) {
+      toast.error("Please enter workbook data (JSON)");
+      return;
+    }
+    try {
+      let parsedWorkbook;
+      let parsedSheetInputs;
+
+      try {
+        parsedWorkbook = JSON.parse(saveWorkbookData);
+      } catch (e) {
+        toast.error("Invalid JSON format for workbook data");
+        return;
+      }
+
+      try {
+        parsedSheetInputs = JSON.parse(sheetInputs);
+      } catch (e) {
+        toast.error("Invalid JSON format for sheet inputs");
+        return;
+      }
+
+      const result = await saveWorkbookMutation.mutateAsync({
+        workbook: parsedWorkbook,
+        sheetInputs: parsedSheetInputs,
+      });
+      console.log("Workbook saved:", result);
+      toast.success("Workbook saved successfully! Check console for data.");
+    } catch (error: any) {
+      console.error("Save error:", error);
+      toast.error(`Save failed: ${error.message}`);
+    }
+  };
+
+  // Handle Publish Workbook
+  const handlePublishWorkbook = async () => {
+    if (!publishWorkbookId) {
+      toast.error("Please enter a workbook ID");
+      return;
+    }
+    try {
+      const result = await publishWorkbookMutation.mutateAsync({
+        workbookId: publishWorkbookId,
+      });
+      console.log("Workbook published:", result);
+      toast.success("Workbook published successfully! Check console for data.");
+    } catch (error: any) {
+      console.error("Publish error:", error);
+      toast.error(`Publish failed: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Workbook Operations Test</CardTitle>
+        <CardDescription>
+          Get, save, and publish workbook details
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="workbookId">Workbook ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="workbookId"
+              value={workbookId}
+              onChange={(e) => setWorkbookId(e.target.value)}
+              placeholder="Enter workbook ID"
+            />
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <button
+              type="button"
+              onClick={handleLoadExample}
+              className="underline text-blue-600 hover:text-blue-800"
+            >
+              {DEFAULT_WORKBOOK_ID}
+            </button>
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleGetWorkbookDetails}
+            disabled={workbookDetailsQuery.isLoading || !workbookId}
+            variant="default"
+          >
+            {workbookDetailsQuery.isLoading
+              ? "Loading..."
+              : "1. Get Workbook Details"}
+          </Button>
+        </div>
+
+        {/* Status Messages for Get Workbook */}
+        {workbookDetailsQuery.isError && (
+          <p className="text-red-500">
+            Get Error: {workbookDetailsQuery.error?.message}
+          </p>
+        )}
+        {workbookDetailsQuery.isSuccess && workbookData && (
+          <p className="text-green-500">
+            ✓ Workbook details loaded (ID: {workbookData.id})
+          </p>
+        )}
+
+        {/* Workbook Data Preview */}
+        {workbookData && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Workbook Data:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(workbookData, null, 2)}
+            </pre>
+          </div>
+        )}
+
+        {/* Save Workbook Section */}
+        <div className="border-t pt-4 mt-4 space-y-4">
+          <h3 className="text-lg font-semibold">Save Workbook</h3>
+          <div className="space-y-2">
+            <Label htmlFor="saveWorkbookData">Workbook Data (JSON)</Label>
+            <div className="flex gap-2 mb-2">
+              <Button
+                onClick={handleLoadSaveExample}
+                variant="outline"
+                type="button"
+              >
+                Load Example
+              </Button>
+            </div>
+            <textarea
+              id="saveWorkbookData"
+              value={saveWorkbookData}
+              onChange={(e) => setSaveWorkbookData(e.target.value)}
+              placeholder="Enter workbook JSON data"
+              className="w-full min-h-[150px] p-2 border rounded-md font-mono text-xs"
+            />
+            <p className="text-xs text-muted-foreground">
+              Example: Click "Load Example" button above to load sample workbook
+              data
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="sheetInputs">Sheet Inputs (JSON Array)</Label>
+            <Input
+              id="sheetInputs"
+              value={sheetInputs}
+              onChange={(e) => setSheetInputs(e.target.value)}
+              placeholder="Enter sheet inputs as JSON array, e.g., []"
+              className="font-mono text-xs"
+            />
+            <p className="text-xs text-muted-foreground">
+              Example: <code className="bg-muted px-1 rounded">[]</code> (empty
+              array)
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Button
+              onClick={handleSaveWorkbook}
+              disabled={saveWorkbookMutation.isPending || !saveWorkbookData}
+              variant="default"
+            >
+              {saveWorkbookMutation.isPending
+                ? "Saving..."
+                : "2. Save Workbook"}
+            </Button>
+
+            {/* Status Messages for Save Workbook */}
+            {saveWorkbookMutation.isError && (
+              <p className="text-red-500">
+                Save Error: {saveWorkbookMutation.error?.message}
+              </p>
+            )}
+            {saveWorkbookMutation.isSuccess && (
+              <p className="text-green-500">✓ Workbook saved successfully</p>
+            )}
+          </div>
+        </div>
+
+        {/* Publish Workbook Section */}
+        <div className="border-t pt-4 mt-4 space-y-4">
+          <h3 className="text-lg font-semibold">Publish Workbook</h3>
+          <div className="space-y-2">
+            <Label htmlFor="publishWorkbookId">Workbook ID</Label>
+            <div className="flex gap-2">
+              <Input
+                id="publishWorkbookId"
+                value={publishWorkbookId}
+                onChange={(e) => setPublishWorkbookId(e.target.value)}
+                placeholder="Enter workbook ID"
+              />
+              <Button
+                onClick={handleLoadPublishExample}
+                variant="outline"
+                type="button"
+              >
+                Load Example
+              </Button>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Example:{" "}
+              <button
+                type="button"
+                onClick={handleLoadPublishExample}
+                className="underline text-blue-600 hover:text-blue-800"
+              >
+                {DEFAULT_WORKBOOK_ID}
+              </button>
+            </p>
+          </div>
+
+          <Button
+            onClick={handlePublishWorkbook}
+            disabled={publishWorkbookMutation.isPending || !publishWorkbookId}
+            variant="default"
+          >
+            {publishWorkbookMutation.isPending
+              ? "Publishing..."
+              : "3. Publish Workbook"}
+          </Button>
+
+          {/* Status Messages for Publish Workbook */}
+          {publishWorkbookMutation.isError && (
+            <p className="text-red-500">
+              Publish Error: {publishWorkbookMutation.error?.message}
+            </p>
+          )}
+          {publishWorkbookMutation.isSuccess && (
+            <p className="text-green-500">✓ Workbook published successfully</p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Task Test Component
+function TaskTestSection() {
+  const [taskId, setTaskId] = useState<string>("");
+
+  // Get Task Details Hook - disabled by default
+  const taskDetailsQuery = useGetTaskDetails(taskId || null, {
+    enabled: false, // No automatic fetching - all calls are user-initiated
+  });
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setTaskId(DEFAULT_TASK_ID);
+    toast.info('Example task ID loaded. Click "Get Task Details" to fetch.');
+  };
+
+  // Handle Get Task Details
+  const handleGetTaskDetails = async () => {
+    if (!taskId) {
+      toast.error("Please enter a task ID");
+      return;
+    }
+    try {
+      const result = await taskDetailsQuery.refetch();
+      if (result.data) {
+        console.log("Task details:", result.data);
+        toast.success("Task details loaded! Check console for data.");
+      }
+    } catch (error: any) {
+      toast.error(`Error: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Task Operations Test</CardTitle>
+        <CardDescription>Get task details by task ID</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="taskId">Task ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="taskId"
+              value={taskId}
+              onChange={(e) => setTaskId(e.target.value)}
+              placeholder="Enter task ID"
+            />
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <button
+              type="button"
+              onClick={handleLoadExample}
+              className="underline text-blue-600 hover:text-blue-800"
+            >
+              {DEFAULT_TASK_ID}
+            </button>
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleGetTaskDetails}
+            disabled={taskDetailsQuery.isLoading || !taskId}
+            variant="default"
+          >
+            {taskDetailsQuery.isLoading ? "Loading..." : "Get Task Details"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {taskDetailsQuery.isError && (
+          <p className="text-red-500">
+            Get Error: {taskDetailsQuery.error?.message}
+          </p>
+        )}
+        {taskDetailsQuery.isSuccess && taskDetailsQuery.data && (
+          <p className="text-green-500">
+            ✓ Task details loaded (ID: {taskDetailsQuery.data.id || taskId})
+          </p>
+        )}
+
+        {/* Task Data Preview */}
+        {taskDetailsQuery.data && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Task Data:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(taskDetailsQuery.data, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Run Recon Test Component
+function RunReconTestSection() {
+  const [workflowId, setWorkflowId] = useState<string>("");
+  const [fullRefresh, setFullRefresh] = useState<boolean>(true);
+  const [reconResult, setReconResult] = useState<any>(null);
+
+  // Run Recon Hook
+  const runReconMutation = useRunRecon();
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setWorkflowId(DEFAULT_WORKFLOW_ID);
+    setFullRefresh(true);
+    toast.info('Example workflow ID loaded. Click "Run Recon" to execute.');
+  };
+
+  // Handle Run Recon
+  const handleRunRecon = async () => {
+    if (!workflowId) {
+      toast.error("Please enter a workflow ID");
+      return;
+    }
+    try {
+      const result = await runReconMutation.mutateAsync({
+        workflowId: workflowId,
+        fullRefresh: fullRefresh,
+      });
+      console.log("Run Recon result:", result);
+      setReconResult(result);
+      toast.success("Recon workflow started! Check console for data.");
+    } catch (error: any) {
+      console.error("Run Recon error:", error);
+      toast.error(`Run Recon failed: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Run Recon Operations Test</CardTitle>
+        <CardDescription>Run a reconciliation workflow</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="workflowId">Workflow ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="workflowId"
+              value={workflowId}
+              onChange={(e) => setWorkflowId(e.target.value)}
+              placeholder="Enter workflow ID"
+            />
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <button
+              type="button"
+              onClick={handleLoadExample}
+              className="underline text-blue-600 hover:text-blue-800"
+            >
+              {DEFAULT_WORKFLOW_ID}
+            </button>
+          </p>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id="fullRefresh"
+            checked={fullRefresh}
+            onChange={(e) => setFullRefresh(e.target.checked)}
+            className="h-4 w-4"
+          />
+          <Label htmlFor="fullRefresh" className="cursor-pointer">
+            Full Refresh
+          </Label>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleRunRecon}
+            disabled={runReconMutation.isPending || !workflowId}
+            variant="default"
+          >
+            {runReconMutation.isPending ? "Running..." : "Run Recon"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {runReconMutation.isError && (
+          <p className="text-red-500">
+            Run Recon Error: {runReconMutation.error?.message}
+          </p>
+        )}
+        {runReconMutation.isSuccess && reconResult && (
+          <p className="text-green-500">
+            ✓ Recon workflow started successfully
+          </p>
+        )}
+
+        {/* Recon Result Preview */}
+        {reconResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Recon Result:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(reconResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// File Upload Test Component
+function FileUploadTestSection() {
+  const [fileUploadData, setFileUploadData] = useState<string>("");
+  const [fileId, setFileId] = useState<string>("");
+  const [downloadedData, setDownloadedData] = useState<any>(null);
+
+  // File Upload Hook
+  const fileUploadMutation = useFileUpload();
+
+  // File Download Hook - disabled by default
+  const fileDownloadQuery = useFileDownload(fileId || null, {
+    enabled: false, // No automatic fetching - all calls are user-initiated
+  });
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setFileUploadData(JSON.stringify(DEFAULT_FILE_UPLOAD_PAYLOAD, null, 2));
+    toast.info('Example payload loaded. Click "Upload File" to upload.');
+  };
+
+  // Handle File Upload
+  const handleFileUpload = async () => {
+    if (!fileUploadData) {
+      toast.error("Please enter file data (JSON)");
+      return;
+    }
+    try {
+      let parsedData;
+      try {
+        parsedData = JSON.parse(fileUploadData);
+      } catch (e) {
+        toast.error("Invalid JSON format");
+        return;
+      }
+
+      const result = await fileUploadMutation.mutateAsync({
+        data: parsedData,
+        uploadType: "DEFINITION",
+      });
+      console.log("File uploaded, fileId:", result.fileId);
+      setFileId(result.fileId);
+      toast.success(`File uploaded successfully! File ID: ${result.fileId}`);
+    } catch (error: any) {
+      console.error("File upload error:", error);
+      toast.error(`File upload failed: ${error.message}`);
+    }
+  };
+
+  // Handle File Download
+  const handleFileDownload = async () => {
+    if (!fileId) {
+      toast.error("Please upload a file first to get fileId");
+      return;
+    }
+    try {
+      const result = await fileDownloadQuery.refetch();
+      if (result.data) {
+        setDownloadedData(result.data);
+        console.log("File downloaded:", result.data);
+        toast.success("File downloaded! Check console for data.");
+      }
+    } catch (error: any) {
+      toast.error(`Download Error: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>File Upload/Download Operations Test</CardTitle>
+        <CardDescription>
+          Upload a file, get fileId, then download and display the file
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="fileUploadData">File Data (JSON)</Label>
+          <div className="flex gap-2 mb-2">
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <textarea
+            id="fileUploadData"
+            value={fileUploadData}
+            onChange={(e) => setFileUploadData(e.target.value)}
+            placeholder="Enter JSON data to upload"
+            className="w-full min-h-[150px] p-2 border rounded-md font-mono text-xs"
+          />
+          <p className="text-xs text-muted-foreground">
+            Example: Click "Load Example" button above to load sample JSON
+            payload
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="fileId">File ID (from upload response)</Label>
+          <Input
+            id="fileId"
+            value={fileId}
+            onChange={(e) => setFileId(e.target.value)}
+            placeholder="File ID will appear here after upload"
+          />
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleFileUpload}
+            disabled={fileUploadMutation.isPending || !fileUploadData}
+            variant="default"
+          >
+            {fileUploadMutation.isPending ? "Uploading..." : "1. Upload File"}
+          </Button>
+
+          <Button
+            onClick={handleFileDownload}
+            disabled={fileDownloadQuery.isLoading || !fileId}
+            variant="default"
+          >
+            {fileDownloadQuery.isLoading
+              ? "Downloading..."
+              : "2. Download File"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {fileUploadMutation.isError && (
+          <p className="text-red-500">
+            Upload Error: {fileUploadMutation.error?.message}
+          </p>
+        )}
+        {fileUploadMutation.isSuccess && fileId && (
+          <p className="text-green-500">
+            ✓ File uploaded successfully (File ID: {fileId})
+          </p>
+        )}
+
+        {fileDownloadQuery.isError && (
+          <p className="text-red-500">
+            Download Error: {fileDownloadQuery.error?.message}
+          </p>
+        )}
+        {fileDownloadQuery.isSuccess && downloadedData && (
+          <p className="text-green-500">✓ File downloaded successfully</p>
+        )}
+
+        {/* Uploaded Payload Preview */}
+        {fileUploadMutation.isSuccess && fileUploadData && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Uploaded Payload:</p>
+            <pre className="text-xs overflow-auto max-h-40">
+              {fileUploadData}
+            </pre>
+          </div>
+        )}
+
+        {/* Downloaded File Data Preview */}
+        {downloadedData && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Downloaded File Data:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(downloadedData, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Form Schema Test Component
+function FormSchemaTestSection() {
+  const [formInstanceId, setFormInstanceId] = useState<string>("");
+  const [formRevision, setFormRevision] = useState<number>(1);
+
+  // Get Form Schema Hook - disabled by default
+  const formSchemaQuery = useGetFormSchema(
+    formInstanceId || null,
+    formRevision ? Number(formRevision) : null
+  );
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setFormInstanceId(DEFAULT_FORM_INSTANCE_ID);
+    setFormRevision(DEFAULT_FORM_REVISION);
+    toast.info(
+      'Example form instance ID and revision loaded. Click "Get Form Schema" to fetch.'
+    );
+  };
+
+  // Handle Get Form Schema
+  const handleGetFormSchema = async () => {
+    if (!formInstanceId || !formRevision) {
+      toast.error("Please enter form instance ID and revision");
+      return;
+    }
+    try {
+      const result = await formSchemaQuery.refetch();
+      if (result.data) {
+        console.log("Form schema:", result.data);
+        toast.success("Form schema loaded! Check console for data.");
+      }
+    } catch (error: any) {
+      toast.error(`Error: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Form Schema Operations Test</CardTitle>
+        <CardDescription>
+          Get form schema by form instance ID and revision
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="formInstanceId">Form Instance ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="formInstanceId"
+              value={formInstanceId}
+              onChange={(e) => setFormInstanceId(e.target.value)}
+              placeholder="Enter form instance ID"
+            />
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <button
+              type="button"
+              onClick={handleLoadExample}
+              className="underline text-blue-600 hover:text-blue-800"
+            >
+              {DEFAULT_FORM_INSTANCE_ID || "Enter form instance ID"}
+            </button>
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="formRevision">Form Revision</Label>
+          <Input
+            id="formRevision"
+            value={formRevision}
+            onChange={(e) => setFormRevision(Number(e.target.value) || 1)}
+            placeholder="Enter form revision (e.g., 1)"
+          />
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <code className="bg-muted px-1 rounded">
+              {DEFAULT_FORM_REVISION}
+            </code>
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleGetFormSchema}
+            disabled={
+              formSchemaQuery.isLoading || !formInstanceId || !formRevision
+            }
+            variant="default"
+          >
+            {formSchemaQuery.isLoading ? "Loading..." : "Get Form Schema"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {formSchemaQuery.isError && (
+          <p className="text-red-500">
+            Get Error: {formSchemaQuery.error?.message}
+          </p>
+        )}
+        {formSchemaQuery.isSuccess && formSchemaQuery.data && (
+          <p className="text-green-500">✓ Form schema loaded successfully</p>
+        )}
+
+        {/* Form Schema Data Preview */}
+        {formSchemaQuery.data && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Form Schema Data:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(formSchemaQuery.data, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Get Audit Logs Test Component
+function GetAuditLogsTestSection() {
+  const [auditLogRequest, setAuditLogRequest] = useState<string>("");
+  const [auditLogsResult, setAuditLogsResult] = useState<any>(null);
+
+  // Get Audit Logs Hook
+  const getAuditLogsMutation = useGetAuditLogs();
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setAuditLogRequest(JSON.stringify(DEFAULT_AUDIT_LOG_REQUEST, null, 2));
+    toast.info(
+      'Example audit log request loaded. Click "Get Audit Logs" to fetch.'
+    );
+  };
+
+  // Handle Get Audit Logs
+  const handleGetAuditLogs = async () => {
+    if (!auditLogRequest) {
+      toast.error("Please enter audit log request (JSON)");
+      return;
+    }
+    try {
+      let parsedRequest;
+      try {
+        parsedRequest = JSON.parse(auditLogRequest);
+      } catch (e) {
+        toast.error("Invalid JSON format");
+        return;
+      }
+
+      const result = await getAuditLogsMutation.mutateAsync(parsedRequest);
+      setAuditLogsResult(result);
+      toast.success("Audit logs loaded! Check console for data.");
+    } catch (error: any) {
+      console.error("Get audit logs error:", error);
+      toast.error(`Get audit logs failed: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Get Audit Logs Operations Test</CardTitle>
+        <CardDescription>Get audit logs with filter criteria</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="auditLogRequest">Audit Log Request (JSON)</Label>
+          <div className="flex gap-2 mb-2">
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <textarea
+            id="auditLogRequest"
+            value={auditLogRequest}
+            onChange={(e) => setAuditLogRequest(e.target.value)}
+            placeholder="Enter audit log request JSON"
+            className="w-full min-h-[150px] p-2 border rounded-md font-mono text-xs"
+          />
+          <p className="text-xs text-muted-foreground">
+            Example: Click "Load Example" button above to load sample request
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleGetAuditLogs}
+            disabled={getAuditLogsMutation.isPending || !auditLogRequest}
+            variant="default"
+          >
+            {getAuditLogsMutation.isPending ? "Loading..." : "Get Audit Logs"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {getAuditLogsMutation.isError && (
+          <p className="text-red-500">
+            Get Error: {getAuditLogsMutation.error?.message}
+          </p>
+        )}
+        {getAuditLogsMutation.isSuccess && auditLogsResult && (
+          <p className="text-green-500">
+            ✓ Audit logs loaded successfully (Count:{" "}
+            {auditLogsResult.count || 0})
+          </p>
+        )}
+
+        {/* Audit Logs Result Preview */}
+        {auditLogsResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Audit Logs Result:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(auditLogsResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Create Audit Log Test Component
+function CreateAuditLogTestSection() {
+  const [auditRecords, setAuditRecords] = useState<string>("");
+  const [createResult, setCreateResult] = useState<any>(null);
+
+  // Create Audit Log Hook
+  const createAuditLogMutation = useCreateAuditLog();
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    const exampleRecords = DEFAULT_AUDIT_RECORD;
+    setAuditRecords(JSON.stringify(exampleRecords, null, 2));
+    toast.info(
+      'Example audit record loaded. Click "Create Audit Log" to create.'
+    );
+  };
+
+  // Handle Create Audit Log
+  const handleCreateAuditLog = async () => {
+    if (!auditRecords) {
+      toast.error("Please enter audit records (JSON array)");
+      return;
+    }
+    try {
+      let parsedRecords;
+      try {
+        parsedRecords = JSON.parse(auditRecords);
+      } catch (e) {
+        toast.error("Invalid JSON format");
+        return;
+      }
+
+      if (!Array.isArray(parsedRecords)) {
+        toast.error("Audit records must be an array");
+        return;
+      }
+
+      const result = await createAuditLogMutation.mutateAsync({
+        auditRecords: parsedRecords,
+      });
+      console.log("Audit log created:", result);
+      setCreateResult(result);
+      toast.success("Audit log created successfully! Check console for data.");
+    } catch (error: any) {
+      console.error("Create audit log error:", error);
+      toast.error(`Create audit log failed: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Create Audit Log Operations Test</CardTitle>
+        <CardDescription>Create audit log records</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="auditRecords">Audit Records (JSON Array)</Label>
+          <div className="flex gap-2 mb-2">
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <textarea
+            id="auditRecords"
+            value={auditRecords}
+            onChange={(e) => setAuditRecords(e.target.value)}
+            placeholder="Enter audit records as JSON array"
+            className="w-full min-h-[200px] p-2 border rounded-md font-mono text-xs"
+          />
+          <p className="text-xs text-muted-foreground">
+            Example: Click "Load Example" button above to load sample audit
+            record
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleCreateAuditLog}
+            disabled={createAuditLogMutation.isPending || !auditRecords}
+            variant="default"
+          >
+            {createAuditLogMutation.isPending
+              ? "Creating..."
+              : "Create Audit Log"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {createAuditLogMutation.isError && (
+          <p className="text-red-500">
+            Create Error: {createAuditLogMutation.error?.message}
+          </p>
+        )}
+        {createAuditLogMutation.isSuccess && createResult && (
+          <p className="text-green-500">✓ Audit log created successfully</p>
+        )}
+
+        {/* Create Result Preview */}
+        {createResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Create Result:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(createResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Get All Templated Pipelines Test Component
+function GetAllTemplatedPipelinesTestSection() {
+  const [templatedPipelinesResult, setTemplatedPipelinesResult] =
+    useState<any>(null);
+
+  // Get All Templated Pipelines Hook - disabled by default
+  const templatedPipelinesQuery = useGetAllTemplatedPipelines({
+    enabled: false,
+  });
+
+  // Handle Get All Templated Pipelines
+  const handleGetAllTemplatedPipelines = async () => {
+    try {
+      const result = await templatedPipelinesQuery.refetch();
+      if (result.data) {
+        setTemplatedPipelinesResult(result.data);
+        console.log("Templated pipelines:", result.data);
+        toast.success("Templated pipelines loaded! Check console for data.");
+      }
+    } catch (error: any) {
+      toast.error(`Error: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Get All Templated Pipelines Test</CardTitle>
+        <CardDescription>Get all templated pipeline workflows</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex gap-4">
+          <Button
+            onClick={handleGetAllTemplatedPipelines}
+            disabled={templatedPipelinesQuery.isLoading}
+            variant="default"
+          >
+            {templatedPipelinesQuery.isLoading
+              ? "Loading..."
+              : "Get All Templated Pipelines"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {templatedPipelinesQuery.isError && (
+          <p className="text-red-500">
+            Get Error: {templatedPipelinesQuery.error?.message}
+          </p>
+        )}
+        {templatedPipelinesQuery.isSuccess && templatedPipelinesResult && (
+          <p className="text-green-500">
+            ✓ Templated pipelines loaded successfully (Count:{" "}
+            {templatedPipelinesResult.length || 0})
+          </p>
+        )}
+
+        {/* Templated Pipelines Result Preview */}
+        {templatedPipelinesResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">
+              Templated Pipelines Result:
+            </p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(templatedPipelinesResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Get All Recon Test Component
+function GetAllReconTestSection() {
+  const [reconResult, setReconResult] = useState<any>(null);
+
+  // Get All Recon Hook - disabled by default
+  const reconQuery = useGetAllRecon({
+    enabled: false,
+  });
+
+  // Handle Get All Recon
+  const handleGetAllRecon = async () => {
+    try {
+      const result = await reconQuery.refetch();
+      if (result.data) {
+        setReconResult(result.data);
+        console.log("Recon workflows:", result.data);
+        toast.success("Recon workflows loaded! Check console for data.");
+      }
+    } catch (error: any) {
+      toast.error(`Error: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Get All Recon Workflows Test</CardTitle>
+        <CardDescription>Get all reconciliation workflows</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex gap-4">
+          <Button
+            onClick={handleGetAllRecon}
+            disabled={reconQuery.isLoading}
+            variant="default"
+          >
+            {reconQuery.isLoading ? "Loading..." : "Get All Recon Workflows"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {reconQuery.isError && (
+          <p className="text-red-500">Get Error: {reconQuery.error?.message}</p>
+        )}
+        {reconQuery.isSuccess && reconResult && (
+          <p className="text-green-500">
+            ✓ Recon workflows loaded successfully (Count:{" "}
+            {reconResult.length || 0})
+          </p>
+        )}
+
+        {/* Recon Result Preview */}
+        {reconResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">
+              Recon Workflows Result:
+            </p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(reconResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Get Form By ID Test Component
+function GetFormByIdTestSection() {
+  const [formId, setFormId] = useState<string>("");
+  const [formResult, setFormResult] = useState<any>(null);
+
+  // Get Form By ID Hook - disabled by default
+  const formQuery = useGetFormById(formId || null, {
+    enabled: false,
+  });
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setFormId(DEFAULT_FORM_ID);
+    toast.info('Example form ID loaded. Click "Get Form By ID" to fetch.');
+  };
+
+  // Handle Get Form By ID
+  const handleGetFormById = async () => {
+    if (!formId) {
+      toast.error("Please enter a form ID");
+      return;
+    }
+    try {
+      const result = await formQuery.refetch();
+      if (result.data) {
+        setFormResult(result.data);
+        console.log("Form:", result.data);
+        toast.success("Form loaded! Check console for data.");
+      }
+    } catch (error: any) {
+      toast.error(`Error: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Get Form By ID Test</CardTitle>
+        <CardDescription>Get form details by form ID</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="formId">Form ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="formId"
+              value={formId}
+              onChange={(e) => setFormId(e.target.value)}
+              placeholder="Enter form ID"
+            />
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <button
+              type="button"
+              onClick={handleLoadExample}
+              className="underline text-blue-600 hover:text-blue-800"
+            >
+              {DEFAULT_FORM_ID || "Enter form ID"}
+            </button>
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleGetFormById}
+            disabled={formQuery.isLoading || !formId}
+            variant="default"
+          >
+            {formQuery.isLoading ? "Loading..." : "Get Form By ID"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {formQuery.isError && (
+          <p className="text-red-500">Get Error: {formQuery.error?.message}</p>
+        )}
+        {formQuery.isSuccess && formResult && (
+          <p className="text-green-500">
+            ✓ Form loaded successfully (ID: {formResult.id || formId})
+          </p>
+        )}
+
+        {/* Form Result Preview */}
+        {formResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Form Result:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(formResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Create Or Update Form Test Component
+function CreateOrUpdateFormTestSection() {
+  const [formData, setFormData] = useState<string>("");
+  const [createResult, setCreateResult] = useState<any>(null);
+
+  // Create Or Update Form Hook
+  const createOrUpdateFormMutation = useCreateOrUpdateForm();
+
+  // Handle Create Or Update Form
+  const handleCreateOrUpdateForm = async () => {
+    if (!formData) {
+      toast.error("Please enter form data (JSON)");
+      return;
+    }
+    try {
+      let parsedForm;
+      try {
+        parsedForm = JSON.parse(formData);
+      } catch (e) {
+        toast.error("Invalid JSON format");
+        return;
+      }
+
+      const result = await createOrUpdateFormMutation.mutateAsync({
+        data: parsedForm,
+      });
+      console.log("Form created/updated:", result);
+      setCreateResult(result);
+      toast.success(
+        "Form created/updated successfully! Check console for data."
+      );
+    } catch (error: any) {
+      console.error("Create/Update form error:", error);
+      toast.error(`Create/Update form failed: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Create Or Update Form Test</CardTitle>
+        <CardDescription>Create or update a form</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="formData">Form Data (JSON)</Label>
+          <div className="flex gap-2 mb-2">
+          </div>
+          <textarea
+            id="formData"
+            value={formData}
+            onChange={(e) => setFormData(e.target.value)}
+            placeholder="Enter form data as JSON"
+            className="w-full min-h-[200px] p-2 border rounded-md font-mono text-xs"
+          />
+          <p className="text-xs text-muted-foreground">
+            Example: Click "Load Example" button above to load sample form data
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleCreateOrUpdateForm}
+            disabled={createOrUpdateFormMutation.isPending || !formData}
+            variant="default"
+          >
+            {createOrUpdateFormMutation.isPending
+              ? "Saving..."
+              : "Create Or Update Form"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {createOrUpdateFormMutation.isError && (
+          <p className="text-red-500">
+            Create/Update Error: {createOrUpdateFormMutation.error?.message}
+          </p>
+        )}
+        {createOrUpdateFormMutation.isSuccess && createResult && (
+          <p className="text-green-500">✓ Form created/updated successfully</p>
+        )}
+
+        {/* Create Result Preview */}
+        {createResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Form Result:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(createResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Mark Task Done Test Component
+function MarkTaskDoneTestSection() {
+  const [taskId, setTaskId] = useState<string>("");
+  const [taskData, setTaskData] = useState<string>("");
+  const [markResult, setMarkResult] = useState<any>(null);
+
+  // Mark Task Done Hook
+  const markTaskDoneMutation = useMarkTaskDone();
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setTaskId(DEFAULT_TASK_ID);
+    const exampleTaskData = {
+      notes: "Task completed successfully",
+      completedAt: new Date().toISOString(),
+    };
+    setTaskData(JSON.stringify(exampleTaskData, null, 2));
+    toast.info(
+      'Example task ID and data loaded. Click "Mark Task Done" to complete.'
+    );
+  };
+
+  // Handle Mark Task Done
+  const handleMarkTaskDone = async () => {
+    if (!taskId) {
+      toast.error("Please enter a task ID");
+      return;
+    }
+    if (!taskData) {
+      toast.error("Please enter task completion data (JSON)");
+      return;
+    }
+    try {
+      let parsedData;
+      try {
+        parsedData = JSON.parse(taskData);
+      } catch (e) {
+        toast.error("Invalid JSON format");
+        return;
+      }
+
+      const result = await markTaskDoneMutation.mutateAsync({
+        taskId,
+        data: parsedData,
+      });
+      console.log("Task marked as done:", result);
+      setMarkResult(result);
+      toast.success(
+        "Task marked as done successfully! Check console for data."
+      );
+    } catch (error: any) {
+      console.error("Mark task done error:", error);
+      toast.error(`Mark task done failed: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Mark Task Done Test</CardTitle>
+        <CardDescription>Mark a task as completed</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="taskId">Task ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="taskId"
+              value={taskId}
+              onChange={(e) => setTaskId(e.target.value)}
+              placeholder="Enter task ID"
+            />
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <button
+              type="button"
+              onClick={handleLoadExample}
+              className="underline text-blue-600 hover:text-blue-800"
+            >
+              {DEFAULT_TASK_ID}
+            </button>
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="taskData">Task Completion Data (JSON)</Label>
+          <textarea
+            id="taskData"
+            value={taskData}
+            onChange={(e) => setTaskData(e.target.value)}
+            placeholder="Enter task completion data as JSON"
+            className="w-full min-h-[150px] p-2 border rounded-md font-mono text-xs"
+          />
+          <p className="text-xs text-muted-foreground">
+            Example: Click "Load Example" button above to load sample data
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleMarkTaskDone}
+            disabled={markTaskDoneMutation.isPending || !taskId || !taskData}
+            variant="default"
+          >
+            {markTaskDoneMutation.isPending ? "Marking..." : "Mark Task Done"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {markTaskDoneMutation.isError && (
+          <p className="text-red-500">
+            Mark Error: {markTaskDoneMutation.error?.message}
+          </p>
+        )}
+        {markTaskDoneMutation.isSuccess && markResult && (
+          <p className="text-green-500">✓ Task marked as done successfully</p>
+        )}
+
+        {/* Mark Result Preview */}
+        {markResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Task Result:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(markResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Reassign Task Test Component
+function ReassignTaskTestSection() {
+  const [taskId, setTaskId] = useState<string>("");
+  const [newAssignee, setNewAssignee] = useState<string>("");
+  const [assigneeType, setAssigneeType] = useState<"USER" | "TEAM">("USER");
+  const [reassignResult, setReassignResult] = useState<any>(null);
+
+  // Reassign Task Hook
+  const reassignTaskMutation = useReassignTask();
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setTaskId(DEFAULT_TASK_ID);
+    setNewAssignee(DEFAULT_NEW_ASSIGNEE);
+    setAssigneeType("USER");
+    toast.info(
+      'Example task ID and assignee loaded. Click "Reassign Task" to reassign.'
+    );
+  };
+
+  // Handle Reassign Task
+  const handleReassignTask = async () => {
+    if (!taskId) {
+      toast.error("Please enter a task ID");
+      return;
+    }
+    if (!newAssignee) {
+      toast.error("Please enter a new assignee");
+      return;
+    }
+    try {
+      const result = await reassignTaskMutation.mutateAsync({
+        taskId,
+        newAssignee,
+        assigneeType,
+      });
+      console.log("Task reassigned:", result);
+      setReassignResult(result);
+      toast.success("Task reassigned successfully! Check console for data.");
+    } catch (error: any) {
+      console.error("Reassign task error:", error);
+      toast.error(`Reassign task failed: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Reassign Task Test</CardTitle>
+        <CardDescription>Reassign a task to a new assignee</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="taskId">Task ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="taskId"
+              value={taskId}
+              onChange={(e) => setTaskId(e.target.value)}
+              placeholder="Enter task ID"
+            />
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <button
+              type="button"
+              onClick={handleLoadExample}
+              className="underline text-blue-600 hover:text-blue-800"
+            >
+              {DEFAULT_TASK_ID}
+            </button>
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="newAssignee">New Assignee</Label>
+          <Input
+            id="newAssignee"
+            value={newAssignee}
+            onChange={(e) => setNewAssignee(e.target.value)}
+            placeholder="Enter new assignee ID"
+          />
+          <p className="text-xs text-muted-foreground">
+            Example: {DEFAULT_NEW_ASSIGNEE}
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="assigneeType">Assignee Type</Label>
+          <select
+            id="assigneeType"
+            value={assigneeType}
+            onChange={(e) => setAssigneeType(e.target.value as "USER" | "TEAM")}
+            className="w-full p-2 border rounded-md"
+          >
+            <option value="USER">USER</option>
+            <option value="TEAM">TEAM</option>
+          </select>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleReassignTask}
+            disabled={reassignTaskMutation.isPending || !taskId || !newAssignee}
+            variant="default"
+          >
+            {reassignTaskMutation.isPending
+              ? "Reassigning..."
+              : "Reassign Task"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {reassignTaskMutation.isError && (
+          <p className="text-red-500">
+            Reassign Error: {reassignTaskMutation.error?.message}
+          </p>
+        )}
+        {reassignTaskMutation.isSuccess && reassignResult && (
+          <p className="text-green-500">✓ Task reassigned successfully</p>
+        )}
+
+        {/* Reassign Result Preview */}
+        {reassignResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Task Result:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(reassignResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Form Data Test Component
+function FormDataTestSection() {
+  const [formId, setFormId] = useState<string>("");
+
+  // Get Form Data Hook - disabled by default
+  const formDataQuery = useGetFormData(formId || null);
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setFormId(DEFAULT_FORM_ID);
+    toast.info('Example form ID loaded. Click "Get Form Data" to fetch.');
+  };
+
+  // Handle Get Form Data
+  const handleGetFormData = async () => {
+    if (!formId) {
+      toast.error("Please enter a form ID");
+      return;
+    }
+    try {
+      const result = await formDataQuery.refetch();
+      if (result.data) {
+        console.log("Form data:", result.data);
+        toast.success("Form data loaded! Check console for data.");
+      }
+    } catch (error: any) {
+      toast.error(`Error: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Form Data Operations Test</CardTitle>
+        <CardDescription>Get form data by form ID</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="formId">Form ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="formId"
+              value={formId}
+              onChange={(e) => setFormId(e.target.value)}
+              placeholder="Enter form ID"
+            />
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <button
+              type="button"
+              onClick={handleLoadExample}
+              className="underline text-blue-600 hover:text-blue-800"
+            >
+              {DEFAULT_FORM_ID || "Enter form ID"}
+            </button>
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleGetFormData}
+            disabled={formDataQuery.isLoading || !formId}
+            variant="default"
+          >
+            {formDataQuery.isLoading ? "Loading..." : "Get Form Data"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {formDataQuery.isError && (
+          <p className="text-red-500">
+            Get Error: {formDataQuery.error?.message}
+          </p>
+        )}
+        {formDataQuery.isSuccess && formDataQuery.data && (
+          <p className="text-green-500">✓ Form data loaded successfully</p>
+        )}
+
+        {/* Form Data Preview */}
+        {formDataQuery.data && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Form Data:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(formDataQuery.data, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Main API Test Page Component
+export default function ApiTestPage() {
+  return (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 72)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-6 p-6">
+            {/* Page Header */}
+            <div className="flex items-center justify-between">
+              <div>
+                <h1 className="text-3xl font-bold tracking-tight">
+                  API Test Page
+                </h1>
+                <p className="text-muted-foreground">
+                  Test various API endpoints and hooks. All calls are
+                  user-initiated.
+                </p>
+              </div>
+            </div>
+
+            {/* Workbook Test Section */}
+            <WorkbookTestSection />
+
+            {/* Task Test Section */}
+            <TaskTestSection />
+
+            {/* Run Recon Test Section */}
+            <RunReconTestSection />
+
+            {/* File Upload/Download Test Section */}
+            <FileUploadTestSection />
+
+            {/* Form Schema Test Section */}
+            <FormSchemaTestSection />
+
+            {/* Form Data Test Section */}
+            <FormDataTestSection />
+
+            {/* Get Audit Logs Test Section */}
+            <GetAuditLogsTestSection />
+
+            {/* Create Audit Log Test Section */}
+            <CreateAuditLogTestSection />
+
+            {/* Get All Templated Pipelines Test Section */}
+            <GetAllTemplatedPipelinesTestSection />
+
+            {/* Get All Recon Test Section */}
+            <GetAllReconTestSection />
+
+            {/* Get Form By ID Test Section */}
+            <GetFormByIdTestSection />
+
+            {/* Create Or Update Form Test Section */}
+            <CreateOrUpdateFormTestSection />
+
+            {/* Mark Task Done Test Section */}
+            <MarkTaskDoneTestSection />
+
+            {/* Reassign Task Test Section */}
+            <ReassignTaskTestSection />
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}