create-bluecopa-react-app 1.0.21 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bluecopa-react-app",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "CLI tool to create bluecopa React applications",
   "type": "module",
   "main": "./bin/create-bluecopa-react-app.js",

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

@@ -23,6 +23,14 @@ import {
   useFileDownload,
   useGetFormSchema,
   useGetFormData,
+  useGetAuditLogs,
+  useCreateAuditLog,
+  useGetAllTemplatedPipelines,
+  useGetAllRecon,
+  useGetFormById,
+  useCreateOrUpdateForm,
+  useMarkTaskDone,
+  useReassignTask,
 } from "@bluecopa/react";
 
 // Default values for examples
@@ -31,7 +39,7 @@ 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_FORM_ID = "0V5W3KVAWdRnVOZczmSN";
 const DEFAULT_FILE_UPLOAD_PAYLOAD = {
   id: "0URYQ4DIHB1mVzPA87ZW",
   name: "octobereighteennnqq",
@@ -49,6 +57,26 @@ const DEFAULT_FILE_UPLOAD_PAYLOAD = {
   ],
 };
 
+// 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>("");
@@ -352,7 +380,9 @@ function WorkbookTestSection() {
               disabled={saveWorkbookMutation.isPending || !saveWorkbookData}
               variant="default"
             >
-              {saveWorkbookMutation.isPending ? "Saving..." : "2. Save Workbook"}
+              {saveWorkbookMutation.isPending
+                ? "Saving..."
+                : "2. Save Workbook"}
             </Button>
 
             {/* Status Messages for Save Workbook */}
@@ -852,7 +882,9 @@ function FormSchemaTestSection() {
     <Card className="mb-6">
       <CardHeader>
         <CardTitle>Form Schema Operations Test</CardTitle>
-        <CardDescription>Get form schema by form instance ID and revision</CardDescription>
+        <CardDescription>
+          Get form schema by form instance ID and revision
+        </CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="space-y-2">
@@ -889,14 +921,19 @@ function FormSchemaTestSection() {
             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>
+            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}
+            disabled={
+              formSchemaQuery.isLoading || !formInstanceId || !formRevision
+            }
             variant="default"
           >
             {formSchemaQuery.isLoading ? "Loading..." : "Get Form Schema"}
@@ -910,9 +947,7 @@ function FormSchemaTestSection() {
           </p>
         )}
         {formSchemaQuery.isSuccess && formSchemaQuery.data && (
-          <p className="text-green-500">
-            ✓ Form schema loaded successfully
-          </p>
+          <p className="text-green-500">✓ Form schema loaded successfully</p>
         )}
 
         {/* Form Schema Data Preview */}
@@ -929,32 +964,388 @@ function FormSchemaTestSection() {
   );
 }
 
-// Form Data Test Component
-function FormDataTestSection() {
-  const [formId, setFormId] = useState<string>("");
+// Get Audit Logs Test Component
+function GetAuditLogsTestSection() {
+  const [auditLogRequest, setAuditLogRequest] = useState<string>("");
+  const [auditLogsResult, setAuditLogsResult] = useState<any>(null);
 
-  // Get Form Data Hook - disabled by default
-  const formDataQuery = useGetFormData(formId || null);
+  // Get Audit Logs Hook
+  const getAuditLogsMutation = useGetAuditLogs();
 
   // Handle Load Example
   const handleLoadExample = () => {
-    setFormId(DEFAULT_FORM_ID);
+    setAuditLogRequest(JSON.stringify(DEFAULT_AUDIT_LOG_REQUEST, null, 2));
     toast.info(
-      'Example form ID loaded. Click "Get Form Data" to fetch.'
+      'Example audit log request loaded. Click "Get Audit Logs" to fetch.'
     );
   };
 
-  // Handle Get Form Data
-  const handleGetFormData = async () => {
+  // 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 formDataQuery.refetch();
+      const result = await formQuery.refetch();
       if (result.data) {
-        console.log("Form data:", result.data);
-        toast.success("Form data loaded! Check console for 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}`);
@@ -964,8 +1355,8 @@ function FormDataTestSection() {
   return (
     <Card className="mb-6">
       <CardHeader>
-        <CardTitle>Form Data Operations Test</CardTitle>
-        <CardDescription>Get form data by form ID</CardDescription>
+        <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">
@@ -995,32 +1386,30 @@ function FormDataTestSection() {
 
         <div className="flex gap-4">
           <Button
-            onClick={handleGetFormData}
-            disabled={formDataQuery.isLoading || !formId}
+            onClick={handleGetFormById}
+            disabled={formQuery.isLoading || !formId}
             variant="default"
           >
-            {formDataQuery.isLoading ? "Loading..." : "Get Form Data"}
+            {formQuery.isLoading ? "Loading..." : "Get Form By ID"}
           </Button>
         </div>
 
         {/* Status Messages */}
-        {formDataQuery.isError && (
-          <p className="text-red-500">
-            Get Error: {formDataQuery.error?.message}
-          </p>
+        {formQuery.isError && (
+          <p className="text-red-500">Get Error: {formQuery.error?.message}</p>
         )}
-        {formDataQuery.isSuccess && formDataQuery.data && (
+        {formQuery.isSuccess && formResult && (
           <p className="text-green-500">
-            ✓ Form data loaded successfully
+            ✓ Form loaded successfully (ID: {formResult.id || formId})
           </p>
         )}
 
-        {/* Form Data Preview */}
-        {formDataQuery.data && (
+        {/* Form Result Preview */}
+        {formResult && (
           <div className="mt-4 p-4 bg-muted rounded-lg">
-            <p className="text-sm font-semibold mb-2">Form Data:</p>
+            <p className="text-sm font-semibold mb-2">Form Result:</p>
             <pre className="text-xs overflow-auto max-h-60">
-              {JSON.stringify(formDataQuery.data, null, 2)}
+              {JSON.stringify(formResult, null, 2)}
             </pre>
           </div>
         )}
@@ -1029,11 +1418,478 @@ function FormDataTestSection() {
   );
 }
 
-// Main API Test Page Component
-export default function ApiTestPage() {
-  return (
-    <SidebarProvider
-      style={
+// Create Or Update Form Test Component
+function CreateOrUpdateFormTestSection() {
+  const [formData, setFormData] = useState<string>("");
+  const [createResult, setCreateResult] = useState<any>(null);
+
+  // Create Or Update Form Hook
+  const createOrUpdateFormMutation = useCreateOrUpdateForm();
+
+  // Handle Create Or Update Form
+  const handleCreateOrUpdateForm = async () => {
+    if (!formData) {
+      toast.error("Please enter form data (JSON)");
+      return;
+    }
+    try {
+      let parsedForm;
+      try {
+        parsedForm = JSON.parse(formData);
+      } catch (e) {
+        toast.error("Invalid JSON format");
+        return;
+      }
+
+      const result = await createOrUpdateFormMutation.mutateAsync({
+        data: parsedForm,
+      });
+      console.log("Form created/updated:", result);
+      setCreateResult(result);
+      toast.success(
+        "Form created/updated successfully! Check console for data."
+      );
+    } catch (error: any) {
+      console.error("Create/Update form error:", error);
+      toast.error(`Create/Update form failed: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Create Or Update Form Test</CardTitle>
+        <CardDescription>Create or update a form</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="formData">Form Data (JSON)</Label>
+          <div className="flex gap-2 mb-2">
+          </div>
+          <textarea
+            id="formData"
+            value={formData}
+            onChange={(e) => setFormData(e.target.value)}
+            placeholder="Enter form data as JSON"
+            className="w-full min-h-[200px] p-2 border rounded-md font-mono text-xs"
+          />
+          <p className="text-xs text-muted-foreground">
+            Example: Click "Load Example" button above to load sample form data
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleCreateOrUpdateForm}
+            disabled={createOrUpdateFormMutation.isPending || !formData}
+            variant="default"
+          >
+            {createOrUpdateFormMutation.isPending
+              ? "Saving..."
+              : "Create Or Update Form"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {createOrUpdateFormMutation.isError && (
+          <p className="text-red-500">
+            Create/Update Error: {createOrUpdateFormMutation.error?.message}
+          </p>
+        )}
+        {createOrUpdateFormMutation.isSuccess && createResult && (
+          <p className="text-green-500">✓ Form created/updated successfully</p>
+        )}
+
+        {/* Create Result Preview */}
+        {createResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Form Result:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(createResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Mark Task Done Test Component
+function MarkTaskDoneTestSection() {
+  const [taskId, setTaskId] = useState<string>("");
+  const [taskData, setTaskData] = useState<string>("");
+  const [markResult, setMarkResult] = useState<any>(null);
+
+  // Mark Task Done Hook
+  const markTaskDoneMutation = useMarkTaskDone();
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setTaskId(DEFAULT_TASK_ID);
+    const exampleTaskData = {
+      notes: "Task completed successfully",
+      completedAt: new Date().toISOString(),
+    };
+    setTaskData(JSON.stringify(exampleTaskData, null, 2));
+    toast.info(
+      'Example task ID and data loaded. Click "Mark Task Done" to complete.'
+    );
+  };
+
+  // Handle Mark Task Done
+  const handleMarkTaskDone = async () => {
+    if (!taskId) {
+      toast.error("Please enter a task ID");
+      return;
+    }
+    if (!taskData) {
+      toast.error("Please enter task completion data (JSON)");
+      return;
+    }
+    try {
+      let parsedData;
+      try {
+        parsedData = JSON.parse(taskData);
+      } catch (e) {
+        toast.error("Invalid JSON format");
+        return;
+      }
+
+      const result = await markTaskDoneMutation.mutateAsync({
+        taskId,
+        data: parsedData,
+      });
+      console.log("Task marked as done:", result);
+      setMarkResult(result);
+      toast.success(
+        "Task marked as done successfully! Check console for data."
+      );
+    } catch (error: any) {
+      console.error("Mark task done error:", error);
+      toast.error(`Mark task done failed: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Mark Task Done Test</CardTitle>
+        <CardDescription>Mark a task as completed</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="taskId">Task ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="taskId"
+              value={taskId}
+              onChange={(e) => setTaskId(e.target.value)}
+              placeholder="Enter task ID"
+            />
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <button
+              type="button"
+              onClick={handleLoadExample}
+              className="underline text-blue-600 hover:text-blue-800"
+            >
+              {DEFAULT_TASK_ID}
+            </button>
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="taskData">Task Completion Data (JSON)</Label>
+          <textarea
+            id="taskData"
+            value={taskData}
+            onChange={(e) => setTaskData(e.target.value)}
+            placeholder="Enter task completion data as JSON"
+            className="w-full min-h-[150px] p-2 border rounded-md font-mono text-xs"
+          />
+          <p className="text-xs text-muted-foreground">
+            Example: Click "Load Example" button above to load sample data
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleMarkTaskDone}
+            disabled={markTaskDoneMutation.isPending || !taskId || !taskData}
+            variant="default"
+          >
+            {markTaskDoneMutation.isPending ? "Marking..." : "Mark Task Done"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {markTaskDoneMutation.isError && (
+          <p className="text-red-500">
+            Mark Error: {markTaskDoneMutation.error?.message}
+          </p>
+        )}
+        {markTaskDoneMutation.isSuccess && markResult && (
+          <p className="text-green-500">✓ Task marked as done successfully</p>
+        )}
+
+        {/* Mark Result Preview */}
+        {markResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Task Result:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(markResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Reassign Task Test Component
+function ReassignTaskTestSection() {
+  const [taskId, setTaskId] = useState<string>("");
+  const [newAssignee, setNewAssignee] = useState<string>("");
+  const [assigneeType, setAssigneeType] = useState<"USER" | "TEAM">("USER");
+  const [reassignResult, setReassignResult] = useState<any>(null);
+
+  // Reassign Task Hook
+  const reassignTaskMutation = useReassignTask();
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setTaskId(DEFAULT_TASK_ID);
+    setNewAssignee(DEFAULT_NEW_ASSIGNEE);
+    setAssigneeType("USER");
+    toast.info(
+      'Example task ID and assignee loaded. Click "Reassign Task" to reassign.'
+    );
+  };
+
+  // Handle Reassign Task
+  const handleReassignTask = async () => {
+    if (!taskId) {
+      toast.error("Please enter a task ID");
+      return;
+    }
+    if (!newAssignee) {
+      toast.error("Please enter a new assignee");
+      return;
+    }
+    try {
+      const result = await reassignTaskMutation.mutateAsync({
+        taskId,
+        newAssignee,
+        assigneeType,
+      });
+      console.log("Task reassigned:", result);
+      setReassignResult(result);
+      toast.success("Task reassigned successfully! Check console for data.");
+    } catch (error: any) {
+      console.error("Reassign task error:", error);
+      toast.error(`Reassign task failed: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Reassign Task Test</CardTitle>
+        <CardDescription>Reassign a task to a new assignee</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="taskId">Task ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="taskId"
+              value={taskId}
+              onChange={(e) => setTaskId(e.target.value)}
+              placeholder="Enter task ID"
+            />
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <button
+              type="button"
+              onClick={handleLoadExample}
+              className="underline text-blue-600 hover:text-blue-800"
+            >
+              {DEFAULT_TASK_ID}
+            </button>
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="newAssignee">New Assignee</Label>
+          <Input
+            id="newAssignee"
+            value={newAssignee}
+            onChange={(e) => setNewAssignee(e.target.value)}
+            placeholder="Enter new assignee ID"
+          />
+          <p className="text-xs text-muted-foreground">
+            Example: {DEFAULT_NEW_ASSIGNEE}
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="assigneeType">Assignee Type</Label>
+          <select
+            id="assigneeType"
+            value={assigneeType}
+            onChange={(e) => setAssigneeType(e.target.value as "USER" | "TEAM")}
+            className="w-full p-2 border rounded-md"
+          >
+            <option value="USER">USER</option>
+            <option value="TEAM">TEAM</option>
+          </select>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleReassignTask}
+            disabled={reassignTaskMutation.isPending || !taskId || !newAssignee}
+            variant="default"
+          >
+            {reassignTaskMutation.isPending
+              ? "Reassigning..."
+              : "Reassign Task"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {reassignTaskMutation.isError && (
+          <p className="text-red-500">
+            Reassign Error: {reassignTaskMutation.error?.message}
+          </p>
+        )}
+        {reassignTaskMutation.isSuccess && reassignResult && (
+          <p className="text-green-500">✓ Task reassigned successfully</p>
+        )}
+
+        {/* Reassign Result Preview */}
+        {reassignResult && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Task Result:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(reassignResult, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Form Data Test Component
+function FormDataTestSection() {
+  const [formId, setFormId] = useState<string>("");
+
+  // Get Form Data Hook - disabled by default
+  const formDataQuery = useGetFormData(formId || null);
+
+  // Handle Load Example
+  const handleLoadExample = () => {
+    setFormId(DEFAULT_FORM_ID);
+    toast.info('Example form ID loaded. Click "Get Form Data" to fetch.');
+  };
+
+  // Handle Get Form Data
+  const handleGetFormData = async () => {
+    if (!formId) {
+      toast.error("Please enter a form ID");
+      return;
+    }
+    try {
+      const result = await formDataQuery.refetch();
+      if (result.data) {
+        console.log("Form data:", result.data);
+        toast.success("Form data loaded! Check console for data.");
+      }
+    } catch (error: any) {
+      toast.error(`Error: ${error.message}`);
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Form Data Operations Test</CardTitle>
+        <CardDescription>Get form data by form ID</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="formId">Form ID</Label>
+          <div className="flex gap-2">
+            <Input
+              id="formId"
+              value={formId}
+              onChange={(e) => setFormId(e.target.value)}
+              placeholder="Enter form ID"
+            />
+            <Button onClick={handleLoadExample} variant="outline" type="button">
+              Load Example
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Example:{" "}
+            <button
+              type="button"
+              onClick={handleLoadExample}
+              className="underline text-blue-600 hover:text-blue-800"
+            >
+              {DEFAULT_FORM_ID || "Enter form ID"}
+            </button>
+          </p>
+        </div>
+
+        <div className="flex gap-4">
+          <Button
+            onClick={handleGetFormData}
+            disabled={formDataQuery.isLoading || !formId}
+            variant="default"
+          >
+            {formDataQuery.isLoading ? "Loading..." : "Get Form Data"}
+          </Button>
+        </div>
+
+        {/* Status Messages */}
+        {formDataQuery.isError && (
+          <p className="text-red-500">
+            Get Error: {formDataQuery.error?.message}
+          </p>
+        )}
+        {formDataQuery.isSuccess && formDataQuery.data && (
+          <p className="text-green-500">✓ Form data loaded successfully</p>
+        )}
+
+        {/* Form Data Preview */}
+        {formDataQuery.data && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <p className="text-sm font-semibold mb-2">Form Data:</p>
+            <pre className="text-xs overflow-auto max-h-60">
+              {JSON.stringify(formDataQuery.data, null, 2)}
+            </pre>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Main API Test Page Component
+export default function ApiTestPage() {
+  return (
+    <SidebarProvider
+      style={
         {
           "--sidebar-width": "calc(var(--spacing) * 72)",
           "--header-height": "calc(var(--spacing) * 12)",
@@ -1075,6 +1931,30 @@ export default function ApiTestPage() {
 
             {/* Form Data Test Section */}
             <FormDataTestSection />
+
+            {/* Get Audit Logs Test Section */}
+            <GetAuditLogsTestSection />
+
+            {/* Create Audit Log Test Section */}
+            <CreateAuditLogTestSection />
+
+            {/* Get All Templated Pipelines Test Section */}
+            <GetAllTemplatedPipelinesTestSection />
+
+            {/* Get All Recon Test Section */}
+            <GetAllReconTestSection />
+
+            {/* Get Form By ID Test Section */}
+            <GetFormByIdTestSection />
+
+            {/* Create Or Update Form Test Section */}
+            <CreateOrUpdateFormTestSection />
+
+            {/* Mark Task Done Test Section */}
+            <MarkTaskDoneTestSection />
+
+            {/* Reassign Task Test Section */}
+            <ReassignTaskTestSection />
           </div>
         </div>
       </SidebarInset>

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

@@ -33,8 +33,6 @@ import {
   useSubscribeUser,
   useUnsubscribeUser,
   useCheckSubscriptionStatus,
-  useGetAuditLogs,
-  useCreateAuditLog,
 } from "@bluecopa/react";
 import {
   MessageSquare,
@@ -54,239 +52,6 @@ const MOCK_USER = {
   email: "john@example.com",
 };
 
-// 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"
-  }
-];
-
-// 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>
-  );
-}
-
 // Component types for better organization
 interface ThreadFormProps {
   onThreadCreated: (threadId: string) => void;
@@ -686,10 +451,6 @@ export default function CommentsPage() {
         <SiteHeader />
         <div className="flex flex-1 flex-col">
           <div className="@container/main flex flex-1 flex-col gap-6 p-6">
-            {/* Audit Log Test Sections */}
-            <GetAuditLogsTestSection />
-            <CreateAuditLogTestSection />
-
             {/* Page Header */}
             <div className="flex items-center justify-between">
               <div>

package/templates/latest/package.json

@@ -10,7 +10,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@bluecopa/react": "^0.1.19",
+    "@bluecopa/react": "0.1.20",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",