create-bluecopa-react-app 1.0.41 → 1.0.42

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

@@ -1,2118 +0,0 @@
-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,
-  useGetAllUsers,
-  useGetAllHttpTriggers,
-} 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://stage-out_dev-local-363813_2/PROC_DEFINITION/MJ6WV5IW2FT808T2JWFK.json",
-          modelUrl:
-            "gs://stage-out_dev-local-363813_2/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: fileId || "",
-    contentType: "application/json",
-    method: "GET",
-  }, {
-    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,
-        path: "test/test.json",
-        contentType: "application/json",
-        method: "PUT",
-      });
-      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 || error.response?.data?.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,
-        processSheetId: "123",
-        formInstanceId: "123",
-        isDummy: false,
-        status: "DRAFTED",
-      });
-      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>
-  );
-}
-
-// Get All Users Test Component
-function GetAllUsersTestSection() {
-  const [usersResult, setUsersResult] = useState<any>(null);
-
-  // Get All Users Hook - disabled by default
-  const usersQuery = useGetAllUsers({
-    enabled: false,
-  });
-
-  // Handle Get All Users
-  const handleGetAllUsers = async () => {
-    try {
-      const result = await usersQuery.refetch();
-      if (result.data) {
-        setUsersResult(result.data);
-        console.log("Users:", result.data);
-        toast.success("Users loaded! Check console for data.");
-      }
-    } catch (error: any) {
-      toast.error(`Error: ${error.message}`);
-    }
-  };
-
-  return (
-    <Card className="mb-6">
-      <CardHeader>
-        <CardTitle>Get All Users Test</CardTitle>
-        <CardDescription>Get all users in the current workspace</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex gap-4">
-          <Button
-            onClick={handleGetAllUsers}
-            disabled={usersQuery.isLoading}
-            variant="default"
-          >
-            {usersQuery.isLoading ? "Loading..." : "Get All Users"}
-          </Button>
-        </div>
-
-        {/* Status Messages */}
-        {usersQuery.isError && (
-          <p className="text-red-500">Get Error: {usersQuery.error?.message}</p>
-        )}
-        {usersQuery.isSuccess && usersResult && (
-          <p className="text-green-500">
-            ✓ Users loaded successfully (Count: {usersResult.length || 0})
-          </p>
-        )}
-
-        {/* Users Result Preview */}
-        {usersResult && (
-          <div className="mt-4 p-4 bg-muted rounded-lg">
-            <p className="text-sm font-semibold mb-2">Users Result:</p>
-            <pre className="text-xs overflow-auto max-h-60">
-              {JSON.stringify(usersResult, null, 2)}
-            </pre>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-// Get All HTTP Triggers Test Component
-function GetAllHttpTriggersTestSection() {
-  const [triggersResult, setTriggersResult] = useState<any>(null);
-
-  // Get All HTTP Triggers Hook - disabled by default
-  const triggersQuery = useGetAllHttpTriggers({
-    enabled: false,
-  });
-
-  // Handle Get All HTTP Triggers
-  const handleGetAllHttpTriggers = async () => {
-    try {
-      const result = await triggersQuery.refetch();
-      if (result.data) {
-        setTriggersResult(result.data);
-        console.log("HTTP Triggers:", result.data);
-        toast.success("HTTP Triggers loaded! Check console for data.");
-      }
-    } catch (error: any) {
-      toast.error(`Error: ${error.message}`);
-    }
-  };
-
-  return (
-    <Card className="mb-6">
-      <CardHeader>
-        <CardTitle>Get All HTTP Triggers Test</CardTitle>
-        <CardDescription>
-          Get all HTTP triggers (webhooks) in the current workspace
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex gap-4">
-          <Button
-            onClick={handleGetAllHttpTriggers}
-            disabled={triggersQuery.isLoading}
-            variant="default"
-          >
-            {triggersQuery.isLoading
-              ? "Loading..."
-              : "Get All HTTP Triggers"}
-          </Button>
-        </div>
-
-        {/* Status Messages */}
-        {triggersQuery.isError && (
-          <p className="text-red-500">
-            Get Error: {triggersQuery.error?.message}
-          </p>
-        )}
-        {triggersQuery.isSuccess && triggersResult && (
-          <p className="text-green-500">
-            ✓ HTTP Triggers loaded successfully (Count:{" "}
-            {triggersResult.length || 0})
-          </p>
-        )}
-
-        {/* HTTP Triggers Result Preview */}
-        {triggersResult && (
-          <div className="mt-4 p-4 bg-muted rounded-lg">
-            <p className="text-sm font-semibold mb-2">
-              HTTP Triggers Result:
-            </p>
-            <pre className="text-xs overflow-auto max-h-60">
-              {JSON.stringify(triggersResult, 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 />
-
-            {/* Get All Users Test Section */}
-            <GetAllUsersTestSection />
-
-            {/* Get All HTTP Triggers Test Section */}
-            <GetAllHttpTriggersTestSection />
-          </div>
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
-  );
-}