create-bluecopa-react-app 1.0.20 → 1.0.21

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

@@ -0,0 +1,1083 @@
+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,
+} 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 = "";
+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}",
+      },
+    },
+  ],
+};
+
+// 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>
+  );
+}
+
+// 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 />
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}