From de1cc4ccf77a19b7d9355cd18da27623d5d876b3 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Thu, 17 Apr 2025 20:14:40 +0200
Subject: [PATCH 01/24] feat(dashboard): added empty dashboard form

---
 src/forms/dashboard/form.jsx       | 43 ++++++++++++++++++++++--------
 src/forms/dashboard/schemas.js     |  2 +-
 src/pages/app/Dashboards.jsx       |  7 ++---
 src/services/grafana/dashboards.js | 11 +++++++-
 4 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/forms/dashboard/form.jsx b/src/forms/dashboard/form.jsx
index b895a392..cfc7f633 100644
--- a/src/forms/dashboard/form.jsx
+++ b/src/forms/dashboard/form.jsx
@@ -1,5 +1,6 @@
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect, useState } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -29,20 +30,40 @@ import { CalendarIcon } from 'lucide-react';
 import { format } from 'date-fns';
 import { cn } from '@/lib/utils';
 import { dashboardFormSchema } from './schemas';
+import { foldersService } from '@/services/grafana/folders';
 
-// Mock folder data
-const mockFolders = [
-  { id: '1', name: 'Default' },
-  { id: '2', name: 'Folder 1' },
-  { id: '3', name: 'Folder 2' },
-];
+// Default folder option
+const defaultFolder = { uid: null, title: 'Default' };
 
 export function DashboardForm({ onClose, onSubmit }) {
+  const [folders, setFolders] = useState([defaultFolder]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchFolders = async () => {
+      try {
+        const response = await foldersService.getAll();
+        const fetchedFolders = response.data || response;
+        // Add the default folder and combine with fetched folders
+        setFolders([
+          defaultFolder,
+          ...fetchedFolders.map(folder => ({ uid: folder.uid, title: folder.title }))
+        ]);
+      } catch (error) {
+        console.error('Error loading folders:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchFolders();
+  }, []);
+
   const form = useForm({
     resolver: zodResolver(dashboardFormSchema),
     defaultValues: {
       name: '',
-      folderId: '1',
+      folderId: null,
       startDate: new Date(),
       endDate: undefined,
     },
@@ -79,16 +100,16 @@ export function DashboardForm({ onClose, onSubmit }) {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Folder</FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <Select onValueChange={field.onChange} defaultValue={field.value} disabled={loading}>
                     <FormControl>
                       <SelectTrigger>
                         <SelectValue placeholder="Select folder" />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {mockFolders.map((f) => (
-                        <SelectItem key={f.id} value={f.id}>
-                          {f.name}
+                      {folders.map((folder) => (
+                        <SelectItem key={folder.uid} value={folder.uid}>
+                          {folder.title}
                         </SelectItem>
                       ))}
                     </SelectContent>
diff --git a/src/forms/dashboard/schemas.js b/src/forms/dashboard/schemas.js
index 8d28adc1..9c742e09 100644
--- a/src/forms/dashboard/schemas.js
+++ b/src/forms/dashboard/schemas.js
@@ -2,7 +2,7 @@ import * as z from 'zod';
 
 export const dashboardFormSchema = z.object({
   name: z.string().min(1, 'Dashboard name is required').max(100, 'Dashboard name must be 100 characters or less'),
-  folderId: z.string().min(1, 'Folder is required'),
+  folderId: z.string().nullable(),
   startDate: z.date({
     required_error: 'Start date is required',
     invalid_type_error: "That's not a valid date!",
diff --git a/src/pages/app/Dashboards.jsx b/src/pages/app/Dashboards.jsx
index 1947dd89..68dc5e8e 100644
--- a/src/pages/app/Dashboards.jsx
+++ b/src/pages/app/Dashboards.jsx
@@ -65,9 +65,10 @@ export function Dashboards() {
   };
 
   const handleDashboardFormSubmit = async (data) => {
+    console.log('DashboardForm data:', data);
     try {
       setLoading(true);
-      await dashboardsService.create(data);
+      await dashboardsService.createTemplate(data);
       
       // Recargar datos para mostrar el nuevo dashboard
       const searchResponse = await searchService.search({});
@@ -179,7 +180,7 @@ export function Dashboards() {
             disabled={loading || selectedItemsCount === 0}
             userRole={userData.authority}
           >
-            <Trash className="mr-2 h-4 w-4" /> Delete
+            <Trash className="h-4 w-4" />
           </Button>
           <Button 
             variant="outline" 
@@ -187,7 +188,7 @@ export function Dashboards() {
             disabled={loading}
             userRole={userData.authority}
           >
-            <FolderPlus className="mr-2 h-4 w-4" /> Add Folder
+            <FolderPlus className="h-4 w-4" />
           </Button>
           <Button 
             className="border-2 border-sidebar-accent bg-sidebar-accent text-white hover:bg-secondary hover:text-sidebar-accent" 
diff --git a/src/services/grafana/dashboards.js b/src/services/grafana/dashboards.js
index 22fe3d4d..6601010e 100644
--- a/src/services/grafana/dashboards.js
+++ b/src/services/grafana/dashboards.js
@@ -97,7 +97,16 @@ export const dashboardsService = {
    */
   getPanelQuery: (uid, id) => {
     return apiClient.get(`/grafana/dashboard/${uid}/panel/${id}/query`);
-  }
+  },
+
+  /**
+   * Creates a new template for a dashboard
+   * @param {object} data - Template data
+   * @returns {Promise} - Promise with the created template
+   */
+  createTemplate: (data) => {
+    return apiClient.post('/grafana/dashboard/template', data);
+  },
 };
 
 export default dashboardsService;

From df2b62c8471e87c2142bf22f54b815f3c18a2dd5 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Tue, 25 Mar 2025 11:34:37 +0100
Subject: [PATCH 02/24] feat: added draft catalog step

---
 .../catalog/CatalogControlsStep.jsx           | 475 ++++++++----------
 src/components/catalog/CatalogInfoStep.jsx    |  13 +-
 src/forms/control/new/form.jsx                |  41 +-
 src/forms/control/new/schemas.js              |   5 +-
 src/pages/app/catalog/CatalogWizard.jsx       |  12 +-
 src/services/catalogs.js                      |  26 +
 src/services/controls.js                      |  35 ++
 src/styles/index.css                          |   3 +-
 8 files changed, 309 insertions(+), 301 deletions(-)

diff --git a/src/components/catalog/CatalogControlsStep.jsx b/src/components/catalog/CatalogControlsStep.jsx
index bf21b94a..3f11e374 100644
--- a/src/components/catalog/CatalogControlsStep.jsx
+++ b/src/components/catalog/CatalogControlsStep.jsx
@@ -1,26 +1,17 @@
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Loader2, ArrowRight, Plus, Trash, Edit, AlertCircle } from 'lucide-react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
 import { 
   Card, 
   CardContent, 
   CardHeader, 
   CardTitle
 } from '@/components/ui/card';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { NewControlForm } from '@/forms/control/new/form';
+import { getDraftControlsByCatalogId, deleteControl, createDraftControl } from '@/services/controls';
+import { createScopeSet } from '@/services/scopes';
+import { toast } from 'sonner';
 import {
   Dialog,
   DialogContent,
@@ -28,60 +19,26 @@ import {
   DialogTitle,
   DialogFooter,
 } from '@/components/ui/dialog';
-import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/badge';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-
-// Schema for control validation
-const controlSchema = z.object({
-  name: z.string().min(1, { message: 'Control name is required' }),
-  description: z.string().min(1, { message: 'Description is required' }),
-  type: z.string().min(1, { message: 'Control type is required' }),
-  severity: z.string().min(1, { message: 'Severity is required' }),
-  implementation: z.string().optional(),
-});
-
-// Control types and severity options
-const controlTypes = [
-  { value: 'preventive', label: 'Preventive' },
-  { value: 'detective', label: 'Detective' },
-  { value: 'corrective', label: 'Corrective' },
-  { value: 'deterrent', label: 'Deterrent' },
-  { value: 'recovery', label: 'Recovery' },
-];
-
-const severityLevels = [
-  { value: 'critical', label: 'Critical', color: 'bg-red-500' },
-  { value: 'high', label: 'High', color: 'bg-orange-500' },
-  { value: 'medium', label: 'Medium', color: 'bg-yellow-500' },
-  { value: 'low', label: 'Low', color: 'bg-green-500' },
-  { value: 'informational', label: 'Informational', color: 'bg-blue-500' },
-];
 
 export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit, isSubmitting, apiError = null }) {
   const [controls, setControls] = useState([]);
-  const [isEditing, setIsEditing] = useState(false);
-  const [currentControl, setCurrentControl] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
   const [openDialog, setOpenDialog] = useState(false);
+  const [openNewControlForm, setOpenNewControlForm] = useState(false);
   const [submitError, setSubmitError] = useState(null);
+  const [currentControl, setCurrentControl] = useState(null);
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
 
-  // Setup form with zod resolver
-  const form = useForm({
-    resolver: zodResolver(controlSchema),
-    defaultValues: {
-      name: '',
-      description: '',
-      type: '',
-      severity: '',
-      implementation: '',
-    },
-  });
-
+  // Load draft controls when component mounts or catalogId changes
   useEffect(() => {
-    if (initialControls && initialControls.length > 0) {
-      setControls([...initialControls]);
+    if (catalogId) {
+      fetchDraftControls();
+    } else if (initialControls.length > 0) {
+      // If no catalogId but initialControls exist, use them
+      setControls(initialControls);
     }
-  }, [initialControls]);
+  }, [catalogId, initialControls]);
 
   // Update error message when API error changes
   useEffect(() => {
@@ -90,62 +47,108 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
     }
   }, [apiError]);
 
+  const fetchDraftControls = async () => {
+    if (!catalogId) return;
+    
+    setIsLoading(true);
+    try {
+      const response = await getDraftControlsByCatalogId(catalogId);
+      setControls(response || []);
+    } catch (error) {
+      console.error('Error fetching draft controls:', error);
+      toast.error('Failed to load draft controls');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const handleAddControl = () => {
-    setIsEditing(false);
-    setCurrentControl(null);
-    form.reset({
-      name: '',
-      description: '',
-      type: '',
-      severity: '',
-      implementation: '',
-    });
-    setOpenDialog(true);
+    setOpenNewControlForm(true);
   };
 
-  const handleEditControl = (control, index) => {
-    setIsEditing(true);
-    setCurrentControl({ ...control, index });
-    form.reset({
-      name: control.name,
-      description: control.description,
-      type: control.type,
-      severity: control.severity,
-      implementation: control.implementation || '',
-    });
-    setOpenDialog(true);
+  const handleCloseNewControlForm = () => {
+    setOpenNewControlForm(false);
   };
 
-  const handleDeleteControl = (index) => {
-    const updatedControls = [...controls];
-    updatedControls.splice(index, 1);
-    setControls(updatedControls);
+  const handleCustomSubmit = async (data) => {
+    try {
+      // Use createDraftControl specifically in the catalog context
+      const createdControl = await createDraftControl(data);
+      
+      // Create the scope set if needed
+      if (Object.keys(data.scopes).length > 0) {
+        const scopeSetData = {
+          controlId: createdControl.id,
+          scopes: data.scopes
+        };
+        
+        await createScopeSet(scopeSetData);
+      }
+      
+      return createdControl;
+    } catch (error) {
+      console.error('Error creating draft control:', error);
+      throw error;
+    }
   };
 
-  const handleControlSubmit = (data) => {
-    if (isEditing && currentControl) {
-      // Update existing control
-      const updatedControls = [...controls];
-      updatedControls[currentControl.index] = { 
-        id: currentControl.id || `temp-${Date.now()}`,
-        ...data 
-      };
-      setControls(updatedControls);
-    } else {
-      // Add new control
-      setControls([
-        ...controls, 
-        { 
-          id: `temp-${Date.now()}`,
-          ...data 
+  const handleControlSuccess = async (newControl) => {
+    setOpenNewControlForm(false);
+    
+    if (newControl && newControl.id) {
+      try {
+        // Fetch the updated list of controls
+        if (catalogId) {
+          const response = await getDraftControlsByCatalogId(catalogId);
+          setControls(response || []);
+        } else {
+          // If no catalogId, manually add the new control to the current list
+          setControls(prevControls => [...prevControls, newControl]);
         }
-      ]);
+        toast.success(`Draft control "${newControl.name}" added successfully`);
+      } catch (error) {
+        console.error('Error updating controls list:', error);
+        toast.error('Control was created but the list could not be updated');
+        
+        // As a fallback, manually add the control to the list
+        setControls(prevControls => [...prevControls, newControl]);
+      }
     }
-    setOpenDialog(false);
   };
 
-  const closeDialog = () => {
+  const handleEditControl = (control) => {
+    // Placeholder for edit functionality
+    toast.info('Edit functionality will be available in a future update');
+  };
+
+  const handleDeleteConfirm = (control) => {
+    setCurrentControl(control);
+    setConfirmingDelete(true);
+    setOpenDialog(true);
+  };
+
+  const handleDeleteCancel = () => {
     setOpenDialog(false);
+    setConfirmingDelete(false);
+    setCurrentControl(null);
+  };
+
+  const handleDeleteControl = async () => {
+    if (!currentControl || !currentControl.id) return;
+    
+    try {
+      await deleteControl(currentControl.id);
+      // After deletion, refresh the draft controls list
+      await fetchDraftControls();
+      toast.success('Draft control deleted successfully');
+    } catch (error) {
+      console.error('Error deleting draft control:', error);
+      toast.error('Failed to delete draft control');
+    } finally {
+      setOpenDialog(false);
+      setConfirmingDelete(false);
+      setCurrentControl(null);
+    }
   };
 
   const handleSubmit = () => {
@@ -159,24 +162,16 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
     onSubmit(controls);
   };
 
-  const getSeverityBadge = (severity) => {
-    const severityInfo = severityLevels.find(level => level.value === severity);
-    return (
-      <Badge className={severityInfo ? severityInfo.color : 'bg-gray-500'}>
-        {severityInfo ? severityInfo.label : severity}
-      </Badge>
-    );
-  };
-
   return (
     <div className="py-4">
       <div className="mb-6 flex items-center justify-between">
-        <h2 className="text-left text-xl font-semibold">Security Controls</h2>
+        <h2 className="text-left text-xl font-semibold">Draft Controls</h2>
         <Button 
           onClick={handleAddControl}
+          className="border-2 border-sidebar-accent bg-sidebar-accent hover:bg-secondary hover:text-sidebar-accent"
         >
           <Plus className="mr-2 h-4 w-4" />
-          Add Control
+          Add Draft Control
         </Button>
       </div>
 
@@ -192,32 +187,43 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
         </Alert>
       )}
 
-      {/* Controls list */}
-      <div className="max-h-[500px] overflow-y-auto pr-2 space-y-4">
-        {controls.length === 0 ? (
-          <div className="border rounded-md bg-gray-50 py-10 text-center">
-            <p className="text-gray-500">No controls added yet. Click &quot;Add Control&quot; to start.</p>
+      {/* Empty state with helpful message */}
+      {!isLoading && controls.length === 0 && (
+        <div className="mb-6 border border-gray-300 rounded-lg border-dashed bg-gray-50 p-8 text-center">
+          <div className="mx-auto mb-4 h-12 w-12 flex items-center justify-center rounded-full">
+            <Plus className="text-black-500 h-6 w-6" />
           </div>
-        ) : (
-          controls.map((control, index) => (
-            <Card key={control.id || index} className="transition-shadow hover:shadow-md">
+          <h3 className="mb-1 text-lg text-gray-900 font-medium">No draft controls yet</h3>
+          <p className="mb-4 text-gray-500">Add draft controls to define what to monitor in your catalog</p>
+        </div>
+      )}
+
+      {/* Controls list with shimmer effect when loading */}
+      <div className="max-h-[500px] overflow-y-auto pr-2 space-y-4">
+        {isLoading ? (
+          // Shimmer loading effect for controls
+          Array(3).fill(0).map((_, index) => (
+            <div key={index} className="animate-pulse">
+              <div className="h-24 rounded-md bg-gray-200"></div>
+            </div>
+          ))
+        ) : controls.length > 0 ? (
+          controls.map((control) => (
+            <Card key={control.id} className="transition-shadow hover:shadow-md">
               <CardHeader className="flex flex-row justify-between p-4 pb-2">
-                <div>
+                <div className="text-left">
                   <CardTitle className="flex items-center text-base font-medium">
                     {control.name}
-                    <span className="ml-3">
-                      {getSeverityBadge(control.severity)}
-                    </span>
                   </CardTitle>
                   <p className="text-sm text-gray-500">
-                    Type: {controlTypes.find(type => type.value === control.type)?.label || control.type}
+                    Period: {control.period}
                   </p>
                 </div>
                 <div className="flex space-x-1">
                   <Button 
                     size="sm" 
                     variant="ghost" 
-                    onClick={() => handleEditControl(control, index)}
+                    onClick={() => handleEditControl(control)}
                   >
                     <Edit className="h-4 w-4" />
                   </Button>
@@ -225,7 +231,7 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
                     size="sm" 
                     variant="ghost" 
                     className="text-red-500 hover:bg-red-50 hover:text-red-700"
-                    onClick={() => handleDeleteControl(index)}
+                    onClick={() => handleDeleteConfirm(control)}
                   >
                     <Trash className="h-4 w-4" />
                   </Button>
@@ -233,159 +239,92 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
               </CardHeader>
               <CardContent className="p-4 pt-2">
                 <p className="text-sm">{control.description}</p>
-                {control.implementation && (
-                  <div className="mt-2 rounded-md bg-gray-50 p-2 text-xs text-gray-700">
-                    <strong>Implementation:</strong>
-                    <p className="mt-1 whitespace-pre-line">{control.implementation}</p>
+                
+                {/* Añadimos la visualización de scopes con badges */}
+                {control.scopes && Object.keys(control.scopes).length > 0 && (
+                  <div className="mt-2">
+                    <div className="flex flex-wrap gap-1">
+                      {Object.entries(control.scopes).map(([key, value]) => (
+                        <Badge key={key} variant="outline">
+                          {key}: {value}
+                        </Badge>
+                      ))}
+                    </div>
                   </div>
                 )}
+                
+                <div className="grid mt-2 gap-1 text-xs text-gray-500">
+                  <div>Start Date: {new Date(control.startDate).toLocaleDateString()}</div>
+                  {control.endDate && <div>End Date: {new Date(control.endDate).toLocaleDateString()}</div>}
+                  {control.mashupId && <div>API Flow ID: {control.mashupId}</div>}
+                  {control.params && Object.keys(control.params).length > 0 && (
+                    <div className="mt-1 flex flex-wrap items-center gap-1">
+                      <span>Parameters: </span>
+                      {Object.entries(control.params).map(([key, value]) => (
+                        <Badge key={key} variant="outline" className="text-xs">
+                          {key}: {typeof value === 'object' ? JSON.stringify(value) : value}
+                        </Badge>
+                      ))}
+                    </div>
+                  )}
+                </div>
               </CardContent>
             </Card>
           ))
-        )}
+        ) : null}
       </div>
 
-      {/* Control form dialog */}
-      <Dialog open={openDialog} onOpenChange={setOpenDialog}>
-        <DialogContent className="sm:max-w-[550px]">
+      {/* Draft Control Form - Pass customSubmit for draft control creation */}
+      {openNewControlForm && (
+        <NewControlForm 
+          catalogId={catalogId}
+          onClose={handleCloseNewControlForm}
+          onSuccess={handleControlSuccess}
+          customSubmit={handleCustomSubmit}
+        />
+      )}
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={openDialog && confirmingDelete} onOpenChange={setOpenDialog}>
+        <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
-            <DialogTitle>{isEditing ? 'Edit Control' : 'Add New Control'}</DialogTitle>
+            <DialogTitle>Delete Draft Control</DialogTitle>
           </DialogHeader>
-          
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(handleControlSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Control Name <span className="text-red-500">*</span></FormLabel>
-                    <FormControl>
-                      <Input placeholder="Enter control name" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              <div className="grid grid-cols-2 gap-4">
-                <FormField
-                  control={form.control}
-                  name="type"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Type <span className="text-red-500">*</span></FormLabel>
-                      <Select 
-                        onValueChange={field.onChange} 
-                        defaultValue={field.value}
-                      >
-                        <FormControl>
-                          <SelectTrigger>
-                            <SelectValue placeholder="Select control type" />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          {controlTypes.map((type) => (
-                            <SelectItem key={type.value} value={type.value}>
-                              {type.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                
-                <FormField
-                  control={form.control}
-                  name="severity"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Severity <span className="text-red-500">*</span></FormLabel>
-                      <Select 
-                        onValueChange={field.onChange} 
-                        defaultValue={field.value}
-                      >
-                        <FormControl>
-                          <SelectTrigger>
-                            <SelectValue placeholder="Select severity" />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          {severityLevels.map((level) => (
-                            <SelectItem key={level.value} value={level.value}>
-                              <div className="flex items-center">
-                                <span className={cn('w-3 h-3 rounded-full mr-2', level.color)} />
-                                {level.label}
-                              </div>
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-              
-              <FormField
-                control={form.control}
-                name="description"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Description <span className="text-red-500">*</span></FormLabel>
-                    <FormControl>
-                      <Textarea 
-                        placeholder="Enter control description" 
-                        rows={2}
-                        {...field} 
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="implementation"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Implementation Details</FormLabel>
-                    <FormControl>
-                      <Textarea 
-                        placeholder="Describe how this control should be implemented" 
-                        rows={3}
-                        {...field} 
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              <DialogFooter className="pt-4">
-                <Button type="button" variant="outline" onClick={closeDialog}>
-                  Cancel
-                </Button>
-                <Button 
-                  type="submit" 
-                  className="ml-2"
-                >
-                  {isEditing ? 'Update Control' : 'Add Control'}
-                </Button>
-              </DialogFooter>
-            </form>
-          </Form>
+          <div className="py-4">
+            <p>Are you sure you want to delete this draft control?</p>
+            <p className="mt-2 text-sm text-gray-500">
+              This action cannot be undone.
+            </p>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={handleDeleteCancel}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteControl}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* Navigation buttons */}
-      <div className="mt-8 flex justify-end">
+      {/* Progress counter and Navigation button */}
+      <div className="mt-8 flex items-center justify-between border-t pt-4">
+        <div className="text-sm text-gray-500">
+          {controls.length > 0 ? (
+            <span>{controls.length} draft control{controls.length !== 1 ? 's' : ''} added</span>
+          ) : (
+            <span>Add at least one draft control to continue</span>
+          )}
+        </div>
         <Button 
           onClick={handleSubmit} 
-          disabled={isSubmitting}
+          disabled={isSubmitting || controls.length === 0}
           className="min-w-[120px] bg-white text-primary hover:bg-secondary"
         >
           {isSubmitting ? (
diff --git a/src/components/catalog/CatalogInfoStep.jsx b/src/components/catalog/CatalogInfoStep.jsx
index d87a6355..e33e3585 100644
--- a/src/components/catalog/CatalogInfoStep.jsx
+++ b/src/components/catalog/CatalogInfoStep.jsx
@@ -27,15 +27,12 @@ import { cn } from '@/lib/utils';
 // Schema validation for catalog info
 const catalogInfoSchema = z.object({
   name: z.string().min(1, { message: 'Catalog name is required' }),
-  description: z.string().min(1, { message: 'Description is required' }),
   startDate: z.date({
     required_error: 'Start date is required',
   }),
-  endDate: z.date({
-    required_error: 'End date is required',
-  }),
+  endDate: z.date().optional(),
 }).refine(data => {
-  return data.startDate <= data.endDate;
+  return !data.endDate || data.startDate <= data.endDate;
 }, {
   message: 'End date must be after start date',
   path: ['endDate']
@@ -80,7 +77,7 @@ export function CatalogInfoStep({ initialData = {}, onSubmit, isSubmitting, apiE
 
   return (
     <div className="py-4 text-left">
-      <h2 className="mb-6 text-xl font-semibold">Basic Catalog Information</h2>
+      <h2 className="mb-6 text-xl font-semibold">Catalog Information</h2>
       
       {submitError && (
         <Alert variant="destructive" className="mb-6">
@@ -122,7 +119,7 @@ export function CatalogInfoStep({ initialData = {}, onSubmit, isSubmitting, apiE
             render={({ field }) => (
               <FormItem>
                 <FormLabel className="text-base font-medium">
-                  Description <span className="text-red-500">*</span>
+                  Description
                 </FormLabel>
                 <FormControl>
                   <Textarea 
@@ -186,7 +183,7 @@ export function CatalogInfoStep({ initialData = {}, onSubmit, isSubmitting, apiE
               render={({ field }) => (
                 <FormItem className="flex flex-col">
                   <FormLabel className="text-base font-medium">
-                    End Date <span className="text-red-500">*</span>
+                    End Date
                   </FormLabel>
                   <Popover>
                     <PopoverTrigger asChild>
diff --git a/src/forms/control/new/form.jsx b/src/forms/control/new/form.jsx
index 9e9e9bdd..d48aeda8 100644
--- a/src/forms/control/new/form.jsx
+++ b/src/forms/control/new/form.jsx
@@ -19,7 +19,7 @@ import { cn } from '@/lib/utils';
 import { format } from 'date-fns';
 import { controlSchema } from './schemas';
 
-export function NewControlForm({ catalogId, onClose, onSuccess }) {
+export function NewControlForm({ catalogId, onClose, onSuccess, customSubmit = null }) {
   const [loading, setLoading] = useState(false);
   const [availableScopes, setAvailableScopes] = useState([]);
   const [availableMashups, setAvailableMashups] = useState([]);
@@ -96,7 +96,6 @@ export function NewControlForm({ catalogId, onClose, onSuccess }) {
       const updatedParams = { ...fetchedParams, threshold: '' }; // Add threshold param
       setAvailableParams(updatedParams);
       
-      // Buscar la URL del mashup seleccionado y añadirla como parámetro "endpoint"
       const selectedMashup = availableMashups.find(mashup => mashup.id === flowId);
       if (selectedMashup && selectedMashup.url) {
         const updatedFormParams = { ...getValues('params'), endpoint: selectedMashup.url };
@@ -142,26 +141,33 @@ export function NewControlForm({ catalogId, onClose, onSuccess }) {
 
   const onSubmit = async (data) => {
     setLoading(true);
-
+  
     try {
-      // First create the control
-      const createdControl = await createControl(data);
-      
-      // Then create the scope set using the control ID if scopes exist
-      if (Object.keys(data.scopes).length > 0) {
-        const scopeSetData = {
-          controlId: createdControl.id,
-          scopes: data.scopes
-        };
+      // If customSubmit is provided, use it instead of the default submit behavior
+      if (customSubmit) {
+        const result = await customSubmit(data);
+        onSuccess(result);
+      } else {
+        // Default behavior: create control and scope set
+        const response = await createControl(data);
+        const createdControl = response.data || response;
         
-        await createScopeSet(scopeSetData);
+        // Then create the scope set using the control ID if scopes exist
+        if (Object.keys(data.scopes).length > 0) {
+          const scopeSetData = {
+            controlId: createdControl.id,
+            scopes: data.scopes
+          };
+          
+          await createScopeSet(scopeSetData);
+        }
+        
+        toast.success('Control created successfully with associated scopes');
+        onSuccess(createdControl);
       }
-      
-      toast.success('Control created successfully with associated scopes');
-      onSuccess();
     } catch (error) {
       console.error('Error creating control and scopes:', error);
-      const errorMessage = error.response?.data.error || 'Failed to create control and associate scopes';
+      const errorMessage = error.response?.data || 'Failed to create control and associate scopes';
       toast.error(errorMessage);
     } finally {
       setLoading(false);
@@ -480,6 +486,7 @@ export function NewControlForm({ catalogId, onClose, onSuccess }) {
               <Button
                 type="submit"
                 disabled={loading}
+                variant="destructive"
               >
                 {loading ? 'Creating...' : 'Save'}
               </Button>
diff --git a/src/forms/control/new/schemas.js b/src/forms/control/new/schemas.js
index bc67e899..e523104f 100644
--- a/src/forms/control/new/schemas.js
+++ b/src/forms/control/new/schemas.js
@@ -13,5 +13,8 @@ export const controlSchema = z.object({
     message: 'At least one parameter is required'
   }),
   scopes: z.record(z.string()).optional(),
-  catalogId: z.string().min(1, { message: 'Catalog ID is required' })
+  catalogId: z.number({
+    required_error: 'Catalog ID is required',
+    invalid_type_error: 'Catalog ID must be a number'
+  })
 });
diff --git a/src/pages/app/catalog/CatalogWizard.jsx b/src/pages/app/catalog/CatalogWizard.jsx
index 7a84d049..4fc77601 100644
--- a/src/pages/app/catalog/CatalogWizard.jsx
+++ b/src/pages/app/catalog/CatalogWizard.jsx
@@ -5,7 +5,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Check, ArrowLeft, ArrowRight, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 import Page from '@/components/basic-page.jsx';
-import { createCatalog, updateCatalog, getCatalogById } from '@/services/catalogs';
+import { createDraftCatalog, updateCatalog, getCatalogById } from '@/services/catalogs';
 import { CatalogInfoStep } from '@/components/catalog/CatalogInfoStep';
 import { CatalogControlsStep } from '@/components/catalog/CatalogControlsStep';
 import { CatalogDashboardStep } from '@/components/catalog/CatalogDashboardStep';
@@ -74,9 +74,9 @@ export function CatalogWizard() {
       
       // If first step and not editing, create new catalog
       if (currentStep === 0 && !isEditing) {
-        const response = await createCatalog(catalogInfo);
+        const response = await createDraftCatalog(catalogInfo);
         setCatalogData({
-          ...response.data,
+          ...response,
           controls: [],
           dashboardConfig: {}
         });
@@ -234,9 +234,9 @@ export function CatalogWizard() {
               <div 
                 className={`flex items-center justify-center w-10 h-10 rounded-full border-2 ${
                   index < currentStep
-                    ? 'bg-green-500 border-green-500 text-white'
+                    ? 'bg-chart-1 border-chart-1 text-white'
                     : index === currentStep
-                      ? 'border-blue-500 text-blue-500'
+                      ? 'border-sidebar-accent text-sidebar-accent'
                       : 'border-gray-300 text-gray-300'
                 }`}
               >
@@ -257,7 +257,7 @@ export function CatalogWizard() {
               {/* Connector line */}
               {index < steps.length - 1 && (
                 <div className={`w-12 h-1 mr-2 ${
-                  index < currentStep ? 'bg-green-500' : 'bg-gray-300'
+                  index < currentStep ? 'bg-chart-1' : 'bg-gray-300'
                 }`}></div>
               )}
             </div>
diff --git a/src/services/catalogs.js b/src/services/catalogs.js
index 5028900b..12061d9e 100644
--- a/src/services/catalogs.js
+++ b/src/services/catalogs.js
@@ -59,3 +59,29 @@ export function getPointsByTpaId(tpaId, from = null, to = null) {
   
   return apiClient.get(`/catalogs/${tpaId}/points`, params);
 }
+
+/**
+ * Gets all draft catalogs
+ * @returns {Promise} - Promise with the list of draft catalogs
+ */
+export function getDraftCatalogs() {
+  return apiClient.get('/catalogs/drafts');
+}
+
+/**
+ * Creates a new draft catalog
+ * @param {object} catalogData - Catalog data
+ * @returns {Promise} - Promise with the created draft catalog
+ */
+export function createDraftCatalog(catalogData) {
+  return apiClient.post('/catalogs/drafts', catalogData);
+}
+
+/**
+ * Finalizes a draft catalog
+ * @param {string} id - Catalog ID
+ * @returns {Promise} - Promise with the finalized catalog
+ */
+export function finalizeCatalog(id) {
+  return apiClient.patch(`/catalogs/${id}/finalize`);
+}
diff --git a/src/services/controls.js b/src/services/controls.js
index cdf9f17b..e794c4d6 100644
--- a/src/services/controls.js
+++ b/src/services/controls.js
@@ -121,3 +121,38 @@ export function addPanelToControl(controlId, panelId, data) {
 export function deletePanelFromControl(controlId, panelId) {
   return apiClient.delete(`/controls/${controlId}/panels/${panelId}`);
 }
+
+/**
+ * Gets all draft controls
+ * @returns {Promise} - Promise with the list of draft controls
+ */
+export function getDraftControls() {
+  return apiClient.get('/controls/drafts');
+}
+
+/**
+ * Gets all draft controls for a specific catalog
+ * @param {string} catalogId - Catalog ID
+ * @returns {Promise} - Promise with the list of draft controls for the catalog
+ */
+export function getDraftControlsByCatalogId(catalogId) {
+  return apiClient.get(`/controls/drafts/catalog/${catalogId}`);
+}
+
+/**
+ * Creates a new draft control
+ * @param {object} controlData - Control data
+ * @returns {Promise} - Promise with the created draft control
+ */
+export function createDraftControl(controlData) {
+  return apiClient.post('/controls/drafts', controlData);
+}
+
+/**
+ * Finalizes a draft control
+ * @param {string} id - Control ID
+ * @returns {Promise} - Promise with the finalized control
+ */
+export function finalizeControl(id) {
+  return apiClient.patch(`/controls/${id}/finalize`);
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index d5b9dfd1..97a57b95 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -74,6 +74,7 @@ h1 {
     --sidebar-accent-foreground: 0 0 100%;
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
+    --status: 139.5 47.06% 33.33%;
   }
   .dark {
     --background: 240 10% 3.9%;
@@ -95,7 +96,7 @@ h1 {
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
+    --chart-1: 139.5 47.06% 33.33%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;

From cf3aaeb48ee056f70e7cda71f39db5771889ed95 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Sat, 19 Apr 2025 14:18:35 +0200
Subject: [PATCH 03/24] feat(catalog): enhanced controls creation step

---
 .../catalog/CatalogControlsStep.jsx           | 74 +++++++++++++++----
 .../catalog/CatalogDashboardStep.jsx          | 10 +--
 src/styles/index.css                          |  4 +-
 src/utils/timeRangeParser.js                  | 40 +++++-----
 4 files changed, 89 insertions(+), 39 deletions(-)

diff --git a/src/components/catalog/CatalogControlsStep.jsx b/src/components/catalog/CatalogControlsStep.jsx
index 3f11e374..c26f732c 100644
--- a/src/components/catalog/CatalogControlsStep.jsx
+++ b/src/components/catalog/CatalogControlsStep.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
-import { Loader2, ArrowRight, Plus, Trash, Edit, AlertCircle } from 'lucide-react';
+import { Loader2, ArrowRight, Plus, Trash, Edit, AlertCircle, ExternalLink } from 'lucide-react';
 import { 
   Card, 
   CardContent, 
@@ -19,6 +19,7 @@ import {
   DialogTitle,
   DialogFooter,
 } from '@/components/ui/dialog';
+import { getScopeSetsByControlId } from '@/services/scopes';
 import { Badge } from '@/components/ui/badge';
 
 export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit, isSubmitting, apiError = null }) {
@@ -30,6 +31,8 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
   const [currentControl, setCurrentControl] = useState(null);
   const [confirmingDelete, setConfirmingDelete] = useState(false);
 
+  const nodeRedUrl = import.meta.env.VITE_NODE_RED_URL || 'http://localhost:1880';
+
   // Load draft controls when component mounts or catalogId changes
   useEffect(() => {
     if (catalogId) {
@@ -53,7 +56,23 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
     setIsLoading(true);
     try {
       const response = await getDraftControlsByCatalogId(catalogId);
-      setControls(response || []);
+      const controlsWithScopesData = await Promise.all(
+        response.map(async (control) => {
+          try {
+            const scopeResponse = await getScopeSetsByControlId(control.id);
+            return {
+              ...control,
+              scopes: scopeResponse.reduce((acc, scopeSet) => {
+                return { ...acc, ...scopeSet.scopes };
+              }, {})
+            };
+          } catch (error) {
+            console.error(`Error fetching scopes for control ${control.id}:`, error);
+            return { ...control, scopes: {} };
+          }
+        })
+      );
+      setControls(controlsWithScopesData);
     } catch (error) {
       console.error('Error fetching draft controls:', error);
       toast.error('Failed to load draft controls');
@@ -72,6 +91,7 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
 
   const handleCustomSubmit = async (data) => {
     try {
+      let scopeSet = { scopes: {} };
       // Use createDraftControl specifically in the catalog context
       const createdControl = await createDraftControl(data);
       
@@ -82,10 +102,10 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
           scopes: data.scopes
         };
         
-        await createScopeSet(scopeSetData);
+        scopeSet = await createScopeSet(scopeSetData);
       }
       
-      return createdControl;
+      return { ...createdControl, scopes: scopeSet.scopes };
     } catch (error) {
       console.error('Error creating draft control:', error);
       throw error;
@@ -100,7 +120,23 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
         // Fetch the updated list of controls
         if (catalogId) {
           const response = await getDraftControlsByCatalogId(catalogId);
-          setControls(response || []);
+          const controlsWithScopesData = await Promise.all(
+            response.map(async (control) => {
+              try {
+                const scopeResponse = await getScopeSetsByControlId(control.id);
+                return {
+                  ...control,
+                  scopes: scopeResponse.reduce((acc, scopeSet) => {
+                    return { ...acc, ...scopeSet.scopes };
+                  }, {})
+                };
+              } catch (error) {
+                console.error(`Error fetching scopes for control ${control.id}:`, error);
+                return { ...control, scopes: {} };
+              }
+            })
+          );
+          setControls(controlsWithScopesData || []);
         } else {
           // If no catalogId, manually add the new control to the current list
           setControls(prevControls => [...prevControls, newControl]);
@@ -220,6 +256,13 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
                   </p>
                 </div>
                 <div className="flex space-x-1">
+                  {control.mashupId && (
+                    <div>
+                      <Button variant="ghost" size="sm" onClick={() => window.open(`${nodeRedUrl}/#flow/${control.mashupId}`, '_blank')}>
+                        <ExternalLink className="mr-2 h-4 w-4" /> View mashup
+                      </Button>
+                    </div>
+                  )}
                   <Button 
                     size="sm" 
                     variant="ghost" 
@@ -241,22 +284,23 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
                 <p className="text-sm">{control.description}</p>
                 
                 {/* Añadimos la visualización de scopes con badges */}
-                {control.scopes && Object.keys(control.scopes).length > 0 && (
-                  <div className="mt-2">
-                    <div className="flex flex-wrap gap-1">
+                {console.log(control)}
+                
+                
+                <div className="grid mt-2 gap-1 text-xs text-gray-500">
+                  
+                  <div className='flex'>Start Date: {new Date(control.startDate).toLocaleDateString()}</div>
+                  {control.endDate && <div className='flex'>End Date: {new Date(control.endDate).toLocaleDateString()}</div>}
+                  {control.scopes && Object.keys(control.scopes).length > 0 && (
+                    <div className="mt-1 flex flex-wrap items-center gap-1">
+                      <span>Scopes: </span>
                       {Object.entries(control.scopes).map(([key, value]) => (
                         <Badge key={key} variant="outline">
                           {key}: {value}
                         </Badge>
                       ))}
                     </div>
-                  </div>
-                )}
-                
-                <div className="grid mt-2 gap-1 text-xs text-gray-500">
-                  <div>Start Date: {new Date(control.startDate).toLocaleDateString()}</div>
-                  {control.endDate && <div>End Date: {new Date(control.endDate).toLocaleDateString()}</div>}
-                  {control.mashupId && <div>API Flow ID: {control.mashupId}</div>}
+                  )}  
                   {control.params && Object.keys(control.params).length > 0 && (
                     <div className="mt-1 flex flex-wrap items-center gap-1">
                       <span>Parameters: </span>
diff --git a/src/components/catalog/CatalogDashboardStep.jsx b/src/components/catalog/CatalogDashboardStep.jsx
index dfc21006..0cb0522f 100644
--- a/src/components/catalog/CatalogDashboardStep.jsx
+++ b/src/components/catalog/CatalogDashboardStep.jsx
@@ -3,7 +3,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Loader2, Save, PieChart, BarChart, LineChart, Table2, Check, ArrowRight, AlertCircle } from 'lucide-react';
+import { Loader2, PieChart, BarChart, LineChart, Table2, Check, AlertCircle } from 'lucide-react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm, useFieldArray } from 'react-hook-form';
 import { z } from 'zod';
@@ -223,8 +223,7 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
               <Button 
                 type="button" 
                 onClick={handleAddChart}
-                className="border-2 border-sidebar-accent bg-sidebar-accent hover:bg-secondary hover:text-sidebar-accent"
-                variant="outline"
+                variant="destructive"
               >
                 Add Chart
               </Button>
@@ -342,7 +341,7 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
               </Tabs>
             ) : (
               <div className="border rounded-md bg-gray-50 py-10 text-center">
-                <p className="text-gray-500">No charts added yet. Click "Add Chart" to start building your dashboard.</p>
+                <p className="text-gray-500">No charts added yet. Click &quot;Add Chart&quot; to start building your dashboard.</p>
               </div>
             )}
           </div>
@@ -352,7 +351,8 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
             <Button 
               type="submit" 
               disabled={isSubmitting}
-              className="min-w-[120px] border-2 border-sidebar-accent bg-sidebar-accent hover:bg-secondary hover:text-sidebar-accent"
+              className="min-w-[120px]"
+              variant="outline"
             >
               {isSubmitting ? (
                 <>
diff --git a/src/styles/index.css b/src/styles/index.css
index 97a57b95..8fecd78b 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -60,7 +60,7 @@ h1 {
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 10% 3.9%;
-    --chart-1: 12 76% 61%;
+    --chart-1: 141 45.8% 32.5%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
@@ -96,7 +96,7 @@ h1 {
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
-    --chart-1: 139.5 47.06% 33.33%;
+    --chart-1: 141 45.8% 32.5%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
diff --git a/src/utils/timeRangeParser.js b/src/utils/timeRangeParser.js
index 403d8a77..cffc9c1b 100644
--- a/src/utils/timeRangeParser.js
+++ b/src/utils/timeRangeParser.js
@@ -1,29 +1,35 @@
-// Function to parse time ranges like "now-6h" and "now"
+// Function to parse time ranges like "now-6h", "now", or ISO date strings
 export function parseTimeRange(range) {
   const now = new Date();
 
   const parseOffset = (value) => {
     if (value === 'now') return now;
 
-    const match = value.match(/now-(\d+)([smhdMy])/);
-    if (!match) throw new Error(`Invalid time format: ${value}`);
+    // If the value is in the format "now-<number><unit>"
+    const offsetRegex = /^now-(\d+)([smhdMy])$/;
+    const match = value.match(offsetRegex);
+    if (match) {
+      const amount = parseInt(match[1], 10);
+      const unit = match[2];
+      const date = new Date(now);
 
-    const amount = parseInt(match[1], 10);
-    const unit = match[2];
-
-    const date = new Date(now);
-
-    switch (unit) {
-    case 's': date.setSeconds(date.getSeconds() - amount); break;
-    case 'm': date.setMinutes(date.getMinutes() - amount); break;
-    case 'h': date.setHours(date.getHours() - amount); break;
-    case 'd': date.setDate(date.getDate() - amount); break;
-    case 'M': date.setMonth(date.getMonth() - amount); break;
-    case 'y': date.setFullYear(date.getFullYear() - amount); break;
-    default: throw new Error(`Unknown time unit: ${unit}`);
+      switch (unit) {
+      case 's': date.setSeconds(date.getSeconds() - amount); break;
+      case 'm': date.setMinutes(date.getMinutes() - amount); break;
+      case 'h': date.setHours(date.getHours() - amount); break;
+      case 'd': date.setDate(date.getDate() - amount); break;
+      case 'M': date.setMonth(date.getMonth() - amount); break;
+      case 'y': date.setFullYear(date.getFullYear() - amount); break;
+      default: throw new Error(`Unknown time unit: ${unit}`);
+      }
+      return date;
     }
 
-    return date;
+    // Attempt to parse as an ISO date string.
+    const date = new Date(value);
+    if (!isNaN(date)) return date;
+
+    throw new Error(`Invalid time format: ${value}`);
   };
 
   return {

From 3038733ef87b33668b22052ac58cf845f2cc05e9 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Mon, 21 Apr 2025 12:12:16 +0200
Subject: [PATCH 04/24] feat(panel): added panel creation form

---
 src/components/dashboard/dashboard-panel.jsx | 153 +++--
 src/forms/dashboard/panel/form.jsx           | 656 +++++++++++++++++++
 src/forms/dashboard/panel/schemas.js         |  33 +
 src/pages/app/dashboard/DashboardDetails.jsx |  32 +-
 4 files changed, 802 insertions(+), 72 deletions(-)
 create mode 100644 src/forms/dashboard/panel/form.jsx
 create mode 100644 src/forms/dashboard/panel/schemas.js

diff --git a/src/components/dashboard/dashboard-panel.jsx b/src/components/dashboard/dashboard-panel.jsx
index 6d62b36a..151f17ab 100644
--- a/src/components/dashboard/dashboard-panel.jsx
+++ b/src/components/dashboard/dashboard-panel.jsx
@@ -1,104 +1,115 @@
 import { useState, useEffect } from 'react';
-import { dashboardsService } from '@/services/grafana/dashboards';
 import { Skeleton } from '@/components/ui/skeleton';
 import { AlertCircle } from 'lucide-react';
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
-// Obtenemos la URL base de Grafana desde las variables de entorno
 const GRAFANA_URL = import.meta.env.VITE_GRAFANA_URL || 'http://localhost:3100';
 
-/**
- * Renders a Grafana panel inside our application using iframe
- * @param {Object} props Component props
- * @param {string} props.dashboardUid UID of the dashboard containing the panel
- * @param {Object} props.panel Panel data object
- * @param {number} props.height Height of the panel in pixels
- * @param {boolean} props.showTitle Whether to display the panel title
- */
-export function DashboardPanel({ dashboardUid, panel, height = 300, showTitle = false }) {
+export function DashboardPanel({ dashboardUid, panel, height = 300, preview = false }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [iframeUrl, setIframeUrl] = useState('');
 
   useEffect(() => {
-    const fetchPanelData = async () => {
-      if (!dashboardUid || !panel || !panel.id) return;
+    if (!panel) {
+      setError('Panel data is missing');
+      setLoading(false);
+      return;
+    }
 
-      try {
-        setLoading(true);
+    try {
+      // Construye la URL para la visualización de Grafana
+      let baseUrl;
       
-        if (panel.rawSql) {
-          setError(null);
-          setLoading(false);
-          return;
-        }
-        
-        // Attempt to get the panel query, though it is not used further
-        try {
-          await dashboardsService.getPanelQuery(dashboardUid, panel.id);
-        } catch (queryErr) {
-          console.warn('Could not load panel query:', queryErr);
-        }
-        setError(null);
-      } catch (err) {
-        console.error('Error loading panel data:', err);
-        setError('Failed to load panel data');
-      } finally {
-        setLoading(false);
+      if (preview) {
+        // En modo preview usamos una URL especial si está disponible
+        baseUrl = `${GRAFANA_URL}/d-solo/preview`;
+      } else {
+        // URL normal para paneles existentes
+        baseUrl = `${GRAFANA_URL}/d-solo/${dashboardUid}`;
       }
-    };
 
-    fetchPanelData();
-  }, [dashboardUid, panel]);
+      // Parámetros comunes para la URL de Grafana
+      const params = new URLSearchParams({
+        orgId: 1,
+        panelId: panel.id,
+        from: 'now-6h',
+        to: 'now',
+        theme: 'light',
+      });
 
-  // Construir la URL del iframe para el panel de Grafana
-  const buildGrafanaIframeUrl = () => {
-    if (!dashboardUid || !panel || !panel.id) return '';
-    
-    // Usar el tiempo actual para from/to si no está definido
-    const now = Date.now();
-    const timeRange = {
-      from: now - 6 * 60 * 60 * 1000, // 6 horas atrás por defecto
-      to: now
-    };
-    
-    // URL para el panel en modo solo (d-solo)
-    return `${GRAFANA_URL}/d-solo/${dashboardUid}/${panel.slug || 'dashboard'}?orgId=1&from=${timeRange.from}&to=${timeRange.to}&timezone=browser&theme=light&panelId=${panel.id}`;
+      // Si es una preview, podemos añadir el panel y su configuración
+      if (preview) {
+        // Convertimos los datos del panel a un formato que Grafana pueda leer
+        // Esto dependerá de la API específica de tu backend
+        params.append('panelData', JSON.stringify({
+          type: panel.type,
+          title: panel.title,
+          description: panel.description,
+          options: panel.options,
+          rawSql: panel.rawSql
+        }));
+      }
+
+      setIframeUrl(`${baseUrl}?${params.toString()}`);
+    } catch (err) {
+      console.error('Error creating panel URL:', err);
+      setError('Failed to load panel visualization');
+    } finally {
+      setLoading(false);
+    }
+  }, [dashboardUid, panel, preview]);
+
+  // Manejador para cuando el iframe termina de cargar
+  const handleIframeLoad = () => {
+    setLoading(false);
   };
 
-  if (loading) {
-    return <Skeleton className="w-full" style={{ height: `${height}px` }} />;
-  }
+  // Manejador para errores del iframe
+  const handleIframeError = () => {
+    setError('Failed to load panel visualization');
+    setLoading(false);
+  };
 
   if (error) {
     return (
-      <Alert variant="destructive" className="mb-4">
+      <Alert variant="destructive">
         <AlertCircle className="h-4 w-4" />
-        <AlertDescription>{error}</AlertDescription>
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>
+          {typeof error === 'object' ? JSON.stringify(error) : error}
+        </AlertDescription>
       </Alert>
     );
   }
 
-  const iframeUrl = buildGrafanaIframeUrl();
+  // Si no hay panel o URL, mostrar un mensaje adecuado
+  if (!panel || !iframeUrl) {
+    return (
+      <div style={{ height: `${height}px` }} className="flex items-center justify-center bg-muted/20">
+        <p className="text-muted-foreground">No panel data available</p>
+      </div>
+    );
+  }
 
   return (
-    <div style={{ height: `${height}px`, overflow: 'hidden' }}>
-      {showTitle && panel.title && (
-        <div className="bg-card p-2">
-          <h3 className="text-base font-medium">{panel.title}</h3>
-          {panel.description && (
-            <p className="text-xs text-muted-foreground">{panel.description}</p>
-          )}
+    <div className="relative" style={{ height: `${height}px` }}>
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Skeleton className="h-full w-full" />
         </div>
       )}
       
-      <iframe 
-        src={iframeUrl} 
-        width="100%" 
-        height={showTitle ? `${height - 40}px` : `${height}px`} 
-        title={`Panel: ${panel.title || panel.id}`}
-        className="w-full"
-        loading="lazy"
-        style={{ border: 'none' }}
+      <iframe
+        title={panel.title || `Panel ${panel.id}`}
+        src={iframeUrl}
+        width="100%"
+        height={height}
+        frameBorder="0"
+        onLoad={handleIframeLoad}
+        onError={handleIframeError}
+        className={loading ? 'opacity-0' : 'opacity-100'}
+        style={{ transition: 'opacity 0.3s' }}
       />
     </div>
   );
diff --git a/src/forms/dashboard/panel/form.jsx b/src/forms/dashboard/panel/form.jsx
new file mode 100644
index 00000000..6e26ff8c
--- /dev/null
+++ b/src/forms/dashboard/panel/form.jsx
@@ -0,0 +1,656 @@
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { dashboardsService } from '@/services/grafana/dashboards';
+import { queriesService } from '@/services/grafana/queries';
+import { getAllControls } from '@/services/controls';
+import { Card, CardContent } from '@/components/ui/card';
+import { PlusCircle, Trash } from 'lucide-react';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Switch } from '@/components/ui/switch';
+import { panelSchema } from './schemas';
+import { addPanelToControl } from '@/services/controls';
+import { DashboardPanel } from '@/components/dashboard/dashboard-panel';
+
+// Available panel types with icons or descriptions
+const panelTypes = [
+  { value: 'graph', label: 'Line Graph' },
+  { value: 'gauge', label: 'Gauge' },
+  { value: 'table', label: 'Table' },
+  { value: 'stat', label: 'Stat' },
+  { value: 'timeseries', label: 'Time Series' },
+  { value: 'bar', label: 'Bar Chart' },
+  { value: 'pie', label: 'Pie Chart' },
+];
+
+// Available aggregation functions
+const aggregationFunctions = ['COUNT', 'SUM', 'AVG', 'MIN', 'MAX'];
+
+// Available operators for WHERE conditions
+const whereOperators = ['=', '>', '<', '>=', '<=', '<>', 'LIKE', 'IN', 'NOT IN'];
+
+// Hidden but still used by the form internally
+const tableAttributes = {
+  'Computations': ['id', 'name', 'status', 'created_at', 'updated_at', 'value'],
+  'Configurations': ['id', 'name', 'type', 'value', 'created_at'],
+  'Results': ['id', 'computation_id', 'value', 'status', 'created_at'],
+  'Metrics': ['id', 'name', 'value', 'timestamp']
+};
+
+export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
+  const [loading, setLoading] = useState(false);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [previewPanel, setPreviewPanel] = useState(null);
+  const [rawSql, setRawSql] = useState('');
+  const [controls, setControls] = useState([]);
+  const [loadingControls, setLoadingControls] = useState(false);
+
+  // Setup form with zod validation
+  const form = useForm({
+    resolver: zodResolver(panelSchema),
+    defaultValues: {
+      title: '',
+      type: 'graph',
+      description: '',
+      table: 'Computations', // Hidden from UI but kept for query building
+      sqlQuery: {
+        aggregations: [{ func: 'COUNT', attr: 'id' }],
+        whereConditions: [],
+        whereLogic: 'AND',
+        table: 'Computations'
+      },
+      showLegend: true,
+      unit: '',
+      decimals: 2,
+      min: undefined,
+      max: undefined,
+      thresholds: [],
+      controlId: '' // New field for control association
+    }
+  });
+
+  const { watch, setValue, getValues } = form;
+  const watchType = watch('type');
+  const watchTable = watch('table');
+  const watchSqlQuery = watch('sqlQuery');
+
+  // Load available controls when the form opens
+  useEffect(() => {
+    const fetchControls = async () => {
+      setLoadingControls(true);
+      try {
+        const response = await getAllControls();
+        const controlsData = Array.isArray(response) ? response : (response.data || []);
+        setControls(controlsData);
+      } catch (error) {
+        console.error('Error fetching controls:', error);
+        toast.error('Failed to load controls');
+      } finally {
+        setLoadingControls(false);
+      }
+    };
+
+    fetchControls();
+  }, []);
+  
+  // When table changes, update the sqlQuery table as well
+  useEffect(() => {
+    setValue('sqlQuery.table', watchTable);
+  }, [watchTable, setValue]);
+
+  // Generate SQL preview when query changes
+  useEffect(() => {
+    generateSqlPreview();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchSqlQuery]);
+
+  const generateSqlPreview = async () => {
+    try {
+      const queryData = getValues('sqlQuery');
+      if (queryData.aggregations.length === 0) return;
+      
+      setPreviewLoading(true);
+      const response = await queriesService.buildSql(queryData);
+      
+      // Asegúrate de que rawSql sea una cadena de texto
+      let sqlText = '';
+      if (typeof response === 'object') {
+        if (response.data) {
+          sqlText = typeof response.data === 'string' 
+            ? response.data 
+            : JSON.stringify(response.data, null, 2);
+        } else {
+          sqlText = JSON.stringify(response, null, 2);
+        }
+      } else {
+        sqlText = String(response);
+      }
+      
+      setRawSql(sqlText);
+    } catch (error) {
+      console.error('Error generating SQL preview:', error);
+      setRawSql('Error generating SQL');
+    } finally {
+      setPreviewLoading(false);
+    }
+  };
+
+  const generatePanelPreview = async () => {
+    try {
+      if (!rawSql) await generateSqlPreview();
+      
+      setPreviewLoading(true);
+      // Create a temporary panel object for preview
+      const panelData = getValues();
+      
+      // For the preview, we need to create a panel-like object
+      const previewPanelData = {
+        id: 999, // Temporary ID
+        type: panelData.type,
+        title: panelData.title || 'Panel Preview',
+        description: panelData.description || '',
+        options: {
+          showLegend: panelData.showLegend,
+          unit: panelData.unit || '',
+          decimals: panelData.decimals,
+          min: panelData.min,
+          max: panelData.max,
+          thresholds: panelData.thresholds || []
+        },
+        // Asegúrate de que rawSql sea una cadena
+        rawSql: rawSql || ''
+      };
+      
+      setPreviewPanel(previewPanelData);
+    } catch (error) {
+      console.error('Error generating panel preview:', error);
+      toast.error('Failed to generate panel preview');
+    } finally {
+      setPreviewLoading(false);
+    }
+  };
+
+  // Add an aggregation field
+  const addAggregation = () => {
+    const currentAggregations = getValues('sqlQuery.aggregations') || [];
+    setValue('sqlQuery.aggregations', [...currentAggregations, { func: 'COUNT', attr: tableAttributes[watchTable][0] }]);
+  };
+
+  // Remove an aggregation at the specified index
+  const removeAggregation = (index) => {
+    const currentAggregations = getValues('sqlQuery.aggregations') || [];
+    if (currentAggregations.length <= 1) {
+      toast.error('At least one aggregation is required');
+      return;
+    }
+    setValue('sqlQuery.aggregations', currentAggregations.filter((_, i) => i !== index));
+  };
+
+  // Add a WHERE condition
+  const addWhereCondition = () => {
+    const currentConditions = getValues('sqlQuery.whereConditions') || [];
+    setValue('sqlQuery.whereConditions', [
+      ...currentConditions, 
+      { key: tableAttributes[watchTable][0], operator: '=', value: '' }
+    ]);
+  };
+
+  // Remove a WHERE condition at the specified index
+  const removeWhereCondition = (index) => {
+    const currentConditions = getValues('sqlQuery.whereConditions') || [];
+    setValue('sqlQuery.whereConditions', currentConditions.filter((_, i) => i !== index));
+  };
+
+  // Submit the form to create a new panel
+  const onSubmit = async (data) => {
+    setLoading(true);
+
+    try {
+      // Add the raw SQL to the panel data
+      const panelData = { 
+        ...data,
+        controlId: data.controlId === 'none' ? '' : data.controlId, // Convertir "none" a string vacío
+        rawSql: typeof rawSql === 'string' ? rawSql : JSON.stringify(rawSql)
+      };
+      
+      // Send the panel data to the API
+      const response = await dashboardsService.addPanel(dashboardUid, panelData);
+      const createdPanel = response.data || response;
+      
+      // If a control was selected, associate the panel with it
+      if (data.controlId && data.controlId !== 'none') { // Verificar que no sea "none"
+        try {
+          // We need the new panel's ID returned from the server
+          const panelId = createdPanel.id || createdPanel.panelId;
+          if (panelId) {
+            await addPanelToControl(data.controlId, panelId.toString(), { dashboardUid });
+            toast.success('Panel added and associated with control');
+          } else {
+            toast.warning('Panel created but could not be associated with control (no panel ID returned)');
+          }
+        } catch (controlError) {
+          console.error('Error associating panel with control:', controlError);
+          toast.error('Panel created but association with control failed');
+        }
+      } else {
+        toast.success('Panel added successfully');
+      }
+      
+      onSuccess(createdPanel);
+    } catch (error) {
+      console.error('Error creating panel:', error);
+      toast.error('Failed to create panel');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={true} onOpenChange={onClose} className="max-w-5xl w-full">
+      <DialogContent className="max-h-[90vh] max-w-5xl w-full overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Add New Panel to Dashboard</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Panel Title*</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Enter panel title" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Panel Type*</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select panel type" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {panelTypes.map((type) => (
+                          <SelectItem key={type.value} value={type.value}>
+                            {type.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="flex flex-col justify-between gap-4 md:flex-row">
+              <FormField
+                control={form.control}
+                name="controlId"
+                render={({ field }) => (
+                  <FormItem className="min-w-[200px] flex-1">
+                    <FormLabel>Associate with Control (Optional)</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={loadingControls ? 'Loading controls...' : 'Select a control'} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent className="max-h-60 overflow-y-auto">
+                        <SelectItem value="none">None</SelectItem>
+                        {controls.map((control) => (
+                          <SelectItem key={control.id} value={control.id}>
+                            {control.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel>Description (Optional)</FormLabel>
+                    <FormControl>
+                      <Textarea placeholder="Panel description" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              <div className="space-y-6">
+                <Card>
+                  <CardContent className="pt-6">
+                    <div className="space-y-4">
+                      {/* Aggregations Section */}
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <FormLabel>Aggregations*</FormLabel>
+                          <Button
+                            type="button"
+                            onClick={addAggregation}
+                            variant="outline"
+                            size="sm"
+                          >
+                            <PlusCircle className="mr-1 h-4 w-4" /> Add
+                          </Button>
+                        </div>
+                        {watchSqlQuery.aggregations?.map((agg, index) => (
+                          <div key={index} className="flex flex-wrap items-center space-x-2">
+                            <Select
+                              value={agg.func}
+                              onValueChange={(value) => {
+                                const updatedAggs = [...getValues('sqlQuery.aggregations')];
+                                updatedAggs[index].func = value;
+                                setValue('sqlQuery.aggregations', updatedAggs);
+                              }}
+                            >
+                              <SelectTrigger className="w-[110px]">
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {aggregationFunctions.map((func) => (
+                                  <SelectItem key={func} value={func}>
+                                    {func}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <span>(</span>
+                            <Select
+                              value={agg.attr}
+                              onValueChange={(value) => {
+                                const updatedAggs = [...getValues('sqlQuery.aggregations')];
+                                updatedAggs[index].attr = value;
+                                setValue('sqlQuery.aggregations', updatedAggs);
+                              }}
+                            >
+                              <SelectTrigger className="flex-1">
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {tableAttributes[watchTable]?.map((attr) => (
+                                  <SelectItem key={attr} value={attr}>
+                                    {attr}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <span>)</span>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => removeAggregation(index)}
+                            >
+                              <Trash className="h-4 w-4 text-destructive" />
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+
+                      {/* Where Conditions Section */}
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <FormLabel>Where Conditions</FormLabel>
+                          <Button
+                            type="button"
+                            onClick={addWhereCondition}
+                            variant="outline"
+                            size="sm"
+                          >
+                            <PlusCircle className="mr-1 h-4 w-4" /> Add
+                          </Button>
+                        </div>
+
+                        {watchSqlQuery.whereConditions?.length > 0 ? (
+                          <>
+                            <div className="mb-2 flex items-center space-x-2">
+                              <FormLabel className="text-sm">Logic:</FormLabel>
+                              <Select
+                                value={watchSqlQuery.whereLogic || 'AND'}
+                                onValueChange={(value) => setValue('sqlQuery.whereLogic', value)}
+                              >
+                                <SelectTrigger className="w-[100px]">
+                                  <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="AND">AND</SelectItem>
+                                  <SelectItem value="OR">OR</SelectItem>
+                                </SelectContent>
+                              </Select>
+                            </div>
+
+                            {watchSqlQuery.whereConditions.map((condition, index) => (
+                              <div key={index} className="flex flex-wrap items-center space-x-2">
+                                <Select
+                                  value={condition.key}
+                                  onValueChange={(value) => {
+                                    const updatedConditions = [...getValues('sqlQuery.whereConditions')];
+                                    updatedConditions[index].key = value;
+                                    setValue('sqlQuery.whereConditions', updatedConditions);
+                                  }}
+                                >
+                                  <SelectTrigger className="w-[110px]">
+                                    <SelectValue />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {tableAttributes[watchTable]?.map((attr) => (
+                                      <SelectItem key={attr} value={attr}>
+                                        {attr}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+
+                                <Select
+                                  value={condition.operator}
+                                  onValueChange={(value) => {
+                                    const updatedConditions = [...getValues('sqlQuery.whereConditions')];
+                                    updatedConditions[index].operator = value;
+                                    setValue('sqlQuery.whereConditions', updatedConditions);
+                                  }}
+                                >
+                                  <SelectTrigger className="w-[80px]">
+                                    <SelectValue />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {whereOperators.map((op) => (
+                                      <SelectItem key={op} value={op}>
+                                        {op}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+
+                                <Input
+                                  value={condition.value}
+                                  onChange={(e) => {
+                                    const updatedConditions = [...getValues('sqlQuery.whereConditions')];
+                                    updatedConditions[index].value = e.target.value;
+                                    setValue('sqlQuery.whereConditions', updatedConditions);
+                                  }}
+                                  placeholder="Value"
+                                  className="flex-1"
+                                />
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  onClick={() => removeWhereCondition(index)}
+                                >
+                                  <Trash className="h-4 w-4 text-destructive" />
+                                </Button>
+                              </div>
+                            ))}
+                          </>
+                        ) : (
+                          <div className="text-sm text-muted-foreground">
+                            No conditions added yet. Add a condition to filter your data.
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* Panel Options Section */}
+                <div className="flex flex-col items-start justify-between gap-4 md:flex-row">
+                  {watchType !== 'table' && (
+                    <div className="flex-1 space-y-2">
+                      <FormLabel>Panel Options</FormLabel>
+                      <FormField
+                        control={form.control}
+                        name="showLegend"
+                        render={({ field }) => (
+                          <FormItem className="h-[50px] flex flex-row items-center justify-between border rounded-lg px-3">
+                            <FormLabel className="pt-1">Show Legend</FormLabel>
+                            <FormControl>
+                              <Switch checked={field.value} onCheckedChange={field.onChange} />
+                            </FormControl>
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                  )}
+                  <div className="flex-1">
+                    <FormField
+                      control={form.control}
+                      name="unit"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Unit (Optional)</FormLabel>
+                          <FormControl>
+                            <Input placeholder="e.g., bytes, seconds, percent" {...field} />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </div>
+                <div className="flex flex-col justify-between gap-2 md:flex-row">
+                  <FormField
+                    control={form.control}
+                    name="decimals"
+                    render={({ field }) => (
+                      <FormItem className="min-w-[150px]">
+                        <FormLabel>Decimal Precision</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="number"
+                            min="0"
+                            max="10"
+                            {...field}
+                            onChange={(e) => field.onChange(parseInt(e.target.value) || 0)}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  {(watchType === 'gauge' || watchType === 'stat') && (
+                    <>
+                      <FormField
+                        control={form.control}
+                        name="min"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Min Value</FormLabel>
+                            <FormControl>
+                              <Input
+                                type="number"
+                                {...field}
+                                onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : undefined)}
+                                value={field.value ?? ''}
+                              />
+                            </FormControl>
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name="max"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Max Value</FormLabel>
+                            <FormControl>
+                              <Input
+                                type="number"
+                                {...field}
+                                onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : undefined)}
+                                value={field.value ?? ''}
+                              />
+                            </FormControl>
+                          </FormItem>
+                        )}
+                      />
+                    </>
+                  )}
+                </div>
+              </div>
+
+              {/* Right Column – Panel preview */}
+              <div className="space-y-6">
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <FormLabel>Preview</FormLabel>
+                    <Button type="button" onClick={generatePanelPreview} variant="outline" size="sm">
+                      Generate Preview
+                    </Button>
+                  </div>
+                  <div className="h-[370px] flex items-center justify-center border rounded-lg bg-muted/20 p-4">
+                    {previewLoading ? (
+                      <div className="text-center">Loading preview...</div>
+                    ) : previewPanel ? (
+                      <div className="h-full w-full">
+                        <DashboardPanel dashboardUid={dashboardUid} panel={previewPanel} height={500} preview={true} />
+                      </div>
+                    ) : (
+                      <div className="text-center text-muted-foreground">
+                        Click &apos;Generate Preview&apos; to see how your panel will look
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <DialogFooter className="flex justify-end space-x-2">
+              <Button onClick={onClose} variant="outline" type="button">
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {loading ? 'Adding...' : 'Add Panel'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/src/forms/dashboard/panel/schemas.js b/src/forms/dashboard/panel/schemas.js
new file mode 100644
index 00000000..bc87d677
--- /dev/null
+++ b/src/forms/dashboard/panel/schemas.js
@@ -0,0 +1,33 @@
+import * as z from 'zod';
+
+export const panelSchema = z.object({
+  title: z.string().min(1, { message: 'Title is required' }),
+  type: z.enum(['graph', 'gauge', 'table', 'stat', 'timeseries', 'bar', 'pie'], { 
+    message: 'Panel type must be selected' 
+  }),
+  description: z.string().optional(),
+  table: z.string().min(1, { message: 'Table is required' }),
+  sqlQuery: z.object({
+    aggregations: z.array(z.object({
+      func: z.enum(['COUNT', 'SUM', 'AVG', 'MIN', 'MAX']),
+      attr: z.string().min(1)
+    })).min(1, { message: 'At least one aggregation is required' }),
+    whereConditions: z.array(z.object({
+      key: z.string().min(1),
+      operator: z.enum(['=', '>', '<', '>=', '<=', '<>', 'LIKE', 'IN', 'NOT IN']),
+      value: z.string().min(1)
+    })).optional(),
+    whereLogic: z.enum(['AND', 'OR']).optional(),
+    table: z.string().min(1)
+  }),
+  showLegend: z.boolean().default(true).optional(),
+  unit: z.string().optional(),
+  decimals: z.number().int().min(0).max(10).optional(),
+  min: z.number().optional(),
+  max: z.number().optional(),
+  thresholds: z.array(z.object({
+    value: z.number(),
+    color: z.string()
+  })).optional(),
+  controlId: z.string().optional().transform(val => val === 'none' ? '' : val) // Transformar "none" a string vacía
+});
diff --git a/src/pages/app/dashboard/DashboardDetails.jsx b/src/pages/app/dashboard/DashboardDetails.jsx
index a1f1df5f..3232ee50 100644
--- a/src/pages/app/dashboard/DashboardDetails.jsx
+++ b/src/pages/app/dashboard/DashboardDetails.jsx
@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Separator } from '@/components/ui/separator';
-import { ArrowLeft, Edit, Trash, Calendar, User, Bookmark, Clock, ExternalLink, Info, ChevronDown, ChevronUp } from 'lucide-react';
+import { ArrowLeft, ChartLine, Edit, Trash, Calendar, User, Bookmark, Clock, ExternalLink, Info, ChevronDown, ChevronUp } from 'lucide-react';
 import { DashboardPanel } from '@/components/dashboard/dashboard-panel';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -15,6 +15,7 @@ import { Badge } from '@/components/ui/badge';
 import { formatDistanceToNow } from 'date-fns';
 import { parseTimeRange } from '@/utils/timeRangeParser';
 import { useAuth } from '@/hooks/use-auth';
+import { AddPanelForm } from '@/forms/dashboard/panel/form';
 
 
 const GRAFANA_URL = import.meta.env.VITE_GRAFANA_URL || 'http://localhost:3100';
@@ -28,6 +29,7 @@ export function DashboardDetails() {
   const [error, setError] = useState(null);
   const { userData } = useAuth();
   const [showDashboardInfo, setShowDashboardInfo] = useState(false);
+  const [showAddPanelForm, setShowAddPanelForm] = useState(false);
 
   useEffect(() => {
     const fetchDashboard = async () => {
@@ -72,6 +74,20 @@ export function DashboardDetails() {
     navigate('/app/dashboards');
   };
 
+  const handlePanelAdded = async (newPanel) => {
+    setShowAddPanelForm(false);
+    // Refresh panels to show the new one
+    try {
+      const response = await dashboardsService.getById(id);
+      if (response?.dashboard?.panels) {
+        setPanels(response.dashboard.panels);
+      }
+      toast.success('Panel added successfully');
+    } catch (err) {
+      console.error('Error refreshing panels:', err);
+    }
+  };
+
   if (loading) {
     return (
       <Page>
@@ -148,6 +164,11 @@ export function DashboardDetails() {
           )}
         </div>
         <div className="flex space-x-2">
+          {isEditable && userData.authority !== 'USER' && (
+            <Button variant="outline" onClick={() => setShowAddPanelForm(true)}>
+              <ChartLine className="mr-2 h-4 w-4" /> Add Panel
+            </Button>
+          )}
           {isEditable && userData.authority !== 'USER' && (
             <Button variant="outline" onClick={() => navigate(`/app/dashboards/edit/${id}`)}>
               <Edit className="mr-2 h-4 w-4" /> Edit
@@ -177,6 +198,7 @@ export function DashboardDetails() {
                   <CardHeader>
                     <div className="flex items-center justify-between">
                       <div>
+                        <CardTitle>{panel.title}</CardTitle>
                         {panel.description && <CardDescription>{panel.description}</CardDescription>}
                       </div>
                       <Badge variant="outline">{panel.type}</Badge>
@@ -589,6 +611,14 @@ export function DashboardDetails() {
           </TabsContent>
         </Tabs>
       )}
+
+      {showAddPanelForm && (
+        <AddPanelForm 
+          dashboardUid={uid}
+          onClose={() => setShowAddPanelForm(false)}
+          onSuccess={handlePanelAdded}
+        />
+      )}
     </Page>
   );
 }

From d6d4c7695912c1f63b950a4fc4a2a518faed8eed Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Mon, 21 Apr 2025 16:35:17 +0200
Subject: [PATCH 05/24] feat(multi-step): added catalog recovery

---
 public/favicon.ico                            | Bin 3890 -> 1150 bytes
 .../catalog/CatalogControlsStep.jsx           |  92 +++++--
 src/forms/control/new/form.jsx                |  15 ++
 src/pages/app/catalog/CatalogDetails.jsx      |   4 +-
 src/pages/app/catalog/CatalogWizard.jsx       | 231 ++++++++++++++++--
 src/pages/app/catalog/Catalogs.jsx            | 178 +++++++++++---
 src/services/catalogs.js                      |  17 +-
 src/services/controls.js                      |  35 ++-
 src/styles/index.css                          |   4 +-
 src/utils/draftStorage.js                     |  85 +++++++
 10 files changed, 557 insertions(+), 104 deletions(-)
 create mode 100644 src/utils/draftStorage.js

diff --git a/public/favicon.ico b/public/favicon.ico
index 14593e760c135454b37d8d3d6e8b48820e4a08cd..1f6963f9fd5d06892467bc5905201db91181e698 100644
GIT binary patch
literal 1150
zcmbu9+fNfg6vo%YKY%A6Oi)BI5PdX3ML@hnQBjPT7-#^Mi-6G3kRpOoq@oeI7zC7H
zyiy;y`9Mrn=(a$yz!ne!tx_qJmJqHL3j(El?(9kxcp}bb=FIud_nSG%CPPu1*w4j<
zVplin+GdK{LQ#|_J6VZUc%2Ot#n#pi{O7RE*uki$(A+Qq^#&&KGc8k)*N!5<Qw1M)
z8h##19NNiGUp5lWch}$Cf42%mCqADYG>&*RqUxm?`?o1@m^~v~q(kh54n&@Ahu}mT
zGKGBzJKl!yz;;BR*FqfKgT$~d<cRe+x~CBbw$rG7#q-DZHlje%kK~9ikf!KxIf&uo
z89oXHUAS_VL1t1f9;AOofR~EnYbz}9c2!{C)&{mGB@VjLAbpaviB2?s4;80-yV6{*
zKJH4+Px>A<&f#h90Pf%FL$XMX!mNIzr?f(nsztu!8-xi8JiM((wzvZ~h0Q3uV}Lkb
ziF;|?D9amg{=FabHq;xnT;5~R!7ygT^71m|oeC`27hxVXp;O0j_0LQbCZ{KyEZJE9
z<;{d2<oJ^666BUkQ6+y1ZEx!zz8RBKJip{vLVeo@wDf7%`#ZRL56cgX4`FnC1fimH
zh!kJMsjGgF7H7aZGYySa?c^607f@PLgoqpgp3yR%x9DM<97cVM9G65vT<=ZoG(wYu
zA-Wrf$~qbJhF;k1cFsRLKZ}Y_uMwLUg&I{QGzNyd|FJ9|DY*%-FY&(brhX)5MIj{a
zBqRklFk~@uJXwfG)vbi6REVVF>yR~6ASOE;Z|a^qJ!I3Z??gy^AiRUU@a|*fsv1d5
zV<wcpFGJF!cw{_D#mKm2mB%zPh!@pmh)EMbT9mP>wvsp;4p@Iq!}iOzBCU(IIU9z|
O#&!Beg|+X&M)ThQoir){

literal 3890
zcmeHK=~Giz6i@$w_FHFawc2GYptUW^rj`hZB_I$YQFcVYC5j6ODy0hIF4_^?9grDk
zaHv9SDW!lcc|af_C?o_Biqr}yU|6gK2;tXzFC|hM7C&e|)SEdk=iPhG`JMAS=Ve}a
zytl|_-W(pi@@Buo<Gst{@r;PfBeIkT-KQ)1Z65FAMWezt$OZrL>g^svgW?%f_xfI$
zJZ{xsWW;cx;ej=<Tfo8A<kg6cF$Z6Va<nu(H<-YRPo*$>KOg3^N5yJx0jP}M8#|l$
zO>HcRt>p*#%%18?=l$E4#^Z824dWY0_1JcVgNR@SVs@&qW_c+b7Z+pw>I!TWRl?!R
zVz^q#5U~0Vf`yfgGp8jbh~A;Xf$g<$wUl9}Up4df6I8I67IX4JW$B00<B!=no0lLq
ztPZ<3)L`w3GVIx?K#12}T#jo-(wPS=ADSP{joJi}TqNu6Vi&>w`tu@01SxPNq8{di
zo0q|-+&Y>TBmPhmi)%~zw$4_Ly_*!U|Evh7_TR^eZyLa#FU7&oI%Z3`@*p;}-l(lg
zoQ!Hf<Q65INNzOVjPObS$NDND_%sIPk;Xi_ryf^MH8cHicpdg_Rx<9dCbVFGNG-nI
zRtpj76U`xXeKo6_&a;s8X(GNf+i?F^lG$JUULKar8Wmc%fb^O_zmW0i@I^6fj5yXq
zI$Lx`1Z0nLO>Jn6R&xv4%zpJrA>(D)M};t(m9LLU{bU7Q2InvNYzsEKS0UJ~5`n@y
za9o*<^)BVC&R}5`*4XF4L%@;qQ5zp88CLVNSl?;ygNTodbtVFw<;;ifiEVGg!@hvb
zZ56YlJgU2f4C3o_fTn*K{m+Nd-KW6`?k3uv_CWJohd~XHF3$m1Tgmi+{t+mfe?$DO
zWM)r&`g#X&G36p!+dD`c;xhnbW@n**<CsouwAx92d?sWxpdG|%`3<Nw&-5o5)j5zi
zSLyGY+8^M2)>ZwzRy%~mwDWk{^Mc>p!e3BQ&gpGts>~GsWLg61nv`gL@&^V;!HH=X
zUK_sZfeJ3$9k9~h0wT#OoK8B5lZmlV_deB^`Lgww))b>$SqhDIfbf5FO8yhB#lcc+
z0*Aomu<=;}Gm#OTg80ajWkW}YiL95wZ+KXbfLJehMv3ra(GNHwyN>Qj`roPUfJdk^
z_&%n{DIq<s;;<>o7nbe|VDE2*<h08e92!KfG>i0Ks^?=Wh4OYT?F>Yb&Tx-%fg~{;
z9epomY5e?EC`!TiHHCM$5bD3@t&8MDd%*WJ#WL|C9KRHU)LYk3R8|00qY~O-?NspW
zOhX>D8-=OxJK_oPej(znA46;BBX%|(KP596W^0XbAR$7}H8r9&r)Q_aaf3Ci)+~f;
zkR38|({cPl4B9)|Se)rD!@6M<DL8~ANFa`OL)f_;kgH0OUYV(X{-Q7JgQeF(&^#ut
z5%PjjQYppS5GPoOOyCjX495U#+%EogqUn_Pjji`_I3*Syhs5wd>J7<R2{PnAL)EN=
zSEL962_MxBcPEWeQBwx@tpZrMnZR6VjDzu!|KMs;$8iTefA-*eE)`qOY=rv(A-rP5
z@QqoARokqwH+~oTHHP118e8hwEI0?-5PV~XFWR&UkJ=xOi#{_|H=;vhYa<e~u3+cc
zZSX(jiLm(XjEBi0&{=!j*#@p6AKxV%ga2+Z?7S`TQ*PR1F4OMQJk)(^JbdyydI>Kx
hU34CL`npkGU5fI1vYEQQv3tY7|B8XJ|Dmt*`!6FXL*W1b

diff --git a/src/components/catalog/CatalogControlsStep.jsx b/src/components/catalog/CatalogControlsStep.jsx
index c26f732c..9beb1dbb 100644
--- a/src/components/catalog/CatalogControlsStep.jsx
+++ b/src/components/catalog/CatalogControlsStep.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Loader2, ArrowRight, Plus, Trash, Edit, AlertCircle, ExternalLink } from 'lucide-react';
 import { 
@@ -9,7 +9,7 @@ import {
 } from '@/components/ui/card';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { NewControlForm } from '@/forms/control/new/form';
-import { getDraftControlsByCatalogId, deleteControl, createDraftControl } from '@/services/controls';
+import { getControlsByCatalogId, deleteControl, createDraftControl } from '@/services/controls';
 import { createScopeSet } from '@/services/scopes';
 import { toast } from 'sonner';
 import {
@@ -21,6 +21,7 @@ import {
 } from '@/components/ui/dialog';
 import { getScopeSetsByControlId } from '@/services/scopes';
 import { Badge } from '@/components/ui/badge';
+import { saveDraftControlId, saveDraftControlIds, saveDraftCatalogId, initializeControlIdsStorage } from '@/utils/draftStorage';
 
 export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit, isSubmitting, apiError = null }) {
   const [controls, setControls] = useState([]);
@@ -30,18 +31,31 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
   const [submitError, setSubmitError] = useState(null);
   const [currentControl, setCurrentControl] = useState(null);
   const [confirmingDelete, setConfirmingDelete] = useState(false);
+  const initialFetchCompleted = useRef(false);
 
   const nodeRedUrl = import.meta.env.VITE_NODE_RED_URL || 'http://localhost:1880';
 
-  // Load draft controls when component mounts or catalogId changes
+  // Save catalogId to localStorage and initialize controls storage
   useEffect(() => {
-    if (catalogId) {
-      fetchDraftControls();
-    } else if (initialControls.length > 0) {
-      // If no catalogId but initialControls exist, use them
+    // Ensure the control_draft_ids key exists in localStorage
+    initializeControlIdsStorage();
+    
+    if (initialControls && initialControls.length > 0) {
       setControls(initialControls);
+      
+      // Save control IDs to localStorage
+      const controlIds = initialControls.map(control => control.id).filter(Boolean);
+      if (controlIds.length > 0) {
+        saveDraftControlIds(controlIds);
+      }
+    }
+    else if (catalogId && !initialFetchCompleted.current) {
+      saveDraftCatalogId(catalogId);
+      fetchDraftControls();
+      initialFetchCompleted.current = true;
     }
-  }, [catalogId, initialControls]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [catalogId]);
 
   // Update error message when API error changes
   useEffect(() => {
@@ -55,16 +69,28 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
     
     setIsLoading(true);
     try {
-      const response = await getDraftControlsByCatalogId(catalogId);
+      const response = await getControlsByCatalogId(catalogId, 'draft');
+      
+      // Handle case where the response is empty or undefined
+      if (!response || response.length === 0) {
+        setControls([]);
+        // Save an empty array to localStorage to indicate we've fetched controls (even if empty)
+        saveDraftControlIds([]);
+        setIsLoading(false);
+        return;
+      }
+      
       const controlsWithScopesData = await Promise.all(
         response.map(async (control) => {
           try {
             const scopeResponse = await getScopeSetsByControlId(control.id);
             return {
               ...control,
-              scopes: scopeResponse.reduce((acc, scopeSet) => {
-                return { ...acc, ...scopeSet.scopes };
-              }, {})
+              scopes: scopeResponse && scopeResponse.length > 0 
+                ? scopeResponse.reduce((acc, scopeSet) => {
+                  return { ...acc, ...scopeSet.scopes };
+                }, {})
+                : {}
             };
           } catch (error) {
             console.error(`Error fetching scopes for control ${control.id}:`, error);
@@ -72,10 +98,21 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
           }
         })
       );
+      
       setControls(controlsWithScopesData);
+      
+      // Save control IDs to localStorage
+      const controlIds = controlsWithScopesData.map(control => control.id).filter(Boolean);
+      if (controlIds.length > 0) {
+        saveDraftControlIds(controlIds);
+      } else {
+        // Initialize with empty array if no controls
+        saveDraftControlIds([]);
+      }
     } catch (error) {
       console.error('Error fetching draft controls:', error);
       toast.error('Failed to load draft controls');
+      setControls([]);
     } finally {
       setIsLoading(false);
     }
@@ -91,10 +128,24 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
 
   const handleCustomSubmit = async (data) => {
     try {
+      // Make sure the catalog ID is included in the control data
+      if (catalogId) {
+        data.catalogId = catalogId;
+        // Save catalog ID to localStorage again for safety
+        saveDraftCatalogId(catalogId);
+        // Ensure control_draft_ids is initialized
+        initializeControlIdsStorage();
+      }
+      
       let scopeSet = { scopes: {} };
       // Use createDraftControl specifically in the catalog context
       const createdControl = await createDraftControl(data);
       
+      // Save the new control ID to localStorage
+      if (createdControl && createdControl.id) {
+        saveDraftControlId(createdControl.id);
+      }
+      
       // Create the scope set if needed
       if (Object.keys(data.scopes).length > 0) {
         const scopeSetData = {
@@ -119,7 +170,7 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
       try {
         // Fetch the updated list of controls
         if (catalogId) {
-          const response = await getDraftControlsByCatalogId(catalogId);
+          const response = await getControlsByCatalogId(catalogId, 'draft');
           const controlsWithScopesData = await Promise.all(
             response.map(async (control) => {
               try {
@@ -195,6 +246,16 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
       return;
     }
     
+    // Save control IDs and catalog ID to localStorage before submitting
+    const controlIds = controls.map(control => control.id).filter(Boolean);
+    if (controlIds.length > 0) {
+      saveDraftControlIds(controlIds);
+    }
+    
+    if (catalogId) {
+      saveDraftCatalogId(catalogId);
+    }
+    
     onSubmit(controls);
   };
 
@@ -226,9 +287,6 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
       {/* Empty state with helpful message */}
       {!isLoading && controls.length === 0 && (
         <div className="mb-6 border border-gray-300 rounded-lg border-dashed bg-gray-50 p-8 text-center">
-          <div className="mx-auto mb-4 h-12 w-12 flex items-center justify-center rounded-full">
-            <Plus className="text-black-500 h-6 w-6" />
-          </div>
           <h3 className="mb-1 text-lg text-gray-900 font-medium">No draft controls yet</h3>
           <p className="mb-4 text-gray-500">Add draft controls to define what to monitor in your catalog</p>
         </div>
@@ -283,8 +341,6 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
               <CardContent className="p-4 pt-2">
                 <p className="text-sm">{control.description}</p>
                 
-                {/* Añadimos la visualización de scopes con badges */}
-                {console.log(control)}
                 
                 
                 <div className="grid mt-2 gap-1 text-xs text-gray-500">
diff --git a/src/forms/control/new/form.jsx b/src/forms/control/new/form.jsx
index d48aeda8..fff42068 100644
--- a/src/forms/control/new/form.jsx
+++ b/src/forms/control/new/form.jsx
@@ -18,6 +18,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { cn } from '@/lib/utils';
 import { format } from 'date-fns';
 import { controlSchema } from './schemas';
+import { saveDraftCatalogId } from '@/utils/draftStorage';
 
 export function NewControlForm({ catalogId, onClose, onSuccess, customSubmit = null }) {
   const [loading, setLoading] = useState(false);
@@ -139,10 +140,24 @@ export function NewControlForm({ catalogId, onClose, onSuccess, customSubmit = n
     setValue('params', updatedParams);
   };
 
+  useEffect(() => {
+    // Si se proporciona un catalogId, asegúrate de guardarlo
+    if (catalogId) {
+      saveDraftCatalogId(catalogId);
+    }
+  }, [catalogId]);
+
   const onSubmit = async (data) => {
     setLoading(true);
   
     try {
+      // Guardar catalogId si está disponible
+      if (catalogId) {
+        saveDraftCatalogId(catalogId);
+        // Asegúrate de que el control esté asociado al catálogo
+        data.catalogId = catalogId;
+      }
+
       // If customSubmit is provided, use it instead of the default submit behavior
       if (customSubmit) {
         const result = await customSubmit(data);
diff --git a/src/pages/app/catalog/CatalogDetails.jsx b/src/pages/app/catalog/CatalogDetails.jsx
index f4f0df19..82d27374 100644
--- a/src/pages/app/catalog/CatalogDetails.jsx
+++ b/src/pages/app/catalog/CatalogDetails.jsx
@@ -131,8 +131,8 @@ export function CatalogDetails() {
   const fetchControls = async () => {
     setLoading(true);
     try {
-      const response = await getControlsByCatalogId(params.id);
-      response.forEach(control => control.result = control.name.includes('i'));
+      const response = await getControlsByCatalogId(params.id, 'finalized');
+      response.forEach(control => control.result = control.name.includes('i')); // TODO: This logic is just for testing, it must be replaced by its corresponding feature in the backend
       setControls(response);
       fetchScopesForControls(response);
     } catch (error) {
diff --git a/src/pages/app/catalog/CatalogWizard.jsx b/src/pages/app/catalog/CatalogWizard.jsx
index 4fc77601..e8b12bde 100644
--- a/src/pages/app/catalog/CatalogWizard.jsx
+++ b/src/pages/app/catalog/CatalogWizard.jsx
@@ -1,14 +1,33 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Check, ArrowLeft, ArrowRight, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 import Page from '@/components/basic-page.jsx';
-import { createDraftCatalog, updateCatalog, getCatalogById } from '@/services/catalogs';
+import { createDraftCatalog, updateCatalog, getCatalogById, deleteCatalog } from '@/services/catalogs';
+import { getControlById, deleteControl } from '@/services/controls';
 import { CatalogInfoStep } from '@/components/catalog/CatalogInfoStep';
 import { CatalogControlsStep } from '@/components/catalog/CatalogControlsStep';
 import { CatalogDashboardStep } from '@/components/catalog/CatalogDashboardStep';
+import { 
+  getDraftCatalogId, 
+  getDraftControlIds, 
+  clearDraftData, 
+  hasDraftData,
+  saveDraftCatalogId,
+  initializeControlIdsStorage
+} from '@/utils/draftStorage';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 
 const isDev = !!import.meta.env.DEV;
 
@@ -33,31 +52,168 @@ export function CatalogWizard() {
     dashboardConfig: {}
   });
   const [apiError, setApiError] = useState(null);
+  const [showDraftDialog, setShowDraftDialog] = useState(false);
+  const [hasDrafts, setHasDrafts] = useState(false);
+  const initialFetchCompleted = useRef(false);
+  const controlsFetchCompleted = useRef(false);
 
-  // Fetch catalog data if editing
+  // Check for draft data on component mount
+  useEffect(() => {
+    // Initialize control_draft_ids storage
+    initializeControlIdsStorage();
+    
+    // Only check for drafts if we're not in edit mode
+    if (!isEditing) {
+      const draftExists = hasDraftData();
+      setHasDrafts(draftExists);
+      
+      // Ya no mostramos automáticamente el diálogo, ahora sólo verificamos si hay un borrador
+      if (draftExists) {
+        setHasDrafts(true);
+      }
+    }
+  }, [isEditing]);
+
+  // Fetch catalog data if editing or if we have a draft
   useEffect(() => {
     const fetchCatalog = async () => {
-      if (isEditing) {
-        try {
-          setLoading(true);
-          const response = await getCatalogById(id);
+      if (initialFetchCompleted.current) return;
+      
+      try {
+        setLoading(true);
+        let catalogResponse = null;
+        
+        if (isEditing) {
+          // Normal edit mode using URL parameter
+          catalogResponse = await getCatalogById(id);
+        } else if (hasDrafts && !showDraftDialog) {
+          // After user confirmed to continue with draft
+          const draftCatalogId = getDraftCatalogId();
+          if (draftCatalogId) {
+            catalogResponse = await getCatalogById(draftCatalogId);
+          }
+        }
+        
+        if (catalogResponse) {
           setCatalogData({
-            ...response.data,
-            controls: response.data.controls || [],
-            dashboardConfig: response.data.dashboardConfig || {}
+            ...catalogResponse,
+            controls: catalogResponse.controls || [],
+            dashboardConfig: catalogResponse.dashboardConfig || {}
           });
-        } catch (err) {
-          setError('Failed to load catalog data');
-          toast.error('Error loading catalog');
-          console.error('Error fetching catalog:', err);
-        } finally {
-          setLoading(false);
         }
+        
+        initialFetchCompleted.current = true;
+      } catch (err) {
+        setError('Failed to load catalog data');
+        toast.error('Error loading catalog');
+        console.error('Error fetching catalog:', err);
+      } finally {
+        setLoading(false);
       }
     };
 
-    fetchCatalog();
-  }, [id, isEditing]);
+    if ((isEditing || (hasDrafts && !showDraftDialog)) && !loading && !initialFetchCompleted.current) {
+      fetchCatalog();
+    }
+  }, [id, isEditing, hasDrafts, showDraftDialog, loading]);
+
+  // Fetch draft controls if we have them
+  useEffect(() => {
+    const fetchDraftControls = async () => {
+      if (controlsFetchCompleted.current) return;
+      
+      try {
+        setLoading(true);
+        const controlIds = getDraftControlIds();
+        
+        if (controlIds && controlIds.length > 0) {
+          const controls = [];
+          
+          for (const controlId of controlIds) {
+            try {
+              const control = await getControlById(controlId);
+              if (control) {
+                controls.push(control);
+              }
+            } catch (err) {
+              console.error(`Error fetching control with ID ${controlId}:`, err);
+            }
+          }
+          
+          if (controls.length > 0) {
+            setCatalogData(prev => ({
+              ...prev,
+              controls
+            }));
+            
+            if (hasDrafts && !showDraftDialog) {
+              setCurrentStep(1); // Controls step - Changed from Dashboard step (2)
+            }
+          } else if (hasDrafts && !showDraftDialog) {
+            setCurrentStep(1);
+          }
+        } else if (hasDrafts && !showDraftDialog) {
+          setCurrentStep(1);
+        }
+        
+        controlsFetchCompleted.current = true;
+      } catch (err) {
+        console.error('Error fetching draft controls:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    
+    if (!isEditing && hasDrafts && !showDraftDialog && !controlsFetchCompleted.current) {
+      fetchDraftControls();
+    }
+  }, [isEditing, hasDrafts, showDraftDialog]);
+
+  const handleContinueDraft = () => {
+    setShowDraftDialog(false);
+  };
+
+  const handleDiscardDraft = async () => {
+    try {
+      setLoading(true);
+      
+      // Delete catalog draft if it exists
+      const draftCatalogId = getDraftCatalogId();
+      if (draftCatalogId) {
+        try {
+          await deleteCatalog(draftCatalogId);
+        } catch (err) {
+          console.error('Error deleting draft catalog:', err);
+        }
+      }
+      
+      // Delete control drafts if they exist
+      const controlIds = getDraftControlIds();
+      for (const controlId of controlIds) {
+        try {
+          await deleteControl(controlId);
+        } catch (err) {
+          console.error(`Error deleting draft control ${controlId}:`, err);
+        }
+      }
+      
+      // Clear localStorage
+      clearDraftData();
+      
+      // Reset state and navigate back to catalogs list
+      setHasDrafts(false);
+      setShowDraftDialog(false);
+      
+      navigate('/app/catalogs');
+      
+      toast.success('Draft catalog discarded');
+    } catch (err) {
+      toast.error('Error discarding draft catalog');
+      console.error('Error discarding draft:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
 
   const goToNextStep = () => {
     setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
@@ -75,6 +231,14 @@ export function CatalogWizard() {
       // If first step and not editing, create new catalog
       if (currentStep === 0 && !isEditing) {
         const response = await createDraftCatalog(catalogInfo);
+        
+        // Here we'll save the catalog ID immediately after creation
+        if (response && response.id) {
+          // Initialize localStorage storage
+          saveDraftCatalogId(response.id);
+          initializeControlIdsStorage();
+        }
+        
         setCatalogData({
           ...response,
           controls: [],
@@ -123,6 +287,9 @@ export function CatalogWizard() {
       
       if (isEditing) {
         await updateCatalog(id, { controls });
+      } else if (catalogData && catalogData.id) {
+        // Save catalog ID again for non-editing mode
+        saveDraftCatalogId(catalogData.id);
       }
       
       setCatalogData(updatedData);
@@ -165,6 +332,9 @@ export function CatalogWizard() {
       setCatalogData(updatedData);
       toast.success('Catalog created successfully');
       
+      // Clear draft data on successful completion
+      clearDraftData();
+      
       // Navigate back to catalogs list
       navigate('/app/catalogs');
     } catch (err) {
@@ -205,6 +375,7 @@ export function CatalogWizard() {
           onSubmit={handleControlsSubmit} 
           isSubmitting={loading}
           apiError={apiError}
+          key={`controls-${isEditing ? id : catalogData.id}`}
         />
       );
     case 2:
@@ -225,6 +396,26 @@ export function CatalogWizard() {
 
   return (
     <Page name={isEditing ? 'Edit Catalog' : 'Create New Catalog'} className="h-full w-full">
+      {/* Draft Recovery Dialog */}
+      <AlertDialog open={showDraftDialog} onOpenChange={setShowDraftDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Unfinished Catalog Found</AlertDialogTitle>
+            <AlertDialogDescription>
+              We found a catalog that you started creating but didn&apos;t finish. Would you like to continue where you left off?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={handleDiscardDraft} disabled={loading}>
+              {loading ? 'Discarding...' : 'Discard Draft'}
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={handleContinueDraft}>
+              Continue Draft
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
       {/* Stepper */}
       <div className="mb-8">
         <div className="flex items-center justify-center">
@@ -236,7 +427,7 @@ export function CatalogWizard() {
                   index < currentStep
                     ? 'bg-chart-1 border-chart-1 text-white'
                     : index === currentStep
-                      ? 'border-sidebar-accent text-sidebar-accent'
+                      ? 'border-chart-5 text-chart-5'
                       : 'border-gray-300 text-gray-300'
                 }`}
               >
@@ -275,7 +466,7 @@ export function CatalogWizard() {
       {/* Step content */}
       <Card>
         <CardContent className="pt-6">
-          {loading && currentStep === 0 ? (
+          {loading && (showDraftDialog || (currentStep === 0 && (isEditing || hasDrafts))) ? (
             <div className="h-60 flex items-center justify-center">
               <Loader2 className="h-8 w-8 animate-spin" />
             </div>
diff --git a/src/pages/app/catalog/Catalogs.jsx b/src/pages/app/catalog/Catalogs.jsx
index 8ca166df..36abaa06 100644
--- a/src/pages/app/catalog/Catalogs.jsx
+++ b/src/pages/app/catalog/Catalogs.jsx
@@ -40,6 +40,8 @@ import {
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { CatalogForm } from '@/forms/catalog/forms';
 import { useAuth } from '@/hooks/use-auth';
+import { hasDraftData, getDraftCatalogId, getDraftControlIds, clearDraftData } from '@/utils/draftStorage';
+import { deleteControl } from '@/services/controls';
 
 const columnHelper = createColumnHelper();
 
@@ -52,6 +54,7 @@ export function Catalogs() {
   const [globalFilter, setGlobalFilter] = useState('');
   const [rowSelection, setRowSelection] = useState({});
   const [formErrors, setFormErrors] = useState({});
+  const [showDraftDialog, setShowDraftDialog] = useState(false);
   const navigate = useNavigate();
   const { userData } = useAuth();
 
@@ -63,7 +66,7 @@ export function Catalogs() {
   const fetchCatalogs = async () => {
     try {
       setLoading(true);
-      const response = await getAllCatalogs();
+      const response = await getAllCatalogs('finalized');
       setCatalogs(response);
       setError(null);
     } catch (err) {
@@ -81,9 +84,60 @@ export function Catalogs() {
   }, []);
 
   const handleNew = useCallback(() => {
-    navigate('/app/catalogs/new');
+    // Check if there's a draft catalog
+    if (hasDraftData()) {
+      setShowDraftDialog(true);
+    } else {
+      // No draft, proceed directly to the wizard
+      navigate('/app/catalogs/new');
+    }
   }, [navigate]);
 
+  const handleContinueDraft = () => {
+    setShowDraftDialog(false);
+    navigate('/app/catalogs/new');
+  };
+
+  const handleDiscardDraft = async () => {
+    try {
+      setLoading(true);
+      
+      // Delete catalog draft if it exists
+      const draftCatalogId = getDraftCatalogId();
+      if (draftCatalogId) {
+        try {
+          await deleteCatalog(draftCatalogId);
+        } catch (err) {
+          console.error('Error deleting draft catalog:', err);
+        }
+      }
+      
+      // Delete control drafts if they exist
+      const controlIds = getDraftControlIds();
+      for (const controlId of controlIds) {
+        try {
+          await deleteControl(controlId);
+        } catch (err) {
+          console.error(`Error deleting draft control ${controlId}:`, err);
+        }
+      }
+      
+      // Clear localStorage
+      clearDraftData();
+      
+      // Reset state
+      setShowDraftDialog(false);
+      toast.success('Draft catalog discarded');
+      
+      // No navigation - we stay on the catalogs page
+      setLoading(false);
+    } catch (err) {
+      toast.error('Error discarding draft catalog');
+      console.error('Error discarding draft:', err);
+      setLoading(false);
+    }
+  };
+
   const handleDeleteConfirm = useCallback((catalog) => {
     setCatalogToDelete(catalog);
   }, []);
@@ -105,6 +159,34 @@ export function Catalogs() {
     }
   }, [catalogs, catalogToDelete]);
 
+  const handleDeleteSelected = useCallback(async () => {
+    try {
+      setLoading(true);
+      
+      const selectedIds = Object.keys(rowSelection).map(index => catalogs[parseInt(index)].id);
+      
+      if (selectedIds.length === 0) {
+        toast.error('No catalogs selected');
+        return;
+      }
+      
+      for (const id of selectedIds) {
+        await deleteCatalog(id);
+      }
+      
+      setCatalogs(catalogs.filter(catalog => !selectedIds.includes(catalog.id)));
+      
+      setRowSelection({});
+      
+      toast.success(`${selectedIds.length} catalog${selectedIds.length > 1 ? 's' : ''} deleted successfully`);
+    } catch (err) {
+      toast.error('Failed to delete selected catalogs');
+      console.error('Error deleting catalogs:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [catalogs, rowSelection]);
+
   const handleCatalogUpdate = async (catalogData) => {
     try {
       if (!catalogData.name.trim() || !catalogData.description.trim()) {
@@ -256,6 +338,9 @@ export function Catalogs() {
     },
   });
 
+  // Calcular si hay alguna fila seleccionada
+  const hasSelection = Object.keys(rowSelection).length > 0;
+
   return (
     <Page name="Catalogs" className="h-full w-full">
       <div className="flex items-center justify-between gap-x-4">
@@ -265,36 +350,47 @@ export function Catalogs() {
           onChange={(e) => setGlobalFilter(e.target.value)}
           className="max-w-sm"
         />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="ml-auto">
-              Columns <ChevronDown className="ml-2 h-4 w-4" />
+        <div className="flex items-center space-x-2">
+          {userData.authority !== 'USER' && (
+            <Button 
+              variant="destructive" 
+              onClick={handleDeleteSelected}
+              disabled={!hasSelection || loading}
+            >
+              <Trash className="h-4 w-4" />
             </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {table
-              .getAllColumns()
-              .filter((column) => column.getCanHide())
-              .map((column) => {
-                return (
-                  <DropdownMenuItem key={column.id} className="capitalize">
-                    <Checkbox
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) => column.toggleVisibility(!!value)}
-                    />
-                    <span className="ml-2">{column.id === 'dashboard_id' ? 'Dashboard' : column.id}</span>
-                  </DropdownMenuItem>
-                );
-              })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <Button 
-          className="border-2 border-sidebar-accent bg-sidebar-accent hover:bg-secondary hover:text-sidebar-accent"
-          onClick={handleNew}
-          userRole={userData.authority}
-        >
-          <Plus className="mr-2 h-4 w-4" /> Add New Catalog
-        </Button>
+          )}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="ml-auto">
+                Columns <ChevronDown className="ml-2 h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuItem key={column.id} className="capitalize">
+                      <Checkbox
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                      />
+                      <span className="ml-2">{column.id === 'dashboard_id' ? 'Dashboard' : column.id}</span>
+                    </DropdownMenuItem>
+                  );
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Button 
+            className="border-2 border-sidebar-accent bg-sidebar-accent hover:bg-secondary hover:text-sidebar-accent"
+            onClick={handleNew}
+            userRole={userData.authority}
+          >
+            <Plus className="mr-2 h-4 w-4" /> Add New Catalog
+          </Button>
+        </div>
       </div>
       
       {error && (
@@ -398,6 +494,26 @@ export function Catalogs() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+      
+      {/* Draft Dialog */}
+      <AlertDialog open={showDraftDialog} onOpenChange={setShowDraftDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Unfinished Catalog Found</AlertDialogTitle>
+            <AlertDialogDescription>
+              We found a catalog that you started creating but didn&apos;t finish. Would you like to continue where you left off?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={handleDiscardDraft} disabled={loading}>
+              {loading ? 'Discarding...' : 'Discard Draft'}
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={handleContinueDraft}>
+              Continue Draft
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Page>
   );
 }
diff --git a/src/services/catalogs.js b/src/services/catalogs.js
index 12061d9e..d2b3be64 100644
--- a/src/services/catalogs.js
+++ b/src/services/catalogs.js
@@ -2,10 +2,15 @@ import { apiClient } from '@/api/apiClient';
 
 /**
  * Gets all catalogs
+ * @param {string} status - Optional status filter ('finalized' or 'draft')
  * @returns {Promise} - Promise with the list of catalogs
  */
-export function getAllCatalogs() {
-  return apiClient.get('/catalogs');
+export function getAllCatalogs(status = null) {
+  let url = '/catalogs';
+  if (status) {
+    url += `?status=${encodeURIComponent(status)}`;
+  }
+  return apiClient.get(url);
 }
 
 /**
@@ -60,14 +65,6 @@ export function getPointsByTpaId(tpaId, from = null, to = null) {
   return apiClient.get(`/catalogs/${tpaId}/points`, params);
 }
 
-/**
- * Gets all draft catalogs
- * @returns {Promise} - Promise with the list of draft catalogs
- */
-export function getDraftCatalogs() {
-  return apiClient.get('/catalogs/drafts');
-}
-
 /**
  * Creates a new draft catalog
  * @param {object} catalogData - Catalog data
diff --git a/src/services/controls.js b/src/services/controls.js
index e794c4d6..1c96134d 100644
--- a/src/services/controls.js
+++ b/src/services/controls.js
@@ -2,10 +2,15 @@ import { apiClient } from '@/api/apiClient';
 
 /**
  * Gets all controls
+ * * @param {string} status - Optional status filter ('finalized' or 'draft')
  * @returns {Promise} - Promise with the list of controls
  */
-export function getAllControls() {
-  return apiClient.get('/controls');
+export function getAllControls(status = null) {
+  let url = '/controls';
+  if (status) {
+    url += `?status=${encodeURIComponent(status)}`;
+  }
+  return apiClient.get(url);
 }
 
 /**
@@ -48,10 +53,15 @@ export function deleteControl(id) {
 /**
  * Gets all controls for a catalog
  * @param {string} catalogId - Catalog ID
+ * @param {string} status - Optional status filter ('finalized' or 'draft')
  * @returns {Promise} - Promise with the list of controls
  */
-export function getControlsByCatalogId(catalogId) {
-  return apiClient.get(`/catalogs/${catalogId}/controls`);
+export function getControlsByCatalogId(catalogId, status = null) {
+  let url = `/catalogs/${catalogId}/controls`;
+  if (status) {
+    url += `?status=${encodeURIComponent(status)}`;
+  }
+  return apiClient.get(url);
 }
 
 /**
@@ -122,23 +132,6 @@ export function deletePanelFromControl(controlId, panelId) {
   return apiClient.delete(`/controls/${controlId}/panels/${panelId}`);
 }
 
-/**
- * Gets all draft controls
- * @returns {Promise} - Promise with the list of draft controls
- */
-export function getDraftControls() {
-  return apiClient.get('/controls/drafts');
-}
-
-/**
- * Gets all draft controls for a specific catalog
- * @param {string} catalogId - Catalog ID
- * @returns {Promise} - Promise with the list of draft controls for the catalog
- */
-export function getDraftControlsByCatalogId(catalogId) {
-  return apiClient.get(`/controls/drafts/catalog/${catalogId}`);
-}
-
 /**
  * Creates a new draft control
  * @param {object} controlData - Control data
diff --git a/src/styles/index.css b/src/styles/index.css
index 8fecd78b..223aeb94 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -64,7 +64,7 @@ h1 {
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+    --chart-5: 0 0% 0%;
     --radius: 0.5rem;
     --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
@@ -100,7 +100,7 @@ h1 {
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --chart-5: 0 0% 0%;
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;
diff --git a/src/utils/draftStorage.js b/src/utils/draftStorage.js
new file mode 100644
index 00000000..c84e77d6
--- /dev/null
+++ b/src/utils/draftStorage.js
@@ -0,0 +1,85 @@
+/**
+ * Utility functions for managing catalog draft data in localStorage
+ */
+
+const CATALOG_DRAFT_KEY = 'catalog_draft_id';
+const CONTROLS_DRAFT_KEY = 'control_draft_ids';
+
+/**
+ * Saves a catalog draft ID to localStorage
+ * @param {string} catalogId - ID of the draft catalog
+ */
+export function saveDraftCatalogId(catalogId) {
+  if (catalogId) {
+    localStorage.setItem(CATALOG_DRAFT_KEY, catalogId);
+  }
+}
+
+/**
+ * Retrieves the draft catalog ID from localStorage
+ * @returns {string|null} - The catalog ID or null if not found
+ */
+export function getDraftCatalogId() {
+  return localStorage.getItem(CATALOG_DRAFT_KEY);
+}
+
+/**
+ * Saves a control draft ID to localStorage
+ * @param {string} controlId - ID of the draft control
+ */
+export function saveDraftControlId(controlId) {
+  if (!controlId) return;
+  
+  const existingControls = getDraftControlIds();
+  if (!existingControls.includes(controlId)) {
+    const updatedControls = [...existingControls, controlId];
+    localStorage.setItem(CONTROLS_DRAFT_KEY, JSON.stringify(updatedControls));
+  }
+}
+
+/**
+ * Retrieves all draft control IDs from localStorage
+ * @returns {Array<string>} - Array of control IDs
+ */
+export function getDraftControlIds() {
+  const controlsJson = localStorage.getItem(CONTROLS_DRAFT_KEY);
+  return controlsJson ? JSON.parse(controlsJson) : [];
+}
+
+/**
+ * Clears all draft data from localStorage
+ */
+export function clearDraftData() {
+  localStorage.removeItem(CATALOG_DRAFT_KEY);
+  localStorage.removeItem(CONTROLS_DRAFT_KEY);
+}
+
+/**
+ * Checks if there is any draft data in localStorage
+ * @returns {boolean} - True if draft data exists
+ */
+export function hasDraftData() {
+  const hasCatalog = !!getDraftCatalogId();
+  const hasControls = getDraftControlIds().length > 0;
+  return hasCatalog || hasControls;
+}
+
+/**
+ * Saves multiple control IDs at once
+ * @param {Array<string>} controlIds - Array of control IDs
+ */
+export function saveDraftControlIds(controlIds) {
+  if (!controlIds || !controlIds.length) return;
+  
+  const uniqueIds = [...new Set(controlIds)];
+  localStorage.setItem(CONTROLS_DRAFT_KEY, JSON.stringify(uniqueIds));
+}
+
+/**
+ * Initializes control IDs storage with an empty array if it doesn't exist
+ */
+export function initializeControlIdsStorage() {
+  if (!localStorage.getItem(CONTROLS_DRAFT_KEY)) {
+    localStorage.setItem(CONTROLS_DRAFT_KEY, JSON.stringify([]));
+  }
+}

From 1afe11908a58c12a4aed51d194202860eee44f79 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Wed, 14 May 2025 12:39:46 +0200
Subject: [PATCH 06/24] feat(catalog): added edit functionality

---
 src/forms/catalog/forms.jsx              | 92 +++++++++++++++++++++++-
 src/pages/app/catalog/CatalogDetails.jsx | 84 ++++++++++++++++++----
 src/services/catalogs.js                 | 12 ++--
 src/services/controls.js                 | 12 ++--
 4 files changed, 170 insertions(+), 30 deletions(-)

diff --git a/src/forms/catalog/forms.jsx b/src/forms/catalog/forms.jsx
index b4e7627e..63e171ea 100644
--- a/src/forms/catalog/forms.jsx
+++ b/src/forms/catalog/forms.jsx
@@ -3,19 +3,27 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { Loader2 } from 'lucide-react';
+import { Loader2, Calendar as CalendarIcon } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Calendar } from '@/components/ui/calendar';
+import { format } from 'date-fns';
+import { cn } from '@/lib/utils';
 
 export function CatalogForm({ catalog = {}, onSubmit, isSubmitting, errors = {} }) {
   const [formData, setFormData] = useState({
     name: '',
-    description: ''
+    description: '',
+    startDate: null,
+    endDate: null
   });
 
   useEffect(() => {
     if (catalog) {
       setFormData({
         name: catalog.name || '',
-        description: catalog.description || ''
+        description: catalog.description || '',
+        startDate: catalog.startDate ? new Date(catalog.startDate) : null,
+        endDate: catalog.endDate ? new Date(catalog.endDate) : null
       });
     }
   }, [catalog]);
@@ -28,6 +36,13 @@ export function CatalogForm({ catalog = {}, onSubmit, isSubmitting, errors = {}
     }));
   };
 
+  const handleDateChange = (date, field) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: date
+    }));
+  };
+
   const handleSubmit = (e) => {
     e.preventDefault();
     onSubmit(formData);
@@ -71,6 +86,77 @@ export function CatalogForm({ catalog = {}, onSubmit, isSubmitting, errors = {}
           <p className="mt-1 text-sm text-red-500">{errors.description}</p>
         )}
       </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="startDate" className="text-base font-medium">
+            Start Date
+          </Label>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                id="startDate"
+                variant="outline"
+                className={cn(
+                  'w-full justify-start text-left font-normal',
+                  !formData.startDate && 'text-muted-foreground',
+                  errors.startDate && 'border-red-500'
+                )}
+                disabled={isSubmitting}
+              >
+                <CalendarIcon className="mr-2 h-4 w-4" />
+                {formData.startDate ? format(formData.startDate, 'PPP') : 'Select start date'}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={formData.startDate}
+                onSelect={(date) => handleDateChange(date, 'startDate')}
+                initialFocus
+              />
+            </PopoverContent>
+          </Popover>
+          {errors.startDate && (
+            <p className="mt-1 text-sm text-red-500">{errors.startDate}</p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="endDate" className="text-base font-medium">
+            End Date
+          </Label>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                id="endDate"
+                variant="outline"
+                className={cn(
+                  'w-full justify-start text-left font-normal',
+                  !formData.endDate && 'text-muted-foreground',
+                  errors.endDate && 'border-red-500'
+                )}
+                disabled={isSubmitting}
+              >
+                <CalendarIcon className="mr-2 h-4 w-4" />
+                {formData.endDate ? format(formData.endDate, 'PPP') : 'Select end date'}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={formData.endDate}
+                onSelect={(date) => handleDateChange(date, 'endDate')}
+                initialFocus
+                disabled={(date) => formData.startDate && date < formData.startDate}
+              />
+            </PopoverContent>
+          </Popover>
+          {errors.endDate && (
+            <p className="mt-1 text-sm text-red-500">{errors.endDate}</p>
+          )}
+        </div>
+      </div>
       
       <div className="flex justify-end pt-4">
         <Button 
diff --git a/src/pages/app/catalog/CatalogDetails.jsx b/src/pages/app/catalog/CatalogDetails.jsx
index 82d27374..104aad90 100644
--- a/src/pages/app/catalog/CatalogDetails.jsx
+++ b/src/pages/app/catalog/CatalogDetails.jsx
@@ -52,6 +52,8 @@ import {
 import { Calendar } from '@/components/ui/calendar';
 import { format as formatDate } from 'date-fns';
 import { NewControlForm } from '@/forms/control/new/form';
+import { CatalogForm } from '@/forms/catalog/forms';
+import { updateCatalog } from '@/services/catalogs';
 
 const columnHelper = createColumnHelper();
 
@@ -70,6 +72,8 @@ export function CatalogDetails() {
   });
   const [selectedControls, setSelectedControls] = useState({});
   const [loading, setLoading] = useState(true);
+  const [formErrors, setFormErrors] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [showControlForm, setShowControlForm] = useState(false);
   const { userData } = useAuth();
   
@@ -334,8 +338,47 @@ export function CatalogDetails() {
   });
 
   const handleEditCatalog = () => {
-    // Implement edit functionality for catalog
-    toast.info('Edit catalog functionality not implemented yet.');
+    setEditingCatalog(true);
+    setFormErrors({});
+  };
+
+  const handleCatalogUpdate = async (catalogData) => {
+    try {
+      if (!catalogData.name.trim() || !catalogData.description.trim()) {
+        const errors = {};
+        if (!catalogData.name.trim()) errors.name = 'Catalog name is required';
+        if (!catalogData.description.trim()) errors.description = 'Description is required';
+        setFormErrors(errors);
+        return;
+      }
+
+      // Validar fechas
+      if (catalogData.startDate && catalogData.endDate && new Date(catalogData.endDate) < new Date(catalogData.startDate)) {
+        setFormErrors({ endDate: 'End date cannot be before start date' });
+        return;
+      }
+
+      setIsSubmitting(true);
+      // Preparar datos para la API (convertir objetos Date a strings ISO)
+      const apiData = {
+        ...catalogData,
+        startDate: catalogData.startDate ? catalogData.startDate.toISOString() : null,
+        endDate: catalogData.endDate ? catalogData.endDate.toISOString() : null
+      };
+
+      const updatedCatalog = await updateCatalog(catalog.id, apiData);
+      setCatalog({
+        ...catalog,
+        ...updatedCatalog
+      });
+      toast.success('Catalog updated successfully');
+      setEditingCatalog(false);
+    } catch (err) {
+      toast.error('Failed to update catalog');
+      console.error('Error updating catalog:', err);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   const handleDeleteControls = async () => {
@@ -389,19 +432,30 @@ export function CatalogDetails() {
               </Button>
             </CardHeader>
             <CardContent>
-              <p className="mb-2 text-gray-600">{catalog?.description || ''}</p>
-              <p className="text-sm">
-                Duration: {catalog?.startDate ? format(new Date(catalog.startDate), 'yyyy-MM-dd') : 'N/A'} to {catalog?.endDate ? format(new Date(catalog.endDate), 'yyyy-MM-dd') : 'N/A'}
-              </p>
-              {catalog?.dashboardId && (
-                <a
-                  href={`/app/dashboard/${catalog.dashboardId}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-600 hover:underline"
-                >
-                  View Dashboard
-                </a>
+              {editingCatalog ? (
+                <CatalogForm 
+                  catalog={catalog}
+                  onSubmit={handleCatalogUpdate}
+                  isSubmitting={isSubmitting}
+                  errors={formErrors}
+                />
+              ) : (
+                <>
+                  <p className="mb-2 text-gray-600">{catalog?.description || ''}</p>
+                  <p className="text-sm">
+                    Duration: {catalog?.startDate ? format(new Date(catalog.startDate), 'yyyy-MM-dd') : 'N/A'} to {catalog?.endDate ? format(new Date(catalog.endDate), 'yyyy-MM-dd') : 'N/A'}
+                  </p>
+                  {catalog?.dashboardId && (
+                    <a
+                      href={`/app/dashboard/${catalog.dashboardId}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-600 hover:underline"
+                    >
+                      View Dashboard
+                    </a>
+                  )}
+                </>
               )}
             </CardContent>
           </div>
diff --git a/src/services/catalogs.js b/src/services/catalogs.js
index d2b3be64..a18d2172 100644
--- a/src/services/catalogs.js
+++ b/src/services/catalogs.js
@@ -2,15 +2,15 @@ import { apiClient } from '@/api/apiClient';
 
 /**
  * Gets all catalogs
- * @param {string} status - Optional status filter ('finalized' or 'draft')
+ * @param {string} [status] - Optional status filter: 'draft' or 'finalized'
  * @returns {Promise} - Promise with the list of catalogs
  */
-export function getAllCatalogs(status = null) {
-  let url = '/catalogs';
-  if (status) {
-    url += `?status=${encodeURIComponent(status)}`;
+export function getAllCatalogs(status) {
+  const config = {};
+  if (status === 'draft' || status === 'finalized') {
+    config.params = { status };
   }
-  return apiClient.get(url);
+  return apiClient.get('/catalogs', config);
 }
 
 /**
diff --git a/src/services/controls.js b/src/services/controls.js
index 1c96134d..feafa9d6 100644
--- a/src/services/controls.js
+++ b/src/services/controls.js
@@ -2,15 +2,15 @@ import { apiClient } from '@/api/apiClient';
 
 /**
  * Gets all controls
- * * @param {string} status - Optional status filter ('finalized' or 'draft')
+ * @param {string} [status] - Optional status filter: 'draft' or 'finalized'
  * @returns {Promise} - Promise with the list of controls
  */
-export function getAllControls(status = null) {
-  let url = '/controls';
-  if (status) {
-    url += `?status=${encodeURIComponent(status)}`;
+export function getAllControls(status) {
+  const config = {};
+  if (status === 'draft' || status === 'finalized') {
+    config.params = { status };
   }
-  return apiClient.get(url);
+  return apiClient.get('/controls', config);
 }
 
 /**

From 1bf9f343f6e6ddd1bc5a36f6b4a0781c8c01b0e3 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Wed, 14 May 2025 15:52:42 +0200
Subject: [PATCH 07/24] refactor(dashboard): simplified panel model

---
 src/components/dashboard/dashboard-panel.jsx | 76 +++++++++++-----
 src/forms/dashboard/panel/form.jsx           | 92 ++++++++------------
 src/pages/app/dashboard/DashboardDetails.jsx |  3 +
 3 files changed, 96 insertions(+), 75 deletions(-)

diff --git a/src/components/dashboard/dashboard-panel.jsx b/src/components/dashboard/dashboard-panel.jsx
index 151f17ab..f7158de4 100644
--- a/src/components/dashboard/dashboard-panel.jsx
+++ b/src/components/dashboard/dashboard-panel.jsx
@@ -5,7 +5,7 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 const GRAFANA_URL = import.meta.env.VITE_GRAFANA_URL || 'http://localhost:3100';
 
-export function DashboardPanel({ dashboardUid, panel, height = 300, preview = false }) {
+export function DashboardPanel({ dashboardUid, panel, height = 300, preview = false, timeRange = null }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [iframeUrl, setIframeUrl] = useState('');
@@ -22,35 +22,43 @@ export function DashboardPanel({ dashboardUid, panel, height = 300, preview = fa
       let baseUrl;
       
       if (preview) {
-        // En modo preview usamos una URL especial si está disponible
-        baseUrl = `${GRAFANA_URL}/d-solo/preview`;
+        // En modo preview usamos una vista previa local en lugar de un iframe
+        setLoading(false);
+        return;
       } else {
         // URL normal para paneles existentes
         baseUrl = `${GRAFANA_URL}/d-solo/${dashboardUid}`;
       }
 
-      // Parámetros comunes para la URL de Grafana
+      // Preparar parámetros de tiempo para Grafana
+      let fromTime = 'now-6h';
+      let toTime = 'now';
+      
+      // Si se proporciona un rango de tiempo, úsalo
+      if (timeRange && timeRange.from && timeRange.to) {
+        // Si es un timestamp o fecha, conviértelo al formato ISO
+        if (typeof timeRange.from === 'object' && timeRange.from instanceof Date) {
+          fromTime = timeRange.from.toISOString();
+        } else {
+          fromTime = timeRange.from;
+        }
+        
+        if (typeof timeRange.to === 'object' && timeRange.to instanceof Date) {
+          toTime = timeRange.to.toISOString();
+        } else {
+          toTime = timeRange.to;
+        }
+      }
+
+      // Parámetros para la URL de Grafana
       const params = new URLSearchParams({
         orgId: 1,
         panelId: panel.id,
-        from: 'now-6h',
-        to: 'now',
+        from: fromTime,
+        to: toTime,
         theme: 'light',
       });
 
-      // Si es una preview, podemos añadir el panel y su configuración
-      if (preview) {
-        // Convertimos los datos del panel a un formato que Grafana pueda leer
-        // Esto dependerá de la API específica de tu backend
-        params.append('panelData', JSON.stringify({
-          type: panel.type,
-          title: panel.title,
-          description: panel.description,
-          options: panel.options,
-          rawSql: panel.rawSql
-        }));
-      }
-
       setIframeUrl(`${baseUrl}?${params.toString()}`);
     } catch (err) {
       console.error('Error creating panel URL:', err);
@@ -58,7 +66,7 @@ export function DashboardPanel({ dashboardUid, panel, height = 300, preview = fa
     } finally {
       setLoading(false);
     }
-  }, [dashboardUid, panel, preview]);
+  }, [dashboardUid, panel, preview, timeRange]);
 
   // Manejador para cuando el iframe termina de cargar
   const handleIframeLoad = () => {
@@ -83,6 +91,34 @@ export function DashboardPanel({ dashboardUid, panel, height = 300, preview = fa
     );
   }
 
+  // Vista previa local para paneles en modo preview
+  if (preview) {
+    return (
+      <div style={{ height: `${height}px` }} className="flex flex-col items-center justify-center border rounded-md bg-muted/10 p-4">
+        <div className="mb-4 text-center">
+          <h3 className="font-medium">{panel.title || 'Panel Preview'}</h3>
+          {panel.description && <p className="mt-1 text-sm text-muted-foreground">{panel.description}</p>}
+        </div>
+        <div className="h-[70%] w-full flex items-center justify-center">
+          <div className="max-w-md text-center text-sm text-muted-foreground">
+            <p className="mb-2">Vista previa del panel tipo: <strong>{panel.type}</strong></p>
+            {panel.rawSql && (
+              <div className="mt-4 text-left">
+                <p className="mb-1 font-medium">SQL Query:</p>
+                <pre className="max-h-[100px] overflow-auto rounded-md bg-muted p-2 text-xs">
+                  {panel.rawSql}
+                </pre>
+              </div>
+            )}
+            <p className="mt-4 text-xs">
+              Esta es una vista previa. El panel se visualizará correctamente cuando se añada al dashboard.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   // Si no hay panel o URL, mostrar un mensaje adecuado
   if (!panel || !iframeUrl) {
     return (
diff --git a/src/forms/dashboard/panel/form.jsx b/src/forms/dashboard/panel/form.jsx
index 6e26ff8c..e0b9faaa 100644
--- a/src/forms/dashboard/panel/form.jsx
+++ b/src/forms/dashboard/panel/form.jsx
@@ -29,18 +29,11 @@ const panelTypes = [
   { value: 'pie', label: 'Pie Chart' },
 ];
 
-// Available aggregation functions
-const aggregationFunctions = ['COUNT', 'SUM', 'AVG', 'MIN', 'MAX'];
-
 // Available operators for WHERE conditions
 const whereOperators = ['=', '>', '<', '>=', '<=', '<>', 'LIKE', 'IN', 'NOT IN'];
 
-// Hidden but still used by the form internally
 const tableAttributes = {
-  'Computations': ['id', 'name', 'status', 'created_at', 'updated_at', 'value'],
-  'Configurations': ['id', 'name', 'type', 'value', 'created_at'],
-  'Results': ['id', 'computation_id', 'value', 'status', 'created_at'],
-  'Metrics': ['id', 'name', 'value', 'timestamp']
+  'Points': ['id', 'agreementId', 'guaranteeId', 'guaranteeValue', 'guaranteeResult', 'timestamp', 'metrics', 'scope', 'computationGroup', 'createdAt', 'updatedAt']
 };
 
 export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
@@ -58,12 +51,12 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
       title: '',
       type: 'graph',
       description: '',
-      table: 'Computations', // Hidden from UI but kept for query building
+      table: 'Points',
       sqlQuery: {
-        aggregations: [{ func: 'COUNT', attr: 'id' }],
+        selectedFields: ['id', 'agreementId', 'guaranteeId', 'guaranteeValue', 'guaranteeResult', 'timestamp', 'metrics', 'scope', 'computationGroup'], // Todos los atributos excepto createdAt y updatedAt
         whereConditions: [],
         whereLogic: 'AND',
-        table: 'Computations'
+        table: 'Points'
       },
       showLegend: true,
       unit: '',
@@ -113,7 +106,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
   const generateSqlPreview = async () => {
     try {
       const queryData = getValues('sqlQuery');
-      if (queryData.aggregations.length === 0) return;
+      if (queryData.selectedFields.length === 0) return;
       
       setPreviewLoading(true);
       const response = await queriesService.buildSql(queryData);
@@ -176,20 +169,28 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
     }
   };
 
-  // Add an aggregation field
-  const addAggregation = () => {
-    const currentAggregations = getValues('sqlQuery.aggregations') || [];
-    setValue('sqlQuery.aggregations', [...currentAggregations, { func: 'COUNT', attr: tableAttributes[watchTable][0] }]);
+  // Add a field to select
+  const addField = () => {
+    const currentFields = getValues('sqlQuery.selectedFields') || [];
+    
+    const availableFields = tableAttributes[watchTable].filter(field => 
+      !currentFields.includes(field) && field !== 'createdAt' && field !== 'updatedAt'
+    );
+    if (availableFields.length > 0) {
+      setValue('sqlQuery.selectedFields', [...currentFields, availableFields[0]]);
+    } else {
+      toast.info('Todos los campos ya han sido seleccionados');
+    }
   };
 
-  // Remove an aggregation at the specified index
-  const removeAggregation = (index) => {
-    const currentAggregations = getValues('sqlQuery.aggregations') || [];
-    if (currentAggregations.length <= 1) {
-      toast.error('At least one aggregation is required');
+  // Remove a field at the specified index
+  const removeField = (index) => {
+    const currentFields = getValues('sqlQuery.selectedFields') || [];
+    if (currentFields.length <= 1) {
+      toast.error('Al menos un campo debe estar seleccionado');
       return;
     }
-    setValue('sqlQuery.aggregations', currentAggregations.filter((_, i) => i !== index));
+    setValue('sqlQuery.selectedFields', currentFields.filter((_, i) => i !== index));
   };
 
   // Add a WHERE condition
@@ -346,66 +347,47 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
                 <Card>
                   <CardContent className="pt-6">
                     <div className="space-y-4">
-                      {/* Aggregations Section */}
+                      {/* Fields Selection Section */}
                       <div className="space-y-2">
                         <div className="flex items-center justify-between">
-                          <FormLabel>Aggregations*</FormLabel>
+                          <FormLabel>Fields*</FormLabel>
                           <Button
                             type="button"
-                            onClick={addAggregation}
+                            onClick={addField}
                             variant="outline"
                             size="sm"
                           >
                             <PlusCircle className="mr-1 h-4 w-4" /> Add
                           </Button>
                         </div>
-                        {watchSqlQuery.aggregations?.map((agg, index) => (
+                        {watchSqlQuery.selectedFields?.map((fieldName, index) => (
                           <div key={index} className="flex flex-wrap items-center space-x-2">
                             <Select
-                              value={agg.func}
-                              onValueChange={(value) => {
-                                const updatedAggs = [...getValues('sqlQuery.aggregations')];
-                                updatedAggs[index].func = value;
-                                setValue('sqlQuery.aggregations', updatedAggs);
-                              }}
-                            >
-                              <SelectTrigger className="w-[110px]">
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {aggregationFunctions.map((func) => (
-                                  <SelectItem key={func} value={func}>
-                                    {func}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                            <span>(</span>
-                            <Select
-                              value={agg.attr}
+                              value={fieldName}
                               onValueChange={(value) => {
-                                const updatedAggs = [...getValues('sqlQuery.aggregations')];
-                                updatedAggs[index].attr = value;
-                                setValue('sqlQuery.aggregations', updatedAggs);
+                                const updatedFields = [...getValues('sqlQuery.selectedFields')];
+                                updatedFields[index] = value;
+                                setValue('sqlQuery.selectedFields', updatedFields);
                               }}
                             >
                               <SelectTrigger className="flex-1">
                                 <SelectValue />
                               </SelectTrigger>
                               <SelectContent>
-                                {tableAttributes[watchTable]?.map((attr) => (
+                                {tableAttributes[watchTable]?.filter(attr => 
+                                  attr !== 'createdAt' && attr !== 'updatedAt'
+                                ).map((attr) => (
                                   <SelectItem key={attr} value={attr}>
                                     {attr}
                                   </SelectItem>
                                 ))}
                               </SelectContent>
                             </Select>
-                            <span>)</span>
                             <Button
                               type="button"
                               variant="ghost"
                               size="icon"
-                              onClick={() => removeAggregation(index)}
+                              onClick={() => removeField(index)}
                             >
                               <Trash className="h-4 w-4 text-destructive" />
                             </Button>
@@ -413,10 +395,10 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
                         ))}
                       </div>
 
-                      {/* Where Conditions Section */}
+                      {/* Conditions Section */}
                       <div className="space-y-2">
                         <div className="flex items-center justify-between">
-                          <FormLabel>Where Conditions</FormLabel>
+                          <FormLabel>Conditions</FormLabel>
                           <Button
                             type="button"
                             onClick={addWhereCondition}
diff --git a/src/pages/app/dashboard/DashboardDetails.jsx b/src/pages/app/dashboard/DashboardDetails.jsx
index 3232ee50..d5dd0d41 100644
--- a/src/pages/app/dashboard/DashboardDetails.jsx
+++ b/src/pages/app/dashboard/DashboardDetails.jsx
@@ -215,6 +215,7 @@ export function DashboardDetails() {
                       dashboardUid={uid} 
                       panel={panel} 
                       height={300}
+                      timeRange={parsedTimeRange}  // Añade el timeRange para que se muestre el mismo rango que el dashboard
                     />
                   </CardContent>
                   <CardFooter className="border-t p-2 text-xs text-muted-foreground">
@@ -349,6 +350,7 @@ export function DashboardDetails() {
                       dashboardUid={uid} 
                       panel={panel} 
                       height={200}
+                      timeRange={parsedTimeRange}  // Añade el timeRange para que se muestre el mismo rango que el dashboard
                     />
                   </CardContent>
                   <CardFooter className="p-4">
@@ -396,6 +398,7 @@ export function DashboardDetails() {
                         dashboardUid={uid} 
                         panel={panel} 
                         height={300}
+                        timeRange={parsedTimeRange}  // Añade el timeRange para que se muestre el mismo rango que el dashboard
                       />
                     </CardContent>
                     <CardFooter className="border-t p-2 text-xs text-muted-foreground">

From fb34796b196a2dea84d47da76f2d548f30892960 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Mon, 19 May 2025 11:54:58 +0200
Subject: [PATCH 08/24] feat(panel): enhanced SQL query builder and form UI

---
 src/forms/dashboard/panel/form.jsx | 333 ++++++++++++++++++-----------
 1 file changed, 214 insertions(+), 119 deletions(-)

diff --git a/src/forms/dashboard/panel/form.jsx b/src/forms/dashboard/panel/form.jsx
index e0b9faaa..9353a35f 100644
--- a/src/forms/dashboard/panel/form.jsx
+++ b/src/forms/dashboard/panel/form.jsx
@@ -11,22 +11,25 @@ import { dashboardsService } from '@/services/grafana/dashboards';
 import { queriesService } from '@/services/grafana/queries';
 import { getAllControls } from '@/services/controls';
 import { Card, CardContent } from '@/components/ui/card';
-import { PlusCircle, Trash } from 'lucide-react';
+import { Skeleton } from '@/components/ui/skeleton';
+import { PlusCircle, Trash, ChevronDown, ChevronRight } from 'lucide-react';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { Switch } from '@/components/ui/switch';
 import { panelSchema } from './schemas';
 import { addPanelToControl } from '@/services/controls';
-import { DashboardPanel } from '@/components/dashboard/dashboard-panel';
+import { PanelPreview } from '@/components/dashboard/panel-preview';
+// import { Tabs, TabsContent, TabsList, TabsTrigger s} from '@/components/ui/tabs';
 
 // Available panel types with icons or descriptions
 const panelTypes = [
-  { value: 'graph', label: 'Line Graph' },
+  { value: 'timeseries', label: 'Time Series' },
   { value: 'gauge', label: 'Gauge' },
   { value: 'table', label: 'Table' },
   { value: 'stat', label: 'Stat' },
-  { value: 'timeseries', label: 'Time Series' },
   { value: 'bar', label: 'Bar Chart' },
   { value: 'pie', label: 'Pie Chart' },
+  { value: 'geomap', label: 'Map' },
+  { value: 'graph', label: 'Graph' },
 ];
 
 // Available operators for WHERE conditions
@@ -36,13 +39,17 @@ const tableAttributes = {
   'Points': ['id', 'agreementId', 'guaranteeId', 'guaranteeValue', 'guaranteeResult', 'timestamp', 'metrics', 'scope', 'computationGroup', 'createdAt', 'updatedAt']
 };
 
-export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
+export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRange }) {
   const [loading, setLoading] = useState(false);
   const [previewLoading, setPreviewLoading] = useState(false);
-  const [previewPanel, setPreviewPanel] = useState(null);
   const [rawSql, setRawSql] = useState('');
   const [controls, setControls] = useState([]);
   const [loadingControls, setLoadingControls] = useState(false);
+  const [showTempDashboardPreview, setShowTempDashboardPreview] = useState(false);
+  const [panelConfigForPreview, setPanelConfigForPreview] = useState(null);
+  // Nuevos estados para controlar la expansión de las secciones
+  const [fieldsExpanded, setFieldsExpanded] = useState(false);
+  const [conditionsExpanded, setConditionsExpanded] = useState(false);
 
   // Setup form with zod validation
   const form = useForm({
@@ -53,10 +60,11 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
       description: '',
       table: 'Points',
       sqlQuery: {
-        selectedFields: ['id', 'agreementId', 'guaranteeId', 'guaranteeValue', 'guaranteeResult', 'timestamp', 'metrics', 'scope', 'computationGroup'], // Todos los atributos excepto createdAt y updatedAt
-        whereConditions: [],
-        whereLogic: 'AND',
-        table: 'Points'
+        model: 'Point',
+        operation: 'findAll',
+        options: {
+          attributes: ['id', 'agreementId', 'guaranteeId', 'guaranteeValue', 'guaranteeResult', 'timestamp', 'metrics', 'scope', 'computationGroup'],
+        }
       },
       showLegend: true,
       unit: '',
@@ -64,7 +72,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
       min: undefined,
       max: undefined,
       thresholds: [],
-      controlId: '' // New field for control association
+      controlId: ''
     }
   });
 
@@ -92,9 +100,11 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
     fetchControls();
   }, []);
   
-  // When table changes, update the sqlQuery table as well
+  // When table changes, update the sqlQuery model as well
   useEffect(() => {
-    setValue('sqlQuery.table', watchTable);
+    // Map table name to model name (removes trailing 's')
+    const modelName = watchTable.endsWith('s') ? watchTable.slice(0, -1) : watchTable;
+    setValue('sqlQuery.model', modelName);
   }, [watchTable, setValue]);
 
   // Generate SQL preview when query changes
@@ -106,7 +116,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
   const generateSqlPreview = async () => {
     try {
       const queryData = getValues('sqlQuery');
-      if (queryData.selectedFields.length === 0) return;
+      if (!queryData.options.attributes || queryData.options.attributes.length === 0) return;
       
       setPreviewLoading(true);
       const response = await queriesService.buildSql(queryData);
@@ -114,15 +124,15 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
       // Asegúrate de que rawSql sea una cadena de texto
       let sqlText = '';
       if (typeof response === 'object') {
-        if (response.data) {
-          sqlText = typeof response.data === 'string' 
-            ? response.data 
-            : JSON.stringify(response.data, null, 2);
+        if (response) {
+          sqlText = typeof response.query === 'string' 
+            ? response.query 
+            : JSON.stringify(response.query, null, 2);
         } else {
-          sqlText = JSON.stringify(response, null, 2);
+          sqlText = JSON.stringify(response.query, null, 2);
         }
       } else {
-        sqlText = String(response);
+        sqlText = String(response.query);
       }
       
       setRawSql(sqlText);
@@ -134,20 +144,31 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
     }
   };
 
-  const generatePanelPreview = async () => {
+  const generateTempDashboardPreview = async () => {
     try {
       if (!rawSql) await generateSqlPreview();
       
       setPreviewLoading(true);
-      // Create a temporary panel object for preview
       const panelData = getValues();
       
-      // For the preview, we need to create a panel-like object
-      const previewPanelData = {
-        id: 999, // Temporary ID
-        type: panelData.type,
+      // Create complete configuration for temporary dashboard preview
+      const previewConfig = {
         title: panelData.title || 'Panel Preview',
+        type: panelData.type,
         description: panelData.description || '',
+        sql: rawSql || '',
+        table: panelData.table,
+        controlId: panelData.controlId === 'none' ? '' : panelData.controlId,
+        dataSource: {
+          type: 'grafana-postgresql-datasource',
+          uid: 'P5E4ECD82955BB660'
+        },
+        sqlQuery: {
+          ...panelData.sqlQuery,
+          rawSql: rawSql
+        },
+        whereConditions: panelData.sqlQuery?.whereConditions || [],
+        selectedFields: panelData.sqlQuery?.selectedFields || [],
         options: {
           showLegend: panelData.showLegend,
           unit: panelData.unit || '',
@@ -156,13 +177,28 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
           max: panelData.max,
           thresholds: panelData.thresholds || []
         },
-        // Asegúrate de que rawSql sea una cadena
-        rawSql: rawSql || ''
+        dimensions: {
+          x: 0, 
+          y: 0,
+          w: 12,
+          h: 8
+        },
+        targets: [
+          {
+            rawSql: rawSql,
+            format: 'table'
+          }
+        ],
+        time: dashboardTimeRange || { from: 'now-7d', to: 'now' }
       };
       
-      setPreviewPanel(previewPanelData);
+      // Set configuration for dashboard preview component
+      setPanelConfigForPreview(previewConfig);
+      setShowTempDashboardPreview(true);
+      
+      toast.success('Creating temporary dashboard for preview...');
     } catch (error) {
-      console.error('Error generating panel preview:', error);
+      console.error('Error generating temp dashboard preview:', error);
       toast.error('Failed to generate panel preview');
     } finally {
       setPreviewLoading(false);
@@ -171,13 +207,13 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
 
   // Add a field to select
   const addField = () => {
-    const currentFields = getValues('sqlQuery.selectedFields') || [];
+    const currentFields = getValues('sqlQuery.options.attributes') || [];
     
     const availableFields = tableAttributes[watchTable].filter(field => 
       !currentFields.includes(field) && field !== 'createdAt' && field !== 'updatedAt'
     );
     if (availableFields.length > 0) {
-      setValue('sqlQuery.selectedFields', [...currentFields, availableFields[0]]);
+      setValue('sqlQuery.options.attributes', [...currentFields, availableFields[0]]);
     } else {
       toast.info('Todos los campos ya han sido seleccionados');
     }
@@ -185,18 +221,18 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
 
   // Remove a field at the specified index
   const removeField = (index) => {
-    const currentFields = getValues('sqlQuery.selectedFields') || [];
+    const currentFields = getValues('sqlQuery.options.attributes') || [];
     if (currentFields.length <= 1) {
       toast.error('Al menos un campo debe estar seleccionado');
       return;
     }
-    setValue('sqlQuery.selectedFields', currentFields.filter((_, i) => i !== index));
+    setValue('sqlQuery.options.attributes', currentFields.filter((_, i) => i !== index));
   };
 
   // Add a WHERE condition
   const addWhereCondition = () => {
-    const currentConditions = getValues('sqlQuery.whereConditions') || [];
-    setValue('sqlQuery.whereConditions', [
+    const currentConditions = getValues('sqlQuery.options.where') || [];
+    setValue('sqlQuery.options.where', [
       ...currentConditions, 
       { key: tableAttributes[watchTable][0], operator: '=', value: '' }
     ]);
@@ -204,8 +240,8 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
 
   // Remove a WHERE condition at the specified index
   const removeWhereCondition = (index) => {
-    const currentConditions = getValues('sqlQuery.whereConditions') || [];
-    setValue('sqlQuery.whereConditions', currentConditions.filter((_, i) => i !== index));
+    const currentConditions = getValues('sqlQuery.options.where') || [];
+    setValue('sqlQuery.options.where', currentConditions.filter((_, i) => i !== index));
   };
 
   // Submit the form to create a new panel
@@ -347,75 +383,108 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
                 <Card>
                   <CardContent className="pt-6">
                     <div className="space-y-4">
-                      {/* Fields Selection Section */}
+                      {/* Selected Fields Section - ahora con toggle */}
                       <div className="space-y-2">
-                        <div className="flex items-center justify-between">
-                          <FormLabel>Fields*</FormLabel>
-                          <Button
-                            type="button"
-                            onClick={addField}
-                            variant="outline"
-                            size="sm"
-                          >
-                            <PlusCircle className="mr-1 h-4 w-4" /> Add
-                          </Button>
-                        </div>
-                        {watchSqlQuery.selectedFields?.map((fieldName, index) => (
-                          <div key={index} className="flex flex-wrap items-center space-x-2">
-                            <Select
-                              value={fieldName}
-                              onValueChange={(value) => {
-                                const updatedFields = [...getValues('sqlQuery.selectedFields')];
-                                updatedFields[index] = value;
-                                setValue('sqlQuery.selectedFields', updatedFields);
-                              }}
-                            >
-                              <SelectTrigger className="flex-1">
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {tableAttributes[watchTable]?.filter(attr => 
-                                  attr !== 'createdAt' && attr !== 'updatedAt'
-                                ).map((attr) => (
-                                  <SelectItem key={attr} value={attr}>
-                                    {attr}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
+                        <div 
+                          className="flex cursor-pointer items-center justify-between" 
+                          onClick={() => setFieldsExpanded(!fieldsExpanded)}
+                        >
+                          <div className="flex items-center space-x-2">
+                            {fieldsExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                            <FormLabel className="cursor-pointer">Selected Fields</FormLabel>
+                          </div>
+                          {fieldsExpanded && (
                             <Button
                               type="button"
-                              variant="ghost"
-                              size="icon"
-                              onClick={() => removeField(index)}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                addField();
+                              }}
+                              variant="outline"
+                              size="sm"
                             >
-                              <Trash className="h-4 w-4 text-destructive" />
+                              <PlusCircle className="mr-1 h-4 w-4" /> Add
                             </Button>
+                          )}
+                        </div>
+
+                        {fieldsExpanded && watchSqlQuery.options?.attributes?.length > 0 ? (
+                          <div className="space-y-2">
+                            {watchSqlQuery.options.attributes.map((field, index) => (
+                              <div key={index} className="flex items-center space-x-2">
+                                <Select
+                                  value={field}
+                                  onValueChange={(value) => {
+                                    const updatedFields = [...getValues('sqlQuery.options.attributes')];
+                                    updatedFields[index] = value;
+                                    setValue('sqlQuery.options.attributes', updatedFields);
+                                  }}
+                                >
+                                  <SelectTrigger className="flex-1">
+                                    <SelectValue />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {tableAttributes[watchTable]?.map((attr) => (
+                                      <SelectItem key={attr} value={attr}>
+                                        {attr}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  onClick={() => removeField(index)}
+                                >
+                                  <Trash className="h-4 w-4 text-destructive" />
+                                </Button>
+                              </div>
+                            ))}
                           </div>
-                        ))}
+                        ) : fieldsExpanded ? (
+                          <div className="text-sm text-muted-foreground">
+                            No fields selected. Please add at least one field.
+                          </div>
+                        ) : (
+                          <div className="text-sm text-muted-foreground">
+                            {watchSqlQuery.options?.attributes?.length || 0} field(s) selected. Click to expand.
+                          </div>
+                        )}
                       </div>
 
                       {/* Conditions Section */}
                       <div className="space-y-2">
-                        <div className="flex items-center justify-between">
-                          <FormLabel>Conditions</FormLabel>
-                          <Button
-                            type="button"
-                            onClick={addWhereCondition}
-                            variant="outline"
-                            size="sm"
-                          >
-                            <PlusCircle className="mr-1 h-4 w-4" /> Add
-                          </Button>
+                        <div 
+                          className="flex cursor-pointer items-center justify-between" 
+                          onClick={() => setConditionsExpanded(!conditionsExpanded)}
+                        >
+                          <div className="flex items-center space-x-2">
+                            {conditionsExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                            <FormLabel className="cursor-pointer">Conditions</FormLabel>
+                          </div>
+                          {conditionsExpanded && (
+                            <Button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                addWhereCondition();
+                              }}
+                              variant="outline"
+                              size="sm"
+                            >
+                              <PlusCircle className="mr-1 h-4 w-4" /> Add
+                            </Button>
+                          )}
                         </div>
 
-                        {watchSqlQuery.whereConditions?.length > 0 ? (
+                        {conditionsExpanded && watchSqlQuery.options?.where?.length > 0 ? (
                           <>
                             <div className="mb-2 flex items-center space-x-2">
                               <FormLabel className="text-sm">Logic:</FormLabel>
                               <Select
-                                value={watchSqlQuery.whereLogic || 'AND'}
-                                onValueChange={(value) => setValue('sqlQuery.whereLogic', value)}
+                                value={watchSqlQuery.options.whereLogic || 'AND'}
+                                onValueChange={(value) => setValue('sqlQuery.options.whereLogic', value)}
                               >
                                 <SelectTrigger className="w-[100px]">
                                   <SelectValue />
@@ -427,14 +496,14 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
                               </Select>
                             </div>
 
-                            {watchSqlQuery.whereConditions.map((condition, index) => (
+                            {watchSqlQuery.options.where.map((condition, index) => (
                               <div key={index} className="flex flex-wrap items-center space-x-2">
                                 <Select
                                   value={condition.key}
                                   onValueChange={(value) => {
-                                    const updatedConditions = [...getValues('sqlQuery.whereConditions')];
+                                    const updatedConditions = [...getValues('sqlQuery.options.where')];
                                     updatedConditions[index].key = value;
-                                    setValue('sqlQuery.whereConditions', updatedConditions);
+                                    setValue('sqlQuery.options.where', updatedConditions);
                                   }}
                                 >
                                   <SelectTrigger className="w-[110px]">
@@ -448,16 +517,16 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
                                     ))}
                                   </SelectContent>
                                 </Select>
-
+        
                                 <Select
                                   value={condition.operator}
                                   onValueChange={(value) => {
-                                    const updatedConditions = [...getValues('sqlQuery.whereConditions')];
+                                    const updatedConditions = [...getValues('sqlQuery.options.where')];
                                     updatedConditions[index].operator = value;
-                                    setValue('sqlQuery.whereConditions', updatedConditions);
+                                    setValue('sqlQuery.options.where', updatedConditions);
                                   }}
                                 >
-                                  <SelectTrigger className="w-[80px]">
+                                  <SelectTrigger className="w-[90px]">
                                     <SelectValue />
                                   </SelectTrigger>
                                   <SelectContent>
@@ -468,17 +537,18 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
                                     ))}
                                   </SelectContent>
                                 </Select>
-
+                                
                                 <Input
+                                  className="min-w-[150px] flex-1"
+                                  placeholder="Value"
                                   value={condition.value}
                                   onChange={(e) => {
-                                    const updatedConditions = [...getValues('sqlQuery.whereConditions')];
+                                    const updatedConditions = [...getValues('sqlQuery.options.where')];
                                     updatedConditions[index].value = e.target.value;
-                                    setValue('sqlQuery.whereConditions', updatedConditions);
+                                    setValue('sqlQuery.options.where', updatedConditions);
                                   }}
-                                  placeholder="Value"
-                                  className="flex-1"
                                 />
+                                
                                 <Button
                                   type="button"
                                   variant="ghost"
@@ -490,10 +560,14 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
                               </div>
                             ))}
                           </>
-                        ) : (
+                        ) : conditionsExpanded ? (
                           <div className="text-sm text-muted-foreground">
                             No conditions added yet. Add a condition to filter your data.
                           </div>
+                        ) : (
+                          <div className="text-sm text-muted-foreground">
+                            {watchSqlQuery.options?.where?.length || 0} condition(s) defined. Click to expand.
+                          </div>
                         )}
                       </div>
                     </div>
@@ -601,23 +675,44 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess }) {
                 <div className="space-y-2">
                   <div className="flex items-center justify-between">
                     <FormLabel>Preview</FormLabel>
-                    <Button type="button" onClick={generatePanelPreview} variant="outline" size="sm">
-                      Generate Preview
-                    </Button>
+                    <div className="flex space-x-2">
+                      <Button 
+                        type="button" 
+                        onClick={generateTempDashboardPreview}
+                        variant="default" 
+                        size="sm"
+                      >
+                        Preview
+                      </Button>
+                    </div>
                   </div>
-                  <div className="h-[370px] flex items-center justify-center border rounded-lg bg-muted/20 p-4">
-                    {previewLoading ? (
-                      <div className="text-center">Loading preview...</div>
-                    ) : previewPanel ? (
-                      <div className="h-full w-full">
-                        <DashboardPanel dashboardUid={dashboardUid} panel={previewPanel} height={500} preview={true} />
-                      </div>
-                    ) : (
-                      <div className="text-center text-muted-foreground">
-                        Click &apos;Generate Preview&apos; to see how your panel will look
+                  
+                  <Card className="border-primary-800">
+                    <CardContent className="p-4">
+                      <div className="h-[370px] flex items-center justify-center">
+                        {previewLoading ? (
+                          <div className="text-center">
+                            <Skeleton className="mb-4 h-40 w-full" />
+                            <p>Creating temporary dashboard...</p>
+                          </div>
+                        ) : showTempDashboardPreview && panelConfigForPreview ? (
+                          <div className="h-full w-full">
+                            <PanelPreview 
+                              panelConfig={panelConfigForPreview} 
+                              height={330} 
+                              baseDashboardUid={dashboardUid}
+                              customTimeRange={dashboardTimeRange || { from: 'now-24h', to: 'now' }}
+                            />
+                          </div>
+                        ) : (
+                          <div className="p-4 text-center text-muted-foreground">
+                            <p className="mb-2">Click &apos;Preview&apos; to see your panel with live data</p>
+                            <p className="text-xs">This will create a temporary dashboard in Grafana</p>
+                          </div>
+                        )}
                       </div>
-                    )}
-                  </div>
+                    </CardContent>
+                  </Card>
                 </div>
               </div>
             </div>

From f559c580fa399a42eef7ec459f6668031c27b375 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Mon, 19 May 2025 11:55:22 +0200
Subject: [PATCH 09/24] feat(panel): improved panel preview functionality

---
 src/components/dashboard/panel-preview.jsx | 237 +++++++++++++++++++++
 src/services/grafana/dashboards.js         |  19 ++
 2 files changed, 256 insertions(+)
 create mode 100644 src/components/dashboard/panel-preview.jsx

diff --git a/src/components/dashboard/panel-preview.jsx b/src/components/dashboard/panel-preview.jsx
new file mode 100644
index 00000000..07a07785
--- /dev/null
+++ b/src/components/dashboard/panel-preview.jsx
@@ -0,0 +1,237 @@
+import { useState, useEffect, useRef } from 'react';
+import { DashboardPanel } from './dashboard-panel';
+import { dashboardsService } from '@/services/grafana/dashboards';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+/**
+ * Component that creates a temporary dashboard and shows a real preview of the panel
+ * using the provided configuration in an actual Grafana panel.
+ */
+export function PanelPreview({ 
+  panelConfig, 
+  height = 300, 
+  baseDashboardUid = null,
+  onClose = () => {},
+  showCloseButton = false,
+  customTimeRange = null
+}) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [tempDashboard, setTempDashboard] = useState(null);
+  const [tempPanel, setTempPanel] = useState(null);
+  
+  // Get timeRange from panelConfig first, use customTimeRange as fallback, or use a default value
+  const [timeRange, setTimeRange] = useState(() => {
+    if (panelConfig?.time) {
+      return panelConfig.time;
+    } else if (customTimeRange) {
+      return customTimeRange;
+    } else {
+      return { from: 'now-7d', to: 'now' }; // Wider time range to avoid "Zoom out of range" issues
+    }
+  });
+  
+  const [dashboardUrl, setDashboardUrl] = useState(null);
+  const [dashboardCreated, setDashboardCreated] = useState(false);
+  
+  // References to track dashboard creation across renders
+  const creationInProgressRef = useRef(false);
+  const dashboardUidRef = useRef(null);
+
+  // Create a temporary dashboard when the component mounts
+  useEffect(() => {
+    if (dashboardCreated || !panelConfig) {
+      setLoading(false);
+      return;
+    }
+    
+    const createTempDashboard = async () => {
+      if (creationInProgressRef.current || dashboardCreated) {
+        return;
+      }
+      
+      creationInProgressRef.current = true;
+      setLoading(true);
+      setError(null);
+      
+      try {
+        // Ensure panelConfig has a timeRange
+        const configWithTimeRange = {
+          ...panelConfig,
+          time: panelConfig.time || timeRange
+        };
+        
+        const options = {
+          timeRange: configWithTimeRange.time,
+          autoCleanup: true
+        };
+        
+        const response = await dashboardsService.createTemporaryDashboard(configWithTimeRange, baseDashboardUid, options);
+        
+        const responseData = response.data || response;
+        
+        if (responseData && responseData.dashboard) {
+          setTempDashboard(responseData.dashboard);
+          dashboardUidRef.current = responseData.dashboard.uid;
+          
+          setDashboardCreated(true);
+          
+          const grafanaUrl = import.meta.env.VITE_GRAFANA_URL || 'http://localhost:3100';
+          const dashUrl = `${grafanaUrl}/d/${responseData.dashboard.uid}`;
+          setDashboardUrl(dashUrl);
+          
+          // Create temporary panel data until we get real panel info
+          const tempPanelData = {
+            id: 1,
+            title: panelConfig.title || 'Panel Preview',
+            type: panelConfig.type || 'gauge',
+            description: panelConfig.description || '',
+            options: panelConfig.options || {},
+            rawSql: panelConfig.sql || '',
+            panelId: 1 
+          };
+          
+          setTempPanel(tempPanelData);
+          
+          // Try to get panels after creating the dashboard
+          setTimeout(async () => {
+            try {
+              const panelsResponse = await dashboardsService.getPanels(dashboardUidRef.current);
+              const panels = Array.isArray(panelsResponse) 
+                ? panelsResponse 
+                : (panelsResponse.data || []);
+
+              if (panels && panels.length > 0) {
+                setTempPanel(panels[0]);
+              }
+            } catch (panelErr) {
+              console.warn('Could not get panels from dashboard:', panelErr);
+            }
+          }, 1000); // Wait for Grafana to process the dashboard
+        } else {
+          throw new Error('Temporary dashboard information was not received');
+        }
+      } catch (err) {
+        console.error('Error creating temporary dashboard:', err);
+        setError(err.message || 'Error creating temporary dashboard');
+        setDashboardCreated(false);
+        creationInProgressRef.current = false;
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (!creationInProgressRef.current) {
+      createTempDashboard();
+    }
+
+    // Clean up temporary dashboard when component unmounts
+    return () => {
+      if (dashboardUidRef.current) {
+        dashboardsService.delete(dashboardUidRef.current)
+          .catch(err => console.error('Error deleting temporary dashboard:', err));
+        dashboardUidRef.current = null;
+        creationInProgressRef.current = false;
+      }
+    };
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [panelConfig, baseDashboardUid]);
+
+  // Update timeRange when panelConfig or customTimeRange changes
+  useEffect(() => {
+    const newTimeRange = panelConfig?.time || customTimeRange || { from: 'now-7d', to: 'now' };
+    setTimeRange(newTimeRange);
+  }, [panelConfig, customTimeRange]);
+
+  // Loading state
+  if (loading) {
+    return (
+      <div style={{ height: `${height}px` }} className="flex items-center justify-center">
+        <div className="text-center">
+          <Skeleton className="mb-2 h-[80%] w-full" />
+          <p className="text-sm text-muted-foreground">Creating preview...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div style={{ height: `${height}px` }} className="flex flex-col items-center justify-center">
+        <Alert variant="destructive" className="max-w-xl w-full">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Preview Error</AlertTitle>
+          <AlertDescription className="mt-2">
+            <p>{typeof error === 'object' ? JSON.stringify(error) : error}</p>
+            <p className="mt-2 text-sm">
+              The temporary dashboard was created, but panel information could not be obtained.
+              Try again or check the panel configuration.
+            </p>
+            {dashboardUrl && (
+              <div className="mt-3">
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  onClick={() => window.open(`${dashboardUrl}?from=${encodeURIComponent(timeRange.from)}&to=${encodeURIComponent(timeRange.to)}`, '_blank')}
+                >
+                  View dashboard in Grafana
+                </Button>
+              </div>
+            )}
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  // No dashboard created
+  if (!tempDashboard) {
+    return (
+      <div style={{ height: `${height}px` }} className="flex items-center justify-center bg-muted/20">
+        <p className="text-muted-foreground">Could not create temporary dashboard</p>
+      </div>
+    );
+  }
+
+  // Successful state - show panel or dashboard
+  return (
+    <div className="flex flex-col space-y-2">
+      <div className="rounded-md bg-muted/10 p-2 text-center text-sm text-muted-foreground">
+        {!tempPanel && <p className="mt-1 text-xs text-yellow-600 font-medium">Showing full dashboard due to missing panel information</p>}
+      </div>
+      
+      {tempPanel ? (
+        // Show panel with timeRange
+        <DashboardPanel 
+          dashboardUid={tempDashboard.uid} 
+          panel={tempPanel} 
+          height={height} 
+          timeRange={timeRange}
+        />
+      ) : (
+        // Show iframe with the complete dashboard
+        <div className="overflow-hidden border rounded-md" style={{ height: `${height}px` }}>
+          <iframe 
+            src={`${dashboardUrl || `${import.meta.env.VITE_GRAFANA_URL || 'http://localhost:3100'}/d/${tempDashboard.uid}`}?from=${encodeURIComponent(timeRange.from)}&to=${encodeURIComponent(timeRange.to)}&theme=light&kiosk`}
+            width="100%"
+            height="100%"
+            title="Dashboard Preview"
+            allow="fullscreen"
+          />
+        </div>
+      )}
+
+      {showCloseButton && (
+        <div className="mt-2 flex justify-end">
+          <Button variant="outline" size="sm" onClick={onClose}>
+            Close preview
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/services/grafana/dashboards.js b/src/services/grafana/dashboards.js
index 6601010e..875ea8e4 100644
--- a/src/services/grafana/dashboards.js
+++ b/src/services/grafana/dashboards.js
@@ -107,6 +107,25 @@ export const dashboardsService = {
   createTemplate: (data) => {
     return apiClient.post('/grafana/dashboard/template', data);
   },
+
+  /**
+   * Creates a temporary dashboard for panel previewing
+   * @param {object} panelConfig - Configuration for the panel to preview
+   * @param {string} [baseDashboardUid] - Optional UID of a dashboard to clone from
+   * @param {object} [options] - Additional options
+   * @returns {Promise} - Promise with the created temporary dashboard
+   */
+  createTemporaryDashboard: (panelConfig, baseDashboardUid = null, options = {}) => {
+    const data = {
+      panelConfig,
+      isTemporary: true,
+      title: `tmp-${baseDashboardUid}`,
+      baseDashboardUid,
+      timeRange: options.timeRange || { from: 'now-6h', to: 'now' },
+      autoCleanup: options.autoCleanup !== false // Enable automatic cleanup by default
+    };
+    return apiClient.post('/grafana/dashboard/temp', data);
+  },
 };
 
 export default dashboardsService;

From 028b5ae956338f4e76fe4371600aa211bc811958 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Mon, 19 May 2025 11:55:40 +0200
Subject: [PATCH 10/24] feat(dashboard): added new panel types and restructure
 options

---
 src/forms/dashboard/panel/schemas.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/forms/dashboard/panel/schemas.js b/src/forms/dashboard/panel/schemas.js
index bc87d677..ced065c0 100644
--- a/src/forms/dashboard/panel/schemas.js
+++ b/src/forms/dashboard/panel/schemas.js
@@ -2,7 +2,7 @@ import * as z from 'zod';
 
 export const panelSchema = z.object({
   title: z.string().min(1, { message: 'Title is required' }),
-  type: z.enum(['graph', 'gauge', 'table', 'stat', 'timeseries', 'bar', 'pie'], { 
+  type: z.enum(['graph', 'gauge', 'table', 'stat', 'timeseries', 'bar', 'pie', 'geomap'], { 
     message: 'Panel type must be selected' 
   }),
   description: z.string().optional(),

From 5e2dc414912a2c2042225d47b6e1112ec12b6773 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Mon, 19 May 2025 11:56:47 +0200
Subject: [PATCH 11/24] refactor(dashboard): clean up code and improve type
 handling

---
 .../catalog/CatalogDashboardStep.jsx          |  1 -
 src/forms/dashboard/panel/form.jsx            | 26 ++++++++++---------
 src/pages/app/Dashboards.jsx                  |  1 -
 src/pages/app/dashboard/DashboardDetails.jsx  |  5 ++--
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/catalog/CatalogDashboardStep.jsx b/src/components/catalog/CatalogDashboardStep.jsx
index 0cb0522f..6d11add5 100644
--- a/src/components/catalog/CatalogDashboardStep.jsx
+++ b/src/components/catalog/CatalogDashboardStep.jsx
@@ -59,7 +59,6 @@ const defaultChartConfig = {
 };
 
 const chartTypes = [
-  { value: 'pie', label: 'Pie Chart', icon: PieChart },
   { value: 'bar', label: 'Bar Chart', icon: BarChart },
   { value: 'line', label: 'Line Chart', icon: LineChart },
   { value: 'table', label: 'Table', icon: Table2 },
diff --git a/src/forms/dashboard/panel/form.jsx b/src/forms/dashboard/panel/form.jsx
index 9353a35f..770aad0a 100644
--- a/src/forms/dashboard/panel/form.jsx
+++ b/src/forms/dashboard/panel/form.jsx
@@ -12,7 +12,7 @@ import { queriesService } from '@/services/grafana/queries';
 import { getAllControls } from '@/services/controls';
 import { Card, CardContent } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { PlusCircle, Trash, ChevronDown, ChevronRight } from 'lucide-react';
+import { PlusCircle, Trash, ChevronDown, ChevronRight, LineChart, GaugeCircle, Table2, Activity, BarChart4, Globe, TrendingUp } from 'lucide-react';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { Switch } from '@/components/ui/switch';
 import { panelSchema } from './schemas';
@@ -22,21 +22,20 @@ import { PanelPreview } from '@/components/dashboard/panel-preview';
 
 // Available panel types with icons or descriptions
 const panelTypes = [
-  { value: 'timeseries', label: 'Time Series' },
-  { value: 'gauge', label: 'Gauge' },
-  { value: 'table', label: 'Table' },
-  { value: 'stat', label: 'Stat' },
-  { value: 'bar', label: 'Bar Chart' },
-  { value: 'pie', label: 'Pie Chart' },
-  { value: 'geomap', label: 'Map' },
-  { value: 'graph', label: 'Graph' },
+  { value: 'timeseries', label: 'Time Series', icon: LineChart },
+  { value: 'gauge', label: 'Gauge', icon: GaugeCircle },
+  { value: 'table', label: 'Table', icon: Table2 },
+  { value: 'stat', label: 'Stat', icon: Activity },
+  { value: 'bar', label: 'Bar Chart', icon: BarChart4 },
+  { value: 'geomap', label: 'Map', icon: Globe },
+  { value: 'graph', label: 'Graph', icon: TrendingUp },
 ];
 
 // Available operators for WHERE conditions
 const whereOperators = ['=', '>', '<', '>=', '<=', '<>', 'LIKE', 'IN', 'NOT IN'];
 
 const tableAttributes = {
-  'Points': ['id', 'agreementId', 'guaranteeId', 'guaranteeValue', 'guaranteeResult', 'timestamp', 'metrics', 'scope', 'computationGroup', 'createdAt', 'updatedAt']
+  'Point': ['id', 'agreementId', 'guaranteeId', 'guaranteeValue', 'guaranteeResult', 'timestamp', 'metrics', 'scope', 'computationGroup', 'createdAt', 'updatedAt']
 };
 
 export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRange }) {
@@ -58,7 +57,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
       title: '',
       type: 'graph',
       description: '',
-      table: 'Points',
+      table: 'Point',
       sqlQuery: {
         model: 'Point',
         operation: 'findAll',
@@ -325,7 +324,10 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
                       <SelectContent>
                         {panelTypes.map((type) => (
                           <SelectItem key={type.value} value={type.value}>
-                            {type.label}
+                            <div className="flex items-center">
+                              <type.icon className="mr-2 h-4 w-4" />
+                              {type.label}
+                            </div>
                           </SelectItem>
                         ))}
                       </SelectContent>
diff --git a/src/pages/app/Dashboards.jsx b/src/pages/app/Dashboards.jsx
index 68dc5e8e..a619834d 100644
--- a/src/pages/app/Dashboards.jsx
+++ b/src/pages/app/Dashboards.jsx
@@ -65,7 +65,6 @@ export function Dashboards() {
   };
 
   const handleDashboardFormSubmit = async (data) => {
-    console.log('DashboardForm data:', data);
     try {
       setLoading(true);
       await dashboardsService.createTemplate(data);
diff --git a/src/pages/app/dashboard/DashboardDetails.jsx b/src/pages/app/dashboard/DashboardDetails.jsx
index d5dd0d41..810c0bfb 100644
--- a/src/pages/app/dashboard/DashboardDetails.jsx
+++ b/src/pages/app/dashboard/DashboardDetails.jsx
@@ -37,7 +37,7 @@ export function DashboardDetails() {
         setLoading(true);
         const response = await dashboardsService.getById(id);
         setDashboard(response);
-        
+
         if (response?.dashboard?.panels && response.dashboard.panels.length > 0) {
           setPanels(response.dashboard.panels);
         } else {
@@ -215,7 +215,7 @@ export function DashboardDetails() {
                       dashboardUid={uid} 
                       panel={panel} 
                       height={300}
-                      timeRange={parsedTimeRange}  // Añade el timeRange para que se muestre el mismo rango que el dashboard
+                      timeRange={parsedTimeRange}
                     />
                   </CardContent>
                   <CardFooter className="border-t p-2 text-xs text-muted-foreground">
@@ -620,6 +620,7 @@ export function DashboardDetails() {
           dashboardUid={uid}
           onClose={() => setShowAddPanelForm(false)}
           onSuccess={handlePanelAdded}
+          dashboardTimeRange={parsedTimeRange}
         />
       )}
     </Page>

From 9f4472b72d58ae0f1e0d0e457454cb4ce6df629d Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Mon, 19 May 2025 17:20:02 +0200
Subject: [PATCH 12/24] feat(dashboard): simplify dashboard configuration UI

---
 .../catalog/CatalogDashboardStep.jsx          | 41 ++++---------------
 1 file changed, 7 insertions(+), 34 deletions(-)

diff --git a/src/components/catalog/CatalogDashboardStep.jsx b/src/components/catalog/CatalogDashboardStep.jsx
index 6d11add5..191d37a5 100644
--- a/src/components/catalog/CatalogDashboardStep.jsx
+++ b/src/components/catalog/CatalogDashboardStep.jsx
@@ -28,7 +28,6 @@ import {
   TabsList,
   TabsTrigger,
 } from '@/components/ui/tabs';
-import { Switch } from '@/components/ui/switch';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 // Schema for dashboard configuration
@@ -67,15 +66,14 @@ const chartTypes = [
 export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalogId, onSubmit, isSubmitting, apiError = null }) {
   const [selectedChart, setSelectedChart] = useState(null);
   const [submitError, setSubmitError] = useState(null);
-
   // Setup form with zod resolver
   const form = useForm({
     resolver: zodResolver(dashboardConfigSchema),
     defaultValues: {
-      title: initialConfig.title || `${catalogId} Dashboard`,
+      title: '',
       description: initialConfig.description || '',
       charts: initialConfig.charts || [],
-      showSummaryStats: initialConfig.showSummaryStats !== false,
+      showSummaryStats: true, // Siempre establecido a true
     },
   });
 
@@ -88,10 +86,10 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
   useEffect(() => {
     if (initialConfig && Object.keys(initialConfig).length > 0) {
       form.reset({
-        title: initialConfig.title || `${catalogId} Dashboard`,
+        title: initialConfig.title || '',
         description: initialConfig.description || '',
         charts: initialConfig.charts || [],
-        showSummaryStats: initialConfig.showSummaryStats !== false,
+        showSummaryStats: true, // Siempre establecido a true
       });
     }
   }, [initialConfig, catalogId, form]);
@@ -141,8 +139,6 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
 
   return (
     <div className="py-4">
-      <h2 className="mb-6 text-left text-xl font-semibold">Configure Dashboard</h2>
-      
       {submitError && (
         <Alert variant="destructive" className="mb-6">
           <AlertCircle className="h-4 w-4" />
@@ -156,8 +152,8 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
       )}
       
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
-          <div className="grid grid-cols-2 gap-6">
+        <form onSubmit={form.handleSubmit(handleSubmit)} className="text-left space-y-6">
+          <div className="grid grid-cols-1 gap-6">
             <div>
               <FormField
                 control={form.control}
@@ -173,29 +169,6 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
                 )}
               />
             </div>
-            
-            <div>
-              <FormField
-                control={form.control}
-                name="showSummaryStats"
-                render={({ field }) => (
-                  <FormItem className="flex flex-row items-center justify-between border rounded-lg p-3 shadow-sm">
-                    <div className="space-y-0.5">
-                      <FormLabel>Show Summary Statistics</FormLabel>
-                      <p className="text-sm text-gray-500">
-                        Display summary metrics at the top of the dashboard
-                      </p>
-                    </div>
-                    <FormControl>
-                      <Switch
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-            </div>
           </div>
 
           <FormField
@@ -218,7 +191,7 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
 
           <div className="border-t pt-6">
             <div className="mb-4 flex items-center justify-between">
-              <h3 className="text-lg font-medium">Dashboard Charts</h3>
+              <h4 className="text-lg font-medium">Charts</h4>
               <Button 
                 type="button" 
                 onClick={handleAddChart}

From 288ff1f9914f233703865a809de15f5b4f4a96f4 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Tue, 20 May 2025 09:02:54 +0200
Subject: [PATCH 13/24] feat(dashboard): integrated panel creation in
 multi-step-form

---
 .../catalog/CatalogControlsStep.jsx           |  35 +-
 .../catalog/CatalogDashboardStep.jsx          | 360 +++++++++++-------
 src/services/grafana/dashboards.js            |  41 ++
 src/utils/draftStorage.js                     |  19 +
 4 files changed, 311 insertions(+), 144 deletions(-)

diff --git a/src/components/catalog/CatalogControlsStep.jsx b/src/components/catalog/CatalogControlsStep.jsx
index 9beb1dbb..f84e5435 100644
--- a/src/components/catalog/CatalogControlsStep.jsx
+++ b/src/components/catalog/CatalogControlsStep.jsx
@@ -22,6 +22,8 @@ import {
 import { getScopeSetsByControlId } from '@/services/scopes';
 import { Badge } from '@/components/ui/badge';
 import { saveDraftControlId, saveDraftControlIds, saveDraftCatalogId, initializeControlIdsStorage } from '@/utils/draftStorage';
+import { dashboardsService } from '@/services/grafana/dashboards';
+import { saveDraftDashboardUid } from '@/utils/draftStorage';
 
 export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit, isSubmitting, apiError = null }) {
   const [controls, setControls] = useState([]);
@@ -192,7 +194,6 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
           // If no catalogId, manually add the new control to the current list
           setControls(prevControls => [...prevControls, newControl]);
         }
-        toast.success(`Draft control "${newControl.name}" added successfully`);
       } catch (error) {
         console.error('Error updating controls list:', error);
         toast.error('Control was created but the list could not be updated');
@@ -227,7 +228,7 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
       await deleteControl(currentControl.id);
       // After deletion, refresh the draft controls list
       await fetchDraftControls();
-      toast.success('Draft control deleted successfully');
+      toast.success('Control deleted successfully');
     } catch (error) {
       console.error('Error deleting draft control:', error);
       toast.error('Failed to delete draft control');
@@ -238,7 +239,7 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
     }
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     setSubmitError(null);
     
     if (controls.length === 0) {
@@ -256,6 +257,34 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
       saveDraftCatalogId(catalogId);
     }
     
+    try {
+      const dashboardName = `tmp-${Date.now()}-${catalogId}`;
+      
+      // Use the start date of the first control or the current date
+      let startDate = 'now-24h';
+      if (controls.length > 0 && controls[0].startDate) {
+        startDate = new Date(controls[0].startDate).toISOString();
+      }
+      
+      // Create the template dashboard
+      const dashboardResponse = await dashboardsService.createTemplate({
+        name: dashboardName,
+        timeRange: {
+          from: startDate,
+          to: 'now'
+        }
+      });
+
+      // Store the dashboard UID in localStorage
+      if (dashboardResponse?.dashboard && dashboardResponse.dashboard?.uid) {
+        const dashboardUid = dashboardResponse?.dashboard?.uid;
+        saveDraftDashboardUid(dashboardUid);
+      }
+    } catch (error) {
+      console.error('Error creating template dashboard:', error);
+      toast.warning('Could not create template dashboard, panels may not display correctly');
+    }
+    
     onSubmit(controls);
   };
 
diff --git a/src/components/catalog/CatalogDashboardStep.jsx b/src/components/catalog/CatalogDashboardStep.jsx
index 191d37a5..0f9163a1 100644
--- a/src/components/catalog/CatalogDashboardStep.jsx
+++ b/src/components/catalog/CatalogDashboardStep.jsx
@@ -1,9 +1,8 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Loader2, PieChart, BarChart, LineChart, Table2, Check, AlertCircle } from 'lucide-react';
+import { Loader2, Check, AlertCircle, Trash } from 'lucide-react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm, useFieldArray } from 'react-hook-form';
 import { z } from 'zod';
@@ -29,67 +28,104 @@ import {
   TabsTrigger,
 } from '@/components/ui/tabs';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { toast } from 'sonner';
+import { AddPanelForm } from '@/forms/dashboard/panel/form';
+import { dashboardsService } from '@/services/grafana/dashboards';
+import { Badge } from '@/components/ui/badge';
+import { DashboardPanel } from '@/components/dashboard/dashboard-panel';
+import { getDraftDashboardUid, clearDraftDashboardUid } from '@/utils/draftStorage';
 
-// Schema for dashboard configuration
+// Dashboard configuration schema
 const dashboardConfigSchema = z.object({
   title: z.string().min(1, { message: 'Dashboard title is required' }),
   description: z.string().optional(),
-  charts: z.array(
+  panels: z.array(
     z.object({
-      type: z.string().min(1, { message: 'Chart type is required' }),
-      title: z.string().min(1, { message: 'Chart title is required' }),
-      controls: z.array(z.string()).min(1, { message: 'Select at least one control' }),
+      title: z.string().min(1, { message: 'Panel title is required' }),
+      type: z.string(),
+      controlId: z.string().optional(),
+      panelId: z.number().optional(),
       position: z.object({
         x: z.number(),
         y: z.number(),
         w: z.number(),
         h: z.number(),
       }),
+      originalPanel: z.any().optional(),
     })
   ).optional(),
   showSummaryStats: z.boolean().default(true),
 });
 
-const defaultChartConfig = {
-  type: 'pie',
-  title: '',
-  controls: [],
-  position: { x: 0, y: 0, w: 6, h: 4 },
-};
-
-const chartTypes = [
-  { value: 'bar', label: 'Bar Chart', icon: BarChart },
-  { value: 'line', label: 'Line Chart', icon: LineChart },
-  { value: 'table', label: 'Table', icon: Table2 },
-];
-
 export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalogId, onSubmit, isSubmitting, apiError = null }) {
-  const [selectedChart, setSelectedChart] = useState(null);
+  const [selectedPanel, setSelectedPanel] = useState(null);
   const [submitError, setSubmitError] = useState(null);
+  const [showAddPanelForm, setShowAddPanelForm] = useState(false);
+  const [tempDashboardUid, setTempDashboardUid] = useState(null);
+  const [isRemovingPanel, setIsRemovingPanel] = useState(false);
+  
   // Setup form with zod resolver
   const form = useForm({
     resolver: zodResolver(dashboardConfigSchema),
     defaultValues: {
       title: '',
       description: initialConfig.description || '',
-      charts: initialConfig.charts || [],
-      showSummaryStats: true, // Siempre establecido a true
+      panels: initialConfig.panels || [],
+      showSummaryStats: true,
     },
   });
 
-  const { fields, append, remove, update } = useFieldArray({
+  const { fields, append, remove } = useFieldArray({
     control: form.control,
-    name: 'charts',
+    name: 'panels',
   });
 
+  // Try to load dashboard UID from localStorage
+  useEffect(() => {
+    const draftDashboardUid = getDraftDashboardUid();
+    if (draftDashboardUid) {
+      setTempDashboardUid(draftDashboardUid);
+      
+      // Load existing panels from the dashboard
+      if (fields.length === 0) {
+        loadDashboardPanels(draftDashboardUid);
+      }
+    } else {
+      toast.error('No dashboard template found. Please go back to the Controls step.');
+    }
+  }, [fields.length, loadDashboardPanels]);
+
+  // Function to load existing panels from the dashboard
+  const loadDashboardPanels = useCallback(async (dashboardUid) => {
+    try {
+      const response = await dashboardsService.getPanels(dashboardUid);
+      const panels = Array.isArray(response) ? response : (response.data || []);
+      
+      if (panels.length > 0) {
+        const formattedPanels = panels.map(panel => ({
+          title: panel.title,
+          type: panel.type,
+          controlId: panel.controlId || '',
+          position: panel.gridPos || { x: 0, y: 0, w: 6, h: 4 },
+          panelId: panel.id,
+          originalPanel: panel
+        }));
+        
+        form.setValue('panels', formattedPanels);
+      }
+    } catch (error) {
+      console.error('Error loading dashboard panels:', error);
+    }
+  }, [form]);
+
   // Update form values when initialConfig changes
   useEffect(() => {
     if (initialConfig && Object.keys(initialConfig).length > 0) {
       form.reset({
         title: initialConfig.title || '',
         description: initialConfig.description || '',
-        charts: initialConfig.charts || [],
-        showSummaryStats: true, // Siempre establecido a true
+        panels: initialConfig.panels || [],
+        showSummaryStats: true,
       });
     }
   }, [initialConfig, catalogId, form]);
@@ -101,44 +137,91 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
     }
   }, [apiError]);
 
-  const handleAddChart = () => {
-    append({ ...defaultChartConfig, title: `Chart ${fields.length + 1}` });
-    setSelectedChart(fields.length);
+  // Clean up resources when component unmounts
+  useEffect(() => {
+    return () => {
+      // Dashboard is not deleted here as it may be used elsewhere
+    };
+  }, []);
+
+  const handleOpenAddPanel = async () => {
+    try {
+      // Check if we have a dashboard UID
+      if (!tempDashboardUid) {
+        const draftUid = getDraftDashboardUid();
+        if (draftUid) {
+          setTempDashboardUid(draftUid);
+        } else {
+          toast.error('No dashboard template available. Please go back to the Controls step.');
+          return;
+        }
+      }
+      setShowAddPanelForm(true);
+    } catch (error) {
+      console.error('Error preparing panel form:', error);
+      toast.error('Failed to initialize panel form');
+    }
   };
 
-  const handleChartChange = (index, field, value) => {
-    const updatedChart = { ...fields[index] };
-    updatedChart[field] = value;
-    update(index, updatedChart);
+  const handlePanelAdded = (panelData) => {
+    // Add the new panel directly
+    const newPanel = {
+      title: panelData.title,
+      type: panelData.type,
+      controlId: panelData.controlId && panelData.controlId !== 'none' ? panelData.controlId : '',
+      position: panelData.gridPos || {
+        x: 0,
+        y: 0,
+        w: 6,
+        h: 4
+      },
+      panelId: panelData.id || panelData.panelId,
+      originalPanel: panelData
+    };
+    
+    append(newPanel);
+    setSelectedPanel(fields.length);
+    setShowAddPanelForm(false);
+    toast.success('Panel added to dashboard');
   };
 
-  const handleDeleteChart = (index) => {
-    remove(index);
-    setSelectedChart(null);
+  const handlePanelRemoved = (panelId) => {
+    console.log('Panel removed from form:', panelId);
   };
 
-  const handleSelectControls = (index, selectedControls) => {
-    const updatedChart = { ...fields[index] };
-    updatedChart.controls = selectedControls;
-    update(index, updatedChart);
+  const handleDeletePanel = async (index, panelId) => {
+    try {
+      setIsRemovingPanel(true);
+      
+      // Remove the panel from Grafana if a dashboard and panel ID exist
+      if (tempDashboardUid && panelId) {
+        await dashboardsService.removePanel(tempDashboardUid, panelId);
+        toast.success('Panel removed from dashboard');
+      }
+      
+      // Remove the panel from the form
+      remove(index);
+      setSelectedPanel(null);
+    } catch (error) {
+      console.error('Error removing panel:', error);
+      toast.error('Failed to remove panel');
+    } finally {
+      setIsRemovingPanel(false);
+    }
   };
 
   const handleSubmit = (data) => {
     setSubmitError(null);
+    
+    // Clear dashboard UID from localStorage when finished
+    clearDraftDashboardUid();
+    
     onSubmit(data);
   };
 
-  const ChartPreview = ({ type }) => {
-    const Icon = chartTypes.find(chart => chart.value === type)?.icon || PieChart;
-    return (
-      <div className="h-40 flex items-center justify-center rounded-md bg-gray-100 p-6">
-        <Icon className="h-20 w-20 text-gray-400" />
-      </div>
-    );
-  };
-
   return (
     <div className="py-4">
+      {/* Error alert */}
       {submitError && (
         <Alert variant="destructive" className="mb-6">
           <AlertCircle className="h-4 w-4" />
@@ -153,6 +236,7 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
       
       <Form {...form}>
         <form onSubmit={form.handleSubmit(handleSubmit)} className="text-left space-y-6">
+          {/* Dashboard title and description fields */}
           <div className="grid grid-cols-1 gap-6">
             <div>
               <FormField
@@ -191,120 +275,102 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
 
           <div className="border-t pt-6">
             <div className="mb-4 flex items-center justify-between">
-              <h4 className="text-lg font-medium">Charts</h4>
-              <Button 
-                type="button" 
-                onClick={handleAddChart}
-                variant="destructive"
-              >
-                Add Chart
-              </Button>
+              <h4 className="text-lg font-medium">Panels</h4>
+              <div className="flex gap-2">
+                {tempDashboardUid && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      const grafanaUrl = import.meta.env.VITE_GRAFANA_URL || 'http://localhost:3100';
+                      window.open(`${grafanaUrl}/d/${tempDashboardUid}`, '_blank');
+                    }}
+                  >
+                    View Dashboard
+                  </Button>
+                )}
+                <Button 
+                  type="button" 
+                  onClick={handleOpenAddPanel}
+                  variant="destructive"
+                  disabled={!tempDashboardUid}
+                >
+                  Add Panel
+                </Button>
+              </div>
             </div>
 
             {fields.length > 0 ? (
               <Tabs 
-                value={selectedChart !== null ? selectedChart.toString() : undefined}
-                onValueChange={(value) => setSelectedChart(parseInt(value))}
+                value={selectedPanel !== null ? selectedPanel.toString() : undefined}
+                onValueChange={(value) => setSelectedPanel(parseInt(value))}
                 className="mt-2"
               >
+                {/* Panel tabs */}
                 <TabsList className="mb-4">
-                  {fields.map((chart, index) => (
-                    <TabsTrigger key={chart.id} value={index.toString()}>
-                      {chart.title || `Chart ${index + 1}`}
+                  {fields.map((panel, index) => (
+                    <TabsTrigger key={panel.id} value={index.toString()}>
+                      {panel.title || `Panel ${index + 1}`}
                     </TabsTrigger>
                   ))}
                 </TabsList>
 
-                {fields.map((chart, index) => (
-                  <TabsContent key={chart.id} value={index.toString()} className="space-y-4">
+                {fields.map((panel, index) => (
+                  <TabsContent key={panel.id} value={index.toString()} className="space-y-4">
                     <Card>
                       <CardHeader>
-                        <CardTitle className="text-base">Configure Chart</CardTitle>
+                        <div className="flex items-center justify-between">
+                          <CardTitle className="text-base">Panel Configuration</CardTitle>
+                          <Badge variant="outline">{panel.type}</Badge>
+                        </div>
                       </CardHeader>
                       <CardContent className="space-y-4">
+                        {/* Panel details */}
                         <div className="grid grid-cols-2 gap-4">
-                          <FormItem>
-                            <FormLabel>Chart Title <span className="text-red-500">*</span></FormLabel>
-                            <FormControl>
-                              <Input 
-                                placeholder="Enter chart title" 
-                                value={chart.title} 
-                                onChange={(e) => handleChartChange(index, 'title', e.target.value)} 
-                              />
-                            </FormControl>
-                          </FormItem>
-
-                          <FormItem>
-                            <FormLabel>Chart Type <span className="text-red-500">*</span></FormLabel>
-                            <Select
-                              value={chart.type}
-                              onValueChange={(value) => handleChartChange(index, 'type', value)}
-                            >
-                              <SelectTrigger>
-                                <SelectValue placeholder="Select chart type" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {chartTypes.map(type => (
-                                  <SelectItem key={type.value} value={type.value}>
-                                    <div className="flex items-center">
-                                      <type.icon className="mr-2 h-4 w-4" />
-                                      {type.label}
-                                    </div>
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          </FormItem>
-                        </div>
-
-                        <FormItem>
-                          <FormLabel>Select Controls <span className="text-red-500">*</span></FormLabel>
-                          <div className="max-h-[200px] overflow-y-auto border rounded-md p-3">
-                            {controls.length === 0 ? (
-                              <p className="text-sm text-gray-500">No controls available</p>
-                            ) : (
-                              <div className="space-y-2">
-                                {controls.map(control => (
-                                  <div key={control.id} className="flex items-center">
-                                    <input 
-                                      type="checkbox" 
-                                      id={`control-${control.id}-chart-${index}`} 
-                                      className="mr-2"
-                                      checked={chart.controls?.includes(control.id)}
-                                      onChange={(e) => {
-                                        const newControls = e.target.checked
-                                          ? [...(chart.controls || []), control.id]
-                                          : (chart.controls || []).filter(id => id !== control.id);
-                                        handleSelectControls(index, newControls);
-                                      }}
-                                    />
-                                    <label 
-                                      htmlFor={`control-${control.id}-chart-${index}`}
-                                      className="text-sm"
-                                    >
-                                      {control.name}
-                                    </label>
-                                  </div>
-                                ))}
-                              </div>
-                            )}
+                          <div>
+                            <FormLabel>Panel Title</FormLabel>
+                            <div className="font-medium">{panel.title}</div>
                           </div>
-                        </FormItem>
+                          {panel.controlId && (
+                            <div>
+                              <FormLabel>Associated Control</FormLabel>
+                              <div className="font-medium">
+                                {(() => {
+                                  const control = controls.find(c => c.id === panel.controlId);
+                                  return control ? control.name : panel.controlId;
+                                })()}
+                              </div>
+                            </div>
+                          )}
+                        </div>
 
-                        <div>
-                          <FormLabel>Layout Preview</FormLabel>
-                          <div className="mt-2">
-                            <ChartPreview type={chart.type} />
+                        {panel.panelId && tempDashboardUid && (
+                          <div>
+                            <FormLabel>Preview</FormLabel>
+                            <div className="mt-2 h-[200px]">
+                              <DashboardPanel 
+                                dashboardUid={tempDashboardUid}
+                                panel={{...panel.originalPanel, id: panel.panelId}}
+                                height={180}
+                                timeRange={{ from: 'now-24h', to: 'now' }}
+                              />
+                            </div>
                           </div>
-                        </div>
+                        )}
                       </CardContent>
                       <CardFooter className="flex justify-between">
                         <Button 
                           type="button" 
                           variant="destructive"
-                          onClick={() => handleDeleteChart(index)}
+                          onClick={() => handleDeletePanel(index, panel.panelId)}
+                          disabled={isRemovingPanel}
                         >
-                          Remove Chart
+                          {isRemovingPanel ? (
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          ) : (
+                            <Trash className="mr-2 h-4 w-4" />
+                          )}
+                          Remove Panel
                         </Button>
                       </CardFooter>
                     </Card>
@@ -313,7 +379,7 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
               </Tabs>
             ) : (
               <div className="border rounded-md bg-gray-50 py-10 text-center">
-                <p className="text-gray-500">No charts added yet. Click &quot;Add Chart&quot; to start building your dashboard.</p>
+                <p className="text-gray-500">No panels added yet. Click &quot;Add Panel&quot; to start building your dashboard.</p>
               </div>
             )}
           </div>
@@ -341,6 +407,18 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
           </div>
         </form>
       </Form>
+
+      {/* Panel Form */}
+      {showAddPanelForm && tempDashboardUid && (
+        <AddPanelForm
+          dashboardUid={tempDashboardUid}
+          onClose={() => setShowAddPanelForm(false)}
+          onSuccess={handlePanelAdded}
+          dashboardTimeRange={{ from: 'now-24h', to: 'now' }}
+          existingDashboard={true}
+          onPanelRemoved={handlePanelRemoved}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/services/grafana/dashboards.js b/src/services/grafana/dashboards.js
index 875ea8e4..909291f1 100644
--- a/src/services/grafana/dashboards.js
+++ b/src/services/grafana/dashboards.js
@@ -126,6 +126,47 @@ export const dashboardsService = {
     };
     return apiClient.post('/grafana/dashboard/temp', data);
   },
+
+  /**
+   * Removes a specific panel from a dashboard
+   * @param {string} dashboardUid - Dashboard UID
+   * @param {string|number} panelId - Panel ID
+   * @returns {Promise} - Promise with the response
+   */
+  removePanel: async (dashboardUid, panelId) => {
+    try {
+      // Primero obtenemos el dashboard actual
+      const dashboard = await dashboardsService.getById(dashboardUid);
+      
+      if (!dashboard || !dashboard.dashboard) {
+        throw new Error('Dashboard not found');
+      }
+      
+      // Filtramos los paneles para eliminar el que queremos
+      const currentPanels = dashboard.dashboard.panels || [];
+      const filteredPanels = currentPanels.filter(panel => panel.id !== parseInt(panelId));
+      
+      // Si no se encontró el panel, terminar
+      if (currentPanels.length === filteredPanels.length) {
+        return { success: false, message: 'Panel not found in dashboard' };
+      }
+      
+      // Actualizamos el dashboard con la nueva lista de paneles
+      dashboard.dashboard.panels = filteredPanels;
+      
+      // Enviamos la actualización del dashboard
+      const response = await dashboardsService.update(dashboardUid, {
+        dashboard: dashboard.dashboard,
+        overwrite: true,
+        message: `Removed panel ${panelId}`
+      });
+      
+      return { success: true, data: response };
+    } catch (error) {
+      console.error('Error removing panel:', error);
+      throw error;
+    }
+  },
 };
 
 export default dashboardsService;
diff --git a/src/utils/draftStorage.js b/src/utils/draftStorage.js
index c84e77d6..72d6739a 100644
--- a/src/utils/draftStorage.js
+++ b/src/utils/draftStorage.js
@@ -4,6 +4,7 @@
 
 const CATALOG_DRAFT_KEY = 'catalog_draft_id';
 const CONTROLS_DRAFT_KEY = 'control_draft_ids';
+const DASHBOARD_UID_KEY = 'dashboard_draft_uid';
 
 /**
  * Saves a catalog draft ID to localStorage
@@ -52,6 +53,7 @@ export function getDraftControlIds() {
 export function clearDraftData() {
   localStorage.removeItem(CATALOG_DRAFT_KEY);
   localStorage.removeItem(CONTROLS_DRAFT_KEY);
+  localStorage.removeItem(DASHBOARD_UID_KEY);
 }
 
 /**
@@ -83,3 +85,20 @@ export function initializeControlIdsStorage() {
     localStorage.setItem(CONTROLS_DRAFT_KEY, JSON.stringify([]));
   }
 }
+
+// Save the temporary dashboard UID
+export const saveDraftDashboardUid = (uid) => {
+  if (uid) {
+    localStorage.setItem(DASHBOARD_UID_KEY, uid);
+  }
+};
+
+// Get the temporary dashboard UID
+export const getDraftDashboardUid = () => {
+  return localStorage.getItem(DASHBOARD_UID_KEY);
+};
+
+// Clear the temporary dashboard UID
+export const clearDraftDashboardUid = () => {
+  localStorage.removeItem(DASHBOARD_UID_KEY);
+};

From fd477678723ceaa7d0fcf6fb0fb5a96c4622d120 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Wed, 21 May 2025 09:51:50 +0200
Subject: [PATCH 14/24] feat: improve dashboard draft handling

---
 .../catalog/CatalogDashboardStep.jsx          |  9 ++--
 src/pages/app/catalog/CatalogWizard.jsx       | 42 +++++++++++++++++--
 src/pages/app/catalog/Catalogs.jsx            | 20 ++++++++-
 src/services/catalogs.js                      |  9 ++--
 src/utils/draftStorage.js                     |  5 +++
 5 files changed, 69 insertions(+), 16 deletions(-)

diff --git a/src/components/catalog/CatalogDashboardStep.jsx b/src/components/catalog/CatalogDashboardStep.jsx
index 0f9163a1..1f79180d 100644
--- a/src/components/catalog/CatalogDashboardStep.jsx
+++ b/src/components/catalog/CatalogDashboardStep.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
@@ -93,10 +93,11 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
     } else {
       toast.error('No dashboard template found. Please go back to the Controls step.');
     }
-  }, [fields.length, loadDashboardPanels]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fields.length]);
 
   // Function to load existing panels from the dashboard
-  const loadDashboardPanels = useCallback(async (dashboardUid) => {
+  const loadDashboardPanels = async (dashboardUid) => {
     try {
       const response = await dashboardsService.getPanels(dashboardUid);
       const panels = Array.isArray(response) ? response : (response.data || []);
@@ -116,7 +117,7 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
     } catch (error) {
       console.error('Error loading dashboard panels:', error);
     }
-  }, [form]);
+  };
 
   // Update form values when initialConfig changes
   useEffect(() => {
diff --git a/src/pages/app/catalog/CatalogWizard.jsx b/src/pages/app/catalog/CatalogWizard.jsx
index e8b12bde..4aabf914 100644
--- a/src/pages/app/catalog/CatalogWizard.jsx
+++ b/src/pages/app/catalog/CatalogWizard.jsx
@@ -7,6 +7,7 @@ import { toast } from 'sonner';
 import Page from '@/components/basic-page.jsx';
 import { createDraftCatalog, updateCatalog, getCatalogById, deleteCatalog } from '@/services/catalogs';
 import { getControlById, deleteControl } from '@/services/controls';
+import { dashboardsService } from '@/services/grafana/dashboards';
 import { CatalogInfoStep } from '@/components/catalog/CatalogInfoStep';
 import { CatalogControlsStep } from '@/components/catalog/CatalogControlsStep';
 import { CatalogDashboardStep } from '@/components/catalog/CatalogDashboardStep';
@@ -16,7 +17,9 @@ import {
   clearDraftData, 
   hasDraftData,
   saveDraftCatalogId,
-  initializeControlIdsStorage
+  initializeControlIdsStorage,
+  hasDraftDashboardUid,
+  getDraftDashboardUid
 } from '@/utils/draftStorage';
 import {
   AlertDialog,
@@ -147,13 +150,28 @@ export function CatalogWizard() {
             }));
             
             if (hasDrafts && !showDraftDialog) {
-              setCurrentStep(1); // Controls step - Changed from Dashboard step (2)
+              // Check if we have a dashboard draft and redirect to dashboard step if so
+              if (hasDraftDashboardUid()) {
+                setCurrentStep(2); // Dashboard step
+              } else {
+                setCurrentStep(1); // Controls step
+              }
             }
           } else if (hasDrafts && !showDraftDialog) {
-            setCurrentStep(1);
+            // Check if we have a dashboard draft and redirect to dashboard step if so
+            if (hasDraftDashboardUid()) {
+              setCurrentStep(2); // Dashboard step
+            } else {
+              setCurrentStep(1); // Controls step
+            }
           }
         } else if (hasDrafts && !showDraftDialog) {
-          setCurrentStep(1);
+          // Check if we have a dashboard draft and redirect to dashboard step if so
+          if (hasDraftDashboardUid()) {
+            setCurrentStep(2); // Dashboard step
+          } else {
+            setCurrentStep(1); // Controls step
+          }
         }
         
         controlsFetchCompleted.current = true;
@@ -171,6 +189,11 @@ export function CatalogWizard() {
 
   const handleContinueDraft = () => {
     setShowDraftDialog(false);
+    
+    // Check if we have a dashboard draft and directly go to dashboard step if needed
+    if (hasDraftDashboardUid()) {
+      setCurrentStep(2); // Dashboard step
+    }
   };
 
   const handleDiscardDraft = async () => {
@@ -197,6 +220,17 @@ export function CatalogWizard() {
         }
       }
       
+      // Delete dashboard draft if it exists
+      const dashboardUid = getDraftDashboardUid();
+      console.log('Draft dashboard UID:', dashboardUid);
+      if (dashboardUid) {
+        try {
+          await dashboardsService.delete(dashboardUid);
+        } catch (err) {
+          console.error(`Error deleting draft dashboard ${dashboardUid}:`, err);
+        }
+      }
+      
       // Clear localStorage
       clearDraftData();
       
diff --git a/src/pages/app/catalog/Catalogs.jsx b/src/pages/app/catalog/Catalogs.jsx
index 36abaa06..bac0e22c 100644
--- a/src/pages/app/catalog/Catalogs.jsx
+++ b/src/pages/app/catalog/Catalogs.jsx
@@ -40,7 +40,12 @@ import {
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { CatalogForm } from '@/forms/catalog/forms';
 import { useAuth } from '@/hooks/use-auth';
-import { hasDraftData, getDraftCatalogId, getDraftControlIds, clearDraftData } from '@/utils/draftStorage';
+import { hasDraftData, 
+  getDraftCatalogId, 
+  getDraftControlIds, 
+  clearDraftData, 
+  getDraftDashboardUid 
+} from '@/utils/draftStorage';
 import { deleteControl } from '@/services/controls';
 
 const columnHelper = createColumnHelper();
@@ -66,7 +71,7 @@ export function Catalogs() {
   const fetchCatalogs = async () => {
     try {
       setLoading(true);
-      const response = await getAllCatalogs('finalized');
+      const response = await getAllCatalogs();
       setCatalogs(response);
       setError(null);
     } catch (err) {
@@ -121,6 +126,17 @@ export function Catalogs() {
           console.error(`Error deleting draft control ${controlId}:`, err);
         }
       }
+
+      // Delete dashboard draft if it exists
+      const dashboardUid = getDraftDashboardUid();
+      console.log('Draft dashboard UID:', dashboardUid);
+      if (dashboardUid) {
+        try {
+          await dashboardsService.delete(dashboardUid);
+        } catch (err) {
+          console.error(`Error deleting draft dashboard ${dashboardUid}:`, err);
+        }
+      }
       
       // Clear localStorage
       clearDraftData();
diff --git a/src/services/catalogs.js b/src/services/catalogs.js
index a18d2172..11fdcf6a 100644
--- a/src/services/catalogs.js
+++ b/src/services/catalogs.js
@@ -5,12 +5,9 @@ import { apiClient } from '@/api/apiClient';
  * @param {string} [status] - Optional status filter: 'draft' or 'finalized'
  * @returns {Promise} - Promise with the list of catalogs
  */
-export function getAllCatalogs(status) {
-  const config = {};
-  if (status === 'draft' || status === 'finalized') {
-    config.params = { status };
-  }
-  return apiClient.get('/catalogs', config);
+export function getAllCatalogs(statusValue = 'finalized') {
+  const url = `/catalogs${statusValue !== null ? `?status=${encodeURIComponent(statusValue)}` : ''}`;
+  return apiClient.get(url);
 }
 
 /**
diff --git a/src/utils/draftStorage.js b/src/utils/draftStorage.js
index 72d6739a..69fccdf0 100644
--- a/src/utils/draftStorage.js
+++ b/src/utils/draftStorage.js
@@ -98,6 +98,11 @@ export const getDraftDashboardUid = () => {
   return localStorage.getItem(DASHBOARD_UID_KEY);
 };
 
+// Check if there is a draft dashboard UID in localStorage
+export const hasDraftDashboardUid = () => {
+  return !!localStorage.getItem(DASHBOARD_UID_KEY);
+};
+
 // Clear the temporary dashboard UID
 export const clearDraftDashboardUid = () => {
   localStorage.removeItem(DASHBOARD_UID_KEY);

From 9a7a5423eb6b98903f445981568a12a0fc8803cb Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Wed, 21 May 2025 10:03:27 +0200
Subject: [PATCH 15/24] fix: enhance control error handling

---
 src/forms/control/new/form.jsx          | 14 +++++++++++---
 src/pages/app/catalog/CatalogWizard.jsx |  1 -
 src/pages/app/catalog/Catalogs.jsx      |  3 ++-
 src/services/controls.js                | 17 ++++++++++++++++-
 src/services/scopes.js                  |  9 +++++++++
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/forms/control/new/form.jsx b/src/forms/control/new/form.jsx
index fff42068..a1a623f0 100644
--- a/src/forms/control/new/form.jsx
+++ b/src/forms/control/new/form.jsx
@@ -182,13 +182,21 @@ export function NewControlForm({ catalogId, onClose, onSuccess, customSubmit = n
       }
     } catch (error) {
       console.error('Error creating control and scopes:', error);
-      const errorMessage = error.response?.data || 'Failed to create control and associate scopes';
-      toast.error(errorMessage);
+      // Handle specific error cases
+      if (error.status === 400) {
+        const errorMessage = error.message || 'Validation error in control data';
+        toast.error(errorMessage);
+      } else {
+        const errorMessage = error.response?.data?.msg || 
+                            error.response?.data?.message ||
+                            'Failed to create control and associate scopes';
+        toast.error(errorMessage);
+      }
     } finally {
       setLoading(false);
     }
   };
-  
+
   // Function to format date for display in the calendar field
   const formatDate = (date) => {
     if (!date) return '';
diff --git a/src/pages/app/catalog/CatalogWizard.jsx b/src/pages/app/catalog/CatalogWizard.jsx
index 4aabf914..ebb6eb0a 100644
--- a/src/pages/app/catalog/CatalogWizard.jsx
+++ b/src/pages/app/catalog/CatalogWizard.jsx
@@ -222,7 +222,6 @@ export function CatalogWizard() {
       
       // Delete dashboard draft if it exists
       const dashboardUid = getDraftDashboardUid();
-      console.log('Draft dashboard UID:', dashboardUid);
       if (dashboardUid) {
         try {
           await dashboardsService.delete(dashboardUid);
diff --git a/src/pages/app/catalog/Catalogs.jsx b/src/pages/app/catalog/Catalogs.jsx
index bac0e22c..96eb18c4 100644
--- a/src/pages/app/catalog/Catalogs.jsx
+++ b/src/pages/app/catalog/Catalogs.jsx
@@ -47,6 +47,7 @@ import { hasDraftData,
   getDraftDashboardUid 
 } from '@/utils/draftStorage';
 import { deleteControl } from '@/services/controls';
+import { deleteScopeSetsByControlId } from '@/services/scopes';
 
 const columnHelper = createColumnHelper();
 
@@ -121,6 +122,7 @@ export function Catalogs() {
       const controlIds = getDraftControlIds();
       for (const controlId of controlIds) {
         try {
+          await deleteScopeSetsByControlId(controlId);
           await deleteControl(controlId);
         } catch (err) {
           console.error(`Error deleting draft control ${controlId}:`, err);
@@ -129,7 +131,6 @@ export function Catalogs() {
 
       // Delete dashboard draft if it exists
       const dashboardUid = getDraftDashboardUid();
-      console.log('Draft dashboard UID:', dashboardUid);
       if (dashboardUid) {
         try {
           await dashboardsService.delete(dashboardUid);
diff --git a/src/services/controls.js b/src/services/controls.js
index feafa9d6..ce7ae9d7 100644
--- a/src/services/controls.js
+++ b/src/services/controls.js
@@ -136,9 +136,24 @@ export function deletePanelFromControl(controlId, panelId) {
  * Creates a new draft control
  * @param {object} controlData - Control data
  * @returns {Promise} - Promise with the created draft control
+ * @throws {Error} - Error with message from the server
  */
 export function createDraftControl(controlData) {
-  return apiClient.post('/controls/drafts', controlData);
+  return apiClient.post('/controls/drafts', controlData)
+    .then(response => response.data || response)
+    .catch(error => {
+      // Extract the specific error message if available
+      if (error.response && error.response.data) {
+        const errorData = error.response.data;
+        // Throw a new error with the specific message
+        throw {
+          status: error.response.status,
+          message: errorData.error || errorData.message || 'Failed to create draft control'
+        };
+      }
+      // Rethrow the original error if no detailed info
+      throw error;
+    });
 }
 
 /**
diff --git a/src/services/scopes.js b/src/services/scopes.js
index 4dd477d4..a70bb93e 100644
--- a/src/services/scopes.js
+++ b/src/services/scopes.js
@@ -89,3 +89,12 @@ export function updateScopeSet(id, scopeSetData) {
 export function getScopeSetsByControlId(controlId) {
   return apiClient.get(`/scopes/sets/control/${controlId}`);
 }
+
+/**
+ * Deletes all scope sets by control ID
+ * @param {string} controlId - Control ID
+ * @returns {Promise} - Promise with the response
+ */
+export function deleteScopeSetsByControlId(controlId) {
+  return apiClient.delete(`/scopes/sets/control/${controlId}`);
+}

From edd47cd0a3f0e606fb56a607431cf9b76007a408 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Wed, 21 May 2025 16:06:09 +0200
Subject: [PATCH 16/24] fix: improve panel handling

---
 src/components/catalog/CatalogDashboardStep.jsx | 4 ++++
 src/forms/dashboard/panel/form.jsx              | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/catalog/CatalogDashboardStep.jsx b/src/components/catalog/CatalogDashboardStep.jsx
index 1f79180d..0e9e19e7 100644
--- a/src/components/catalog/CatalogDashboardStep.jsx
+++ b/src/components/catalog/CatalogDashboardStep.jsx
@@ -184,6 +184,10 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
     setSelectedPanel(fields.length);
     setShowAddPanelForm(false);
     toast.success('Panel added to dashboard');
+    
+    if (tempDashboardUid) {
+      loadDashboardPanels(tempDashboardUid);
+    }
   };
 
   const handlePanelRemoved = (panelId) => {
diff --git a/src/forms/dashboard/panel/form.jsx b/src/forms/dashboard/panel/form.jsx
index 770aad0a..ec747e14 100644
--- a/src/forms/dashboard/panel/form.jsx
+++ b/src/forms/dashboard/panel/form.jsx
@@ -245,6 +245,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
 
   // Submit the form to create a new panel
   const onSubmit = async (data) => {
+    console.log('Form data:', data);
     setLoading(true);
 
     try {
@@ -254,6 +255,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
         controlId: data.controlId === 'none' ? '' : data.controlId, // Convertir "none" a string vacío
         rawSql: typeof rawSql === 'string' ? rawSql : JSON.stringify(rawSql)
       };
+      console.log('Panel data to be sent:', panelData);
       
       // Send the panel data to the API
       const response = await dashboardsService.addPanel(dashboardUid, panelData);
@@ -354,7 +356,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
                       <SelectContent className="max-h-60 overflow-y-auto">
                         <SelectItem value="none">None</SelectItem>
                         {controls.map((control) => (
-                          <SelectItem key={control.id} value={control.id}>
+                          <SelectItem key={control.id} value={control.name}>
                             {control.name}
                           </SelectItem>
                         ))}

From b394db555abb89785422a7f258d702835993971d Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Thu, 3 Jul 2025 11:36:06 +0200
Subject: [PATCH 17/24] feat(panels): added panel card

---
 .../catalog/CatalogControlsStep.jsx           |  8 +-
 .../catalog/CatalogDashboardStep.jsx          | 25 +-----
 src/components/dashboard/dashboard-panel.jsx  |  1 +
 src/forms/dashboard/panel/form.jsx            | 82 +++++++++++++++++--
 src/forms/dashboard/panel/schemas.js          | 22 ++---
 5 files changed, 92 insertions(+), 46 deletions(-)

diff --git a/src/components/catalog/CatalogControlsStep.jsx b/src/components/catalog/CatalogControlsStep.jsx
index f84e5435..956a5374 100644
--- a/src/components/catalog/CatalogControlsStep.jsx
+++ b/src/components/catalog/CatalogControlsStep.jsx
@@ -367,13 +367,13 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
                   </Button>
                 </div>
               </CardHeader>
-              <CardContent className="p-4 pt-2">
-                <p className="text-sm">{control.description}</p>
-                
+              <CardContent className="p-4 pt-2 text-left">
                 
                 
                 <div className="grid mt-2 gap-1 text-xs text-gray-500">
-                  
+                  <p> Description: <span className="text-primary">
+                    {control.description} </span></p>
+
                   <div className='flex'>Start Date: {new Date(control.startDate).toLocaleDateString()}</div>
                   {control.endDate && <div className='flex'>End Date: {new Date(control.endDate).toLocaleDateString()}</div>}
                   {control.scopes && Object.keys(control.scopes).length > 0 && (
diff --git a/src/components/catalog/CatalogDashboardStep.jsx b/src/components/catalog/CatalogDashboardStep.jsx
index 0e9e19e7..d9a2bd54 100644
--- a/src/components/catalog/CatalogDashboardStep.jsx
+++ b/src/components/catalog/CatalogDashboardStep.jsx
@@ -325,30 +325,11 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
                     <Card>
                       <CardHeader>
                         <div className="flex items-center justify-between">
-                          <CardTitle className="text-base">Panel Configuration</CardTitle>
+                          <CardTitle className="text-base">{panel.title}</CardTitle>
                           <Badge variant="outline">{panel.type}</Badge>
                         </div>
                       </CardHeader>
                       <CardContent className="space-y-4">
-                        {/* Panel details */}
-                        <div className="grid grid-cols-2 gap-4">
-                          <div>
-                            <FormLabel>Panel Title</FormLabel>
-                            <div className="font-medium">{panel.title}</div>
-                          </div>
-                          {panel.controlId && (
-                            <div>
-                              <FormLabel>Associated Control</FormLabel>
-                              <div className="font-medium">
-                                {(() => {
-                                  const control = controls.find(c => c.id === panel.controlId);
-                                  return control ? control.name : panel.controlId;
-                                })()}
-                              </div>
-                            </div>
-                          )}
-                        </div>
-
                         {panel.panelId && tempDashboardUid && (
                           <div>
                             <FormLabel>Preview</FormLabel>
@@ -363,7 +344,7 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
                           </div>
                         )}
                       </CardContent>
-                      <CardFooter className="flex justify-between">
+                      {/* <CardFooter className="flex justify-between">
                         <Button 
                           type="button" 
                           variant="destructive"
@@ -377,7 +358,7 @@ export function CatalogDashboardStep({ initialConfig = {}, controls = [], catalo
                           )}
                           Remove Panel
                         </Button>
-                      </CardFooter>
+                      </CardFooter> */}
                     </Card>
                   </TabsContent>
                 ))}
diff --git a/src/components/dashboard/dashboard-panel.jsx b/src/components/dashboard/dashboard-panel.jsx
index f7158de4..b71618a1 100644
--- a/src/components/dashboard/dashboard-panel.jsx
+++ b/src/components/dashboard/dashboard-panel.jsx
@@ -135,6 +135,7 @@ export function DashboardPanel({ dashboardUid, panel, height = 300, preview = fa
           <Skeleton className="h-full w-full" />
         </div>
       )}
+      {console.log('Rendering panel:', panel.id, 'with URL:', iframeUrl)}
       
       <iframe
         title={panel.title || `Panel ${panel.id}`}
diff --git a/src/forms/dashboard/panel/form.jsx b/src/forms/dashboard/panel/form.jsx
index ec747e14..6c41b9ae 100644
--- a/src/forms/dashboard/panel/form.jsx
+++ b/src/forms/dashboard/panel/form.jsx
@@ -246,6 +246,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
   // Submit the form to create a new panel
   const onSubmit = async (data) => {
     console.log('Form data:', data);
+    console.log('Form errors:', form.formState.errors);
     setLoading(true);
 
     try {
@@ -289,6 +290,31 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
     }
   };
 
+  // Handle form validation errors
+  const onInvalid = (errors) => {
+    console.error('Form validation errors:', errors);
+    
+    // Show specific error messages
+    if (errors.title) {
+      toast.error('Panel title is required');
+    }
+    if (errors.sqlQuery?.options?.attributes) {
+      toast.error('At least one field must be selected');
+    }
+    if (errors.type) {
+      toast.error('Panel type must be selected');
+    }
+    if (errors.table) {
+      toast.error('Table is required');
+    }
+    
+    // Show a general validation error message if there are any errors
+    const errorCount = Object.keys(errors).length;
+    if (errorCount > 0) {
+      toast.error(`Form has ${errorCount} validation error(s). Please check all required fields.`);
+    }
+  };
+
   return (
     <Dialog open={true} onOpenChange={onClose} className="max-w-5xl w-full">
       <DialogContent className="max-h-[90vh] max-w-5xl w-full overflow-y-auto">
@@ -296,7 +322,29 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
           <DialogTitle>Add New Panel to Dashboard</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <form onSubmit={form.handleSubmit(onSubmit, onInvalid)} className="space-y-6">
+            {/* Show validation errors */}
+            {Object.keys(form.formState.errors).length > 0 && (
+              <div className="border border-red-200 rounded-md bg-red-50 p-4">
+                <div className="text-sm text-red-700">
+                  <p className="mb-2 font-medium">Please fix the following errors:</p>
+                  <ul className="list-disc pl-5 space-y-1">
+                    {form.formState.errors.title && (
+                      <li>Panel title is required</li>
+                    )}
+                    {form.formState.errors.type && (
+                      <li>Panel type must be selected</li>
+                    )}
+                    {form.formState.errors.table && (
+                      <li>Table is required</li>
+                    )}
+                    {form.formState.errors.sqlQuery?.options?.attributes && (
+                      <li>At least one field must be selected</li>
+                    )}
+                  </ul>
+                </div>
+              </div>
+            )}
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               <FormField
                 control={form.control}
@@ -387,10 +435,10 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
                 <Card>
                   <CardContent className="pt-6">
                     <div className="space-y-4">
-                      {/* Selected Fields Section - ahora con toggle */}
+                      {/* Selected Fields Section - now with toggle */}
                       <div className="space-y-2">
-                        <div 
-                          className="flex cursor-pointer items-center justify-between" 
+                        <div
+                          className="flex cursor-pointer items-center justify-between"
                           onClick={() => setFieldsExpanded(!fieldsExpanded)}
                         >
                           <div className="flex items-center space-x-2">
@@ -459,8 +507,8 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
 
                       {/* Conditions Section */}
                       <div className="space-y-2">
-                        <div 
-                          className="flex cursor-pointer items-center justify-between" 
+                        <div
+                          className="flex cursor-pointer items-center justify-between"
                           onClick={() => setConditionsExpanded(!conditionsExpanded)}
                         >
                           <div className="flex items-center space-x-2">
@@ -521,7 +569,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
                                     ))}
                                   </SelectContent>
                                 </Select>
-        
+
                                 <Select
                                   value={condition.operator}
                                   onValueChange={(value) => {
@@ -541,7 +589,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
                                     ))}
                                   </SelectContent>
                                 </Select>
-                                
+
                                 <Input
                                   className="min-w-[150px] flex-1"
                                   placeholder="Value"
@@ -552,7 +600,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
                                     setValue('sqlQuery.options.where', updatedConditions);
                                   }}
                                 />
-                                
+
                                 <Button
                                   type="button"
                                   variant="ghost"
@@ -725,6 +773,22 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
               <Button onClick={onClose} variant="outline" type="button">
                 Cancel
               </Button>
+              {import.meta.env.VITE_NODE_ENV === 'development' && (
+                <Button 
+                  type="button" 
+                  variant="secondary" 
+                  size="sm"
+                  onClick={() => {
+                    console.log('Form state:', form.formState);
+                    console.log('Form values:', form.getValues());
+                    console.log('Form errors:', form.formState.errors);
+                    console.log('Form is valid:', form.formState.isValid);
+                    toast.info('Check console for form debug info');
+                  }}
+                >
+                  Debug
+                </Button>
+              )}
               <Button type="submit" disabled={loading}>
                 {loading ? 'Adding...' : 'Add Panel'}
               </Button>
diff --git a/src/forms/dashboard/panel/schemas.js b/src/forms/dashboard/panel/schemas.js
index ced065c0..0e92f1b9 100644
--- a/src/forms/dashboard/panel/schemas.js
+++ b/src/forms/dashboard/panel/schemas.js
@@ -8,17 +8,17 @@ export const panelSchema = z.object({
   description: z.string().optional(),
   table: z.string().min(1, { message: 'Table is required' }),
   sqlQuery: z.object({
-    aggregations: z.array(z.object({
-      func: z.enum(['COUNT', 'SUM', 'AVG', 'MIN', 'MAX']),
-      attr: z.string().min(1)
-    })).min(1, { message: 'At least one aggregation is required' }),
-    whereConditions: z.array(z.object({
-      key: z.string().min(1),
-      operator: z.enum(['=', '>', '<', '>=', '<=', '<>', 'LIKE', 'IN', 'NOT IN']),
-      value: z.string().min(1)
-    })).optional(),
-    whereLogic: z.enum(['AND', 'OR']).optional(),
-    table: z.string().min(1)
+    model: z.string().min(1, { message: 'Model is required' }),
+    operation: z.string().min(1, { message: 'Operation is required' }),
+    options: z.object({
+      attributes: z.array(z.string().min(1)).min(1, { message: 'At least one field must be selected' }),
+      where: z.array(z.object({
+        key: z.string().min(1),
+        operator: z.enum(['=', '>', '<', '>=', '<=', '<>', 'LIKE', 'IN', 'NOT IN']),
+        value: z.string().min(1)
+      })).optional(),
+      whereLogic: z.enum(['AND', 'OR']).optional()
+    })
   }),
   showLegend: z.boolean().default(true).optional(),
   unit: z.string().optional(),

From cdaad4d188fb84bf8415f2197f4954091b239741 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Tue, 17 Jun 2025 19:28:44 +0200
Subject: [PATCH 18/24] feat: added databinder views

---
 src/App.jsx                                   |  16 +
 .../catalog/CatalogControlsStep.jsx           |   9 +-
 src/components/layouts/sidebar.jsx            |  12 +-
 src/forms/control/new/form.jsx                |  47 +-
 src/forms/dashboard/panel/form.jsx            |   7 +-
 src/pages/app/ComputationDetails.jsx          |  43 +-
 src/pages/app/ControlDetails.jsx              | 129 +--
 src/pages/app/Mashups.jsx                     |  21 +-
 src/pages/app/datasource/DatasourceCreate.jsx | 527 +++++++++++++
 src/pages/app/datasource/DatasourceEdit.jsx   | 573 ++++++++++++++
 src/pages/app/datasource/Datasources.jsx      | 480 ++++++++++++
 src/pages/app/linker/LinkerCreate.jsx         | 702 +++++++++++++++++
 src/pages/app/linker/LinkerEdit.jsx           | 737 ++++++++++++++++++
 src/pages/app/linker/Linkers.jsx              | 418 ++++++++++
 src/services/datasources.js                   |  86 ++
 src/services/linkers.js                       |  73 ++
 src/services/mockData.js                      | 289 +++++++
 17 files changed, 4087 insertions(+), 82 deletions(-)
 create mode 100644 src/pages/app/datasource/DatasourceCreate.jsx
 create mode 100644 src/pages/app/datasource/DatasourceEdit.jsx
 create mode 100644 src/pages/app/datasource/Datasources.jsx
 create mode 100644 src/pages/app/linker/LinkerCreate.jsx
 create mode 100644 src/pages/app/linker/LinkerEdit.jsx
 create mode 100644 src/pages/app/linker/Linkers.jsx
 create mode 100644 src/services/datasources.js
 create mode 100644 src/services/linkers.js
 create mode 100644 src/services/mockData.js

diff --git a/src/App.jsx b/src/App.jsx
index 2ea43d7b..4f2f0189 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -17,6 +17,12 @@ import { Dashboards } from '@/pages/app/Dashboards';
 import { DashboardDetails } from '@/pages/app/dashboard/DashboardDetails';
 import { FolderDetails } from '@/pages/app/dashboard/FolderDetails';
 import { Editor } from '@/pages/app/Editor';
+import { Datasources } from '@/pages/app/datasource/Datasources';
+import { DatasourceCreate } from '@/pages/app/datasource/DatasourceCreate';
+import { DatasourceEdit } from '@/pages/app/datasource/DatasourceEdit';
+import { Linkers } from '@/pages/app/linker/Linkers';
+import { LinkerCreate } from '@/pages/app/linker/LinkerCreate';
+import { LinkerEdit } from '@/pages/app/linker/LinkerEdit';
 import MainLayout from '@/layouts/MainLayout';
 import AppLayout from '@/layouts/AppLayout';
 import { Toaster } from '@/components/ui/sonner';
@@ -63,6 +69,16 @@ function App() {
                 <Route path=":id" element={<DashboardDetails />} />
                 <Route path="folders/:id" element={<FolderDetails />} />
               </Route>
+              <Route path="datasources">
+                <Route index element={<Datasources />} />
+                <Route path="new" element={<DatasourceCreate />} />
+                <Route path=":id/edit" element={<DatasourceEdit />} />
+              </Route>
+              <Route path="linkers">
+                <Route index element={<Linkers />} />
+                <Route path="new" element={<LinkerCreate />} />
+                <Route path=":id/edit" element={<LinkerEdit />} />
+              </Route>
               <Route path="scopes" element={<Scopes />} />
               <Route path="mashups" element={<Mashups />} />
               <Route path="setting-2fa" element={<TwoFADetails />} />
diff --git a/src/components/catalog/CatalogControlsStep.jsx b/src/components/catalog/CatalogControlsStep.jsx
index 956a5374..21e762ca 100644
--- a/src/components/catalog/CatalogControlsStep.jsx
+++ b/src/components/catalog/CatalogControlsStep.jsx
@@ -367,13 +367,14 @@ export function CatalogControlsStep({ initialControls = [], catalogId, onSubmit,
                   </Button>
                 </div>
               </CardHeader>
-              <CardContent className="p-4 pt-2 text-left">
+              <CardContent className="p-4 pt-2">
+                <p className="text-left text-sm">{control.description}</p>
+                
                 
                 
                 <div className="grid mt-2 gap-1 text-xs text-gray-500">
-                  <p> Description: <span className="text-primary">
-                    {control.description} </span></p>
-
+                  <p className="text-left">Linker: SharePoint Linker</p>
+                  
                   <div className='flex'>Start Date: {new Date(control.startDate).toLocaleDateString()}</div>
                   {control.endDate && <div className='flex'>End Date: {new Date(control.endDate).toLocaleDateString()}</div>}
                   {control.scopes && Object.keys(control.scopes).length > 0 && (
diff --git a/src/components/layouts/sidebar.jsx b/src/components/layouts/sidebar.jsx
index 0ea44522..6ad4f7eb 100644
--- a/src/components/layouts/sidebar.jsx
+++ b/src/components/layouts/sidebar.jsx
@@ -1,4 +1,4 @@
-import {Home, FolderOpen, Shapes, Workflow, FileSliders, ChartNoAxesCombined, ChevronRight, ChevronsUpDown, LogOut, ShieldHalf, SquareAsterisk } from 'lucide-react';
+import {Home, FolderOpen, Shapes, Workflow, FileSliders, ChartNoAxesCombined, ChevronRight, ChevronsUpDown, LogOut, ShieldHalf, SquareAsterisk, Database, Link2 } from 'lucide-react';
 import { Link } from 'react-router';
 import { MoreHorizontal } from 'lucide-react';
 import {
@@ -54,6 +54,16 @@ const data = [
         url: '/app/dashboards',
         icon: ChartNoAxesCombined,
       },
+      {
+        title: 'Datasources',
+        url: '/app/datasources',
+        icon: Database,
+      },
+      {
+        title: 'Linkers',
+        url: '/app/linkers',
+        icon: Link2,
+      },
       {
         title: 'Scopes',
         url: '/app/scopes',
diff --git a/src/forms/control/new/form.jsx b/src/forms/control/new/form.jsx
index a1a623f0..c936dcc6 100644
--- a/src/forms/control/new/form.jsx
+++ b/src/forms/control/new/form.jsx
@@ -19,6 +19,7 @@ import { cn } from '@/lib/utils';
 import { format } from 'date-fns';
 import { controlSchema } from './schemas';
 import { saveDraftCatalogId } from '@/utils/draftStorage';
+import { getAllLinkers } from '@/services/linkers';
 
 export function NewControlForm({ catalogId, onClose, onSuccess, customSubmit = null }) {
   const [loading, setLoading] = useState(false);
@@ -30,6 +31,7 @@ export function NewControlForm({ catalogId, onClose, onSuccess, customSubmit = n
   const [scopeValue, setScopeValue] = useState('');
   const [selectedParam, setSelectedParam] = useState('');
   const [paramValue, setParamValue] = useState('');
+  const [availableLinkers, setAvailableLinkers] = useState([]);
 
   // Setup form with zod validation
   const form = useForm({
@@ -43,7 +45,8 @@ export function NewControlForm({ catalogId, onClose, onSuccess, customSubmit = n
       mashupId: '',
       params: {},
       scopes: {},
-      catalogId: catalogId
+      catalogId: catalogId,
+      linkerId: '', // Añadido linkerId
     }
   });
 
@@ -51,6 +54,7 @@ export function NewControlForm({ catalogId, onClose, onSuccess, customSubmit = n
   const watchMashupId = watch('mashupId');
   const watchParams = watch('params');
   const watchScopes = watch('scopes');
+  const watchLinkerId = form.watch('linkerId');
 
   useEffect(() => {
     // Fetch available scopes for the dropdown
@@ -75,8 +79,20 @@ export function NewControlForm({ catalogId, onClose, onSuccess, customSubmit = n
       }
     };
 
+    // Fetch available linkers for the dropdown
+    const fetchLinkers = async () => {
+      try {
+        const response = await getAllLinkers();
+        setAvailableLinkers(response);
+      } catch (error) {
+        console.error('Error fetching linkers:', error);
+        toast.error('Failed to fetch available linkers');
+      }
+    };
+
     fetchScopes();
     fetchMashups();
+    fetchLinkers();
   }, []);
 
   // When mashupId changes, fetch the params
@@ -388,6 +404,35 @@ export function NewControlForm({ catalogId, onClose, onSuccess, customSubmit = n
               )}
             />
 
+            {/* Nuevo campo para seleccionar Linker */}
+            <FormField
+              control={form.control}
+              name="linkerId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Linker*</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select linker" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent className="max-h-60 overflow-y-auto">
+                      {availableLinkers.map((linker) => (
+                        <SelectItem key={linker.id} value={linker.id}>
+                          {linker.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
             <div className="space-y-2">
               <FormLabel>Parameters*</FormLabel>
               <div className="flex space-x-2">
diff --git a/src/forms/dashboard/panel/form.jsx b/src/forms/dashboard/panel/form.jsx
index 6c41b9ae..9ee7c89c 100644
--- a/src/forms/dashboard/panel/form.jsx
+++ b/src/forms/dashboard/panel/form.jsx
@@ -153,6 +153,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
       // Create complete configuration for temporary dashboard preview
       const previewConfig = {
         title: panelData.title || 'Panel Preview',
+        displayName: panelData.title || '',
         type: panelData.type,
         description: panelData.description || '',
         sql: rawSql || '',
@@ -214,7 +215,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
     if (availableFields.length > 0) {
       setValue('sqlQuery.options.attributes', [...currentFields, availableFields[0]]);
     } else {
-      toast.info('Todos los campos ya han sido seleccionados');
+      toast.info('All available fields have been selected');
     }
   };
 
@@ -222,7 +223,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
   const removeField = (index) => {
     const currentFields = getValues('sqlQuery.options.attributes') || [];
     if (currentFields.length <= 1) {
-      toast.error('Al menos un campo debe estar seleccionado');
+      toast.error('At least one field must be selected');
       return;
     }
     setValue('sqlQuery.options.attributes', currentFields.filter((_, i) => i !== index));
@@ -394,7 +395,7 @@ export function AddPanelForm({ dashboardUid, onClose, onSuccess, dashboardTimeRa
                 name="controlId"
                 render={({ field }) => (
                   <FormItem className="min-w-[200px] flex-1">
-                    <FormLabel>Associate with Control (Optional)</FormLabel>
+                    <FormLabel>Associate with Control*</FormLabel>
                     <Select onValueChange={field.onChange} value={field.value}>
                       <FormControl>
                         <SelectTrigger>
diff --git a/src/pages/app/ComputationDetails.jsx b/src/pages/app/ComputationDetails.jsx
index 5f8b4fe5..a378615c 100644
--- a/src/pages/app/ComputationDetails.jsx
+++ b/src/pages/app/ComputationDetails.jsx
@@ -25,39 +25,50 @@ const columnHelper = createColumnHelper();
 // Mock evidences if needed when we don't have real data
 const mockEvidences = [
   { 
-    id: 'fbc4c50a-c21a-45f3-87af-27116ac8d56c', 
-    key: 'AND operation', 
-    value: [true, true], 
+    id: 'e1', 
+    key: 'procedure_formally_documented', 
+    value: 'Procedure documented in the internal security manual', 
     result: true,
     from: '2025-01-01T01:00:00',
     to: '2025-01-01T01:59:59'
   },
-  {
-    id: '2cfd4036-22c7-4533-babf-b339f2237acb',
-    key: 'url',
-    value: 'https://github.com/statuscompliance/infrastructure/blob/examples/files/receipts/payment81001.pdf',
+  { 
+    id: 'e2', 
+    key: 'signed_or_reviewed_by_stic', 
+    value: true, // boolean makes sense here
     result: true,
     from: '2025-01-01T01:00:00',
     to: '2025-01-01T01:59:59'
   },
   { 
-    id: '3', 
-    key: 'password_length', 
-    value: 10, 
+    id: 'e3', 
+    key: 'detailed_steps_included', 
+    value: 'Steps for procedure clearly described with step-by-step instructions', 
     result: true,
     from: '2025-01-01T01:00:00',
     to: '2025-01-01T01:59:59'
   },
   { 
-    id: '4', 
-    key: 'special_char_present', 
-    value: false, 
-    result: false,
+    id: 'e4', 
+    key: 'assigned_responsible_role', 
+    value: 'Role explicitly assigned to Security Officer', 
+    result: true,
     from: '2025-01-01T01:00:00',
     to: '2025-01-01T01:59:59'
   },
+  { 
+    id: 'e5', 
+    key: 'guidelines_for_anomaly_reporting', 
+    value: 'Procedure includes instructions to report anomalous behavior', 
+    result: true,
+    from: '2025-01-01T01:00:00',
+    to: '2025-01-01T01:59:59'
+  }
 ];
 
+
+
+
 export function ComputationDetails() {
   const params = useParams();
   const location = useLocation();
@@ -182,7 +193,7 @@ export function ComputationDetails() {
   if (loading) {
     return (
       <Page 
-        className="mx-auto p-4 container space-y-6" 
+        className="container mx-auto p-4 space-y-6" 
         catalogData={catalogData}
         computationDate={computationDate}
       >
@@ -195,7 +206,7 @@ export function ComputationDetails() {
 
   return (
     <Page 
-      className="mx-auto p-4 container space-y-6" 
+      className="container mx-auto p-4 space-y-6" 
       catalogData={catalogData}
       computationDate={computationDate}
     >
diff --git a/src/pages/app/ControlDetails.jsx b/src/pages/app/ControlDetails.jsx
index 631a308d..047912de 100644
--- a/src/pages/app/ControlDetails.jsx
+++ b/src/pages/app/ControlDetails.jsx
@@ -26,59 +26,68 @@ import { getComputationsByControlId } from '@/services/controls';
 
 const columnHelper = createColumnHelper();
 
-// Mock computations data based on the provided example
-const randomLocations = ['Champs-Élysées', 'Montmartre', 'La Défense', 'Opéra', 'Saint-Germain'];
-
 const mockComputations = [
   {
     id: '60bf2620-1075-4d00-aead-7e57fe811469',
     computationGroup: '6956b9d1-8b7d-4422-a7d7-cc4f8dba523f',
     value: true,
     scope: {
-      country: 'France',
-      city: 'Paris',
-      declaration: 'declaration 86791',
-      location: randomLocations[0],
+      country: 'Spain',
+      city: 'Seville'
     },
     evidences: [
       { 
-        id: 'fbc4c50a-c21a-45f3-87af-27116ac8d56c', 
-        key: 'AND operation', 
-        value: [true, true], 
+        id: 'e1', 
+        key: 'procedure_formally_documented', 
+        value: true, 
         result: true,
-        from: '2023-06-01T08:00:00',
-        to: '2023-06-01T17:30:00'
+        from: '2025-01-01T08:00:00',
+        to: '2025-01-01T17:30:00'
+      },
+      {
+        id: 'e2',
+        key: 'assigned_responsible_role',
+        value: true,
+        result: true,
+        from: '2025-01-01T08:00:00',
+        to: '2025-01-01T17:30:00'
       }
     ],
     period: {
-      from: '2025-01-01T00:00:00.000Z',
-      to: '2025-01-01T00:59:59.999Z'
+      from: '2025-09-18T22:00:00.000Z',
+      to: '2025-09-21T22:00:00.000Z'
     },
     controlId: '1234'
   },
   {
     id: '70bf2620-1075-4d00-aead-7e57fe811470',
     computationGroup: '7956b9d1-8b7d-4422-a7d7-cc4f8dba524f',
-    value: false,
+    value: true,
     scope: {
-      country: 'France',
-      city: 'Paris',
-      declaration: 'declaration 12345',
-      location: randomLocations[1],
+      country: 'Spain',
+      city: 'Seville'
     },
     evidences: [
       {
-        id: '2cfd4036-22c7-4533-babf-b339f2237acb',
-        key: 'url',
-        value: 'https://github.com/statuscompliance/infrastructure/blob/examples/files/receipts/payment81001.pdf',
+        id: 'e3',
+        key: 'signed_or_reviewed_by_stic',
+        value: true,
         result: true,
-        from: '2023-06-02T09:15:00',
-        to: '2023-06-02T19:45:00'
+        from: '2025-01-02T09:15:00',
+        to: '2025-01-02T19:45:00'
+      },
+      {
+        id: 'e4',
+        key: 'detailed_steps_included',
+        value: true,
+        result: true,
+        from: '2025-01-02T09:15:00',
+        to: '2025-01-02T19:45:00'
       }
     ],
     period: {
-      from: '2025-01-02T00:00:00.000Z',
-      to: '2025-01-02T00:59:59.999Z'
+      from: '2025-09-22T22:00:00.000Z',
+      to: '2025-09-25T22:00:00.000Z'
     },
     controlId: '1234'
   },
@@ -87,55 +96,69 @@ const mockComputations = [
     computationGroup: '8956b9d1-8b7d-4422-a7d7-cc4f8dba525f',
     value: true,
     scope: {
-      country: 'France',
-      city: 'Paris',
-      declaration: 'declaration 67890',
-      location: randomLocations[2],
+      country: 'Spain',
+      city: 'Seville'
     },
     evidences: [
       { 
-        id: '3', 
-        key: 'password_length', 
-        value: 10, 
+        id: 'e5', 
+        key: 'explicit_role_responsibilities', 
+        value: true, 
+        result: true,
+        from: '2025-01-03T07:30:00',
+        to: '2025-01-03T16:00:00'
+      },
+      {
+        id: 'e6',
+        key: 'guidelines_for_anomaly_reporting',
+        value: true,
         result: true,
-        from: '2023-06-03T07:30:00',
-        to: '2023-06-03T16:00:00'
+        from: '2025-01-03T07:30:00',
+        to: '2025-01-03T16:00:00'
       }
     ],
     period: {
-      from: '2025-01-03T00:00:00.000Z',
-      to: '2025-01-03T00:59:59.999Z'
+      from: '2025-09-26T22:00:00.000Z',
+      to: '2025-09-29T22:00:00.000Z'
     },
     controlId: '1234'
   },
   {
     id: '90bf2620-1075-4d00-aead-7e57fe811472',
     computationGroup: '9956b9d1-8b7d-4422-a7d7-cc4f8dba526f',
-    value: false,
+    value: true,
     scope: {
-      country: 'France',
-      city: 'Paris',
-      declaration: 'declaration 54321',
-      location: randomLocations[3],
+      country: 'Spain',
+      city: 'Seville'
     },
     evidences: [
       { 
-        id: '4', 
-        key: 'special_char_present', 
-        value: false, 
-        result: false,
-        from: '2023-06-04T10:00:00',
-        to: '2023-06-04T18:30:00'
+        id: 'e7', 
+        key: 'procedure_formally_documented', 
+        value: true, 
+        result: true,
+        from: '2025-01-04T10:00:00',
+        to: '2025-01-04T18:30:00'
+      },
+      {
+        id: 'e8',
+        key: 'signed_or_reviewed_by_stic',
+        value: true,
+        result: true,
+        from: '2025-01-04T10:00:00',
+        to: '2025-01-04T18:30:00'
       }
     ],
     period: {
-      from: '2025-01-04T00:00:00.000Z',
-      to: '2025-01-04T00:59:59.999Z'
+      from: '2025-09-30T22:00:00.000Z',
+      to: '2025-10-03T22:00:00.000Z'
     },
     controlId: '1234'
   }
 ];
 
+
+
 // Mock scopes data
 const mockAvailableScopes = [
   { id: 'env-1', name: 'environment' },
@@ -329,7 +352,7 @@ export function ControlDetails() {
   if (loading) {
     return (
       <Page 
-        className="mx-auto p-4 container space-y-6" 
+        className="container mx-auto p-4 space-y-6" 
         catalogData={catalogData}
       >
         <div className="h-64 flex items-center justify-center">
@@ -342,7 +365,7 @@ export function ControlDetails() {
   if (!control) {
     return (
       <Page 
-        className="mx-auto p-4 container space-y-6" 
+        className="container mx-auto p-4 space-y-6" 
         catalogData={catalogData}
       >
         <div className="h-64 flex items-center justify-center">
@@ -354,7 +377,7 @@ export function ControlDetails() {
 
   return (
     <Page 
-      className="mx-auto p-4 container space-y-6" 
+      className="container mx-auto p-4 space-y-6" 
       catalogData={catalogData} // Pasamos los datos de catálogo al componente Page
     >
       <Card>
diff --git a/src/pages/app/Mashups.jsx b/src/pages/app/Mashups.jsx
index 95954e1c..8aaab41f 100644
--- a/src/pages/app/Mashups.jsx
+++ b/src/pages/app/Mashups.jsx
@@ -17,7 +17,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Edit, Trash, MoreHorizontal, ChevronDown, Loader2, ExternalLink } from 'lucide-react';
+import { Edit, Trash, MoreHorizontal, ChevronDown, Loader2, ExternalLink, Play } from 'lucide-react';
 import { toast } from 'sonner';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import Page from '@/components/basic-page.jsx';
@@ -96,6 +96,15 @@ export function Mashups() {
     }
   }, [flows, flowToDelete]);
 
+  const handleTest = useCallback(async (flow) => {
+    try {
+      // Implementation for testing the flow would go here
+      toast.success(`Testing flow "${flow.label || 'Untitled Flow'}"`);
+    } catch (err) {
+      toast.error('Failed to test flow: ' + err.message);
+    }
+  }, []);
+
   const columns = useMemo(
     () => [
       {
@@ -162,15 +171,19 @@ export function Mashups() {
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
                 <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                <DropdownMenuItem onClick={() => handleTest(flow)} className="">
+                  <Play className="mr-2 h-4 w-4 text-green-600" />
+                  Test
+                </DropdownMenuItem>
                 <DropdownMenuItem onClick={() => window.open(`/red#flow/${flow.id}`, '_blank')}>
                   <Edit className="mr-2 h-4 w-4" />
                   Edit in Node-RED
                 </DropdownMenuItem>
                 <DropdownMenuItem 
                   onClick={() => handleDeleteConfirm(flow)}
-                  className="text-red-600"
+                  className=""
                 >
-                  <Trash className="mr-2 h-4 w-4" />
+                  <Trash className="mr-2 h-4 w-4 text-red-600" />
                   Delete
                 </DropdownMenuItem>
               </DropdownMenuContent>
@@ -179,7 +192,7 @@ export function Mashups() {
         },
       },
     ],
-    [handleDeleteConfirm, userData.authority]
+    [handleDeleteConfirm, handleTest, userData.authority]
   );
 
   const table = useReactTable({
diff --git a/src/pages/app/datasource/DatasourceCreate.jsx b/src/pages/app/datasource/DatasourceCreate.jsx
new file mode 100644
index 00000000..888e53b3
--- /dev/null
+++ b/src/pages/app/datasource/DatasourceCreate.jsx
@@ -0,0 +1,527 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import Page from '@/components/basic-page.jsx';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ArrowLeft, Loader2, Save, Database, Shield, CheckCircle2 } from 'lucide-react';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/components/ui/tabs';
+import { createDatasource, getDatasourceTypes, testDatasourceConnection } from '@/services/datasources';
+
+export function DatasourceCreate() {
+  const navigate = useNavigate();
+  const [datasourceTypes, setDatasourceTypes] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [testingConnection, setTestingConnection] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState(null);
+  const [activeTab, setActiveTab] = useState('details');
+  const [selectedType, setSelectedType] = useState('');
+  const [formData, setFormData] = useState({
+    name: '',
+    type: '',
+    description: '',
+    configuration: {}
+  });
+  const [errors, setErrors] = useState({});
+
+  useEffect(() => {
+    async function fetchDatasourceTypes() {
+      try {
+        const types = await getDatasourceTypes();
+        setDatasourceTypes(types);
+      } catch (err) {
+        toast.error('Failed to load datasource types');
+        console.error('Error fetching datasource types:', err);
+      }
+    }
+    
+    fetchDatasourceTypes();
+  }, []);
+
+  const handleTypeChange = (value) => {
+    setSelectedType(value);
+    setFormData({
+      ...formData,
+      type: value,
+      // Reset configuration when type changes
+      configuration: {}
+    });
+    setConnectionStatus(null);
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+    
+    // Clear error for this field
+    if (errors[name]) {
+      setErrors({
+        ...errors,
+        [name]: ''
+      });
+    }
+  };
+
+  const handleConfigChange = (field, value) => {
+    setFormData({
+      ...formData,
+      configuration: {
+        ...formData.configuration,
+        [field]: value
+      }
+    });
+    
+    // Clear error for this field
+    if (errors[`config.${field}`]) {
+      setErrors({
+        ...errors,
+        [`config.${field}`]: ''
+      });
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+    
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+    }
+    
+    if (!formData.type) {
+      newErrors.type = 'Datasource type is required';
+    }
+    
+    if (!formData.description.trim()) {
+      newErrors.description = 'Description is required';
+    }
+    
+    const selectedTypeData = datasourceTypes.find(type => type.id === formData.type);
+    if (selectedTypeData) {
+      // Validate required auth fields
+      selectedTypeData.authFields.forEach(field => {
+        if (field.required && !formData.configuration[field.name]) {
+          newErrors[`config.${field.name}`] = `${field.label} is required`;
+        }
+      });
+      
+      // Validate required config fields
+      if (selectedTypeData.configFields) {
+        selectedTypeData.configFields.forEach(field => {
+          if (field.required && !formData.configuration[field.name]) {
+            newErrors[`config.${field.name}`] = `${field.label} is required`;
+          }
+        });
+      }
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleTestConnection = async () => {
+    if (!validateForm()) {
+      toast.error('Please fill all required fields');
+      return;
+    }
+    
+    try {
+      setTestingConnection(true);
+      await testDatasourceConnection(formData.configuration);
+      setConnectionStatus('success');
+      toast.success('Connection test successful');
+    } catch (err) {
+      setConnectionStatus('error');
+      toast.error('Connection test failed');
+      console.error('Error testing connection:', err);
+    } finally {
+      setTestingConnection(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      toast.error('Please fill all required fields');
+      return;
+    }
+    
+    try {
+      setLoading(true);
+      await createDatasource(formData);
+      toast.success('Datasource created successfully');
+      navigate('/app/datasources');
+    } catch (err) {
+      toast.error('Failed to create datasource');
+      console.error('Error creating datasource:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderAuthFields = () => {
+    const selectedTypeData = datasourceTypes.find(type => type.id === selectedType);
+    if (!selectedTypeData) return null;
+    
+    return (
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium">Authentication</h3>
+        
+        {selectedTypeData.authFields.map((field) => (
+          <div key={field.name}>
+            <Label htmlFor={field.name} className="mb-1 block">
+              {field.label}
+              {field.required && <span className="ml-1 text-red-500">*</span>}
+            </Label>
+            
+            {field.type === 'text' || field.type === 'password' ? (
+              <Input
+                id={field.name}
+                type={field.type}
+                value={formData.configuration[field.name] || ''}
+                onChange={(e) => handleConfigChange(field.name, e.target.value)}
+                placeholder={`Enter ${field.label.toLowerCase()}`}
+                className={errors[`config.${field.name}`] ? 'border-red-500' : ''}
+              />
+            ) : field.type === 'array' ? (
+              <Input
+                id={field.name}
+                type="text"
+                value={
+                  Array.isArray(formData.configuration[field.name])
+                    ? formData.configuration[field.name].join(', ')
+                    : ''
+                }
+                onChange={(e) => handleConfigChange(field.name, e.target.value.split(',').map(s => s.trim()))}
+                placeholder={`Enter ${field.label.toLowerCase()} (comma separated)`}
+                className={errors[`config.${field.name}`] ? 'border-red-500' : ''}
+              />
+            ) : field.type === 'select' ? (
+              <Select
+                value={formData.configuration[field.name] || ''}
+                onValueChange={(value) => handleConfigChange(field.name, value)}
+              >
+                <SelectTrigger className={errors[`config.${field.name}`] ? 'border-red-500' : ''}>
+                  <SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
+                </SelectTrigger>
+                <SelectContent>
+                  {field.options.map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {option}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : null}
+            
+            {errors[`config.${field.name}`] && (
+              <p className="mt-1 text-sm text-red-500">{errors[`config.${field.name}`]}</p>
+            )}
+          </div>
+        ))}
+        
+        <div className="mt-6">
+          <Button
+            type="button"
+            onClick={handleTestConnection}
+            disabled={testingConnection}
+            className="w-full"
+          >
+            {testingConnection ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Testing Connection...
+              </>
+            ) : (
+              <>
+                {connectionStatus === 'success' ? (
+                  <CheckCircle2 className="mr-2 h-4 w-4" />
+                ) : (
+                  <Database className="mr-2 h-4 w-4" />
+                )}
+                Test Connection
+              </>
+            )}
+          </Button>
+          
+          {connectionStatus === 'success' && (
+            <div className="mt-3 flex items-center border border-green-200 rounded-md bg-green-50 p-3">
+              <CheckCircle2 className="mr-2 h-5 w-5 text-green-500" />
+              <p className="text-sm text-green-700">Connection successful. You can now save this datasource.</p>
+            </div>
+          )}
+          
+          {connectionStatus === 'error' && (
+            <div className="mt-3 flex items-center border border-red-200 rounded-md bg-red-50 p-3">
+              <Shield className="mr-2 h-5 w-5 text-red-500" />
+              <p className="text-sm text-red-700">Connection failed. Please check your credentials and try again.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const renderConfigFields = () => {
+    const selectedTypeData = datasourceTypes.find(type => type.id === selectedType);
+    if (!selectedTypeData || !selectedTypeData.configFields || selectedTypeData.configFields.length === 0) {
+      return (
+        <div className="py-4 text-center text-gray-500">
+          No additional configuration options available for this datasource type.
+        </div>
+      );
+    }
+    
+    return (
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium">Configuration</h3>
+        
+        {selectedTypeData.configFields.map((field) => (
+          <div key={field.name}>
+            <Label htmlFor={field.name} className="mb-1 block">
+              {field.label}
+              {field.required && <span className="ml-1 text-red-500">*</span>}
+            </Label>
+            
+            {field.type === 'text' ? (
+              <Input
+                id={field.name}
+                type="text"
+                value={formData.configuration[field.name] || field.default || ''}
+                onChange={(e) => handleConfigChange(field.name, e.target.value)}
+                placeholder={`Enter ${field.label.toLowerCase()}`}
+                className={errors[`config.${field.name}`] ? 'border-red-500' : ''}
+              />
+            ) : field.type === 'select' ? (
+              <Select
+                value={formData.configuration[field.name] || field.default || ''}
+                onValueChange={(value) => handleConfigChange(field.name, value)}
+              >
+                <SelectTrigger className={errors[`config.${field.name}`] ? 'border-red-500' : ''}>
+                  <SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
+                </SelectTrigger>
+                <SelectContent>
+                  {field.options.map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {option}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : field.type === 'multiselect' ? (
+              <div>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {field.options.map((option) => {
+                    const isSelected = Array.isArray(formData.configuration[field.name]) && 
+                                      formData.configuration[field.name].includes(option);
+                    
+                    return (
+                      <Badge
+                        key={option}
+                        variant={isSelected ? 'default' : 'outline'}
+                        className="cursor-pointer"
+                        onClick={() => {
+                          const currentValues = Array.isArray(formData.configuration[field.name]) 
+                            ? [...formData.configuration[field.name]] 
+                            : [];
+                          
+                          if (isSelected) {
+                            // Remove from selection
+                            handleConfigChange(
+                              field.name, 
+                              currentValues.filter(val => val !== option)
+                            );
+                          } else {
+                            // Add to selection
+                            handleConfigChange(
+                              field.name, 
+                              [...currentValues, option]
+                            );
+                          }
+                        }}
+                      >
+                        {option}
+                      </Badge>
+                    );
+                  })}
+                </div>
+                {errors[`config.${field.name}`] && (
+                  <p className="mt-1 text-sm text-red-500">{errors[`config.${field.name}`]}</p>
+                )}
+              </div>
+            ) : null}
+            
+            {errors[`config.${field.name}`] && field.type !== 'multiselect' && (
+              <p className="mt-1 text-sm text-red-500">{errors[`config.${field.name}`]}</p>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <Page name="Create Data Source" className="h-full w-full">
+      <div className="mx-auto max-w-3xl">
+        <div className="mb-6 flex items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate('/app/datasources')}
+            className="mr-4"
+          >
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Data Sources
+          </Button>
+        </div>
+        
+        <Card>
+          <CardHeader>
+            <CardTitle>Create New Data Source</CardTitle>
+            <CardDescription>
+              Configure a new datasource to connect to external systems
+            </CardDescription>
+          </CardHeader>
+          
+          <form onSubmit={handleSubmit}>
+            <CardContent>
+              <div className="mb-6 space-y-4">
+                <div>
+                  <Label htmlFor="name" className="mb-1 block">
+                    Name <span className="text-red-500">*</span>
+                  </Label>
+                  <Input
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleInputChange}
+                    placeholder="Enter datasource name"
+                    className={errors.name ? 'border-red-500' : ''}
+                  />
+                  {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
+                </div>
+                
+                <div>
+                  <Label htmlFor="description" className="mb-1 block">
+                    Description <span className="text-red-500">*</span>
+                  </Label>
+                  <Textarea
+                    id="description"
+                    name="description"
+                    value={formData.description}
+                    onChange={handleInputChange}
+                    placeholder="Enter datasource description"
+                    className={errors.description ? 'border-red-500' : ''}
+                    rows={3}
+                  />
+                  {errors.description && <p className="mt-1 text-sm text-red-500">{errors.description}</p>}
+                </div>
+                
+                <div>
+                  <Label htmlFor="type" className="mb-1 block">
+                    Datasource Type <span className="text-red-500">*</span>
+                  </Label>
+                  <Select
+                    value={formData.type}
+                    onValueChange={handleTypeChange}
+                  >
+                    <SelectTrigger className={errors.type ? 'border-red-500' : ''}>
+                      <SelectValue placeholder="Select datasource type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {datasourceTypes.map((type) => (
+                        <SelectItem key={type.id} value={type.id}>
+                          {type.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {errors.type && <p className="mt-1 text-sm text-red-500">{errors.type}</p>}
+                </div>
+                
+                {selectedType && (
+                  <div>
+                    <div className="mb-2 mt-4">
+                      <div className="flex flex-wrap gap-2">
+                        {datasourceTypes
+                          .find(type => type.id === selectedType)
+                          ?.complianceStandards.map(standard => (
+                            <Badge key={standard} variant="secondary">{standard}</Badge>
+                          ))}
+                      </div>
+                    </div>
+                    
+                    <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-6">
+                      <TabsList className="grid grid-cols-2 w-full">
+                        <TabsTrigger value="details">Authentication</TabsTrigger>
+                        <TabsTrigger value="config">Configuration</TabsTrigger>
+                      </TabsList>
+                      <TabsContent value="details" className="pt-4">
+                        {renderAuthFields()}
+                      </TabsContent>
+                      <TabsContent value="config" className="pt-4">
+                        {renderConfigFields()}
+                      </TabsContent>
+                    </Tabs>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+            
+            <CardFooter className="flex justify-between">
+              <Button 
+                variant="outline" 
+                type="button"
+                onClick={() => navigate('/app/datasources')}
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit"
+                disabled={loading || (selectedType && connectionStatus !== 'success')}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    <Save className="mr-2 h-4 w-4" />
+                    Save Data Source
+                  </>
+                )}
+              </Button>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </Page>
+  );
+}
diff --git a/src/pages/app/datasource/DatasourceEdit.jsx b/src/pages/app/datasource/DatasourceEdit.jsx
new file mode 100644
index 00000000..3ab4290b
--- /dev/null
+++ b/src/pages/app/datasource/DatasourceEdit.jsx
@@ -0,0 +1,573 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import Page from '@/components/basic-page.jsx';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ArrowLeft, Loader2, Save, Database, Shield, CheckCircle2 } from 'lucide-react';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/components/ui/tabs';
+import { getDatasourceById, updateDatasource, getDatasourceTypes, testDatasourceConnection } from '@/services/datasources';
+
+export function DatasourceEdit() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const [datasourceTypes, setDatasourceTypes] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [initialLoading, setInitialLoading] = useState(true);
+  const [testingConnection, setTestingConnection] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState(null);
+  const [activeTab, setActiveTab] = useState('details');
+  const [formData, setFormData] = useState({
+    name: '',
+    type: '',
+    description: '',
+    configuration: {}
+  });
+  const [errors, setErrors] = useState({});
+
+  // Cargar los tipos de datasource y el datasource específico al montar el componente
+  useEffect(() => {
+    async function loadData() {
+      try {
+        setInitialLoading(true);
+        
+        // Cargar tipos de datasource
+        const types = await getDatasourceTypes();
+        setDatasourceTypes(types);
+        
+        // Cargar el datasource específico
+        const datasource = await getDatasourceById(id);
+        setFormData({
+          name: datasource.name || '',
+          type: datasource.type || '',
+          description: datasource.description || '',
+          configuration: datasource.configuration || {},
+          status: datasource.status || 'active'
+        });
+        
+        // Establecer el estado de conexión basado en los datos del datasource
+        setConnectionStatus(datasource.connectionStatus === 'connected' ? 'success' : 
+          datasource.connectionStatus === 'error' ? 'error' : null);
+      } catch (err) {
+        toast.error('Failed to load datasource');
+        console.error('Error loading datasource:', err);
+        navigate('/app/datasources');
+      } finally {
+        setInitialLoading(false);
+      }
+    }
+    
+    loadData();
+  }, [id, navigate]);
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+    
+    // Clear error for this field
+    if (errors[name]) {
+      setErrors({
+        ...errors,
+        [name]: ''
+      });
+    }
+  };
+
+  const handleConfigChange = (field, value) => {
+    setFormData({
+      ...formData,
+      configuration: {
+        ...formData.configuration,
+        [field]: value
+      }
+    });
+    
+    // Clear error for this field
+    if (errors[`config.${field}`]) {
+      setErrors({
+        ...errors,
+        [`config.${field}`]: ''
+      });
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+    
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+    }
+    
+    if (!formData.type) {
+      newErrors.type = 'Datasource type is required';
+    }
+    
+    if (!formData.description.trim()) {
+      newErrors.description = 'Description is required';
+    }
+    
+    const selectedTypeData = datasourceTypes.find(type => type.id === formData.type);
+    if (selectedTypeData) {
+      // Validate required auth fields
+      selectedTypeData.authFields.forEach(field => {
+        if (field.required && !formData.configuration[field.name]) {
+          newErrors[`config.${field.name}`] = `${field.label} is required`;
+        }
+      });
+      
+      // Validate required config fields
+      if (selectedTypeData.configFields) {
+        selectedTypeData.configFields.forEach(field => {
+          if (field.required && !formData.configuration[field.name]) {
+            newErrors[`config.${field.name}`] = `${field.label} is required`;
+          }
+        });
+      }
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleTestConnection = async () => {
+    if (!validateForm()) {
+      toast.error('Please fill all required fields');
+      return;
+    }
+    
+    try {
+      setTestingConnection(true);
+      await testDatasourceConnection(formData.configuration);
+      setConnectionStatus('success');
+      toast.success('Connection test successful');
+    } catch (err) {
+      setConnectionStatus('error');
+      toast.error('Connection test failed');
+      console.error('Error testing connection:', err);
+    } finally {
+      setTestingConnection(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      toast.error('Please fill all required fields');
+      return;
+    }
+    
+    try {
+      setLoading(true);
+      
+      // Actualizar estado de conexión basado en las pruebas
+      const updatedData = {
+        ...formData,
+        connectionStatus: connectionStatus === 'success' ? 'connected' : 
+          connectionStatus === 'error' ? 'error' : 'unknown',
+        lastSyncTime: connectionStatus === 'success' ? new Date().toISOString() : undefined
+      };
+      
+      await updateDatasource(id, updatedData);
+      toast.success('Datasource updated successfully');
+      navigate('/app/datasources');
+    } catch (err) {
+      toast.error('Failed to update datasource');
+      console.error('Error updating datasource:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderAuthFields = () => {
+    const selectedTypeData = datasourceTypes.find(type => type.id === formData.type);
+    if (!selectedTypeData) return null;
+    
+    return (
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium">Authentication</h3>
+        
+        {selectedTypeData.authFields.map((field) => (
+          <div key={field.name}>
+            <Label htmlFor={field.name} className="mb-1 block">
+              {field.label}
+              {field.required && <span className="ml-1 text-red-500">*</span>}
+            </Label>
+            
+            {field.type === 'text' || field.type === 'password' ? (
+              <Input
+                id={field.name}
+                type={field.type}
+                value={formData.configuration[field.name] || ''}
+                onChange={(e) => handleConfigChange(field.name, e.target.value)}
+                placeholder={`Enter ${field.label.toLowerCase()}`}
+                className={errors[`config.${field.name}`] ? 'border-red-500' : ''}
+              />
+            ) : field.type === 'array' ? (
+              <Input
+                id={field.name}
+                type="text"
+                value={
+                  Array.isArray(formData.configuration[field.name])
+                    ? formData.configuration[field.name].join(', ')
+                    : ''
+                }
+                onChange={(e) => handleConfigChange(field.name, e.target.value.split(',').map(s => s.trim()))}
+                placeholder={`Enter ${field.label.toLowerCase()} (comma separated)`}
+                className={errors[`config.${field.name}`] ? 'border-red-500' : ''}
+              />
+            ) : field.type === 'select' ? (
+              <Select
+                value={formData.configuration[field.name] || ''}
+                onValueChange={(value) => handleConfigChange(field.name, value)}
+              >
+                <SelectTrigger className={errors[`config.${field.name}`] ? 'border-red-500' : ''}>
+                  <SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
+                </SelectTrigger>
+                <SelectContent>
+                  {field.options.map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {option}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : null}
+            
+            {errors[`config.${field.name}`] && (
+              <p className="mt-1 text-sm text-red-500">{errors[`config.${field.name}`]}</p>
+            )}
+          </div>
+        ))}
+        
+        <div className="mt-6">
+          <Button
+            type="button"
+            onClick={handleTestConnection}
+            disabled={testingConnection}
+            className="w-full"
+          >
+            {testingConnection ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Testing Connection...
+              </>
+            ) : (
+              <>
+                {connectionStatus === 'success' ? (
+                  <CheckCircle2 className="mr-2 h-4 w-4" />
+                ) : (
+                  <Database className="mr-2 h-4 w-4" />
+                )}
+                Test Connection
+              </>
+            )}
+          </Button>
+          
+          {connectionStatus === 'success' && (
+            <div className="mt-3 flex items-center border border-green-200 rounded-md bg-green-50 p-3">
+              <CheckCircle2 className="mr-2 h-5 w-5 text-green-500" />
+              <p className="text-sm text-green-700">Connection successful. You can now save this datasource.</p>
+            </div>
+          )}
+          
+          {connectionStatus === 'error' && (
+            <div className="mt-3 flex items-center border border-red-200 rounded-md bg-red-50 p-3">
+              <Shield className="mr-2 h-5 w-5 text-red-500" />
+              <p className="text-sm text-red-700">Connection failed. Please check your credentials and try again.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const renderConfigFields = () => {
+    const selectedTypeData = datasourceTypes.find(type => type.id === formData.type);
+    if (!selectedTypeData || !selectedTypeData.configFields || selectedTypeData.configFields.length === 0) {
+      return (
+        <div className="py-4 text-center text-gray-500">
+          No additional configuration options available for this datasource type.
+        </div>
+      );
+    }
+    
+    return (
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium">Configuration</h3>
+        
+        {selectedTypeData.configFields.map((field) => (
+          <div key={field.name}>
+            <Label htmlFor={field.name} className="mb-1 block">
+              {field.label}
+              {field.required && <span className="ml-1 text-red-500">*</span>}
+            </Label>
+            
+            {field.type === 'text' ? (
+              <Input
+                id={field.name}
+                type="text"
+                value={formData.configuration[field.name] || field.default || ''}
+                onChange={(e) => handleConfigChange(field.name, e.target.value)}
+                placeholder={`Enter ${field.label.toLowerCase()}`}
+                className={errors[`config.${field.name}`] ? 'border-red-500' : ''}
+              />
+            ) : field.type === 'select' ? (
+              <Select
+                value={formData.configuration[field.name] || field.default || ''}
+                onValueChange={(value) => handleConfigChange(field.name, value)}
+              >
+                <SelectTrigger className={errors[`config.${field.name}`] ? 'border-red-500' : ''}>
+                  <SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
+                </SelectTrigger>
+                <SelectContent>
+                  {field.options.map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {option}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : field.type === 'multiselect' ? (
+              <div>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {field.options.map((option) => {
+                    const isSelected = Array.isArray(formData.configuration[field.name]) && 
+                                      formData.configuration[field.name].includes(option);
+                    
+                    return (
+                      <Badge
+                        key={option}
+                        variant={isSelected ? 'default' : 'outline'}
+                        className="cursor-pointer"
+                        onClick={() => {
+                          const currentValues = Array.isArray(formData.configuration[field.name]) 
+                            ? [...formData.configuration[field.name]] 
+                            : [];
+                          
+                          if (isSelected) {
+                            // Remove from selection
+                            handleConfigChange(
+                              field.name, 
+                              currentValues.filter(val => val !== option)
+                            );
+                          } else {
+                            // Add to selection
+                            handleConfigChange(
+                              field.name, 
+                              [...currentValues, option]
+                            );
+                          }
+                        }}
+                      >
+                        {option}
+                      </Badge>
+                    );
+                  })}
+                </div>
+                {errors[`config.${field.name}`] && (
+                  <p className="mt-1 text-sm text-red-500">{errors[`config.${field.name}`]}</p>
+                )}
+              </div>
+            ) : null}
+            
+            {errors[`config.${field.name}`] && field.type !== 'multiselect' && (
+              <p className="mt-1 text-sm text-red-500">{errors[`config.${field.name}`]}</p>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // Mostrar spinner mientras carga los datos iniciales
+  if (initialLoading) {
+    return (
+      <Page name="Edit Data Source" className="h-full w-full">
+        <div className="h-64 flex items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin" />
+          <span className="ml-2">Loading datasource...</span>
+        </div>
+      </Page>
+    );
+  }
+
+  return (
+    <Page name="Edit Data Source" className="h-full w-full">
+      <div className="mx-auto max-w-3xl">
+        <div className="mb-6 flex items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate('/app/datasources')}
+            className="mr-4"
+          >
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Data Sources
+          </Button>
+        </div>
+        
+        <Card>
+          <CardHeader>
+            <CardTitle>Edit Data Source</CardTitle>
+            <CardDescription>
+              Update the configuration for this datasource
+            </CardDescription>
+          </CardHeader>
+          
+          <form onSubmit={handleSubmit}>
+            <CardContent>
+              <div className="mb-6 space-y-4">
+                <div>
+                  <Label htmlFor="name" className="mb-1 block">
+                    Name <span className="text-red-500">*</span>
+                  </Label>
+                  <Input
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleInputChange}
+                    placeholder="Enter datasource name"
+                    className={errors.name ? 'border-red-500' : ''}
+                  />
+                  {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
+                </div>
+                
+                <div>
+                  <Label htmlFor="description" className="mb-1 block">
+                    Description <span className="text-red-500">*</span>
+                  </Label>
+                  <Textarea
+                    id="description"
+                    name="description"
+                    value={formData.description}
+                    onChange={handleInputChange}
+                    placeholder="Enter datasource description"
+                    className={errors.description ? 'border-red-500' : ''}
+                    rows={3}
+                  />
+                  {errors.description && <p className="mt-1 text-sm text-red-500">{errors.description}</p>}
+                </div>
+                
+                <div>
+                  <Label htmlFor="type" className="mb-1 block">
+                    Datasource Type <span className="text-red-500">*</span>
+                  </Label>
+                  <Select
+                    value={formData.type}
+                    onValueChange={(value) => {
+                      // Cambiar el tipo resetea la configuración
+                      if (value !== formData.type) {
+                        setFormData({
+                          ...formData,
+                          type: value,
+                          configuration: {}
+                        });
+                        setConnectionStatus(null);
+                      }
+                    }}
+                    disabled={true} // No permitir cambiar el tipo en la edición
+                  >
+                    <SelectTrigger className={errors.type ? 'border-red-500' : ''}>
+                      <SelectValue placeholder="Select datasource type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {datasourceTypes.map((type) => (
+                        <SelectItem key={type.id} value={type.id}>
+                          {type.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {errors.type && <p className="mt-1 text-sm text-red-500">{errors.type}</p>}
+                  <p className="mt-1 text-xs text-gray-500">
+                    The datasource type cannot be changed after creation.
+                  </p>
+                </div>
+                
+                {formData.type && (
+                  <div>
+                    <div className="mb-2 mt-4">
+                      <div className="flex flex-wrap gap-2">
+                        {datasourceTypes
+                          .find(type => type.id === formData.type)
+                          ?.complianceStandards.map(standard => (
+                            <Badge key={standard} variant="secondary">{standard}</Badge>
+                          ))}
+                      </div>
+                    </div>
+                    
+                    <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-6">
+                      <TabsList className="grid grid-cols-2 w-full">
+                        <TabsTrigger value="details">Authentication</TabsTrigger>
+                        <TabsTrigger value="config">Configuration</TabsTrigger>
+                      </TabsList>
+                      <TabsContent value="details" className="pt-4">
+                        {renderAuthFields()}
+                      </TabsContent>
+                      <TabsContent value="config" className="pt-4">
+                        {renderConfigFields()}
+                      </TabsContent>
+                    </Tabs>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+            
+            <CardFooter className="flex justify-between">
+              <Button 
+                variant="outline" 
+                type="button"
+                onClick={() => navigate('/app/datasources')}
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  <>
+                    <Save className="mr-2 h-4 w-4" />
+                    Save Changes
+                  </>
+                )}
+              </Button>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </Page>
+  );
+}
diff --git a/src/pages/app/datasource/Datasources.jsx b/src/pages/app/datasource/Datasources.jsx
new file mode 100644
index 00000000..6f77b3b0
--- /dev/null
+++ b/src/pages/app/datasource/Datasources.jsx
@@ -0,0 +1,480 @@
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import {
+  useReactTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  flexRender,
+  createColumnHelper,
+} from '@tanstack/react-table';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Badge } from '@/components/ui/badge';
+import { Edit, Trash, MoreHorizontal, ChevronDown, Plus, Loader2, ExternalLink, RefreshCw } from 'lucide-react';
+import { toast } from 'sonner';
+import { Link, useNavigate } from 'react-router-dom';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import Page from '@/components/basic-page.jsx';
+import { 
+  getAllDatasources,
+  deleteDatasource,
+  testDatasourceConnection
+} from '@/services/datasources';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { useAuth } from '@/hooks/use-auth';
+
+const columnHelper = createColumnHelper();
+
+export function Datasources() {
+  const [datasources, setDatasources] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [datasourceToDelete, setDatasourceToDelete] = useState(null);
+  const [globalFilter, setGlobalFilter] = useState('');
+  const [rowSelection, setRowSelection] = useState({});
+  const [testingConnection, setTestingConnection] = useState(null);
+  const navigate = useNavigate();
+  const { userData } = useAuth();
+
+  // Fetch datasources on component mount
+  useEffect(() => {
+    fetchDatasources();
+  }, []);
+
+  const fetchDatasources = async () => {
+    try {
+      setLoading(true);
+      const response = await getAllDatasources();
+      setDatasources(response);
+      setError(null);
+    } catch (err) {
+      setError('Failed to load datasources. Please try again later.');
+      toast.error('Error loading datasources');
+      console.error('Error fetching datasources:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleNew = useCallback(() => {
+    navigate('/app/datasources/new');
+  }, [navigate]);
+
+  const handleEdit = useCallback((datasource) => {
+    navigate(`/app/datasources/${datasource.id}/edit`);
+  }, [navigate]);
+
+  const handleDeleteConfirm = useCallback((datasource) => {
+    setDatasourceToDelete(datasource);
+  }, []);
+
+  const handleDelete = useCallback(async () => {
+    if (!datasourceToDelete) return;
+    
+    try {
+      setLoading(true);
+      await deleteDatasource(datasourceToDelete.id);
+      setDatasources(datasources.filter((ds) => ds.id !== datasourceToDelete.id));
+      toast.success('Datasource deleted successfully');
+    } catch (err) {
+      toast.error('Failed to delete datasource');
+      console.error('Error deleting datasource:', err);
+    } finally {
+      setLoading(false);
+      setDatasourceToDelete(null);
+    }
+  }, [datasources, datasourceToDelete]);
+
+  const handleDeleteSelected = useCallback(async () => {
+    try {
+      setLoading(true);
+      
+      const selectedIds = Object.keys(rowSelection).map(index => datasources[parseInt(index)].id);
+      
+      if (selectedIds.length === 0) {
+        toast.error('No datasources selected');
+        return;
+      }
+      
+      for (const id of selectedIds) {
+        await deleteDatasource(id);
+      }
+      
+      setDatasources(datasources.filter(ds => !selectedIds.includes(ds.id)));
+      
+      setRowSelection({});
+      
+      toast.success(`${selectedIds.length} datasource${selectedIds.length > 1 ? 's' : ''} deleted successfully`);
+    } catch (err) {
+      toast.error('Failed to delete selected datasources');
+      console.error('Error deleting datasources:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [datasources, rowSelection]);
+
+  const handleTestConnection = useCallback(async (datasource) => {
+    try {
+      setTestingConnection(datasource.id);
+      await testDatasourceConnection(datasource.configuration);
+      
+      // Update the datasource status in the local state
+      setDatasources(prevDatasources => 
+        prevDatasources.map(ds => 
+          ds.id === datasource.id 
+            ? { ...ds, connectionStatus: 'connected', lastSyncTime: new Date().toISOString() } 
+            : ds
+        )
+      );
+      
+      toast.success('Connection test successful');
+    } catch (err) {
+      // Update the datasource status to error
+      setDatasources(prevDatasources => 
+        prevDatasources.map(ds => 
+          ds.id === datasource.id 
+            ? { ...ds, connectionStatus: 'error' } 
+            : ds
+        )
+      );
+      
+      toast.error('Connection test failed');
+      console.error('Error testing connection:', err);
+    } finally {
+      setTestingConnection(null);
+    }
+  }, []);
+  
+  const formatDate = (dateString) => {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  };
+
+  const getDatasourceTypeLabel = (type) => {
+    const typeMap = {
+      'microsoft-graph': 'Microsoft Graph',
+      'github-api': 'GitHub API',
+      'azure-security-center': 'Azure Security Center',
+      'aws-security-hub': 'AWS Security Hub',
+      'gdpr-assessment-tool': 'GDPR Assessment',
+      'iso27001-tracker': 'ISO 27001 Tracker'
+    };
+    
+    return typeMap[type] || type;
+  };
+
+  const getStatusBadge = (status) => {
+    switch (status) {
+    case 'active':
+      return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Active</Badge>;
+    case 'inactive':
+      return <Badge variant="outline" className="bg-gray-100 text-gray-800 hover:bg-gray-100">Inactive</Badge>;
+    default:
+      return <Badge variant="outline">{status}</Badge>;
+    }
+  };
+
+  const getConnectionStatusBadge = (status) => {
+    switch (status) {
+    case 'connected':
+      return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Connected</Badge>;
+    case 'error':
+      return <Badge variant="destructive">Error</Badge>;
+    default:
+      return <Badge variant="outline">{status}</Badge>;
+    }
+  };
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            checked={table.getIsAllPageRowsSelected()}
+            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            aria-label="Select all"
+            disabled={userData.authority === 'USER'}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+            disabled={userData.authority === 'USER'}
+          />
+        ),
+        enableSorting: false,
+        enableHiding: false,
+      },
+      columnHelper.accessor('name', {
+        header: 'Name',
+        cell: (info) => info.getValue(),
+      }),
+      columnHelper.accessor('type', {
+        header: 'Type',
+        cell: (info) => getDatasourceTypeLabel(info.getValue()),
+      }),
+      columnHelper.accessor('description', {
+        header: 'Description',
+        cell: (info) => info.getValue() || 'No description',
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: (info) => getStatusBadge(info.getValue()),
+      }),
+      columnHelper.accessor('connectionStatus', {
+        header: 'Connection',
+        cell: (info) => getConnectionStatusBadge(info.getValue()),
+      }),
+      columnHelper.accessor('lastSyncTime', {
+        header: 'Last Sync',
+        cell: (info) => formatDate(info.getValue()),
+      }),
+      {
+        id: 'actions',
+        cell: ({ row }) => {
+          const datasource = row.original;
+          return userData.authority === 'USER' ? (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleTestConnection(datasource);
+              }}
+              disabled={testingConnection === datasource.id}
+            >
+              {testingConnection === datasource.id ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <RefreshCw className="h-4 w-4" />
+              )}
+              <span className="ml-2">Test</span>
+            </Button>
+          ) : (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="h-8 w-8 p-0">
+                  <span className="sr-only">Open menu</span>
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleTestConnection(datasource);
+                  }}
+                  disabled={testingConnection === datasource.id}
+                >
+                  {testingConnection === datasource.id ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  ) : (
+                    <RefreshCw className="mr-2 h-4 w-4" />
+                  )}
+                  Test Connection
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleEdit(datasource)}>
+                  <Edit className="mr-2 h-4 w-4" />
+                  Edit
+                </DropdownMenuItem>
+                <DropdownMenuItem 
+                  onClick={() => handleDeleteConfirm(datasource)}
+                  className="text-red-600"
+                >
+                  <Trash className="mr-2 h-4 w-4" />
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          );
+        },
+      },
+    ],
+    [handleDeleteConfirm, handleEdit, userData.authority, testingConnection, handleTestConnection]
+  );
+
+  const table = useReactTable({
+    data: datasources,
+    columns,
+    state: {
+      globalFilter,
+      rowSelection,
+    },
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 10,
+      },
+    },
+  });
+
+  // Calcular si hay alguna fila seleccionada
+  const hasSelection = Object.keys(rowSelection).length > 0;
+
+  return (
+    <Page name="Data Sources" className="h-full w-full">
+      <div className="flex items-center justify-between gap-x-4">
+        <Input
+          placeholder="Search datasources..."
+          value={globalFilter ?? ''}
+          onChange={(e) => setGlobalFilter(e.target.value)}
+          className="max-w-sm"
+        />
+        <div className="flex items-center space-x-2">
+          {userData.authority !== 'USER' && (
+            <Button 
+              variant="destructive" 
+              onClick={handleDeleteSelected}
+              disabled={!hasSelection || loading}
+            >
+              <Trash className="h-4 w-4" />
+            </Button>
+          )}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="ml-auto">
+                Columns <ChevronDown className="ml-2 h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuItem key={column.id} className="capitalize">
+                      <Checkbox
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                      />
+                      <span className="ml-2">{column.id}</span>
+                    </DropdownMenuItem>
+                  );
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          {userData.authority !== 'USER' && (
+            <Button 
+              className="border-2 border-sidebar-accent bg-sidebar-accent hover:bg-secondary hover:text-sidebar-accent"
+              onClick={handleNew}
+            >
+              <Plus className="mr-2 h-4 w-4" /> Add Data Source
+            </Button>
+          )}
+        </div>
+      </div>
+      
+      {error && (
+        <div className="my-4 border border-red-400 rounded bg-red-100 px-4 py-3 text-red-700">
+          {error}
+        </div>
+      )}
+      
+      <div className="mt-4 border rounded-md">
+        <Table>
+          <TableHeader className="bg-gray-50">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loading && (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  <div className="flex items-center justify-center">
+                    <Loader2 className="mr-2 h-6 w-6 animate-spin" />
+                    Loading datasources...
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+            
+            {!loading && table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow className="cursor-pointer text-left hover:bg-gray-50" key={row.id} data-state={row.getIsSelected() && 'selected'} onClick={() => userData.authority !== 'USER' && handleEdit(row.original)}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id} onClick={(e) => cell.column.id === 'select' && e.stopPropagation()}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : !loading && (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No datasources found.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      
+      <div className="flex items-center justify-end py-4 space-x-2">
+        <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+          Previous
+        </Button>
+        <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+          Next
+        </Button>
+      </div>
+      
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={!!datasourceToDelete} onOpenChange={(isOpen) => !isOpen && setDatasourceToDelete(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete the datasource &quot;{datasourceToDelete?.name}&quot;. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700">
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                'Delete'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}
diff --git a/src/pages/app/linker/LinkerCreate.jsx b/src/pages/app/linker/LinkerCreate.jsx
new file mode 100644
index 00000000..f99ccbe2
--- /dev/null
+++ b/src/pages/app/linker/LinkerCreate.jsx
@@ -0,0 +1,702 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import Page from '@/components/basic-page.jsx';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import { ArrowLeft, Loader2, Save, Plus, Trash, Link as LinkIcon, Check } from 'lucide-react';
+import { getAllDatasources } from '@/services/datasources';
+import { createLinker, testLinkerConnection } from '@/services/linkers';
+
+export function LinkerCreate() {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const [testingConnection, setTestingConnection] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState(null);
+  const [datasources, setDatasources] = useState([]);
+  const [activeTab, setActiveTab] = useState('general');
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    status: 'active',
+    datasources: [],
+    config: {
+      refreshInterval: 'daily',
+      notifyOnChange: true,
+      mappings: []
+    }
+  });
+  const [errors, setErrors] = useState({});
+  const [sourceDatasource, setSourceDatasource] = useState('');
+  const [targetDatasource, setTargetDatasource] = useState('');
+  const [mappingFields, setMappingFields] = useState([
+    { sourceField: '', targetField: '' }
+  ]);
+
+  // Fetch datasources on component mount
+  useEffect(() => {
+    async function fetchDatasources() {
+      try {
+        setLoading(true);
+        const response = await getAllDatasources();
+        setDatasources(response.filter(ds => ds.status === 'active'));
+      } catch (err) {
+        toast.error('Failed to load datasources');
+        console.error('Error fetching datasources:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    
+    fetchDatasources();
+  }, []);
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+    
+    // Clear error for this field
+    if (errors[name]) {
+      setErrors({
+        ...errors,
+        [name]: ''
+      });
+    }
+  };
+
+  const handleConfigChange = (field, value) => {
+    setFormData({
+      ...formData,
+      config: {
+        ...formData.config,
+        [field]: value
+      }
+    });
+    
+    // Clear error for this field
+    if (errors[`config.${field}`]) {
+      setErrors({
+        ...errors,
+        [`config.${field}`]: ''
+      });
+    }
+  };
+
+  const handleDatasourceToggle = (datasourceId) => {
+    const currentDatasources = [...formData.datasources];
+    
+    if (currentDatasources.includes(datasourceId)) {
+      // Remove datasource
+      setFormData({
+        ...formData,
+        datasources: currentDatasources.filter(id => id !== datasourceId)
+      });
+      
+      // Remove any mappings involving this datasource
+      const updatedMappings = formData.config.mappings.filter(mapping => 
+        mapping.source !== getDatasourceTypeById(datasourceId) && 
+        mapping.target !== getDatasourceTypeById(datasourceId)
+      );
+      
+      setFormData(prev => ({
+        ...prev,
+        config: {
+          ...prev.config,
+          mappings: updatedMappings
+        }
+      }));
+    } else {
+      // Add datasource
+      setFormData({
+        ...formData,
+        datasources: [...currentDatasources, datasourceId]
+      });
+    }
+    
+    if (errors.datasources) {
+      setErrors({
+        ...errors,
+        datasources: ''
+      });
+    }
+  };
+
+  const getDatasourceTypeById = (id) => {
+    const datasource = datasources.find(ds => ds.id === id);
+    return datasource ? datasource.type : null;
+  };
+
+  const getDatasourceById = (id) => {
+    return datasources.find(ds => ds.id === id) || null;
+  };
+
+  const handleAddMapping = () => {
+    if (!sourceDatasource || !targetDatasource) {
+      toast.error('Please select both source and target datasources');
+      return;
+    }
+    
+    if (sourceDatasource === targetDatasource) {
+      toast.error('Source and target datasources must be different');
+      return;
+    }
+    
+    // Check if this mapping already exists
+    const existingMapping = formData.config.mappings.find(
+      mapping => mapping.source === getDatasourceTypeById(sourceDatasource) && 
+                mapping.target === getDatasourceTypeById(targetDatasource)
+    );
+    
+    if (existingMapping) {
+      toast.error('This mapping already exists');
+      return;
+    }
+    
+    if (mappingFields.some(field => !field.sourceField || !field.targetField)) {
+      toast.error('Please fill in all mapping fields');
+      return;
+    }
+    
+    const newMapping = {
+      source: getDatasourceTypeById(sourceDatasource),
+      target: getDatasourceTypeById(targetDatasource),
+      fieldMappings: [...mappingFields]
+    };
+    
+    setFormData({
+      ...formData,
+      config: {
+        ...formData.config,
+        mappings: [...formData.config.mappings, newMapping]
+      }
+    });
+    
+    // Reset the form for next mapping
+    setSourceDatasource('');
+    setTargetDatasource('');
+    setMappingFields([{ sourceField: '', targetField: '' }]);
+  };
+
+  const handleRemoveMapping = (index) => {
+    const updatedMappings = [...formData.config.mappings];
+    updatedMappings.splice(index, 1);
+    
+    setFormData({
+      ...formData,
+      config: {
+        ...formData.config,
+        mappings: updatedMappings
+      }
+    });
+  };
+
+  const handleAddMappingField = () => {
+    setMappingFields([...mappingFields, { sourceField: '', targetField: '' }]);
+  };
+
+  const handleRemoveMappingField = (index) => {
+    const updatedFields = [...mappingFields];
+    updatedFields.splice(index, 1);
+    setMappingFields(updatedFields);
+  };
+
+  const handleMappingFieldChange = (index, field, value) => {
+    const updatedFields = [...mappingFields];
+    updatedFields[index][field] = value;
+    setMappingFields(updatedFields);
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+    
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+    }
+    
+    if (!formData.description.trim()) {
+      newErrors.description = 'Description is required';
+    }
+    
+    if (formData.datasources.length < 2) {
+      newErrors.datasources = 'At least two datasources must be selected';
+    }
+    
+    if (formData.config.mappings.length === 0) {
+      newErrors.mappings = 'At least one mapping must be defined';
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleTestConnection = async () => {
+    if (!validateForm()) {
+      toast.error('Please fix the errors before testing');
+      return;
+    }
+    
+    try {
+      setTestingConnection(true);
+      await testLinkerConnection(formData);
+      setConnectionStatus('success');
+      toast.success('Linker configuration is valid');
+    } catch (err) {
+      setConnectionStatus('error');
+      toast.error('Linker configuration test failed');
+      console.error('Error testing linker:', err);
+    } finally {
+      setTestingConnection(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      toast.error('Please fix the errors before submitting');
+      return;
+    }
+    
+    try {
+      setLoading(true);
+      await createLinker(formData);
+      toast.success('Linker created successfully');
+      navigate('/app/linkers');
+    } catch (err) {
+      toast.error('Failed to create linker');
+      console.error('Error creating linker:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Page name="Create Linker" className="h-full w-full">
+      <div className="mx-auto max-w-4xl">
+        <div className="mb-6 flex items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate('/app/linkers')}
+            className="mr-4"
+          >
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Linkers
+          </Button>
+        </div>
+        
+        <Card>
+          <CardHeader>
+            <CardTitle>Create New Linker</CardTitle>
+            <CardDescription>
+              Link datasources together to enable data flow between systems
+            </CardDescription>
+          </CardHeader>
+          
+          <form onSubmit={handleSubmit}>
+            <CardContent>
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
+                <TabsList className="grid grid-cols-3">
+                  <TabsTrigger value="general">General</TabsTrigger>
+                  <TabsTrigger value="datasources">Datasources</TabsTrigger>
+                  <TabsTrigger value="mappings">Mappings</TabsTrigger>
+                </TabsList>
+                
+                <TabsContent value="general" className="mt-4 space-y-4">
+                  <div>
+                    <Label htmlFor="name" className="mb-1 block">
+                      Name <span className="text-red-500">*</span>
+                    </Label>
+                    <Input
+                      id="name"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleInputChange}
+                      placeholder="Enter linker name"
+                      className={errors.name ? 'border-red-500' : ''}
+                    />
+                    {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
+                  </div>
+                  
+                  <div>
+                    <Label htmlFor="description" className="mb-1 block">
+                      Description <span className="text-red-500">*</span>
+                    </Label>
+                    <Textarea
+                      id="description"
+                      name="description"
+                      value={formData.description}
+                      onChange={handleInputChange}
+                      placeholder="Enter linker description"
+                      className={errors.description ? 'border-red-500' : ''}
+                      rows={3}
+                    />
+                    {errors.description && <p className="mt-1 text-sm text-red-500">{errors.description}</p>}
+                  </div>
+                  
+                  <div>
+                    <Label htmlFor="status" className="mb-1 block">
+                      Status
+                    </Label>
+                    <Select
+                      value={formData.status}
+                      onValueChange={(value) => handleInputChange({ target: { name: 'status', value } })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="active">Active</SelectItem>
+                        <SelectItem value="inactive">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div>
+                    <Label htmlFor="refreshInterval" className="mb-1 block">
+                      Refresh Interval
+                    </Label>
+                    <Select
+                      value={formData.config.refreshInterval}
+                      onValueChange={(value) => handleConfigChange('refreshInterval', value)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select refresh interval" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="hourly">Hourly</SelectItem>
+                        <SelectItem value="daily">Daily</SelectItem>
+                        <SelectItem value="weekly">Weekly</SelectItem>
+                        <SelectItem value="monthly">Monthly</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div className="mt-4 flex items-center space-x-2">
+                    <Checkbox 
+                      id="notifyOnChange" 
+                      checked={formData.config.notifyOnChange}
+                      onCheckedChange={(checked) => handleConfigChange('notifyOnChange', checked)}
+                    />
+                    <Label htmlFor="notifyOnChange">Notify on changes</Label>
+                  </div>
+                </TabsContent>
+                
+                <TabsContent value="datasources" className="mt-4">
+                  <div>
+                    <h3 className="mb-4 text-lg font-medium">Select Datasources</h3>
+                    {errors.datasources && <p className="mb-2 text-sm text-red-500">{errors.datasources}</p>}
+                    
+                    {loading ? (
+                      <div className="h-32 flex items-center justify-center">
+                        <Loader2 className="mr-2 h-6 w-6 animate-spin" />
+                        <span>Loading datasources...</span>
+                      </div>
+                    ) : datasources.length === 0 ? (
+                      <div className="border rounded-md py-8 text-center">
+                        <p className="text-gray-500">No active datasources found.</p>
+                        <Button
+                          variant="link"
+                          onClick={() => navigate('/app/datasources/new')}
+                          className="mt-2"
+                        >
+                          Create a datasource
+                        </Button>
+                      </div>
+                    ) : (
+                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        {datasources.map((datasource) => (
+                          <div 
+                            key={datasource.id} 
+                            className={`border rounded-md p-4 cursor-pointer transition-colors ${
+                              formData.datasources.includes(datasource.id) 
+                                ? 'border-blue-500 bg-blue-50' 
+                                : 'hover:border-gray-400'
+                            }`}
+                            onClick={() => handleDatasourceToggle(datasource.id)}
+                          >
+                            <div className="flex items-center justify-between">
+                              <div>
+                                <h4 className="font-medium">{datasource.name}</h4>
+                                <p className="text-sm text-gray-600">{datasource.type}</p>
+                              </div>
+                              <Checkbox 
+                                checked={formData.datasources.includes(datasource.id)} 
+                                onCheckedChange={() => handleDatasourceToggle(datasource.id)}
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                            </div>
+                            <p className="mt-2 truncate text-sm">{datasource.description}</p>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </TabsContent>
+                
+                <TabsContent value="mappings" className="mt-4">
+                  <div>
+                    <h3 className="mb-4 text-lg font-medium">Configure Mappings</h3>
+                    {errors.mappings && <p className="mb-2 text-sm text-red-500">{errors.mappings}</p>}
+                    
+                    {formData.datasources.length < 2 ? (
+                      <div className="border rounded-md p-6 text-center">
+                        <p className="text-gray-500">Please select at least two datasources first.</p>
+                        <Button
+                          variant="link"
+                          onClick={() => setActiveTab('datasources')}
+                        >
+                          Go to Datasources
+                        </Button>
+                      </div>
+                    ) : (
+                      <>
+                        {/* Existing mappings */}
+                        {formData.config.mappings.length > 0 && (
+                          <div className="mb-6">
+                            <h4 className="mb-3 font-medium">Defined Mappings</h4>
+                            <div className="space-y-3">
+                              {formData.config.mappings.map((mapping, index) => (
+                                <div key={index} className="border rounded-md p-4">
+                                  <div className="flex items-start justify-between">
+                                    <div>
+                                      <div className="flex items-center">
+                                        <Badge className="mr-2">Source</Badge>
+                                        <span>{mapping.source}</span>
+                                      </div>
+                                      <div className="mt-1 flex items-center">
+                                        <Badge className="mr-2">Target</Badge>
+                                        <span>{mapping.target}</span>
+                                      </div>
+                                    </div>
+                                    <Button
+                                      variant="ghost"
+                                      size="sm"
+                                      onClick={() => handleRemoveMapping(index)}
+                                      className="text-red-500 hover:text-red-700"
+                                    >
+                                      <Trash className="h-4 w-4" />
+                                    </Button>
+                                  </div>
+                                  
+                                  <div className="mt-3">
+                                    <h5 className="mb-2 text-sm font-medium">Field Mappings</h5>
+                                    <div className="space-y-1">
+                                      {mapping.fieldMappings.map((field, fidx) => (
+                                        <div key={fidx} className="flex items-center text-sm">
+                                          <span className="text-gray-600">{field.sourceField}</span>
+                                          <span className="mx-2">→</span>
+                                          <span className="text-gray-600">{field.targetField}</span>
+                                        </div>
+                                      ))}
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* New mapping form */}
+                        <div className="border rounded-md bg-gray-50 p-4">
+                          <h4 className="mb-4 font-medium">Add New Mapping</h4>
+                          
+                          <div className="grid grid-cols-1 mb-4 gap-4 md:grid-cols-2">
+                            <div>
+                              <Label className="mb-1 block">Source Datasource</Label>
+                              <Select
+                                value={sourceDatasource}
+                                onValueChange={setSourceDatasource}
+                              >
+                                <SelectTrigger>
+                                  <SelectValue placeholder="Select source" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {formData.datasources.map(id => {
+                                    const ds = getDatasourceById(id);
+                                    return ds ? (
+                                      <SelectItem key={id} value={id}>
+                                        {ds.name}
+                                      </SelectItem>
+                                    ) : null;
+                                  })}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            
+                            <div>
+                              <Label className="mb-1 block">Target Datasource</Label>
+                              <Select
+                                value={targetDatasource}
+                                onValueChange={setTargetDatasource}
+                              >
+                                <SelectTrigger>
+                                  <SelectValue placeholder="Select target" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {formData.datasources.map(id => {
+                                    const ds = getDatasourceById(id);
+                                    return ds ? (
+                                      <SelectItem key={id} value={id}>
+                                        {ds.name}
+                                      </SelectItem>
+                                    ) : null;
+                                  })}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                          </div>
+                          
+                          <div className="mb-4 space-y-3">
+                            <h5 className="text-sm font-medium">Field Mappings</h5>
+                            
+                            {mappingFields.map((field, index) => (
+                              <div key={index} className="flex items-center space-x-2">
+                                <Input
+                                  placeholder="Source field"
+                                  value={field.sourceField}
+                                  onChange={(e) => handleMappingFieldChange(index, 'sourceField', e.target.value)}
+                                  className="flex-1"
+                                />
+                                <span>→</span>
+                                <Input
+                                  placeholder="Target field"
+                                  value={field.targetField}
+                                  onChange={(e) => handleMappingFieldChange(index, 'targetField', e.target.value)}
+                                  className="flex-1"
+                                />
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  onClick={() => handleRemoveMappingField(index)}
+                                  disabled={mappingFields.length === 1}
+                                  className="text-red-500 hover:text-red-700"
+                                >
+                                  <Trash className="h-4 w-4" />
+                                </Button>
+                              </div>
+                            ))}
+                          </div>
+                          
+                          <div className="flex space-x-2">
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              onClick={handleAddMappingField}
+                            >
+                              <Plus className="mr-1 h-4 w-4" /> Add Field
+                            </Button>
+                            
+                            <Button
+                              type="button"
+                              variant="secondary"
+                              size="sm"
+                              onClick={handleAddMapping}
+                              disabled={!sourceDatasource || !targetDatasource}
+                            >
+                              <LinkIcon className="mr-1 h-4 w-4" /> Add Mapping
+                            </Button>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </TabsContent>
+              </Tabs>
+              
+              <div className="mt-6 border-t pt-6">
+                <Button
+                  type="button"
+                  onClick={handleTestConnection}
+                  disabled={testingConnection}
+                  className="w-full"
+                >
+                  {testingConnection ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Testing Configuration...
+                    </>
+                  ) : (
+                    <>
+                      {connectionStatus === 'success' ? (
+                        <Check className="mr-2 h-4 w-4" />
+                      ) : (
+                        <LinkIcon className="mr-2 h-4 w-4" />
+                      )}
+                      Test Configuration
+                    </>
+                  )}
+                </Button>
+                
+                {connectionStatus === 'success' && (
+                  <div className="mt-3 flex items-center border border-green-200 rounded-md bg-green-50 p-3">
+                    <Check className="mr-2 h-5 w-5 text-green-500" />
+                    <p className="text-sm text-green-700">Configuration is valid. You can now save this linker.</p>
+                  </div>
+                )}
+                
+                {connectionStatus === 'error' && (
+                  <div className="mt-3 flex items-center border border-red-200 rounded-md bg-red-50 p-3">
+                    <Trash className="mr-2 h-5 w-5 text-red-500" />
+                    <p className="text-sm text-red-700">Configuration is invalid. Please check your settings and try again.</p>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+            
+            <CardFooter className="flex justify-between">
+              <Button 
+                variant="outline" 
+                type="button"
+                onClick={() => navigate('/app/linkers')}
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit"
+                disabled={loading || connectionStatus !== 'success'}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    <Save className="mr-2 h-4 w-4" />
+                    Save Linker
+                  </>
+                )}
+              </Button>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </Page>
+  );
+}
diff --git a/src/pages/app/linker/LinkerEdit.jsx b/src/pages/app/linker/LinkerEdit.jsx
new file mode 100644
index 00000000..c64b3261
--- /dev/null
+++ b/src/pages/app/linker/LinkerEdit.jsx
@@ -0,0 +1,737 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import Page from '@/components/basic-page.jsx';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import { ArrowLeft, Loader2, Save, Plus, Trash, Link as LinkIcon, Check } from 'lucide-react';
+import { getAllDatasources } from '@/services/datasources';
+import { getLinkerById, updateLinker, testLinkerConnection } from '@/services/linkers';
+
+export function LinkerEdit() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const [loading, setLoading] = useState(false);
+  const [initialLoading, setInitialLoading] = useState(true);
+  const [testingConnection, setTestingConnection] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState(null);
+  const [datasources, setDatasources] = useState([]);
+  const [activeTab, setActiveTab] = useState('general');
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    status: 'active',
+    datasources: [],
+    config: {
+      refreshInterval: 'daily',
+      notifyOnChange: true,
+      mappings: []
+    }
+  });
+  const [errors, setErrors] = useState({});
+  const [sourceDatasource, setSourceDatasource] = useState('');
+  const [targetDatasource, setTargetDatasource] = useState('');
+  const [mappingFields, setMappingFields] = useState([
+    { sourceField: '', targetField: '' }
+  ]);
+
+  // Fetch datasources and linker data on component mount
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setInitialLoading(true);
+        
+        // Load datasources and linker in parallel
+        const [datasourcesResponse, linkerResponse] = await Promise.all([
+          getAllDatasources(),
+          getLinkerById(id)
+        ]);
+        
+        setDatasources(datasourcesResponse.filter(ds => ds.status === 'active'));
+        setFormData({
+          name: linkerResponse.name || '',
+          description: linkerResponse.description || '',
+          status: linkerResponse.status || 'active',
+          datasources: linkerResponse.datasources || [],
+          config: linkerResponse.config || {
+            refreshInterval: 'daily',
+            notifyOnChange: true,
+            mappings: []
+          }
+        });
+        
+        // Set initial connection status
+        setConnectionStatus(linkerResponse.status === 'active' ? 'success' : null);
+      } catch (err) {
+        toast.error('Failed to load linker data');
+        console.error('Error loading data:', err);
+        navigate('/app/linkers');
+      } finally {
+        setInitialLoading(false);
+      }
+    }
+    
+    fetchData();
+  }, [id, navigate]);
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+    
+    // Clear error for this field
+    if (errors[name]) {
+      setErrors({
+        ...errors,
+        [name]: ''
+      });
+    }
+  };
+
+  const handleConfigChange = (field, value) => {
+    setFormData({
+      ...formData,
+      config: {
+        ...formData.config,
+        [field]: value
+      }
+    });
+    
+    // Clear error for this field
+    if (errors[`config.${field}`]) {
+      setErrors({
+        ...errors,
+        [`config.${field}`]: ''
+      });
+    }
+  };
+
+  const handleDatasourceToggle = (datasourceId) => {
+    const currentDatasources = [...formData.datasources];
+    
+    if (currentDatasources.includes(datasourceId)) {
+      // Remove datasource
+      setFormData({
+        ...formData,
+        datasources: currentDatasources.filter(id => id !== datasourceId)
+      });
+      
+      // Remove any mappings involving this datasource
+      const updatedMappings = formData.config.mappings.filter(mapping => 
+        mapping.source !== getDatasourceTypeById(datasourceId) && 
+        mapping.target !== getDatasourceTypeById(datasourceId)
+      );
+      
+      setFormData(prev => ({
+        ...prev,
+        config: {
+          ...prev.config,
+          mappings: updatedMappings
+        }
+      }));
+    } else {
+      // Add datasource
+      setFormData({
+        ...formData,
+        datasources: [...currentDatasources, datasourceId]
+      });
+    }
+    
+    if (errors.datasources) {
+      setErrors({
+        ...errors,
+        datasources: ''
+      });
+    }
+  };
+
+  const getDatasourceTypeById = (id) => {
+    const datasource = datasources.find(ds => ds.id === id);
+    return datasource ? datasource.type : null;
+  };
+
+  const getDatasourceById = (id) => {
+    return datasources.find(ds => ds.id === id) || null;
+  };
+
+  const handleAddMapping = () => {
+    if (!sourceDatasource || !targetDatasource) {
+      toast.error('Please select both source and target datasources');
+      return;
+    }
+    
+    if (sourceDatasource === targetDatasource) {
+      toast.error('Source and target datasources must be different');
+      return;
+    }
+    
+    // Check if this mapping already exists
+    const existingMapping = formData.config.mappings.find(
+      mapping => mapping.source === getDatasourceTypeById(sourceDatasource) && 
+                mapping.target === getDatasourceTypeById(targetDatasource)
+    );
+    
+    if (existingMapping) {
+      toast.error('This mapping already exists');
+      return;
+    }
+    
+    if (mappingFields.some(field => !field.sourceField || !field.targetField)) {
+      toast.error('Please fill in all mapping fields');
+      return;
+    }
+    
+    const newMapping = {
+      source: getDatasourceTypeById(sourceDatasource),
+      target: getDatasourceTypeById(targetDatasource),
+      fieldMappings: [...mappingFields]
+    };
+    
+    setFormData({
+      ...formData,
+      config: {
+        ...formData.config,
+        mappings: [...formData.config.mappings, newMapping]
+      }
+    });
+    
+    // Reset the form for next mapping
+    setSourceDatasource('');
+    setTargetDatasource('');
+    setMappingFields([{ sourceField: '', targetField: '' }]);
+  };
+
+  const handleRemoveMapping = (index) => {
+    const updatedMappings = [...formData.config.mappings];
+    updatedMappings.splice(index, 1);
+    
+    setFormData({
+      ...formData,
+      config: {
+        ...formData.config,
+        mappings: updatedMappings
+      }
+    });
+  };
+
+  const handleAddMappingField = () => {
+    setMappingFields([...mappingFields, { sourceField: '', targetField: '' }]);
+  };
+
+  const handleRemoveMappingField = (index) => {
+    const updatedFields = [...mappingFields];
+    updatedFields.splice(index, 1);
+    setMappingFields(updatedFields);
+  };
+
+  const handleMappingFieldChange = (index, field, value) => {
+    const updatedFields = [...mappingFields];
+    updatedFields[index][field] = value;
+    setMappingFields(updatedFields);
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+    
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+    }
+    
+    if (!formData.description.trim()) {
+      newErrors.description = 'Description is required';
+    }
+    
+    if (formData.datasources.length < 2) {
+      newErrors.datasources = 'At least two datasources must be selected';
+    }
+    
+    if (formData.config.mappings.length === 0) {
+      newErrors.mappings = 'At least one mapping must be defined';
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleTestConnection = async () => {
+    if (!validateForm()) {
+      toast.error('Please fix the errors before testing');
+      return;
+    }
+    
+    try {
+      setTestingConnection(true);
+      await testLinkerConnection(formData);
+      setConnectionStatus('success');
+      toast.success('Linker configuration is valid');
+    } catch (err) {
+      setConnectionStatus('error');
+      toast.error('Linker configuration test failed');
+      console.error('Error testing linker:', err);
+    } finally {
+      setTestingConnection(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      toast.error('Please fix the errors before submitting');
+      return;
+    }
+    
+    try {
+      setLoading(true);
+      await updateLinker(id, formData);
+      toast.success('Linker updated successfully');
+      navigate('/app/linkers');
+    } catch (err) {
+      toast.error('Failed to update linker');
+      console.error('Error updating linker:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Mostrar spinner mientras carga los datos iniciales
+  if (initialLoading) {
+    return (
+      <Page name="Edit Linker" className="h-full w-full">
+        <div className="h-64 flex items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin" />
+          <span className="ml-2">Loading linker data...</span>
+        </div>
+      </Page>
+    );
+  }
+
+  return (
+    <Page name="Edit Linker" className="h-full w-full">
+      <div className="mx-auto max-w-4xl">
+        <div className="mb-6 flex items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate('/app/linkers')}
+            className="mr-4"
+          >
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Linkers
+          </Button>
+        </div>
+        
+        <Card>
+          <CardHeader>
+            <CardTitle>Edit Linker</CardTitle>
+            <CardDescription>
+              Update linker configuration and mappings
+            </CardDescription>
+          </CardHeader>
+          
+          <form onSubmit={handleSubmit}>
+            <CardContent>
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
+                <TabsList className="grid grid-cols-3">
+                  <TabsTrigger value="general">General</TabsTrigger>
+                  <TabsTrigger value="datasources">Datasources</TabsTrigger>
+                  <TabsTrigger value="mappings">Mappings</TabsTrigger>
+                </TabsList>
+                
+                <TabsContent value="general" className="mt-4 space-y-4">
+                  <div>
+                    <Label htmlFor="name" className="mb-1 block">
+                      Name <span className="text-red-500">*</span>
+                    </Label>
+                    <Input
+                      id="name"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleInputChange}
+                      placeholder="Enter linker name"
+                      className={errors.name ? 'border-red-500' : ''}
+                    />
+                    {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
+                  </div>
+                  
+                  <div>
+                    <Label htmlFor="description" className="mb-1 block">
+                      Description <span className="text-red-500">*</span>
+                    </Label>
+                    <Textarea
+                      id="description"
+                      name="description"
+                      value={formData.description}
+                      onChange={handleInputChange}
+                      placeholder="Enter linker description"
+                      className={errors.description ? 'border-red-500' : ''}
+                      rows={3}
+                    />
+                    {errors.description && <p className="mt-1 text-sm text-red-500">{errors.description}</p>}
+                  </div>
+                  
+                  <div>
+                    <Label htmlFor="status" className="mb-1 block">
+                      Status
+                    </Label>
+                    <Select
+                      value={formData.status}
+                      onValueChange={(value) => handleInputChange({ target: { name: 'status', value } })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="active">Active</SelectItem>
+                        <SelectItem value="inactive">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div>
+                    <Label htmlFor="refreshInterval" className="mb-1 block">
+                      Refresh Interval
+                    </Label>
+                    <Select
+                      value={formData.config.refreshInterval}
+                      onValueChange={(value) => handleConfigChange('refreshInterval', value)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select refresh interval" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="hourly">Hourly</SelectItem>
+                        <SelectItem value="daily">Daily</SelectItem>
+                        <SelectItem value="weekly">Weekly</SelectItem>
+                        <SelectItem value="monthly">Monthly</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div className="mt-4 flex items-center space-x-2">
+                    <Checkbox 
+                      id="notifyOnChange" 
+                      checked={formData.config.notifyOnChange}
+                      onCheckedChange={(checked) => handleConfigChange('notifyOnChange', checked)}
+                    />
+                    <Label htmlFor="notifyOnChange">Notify on changes</Label>
+                  </div>
+                </TabsContent>
+                
+                <TabsContent value="datasources" className="mt-4">
+                  <div>
+                    <h3 className="mb-4 text-lg font-medium">Select Datasources</h3>
+                    {errors.datasources && <p className="mb-2 text-sm text-red-500">{errors.datasources}</p>}
+                    
+                    {loading ? (
+                      <div className="h-32 flex items-center justify-center">
+                        <Loader2 className="mr-2 h-6 w-6 animate-spin" />
+                        <span>Loading datasources...</span>
+                      </div>
+                    ) : datasources.length === 0 ? (
+                      <div className="border rounded-md py-8 text-center">
+                        <p className="text-gray-500">No active datasources found.</p>
+                        <Button
+                          variant="link"
+                          onClick={() => navigate('/app/datasources/new')}
+                          className="mt-2"
+                        >
+                          Create a datasource
+                        </Button>
+                      </div>
+                    ) : (
+                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        {datasources.map((datasource) => (
+                          <div 
+                            key={datasource.id} 
+                            className={`border rounded-md p-4 cursor-pointer transition-colors ${
+                              formData.datasources.includes(datasource.id) 
+                                ? 'border-blue-500 bg-blue-50' 
+                                : 'hover:border-gray-400'
+                            }`}
+                            onClick={() => handleDatasourceToggle(datasource.id)}
+                          >
+                            <div className="flex items-center justify-between">
+                              <div>
+                                <h4 className="font-medium">{datasource.name}</h4>
+                                <p className="text-sm text-gray-600">{datasource.type}</p>
+                              </div>
+                              <Checkbox 
+                                checked={formData.datasources.includes(datasource.id)} 
+                                onCheckedChange={() => handleDatasourceToggle(datasource.id)}
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                            </div>
+                            <p className="mt-2 truncate text-sm">{datasource.description}</p>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </TabsContent>
+                
+                <TabsContent value="mappings" className="mt-4">
+                  <div>
+                    <h3 className="mb-4 text-lg font-medium">Configure Mappings</h3>
+                    {errors.mappings && <p className="mb-2 text-sm text-red-500">{errors.mappings}</p>}
+                    
+                    {formData.datasources.length < 2 ? (
+                      <div className="border rounded-md p-6 text-center">
+                        <p className="text-gray-500">Please select at least two datasources first.</p>
+                        <Button
+                          variant="link"
+                          onClick={() => setActiveTab('datasources')}
+                        >
+                          Go to Datasources
+                        </Button>
+                      </div>
+                    ) : (
+                      <>
+                        {/* Existing mappings */}
+                        {formData.config.mappings.length > 0 && (
+                          <div className="mb-6">
+                            <h4 className="mb-3 font-medium">Defined Mappings</h4>
+                            <div className="space-y-3">
+                              {formData.config.mappings.map((mapping, index) => (
+                                <div key={index} className="border rounded-md p-4">
+                                  <div className="flex items-start justify-between">
+                                    <div>
+                                      <div className="flex items-center">
+                                        <Badge className="mr-2">Source</Badge>
+                                        <span>{mapping.source}</span>
+                                      </div>
+                                      <div className="mt-1 flex items-center">
+                                        <Badge className="mr-2">Target</Badge>
+                                        <span>{mapping.target}</span>
+                                      </div>
+                                    </div>
+                                    <Button
+                                      variant="ghost"
+                                      size="sm"
+                                      onClick={() => handleRemoveMapping(index)}
+                                      className="text-red-500 hover:text-red-700"
+                                    >
+                                      <Trash className="h-4 w-4" />
+                                    </Button>
+                                  </div>
+                                  
+                                  <div className="mt-3">
+                                    <h5 className="mb-2 text-sm font-medium">Field Mappings</h5>
+                                    <div className="space-y-1">
+                                      {mapping.fieldMappings.map((field, fidx) => (
+                                        <div key={fidx} className="flex items-center text-sm">
+                                          <span className="text-gray-600">{field.sourceField}</span>
+                                          <span className="mx-2">→</span>
+                                          <span className="text-gray-600">{field.targetField}</span>
+                                        </div>
+                                      ))}
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* New mapping form */}
+                        <div className="border rounded-md bg-gray-50 p-4">
+                          <h4 className="mb-4 font-medium">Add New Mapping</h4>
+                          
+                          <div className="grid grid-cols-1 mb-4 gap-4 md:grid-cols-2">
+                            <div>
+                              <Label className="mb-1 block">Source Datasource</Label>
+                              <Select
+                                value={sourceDatasource}
+                                onValueChange={setSourceDatasource}
+                              >
+                                <SelectTrigger>
+                                  <SelectValue placeholder="Select source" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {formData.datasources.map(id => {
+                                    const ds = getDatasourceById(id);
+                                    return ds ? (
+                                      <SelectItem key={id} value={id}>
+                                        {ds.name}
+                                      </SelectItem>
+                                    ) : null;
+                                  })}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            
+                            <div>
+                              <Label className="mb-1 block">Target Datasource</Label>
+                              <Select
+                                value={targetDatasource}
+                                onValueChange={setTargetDatasource}
+                              >
+                                <SelectTrigger>
+                                  <SelectValue placeholder="Select target" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {formData.datasources.map(id => {
+                                    const ds = getDatasourceById(id);
+                                    return ds ? (
+                                      <SelectItem key={id} value={id}>
+                                        {ds.name}
+                                      </SelectItem>
+                                    ) : null;
+                                  })}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                          </div>
+                          
+                          <div className="mb-4 space-y-3">
+                            <h5 className="text-sm font-medium">Field Mappings</h5>
+                            
+                            {mappingFields.map((field, index) => (
+                              <div key={index} className="flex items-center space-x-2">
+                                <Input
+                                  placeholder="Source field"
+                                  value={field.sourceField}
+                                  onChange={(e) => handleMappingFieldChange(index, 'sourceField', e.target.value)}
+                                  className="flex-1"
+                                />
+                                <span>→</span>
+                                <Input
+                                  placeholder="Target field"
+                                  value={field.targetField}
+                                  onChange={(e) => handleMappingFieldChange(index, 'targetField', e.target.value)}
+                                  className="flex-1"
+                                />
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  onClick={() => handleRemoveMappingField(index)}
+                                  disabled={mappingFields.length === 1}
+                                  className="text-red-500 hover:text-red-700"
+                                >
+                                  <Trash className="h-4 w-4" />
+                                </Button>
+                              </div>
+                            ))}
+                          </div>
+                          
+                          <div className="flex space-x-2">
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              onClick={handleAddMappingField}
+                            >
+                              <Plus className="mr-1 h-4 w-4" /> Add Field
+                            </Button>
+                            
+                            <Button
+                              type="button"
+                              variant="secondary"
+                              size="sm"
+                              onClick={handleAddMapping}
+                              disabled={!sourceDatasource || !targetDatasource}
+                            >
+                              <LinkIcon className="mr-1 h-4 w-4" /> Add Mapping
+                            </Button>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </TabsContent>
+              </Tabs>
+              
+              <div className="mt-6 border-t pt-6">
+                <Button
+                  type="button"
+                  onClick={handleTestConnection}
+                  disabled={testingConnection}
+                  className="w-full"
+                >
+                  {testingConnection ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Testing Configuration...
+                    </>
+                  ) : (
+                    <>
+                      {connectionStatus === 'success' ? (
+                        <Check className="mr-2 h-4 w-4" />
+                      ) : (
+                        <LinkIcon className="mr-2 h-4 w-4" />
+                      )}
+                      Test Configuration
+                    </>
+                  )}
+                </Button>
+                
+                {connectionStatus === 'success' && (
+                  <div className="mt-3 flex items-center border border-green-200 rounded-md bg-green-50 p-3">
+                    <Check className="mr-2 h-5 w-5 text-green-500" />
+                    <p className="text-sm text-green-700">Configuration is valid. You can now save this linker.</p>
+                  </div>
+                )}
+                
+                {connectionStatus === 'error' && (
+                  <div className="mt-3 flex items-center border border-red-200 rounded-md bg-red-50 p-3">
+                    <Trash className="mr-2 h-5 w-5 text-red-500" />
+                    <p className="text-sm text-red-700">Configuration is invalid. Please check your settings and try again.</p>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+            
+            <CardFooter className="flex justify-between">
+              <Button 
+                variant="outline" 
+                type="button"
+                onClick={() => navigate('/app/linkers')}
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  <>
+                    <Save className="mr-2 h-4 w-4" />
+                    Save Changes
+                  </>
+                )}
+              </Button>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </Page>
+  );
+}
diff --git a/src/pages/app/linker/Linkers.jsx b/src/pages/app/linker/Linkers.jsx
new file mode 100644
index 00000000..650c6f2d
--- /dev/null
+++ b/src/pages/app/linker/Linkers.jsx
@@ -0,0 +1,418 @@
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import {
+  useReactTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  flexRender,
+  createColumnHelper,
+} from '@tanstack/react-table';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Badge } from '@/components/ui/badge';
+import { Edit, Trash, MoreHorizontal, ChevronDown, Plus, Loader2, Link as LinkIcon } from 'lucide-react';
+import { toast } from 'sonner';
+import { useNavigate } from 'react-router-dom';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import Page from '@/components/basic-page.jsx';
+import { getAllLinkers, deleteLinker } from '@/services/linkers';
+import { getAllDatasources } from '@/services/datasources';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { useAuth } from '@/hooks/use-auth';
+
+const columnHelper = createColumnHelper();
+
+export function Linkers() {
+  const [linkers, setLinkers] = useState([]);
+  const [datasources, setDatasources] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [linkerToDelete, setLinkerToDelete] = useState(null);
+  const [globalFilter, setGlobalFilter] = useState('');
+  const [rowSelection, setRowSelection] = useState({});
+  const navigate = useNavigate();
+  const { userData } = useAuth();
+
+  // Fetch linkers and datasources on component mount
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const [linkersResponse, datasourcesResponse] = await Promise.all([
+        getAllLinkers(),
+        getAllDatasources()
+      ]);
+      setLinkers(linkersResponse);
+      setDatasources(datasourcesResponse);
+      setError(null);
+    } catch (err) {
+      setError('Failed to load data. Please try again later.');
+      toast.error('Error loading data');
+      console.error('Error fetching data:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleNew = useCallback(() => {
+    navigate('/app/linkers/new');
+  }, [navigate]);
+
+  const handleEdit = useCallback((linker) => {
+    navigate(`/app/linkers/${linker.id}/edit`);
+  }, [navigate]);
+
+  const handleDeleteConfirm = useCallback((linker) => {
+    setLinkerToDelete(linker);
+  }, []);
+
+  const handleDelete = useCallback(async () => {
+    if (!linkerToDelete) return;
+    
+    try {
+      setLoading(true);
+      await deleteLinker(linkerToDelete.id);
+      setLinkers(linkers.filter((linker) => linker.id !== linkerToDelete.id));
+      toast.success('Linker deleted successfully');
+    } catch (err) {
+      toast.error('Failed to delete linker');
+      console.error('Error deleting linker:', err);
+    } finally {
+      setLoading(false);
+      setLinkerToDelete(null);
+    }
+  }, [linkers, linkerToDelete]);
+
+  const handleDeleteSelected = useCallback(async () => {
+    try {
+      setLoading(true);
+      
+      const selectedIds = Object.keys(rowSelection).map(index => linkers[parseInt(index)].id);
+      
+      if (selectedIds.length === 0) {
+        toast.error('No linkers selected');
+        return;
+      }
+      
+      for (const id of selectedIds) {
+        await deleteLinker(id);
+      }
+      
+      setLinkers(linkers.filter(linker => !selectedIds.includes(linker.id)));
+      
+      setRowSelection({});
+      
+      toast.success(`${selectedIds.length} linker${selectedIds.length > 1 ? 's' : ''} deleted successfully`);
+    } catch (err) {
+      toast.error('Failed to delete selected linkers');
+      console.error('Error deleting linkers:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [linkers, rowSelection]);
+  
+  const formatDate = (dateString) => {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    return date.toLocaleDateString();
+  };
+
+  const getDatasourceName = (id) => {
+    const datasource = datasources.find(ds => ds.id === id);
+    return datasource ? datasource.name : 'Unknown';
+  };
+
+  const renderDatasourcesList = (datasourceIds) => {
+    if (!datasourceIds || datasourceIds.length === 0) return <span className="text-gray-400">No datasources</span>;
+    
+    return (
+      <div className="flex flex-wrap gap-1">
+        {datasourceIds.slice(0, 2).map(id => (
+          <Badge key={id} variant="outline" className="whitespace-nowrap">
+            {getDatasourceName(id)}
+          </Badge>
+        ))}
+        {datasourceIds.length > 2 && (
+          <Badge variant="outline" className="whitespace-nowrap">
+            +{datasourceIds.length - 2} more
+          </Badge>
+        )}
+      </div>
+    );
+  };
+
+  const getStatusBadge = (status) => {
+    switch (status) {
+    case 'active':
+      return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Active</Badge>;
+    case 'inactive':
+      return <Badge variant="outline" className="bg-gray-100 text-gray-800 hover:bg-gray-100">Inactive</Badge>;
+    default:
+      return <Badge variant="outline">{status}</Badge>;
+    }
+  };
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            checked={table.getIsAllPageRowsSelected()}
+            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            aria-label="Select all"
+            disabled={userData.authority === 'USER'}
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+            disabled={userData.authority === 'USER'}
+          />
+        ),
+        enableSorting: false,
+        enableHiding: false,
+      },
+      columnHelper.accessor('name', {
+        header: 'Name',
+        cell: (info) => info.getValue(),
+      }),
+      columnHelper.accessor('description', {
+        header: 'Description',
+        cell: (info) => info.getValue() || 'No description',
+      }),
+      columnHelper.accessor('datasources', {
+        header: 'Datasources',
+        cell: (info) => renderDatasourcesList(info.getValue()),
+      }),
+      columnHelper.accessor('status', {
+        header: 'Status',
+        cell: (info) => getStatusBadge(info.getValue()),
+      }),
+      columnHelper.accessor('config.refreshInterval', {
+        header: 'Refresh Interval',
+        cell: (info) => info.getValue() || '-',
+      }),
+      columnHelper.accessor('updatedAt', {
+        header: 'Last Updated',
+        cell: (info) => formatDate(info.getValue()),
+      }),
+      {
+        id: 'actions',
+        cell: ({ row }) => {
+          const linker = row.original;
+          return userData.authority === 'USER' ? null : (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="h-8 w-8 p-0">
+                  <span className="sr-only">Open menu</span>
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                <DropdownMenuItem onClick={() => handleEdit(linker)}>
+                  <Edit className="mr-2 h-4 w-4" />
+                  Edit
+                </DropdownMenuItem>
+                <DropdownMenuItem 
+                  onClick={() => handleDeleteConfirm(linker)}
+                  className="text-red-600"
+                >
+                  <Trash className="mr-2 h-4 w-4" />
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          );
+        },
+      },
+    ],
+    [handleDeleteConfirm, handleEdit, userData.authority, datasources]
+  );
+
+  const table = useReactTable({
+    data: linkers,
+    columns,
+    state: {
+      globalFilter,
+      rowSelection,
+    },
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 10,
+      },
+    },
+  });
+
+  // Calcular si hay alguna fila seleccionada
+  const hasSelection = Object.keys(rowSelection).length > 0;
+
+  return (
+    <Page name="Linkers" className="h-full w-full">
+      <div className="flex items-center justify-between gap-x-4">
+        <Input
+          placeholder="Search linkers..."
+          value={globalFilter ?? ''}
+          onChange={(e) => setGlobalFilter(e.target.value)}
+          className="max-w-sm"
+        />
+        <div className="flex items-center space-x-2">
+          {userData.authority !== 'USER' && (
+            <Button 
+              variant="destructive" 
+              onClick={handleDeleteSelected}
+              disabled={!hasSelection || loading}
+            >
+              <Trash className="h-4 w-4" />
+            </Button>
+          )}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="ml-auto">
+                Columns <ChevronDown className="ml-2 h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuItem key={column.id} className="capitalize">
+                      <Checkbox
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                      />
+                      <span className="ml-2">{column.id === 'config.refreshInterval' ? 'Refresh Interval' : column.id}</span>
+                    </DropdownMenuItem>
+                  );
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          {userData.authority !== 'USER' && (
+            <Button 
+              className="border-2 border-sidebar-accent bg-sidebar-accent hover:bg-secondary hover:text-sidebar-accent"
+              onClick={handleNew}
+            >
+              <Plus className="mr-2 h-4 w-4" /> Add Linker
+            </Button>
+          )}
+        </div>
+      </div>
+      
+      {error && (
+        <div className="my-4 border border-red-400 rounded bg-red-100 px-4 py-3 text-red-700">
+          {error}
+        </div>
+      )}
+      
+      <div className="mt-4 border rounded-md">
+        <Table>
+          <TableHeader className="bg-gray-50">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loading && (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  <div className="flex items-center justify-center">
+                    <Loader2 className="mr-2 h-6 w-6 animate-spin" />
+                    Loading linkers...
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+            
+            {!loading && table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow className="cursor-pointer text-left hover:bg-gray-50" key={row.id} data-state={row.getIsSelected() && 'selected'} onClick={() => userData.authority !== 'USER' && handleEdit(row.original)}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id} onClick={(e) => cell.column.id === 'select' && e.stopPropagation()}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : !loading && (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No linkers found.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      
+      <div className="flex items-center justify-end py-4 space-x-2">
+        <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+          Previous
+        </Button>
+        <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+          Next
+        </Button>
+      </div>
+      
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={!!linkerToDelete} onOpenChange={(isOpen) => !isOpen && setLinkerToDelete(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete the linker &quot;{linkerToDelete?.name}&quot;. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700">
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                'Delete'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}
diff --git a/src/services/datasources.js b/src/services/datasources.js
new file mode 100644
index 00000000..84f0b34e
--- /dev/null
+++ b/src/services/datasources.js
@@ -0,0 +1,86 @@
+import { mockDatasources, datasourceTypes } from './mockData';
+
+// Simulate API delay
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+export async function getAllDatasources() {
+  await delay(800);
+  return [...mockDatasources];
+}
+
+export async function getDatasourceById(id) {
+  await delay(500);
+  const datasource = mockDatasources.find(ds => ds.id === id);
+  if (!datasource) {
+    throw new Error(`Datasource with id ${id} not found`);
+  }
+  return { ...datasource };
+}
+
+export async function createDatasource(datasourceData) {
+  await delay(1000);
+  const newDatasource = {
+    id: Math.random().toString(36).substr(2, 9),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    status: 'active',
+    connectionStatus: 'connected',
+    lastSyncTime: new Date().toISOString(),
+    ...datasourceData
+  };
+  
+  mockDatasources.push(newDatasource);
+  return { ...newDatasource };
+}
+
+export async function updateDatasource(id, datasourceData) {
+  await delay(800);
+  const index = mockDatasources.findIndex(ds => ds.id === id);
+  if (index === -1) {
+    throw new Error(`Datasource with id ${id} not found`);
+  }
+  
+  const updatedDatasource = {
+    ...mockDatasources[index],
+    ...datasourceData,
+    updatedAt: new Date().toISOString()
+  };
+  
+  mockDatasources[index] = updatedDatasource;
+  return { ...updatedDatasource };
+}
+
+export async function deleteDatasource(id) {
+  await delay(600);
+  const index = mockDatasources.findIndex(ds => ds.id === id);
+  if (index === -1) {
+    throw new Error(`Datasource with id ${id} not found`);
+  }
+  
+  mockDatasources.splice(index, 1);
+  return { success: true };
+}
+
+export async function getDatasourceTypes() {
+  await delay(500);
+  return [...datasourceTypes];
+}
+
+export async function testDatasourceConnection(datasourceConfig) {
+  await delay(1500);
+  // Simulate random success/failure for demo purposes
+  const success = Math.random() > 0.2;
+  
+  if (success) {
+    return { 
+      status: 'connected',
+      message: 'Connection successful',
+      details: {
+        connectionTime: new Date().toISOString(),
+        apiVersion: '1.0'
+      }
+    };
+  } else {
+    throw new Error('Connection failed. Please check your credentials and try again.');
+  }
+}
diff --git a/src/services/linkers.js b/src/services/linkers.js
new file mode 100644
index 00000000..b0fddefb
--- /dev/null
+++ b/src/services/linkers.js
@@ -0,0 +1,73 @@
+import { mockLinkers } from './mockData';
+
+// Simulate API delay
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+export async function getAllLinkers() {
+  await delay(800);
+  return [...mockLinkers];
+}
+
+export async function getLinkerById(id) {
+  await delay(500);
+  const linker = mockLinkers.find(l => l.id === id);
+  if (!linker) {
+    throw new Error(`Linker with id ${id} not found`);
+  }
+  return { ...linker };
+}
+
+export async function createLinker(linkerData) {
+  await delay(1000);
+  const newLinker = {
+    id: Math.random().toString(36).substr(2, 9),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    status: 'active',
+    ...linkerData
+  };
+  
+  mockLinkers.push(newLinker);
+  return { ...newLinker };
+}
+
+export async function updateLinker(id, linkerData) {
+  await delay(800);
+  const index = mockLinkers.findIndex(l => l.id === id);
+  if (index === -1) {
+    throw new Error(`Linker with id ${id} not found`);
+  }
+  
+  const updatedLinker = {
+    ...mockLinkers[index],
+    ...linkerData,
+    updatedAt: new Date().toISOString()
+  };
+  
+  mockLinkers[index] = updatedLinker;
+  return { ...updatedLinker };
+}
+
+export async function deleteLinker(id) {
+  await delay(600);
+  const index = mockLinkers.findIndex(l => l.id === id);
+  if (index === -1) {
+    throw new Error(`Linker with id ${id} not found`);
+  }
+  
+  mockLinkers.splice(index, 1);
+  return { success: true };
+}
+
+export async function testLinkerConnection(linkerData) {
+  await delay(1500);
+  // Simulate success for demo purposes
+  return { 
+    status: 'valid',
+    message: 'Linker configuration is valid',
+    details: {
+      validatedAt: new Date().toISOString(),
+      datasourcesConnected: linkerData.datasources.length
+    }
+  };
+}
diff --git a/src/services/mockData.js b/src/services/mockData.js
new file mode 100644
index 00000000..09b6b981
--- /dev/null
+++ b/src/services/mockData.js
@@ -0,0 +1,289 @@
+export const datasourceTypes = [
+  {
+    id: 'microsoft-graph',
+    name: 'Microsoft Graph',
+    description: 'Connect to Microsoft Graph API for accessing Office 365, Azure AD, and other Microsoft services',
+    icon: 'microsoft',
+    category: 'cloud',
+    authType: 'oauth2',
+    authFields: [
+      { name: 'tenantId', label: 'Tenant ID', type: 'text', required: true },
+      { name: 'clientId', label: 'Client ID', type: 'text', required: true },
+      { name: 'clientSecret', label: 'Client Secret', type: 'password', required: true },
+      { name: 'scopes', label: 'Scopes', type: 'array', default: ['https://graph.microsoft.com/.default'] }
+    ],
+    configFields: [
+      { name: 'endpoint', label: 'API Endpoint', type: 'text', default: 'https://graph.microsoft.com/v1.0' }
+    ],
+    complianceStandards: ['GDPR', 'ISO 27001', 'SOC 2']
+  },
+  {
+    id: 'github-api',
+    name: 'GitHub API',
+    description: 'Access GitHub repositories, issues, and other data',
+    icon: 'github',
+    category: 'devops',
+    authType: 'token',
+    authFields: [
+      { name: 'personalAccessToken', label: 'Personal Access Token', type: 'password', required: true }
+    ],
+    configFields: [
+      { name: 'defaultOrg', label: 'Default Organization', type: 'text', required: false },
+      { name: 'defaultRepo', label: 'Default Repository', type: 'text', required: false },
+      { name: 'apiVersion', label: 'API Version', type: 'select', options: ['v3', 'v4'], default: 'v3' }
+    ],
+    complianceStandards: ['GDPR', 'ISO 27001']
+  },
+  {
+    id: 'azure-security-center',
+    name: 'Azure Security Center',
+    description: 'Monitor security posture and compliance across Azure resources',
+    icon: 'azure',
+    category: 'security',
+    authType: 'oauth2',
+    authFields: [
+      { name: 'tenantId', label: 'Tenant ID', type: 'text', required: true },
+      { name: 'clientId', label: 'Client ID', type: 'text', required: true },
+      { name: 'clientSecret', label: 'Client Secret', type: 'password', required: true },
+      { name: 'subscriptionId', label: 'Subscription ID', type: 'text', required: true }
+    ],
+    configFields: [
+      { name: 'endpoint', label: 'API Endpoint', type: 'text', default: 'https://management.azure.com' }
+    ],
+    complianceStandards: ['ISO 27001', 'NIST 800-53', 'PCI DSS']
+  },
+  {
+    id: 'aws-security-hub',
+    name: 'AWS Security Hub',
+    description: 'Centralized view of security alerts and compliance status across AWS accounts',
+    icon: 'aws',
+    category: 'security',
+    authType: 'key',
+    authFields: [
+      { name: 'accessKeyId', label: 'Access Key ID', type: 'text', required: true },
+      { name: 'secretAccessKey', label: 'Secret Access Key', type: 'password', required: true },
+      { name: 'region', label: 'Region', type: 'text', required: true }
+    ],
+    configFields: [
+      { name: 'includeFindingTypes', label: 'Finding Types', type: 'multiselect', options: ['Software and Configuration Checks', 'TTPs', 'Effects'], default: ['Software and Configuration Checks'] }
+    ],
+    complianceStandards: ['GDPR', 'ISO 27001', 'HIPAA', 'PCI DSS']
+  },
+  {
+    id: 'gdpr-assessment-tool',
+    name: 'GDPR Assessment Tool',
+    description: 'Tool for assessing GDPR compliance status and generating reports',
+    icon: 'shield',
+    category: 'compliance',
+    authType: 'basic',
+    authFields: [
+      { name: 'username', label: 'Username', type: 'text', required: true },
+      { name: 'password', label: 'Password', type: 'password', required: true }
+    ],
+    configFields: [
+      { name: 'baseUrl', label: 'API Base URL', type: 'text', required: true },
+      { name: 'assessmentFrequency', label: 'Assessment Frequency', type: 'select', options: ['weekly', 'monthly', 'quarterly'], default: 'monthly' }
+    ],
+    complianceStandards: ['GDPR']
+  },
+  {
+    id: 'iso27001-tracker',
+    name: 'ISO 27001 Tracker',
+    description: 'Track and manage ISO 27001 compliance requirements',
+    icon: 'compliance',
+    category: 'compliance',
+    authType: 'apikey',
+    authFields: [
+      { name: 'apiKey', label: 'API Key', type: 'password', required: true }
+    ],
+    configFields: [
+      { name: 'endpoint', label: 'API Endpoint', type: 'text', required: true },
+      { name: 'includeControls', label: 'Include Controls', type: 'multiselect', options: ['A.5', 'A.6', 'A.7', 'A.8', 'A.9', 'A.10', 'A.11', 'A.12', 'A.13', 'A.14', 'A.15', 'A.16', 'A.17', 'A.18'], default: ['A.5', 'A.6', 'A.7'] }
+    ],
+    complianceStandards: ['ISO 27001']
+  }
+];
+
+export const mockDatasources = [
+  {
+    id: '1',
+    name: 'Corporate Microsoft Graph',
+    type: 'microsoft-graph',
+    description: 'Microsoft Graph connection for corporate Office 365 data',
+    createdAt: '2025-10-20T10:30:00Z',
+    updatedAt: '2025-10-20T14:45:00Z',
+    status: 'active',
+    configuration: {
+      tenantId: 'corporate-tenant-id',
+      clientId: 'graph-client-id',
+      endpoint: 'https://graph.microsoft.com/v1.0'
+    },
+    lastSyncTime: '2025-10-20T14:45:00Z',
+    connectionStatus: 'connected'
+  },
+  {
+    id: '2',
+    name: 'Development GitHub',
+    type: 'github-api',
+    description: 'GitHub API connection for our development repositories',
+    createdAt: '2025-10-20T09:15:00Z',
+    updatedAt: '2025-10-20T11:20:00Z',
+    status: 'active',
+    configuration: {
+      defaultOrg: 'our-organization',
+      defaultRepo: '',
+      apiVersion: 'v3'
+    },
+    lastSyncTime: '2025-10-20T11:20:00Z',
+    connectionStatus: 'connected'
+  },
+  {
+    id: '3',
+    name: 'Cloud Security Hub',
+    type: 'azure-security-center',
+    description: 'Azure Security Center connection for monitoring cloud security compliance',
+    createdAt: '2025-10-20T14:20:00Z',
+    updatedAt: '2025-10-20T08:30:00Z',
+    status: 'active',
+    configuration: {
+      tenantId: 'security-tenant-id',
+      subscriptionId: 'subscription-id-1',
+      endpoint: 'https://management.azure.com'
+    },
+    lastSyncTime: '2025-10-20T08:30:00Z',
+    connectionStatus: 'connected'
+  },
+  {
+    id: '4',
+    name: 'AWS Compliance Monitor',
+    type: 'aws-security-hub',
+    description: 'AWS Security Hub for compliance monitoring in our cloud infrastructure',
+    createdAt: '2025-10-20T16:45:00Z',
+    updatedAt: '2025-10-20T13:10:00Z',
+    status: 'inactive',
+    configuration: {
+      region: 'eu-west-1',
+      includeFindingTypes: ['Software and Configuration Checks', 'TTPs']
+    },
+    lastSyncTime: '2025-10-20T09:15:00Z',
+    connectionStatus: 'error'
+  },
+  {
+    id: '5',
+    name: 'GDPR Assessment Tool',
+    type: 'gdpr-assessment-tool',
+    description: 'Tool for tracking and documenting GDPR compliance',
+    createdAt: '2025-10-20T11:30:00Z',
+    updatedAt: '2025-10-20T10:25:00Z',
+    status: 'active',
+    configuration: {
+      baseUrl: 'https://gdpr-assessment.example.com/api',
+      assessmentFrequency: 'monthly'
+    },
+    lastSyncTime: '2025-10-20T10:25:00Z',
+    connectionStatus: 'connected'
+  },
+  {
+    id: '6',
+    name: 'ISO 27001 Compliance Tracker',
+    type: 'iso27001-tracker',
+    description: 'ISO 27001 compliance tracking and documentation system',
+    createdAt: '2025-10-20T09:45:00Z',
+    updatedAt: '2025-10-20T15:50:00Z',
+    status: 'active',
+    configuration: {
+      endpoint: 'https://iso27001-tracker.example.com/api/v1',
+      includeControls: ['A.5', 'A.6', 'A.7', 'A.8', 'A.9']
+    },
+    lastSyncTime: '2025-10-20T15:50:00Z',
+    connectionStatus: 'connected'
+  }
+];
+
+export const mockLinkers = [
+  {
+    id: '1',
+    name: 'SharePoint Linker',
+    description: 'Links data sources for NSS compliance monitoring',
+    createdAt: '2025-10-20T13:45:00Z',
+    updatedAt: '2025-10-20T10:30:00Z',
+    status: 'active',
+    datasources: ['1', '5'],
+    config: {
+      refreshInterval: 'daily',
+      notifyOnChange: true,
+      mappings: [
+        {
+          source: 'microsoft-graph',
+          target: 'microsoft-graph',
+          fieldMappings: [
+            { sourceField: 'users', targetField: 'dataSubjects' },
+            { sourceField: 'groups', targetField: 'dataCategories' }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    id: '2',
+    name: 'GLPI Linker',
+    description: 'Links GitHub with security monitoring tools',
+    createdAt: '2025-10-20T09:20:00Z',
+    updatedAt: '2025-10-20T14:15:00Z',
+    status: 'active',
+    datasources: ['2', '3', '4'],
+    config: {
+      refreshInterval: 'hourly',
+      notifyOnChange: true,
+      mappings: [
+        {
+          source: 'github-api',
+          target: 'azure-security-center',
+          fieldMappings: [
+            { sourceField: 'repositories', targetField: 'resources' },
+            { sourceField: 'securityAlerts', targetField: 'recommendations' }
+          ]
+        },
+        {
+          source: 'github-api',
+          target: 'aws-security-hub',
+          fieldMappings: [
+            { sourceField: 'repositories', targetField: 'resources' },
+            { sourceField: 'securityAlerts', targetField: 'findings' }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    id: '3',
+    name: 'Odoo Linker',
+    description: 'Links cloud security tools with ISO 27001 tracker',
+    createdAt: '2025-10-20T11:30:00Z',
+    updatedAt: '2025-10-20T16:45:00Z',
+    status: 'inactive',
+    datasources: ['3', '4', '6'],
+    config: {
+      refreshInterval: 'daily',
+      notifyOnChange: false,
+      mappings: [
+        {
+          source: 'azure-security-center',
+          target: 'iso27001-tracker',
+          fieldMappings: [
+            { sourceField: 'securityControls', targetField: 'controls' },
+            { sourceField: 'complianceState', targetField: 'implementationStatus' }
+          ]
+        },
+        {
+          source: 'aws-security-hub',
+          target: 'iso27001-tracker',
+          fieldMappings: [
+            { sourceField: 'securityControls', targetField: 'controls' },
+            { sourceField: 'findings', targetField: 'issues' }
+          ]
+        }
+      ]
+    }
+  }
+];

From bbf365bb0f0b916478fc45d8ceca14822eee6770 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 4 Aug 2025 14:52:17 +0000
Subject: [PATCH 19/24] chore(deps): update docker/login-action action to
 v3.5.0

---
 .github/workflows/docker-deploy.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/docker-deploy.yml b/.github/workflows/docker-deploy.yml
index 135eaf2b..f0ba0b1d 100644
--- a/.github/workflows/docker-deploy.yml
+++ b/.github/workflows/docker-deploy.yml
@@ -45,13 +45,13 @@ jobs:
         uses: docker/setup-buildx-action@v3.11.1
 
       - name: Login to DockerHub 🔑
-        uses: docker/login-action@v3.4.0
+        uses: docker/login-action@v3.5.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
       - name: Login to GitHub Container Registry 🔑
-        uses: docker/login-action@v3.4.0
+        uses: docker/login-action@v3.5.0
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}

From 16007dc65a5b47854d5adeb90a37f6cf9947c3f8 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 23 Jul 2025 09:10:56 +0000
Subject: [PATCH 20/24] chore(deps): update dependency zod to v4

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fc91a54e..5f0d64ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "react-router-dom": "7.6.3",
         "sonner": "2.0.6",
         "tailwind-merge": "3.3.1",
-        "zod": "3.25.74"
+        "zod": "4.0.5"
       },
       "devDependencies": {
         "@commitlint/cli": "19.8.1",
@@ -9945,9 +9945,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.25.74",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.74.tgz",
-      "integrity": "sha512-J8poo92VuhKjNknViHRAIuuN6li/EwFbAC8OedzI8uxpEPGiXHGQu9wemIAioIpqgfB4SySaJhdk0mH5Y4ICBg==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.0.5.tgz",
+      "integrity": "sha512-/5UuuRPStvHXu7RS+gmvRf4NXrNxpSllGwDnCBcJZtQsKrviYXm54yDGV2KYNLT5kq0lHGcl7lqWJLgSaG+tgA==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/package.json b/package.json
index 5b1b7d74..f73f462e 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "react-router-dom": "7.6.3",
     "sonner": "2.0.6",
     "tailwind-merge": "3.3.1",
-    "zod": "3.25.74"
+    "zod": "4.0.5"
   },
   "devDependencies": {
     "@commitlint/cli": "19.8.1",

From 4b4e9df82c527731b625988d4bdf9d5473448bb3 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 23 Jul 2025 19:59:48 +0000
Subject: [PATCH 21/24] chore(deps): update dependency axios to v1.11.0
 [security]

---
 package-lock.json | 16 ++++++++--------
 package.json      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5f0d64ba..1e80217c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@hookform/resolvers": "5.1.1",
         "@tanstack/react-table": "8.21.3",
         "ahooks": "3.9.0",
-        "axios": "1.10.0",
+        "axios": "1.11.0",
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
         "cmdk": "1.1.1",
@@ -4506,13 +4506,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
-      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -6148,9 +6148,9 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
-      "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
diff --git a/package.json b/package.json
index f73f462e..a9c42bf2 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@hookform/resolvers": "5.1.1",
     "@tanstack/react-table": "8.21.3",
     "ahooks": "3.9.0",
-    "axios": "1.10.0",
+    "axios": "1.11.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",

From 08dea4d72fac67b860f3e0eadd3389fc852a0c25 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 23 Jul 2025 09:10:48 +0000
Subject: [PATCH 22/24] chore(deps): update npm (runtime)

---
 package-lock.json | 20 ++++++++++----------
 package.json      |  4 ++--
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1e80217c..3440ff6c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,10 +24,10 @@
         "react-day-picker": "9.8.0",
         "react-dom": "19.1.0",
         "react-hook-form": "7.60.0",
-        "react-router-dom": "7.6.3",
+        "react-router-dom": "7.7.0",
         "sonner": "2.0.6",
         "tailwind-merge": "3.3.1",
-        "zod": "4.0.5"
+        "zod": "3.25.76"
       },
       "devDependencies": {
         "@commitlint/cli": "19.8.1",
@@ -8421,9 +8421,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.3.tgz",
-      "integrity": "sha512-zf45LZp5skDC6I3jDLXQUu0u26jtuP4lEGbc7BbdyxenBN1vJSTA18czM2D+h5qyMBuMrD+9uB+mU37HIoKGRA==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.0.tgz",
+      "integrity": "sha512-3FUYSwlvB/5wRJVTL/aavqHmfUKe0+Xm9MllkYgGo9eDwNdkvwlJGjpPxono1kCycLt6AnDTgjmXvK3/B4QGuw==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -8443,12 +8443,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.3.tgz",
-      "integrity": "sha512-DiWJm9qdUAmiJrVWaeJdu4TKu13+iB/8IEi0EW/XgaHCjW/vWGrwzup0GVvaMteuZjKnh5bEvJP/K0MDnzawHw==",
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.7.0.tgz",
+      "integrity": "sha512-wwGS19VkNBkneVh9/YD0pK3IsjWxQUVMDD6drlG7eJpo1rXBtctBqDyBm/k+oKHRAm1x9XWT3JFC82QI9YOXXA==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.6.3"
+        "react-router": "7.7.0"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -9954,4 +9954,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index a9c42bf2..a73fd0e2 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "react-day-picker": "9.8.0",
     "react-dom": "19.1.0",
     "react-hook-form": "7.60.0",
-    "react-router-dom": "7.6.3",
+    "react-router-dom": "7.7.0",
     "sonner": "2.0.6",
     "tailwind-merge": "3.3.1",
     "zod": "4.0.5"
@@ -67,4 +67,4 @@
     "unocss-preset-animations": "1.2.1",
     "vite": "7.0.2"
   }
-}
+}
\ No newline at end of file

From 60e35a59c482f347c87026f333ad3fcac5414512 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 7 Aug 2025 14:05:55 +0000
Subject: [PATCH 23/24] chore(deps): update dependency @vitejs/plugin-react-swc
 to v4

---
 package-lock.json | 109 ++++++++++++++++++++++++----------------------
 package.json      |   2 +-
 2 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3440ff6c..fd8894d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,7 @@
         "@types/react": "19.1.8",
         "@types/react-dom": "19.1.6",
         "@unocss/eslint-config": "66.3.3",
-        "@vitejs/plugin-react-swc": "3.10.2",
+        "@vitejs/plugin-react-swc": "4.0.0",
         "browserslist": "4.25.1",
         "eslint": "9.30.1",
         "eslint-plugin-react": "7.37.5",
@@ -2894,9 +2894,9 @@
       "license": "MIT"
     },
     "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.11",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.11.tgz",
-      "integrity": "sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==",
+      "version": "1.0.0-beta.30",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.30.tgz",
+      "integrity": "sha512-whXaSoNUFiyDAjkUF8OBpOm77Szdbk5lGNqFe6CbVbJFrhCCPinCbRA3NjawwlNHla1No7xvXXh+CpSxnPfUEw==",
       "dev": true,
       "license": "MIT"
     },
@@ -3204,9 +3204,9 @@
       }
     },
     "node_modules/@swc/core": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.12.9.tgz",
-      "integrity": "sha512-O+LfT2JlVMsIMWG9x+rdxg8GzpzeGtCZQfXV7cKc1PjIKUkLFf1QJ7okuseA4f/9vncu37dQ2ZcRrPKy0Ndd5g==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.13.3.tgz",
+      "integrity": "sha512-ZaDETVWnm6FE0fc+c2UE8MHYVS3Fe91o5vkmGfgwGXFbxYvAjKSqxM/j4cRc9T7VZNSJjriXq58XkfCp3Y6f+w==",
       "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
@@ -3222,16 +3222,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.12.9",
-        "@swc/core-darwin-x64": "1.12.9",
-        "@swc/core-linux-arm-gnueabihf": "1.12.9",
-        "@swc/core-linux-arm64-gnu": "1.12.9",
-        "@swc/core-linux-arm64-musl": "1.12.9",
-        "@swc/core-linux-x64-gnu": "1.12.9",
-        "@swc/core-linux-x64-musl": "1.12.9",
-        "@swc/core-win32-arm64-msvc": "1.12.9",
-        "@swc/core-win32-ia32-msvc": "1.12.9",
-        "@swc/core-win32-x64-msvc": "1.12.9"
+        "@swc/core-darwin-arm64": "1.13.3",
+        "@swc/core-darwin-x64": "1.13.3",
+        "@swc/core-linux-arm-gnueabihf": "1.13.3",
+        "@swc/core-linux-arm64-gnu": "1.13.3",
+        "@swc/core-linux-arm64-musl": "1.13.3",
+        "@swc/core-linux-x64-gnu": "1.13.3",
+        "@swc/core-linux-x64-musl": "1.13.3",
+        "@swc/core-win32-arm64-msvc": "1.13.3",
+        "@swc/core-win32-ia32-msvc": "1.13.3",
+        "@swc/core-win32-x64-msvc": "1.13.3"
       },
       "peerDependencies": {
         "@swc/helpers": ">=0.5.17"
@@ -3243,9 +3243,9 @@
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.12.9.tgz",
-      "integrity": "sha512-GACFEp4nD6V+TZNR2JwbMZRHB+Yyvp14FrcmB6UCUYmhuNWjkxi+CLnEvdbuiKyQYv0zA+TRpCHZ+whEs6gwfA==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.13.3.tgz",
+      "integrity": "sha512-ux0Ws4pSpBTqbDS9GlVP354MekB1DwYlbxXU3VhnDr4GBcCOimpocx62x7cFJkSpEBF8bmX8+/TTCGKh4PbyXw==",
       "cpu": [
         "arm64"
       ],
@@ -3260,9 +3260,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.12.9.tgz",
-      "integrity": "sha512-hv2kls7Ilkm2EpeJz+I9MCil7pGS3z55ZAgZfxklEuYsxpICycxeH+RNRv4EraggN44ms+FWCjtZFu0LGg2V3g==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.13.3.tgz",
+      "integrity": "sha512-p0X6yhxmNUOMZrbeZ3ZNsPige8lSlSe1llllXvpCLkKKxN/k5vZt1sULoq6Nj4eQ7KeHQVm81/+AwKZyf/e0TA==",
       "cpu": [
         "x64"
       ],
@@ -3277,9 +3277,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.12.9.tgz",
-      "integrity": "sha512-od9tDPiG+wMU9wKtd6y3nYJdNqgDOyLdgRRcrj1/hrbHoUPOM8wZQZdwQYGarw63iLXGgsw7t5HAF9Yc51ilFA==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.13.3.tgz",
+      "integrity": "sha512-OmDoiexL2fVWvQTCtoh0xHMyEkZweQAlh4dRyvl8ugqIPEVARSYtaj55TBMUJIP44mSUOJ5tytjzhn2KFxFcBA==",
       "cpu": [
         "arm"
       ],
@@ -3294,9 +3294,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.12.9.tgz",
-      "integrity": "sha512-6qx1ka9LHcLzxIgn2Mros+CZLkHK2TawlXzi/h7DJeNnzi8F1Hw0Yzjp8WimxNCg6s2n+o3jnmin1oXB7gg8rw==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.13.3.tgz",
+      "integrity": "sha512-STfKku3QfnuUj6k3g9ld4vwhtgCGYIFQmsGPPgT9MK/dI3Lwnpe5Gs5t1inoUIoGNP8sIOLlBB4HV4MmBjQuhw==",
       "cpu": [
         "arm64"
       ],
@@ -3311,9 +3311,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.12.9.tgz",
-      "integrity": "sha512-yghFZWKPVVGbUdqiD7ft23G0JX6YFGDJPz9YbLLAwGuKZ9th3/jlWoQDAw1Naci31LQhVC+oIji6ozihSuwB2A==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.13.3.tgz",
+      "integrity": "sha512-bc+CXYlFc1t8pv9yZJGus372ldzOVscBl7encUBlU1m/Sig0+NDJLz6cXXRcFyl6ABNOApWeR4Yl7iUWx6C8og==",
       "cpu": [
         "arm64"
       ],
@@ -3328,9 +3328,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.12.9.tgz",
-      "integrity": "sha512-SFUxyhWLZRNL8QmgGNqdi2Q43PNyFVkRZ2zIif30SOGFSxnxcf2JNeSeBgKIGVgaLSuk6xFVVCtJ3KIeaStgRg==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.13.3.tgz",
+      "integrity": "sha512-dFXoa0TEhohrKcxn/54YKs1iwNeW6tUkHJgXW33H381SvjKFUV53WR231jh1sWVJETjA3vsAwxKwR23s7UCmUA==",
       "cpu": [
         "x64"
       ],
@@ -3345,9 +3345,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.12.9.tgz",
-      "integrity": "sha512-9FB0wM+6idCGTI20YsBNBg9xSWtkDBymnpaTCsZM3qDc0l4uOpJMqbfWhQvp17x7r/ulZfb2QY8RDvQmCL6AcQ==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.13.3.tgz",
+      "integrity": "sha512-ieyjisLB+ldexiE/yD8uomaZuZIbTc8tjquYln9Quh5ykOBY7LpJJYBWvWtm1g3pHv6AXlBI8Jay7Fffb6aLfA==",
       "cpu": [
         "x64"
       ],
@@ -3362,9 +3362,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.12.9.tgz",
-      "integrity": "sha512-zHOusMVbOH9ik5RtRrMiGzLpKwxrPXgXkBm3SbUCa65HAdjV33NZ0/R9Rv1uPESALtEl2tzMYLUxYA5ECFDFhA==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.13.3.tgz",
+      "integrity": "sha512-elTQpnaX5vESSbhCEgcwXjpMsnUbqqHfEpB7ewpkAsLzKEXZaK67ihSRYAuAx6ewRQTo7DS5iTT6X5aQD3MzMw==",
       "cpu": [
         "arm64"
       ],
@@ -3379,9 +3379,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.12.9.tgz",
-      "integrity": "sha512-aWZf0PqE0ot7tCuhAjRkDFf41AzzSQO0x2xRfTbnhpROp57BRJ/N5eee1VULO/UA2PIJRG7GKQky5bSGBYlFug==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.13.3.tgz",
+      "integrity": "sha512-nvehQVEOdI1BleJpuUgPLrclJ0TzbEMc+MarXDmmiRFwEUGqj+pnfkTSb7RZyS1puU74IXdK/YhTirHurtbI9w==",
       "cpu": [
         "ia32"
       ],
@@ -3396,9 +3396,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.12.9",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.12.9.tgz",
-      "integrity": "sha512-C25fYftXOras3P3anSUeXXIpxmEkdAcsIL9yrr0j1xepTZ/yKwpnQ6g3coj8UXdeJy4GTVlR6+Ow/QiBgZQNOg==",
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.13.3.tgz",
+      "integrity": "sha512-A+JSKGkRbPLVV2Kwx8TaDAV0yXIXm/gc8m98hSkVDGlPBBmydgzNdWy3X7HTUBM7IDk7YlWE7w2+RUGjdgpTmg==",
       "cpu": [
         "x64"
       ],
@@ -4074,17 +4074,20 @@
       }
     },
     "node_modules/@vitejs/plugin-react-swc": {
-      "version": "3.10.2",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.10.2.tgz",
-      "integrity": "sha512-xD3Rdvrt5LgANug7WekBn1KhcvLn1H3jNBfJRL3reeOIua/WnZOEV5qi5qIBq5T8R0jUDmRtxuvk4bPhzGHDWw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-4.0.0.tgz",
+      "integrity": "sha512-4A1dThI578v07mpG4M+ziNn6lmlMlhtVCheL+2WLvClnLvEULi8rpAZThn2oEKn3GtFXFTOeko6eLRhx2V2kgA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@rolldown/pluginutils": "1.0.0-beta.11",
-        "@swc/core": "^1.11.31"
+        "@rolldown/pluginutils": "1.0.0-beta.30",
+        "@swc/core": "^1.13.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "vite": "^4 || ^5 || ^6 || ^7.0.0-beta.0"
+        "vite": "^4 || ^5 || ^6 || ^7"
       }
     },
     "node_modules/@vue/compiler-core": {
diff --git a/package.json b/package.json
index a73fd0e2..5fd0322c 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "@unocss/eslint-config": "66.3.3",
-    "@vitejs/plugin-react-swc": "3.10.2",
+    "@vitejs/plugin-react-swc": "4.0.0",
     "browserslist": "4.25.1",
     "eslint": "9.30.1",
     "eslint-plugin-react": "7.37.5",

From 413d9a7ed0e9fcb2f764f9ab9d8df3278b933551 Mon Sep 17 00:00:00 2001
From: "[[alvarobernal2412]]" <alvarobc2412@gmail.com>
Date: Mon, 22 Dec 2025 13:39:41 +0100
Subject: [PATCH 24/24] feat(databinder): enhance UI/UX

---
 package-lock.json                             |  10 +-
 package.json                                  |   2 +-
 src/App.jsx                                   |   4 +
 src/components/basic-page.jsx                 |  20 +-
 src/components/linker/AddDatasourceDialog.jsx | 514 +++++++++++
 .../linker/LinkerDatasourcesStep.jsx          | 329 +++++++
 src/components/linker/LinkerMappingStep.jsx   |  45 +
 src/forms/datasource/schemas.js               |  14 +
 src/pages/app/datasource/DatasourceCreate.jsx | 626 +++++++------
 src/pages/app/datasource/DatasourceDetail.jsx | 437 +++++++++
 src/pages/app/datasource/DatasourceEdit.jsx   | 133 +--
 src/pages/app/datasource/Datasources.jsx      | 133 +--
 src/pages/app/linker/LinkerCreate.jsx         | 870 +++++-------------
 src/pages/app/linker/LinkerDetail.jsx         | 364 ++++++++
 src/pages/app/linker/LinkerEdit.jsx           | 695 ++++----------
 src/pages/app/linker/LinkerEdit_OLD.jsx       | 737 +++++++++++++++
 src/pages/app/linker/Linkers.jsx              | 121 ++-
 src/services/datasources.js                   | 155 ++--
 src/services/linkers.js                       | 123 +--
 src/utils/datasourceResponseDTO.js            |  41 +
 src/utils/linkerDraftStorage.js               | 185 ++++
 21 files changed, 3856 insertions(+), 1702 deletions(-)
 create mode 100644 src/components/linker/AddDatasourceDialog.jsx
 create mode 100644 src/components/linker/LinkerDatasourcesStep.jsx
 create mode 100644 src/components/linker/LinkerMappingStep.jsx
 create mode 100644 src/forms/datasource/schemas.js
 create mode 100644 src/pages/app/datasource/DatasourceDetail.jsx
 create mode 100644 src/pages/app/linker/LinkerDetail.jsx
 create mode 100644 src/pages/app/linker/LinkerEdit_OLD.jsx
 create mode 100644 src/utils/datasourceResponseDTO.js
 create mode 100644 src/utils/linkerDraftStorage.js

diff --git a/package-lock.json b/package-lock.json
index fd8894d4..11b8971b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "react-router-dom": "7.7.0",
         "sonner": "2.0.6",
         "tailwind-merge": "3.3.1",
-        "zod": "3.25.76"
+        "zod": "4.0.5"
       },
       "devDependencies": {
         "@commitlint/cli": "19.8.1",
@@ -4665,9 +4665,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001727",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
-      "integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
+      "version": "1.0.30001760",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz",
+      "integrity": "sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==",
       "dev": true,
       "funding": [
         {
@@ -9957,4 +9957,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 5fd0322c..b03af013 100644
--- a/package.json
+++ b/package.json
@@ -67,4 +67,4 @@
     "unocss-preset-animations": "1.2.1",
     "vite": "7.0.2"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.jsx b/src/App.jsx
index 4f2f0189..e93064aa 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -19,9 +19,11 @@ import { FolderDetails } from '@/pages/app/dashboard/FolderDetails';
 import { Editor } from '@/pages/app/Editor';
 import { Datasources } from '@/pages/app/datasource/Datasources';
 import { DatasourceCreate } from '@/pages/app/datasource/DatasourceCreate';
+import { DatasourceDetail } from '@/pages/app/datasource/DatasourceDetail';
 import { DatasourceEdit } from '@/pages/app/datasource/DatasourceEdit';
 import { Linkers } from '@/pages/app/linker/Linkers';
 import { LinkerCreate } from '@/pages/app/linker/LinkerCreate';
+import { LinkerDetail } from '@/pages/app/linker/LinkerDetail';
 import { LinkerEdit } from '@/pages/app/linker/LinkerEdit';
 import MainLayout from '@/layouts/MainLayout';
 import AppLayout from '@/layouts/AppLayout';
@@ -72,11 +74,13 @@ function App() {
               <Route path="datasources">
                 <Route index element={<Datasources />} />
                 <Route path="new" element={<DatasourceCreate />} />
+                <Route path=":id" element={<DatasourceDetail />} />
                 <Route path=":id/edit" element={<DatasourceEdit />} />
               </Route>
               <Route path="linkers">
                 <Route index element={<Linkers />} />
                 <Route path="new" element={<LinkerCreate />} />
+                <Route path=":id" element={<LinkerDetail />} />
                 <Route path=":id/edit" element={<LinkerEdit />} />
               </Route>
               <Route path="scopes" element={<Scopes />} />
diff --git a/src/components/basic-page.jsx b/src/components/basic-page.jsx
index 04a8cd5e..e28489e6 100644
--- a/src/components/basic-page.jsx
+++ b/src/components/basic-page.jsx
@@ -17,6 +17,14 @@ function generateBreadcrumbs(path, additionalData = {}) {
     const isCatalogId = segments[index-1] === 'catalogs' && !isNaN(segment);
     const catalogData = isCatalogId && additionalData.catalogData ? additionalData.catalogData : null;
     
+    // Detect if it's a datasource ID and if we have data for it
+    const isDatasourceId = segments[index-1] === 'datasources' && additionalData.datasource;
+    const datasourceData = isDatasourceId ? additionalData.datasource : null;
+    
+    // Detect if it's a linker ID and if we have data for it
+    const isLinkerId = segments[index-1] === 'linkers' && additionalData.linker;
+    const linkerData = isLinkerId ? additionalData.linker : null;
+    
     // Detect if we are in the control details view
     const isControlView = segments[index-1] === 'controls' && additionalData.control;
     
@@ -38,6 +46,10 @@ function generateBreadcrumbs(path, additionalData = {}) {
       name = 'Home';
     } else if (catalogData && isCatalogId) {
       name = catalogData.name || segment;
+    } else if (datasourceData && isDatasourceId) {
+      name = datasourceData.name || segment;
+    } else if (linkerData && isLinkerId) {
+      name = linkerData.name || 'Unnamed Linker';
     } else if (segment === 'controls') {
       const catalogHref = '/' + segments.slice(0, index).join('/');
       return { name: 'Controls', href: catalogHref, isLast, state: additionalData };
@@ -66,7 +78,7 @@ function generateBreadcrumbs(path, additionalData = {}) {
       href, 
       isLast,
       isClickable,
-      state: (segments[index-1] === 'catalogs' || segments[index] === 'catalogs' || isFolder || isDashboard || isEditor) ? additionalData : null,
+      state: (segments[index-1] === 'catalogs' || segments[index] === 'catalogs' || segments[index-1] === 'datasources' || segments[index] === 'datasources' || segments[index-1] === 'linkers' || segments[index] === 'linkers' || isFolder || isDashboard || isEditor) ? additionalData : null,
       uniqueKey: segments.slice(0, index + 1).join('/')
     };
   }).filter(crumb => crumb.name !== 'Home' || crumb.isLast);
@@ -80,6 +92,8 @@ export default function Page({ children, ...props }) {
   const controlData = props.control || location.state?.control;
   const folderData = props.folder || location.state?.folder;
   const dashboardData = props.dashboard || location.state?.dashboard;
+  const datasourceData = props.datasource || location.state?.datasource;
+  const linkerData = props.linker || location.state?.linker;
   const flowName = props.flowName || location.state?.flowName;
   const computationDate = props.computationDate || location.state?.computationDate;
   
@@ -88,6 +102,8 @@ export default function Page({ children, ...props }) {
     control: controlData, 
     folderData, 
     dashboardData, 
+    datasource: datasourceData,
+    linker: linkerData,
     flowName, 
     computationDate 
   };
@@ -96,7 +112,7 @@ export default function Page({ children, ...props }) {
 
   return (
     <div className="h-full space-y-8">
-      <header className="group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 h-16 flex shrink-0 items-center gap-2 transition-[width,height] ease-linear">
+      <header className="h-16 flex shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
         <div className="flex items-center gap-2">
           <TooltipProvider>
             <Tooltip>
diff --git a/src/components/linker/AddDatasourceDialog.jsx b/src/components/linker/AddDatasourceDialog.jsx
new file mode 100644
index 00000000..1bad9028
--- /dev/null
+++ b/src/components/linker/AddDatasourceDialog.jsx
@@ -0,0 +1,514 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Loader2, AlertCircle, RefreshCw } from 'lucide-react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { toast } from 'sonner';
+import { getAllDatasources, getDatasourceMethods, getDatasourceMethodDetails, fetchDatasourceData } from '@/services/datasources';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cleanDatasourceResponse } from '@/utils/datasourceResponseDTO';
+
+// Schema validation for datasource configuration
+const datasourceConfigSchema = z.object({
+  datasourceId: z.string().min(1, { message: 'Datasource is required' }),
+  methodName: z.string().min(1, { message: 'Method is required' }),
+});
+
+export function AddDatasourceDialog({ open, onClose, onSuccess }) {
+  const [loading, setLoading] = useState(false);
+  const [datasources, setDatasources] = useState([]);
+  const [methods, setMethods] = useState([]);
+  const [loadingMethods, setLoadingMethods] = useState(false);
+  const [preview, setPreview] = useState(null);
+  const [loadingPreview, setLoadingPreview] = useState(false);
+  const [error, setError] = useState(null);
+  const [options, setOptions] = useState({});
+  const [methodDetails, setMethodDetails] = useState(null);
+  const [loadingMethodDetails, setLoadingMethodDetails] = useState(false);
+
+  const form = useForm({
+    resolver: zodResolver(datasourceConfigSchema),
+    defaultValues: {
+      datasourceId: '',
+      methodName: '',
+    },
+  });
+
+  const selectedDatasourceId = form.watch('datasourceId');
+  const selectedMethodName = form.watch('methodName');
+
+  // Fetch datasources on mount
+  useEffect(() => {
+    async function fetchDatasources() {
+      try {
+        setLoading(true);
+        const response = await getAllDatasources();
+        setDatasources(response.filter(ds => ds.isActive !== false));
+      } catch (err) {
+        toast.error('Failed to load datasources');
+        console.error('Error fetching datasources:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    
+    if (open) {
+      fetchDatasources();
+    }
+  }, [open]);
+
+  // Fetch methods when datasource changes
+  useEffect(() => {
+    async function fetchMethods() {
+      if (!selectedDatasourceId) {
+        setMethods([]);
+        return;
+      }
+
+      try {
+        setLoadingMethods(true);
+        setError(null);
+        const response = await getDatasourceMethods(selectedDatasourceId);
+        
+        // New format (v1.2.3): response.methods is an array of method names
+        const methodsList = response.methods || [];
+        
+        setMethods(methodsList);
+        
+        // Reset method selection when datasource changes
+        form.setValue('methodName', '');
+        setPreview(null);
+      } catch (err) {
+        setError('Failed to load methods for this datasource');
+        console.error('Error fetching methods:', err);
+        setMethods([]);
+      } finally {
+        setLoadingMethods(false);
+      }
+    }
+
+    fetchMethods();
+  }, [selectedDatasourceId, form]);
+
+  // Fetch method details when method is selected
+  useEffect(() => {
+    async function fetchMethodDetails() {
+      if (!selectedDatasourceId || !selectedMethodName) {
+        setMethodDetails(null);
+        setOptions({});
+        return;
+      }
+
+      try {
+        setLoadingMethodDetails(true);
+        setError(null);
+        const details = await getDatasourceMethodDetails(selectedDatasourceId, selectedMethodName);
+        setMethodDetails(details);
+        
+        // Initialize options from methodInfo structure
+        if (details.methodInfo) {
+          const initialOptions = {};
+          
+          // Add required options
+          if (details.methodInfo.requiredOptions && Array.isArray(details.methodInfo.requiredOptions)) {
+            details.methodInfo.requiredOptions.forEach(optionName => {
+              initialOptions[optionName] = '';
+            });
+          }
+          
+          // Add optional options
+          if (details.methodInfo.optionalOptions && Array.isArray(details.methodInfo.optionalOptions)) {
+            details.methodInfo.optionalOptions.forEach(optionName => {
+              initialOptions[optionName] = '';
+            });
+          }
+          
+          setOptions(initialOptions);
+        } else {
+          setOptions({});
+        }
+        
+        setPreview(null);
+      } catch (err) {
+        setError('Failed to load method details');
+        console.error('Error fetching method details:', err);
+        setMethodDetails(null);
+        setOptions({});
+      } finally {
+        setLoadingMethodDetails(false);
+      }
+    }
+
+    fetchMethodDetails();
+  }, [selectedDatasourceId, selectedMethodName]);
+
+  const handleFetchPreview = async () => {
+    if (!selectedDatasourceId || !selectedMethodName) {
+      toast.error('Please select a datasource and method first');
+      return;
+    }
+
+    try {
+      setLoadingPreview(true);
+      setError(null);
+      
+      const response = await fetchDatasourceData(selectedDatasourceId, {
+        methodName: selectedMethodName,
+        params: options,
+      });
+      
+      // Clean the response to remove sensitive/irrelevant information
+      const cleanedResponse = cleanDatasourceResponse(response);
+      setPreview(cleanedResponse);
+    } catch (err) {
+      setError('Failed to fetch preview data');
+      console.error('Error fetching preview:', err);
+      setPreview(null);
+    } finally {
+      setLoadingPreview(false);
+    }
+  };
+
+  const handleOptionChange = (key, value) => {
+    setOptions(prev => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  const handleRemoveOption = (key) => {
+    setOptions(prev => {
+      const newOptions = { ...prev };
+      delete newOptions[key];
+      return newOptions;
+    });
+  };
+
+  const handleAddOption = () => {
+    const key = prompt('Enter option key:');
+    if (key && key.trim()) {
+      const value = prompt('Enter option value:');
+      handleOptionChange(key.trim(), value || '');
+    }
+  };
+
+  const handleSubmit = (data) => {
+    const selectedDatasource = datasources.find(ds => ds.id === data.datasourceId);
+    
+    const datasourceConfig = {
+      datasourceId: data.datasourceId,
+      datasourceName: selectedDatasource?.name || 'Unknown',
+      methodName: data.methodName,
+      options: options,
+      preview: preview,
+    };
+
+    onSuccess(datasourceConfig);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-7xl max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Add Datasource</DialogTitle>
+          <DialogDescription>
+            Configure a datasource to fetch data from
+          </DialogDescription>
+        </DialogHeader>
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="flex-1 overflow-hidden flex flex-col">
+            <div className="flex-1 flex gap-6 overflow-hidden">
+              {/* Left Column - Configuration Form */}
+              <div className="flex-1 flex flex-col min-w-0">
+                <ScrollArea className="flex-1 pr-4">
+                  <div className="space-y-4">
+                    {/* Datasource Selection */}
+                    <FormField
+                      control={form.control}
+                      name="datasourceId"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            Datasource <span className="text-red-500">*</span>
+                          </FormLabel>
+                          <Select 
+                            onValueChange={field.onChange} 
+                            value={field.value}
+                            disabled={loading}
+                          >
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue placeholder="Select a datasource" />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {datasources.map((ds) => (
+                                <SelectItem key={ds.id} value={ds.id}>
+                                  {ds.name} ({ds.definitionId})
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    {/* Method Selection */}
+                    <FormField
+                      control={form.control}
+                      name="methodName"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            Method <span className="text-red-500">*</span>
+                          </FormLabel>
+                          <Select 
+                            onValueChange={field.onChange} 
+                            value={field.value}
+                            disabled={!selectedDatasourceId || loadingMethods}
+                          >
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue placeholder={
+                                  loadingMethods ? 'Loading methods...' : 'Select a method'
+                                } />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {methods.map((method) => (
+                                <SelectItem key={method} value={method}>
+                                  {method}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    {/* Method Parameters/Options */}
+                    {loadingMethodDetails && (
+                      <div className="flex items-center justify-center py-4">
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        <span className="text-sm">Loading method details...</span>
+                      </div>
+                    )}
+
+                    {methodDetails && methodDetails.methodInfo && (
+                      <div className="space-y-3">
+                        {/* Method Description */}
+                        {methodDetails.methodInfo.description && (
+                          <div className="rounded-md bg-muted p-3">
+                            <p className="text-sm text-muted-foreground">
+                              {methodDetails.methodInfo.description}
+                            </p>
+                          </div>
+                        )}
+
+                        {/* Required Options */}
+                        {methodDetails.methodInfo.requiredOptions && 
+                         methodDetails.methodInfo.requiredOptions.length > 0 && (
+                          <div className="space-y-2">
+                            <FormLabel>Required Parameters</FormLabel>
+                            <div className="space-y-3">
+                              {methodDetails.methodInfo.requiredOptions.map((optionName) => (
+                                <div key={optionName} className="space-y-1">
+                                  <FormLabel className="text-sm">
+                                    {optionName}
+                                    <span className="text-red-500 ml-1">*</span>
+                                  </FormLabel>
+                                  <Input
+                                    value={options[optionName] || ''}
+                                    onChange={(e) => handleOptionChange(optionName, e.target.value)}
+                                    placeholder={`Enter ${optionName}`}
+                                    className="w-full"
+                                  />
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Optional Options */}
+                        {methodDetails.methodInfo.optionalOptions && 
+                         methodDetails.methodInfo.optionalOptions.length > 0 && (
+                          <div className="space-y-2">
+                            <FormLabel className="text-muted-foreground">Optional Parameters</FormLabel>
+                            <div className="space-y-3">
+                              {methodDetails.methodInfo.optionalOptions.map((optionName) => (
+                                <div key={optionName} className="space-y-1">
+                                  <FormLabel className="text-sm text-muted-foreground">
+                                    {optionName}
+                                  </FormLabel>
+                                  <Input
+                                    value={options[optionName] || ''}
+                                    onChange={(e) => handleOptionChange(optionName, e.target.value)}
+                                    placeholder={`Enter ${optionName} (optional)`}
+                                    className="w-full"
+                                  />
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Examples */}
+                        {methodDetails.methodInfo.examples && 
+                         methodDetails.methodInfo.examples.length > 0 && (
+                          <div className="space-y-2">
+                            <FormLabel className="text-sm">Examples</FormLabel>
+                            <div className="space-y-2">
+                              {methodDetails.methodInfo.examples.map((example, index) => (
+                                <div key={index} className="rounded-md border bg-muted/50 p-3">
+                                  {example.description && (
+                                    <p className="text-xs font-medium mb-2">{example.description}</p>
+                                  )}
+                                  <pre className="text-xs text-muted-foreground overflow-x-auto">
+                                    {JSON.stringify(example.options, null, 2)}
+                                  </pre>
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="sm"
+                                    className="mt-2 h-7 text-xs"
+                                    onClick={() => {
+                                      setOptions(prev => ({ ...prev, ...example.options }));
+                                      toast.success('Example applied to parameters');
+                                    }}
+                                  >
+                                    Use this example
+                                  </Button>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* No parameters message */}
+                        {(!methodDetails.methodInfo.requiredOptions || methodDetails.methodInfo.requiredOptions.length === 0) &&
+                         (!methodDetails.methodInfo.optionalOptions || methodDetails.methodInfo.optionalOptions.length === 0) && (
+                          <div className="rounded-md bg-muted p-3">
+                            <p className="text-sm text-muted-foreground">
+                              This method doesn't require any parameters
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                    )}
+
+                    {/* Fetch Preview Button */}
+                    {selectedDatasourceId && selectedMethodName && (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={handleFetchPreview}
+                        disabled={loadingPreview}
+                        className="w-full"
+                      >
+                        {loadingPreview ? (
+                          <>
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            Fetching preview...
+                          </>
+                        ) : (
+                          <>
+                            <RefreshCw className="mr-2 h-4 w-4" />
+                            Refresh Preview
+                          </>
+                        )}
+                      </Button>
+                    )}
+                  </div>
+                </ScrollArea>
+              </div>
+
+              {/* Right Column - Data Preview */}
+              <div className="w-[500px] flex flex-col border-l pl-6">
+                <h3 className="text-base font-semibold mb-4">Data Preview</h3>
+                {loadingPreview && !preview && (
+                  <div className="flex-1 flex items-center justify-center">
+                    <div className="text-center">
+                      <Loader2 className="mx-auto mb-2 h-8 w-8 animate-spin text-muted-foreground" />
+                      <span className="text-sm text-muted-foreground">Loading preview...</span>
+                    </div>
+                  </div>
+                )}
+                
+                {!preview && !loadingPreview && (
+                  <div className="flex-1 flex items-center justify-center">
+                    <div className="text-center text-muted-foreground">
+                      <RefreshCw className="mx-auto mb-2 h-8 w-8 opacity-20" />
+                      <p className="text-sm">No preview available</p>
+                      <p className="text-xs mt-1">Configure datasource and click refresh</p>
+                    </div>
+                  </div>
+                )}
+
+                {preview && (
+                  <Card className="flex-1 flex flex-col overflow-hidden">
+                    <CardContent className="flex-1 p-4 overflow-hidden">
+                      <div className="h-full w-full rounded border bg-muted/30 overflow-auto">
+                        <pre className="text-xs p-3 min-w-0">
+                          {JSON.stringify(preview, null, 2)}
+                        </pre>
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+              </div>
+            </div>
+
+            <DialogFooter className="mt-4">
+              <Button type="button" variant="outline" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button 
+                type="submit" 
+                disabled={!preview || loadingPreview}
+              >
+                Add Datasource
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/linker/LinkerDatasourcesStep.jsx b/src/components/linker/LinkerDatasourcesStep.jsx
new file mode 100644
index 00000000..bb2d4b2d
--- /dev/null
+++ b/src/components/linker/LinkerDatasourcesStep.jsx
@@ -0,0 +1,329 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Loader2, ArrowRight, AlertCircle, Plus, Trash, Eye } from 'lucide-react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { toast } from 'sonner';
+import { AddDatasourceDialog } from './AddDatasourceDialog';
+import { saveLinkerDatasources, getLinkerDatasources } from '@/utils/linkerDraftStorage';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+
+// Schema validation for linker info
+const linkerInfoSchema = z.object({
+  name: z.string().optional(),
+  description: z.string().optional(),
+  environment: z.string().min(1, { message: 'Environment is required' }),
+});
+
+export function LinkerDatasourcesStep({ initialData = {}, initialDatasources = [], onSubmit, isSubmitting, apiError = null }) {
+  const [datasources, setDatasources] = useState([]);
+  const [submitError, setSubmitError] = useState(null);
+  const [openDialog, setOpenDialog] = useState(false);
+  const [_selectedDatasource, setSelectedDatasource] = useState(null);
+
+  const form = useForm({
+    resolver: zodResolver(linkerInfoSchema),
+    defaultValues: {
+      name: initialData.name || '',
+      description: initialData.description || '',
+      environment: initialData.environment || 'dev',
+    },
+  });
+
+  // Update form values when initialData changes
+  useEffect(() => {
+    if (initialData) {
+      form.reset({
+        name: initialData.name || '',
+        description: initialData.description || '',
+        environment: initialData.environment || 'dev',
+      });
+    }
+  }, [initialData, form]);
+
+  // Load datasources from localStorage on mount
+  useEffect(() => {
+    if (initialDatasources && initialDatasources.length > 0) {
+      setDatasources(initialDatasources);
+      saveLinkerDatasources(initialDatasources);
+    } else {
+      const cached = getLinkerDatasources();
+      if (cached.length > 0) {
+        setDatasources(cached);
+      }
+    }
+  }, [initialDatasources]);
+
+  // Update error message when API error changes
+  useEffect(() => {
+    if (apiError) {
+      setSubmitError(apiError);
+    }
+  }, [apiError]);
+
+  const handleAddDatasource = () => {
+    setSelectedDatasource(null);
+    setOpenDialog(true);
+  };
+
+  const handleDatasourceAdded = (datasourceConfig) => {
+    const newDatasources = [...datasources, datasourceConfig];
+    setDatasources(newDatasources);
+    saveLinkerDatasources(newDatasources);
+    setOpenDialog(false);
+    toast.success('Datasource added successfully');
+  };
+
+  const handleRemoveDatasource = (index) => {
+    const newDatasources = datasources.filter((_, i) => i !== index);
+    setDatasources(newDatasources);
+    saveLinkerDatasources(newDatasources);
+    toast.success('Datasource removed');
+  };
+
+  const handleViewPreview = (datasource) => {
+    setSelectedDatasource(datasource);
+  };
+
+  const handleSubmit = (formData) => {
+    setSubmitError(null);
+    
+    if (datasources.length === 0) {
+      setSubmitError('You must add at least one datasource');
+      toast.error('At least one datasource must be added');
+      return;
+    }
+    
+    // Save before submitting
+    saveLinkerDatasources(datasources);
+    
+    // Combine form data and datasources
+    onSubmit({
+      ...formData,
+      datasources
+    });
+  };
+
+  return (
+    <div className="py-4">
+      {/* Linker Information Section */}
+      <h2 className="mb-6 text-left text-xl font-semibold">Linker Information</h2>
+      
+      {submitError && (
+        <Alert variant="destructive" className="mb-6">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>
+            {typeof submitError === 'string' 
+              ? submitError 
+              : 'There was an error saving your data. Please try again.'}
+          </AlertDescription>
+        </Alert>
+      )}
+      
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-base font-medium">
+                    Name (optional)
+                  </FormLabel>
+                  <FormControl>
+                    <Input 
+                      placeholder="Enter linker name (optional)" 
+                      {...field} 
+                      disabled={isSubmitting} 
+                    />
+                  </FormControl>
+                  <p className="text-xs text-muted-foreground">
+                    If not provided, a name will be auto-generated
+                  </p>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="environment"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-base font-medium">
+                    Environment <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <Select 
+                    onValueChange={field.onChange} 
+                    defaultValue={field.value}
+                    disabled={isSubmitting}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select environment" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="dev">Development</SelectItem>
+                      <SelectItem value="staging">Staging</SelectItem>
+                      <SelectItem value="production">Production</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="text-base font-medium">
+                  Description
+                </FormLabel>
+                <FormControl>
+                  <Textarea 
+                    placeholder="Enter linker description" 
+                    rows={2}
+                    {...field} 
+                    disabled={isSubmitting} 
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Separator className="my-8" />
+
+          {/* Datasources Configuration Section */}
+          <div className="mb-6 flex items-center justify-between">
+            <h2 className="text-left text-xl font-semibold">Datasources Configuration</h2>
+            <Button 
+              type="button"
+              onClick={handleAddDatasource}
+              className="border-2 border-sidebar-accent bg-sidebar-accent hover:bg-secondary hover:text-sidebar-accent"
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              Add Datasource
+            </Button>
+          </div>
+
+          {/* Empty state */}
+          {datasources.length === 0 && (
+            <div className="mb-6 border border-gray-300 rounded-lg border-dashed bg-gray-50 p-8 text-center">
+              <h3 className="mb-1 text-lg text-gray-900 font-medium">No datasources configured yet</h3>
+              <p className="mb-4 text-gray-500">Add datasources to aggregate data from multiple sources</p>
+            </div>
+          )}
+
+          {/* Datasources list */}
+          <div className="max-h-[500px] overflow-y-auto pr-2 space-y-4">
+            {datasources.map((ds, index) => (
+              <Card key={index} className="transition-shadow hover:shadow-md">
+                <CardHeader className="flex flex-row justify-between p-4 pb-2">
+                  <div className="flex-1 text-left">
+                    <CardTitle className="flex items-center text-base font-medium">
+                      {ds.datasourceName}
+                      <Badge variant="outline" className="ml-2">
+                        {ds.methodName}
+                      </Badge>
+                    </CardTitle>
+                    <p className="text-sm text-gray-500">
+                      ID: {ds.datasourceId}
+                    </p>
+                  </div>
+                  <div className="flex space-x-1">
+                    <Button 
+                      type="button"
+                      size="sm" 
+                      variant="ghost" 
+                      className="text-red-500 hover:bg-red-50 hover:text-red-700"
+                      onClick={() => handleRemoveDatasource(index)}
+                    >
+                      <Trash className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </CardHeader>
+                <CardContent className="p-4 pt-2">
+                  {ds.options && Object.keys(ds.options).length > 0 && (
+                    <div className="mt-1 flex flex-wrap items-center gap-1">
+                      <span className="text-sm text-gray-500">Options:</span>
+                      {Object.entries(ds.options).map(([key, value]) => (
+                        <Badge key={key} variant="outline" className="text-xs">
+                          {key}: {typeof value === 'object' ? JSON.stringify(value) : value}
+                        </Badge>
+                      ))}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* Add Datasource Dialog */}
+          {openDialog && (
+            <AddDatasourceDialog
+              open={openDialog}
+              onClose={() => setOpenDialog(false)}
+              onSuccess={handleDatasourceAdded}
+            />
+          )}
+
+          {/* Progress and Navigation */}
+          <div className="mt-8 flex items-center justify-between border-t pt-4">
+            <div className="text-sm text-gray-500">
+              {datasources.length > 0 ? (
+                <span>{datasources.length} datasource{datasources.length !== 1 ? 's' : ''} configured</span>
+              ) : (
+                <span>Add at least one datasource to continue</span>
+              )}
+            </div>
+            <Button 
+              type="submit"
+              disabled={isSubmitting || datasources.length === 0}
+              className="min-w-[120px] bg-white text-primary hover:bg-secondary"
+            >
+              {isSubmitting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Saving...
+                </>
+              ) : (
+                <>
+                  Next Step
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </>
+              )}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
diff --git a/src/components/linker/LinkerMappingStep.jsx b/src/components/linker/LinkerMappingStep.jsx
new file mode 100644
index 00000000..5ea66bb3
--- /dev/null
+++ b/src/components/linker/LinkerMappingStep.jsx
@@ -0,0 +1,45 @@
+import { Button } from '@/components/ui/button';
+import { Check } from 'lucide-react';
+
+export function LinkerMappingStep({ onSubmit, isSubmitting }) {
+  const handleSubmit = () => {
+    // Placeholder for future mapping functionality
+    onSubmit({});
+  };
+
+  return (
+    <div className="py-4">
+      <h2 className="mb-6 text-xl font-semibold text-left">Data Mapping</h2>
+      
+      <div className="border border-gray-300 rounded-lg border-dashed bg-gray-50 p-12 text-center">
+        <h3 className="mb-2 text-lg text-gray-900 font-medium">Mapping Configuration</h3>
+        <p className="mb-6 text-gray-500">
+          This step will allow you to map and transform data from the configured datasources.
+        </p>
+        <p className="text-sm text-gray-400">
+          Mapping functionality will be available in a future update.
+        </p>
+      </div>
+
+      <div className="flex justify-end pt-6 mt-8 border-t">
+        <Button 
+          onClick={handleSubmit} 
+          disabled={isSubmitting}
+          className="min-w-[120px]"
+          variant="outline"
+        >
+          {isSubmitting ? (
+            <>
+              <span>Creating Linker...</span>
+            </>
+          ) : (
+            <>
+              Complete
+              <Check className="ml-2 h-4 w-4" />
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/forms/datasource/schemas.js b/src/forms/datasource/schemas.js
new file mode 100644
index 00000000..3ead57ba
--- /dev/null
+++ b/src/forms/datasource/schemas.js
@@ -0,0 +1,14 @@
+import { z } from 'zod';
+
+export const datasourceFormSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(100, 'Name must be less than 100 characters'),
+  description: z.string().max(500, 'Description must be less than 500 characters').optional(),
+  definitionId: z.string().min(1, 'Datasource type is required'),
+  environment: z.enum(['dev', 'staging', 'production']).default('dev'),
+  config: z.object({
+    baseUrl: z.url('Base URL must be a valid URL'),
+    username: z.string().min(1, 'Username is required'),
+    password: z.string().min(1, 'Password is required'),
+    timeout: z.number().default(30000),
+  }).passthrough(), // Allow additional fields not defined in schema
+});
diff --git a/src/pages/app/datasource/DatasourceCreate.jsx b/src/pages/app/datasource/DatasourceCreate.jsx
index 888e53b3..9e32dcc9 100644
--- a/src/pages/app/datasource/DatasourceCreate.jsx
+++ b/src/pages/app/datasource/DatasourceCreate.jsx
@@ -1,11 +1,14 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
 import Page from '@/components/basic-page.jsx';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import {
   Select,
   SelectContent,
@@ -22,7 +25,7 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { ArrowLeft, Loader2, Save, Database, Shield, CheckCircle2 } from 'lucide-react';
+import { ArrowLeft, Loader2, Save } from 'lucide-react';
 import {
   Tabs,
   TabsContent,
@@ -30,6 +33,7 @@ import {
   TabsTrigger,
 } from '@/components/ui/tabs';
 import { createDatasource, getDatasourceTypes, testDatasourceConnection } from '@/services/datasources';
+import { datasourceFormSchema } from '@/forms/datasource/schemas';
 
 export function DatasourceCreate() {
   const navigate = useNavigate();
@@ -39,13 +43,22 @@ export function DatasourceCreate() {
   const [connectionStatus, setConnectionStatus] = useState(null);
   const [activeTab, setActiveTab] = useState('details');
   const [selectedType, setSelectedType] = useState('');
-  const [formData, setFormData] = useState({
-    name: '',
-    type: '',
-    description: '',
-    configuration: {}
+  
+  const form = useForm({
+    resolver: zodResolver(datasourceFormSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+      definitionId: '',
+      environment: 'dev',
+      config: {
+        baseUrl: '',
+        username: '',
+        password: '',
+        timeout: 30000,
+      }
+    },
   });
-  const [errors, setErrors] = useState({});
 
   useEffect(() => {
     async function fetchDatasourceTypes() {
@@ -63,122 +76,56 @@ export function DatasourceCreate() {
 
   const handleTypeChange = (value) => {
     setSelectedType(value);
-    setFormData({
-      ...formData,
-      type: value,
-      // Reset configuration when type changes
-      configuration: {}
-    });
+    form.setValue('definitionId', value);
     setConnectionStatus(null);
   };
 
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setFormData({
-      ...formData,
-      [name]: value
-    });
-    
-    // Clear error for this field
-    if (errors[name]) {
-      setErrors({
-        ...errors,
-        [name]: ''
-      });
-    }
-  };
-
-  const handleConfigChange = (field, value) => {
-    setFormData({
-      ...formData,
-      configuration: {
-        ...formData.configuration,
-        [field]: value
-      }
-    });
-    
-    // Clear error for this field
-    if (errors[`config.${field}`]) {
-      setErrors({
-        ...errors,
-        [`config.${field}`]: ''
-      });
-    }
-  };
-
-  const validateForm = () => {
-    const newErrors = {};
-    
-    if (!formData.name.trim()) {
-      newErrors.name = 'Name is required';
-    }
-    
-    if (!formData.type) {
-      newErrors.type = 'Datasource type is required';
-    }
-    
-    if (!formData.description.trim()) {
-      newErrors.description = 'Description is required';
-    }
-    
-    const selectedTypeData = datasourceTypes.find(type => type.id === formData.type);
-    if (selectedTypeData) {
-      // Validate required auth fields
-      selectedTypeData.authFields.forEach(field => {
-        if (field.required && !formData.configuration[field.name]) {
-          newErrors[`config.${field.name}`] = `${field.label} is required`;
-        }
-      });
-      
-      // Validate required config fields
-      if (selectedTypeData.configFields) {
-        selectedTypeData.configFields.forEach(field => {
-          if (field.required && !formData.configuration[field.name]) {
-            newErrors[`config.${field.name}`] = `${field.label} is required`;
-          }
-        });
-      }
-    }
-    
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleTestConnection = async () => {
-    if (!validateForm()) {
-      toast.error('Please fill all required fields');
-      return;
-    }
-    
+  const handleTestConnection = async (datasourceId) => {
     try {
       setTestingConnection(true);
-      await testDatasourceConnection(formData.configuration);
-      setConnectionStatus('success');
-      toast.success('Connection test successful');
+      const result = await testDatasourceConnection(datasourceId);
+      setConnectionStatus(result.testStatus === 'success' ? 'success' : 'error');
+      toast.success(result.message || 'Connection test completed');
+      return result;
     } catch (err) {
       setConnectionStatus('error');
-      toast.error('Connection test failed');
+      toast.error(err.message || 'Connection test failed');
       console.error('Error testing connection:', err);
+      throw err;
     } finally {
       setTestingConnection(false);
     }
   };
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    
-    if (!validateForm()) {
-      toast.error('Please fill all required fields');
-      return;
-    }
-    
+  const handleSubmit = async (values) => {
     try {
       setLoading(true);
-      await createDatasource(formData);
+      const result = await createDatasource(values);
       toast.success('Datasource created successfully');
+      
+      // Test the connection after creation
+      // Check different possible response structures
+      const datasourceId = result.datasource?.id || result.id || result.data?.id;
+      
+      if (datasourceId) {
+        setTestingConnection(true);
+        try {
+          const testResult = await handleTestConnection(datasourceId);
+          if (testResult.testStatus === 'success') {
+            toast.success('Connection test passed!');
+          }
+        } catch (testErr) {
+          // Test failed but datasource was created
+          toast.warning('Datasource created but connection test failed');
+          console.log('Connection test failed after creation:', testErr);
+        } finally {
+          setTestingConnection(false);
+        }
+      }
+      
       navigate('/app/datasources');
     } catch (err) {
-      toast.error('Failed to create datasource');
+      toast.error(err.message || 'Failed to create datasource');
       console.error('Error creating datasource:', err);
     } finally {
       setLoading(false);
@@ -187,7 +134,15 @@ export function DatasourceCreate() {
 
   const renderAuthFields = () => {
     const selectedTypeData = datasourceTypes.find(type => type.id === selectedType);
-    if (!selectedTypeData) return null;
+    if (!selectedTypeData || !selectedTypeData.authFields || selectedTypeData.authFields.length === 0) {
+      return (
+        <div className="py-4 text-center text-gray-500">
+          No authentication fields defined for this datasource type.
+        </div>
+      );
+    }
+    
+    const configValues = form.watch('config');
     
     return (
       <div className="space-y-4">
@@ -204,30 +159,28 @@ export function DatasourceCreate() {
               <Input
                 id={field.name}
                 type={field.type}
-                value={formData.configuration[field.name] || ''}
-                onChange={(e) => handleConfigChange(field.name, e.target.value)}
+                value={configValues[field.name] || ''}
+                onChange={(e) => form.setValue(`config.${field.name}`, e.target.value)}
                 placeholder={`Enter ${field.label.toLowerCase()}`}
-                className={errors[`config.${field.name}`] ? 'border-red-500' : ''}
               />
             ) : field.type === 'array' ? (
               <Input
                 id={field.name}
                 type="text"
                 value={
-                  Array.isArray(formData.configuration[field.name])
-                    ? formData.configuration[field.name].join(', ')
+                  Array.isArray(configValues[field.name])
+                    ? configValues[field.name].join(', ')
                     : ''
                 }
-                onChange={(e) => handleConfigChange(field.name, e.target.value.split(',').map(s => s.trim()))}
+                onChange={(e) => form.setValue(`config.${field.name}`, e.target.value.split(',').map(s => s.trim()))}
                 placeholder={`Enter ${field.label.toLowerCase()} (comma separated)`}
-                className={errors[`config.${field.name}`] ? 'border-red-500' : ''}
               />
             ) : field.type === 'select' ? (
               <Select
-                value={formData.configuration[field.name] || ''}
-                onValueChange={(value) => handleConfigChange(field.name, value)}
+                value={configValues[field.name] || ''}
+                onValueChange={(value) => form.setValue(`config.${field.name}`, value)}
               >
-                <SelectTrigger className={errors[`config.${field.name}`] ? 'border-red-500' : ''}>
+                <SelectTrigger>
                   <SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
                 </SelectTrigger>
                 <SelectContent>
@@ -239,50 +192,13 @@ export function DatasourceCreate() {
                 </SelectContent>
               </Select>
             ) : null}
-            
-            {errors[`config.${field.name}`] && (
-              <p className="mt-1 text-sm text-red-500">{errors[`config.${field.name}`]}</p>
-            )}
           </div>
         ))}
         
-        <div className="mt-6">
-          <Button
-            type="button"
-            onClick={handleTestConnection}
-            disabled={testingConnection}
-            className="w-full"
-          >
-            {testingConnection ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Testing Connection...
-              </>
-            ) : (
-              <>
-                {connectionStatus === 'success' ? (
-                  <CheckCircle2 className="mr-2 h-4 w-4" />
-                ) : (
-                  <Database className="mr-2 h-4 w-4" />
-                )}
-                Test Connection
-              </>
-            )}
-          </Button>
-          
-          {connectionStatus === 'success' && (
-            <div className="mt-3 flex items-center border border-green-200 rounded-md bg-green-50 p-3">
-              <CheckCircle2 className="mr-2 h-5 w-5 text-green-500" />
-              <p className="text-sm text-green-700">Connection successful. You can now save this datasource.</p>
-            </div>
-          )}
-          
-          {connectionStatus === 'error' && (
-            <div className="mt-3 flex items-center border border-red-200 rounded-md bg-red-50 p-3">
-              <Shield className="mr-2 h-5 w-5 text-red-500" />
-              <p className="text-sm text-red-700">Connection failed. Please check your credentials and try again.</p>
-            </div>
-          )}
+        <div className="mt-4 border border-blue-200 rounded-md bg-blue-50 p-3">
+          <p className="text-sm text-blue-700">
+            The connection will be tested automatically after creation.
+          </p>
         </div>
       </div>
     );
@@ -298,6 +214,8 @@ export function DatasourceCreate() {
       );
     }
     
+    const configValues = form.watch('config');
+    
     return (
       <div className="space-y-4">
         <h3 className="text-lg font-medium">Configuration</h3>
@@ -313,17 +231,16 @@ export function DatasourceCreate() {
               <Input
                 id={field.name}
                 type="text"
-                value={formData.configuration[field.name] || field.default || ''}
-                onChange={(e) => handleConfigChange(field.name, e.target.value)}
+                value={configValues[field.name] || field.default || ''}
+                onChange={(e) => form.setValue(`config.${field.name}`, e.target.value)}
                 placeholder={`Enter ${field.label.toLowerCase()}`}
-                className={errors[`config.${field.name}`] ? 'border-red-500' : ''}
               />
             ) : field.type === 'select' ? (
               <Select
-                value={formData.configuration[field.name] || field.default || ''}
-                onValueChange={(value) => handleConfigChange(field.name, value)}
+                value={configValues[field.name] || field.default || ''}
+                onValueChange={(value) => form.setValue(`config.${field.name}`, value)}
               >
-                <SelectTrigger className={errors[`config.${field.name}`] ? 'border-red-500' : ''}>
+                <SelectTrigger>
                   <SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
                 </SelectTrigger>
                 <SelectContent>
@@ -338,8 +255,8 @@ export function DatasourceCreate() {
               <div>
                 <div className="mt-2 flex flex-wrap gap-2">
                   {field.options.map((option) => {
-                    const isSelected = Array.isArray(formData.configuration[field.name]) && 
-                                      formData.configuration[field.name].includes(option);
+                    const isSelected = Array.isArray(configValues[field.name]) && 
+                                      configValues[field.name].includes(option);
                     
                     return (
                       <Badge
@@ -347,20 +264,18 @@ export function DatasourceCreate() {
                         variant={isSelected ? 'default' : 'outline'}
                         className="cursor-pointer"
                         onClick={() => {
-                          const currentValues = Array.isArray(formData.configuration[field.name]) 
-                            ? [...formData.configuration[field.name]] 
+                          const currentValues = Array.isArray(configValues[field.name]) 
+                            ? [...configValues[field.name]] 
                             : [];
                           
                           if (isSelected) {
-                            // Remove from selection
-                            handleConfigChange(
-                              field.name, 
+                            form.setValue(
+                              `config.${field.name}`, 
                               currentValues.filter(val => val !== option)
                             );
                           } else {
-                            // Add to selection
-                            handleConfigChange(
-                              field.name, 
+                            form.setValue(
+                              `config.${field.name}`, 
                               [...currentValues, option]
                             );
                           }
@@ -371,15 +286,8 @@ export function DatasourceCreate() {
                     );
                   })}
                 </div>
-                {errors[`config.${field.name}`] && (
-                  <p className="mt-1 text-sm text-red-500">{errors[`config.${field.name}`]}</p>
-                )}
               </div>
             ) : null}
-            
-            {errors[`config.${field.name}`] && field.type !== 'multiselect' && (
-              <p className="mt-1 text-sm text-red-500">{errors[`config.${field.name}`]}</p>
-            )}
           </div>
         ))}
       </div>
@@ -389,18 +297,6 @@ export function DatasourceCreate() {
   return (
     <Page name="Create Data Source" className="h-full w-full">
       <div className="mx-auto max-w-3xl">
-        <div className="mb-6 flex items-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => navigate('/app/datasources')}
-            className="mr-4"
-          >
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Back to Data Sources
-          </Button>
-        </div>
-        
         <Card>
           <CardHeader>
             <CardTitle>Create New Data Source</CardTitle>
@@ -409,117 +305,249 @@ export function DatasourceCreate() {
             </CardDescription>
           </CardHeader>
           
-          <form onSubmit={handleSubmit}>
-            <CardContent>
-              <div className="mb-6 space-y-4">
-                <div>
-                  <Label htmlFor="name" className="mb-1 block">
-                    Name <span className="text-red-500">*</span>
-                  </Label>
-                  <Input
-                    id="name"
-                    name="name"
-                    value={formData.name}
-                    onChange={handleInputChange}
-                    placeholder="Enter datasource name"
-                    className={errors.name ? 'border-red-500' : ''}
-                  />
-                  {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
-                </div>
-                
-                <div>
-                  <Label htmlFor="description" className="mb-1 block">
-                    Description <span className="text-red-500">*</span>
-                  </Label>
-                  <Textarea
-                    id="description"
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)}>
+              <CardContent>
+                <div className="mb-6 space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <FormField
+                      control={form.control}
+                      name="name"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Name <span className="text-red-500">*</span></FormLabel>
+                          <FormControl>
+                            <Input {...field} placeholder="Enter datasource name" />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    
+                    <FormField
+                      control={form.control}
+                      name="environment"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Environment</FormLabel>
+                          <Select value={field.value} onValueChange={field.onChange}>
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue placeholder="Select environment" />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              <SelectItem value="dev">Development</SelectItem>
+                              <SelectItem value="staging">Staging</SelectItem>
+                              <SelectItem value="production">Production</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                  
+                  <FormField
+                    control={form.control}
                     name="description"
-                    value={formData.description}
-                    onChange={handleInputChange}
-                    placeholder="Enter datasource description"
-                    className={errors.description ? 'border-red-500' : ''}
-                    rows={3}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Description</FormLabel>
+                        <FormControl>
+                          <Textarea {...field} placeholder="Enter datasource description" rows={3} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
                   />
-                  {errors.description && <p className="mt-1 text-sm text-red-500">{errors.description}</p>}
-                </div>
-                
-                <div>
-                  <Label htmlFor="type" className="mb-1 block">
-                    Datasource Type <span className="text-red-500">*</span>
-                  </Label>
-                  <Select
-                    value={formData.type}
-                    onValueChange={handleTypeChange}
-                  >
-                    <SelectTrigger className={errors.type ? 'border-red-500' : ''}>
-                      <SelectValue placeholder="Select datasource type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {datasourceTypes.map((type) => (
-                        <SelectItem key={type.id} value={type.id}>
-                          {type.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  {errors.type && <p className="mt-1 text-sm text-red-500">{errors.type}</p>}
-                </div>
-                
-                {selectedType && (
-                  <div>
-                    <div className="mb-2 mt-4">
-                      <div className="flex flex-wrap gap-2">
-                        {datasourceTypes
-                          .find(type => type.id === selectedType)
-                          ?.complianceStandards.map(standard => (
-                            <Badge key={standard} variant="secondary">{standard}</Badge>
-                          ))}
+                  
+                  <FormField
+                    control={form.control}
+                    name="definitionId"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Datasource Type <span className="text-red-500">*</span></FormLabel>
+                        <Select value={field.value} onValueChange={handleTypeChange}>
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue placeholder="Select datasource type" />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {datasourceTypes.map((type) => (
+                              <SelectItem key={type.id} value={type.id}>
+                                {type.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  
+                  {selectedType && (
+                    <div>
+                      {datasourceTypes
+                        .find(type => type.id === selectedType)
+                        ?.complianceStandards?.length > 0 && (
+                        <div className="mb-2 mt-4">
+                          <div className="flex flex-wrap gap-2">
+                            {datasourceTypes
+                              .find(type => type.id === selectedType)
+                              ?.complianceStandards?.map(standard => (
+                                <Badge key={standard} variant="secondary">{standard}</Badge>
+                              ))}
+                          </div>
+                        </div>
+                      )}
+                      
+                      <div className="mt-6 space-y-4">
+                        <h3 className="text-lg font-medium">Connection Configuration</h3>
+                        
+                        <div className="grid grid-cols-2 gap-4">
+                          <FormField
+                            control={form.control}
+                            name="config.baseUrl"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Base URL <span className="text-red-500">*</span></FormLabel>
+                                <FormControl>
+                                  <Input {...field} type="text" placeholder="http://example.com:8080" />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                          
+                          <FormField
+                            control={form.control}
+                            name="config.timeout"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Timeout (ms)</FormLabel>
+                                <FormControl>
+                                  <Input 
+                                    {...field} 
+                                    type="number" 
+                                    placeholder="30000"
+                                    onChange={(e) => field.onChange(parseInt(e.target.value) || '')}
+                                  />
+                                </FormControl>
+                                <p className="text-xs text-gray-500">Request timeout in milliseconds</p>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+                        
+                        <div className="grid grid-cols-2 gap-4">
+                          <FormField
+                            control={form.control}
+                            name="config.username"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Username <span className="text-red-500">*</span></FormLabel>
+                                <FormControl>
+                                  <Input {...field} type="text" placeholder="Enter username" />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                          
+                          <FormField
+                            control={form.control}
+                            name="config.password"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Password <span className="text-red-500">*</span></FormLabel>
+                                <FormControl>
+                                  <Input {...field} type="password" placeholder="Enter password" />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+                        
+                        <div className="mt-4 border border-blue-200 rounded-md bg-blue-50 p-3">
+                          <p className="text-sm text-blue-700">
+                            The connection will be tested automatically after creation.
+                          </p>
+                        </div>
                       </div>
+                      
+                      <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-6">
+                        <TabsList className="grid grid-cols-3 w-full">
+                          <TabsTrigger value="details">Custom Fields</TabsTrigger>
+                          <TabsTrigger value="config">Advanced</TabsTrigger>
+                          <TabsTrigger value="json">JSON Editor</TabsTrigger>
+                        </TabsList>
+                        <TabsContent value="details" className="pt-4">
+                          {renderAuthFields()}
+                        </TabsContent>
+                        <TabsContent value="config" className="pt-4">
+                          {renderConfigFields()}
+                        </TabsContent>
+                        <TabsContent value="json" className="pt-4">
+                          <div className="space-y-4">
+                            <h3 className="text-lg font-medium">Configuration (JSON)</h3>
+                            <p className="text-sm text-gray-500">
+                              Edit the complete configuration object for this datasource. Changes here will override the form fields above.
+                            </p>
+                            <Textarea
+                              value={JSON.stringify(form.watch('config'), null, 2)}
+                              onChange={(e) => {
+                                try {
+                                  const parsed = JSON.parse(e.target.value);
+                                  form.setValue('config', parsed);
+                                } catch (err) {
+                                  // Invalid JSON, don't update
+                                }
+                              }}
+                              placeholder='{\n  "baseUrl": "http://example.com",\n  "username": "admin",\n  "password": "secret"\n}'
+                              className="font-mono text-sm"
+                              rows={12}
+                            />
+                          </div>
+                        </TabsContent>
+                      </Tabs>
                     </div>
-                    
-                    <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-6">
-                      <TabsList className="grid grid-cols-2 w-full">
-                        <TabsTrigger value="details">Authentication</TabsTrigger>
-                        <TabsTrigger value="config">Configuration</TabsTrigger>
-                      </TabsList>
-                      <TabsContent value="details" className="pt-4">
-                        {renderAuthFields()}
-                      </TabsContent>
-                      <TabsContent value="config" className="pt-4">
-                        {renderConfigFields()}
-                      </TabsContent>
-                    </Tabs>
-                  </div>
-                )}
-              </div>
-            </CardContent>
-            
-            <CardFooter className="flex justify-between">
-              <Button 
-                variant="outline" 
-                type="button"
-                onClick={() => navigate('/app/datasources')}
-              >
-                Cancel
-              </Button>
-              <Button 
-                type="submit"
-                disabled={loading || (selectedType && connectionStatus !== 'success')}
-              >
-                {loading ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Creating...
-                  </>
-                ) : (
-                  <>
-                    <Save className="mr-2 h-4 w-4" />
-                    Save Data Source
-                  </>
-                )}
-              </Button>
-            </CardFooter>
-          </form>
+                  )}
+                </div>
+              </CardContent>
+              
+              <CardFooter className="flex justify-between">
+                <Button 
+                  variant="outline" 
+                  type="button"
+                  onClick={() => navigate('/app/datasources')}
+                  disabled={loading || testingConnection}
+                >
+                  <ArrowLeft className="mr-2 h-4 w-4" />
+                  Cancel
+                </Button>
+                <Button 
+                  type="submit"
+                  disabled={loading || testingConnection}
+                >
+                  {loading ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      {testingConnection ? 'Testing connection...' : 'Creating...'}
+                    </>
+                  ) : (
+                    <>
+                      <Save className="mr-2 h-4 w-4" />
+                      Save Data Source
+                    </>
+                  )}
+                </Button>
+              </CardFooter>
+            </form>
+          </Form>
         </Card>
       </div>
     </Page>
diff --git a/src/pages/app/datasource/DatasourceDetail.jsx b/src/pages/app/datasource/DatasourceDetail.jsx
new file mode 100644
index 00000000..e4914e54
--- /dev/null
+++ b/src/pages/app/datasource/DatasourceDetail.jsx
@@ -0,0 +1,437 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import Page from '@/components/basic-page.jsx';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Loader2, Edit, RefreshCw, CheckCircle2, Shield } from 'lucide-react';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/components/ui/tabs';
+import { getDatasourceById, getDatasourceTypes, testDatasourceConnection } from '@/services/datasources';
+import { useAuth } from '@/hooks/use-auth';
+
+export function DatasourceDetail() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { userData } = useAuth();
+  const [datasourceTypes, setDatasourceTypes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [testingConnection, setTestingConnection] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState(null);
+  const [activeTab, setActiveTab] = useState('details');
+  const [datasource, setDatasource] = useState(null);
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        setLoading(true);
+        
+        // Cargar tipos de datasource
+        const types = await getDatasourceTypes();
+        setDatasourceTypes(types);
+        
+        // Cargar el datasource específico
+        const data = await getDatasourceById(id);
+        setDatasource(data);
+        
+        // Establecer el estado de prueba basado en los datos del datasource
+        setConnectionStatus(data.testStatus === 'success' ? 'success' : 
+          data.testStatus === 'failure' ? 'error' : null);
+      } catch (err) {
+        toast.error('Failed to load datasource');
+        console.error('Error loading datasource:', err);
+        navigate('/app/datasources');
+      } finally {
+        setLoading(false);
+      }
+    }
+    
+    loadData();
+  }, [id, navigate]);
+
+  const handleTestConnection = async () => {
+    try {
+      setTestingConnection(true);
+      const result = await testDatasourceConnection(id);
+      setConnectionStatus(result.testStatus === 'success' ? 'success' : 'error');
+      toast.success(result.message || 'Connection test completed');
+    } catch (err) {
+      setConnectionStatus('error');
+      toast.error(err.message || 'Connection test failed');
+      console.error('Error testing connection:', err);
+    } finally {
+      setTestingConnection(false);
+    }
+  };
+
+  const formatDate = (dateString) => {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  };
+
+  const getDatasourceTypeLabel = (definitionId) => {
+    const typeMap = {
+      'rest-api': 'REST API',
+      'microsoft-graph': 'Microsoft Graph',
+      'owncloud': 'OwnCloud'
+    };
+    
+    return typeMap[definitionId] || definitionId;
+  };
+
+  const renderFieldValue = (key, value, fieldSchema) => {
+    // Handle password fields
+    if (key.toLowerCase().includes('password') || key.toLowerCase().includes('secret') || key === 'clientSecret') {
+      return <span className="text-gray-400">••••••••</span>;
+    }
+    
+    // Handle arrays
+    if (Array.isArray(value)) {
+      if (value.length === 0) {
+        return <span className="text-gray-400">-</span>;
+      }
+      return (
+        <div className="flex flex-wrap gap-2">
+          {value.map((item, index) => (
+            <Badge key={index} variant="secondary">{String(item)}</Badge>
+          ))}
+        </div>
+      );
+    }
+    
+    // Handle objects (nested config)
+    if (typeof value === 'object' && value !== null) {
+      return (
+        <div className="border-l-2 border-gray-200 pl-4 space-y-2">
+          {Object.entries(value).map(([nestedKey, nestedValue]) => (
+            <div key={nestedKey} className="border-b pb-2 last:border-b-0">
+              <Label className="mb-1 block text-xs text-gray-400 font-medium">
+                {nestedKey}
+              </Label>
+              <div className="text-sm">
+                {renderFieldValue(nestedKey, nestedValue, null)}
+              </div>
+            </div>
+          ))}
+        </div>
+      );
+    }
+    
+    // Handle boolean
+    if (typeof value === 'boolean') {
+      return <Badge variant={value ? 'default' : 'outline'}>{value ? 'Yes' : 'No'}</Badge>;
+    }
+    
+    // Handle primitives
+    return <span>{value !== null && value !== undefined ? String(value) : '-'}</span>;
+  };
+
+  const renderAuthFields = () => {
+    if (!datasource) return null;
+    
+    const selectedTypeData = datasourceTypes.find(type => type.id === datasource.definitionId);
+    if (!selectedTypeData?.configSchema?.properties) {
+      return (
+        <div className="py-4 text-center text-gray-500">
+          No configuration schema available for this datasource type.
+        </div>
+      );
+    }
+    
+    // Get auth-related fields from config schema
+    const authFieldKeys = Object.keys(selectedTypeData.configSchema.properties).filter(key => 
+      key === 'auth' || 
+      key.toLowerCase().includes('password') || 
+      key.toLowerCase().includes('token') ||
+      key.toLowerCase().includes('secret') ||
+      key.toLowerCase().includes('username') ||
+      key === 'tenantId' ||
+      key === 'clientId' ||
+      key === 'clientSecret'
+    );
+    
+    if (authFieldKeys.length === 0) {
+      return (
+        <div className="py-4 text-center text-gray-500">
+          No authentication fields configured for this datasource type.
+        </div>
+      );
+    }
+    
+    return (
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium">Authentication</h3>
+        
+        {authFieldKeys.map((key) => {
+          const fieldSchema = selectedTypeData.configSchema.properties[key];
+          const value = datasource.config[key];
+          
+          return (
+            <div key={key} className="border-b pb-3">
+              <Label className="mb-1 block text-sm text-gray-500 font-medium">
+                {fieldSchema?.description || key}
+                {selectedTypeData.configSchema.required?.includes(key) && (
+                  <span className="ml-1 text-red-500">*</span>
+                )}
+              </Label>
+              <div className="text-base">
+                {renderFieldValue(key, value, fieldSchema)}
+              </div>
+            </div>
+          );
+        })}
+        
+        <div className="mt-6">
+          <Button
+            type="button"
+            onClick={handleTestConnection}
+            disabled={testingConnection}
+            className="w-full"
+          >
+            {testingConnection ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Testing Connection...
+              </>
+            ) : (
+              <>
+                {connectionStatus === 'success' ? (
+                  <CheckCircle2 className="mr-2 h-4 w-4" />
+                ) : (
+                  <RefreshCw className="mr-2 h-4 w-4" />
+                )}
+                Test Connection
+              </>
+            )}
+          </Button>
+          
+          {connectionStatus === 'success' && (
+            <div className="mt-3 flex items-center border border-green-200 rounded-md bg-green-50 p-3">
+              <CheckCircle2 className="mr-2 h-5 w-5 text-green-500" />
+              <p className="text-sm text-green-700">Connection successful.</p>
+            </div>
+          )}
+          
+          {connectionStatus === 'error' && (
+            <div className="mt-3 flex items-center border border-red-200 rounded-md bg-red-50 p-3">
+              <Shield className="mr-2 h-5 w-5 text-red-500" />
+              <p className="text-sm text-red-700">Connection failed. Please check your credentials.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const renderConfigFields = () => {
+    if (!datasource) return null;
+    
+    const selectedTypeData = datasourceTypes.find(type => type.id === datasource.definitionId);
+    if (!selectedTypeData?.configSchema?.properties) {
+      return (
+        <div className="py-4 text-center text-gray-500">
+          No configuration schema available for this datasource type.
+        </div>
+      );
+    }
+    
+    // Get non-auth related fields from config schema
+    const configFieldKeys = Object.keys(selectedTypeData.configSchema.properties).filter(key => 
+      key !== 'auth' && 
+      !key.toLowerCase().includes('password') && 
+      !key.toLowerCase().includes('token') &&
+      !key.toLowerCase().includes('secret') &&
+      key !== 'tenantId' &&
+      key !== 'clientId' &&
+      key !== 'clientSecret' &&
+      key !== 'username'
+    );
+    
+    if (configFieldKeys.length === 0) {
+      return (
+        <div className="py-4 text-center text-gray-500">
+          No additional configuration options available for this datasource type.
+        </div>
+      );
+    }
+    
+    return (
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium">Configuration</h3>
+        
+        {configFieldKeys.map((key) => {
+          const fieldSchema = selectedTypeData.configSchema.properties[key];
+          const value = datasource.config[key];
+          
+          return (
+            <div key={key} className="border-b pb-3">
+              <Label className="mb-1 block text-sm text-gray-500 font-medium">
+                {fieldSchema?.description || key}
+                {selectedTypeData.configSchema.required?.includes(key) && (
+                  <span className="ml-1 text-red-500">*</span>
+                )}
+              </Label>
+              <div className="text-base">
+                {renderFieldValue(key, value, fieldSchema)}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  if (loading) {
+    return (
+      <Page name="Data Source Details" className="h-full w-full" datasource={datasource}>
+        <div className="h-64 flex items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin" />
+          <span className="ml-2">Loading datasource...</span>
+        </div>
+      </Page>
+    );
+  }
+
+  if (!datasource) {
+    return (
+      <Page name="Data Source Details" className="h-full w-full" datasource={datasource}>
+        <div className="h-64 flex items-center justify-center">
+          <p>Datasource not found</p>
+        </div>
+      </Page>
+    );
+  }
+
+  return (
+    <Page name="Data Source Details" className="container mx-auto p-4 space-y-6" datasource={datasource}>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between pb-2 space-x-2 space-y-0">
+          <div className="flex-1">
+            <CardTitle className="flex items-center gap-2">
+              {datasource.name}
+              <Badge className={datasource.isActive ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}>
+                {datasource.isActive ? 'Active' : 'Inactive'}
+              </Badge>
+            </CardTitle>
+            <CardDescription className="mt-2">
+              {datasource.description || 'No description provided'}
+            </CardDescription>
+          </div>
+          {userData.authority !== 'USER' && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => navigate(`/app/datasources/${id}/edit`)}
+            >
+              <Edit className="h-4 w-4" />
+            </Button>
+          )}
+        </CardHeader>
+        
+        <CardContent className="text-left">
+          <div className="space-y-4">
+            {/* Basic Information */}
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <Label className="mb-1 block text-sm text-gray-500 font-medium">
+                  Type
+                </Label>
+                <p className="text-base">
+                  {getDatasourceTypeLabel(datasource.definitionId)}
+                </p>
+              </div>
+              
+              <div>
+                <Label className="mb-1 block text-sm text-gray-500 font-medium">
+                  Environment
+                </Label>
+                <div className="text-base">
+                  {datasource.environment ? (
+                    <Badge>
+                      {datasource.environment}
+                    </Badge>
+                  ) : (
+                    '-'
+                  )}
+                </div>
+              </div>
+              
+              <div>
+                <Label className="mb-1 block text-sm text-gray-500 font-medium">
+                  Version
+                </Label>
+                <p className="text-base">
+                  v{datasource.version}
+                </p>
+              </div>
+              
+              <div>
+                <Label className="mb-1 block text-sm text-gray-500 font-medium">
+                  Last Updated
+                </Label>
+                <p className="text-base">
+                  {formatDate(datasource.updatedAt)}
+                </p>
+              </div>
+            </div>
+            
+            {/* Compliance Standards */}
+            {datasource.definitionId && datasourceTypes.find(type => type.id === datasource.definitionId)?.complianceStandards && (
+              <div className="pt-4">
+                <Label className="mb-2 block text-sm text-gray-500 font-medium">
+                  Compliance Standards
+                </Label>
+                <div className="flex flex-wrap gap-2">
+                  {datasourceTypes
+                    .find(type => type.id === datasource.definitionId)
+                    ?.complianceStandards?.map(standard => (
+                      <Badge key={standard} variant="secondary">{standard}</Badge>
+                    ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Tabs for Auth and Config */}
+      {datasource.definitionId && (
+        <div className="space-y-4">
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList className="grid grid-cols-2 mx-auto max-w-md w-full">
+              <TabsTrigger value="details">Authentication</TabsTrigger>
+              <TabsTrigger value="config">Configuration</TabsTrigger>
+            </TabsList>
+            <TabsContent value="details" className="pt-4">
+              <Card>
+                <CardContent className="pt-6">
+                  {renderAuthFields()}
+                </CardContent>
+              </Card>
+            </TabsContent>
+            <TabsContent value="config" className="pt-4">
+              <Card>
+                <CardContent className="pt-6">
+                  {renderConfigFields()}
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </div>
+      )}
+    </Page>
+  );
+}
diff --git a/src/pages/app/datasource/DatasourceEdit.jsx b/src/pages/app/datasource/DatasourceEdit.jsx
index 3ab4290b..a992ce42 100644
--- a/src/pages/app/datasource/DatasourceEdit.jsx
+++ b/src/pages/app/datasource/DatasourceEdit.jsx
@@ -42,9 +42,11 @@ export function DatasourceEdit() {
   const [activeTab, setActiveTab] = useState('details');
   const [formData, setFormData] = useState({
     name: '',
-    type: '',
+    definitionId: '',
     description: '',
-    configuration: {}
+    environment: 'dev',
+    config: {},
+    isActive: true
   });
   const [errors, setErrors] = useState({});
 
@@ -62,15 +64,16 @@ export function DatasourceEdit() {
         const datasource = await getDatasourceById(id);
         setFormData({
           name: datasource.name || '',
-          type: datasource.type || '',
+          definitionId: datasource.definitionId || '',
           description: datasource.description || '',
-          configuration: datasource.configuration || {},
-          status: datasource.status || 'active'
+          environment: datasource.environment || 'dev',
+          config: datasource.config || {},
+          isActive: datasource.isActive !== undefined ? datasource.isActive : true
         });
         
-        // Establecer el estado de conexión basado en los datos del datasource
-        setConnectionStatus(datasource.connectionStatus === 'connected' ? 'success' : 
-          datasource.connectionStatus === 'error' ? 'error' : null);
+        // Establecer el estado de prueba basado en los datos del datasource
+        setConnectionStatus(datasource.testStatus === 'success' ? 'success' : 
+          datasource.testStatus === 'failure' ? 'error' : null);
       } catch (err) {
         toast.error('Failed to load datasource');
         console.error('Error loading datasource:', err);
@@ -102,8 +105,8 @@ export function DatasourceEdit() {
   const handleConfigChange = (field, value) => {
     setFormData({
       ...formData,
-      configuration: {
-        ...formData.configuration,
+      config: {
+        ...formData.config,
         [field]: value
       }
     });
@@ -124,19 +127,15 @@ export function DatasourceEdit() {
       newErrors.name = 'Name is required';
     }
     
-    if (!formData.type) {
-      newErrors.type = 'Datasource type is required';
+    if (!formData.definitionId) {
+      newErrors.definitionId = 'Datasource type is required';
     }
     
-    if (!formData.description.trim()) {
-      newErrors.description = 'Description is required';
-    }
-    
-    const selectedTypeData = datasourceTypes.find(type => type.id === formData.type);
+    const selectedTypeData = datasourceTypes.find(type => type.id === formData.definitionId);
     if (selectedTypeData) {
       // Validate required auth fields
-      selectedTypeData.authFields.forEach(field => {
-        if (field.required && !formData.configuration[field.name]) {
+      selectedTypeData.authFields?.forEach(field => {
+        if (field.required && !formData.config[field.name]) {
           newErrors[`config.${field.name}`] = `${field.label} is required`;
         }
       });
@@ -144,7 +143,7 @@ export function DatasourceEdit() {
       // Validate required config fields
       if (selectedTypeData.configFields) {
         selectedTypeData.configFields.forEach(field => {
-          if (field.required && !formData.configuration[field.name]) {
+          if (field.required && !formData.config[field.name]) {
             newErrors[`config.${field.name}`] = `${field.label} is required`;
           }
         });
@@ -156,19 +155,14 @@ export function DatasourceEdit() {
   };
 
   const handleTestConnection = async () => {
-    if (!validateForm()) {
-      toast.error('Please fill all required fields');
-      return;
-    }
-    
     try {
       setTestingConnection(true);
-      await testDatasourceConnection(formData.configuration);
-      setConnectionStatus('success');
-      toast.success('Connection test successful');
+      const result = await testDatasourceConnection(id);
+      setConnectionStatus(result.testStatus === 'success' ? 'success' : 'error');
+      toast.success(result.message || 'Connection test completed');
     } catch (err) {
       setConnectionStatus('error');
-      toast.error('Connection test failed');
+      toast.error(err.message || 'Connection test failed');
       console.error('Error testing connection:', err);
     } finally {
       setTestingConnection(false);
@@ -206,7 +200,7 @@ export function DatasourceEdit() {
   };
 
   const renderAuthFields = () => {
-    const selectedTypeData = datasourceTypes.find(type => type.id === formData.type);
+    const selectedTypeData = datasourceTypes.find(type => type.id === formData.definitionId);
     if (!selectedTypeData) return null;
     
     return (
@@ -224,7 +218,7 @@ export function DatasourceEdit() {
               <Input
                 id={field.name}
                 type={field.type}
-                value={formData.configuration[field.name] || ''}
+                value={formData.config[field.name] || ''}
                 onChange={(e) => handleConfigChange(field.name, e.target.value)}
                 placeholder={`Enter ${field.label.toLowerCase()}`}
                 className={errors[`config.${field.name}`] ? 'border-red-500' : ''}
@@ -234,8 +228,8 @@ export function DatasourceEdit() {
                 id={field.name}
                 type="text"
                 value={
-                  Array.isArray(formData.configuration[field.name])
-                    ? formData.configuration[field.name].join(', ')
+                  Array.isArray(formData.config[field.name])
+                    ? formData.config[field.name].join(', ')
                     : ''
                 }
                 onChange={(e) => handleConfigChange(field.name, e.target.value.split(',').map(s => s.trim()))}
@@ -244,7 +238,7 @@ export function DatasourceEdit() {
               />
             ) : field.type === 'select' ? (
               <Select
-                value={formData.configuration[field.name] || ''}
+                value={formData.config[field.name] || ''}
                 onValueChange={(value) => handleConfigChange(field.name, value)}
               >
                 <SelectTrigger className={errors[`config.${field.name}`] ? 'border-red-500' : ''}>
@@ -333,14 +327,14 @@ export function DatasourceEdit() {
               <Input
                 id={field.name}
                 type="text"
-                value={formData.configuration[field.name] || field.default || ''}
+                value={formData.config[field.name] || field.default || ''}
                 onChange={(e) => handleConfigChange(field.name, e.target.value)}
                 placeholder={`Enter ${field.label.toLowerCase()}`}
                 className={errors[`config.${field.name}`] ? 'border-red-500' : ''}
               />
             ) : field.type === 'select' ? (
               <Select
-                value={formData.configuration[field.name] || field.default || ''}
+                value={formData.config[field.name] || field.default || ''}
                 onValueChange={(value) => handleConfigChange(field.name, value)}
               >
                 <SelectTrigger className={errors[`config.${field.name}`] ? 'border-red-500' : ''}>
@@ -358,8 +352,8 @@ export function DatasourceEdit() {
               <div>
                 <div className="mt-2 flex flex-wrap gap-2">
                   {field.options.map((option) => {
-                    const isSelected = Array.isArray(formData.configuration[field.name]) && 
-                                      formData.configuration[field.name].includes(option);
+                    const isSelected = Array.isArray(formData.config[field.name]) && 
+                                      formData.config[field.name].includes(option);
                     
                     return (
                       <Badge
@@ -367,8 +361,8 @@ export function DatasourceEdit() {
                         variant={isSelected ? 'default' : 'outline'}
                         className="cursor-pointer"
                         onClick={() => {
-                          const currentValues = Array.isArray(formData.configuration[field.name]) 
-                            ? [...formData.configuration[field.name]] 
+                          const currentValues = Array.isArray(formData.config[field.name]) 
+                            ? [...formData.config[field.name]] 
                             : [];
                           
                           if (isSelected) {
@@ -476,25 +470,14 @@ export function DatasourceEdit() {
                 </div>
                 
                 <div>
-                  <Label htmlFor="type" className="mb-1 block">
+                  <Label htmlFor="definitionId" className="mb-1 block">
                     Datasource Type <span className="text-red-500">*</span>
                   </Label>
                   <Select
-                    value={formData.type}
-                    onValueChange={(value) => {
-                      // Cambiar el tipo resetea la configuración
-                      if (value !== formData.type) {
-                        setFormData({
-                          ...formData,
-                          type: value,
-                          configuration: {}
-                        });
-                        setConnectionStatus(null);
-                      }
-                    }}
-                    disabled={true} // No permitir cambiar el tipo en la edición
+                    value={formData.definitionId}
+                    disabled={true}
                   >
-                    <SelectTrigger className={errors.type ? 'border-red-500' : ''}>
+                    <SelectTrigger className={errors.definitionId ? 'border-red-500' : ''}>
                       <SelectValue placeholder="Select datasource type" />
                     </SelectTrigger>
                     <SelectContent>
@@ -505,19 +488,51 @@ export function DatasourceEdit() {
                       ))}
                     </SelectContent>
                   </Select>
-                  {errors.type && <p className="mt-1 text-sm text-red-500">{errors.type}</p>}
+                  {errors.definitionId && <p className="mt-1 text-sm text-red-500">{errors.definitionId}</p>}
                   <p className="mt-1 text-xs text-gray-500">
                     The datasource type cannot be changed after creation.
                   </p>
                 </div>
                 
-                {formData.type && (
+                <div>
+                  <Label htmlFor="environment" className="mb-1 block">
+                    Environment
+                  </Label>
+                  <Select
+                    value={formData.environment}
+                    onValueChange={(value) => setFormData({ ...formData, environment: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select environment" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="dev">Development</SelectItem>
+                      <SelectItem value="staging">Staging</SelectItem>
+                      <SelectItem value="production">Production</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                
+                <div className="flex items-center space-x-2">
+                  <input
+                    type="checkbox"
+                    id="isActive"
+                    checked={formData.isActive}
+                    onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
+                    className="h-4 w-4"
+                  />
+                  <Label htmlFor="isActive" className="cursor-pointer">
+                    Active
+                  </Label>
+                </div>
+                
+                {formData.definitionId && (
                   <div>
                     <div className="mb-2 mt-4">
                       <div className="flex flex-wrap gap-2">
                         {datasourceTypes
-                          .find(type => type.id === formData.type)
-                          ?.complianceStandards.map(standard => (
+                          .find(type => type.id === formData.definitionId)
+                          ?.complianceStandards?.map(standard => (
                             <Badge key={standard} variant="secondary">{standard}</Badge>
                           ))}
                       </div>
diff --git a/src/pages/app/datasource/Datasources.jsx b/src/pages/app/datasource/Datasources.jsx
index 6f77b3b0..c984fde2 100644
--- a/src/pages/app/datasource/Datasources.jsx
+++ b/src/pages/app/datasource/Datasources.jsx
@@ -18,9 +18,9 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Badge } from '@/components/ui/badge';
-import { Edit, Trash, MoreHorizontal, ChevronDown, Plus, Loader2, ExternalLink, RefreshCw } from 'lucide-react';
+import { Edit, Trash, MoreHorizontal, ChevronDown, Plus, Loader2, RefreshCw } from 'lucide-react';
 import { toast } from 'sonner';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import Page from '@/components/basic-page.jsx';
 import { 
@@ -39,6 +39,7 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { useAuth } from '@/hooks/use-auth';
+import { useStorage } from '@/hooks/use-storage';
 
 const columnHelper = createColumnHelper();
 
@@ -49,6 +50,15 @@ export function Datasources() {
   const [datasourceToDelete, setDatasourceToDelete] = useState(null);
   const [globalFilter, setGlobalFilter] = useState('');
   const [rowSelection, setRowSelection] = useState({});
+  const [columnVisibility, setColumnVisibility] = useStorage('datasources-column-visibility', {
+    defaultValue: {
+      description: false,
+      environment: false,
+      testStatus: false,
+      version: false,
+      updatedAt: false,
+    },
+  });
   const [testingConnection, setTestingConnection] = useState(null);
   const navigate = useNavigate();
   const { userData } = useAuth();
@@ -77,14 +87,14 @@ export function Datasources() {
     navigate('/app/datasources/new');
   }, [navigate]);
 
+  const handleView = useCallback((datasource) => {
+    navigate(`/app/datasources/${datasource.id}`);
+  }, [navigate]);
+
   const handleEdit = useCallback((datasource) => {
     navigate(`/app/datasources/${datasource.id}/edit`);
   }, [navigate]);
 
-  const handleDeleteConfirm = useCallback((datasource) => {
-    setDatasourceToDelete(datasource);
-  }, []);
-
   const handleDelete = useCallback(async () => {
     if (!datasourceToDelete) return;
     
@@ -133,29 +143,29 @@ export function Datasources() {
   const handleTestConnection = useCallback(async (datasource) => {
     try {
       setTestingConnection(datasource.id);
-      await testDatasourceConnection(datasource.configuration);
+      const result = await testDatasourceConnection(datasource.id);
       
-      // Update the datasource status in the local state
+      // Update the datasource status based on test result
       setDatasources(prevDatasources => 
         prevDatasources.map(ds => 
           ds.id === datasource.id 
-            ? { ...ds, connectionStatus: 'connected', lastSyncTime: new Date().toISOString() } 
+            ? { ...ds, testStatus: result.testStatus, lastTestTime: result.lastTestTime } 
             : ds
         )
       );
       
-      toast.success('Connection test successful');
+      toast.success(result.message || 'Connection test successful');
     } catch (err) {
-      // Update the datasource status to error
+      // Update the datasource status to failure
       setDatasources(prevDatasources => 
         prevDatasources.map(ds => 
           ds.id === datasource.id 
-            ? { ...ds, connectionStatus: 'error' } 
+            ? { ...ds, testStatus: 'failure' } 
             : ds
         )
       );
       
-      toast.error('Connection test failed');
+      toast.error(err.message || 'Connection test failed');
       console.error('Error testing connection:', err);
     } finally {
       setTestingConnection(null);
@@ -168,38 +178,35 @@ export function Datasources() {
     return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   };
 
-  const getDatasourceTypeLabel = (type) => {
+  const getDatasourceTypeLabel = (definitionId) => {
     const typeMap = {
+      'rest-api': 'REST API',
       'microsoft-graph': 'Microsoft Graph',
-      'github-api': 'GitHub API',
-      'azure-security-center': 'Azure Security Center',
-      'aws-security-hub': 'AWS Security Hub',
-      'gdpr-assessment-tool': 'GDPR Assessment',
-      'iso27001-tracker': 'ISO 27001 Tracker'
+      'owncloud': 'OwnCloud'
     };
     
-    return typeMap[type] || type;
+    return typeMap[definitionId] || definitionId;
   };
 
-  const getStatusBadge = (status) => {
-    switch (status) {
-    case 'active':
-      return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Active</Badge>;
-    case 'inactive':
-      return <Badge variant="outline" className="bg-gray-100 text-gray-800 hover:bg-gray-100">Inactive</Badge>;
-    default:
-      return <Badge variant="outline">{status}</Badge>;
-    }
+  const getStatusBadge = (isActive) => {
+    return isActive ? (
+      <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Active</Badge>
+    ) : (
+      <Badge variant="outline" className="bg-gray-100 text-gray-800 hover:bg-gray-100">Inactive</Badge>
+    );
   };
 
-  const getConnectionStatusBadge = (status) => {
-    switch (status) {
-    case 'connected':
-      return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Connected</Badge>;
-    case 'error':
-      return <Badge variant="destructive">Error</Badge>;
+  const getTestStatusBadge = (testStatus) => {
+    switch (testStatus) {
+    case 'success':
+      return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Success</Badge>;
+    case 'failure':
+      return <Badge variant="destructive">Failed</Badge>;
+    case 'pending':
+      return <Badge variant="outline" className="bg-yellow-100 text-yellow-800">Pending</Badge>;
+    case 'not_tested':
     default:
-      return <Badge variant="outline">{status}</Badge>;
+      return <Badge variant="outline" className="bg-gray-100 text-gray-800">Not Tested</Badge>;
     }
   };
 
@@ -230,25 +237,48 @@ export function Datasources() {
         header: 'Name',
         cell: (info) => info.getValue(),
       }),
-      columnHelper.accessor('type', {
+      columnHelper.accessor('definitionId', {
         header: 'Type',
         cell: (info) => getDatasourceTypeLabel(info.getValue()),
       }),
       columnHelper.accessor('description', {
         header: 'Description',
-        cell: (info) => info.getValue() || 'No description',
+        cell: (info) => info.getValue() || '-',
+        enableHiding: true,
+      }),
+      columnHelper.accessor('environment', {
+        header: 'Environment',
+        cell: (info) => {
+          const env = info.getValue();
+          if (!env) return '-';
+          const envColors = {
+            production: 'bg-red-100 text-red-800',
+            staging: 'bg-yellow-100 text-yellow-800',
+            dev: 'bg-blue-100 text-blue-800'
+          };
+          return <Badge className={envColors[env] || 'bg-gray-100 text-gray-800'}>{env}</Badge>;
+        },
+        enableHiding: true,
       }),
-      columnHelper.accessor('status', {
+      columnHelper.accessor('isActive', {
         header: 'Status',
         cell: (info) => getStatusBadge(info.getValue()),
+        enableHiding: true,
       }),
-      columnHelper.accessor('connectionStatus', {
-        header: 'Connection',
-        cell: (info) => getConnectionStatusBadge(info.getValue()),
+      columnHelper.accessor('testStatus', {
+        header: 'Test Status',
+        cell: (info) => getTestStatusBadge(info.getValue()),
+        enableHiding: true,
       }),
-      columnHelper.accessor('lastSyncTime', {
-        header: 'Last Sync',
+      columnHelper.accessor('version', {
+        header: 'Version',
+        cell: (info) => `v${info.getValue()}`,
+        enableHiding: true,
+      }),
+      columnHelper.accessor('updatedAt', {
+        header: 'Last Updated',
         cell: (info) => formatDate(info.getValue()),
+        enableHiding: true,
       }),
       {
         id: 'actions',
@@ -299,20 +329,13 @@ export function Datasources() {
                   <Edit className="mr-2 h-4 w-4" />
                   Edit
                 </DropdownMenuItem>
-                <DropdownMenuItem 
-                  onClick={() => handleDeleteConfirm(datasource)}
-                  className="text-red-600"
-                >
-                  <Trash className="mr-2 h-4 w-4" />
-                  Delete
-                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           );
         },
       },
     ],
-    [handleDeleteConfirm, handleEdit, userData.authority, testingConnection, handleTestConnection]
+    [handleEdit, userData.authority, testingConnection, handleTestConnection]
   );
 
   const table = useReactTable({
@@ -321,9 +344,11 @@ export function Datasources() {
     state: {
       globalFilter,
       rowSelection,
+      columnVisibility,
     },
     onGlobalFilterChange: setGlobalFilter,
     onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: setColumnVisibility,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
@@ -396,7 +421,7 @@ export function Datasources() {
         </div>
       )}
       
-      <div className="mt-4 border rounded-md">
+      <div className="mt-4 border rounded-md overflow-x-auto">
         <Table>
           <TableHeader className="bg-gray-50">
             {table.getHeaderGroups().map((headerGroup) => (
@@ -423,7 +448,7 @@ export function Datasources() {
             
             {!loading && table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => (
-                <TableRow className="cursor-pointer text-left hover:bg-gray-50" key={row.id} data-state={row.getIsSelected() && 'selected'} onClick={() => userData.authority !== 'USER' && handleEdit(row.original)}>
+                <TableRow className="cursor-pointer text-left hover:bg-gray-50" key={row.id} data-state={row.getIsSelected() && 'selected'} onClick={() => handleView(row.original)}>
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id} onClick={(e) => cell.column.id === 'select' && e.stopPropagation()}>
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/src/pages/app/linker/LinkerCreate.jsx b/src/pages/app/linker/LinkerCreate.jsx
index f99ccbe2..9653522f 100644
--- a/src/pages/app/linker/LinkerCreate.jsx
+++ b/src/pages/app/linker/LinkerCreate.jsx
@@ -1,701 +1,295 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import Page from '@/components/basic-page.jsx';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import {
   Card,
   CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
 } from '@/components/ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Badge } from '@/components/ui/badge';
-import { Checkbox } from '@/components/ui/checkbox';
-import { ArrowLeft, Loader2, Save, Plus, Trash, Link as LinkIcon, Check } from 'lucide-react';
-import { getAllDatasources } from '@/services/datasources';
-import { createLinker, testLinkerConnection } from '@/services/linkers';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { ArrowLeft, Check, Loader2 } from 'lucide-react';
+import { LinkerDatasourcesStep } from '@/components/linker/LinkerDatasourcesStep';
+import { LinkerMappingStep } from '@/components/linker/LinkerMappingStep';
+import { createLinker } from '@/services/linkers';
+import {
+  hasLinkerDraft,
+  getLinkerDraft,
+  saveLinkerInfo,
+  saveLinkerDatasources,
+  clearLinkerDraft,
+} from '@/utils/linkerDraftStorage';
+
+const steps = [
+  { id: 'config', title: 'Configuration' },
+  { id: 'mapping', title: 'Data Mapping' },
+];
 
 export function LinkerCreate() {
   const navigate = useNavigate();
+  const [currentStep, setCurrentStep] = useState(0);
   const [loading, setLoading] = useState(false);
-  const [testingConnection, setTestingConnection] = useState(false);
-  const [connectionStatus, setConnectionStatus] = useState(null);
-  const [datasources, setDatasources] = useState([]);
-  const [activeTab, setActiveTab] = useState('general');
-  const [formData, setFormData] = useState({
+  const [error, setError] = useState(null);
+  const [linkerData, setLinkerData] = useState({
     name: '',
     description: '',
-    status: 'active',
+    environment: 'dev',
     datasources: [],
-    config: {
-      refreshInterval: 'daily',
-      notifyOnChange: true,
-      mappings: []
-    }
+    mapping: {}
   });
-  const [errors, setErrors] = useState({});
-  const [sourceDatasource, setSourceDatasource] = useState('');
-  const [targetDatasource, setTargetDatasource] = useState('');
-  const [mappingFields, setMappingFields] = useState([
-    { sourceField: '', targetField: '' }
-  ]);
+  const [apiError, setApiError] = useState(null);
+  const [showDraftDialog, setShowDraftDialog] = useState(false);
+  const [hasDrafts, setHasDrafts] = useState(false);
+  const initialFetchCompleted = useRef(false);
 
-  // Fetch datasources on component mount
+  // Check for draft data on component mount
   useEffect(() => {
-    async function fetchDatasources() {
-      try {
-        setLoading(true);
-        const response = await getAllDatasources();
-        setDatasources(response.filter(ds => ds.status === 'active'));
-      } catch (err) {
-        toast.error('Failed to load datasources');
-        console.error('Error fetching datasources:', err);
-      } finally {
-        setLoading(false);
+    if (!initialFetchCompleted.current) {
+      const draftExists = hasLinkerDraft();
+      setHasDrafts(draftExists);
+      
+      if (draftExists) {
+        setShowDraftDialog(true);
       }
+      
+      initialFetchCompleted.current = true;
     }
-    
-    fetchDatasources();
   }, []);
 
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setFormData({
-      ...formData,
-      [name]: value
-    });
-    
-    // Clear error for this field
-    if (errors[name]) {
-      setErrors({
-        ...errors,
-        [name]: ''
-      });
-    }
-  };
-
-  const handleConfigChange = (field, value) => {
-    setFormData({
-      ...formData,
-      config: {
-        ...formData.config,
-        [field]: value
-      }
-    });
-    
-    // Clear error for this field
-    if (errors[`config.${field}`]) {
-      setErrors({
-        ...errors,
-        [`config.${field}`]: ''
-      });
-    }
-  };
-
-  const handleDatasourceToggle = (datasourceId) => {
-    const currentDatasources = [...formData.datasources];
+  const handleContinueDraft = () => {
+    const draft = getLinkerDraft();
     
-    if (currentDatasources.includes(datasourceId)) {
-      // Remove datasource
-      setFormData({
-        ...formData,
-        datasources: currentDatasources.filter(id => id !== datasourceId)
-      });
-      
-      // Remove any mappings involving this datasource
-      const updatedMappings = formData.config.mappings.filter(mapping => 
-        mapping.source !== getDatasourceTypeById(datasourceId) && 
-        mapping.target !== getDatasourceTypeById(datasourceId)
-      );
-      
-      setFormData(prev => ({
+    if (draft.info) {
+      setLinkerData(prev => ({
         ...prev,
-        config: {
-          ...prev.config,
-          mappings: updatedMappings
-        }
+        ...draft.info
       }));
-    } else {
-      // Add datasource
-      setFormData({
-        ...formData,
-        datasources: [...currentDatasources, datasourceId]
-      });
     }
     
-    if (errors.datasources) {
-      setErrors({
-        ...errors,
-        datasources: ''
-      });
-    }
-  };
-
-  const getDatasourceTypeById = (id) => {
-    const datasource = datasources.find(ds => ds.id === id);
-    return datasource ? datasource.type : null;
-  };
-
-  const getDatasourceById = (id) => {
-    return datasources.find(ds => ds.id === id) || null;
-  };
-
-  const handleAddMapping = () => {
-    if (!sourceDatasource || !targetDatasource) {
-      toast.error('Please select both source and target datasources');
-      return;
-    }
-    
-    if (sourceDatasource === targetDatasource) {
-      toast.error('Source and target datasources must be different');
-      return;
-    }
-    
-    // Check if this mapping already exists
-    const existingMapping = formData.config.mappings.find(
-      mapping => mapping.source === getDatasourceTypeById(sourceDatasource) && 
-                mapping.target === getDatasourceTypeById(targetDatasource)
-    );
-    
-    if (existingMapping) {
-      toast.error('This mapping already exists');
-      return;
+    if (draft.datasources && draft.datasources.length > 0) {
+      setLinkerData(prev => ({
+        ...prev,
+        datasources: draft.datasources
+      }));
     }
     
-    if (mappingFields.some(field => !field.sourceField || !field.targetField)) {
-      toast.error('Please fill in all mapping fields');
-      return;
+    if (draft.mapping) {
+      setLinkerData(prev => ({
+        ...prev,
+        mapping: draft.mapping
+      }));
     }
     
-    const newMapping = {
-      source: getDatasourceTypeById(sourceDatasource),
-      target: getDatasourceTypeById(targetDatasource),
-      fieldMappings: [...mappingFields]
-    };
-    
-    setFormData({
-      ...formData,
-      config: {
-        ...formData.config,
-        mappings: [...formData.config.mappings, newMapping]
-      }
-    });
-    
-    // Reset the form for next mapping
-    setSourceDatasource('');
-    setTargetDatasource('');
-    setMappingFields([{ sourceField: '', targetField: '' }]);
+    setShowDraftDialog(false);
+    setHasDrafts(false);
   };
 
-  const handleRemoveMapping = (index) => {
-    const updatedMappings = [...formData.config.mappings];
-    updatedMappings.splice(index, 1);
-    
-    setFormData({
-      ...formData,
-      config: {
-        ...formData.config,
-        mappings: updatedMappings
-      }
-    });
+  const handleDiscardDraft = () => {
+    clearLinkerDraft();
+    setHasDrafts(false);
+    setShowDraftDialog(false);
+    toast.success('Draft discarded');
   };
 
-  const handleAddMappingField = () => {
-    setMappingFields([...mappingFields, { sourceField: '', targetField: '' }]);
+  const goToNextStep = () => {
+    setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
   };
 
-  const handleRemoveMappingField = (index) => {
-    const updatedFields = [...mappingFields];
-    updatedFields.splice(index, 1);
-    setMappingFields(updatedFields);
+  const goToPrevStep = () => {
+    setCurrentStep((prev) => Math.max(prev - 1, 0));
   };
 
-  const handleMappingFieldChange = (index, field, value) => {
-    const updatedFields = [...mappingFields];
-    updatedFields[index][field] = value;
-    setMappingFields(updatedFields);
-  };
-
-  const validateForm = () => {
-    const newErrors = {};
-    
-    if (!formData.name.trim()) {
-      newErrors.name = 'Name is required';
-    }
-    
-    if (!formData.description.trim()) {
-      newErrors.description = 'Description is required';
-    }
-    
-    if (formData.datasources.length < 2) {
-      newErrors.datasources = 'At least two datasources must be selected';
-    }
-    
-    if (formData.config.mappings.length === 0) {
-      newErrors.mappings = 'At least one mapping must be defined';
-    }
-    
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleTestConnection = async () => {
-    if (!validateForm()) {
-      toast.error('Please fix the errors before testing');
-      return;
-    }
-    
+  const handleConfigSubmit = async (configData) => {
     try {
-      setTestingConnection(true);
-      await testLinkerConnection(formData);
-      setConnectionStatus('success');
-      toast.success('Linker configuration is valid');
+      setLoading(true);
+      setApiError(null);
+      
+      // configData contains both info (name, description, environment) and datasources
+      const { datasources, ...linkerInfo } = configData;
+      
+      // Save to localStorage
+      saveLinkerInfo(linkerInfo);
+      saveLinkerDatasources(datasources);
+      
+      setLinkerData(prev => ({
+        ...prev,
+        ...linkerInfo,
+        datasources
+      }));
+      
+      toast.success('Configuration saved successfully');
+      goToNextStep();
     } catch (err) {
-      setConnectionStatus('error');
-      toast.error('Linker configuration test failed');
-      console.error('Error testing linker:', err);
+      const errorMessage = err.message || 'Failed to save configuration';
+      setApiError(errorMessage);
+      toast.error(errorMessage);
+      console.error('Error saving configuration:', err);
     } finally {
-      setTestingConnection(false);
+      setLoading(false);
     }
   };
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    
-    if (!validateForm()) {
-      toast.error('Please fix the errors before submitting');
-      return;
-    }
-    
+  const handleMappingSubmit = async (mapping) => {
     try {
       setLoading(true);
-      await createLinker(formData);
+      setApiError(null);
+      
+      // Prepare linker data for creation
+      const linkerPayload = {
+        name: linkerData.name || undefined,
+        description: linkerData.description || undefined,
+        environment: linkerData.environment,
+        datasourceIds: linkerData.datasources.map(ds => ds.datasourceId),
+        defaultMethodName: 'default', // Can be configured in future
+        datasourceConfigs: {}, // Required field (can be empty object)
+      };
+      
+      await createLinker(linkerPayload);
       toast.success('Linker created successfully');
+      
+      // Clear draft data on successful completion
+      clearLinkerDraft();
+      
+      // Navigate back to linkers list
       navigate('/app/linkers');
     } catch (err) {
-      toast.error('Failed to create linker');
+      const errorMessage = err.message || 'Failed to create linker';
+      setApiError(errorMessage);
+      toast.error(errorMessage);
       console.error('Error creating linker:', err);
     } finally {
       setLoading(false);
     }
   };
 
+  const renderStepContent = () => {
+    switch (currentStep) {
+    case 0:
+      return (
+        <LinkerDatasourcesStep 
+          initialData={linkerData}
+          initialDatasources={linkerData.datasources} 
+          onSubmit={handleConfigSubmit} 
+          isSubmitting={loading}
+          apiError={apiError}
+        />
+      );
+    case 1:
+      return (
+        <LinkerMappingStep 
+          initialMapping={linkerData.mapping}
+          datasources={linkerData.datasources}
+          onSubmit={handleMappingSubmit} 
+          isSubmitting={loading}
+          apiError={apiError}
+        />
+      );
+    default:
+      return null;
+    }
+  };
+
   return (
-    <Page name="Create Linker" className="h-full w-full">
-      <div className="mx-auto max-w-4xl">
-        <div className="mb-6 flex items-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => navigate('/app/linkers')}
-            className="mr-4"
-          >
-            <ArrowLeft className="mr-2 h-4 w-4" />
-            Back to Linkers
-          </Button>
-        </div>
-        
-        <Card>
-          <CardHeader>
-            <CardTitle>Create New Linker</CardTitle>
-            <CardDescription>
-              Link datasources together to enable data flow between systems
-            </CardDescription>
-          </CardHeader>
-          
-          <form onSubmit={handleSubmit}>
-            <CardContent>
-              <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
-                <TabsList className="grid grid-cols-3">
-                  <TabsTrigger value="general">General</TabsTrigger>
-                  <TabsTrigger value="datasources">Datasources</TabsTrigger>
-                  <TabsTrigger value="mappings">Mappings</TabsTrigger>
-                </TabsList>
-                
-                <TabsContent value="general" className="mt-4 space-y-4">
-                  <div>
-                    <Label htmlFor="name" className="mb-1 block">
-                      Name <span className="text-red-500">*</span>
-                    </Label>
-                    <Input
-                      id="name"
-                      name="name"
-                      value={formData.name}
-                      onChange={handleInputChange}
-                      placeholder="Enter linker name"
-                      className={errors.name ? 'border-red-500' : ''}
-                    />
-                    {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
-                  </div>
-                  
-                  <div>
-                    <Label htmlFor="description" className="mb-1 block">
-                      Description <span className="text-red-500">*</span>
-                    </Label>
-                    <Textarea
-                      id="description"
-                      name="description"
-                      value={formData.description}
-                      onChange={handleInputChange}
-                      placeholder="Enter linker description"
-                      className={errors.description ? 'border-red-500' : ''}
-                      rows={3}
-                    />
-                    {errors.description && <p className="mt-1 text-sm text-red-500">{errors.description}</p>}
-                  </div>
-                  
-                  <div>
-                    <Label htmlFor="status" className="mb-1 block">
-                      Status
-                    </Label>
-                    <Select
-                      value={formData.status}
-                      onValueChange={(value) => handleInputChange({ target: { name: 'status', value } })}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="active">Active</SelectItem>
-                        <SelectItem value="inactive">Inactive</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  
-                  <div>
-                    <Label htmlFor="refreshInterval" className="mb-1 block">
-                      Refresh Interval
-                    </Label>
-                    <Select
-                      value={formData.config.refreshInterval}
-                      onValueChange={(value) => handleConfigChange('refreshInterval', value)}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select refresh interval" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="hourly">Hourly</SelectItem>
-                        <SelectItem value="daily">Daily</SelectItem>
-                        <SelectItem value="weekly">Weekly</SelectItem>
-                        <SelectItem value="monthly">Monthly</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  
-                  <div className="mt-4 flex items-center space-x-2">
-                    <Checkbox 
-                      id="notifyOnChange" 
-                      checked={formData.config.notifyOnChange}
-                      onCheckedChange={(checked) => handleConfigChange('notifyOnChange', checked)}
-                    />
-                    <Label htmlFor="notifyOnChange">Notify on changes</Label>
-                  </div>
-                </TabsContent>
-                
-                <TabsContent value="datasources" className="mt-4">
-                  <div>
-                    <h3 className="mb-4 text-lg font-medium">Select Datasources</h3>
-                    {errors.datasources && <p className="mb-2 text-sm text-red-500">{errors.datasources}</p>}
-                    
-                    {loading ? (
-                      <div className="h-32 flex items-center justify-center">
-                        <Loader2 className="mr-2 h-6 w-6 animate-spin" />
-                        <span>Loading datasources...</span>
-                      </div>
-                    ) : datasources.length === 0 ? (
-                      <div className="border rounded-md py-8 text-center">
-                        <p className="text-gray-500">No active datasources found.</p>
-                        <Button
-                          variant="link"
-                          onClick={() => navigate('/app/datasources/new')}
-                          className="mt-2"
-                        >
-                          Create a datasource
-                        </Button>
-                      </div>
-                    ) : (
-                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                        {datasources.map((datasource) => (
-                          <div 
-                            key={datasource.id} 
-                            className={`border rounded-md p-4 cursor-pointer transition-colors ${
-                              formData.datasources.includes(datasource.id) 
-                                ? 'border-blue-500 bg-blue-50' 
-                                : 'hover:border-gray-400'
-                            }`}
-                            onClick={() => handleDatasourceToggle(datasource.id)}
-                          >
-                            <div className="flex items-center justify-between">
-                              <div>
-                                <h4 className="font-medium">{datasource.name}</h4>
-                                <p className="text-sm text-gray-600">{datasource.type}</p>
-                              </div>
-                              <Checkbox 
-                                checked={formData.datasources.includes(datasource.id)} 
-                                onCheckedChange={() => handleDatasourceToggle(datasource.id)}
-                                onClick={(e) => e.stopPropagation()}
-                              />
-                            </div>
-                            <p className="mt-2 truncate text-sm">{datasource.description}</p>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                </TabsContent>
-                
-                <TabsContent value="mappings" className="mt-4">
-                  <div>
-                    <h3 className="mb-4 text-lg font-medium">Configure Mappings</h3>
-                    {errors.mappings && <p className="mb-2 text-sm text-red-500">{errors.mappings}</p>}
-                    
-                    {formData.datasources.length < 2 ? (
-                      <div className="border rounded-md p-6 text-center">
-                        <p className="text-gray-500">Please select at least two datasources first.</p>
-                        <Button
-                          variant="link"
-                          onClick={() => setActiveTab('datasources')}
-                        >
-                          Go to Datasources
-                        </Button>
-                      </div>
-                    ) : (
-                      <>
-                        {/* Existing mappings */}
-                        {formData.config.mappings.length > 0 && (
-                          <div className="mb-6">
-                            <h4 className="mb-3 font-medium">Defined Mappings</h4>
-                            <div className="space-y-3">
-                              {formData.config.mappings.map((mapping, index) => (
-                                <div key={index} className="border rounded-md p-4">
-                                  <div className="flex items-start justify-between">
-                                    <div>
-                                      <div className="flex items-center">
-                                        <Badge className="mr-2">Source</Badge>
-                                        <span>{mapping.source}</span>
-                                      </div>
-                                      <div className="mt-1 flex items-center">
-                                        <Badge className="mr-2">Target</Badge>
-                                        <span>{mapping.target}</span>
-                                      </div>
-                                    </div>
-                                    <Button
-                                      variant="ghost"
-                                      size="sm"
-                                      onClick={() => handleRemoveMapping(index)}
-                                      className="text-red-500 hover:text-red-700"
-                                    >
-                                      <Trash className="h-4 w-4" />
-                                    </Button>
-                                  </div>
-                                  
-                                  <div className="mt-3">
-                                    <h5 className="mb-2 text-sm font-medium">Field Mappings</h5>
-                                    <div className="space-y-1">
-                                      {mapping.fieldMappings.map((field, fidx) => (
-                                        <div key={fidx} className="flex items-center text-sm">
-                                          <span className="text-gray-600">{field.sourceField}</span>
-                                          <span className="mx-2">→</span>
-                                          <span className="text-gray-600">{field.targetField}</span>
-                                        </div>
-                                      ))}
-                                    </div>
-                                  </div>
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-                        )}
-                        
-                        {/* New mapping form */}
-                        <div className="border rounded-md bg-gray-50 p-4">
-                          <h4 className="mb-4 font-medium">Add New Mapping</h4>
-                          
-                          <div className="grid grid-cols-1 mb-4 gap-4 md:grid-cols-2">
-                            <div>
-                              <Label className="mb-1 block">Source Datasource</Label>
-                              <Select
-                                value={sourceDatasource}
-                                onValueChange={setSourceDatasource}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue placeholder="Select source" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  {formData.datasources.map(id => {
-                                    const ds = getDatasourceById(id);
-                                    return ds ? (
-                                      <SelectItem key={id} value={id}>
-                                        {ds.name}
-                                      </SelectItem>
-                                    ) : null;
-                                  })}
-                                </SelectContent>
-                              </Select>
-                            </div>
-                            
-                            <div>
-                              <Label className="mb-1 block">Target Datasource</Label>
-                              <Select
-                                value={targetDatasource}
-                                onValueChange={setTargetDatasource}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue placeholder="Select target" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  {formData.datasources.map(id => {
-                                    const ds = getDatasourceById(id);
-                                    return ds ? (
-                                      <SelectItem key={id} value={id}>
-                                        {ds.name}
-                                      </SelectItem>
-                                    ) : null;
-                                  })}
-                                </SelectContent>
-                              </Select>
-                            </div>
-                          </div>
-                          
-                          <div className="mb-4 space-y-3">
-                            <h5 className="text-sm font-medium">Field Mappings</h5>
-                            
-                            {mappingFields.map((field, index) => (
-                              <div key={index} className="flex items-center space-x-2">
-                                <Input
-                                  placeholder="Source field"
-                                  value={field.sourceField}
-                                  onChange={(e) => handleMappingFieldChange(index, 'sourceField', e.target.value)}
-                                  className="flex-1"
-                                />
-                                <span>→</span>
-                                <Input
-                                  placeholder="Target field"
-                                  value={field.targetField}
-                                  onChange={(e) => handleMappingFieldChange(index, 'targetField', e.target.value)}
-                                  className="flex-1"
-                                />
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="icon"
-                                  onClick={() => handleRemoveMappingField(index)}
-                                  disabled={mappingFields.length === 1}
-                                  className="text-red-500 hover:text-red-700"
-                                >
-                                  <Trash className="h-4 w-4" />
-                                </Button>
-                              </div>
-                            ))}
-                          </div>
-                          
-                          <div className="flex space-x-2">
-                            <Button
-                              type="button"
-                              variant="outline"
-                              size="sm"
-                              onClick={handleAddMappingField}
-                            >
-                              <Plus className="mr-1 h-4 w-4" /> Add Field
-                            </Button>
-                            
-                            <Button
-                              type="button"
-                              variant="secondary"
-                              size="sm"
-                              onClick={handleAddMapping}
-                              disabled={!sourceDatasource || !targetDatasource}
-                            >
-                              <LinkIcon className="mr-1 h-4 w-4" /> Add Mapping
-                            </Button>
-                          </div>
-                        </div>
-                      </>
-                    )}
-                  </div>
-                </TabsContent>
-              </Tabs>
-              
-              <div className="mt-6 border-t pt-6">
-                <Button
-                  type="button"
-                  onClick={handleTestConnection}
-                  disabled={testingConnection}
-                  className="w-full"
-                >
-                  {testingConnection ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Testing Configuration...
-                    </>
-                  ) : (
-                    <>
-                      {connectionStatus === 'success' ? (
-                        <Check className="mr-2 h-4 w-4" />
-                      ) : (
-                        <LinkIcon className="mr-2 h-4 w-4" />
-                      )}
-                      Test Configuration
-                    </>
-                  )}
-                </Button>
-                
-                {connectionStatus === 'success' && (
-                  <div className="mt-3 flex items-center border border-green-200 rounded-md bg-green-50 p-3">
-                    <Check className="mr-2 h-5 w-5 text-green-500" />
-                    <p className="text-sm text-green-700">Configuration is valid. You can now save this linker.</p>
-                  </div>
-                )}
-                
-                {connectionStatus === 'error' && (
-                  <div className="mt-3 flex items-center border border-red-200 rounded-md bg-red-50 p-3">
-                    <Trash className="mr-2 h-5 w-5 text-red-500" />
-                    <p className="text-sm text-red-700">Configuration is invalid. Please check your settings and try again.</p>
-                  </div>
-                )}
-              </div>
-            </CardContent>
-            
-            <CardFooter className="flex justify-between">
-              <Button 
-                variant="outline" 
-                type="button"
-                onClick={() => navigate('/app/linkers')}
-              >
-                Cancel
-              </Button>
-              <Button 
-                type="submit"
-                disabled={loading || connectionStatus !== 'success'}
+    <Page name="Create New Linker" className="h-full w-full">
+      {/* Draft Recovery Dialog */}
+      <AlertDialog open={showDraftDialog} onOpenChange={setShowDraftDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Unfinished Linker Found</AlertDialogTitle>
+            <AlertDialogDescription>
+              We found a linker that you started creating but didn&apos;t finish. Would you like to continue where you left off?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={handleDiscardDraft} disabled={loading}>
+              {loading ? 'Discarding...' : 'Discard Draft'}
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={handleContinueDraft}>
+              Continue Draft
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Stepper */}
+      <div className="mb-8">
+        <div className="flex items-center justify-center">
+          {steps.map((step, index) => (
+            <div key={step.id} className="flex items-center">
+              {/* Step circle */}
+              <div 
+                className={`flex items-center justify-center w-10 h-10 rounded-full border-2 ${
+                  index < currentStep
+                    ? 'bg-chart-1 border-chart-1 text-white'
+                    : index === currentStep
+                      ? 'border-chart-5 text-chart-5'
+                      : 'border-gray-300 text-gray-300'
+                }`}
               >
-                {loading ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Creating...
-                  </>
+                {index < currentStep ? (
+                  <Check className="h-5 w-5" />
                 ) : (
-                  <>
-                    <Save className="mr-2 h-4 w-4" />
-                    Save Linker
-                  </>
+                  <span>{index + 1}</span>
                 )}
-              </Button>
-            </CardFooter>
-          </form>
-        </Card>
+              </div>
+              
+              {/* Step title */}
+              <div className={`ml-2 mr-6 ${
+                index <= currentStep ? 'text-gray-800' : 'text-gray-400'
+              }`}>
+                {step.title}
+              </div>
+              
+              {/* Connector line */}
+              {index < steps.length - 1 && (
+                <div className={`w-12 h-1 mr-2 ${
+                  index < currentStep ? 'bg-chart-1' : 'bg-gray-300'
+                }`}></div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Error message */}
+      {error && (
+        <div className="mb-4 border border-red-400 rounded bg-red-100 px-4 py-3 text-red-700">
+          {error}
+        </div>
+      )}
+
+      {/* Step content */}
+      <Card>
+        <CardContent className="pt-6">
+          {loading && showDraftDialog ? (
+            <div className="h-60 flex items-center justify-center">
+              <Loader2 className="h-8 w-8 animate-spin" />
+            </div>
+          ) : (
+            renderStepContent()
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Navigation buttons */}
+      <div className="mt-6 flex justify-between">
+        <Button
+          variant="outline"
+          onClick={() => currentStep === 0 ? navigate('/app/linkers') : goToPrevStep()}
+          disabled={loading}
+        >
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          {currentStep === 0 ? 'Cancel' : 'Previous Step'}
+        </Button>
       </div>
     </Page>
   );
diff --git a/src/pages/app/linker/LinkerDetail.jsx b/src/pages/app/linker/LinkerDetail.jsx
new file mode 100644
index 00000000..776e723d
--- /dev/null
+++ b/src/pages/app/linker/LinkerDetail.jsx
@@ -0,0 +1,364 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Loader2, Edit, PlayCircle, CheckCircle2, Clock, AlertCircle } from 'lucide-react';
+import Page from '@/components/basic-page';
+import { getLinkerById, executeLinker } from '@/services/linkers';
+import { getAllDatasources } from '@/services/datasources';
+import { useAuth } from '@/hooks/use-auth';
+import { toast } from 'sonner';
+
+export function LinkerDetail() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { userData } = useAuth();
+  const [loading, setLoading] = useState(true);
+  const [executing, setExecuting] = useState(false);
+  const [activeTab, setActiveTab] = useState('details');
+  const [linker, setLinker] = useState(null);
+  const [datasources, setDatasources] = useState([]);
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        setLoading(true);
+        const [linkerData, datasourcesData] = await Promise.all([
+          getLinkerById(id),
+          getAllDatasources()
+        ]);
+        setLinker(linkerData);
+        setDatasources(datasourcesData);
+      } catch (err) {
+        console.error('Error loading linker:', err);
+        toast.error('Failed to load linker details');
+        navigate('/app/linkers');
+      } finally {
+        setLoading(false);
+      }
+    }
+    
+    loadData();
+  }, [id, navigate]);
+
+  const handleExecute = async () => {
+    try {
+      setExecuting(true);
+      await executeLinker(id);
+      toast.success('Linker executed successfully');
+      // Reload linker data to get updated execution status
+      const updatedLinker = await getLinkerById(id);
+      setLinker(updatedLinker);
+    } catch (err) {
+      console.error('Error executing linker:', err);
+      toast.error('Failed to execute linker');
+    } finally {
+      setExecuting(false);
+    }
+  };
+
+  const formatDate = (dateString) => {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  };
+
+  const getDatasourceName = (id) => {
+    const datasource = datasources.find(ds => ds.id === id);
+    return datasource?.name || id;
+  };
+
+  const getDatasourceTypeLabel = (id) => {
+    const datasource = datasources.find(ds => ds.id === id);
+    if (!datasource) return '-';
+    
+    const typeMap = {
+      'rest-api': 'REST API',
+      'microsoft-graph': 'Microsoft Graph',
+      'owncloud': 'OwnCloud'
+    };
+    
+    return typeMap[datasource.definitionId] || datasource.definitionId;
+  };
+
+  const getExecutionStatusBadge = (status) => {
+    switch (status) {
+    case 'success':
+      return <Badge className="bg-green-100 text-green-800"><CheckCircle2 className="mr-1 h-3 w-3" />Success</Badge>;
+    case 'pending':
+      return <Badge className="bg-yellow-100 text-yellow-800"><Clock className="mr-1 h-3 w-3" />Pending</Badge>;
+    case 'error':
+      return <Badge className="bg-red-100 text-red-800"><AlertCircle className="mr-1 h-3 w-3" />Error</Badge>;
+    default:
+      return <Badge variant="secondary">Unknown</Badge>;
+    }
+  };
+
+  const getCacheStatusBadge = (status) => {
+    switch (status) {
+    case 'valid':
+      return <Badge className="bg-green-100 text-green-800">Valid</Badge>;
+    case 'expired':
+      return <Badge className="bg-yellow-100 text-yellow-800">Expired</Badge>;
+    case 'invalid':
+      return <Badge className="bg-red-100 text-red-800">Invalid</Badge>;
+    default:
+      return <Badge variant="secondary">Unknown</Badge>;
+    }
+  };
+
+  const renderDatasourcesList = () => {
+    if (!linker?.datasourceIds || linker.datasourceIds.length === 0) {
+      return (
+        <div className="border rounded-md py-8 text-center text-gray-500">
+          No datasources configured
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-3">
+        {linker.datasourceIds.map((dsId) => {
+          const datasource = datasources.find(ds => ds.id === dsId);
+          return (
+            <div 
+              key={dsId} 
+              className="cursor-pointer border rounded-md p-4 transition-colors hover:bg-gray-50"
+              onClick={() => navigate(`/app/datasources/${dsId}`)}
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <h4 className="font-medium">{getDatasourceName(dsId)}</h4>
+                    {datasource?.environment && (
+                      <Badge variant="outline" className="text-xs">
+                        {datasource.environment}
+                      </Badge>
+                    )}
+                    {datasource?.isActive && (
+                      <Badge className="bg-green-100 text-xs text-green-800">Active</Badge>
+                    )}
+                  </div>
+                  <p className="mt-1 text-sm text-gray-600">
+                    {getDatasourceTypeLabel(dsId)}
+                  </p>
+                  {datasource?.description && (
+                    <p className="line-clamp-2 mt-2 text-sm text-gray-500">
+                      {datasource.description}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderExecutionDetails = () => {
+    if (!linker) return null;
+
+    return (
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium">Execution Information</h3>
+        
+        <div className="grid grid-cols-2 gap-6">
+          <div>
+            <Label className="mb-1 block text-sm text-gray-500 font-medium">
+              Execution Status
+            </Label>
+            <div className="text-base">
+              {getExecutionStatusBadge(linker.executionStatus)}
+            </div>
+          </div>
+          
+          <div>
+            <Label className="mb-1 block text-sm text-gray-500 font-medium">
+              Cache Status
+            </Label>
+            <div className="text-base">
+              {getCacheStatusBadge(linker.cacheStatus)}
+            </div>
+          </div>
+          
+          <div>
+            <Label className="mb-1 block text-sm text-gray-500 font-medium">
+              Last Executed
+            </Label>
+            <p className="text-base">
+              {formatDate(linker.lastExecutedAt)}
+            </p>
+          </div>
+          
+          <div>
+            <Label className="mb-1 block text-sm text-gray-500 font-medium">
+              Cache Expires
+            </Label>
+            <p className="text-base">
+              {formatDate(linker.cacheExpiresAt)}
+            </p>
+          </div>
+        </div>
+
+        {userData.authority !== 'USER' && (
+          <div className="mt-6">
+            <Button
+              type="button"
+              onClick={handleExecute}
+              disabled={executing}
+              className="w-full"
+            >
+              {executing ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Executing...
+                </>
+              ) : (
+                <>
+                  <PlayCircle className="mr-2 h-4 w-4" />
+                  Execute Linker
+                </>
+              )}
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (loading) {
+    return (
+      <Page name="Linker Details" className="container mx-auto p-4">
+        <div className="h-64 flex items-center justify-center">
+          <Loader2 className="mr-2 h-6 w-6 animate-spin" />
+          <span>Loading linker details...</span>
+        </div>
+      </Page>
+    );
+  }
+
+  if (!linker) {
+    return (
+      <Page name="Linker Details" className="container mx-auto p-4">
+        <div className="py-8 text-center">
+          <p className="text-gray-500">Linker not found</p>
+        </div>
+      </Page>
+    );
+  }
+
+  return (
+    <Page name="Linker Details" className="container mx-auto p-4 space-y-6" linker={linker}>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between pb-2 space-x-2 space-y-0">
+          <div className="flex-1">
+            <CardTitle className="flex items-center gap-2">
+              {linker.name || <span className="text-gray-400 italic">Unnamed Linker</span>}
+              <Badge className={linker.isActive ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}>
+                {linker.isActive ? 'Active' : 'Inactive'}
+              </Badge>
+            </CardTitle>
+            <CardDescription className="mt-2">
+              {linker.description || 'No description provided'}
+            </CardDescription>
+          </div>
+          {userData.authority !== 'USER' && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => navigate(`/app/linkers/${id}/edit`)}
+            >
+              <Edit className="h-4 w-4" />
+            </Button>
+          )}
+        </CardHeader>
+        
+        <CardContent className="text-left">
+          <div className="space-y-4">
+            {/* General Information */}
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <Label className="mb-1 block text-sm text-gray-500 font-medium">
+                  Environment
+                </Label>
+                <div className="text-base">
+                  {linker.environment ? (
+                    <Badge>
+                      {linker.environment}
+                    </Badge>
+                  ) : (
+                    '-'
+                  )}
+                </div>
+              </div>
+              
+              <div>
+                <Label className="mb-1 block text-sm text-gray-500 font-medium">
+                  Default Method
+                </Label>
+                <p className="text-base">
+                  {linker.defaultMethodName || 'default'}
+                </p>
+              </div>
+              
+              <div>
+                <Label className="mb-1 block text-sm text-gray-500 font-medium">
+                  Version
+                </Label>
+                <p className="text-base">
+                  v{linker.version}
+                </p>
+              </div>
+              
+              <div>
+                <Label className="mb-1 block text-sm text-gray-500 font-medium">
+                  Last Updated
+                </Label>
+                <p className="text-base">
+                  {formatDate(linker.updatedAt)}
+                </p>
+              </div>
+
+              <div>
+                <Label className="mb-1 block text-sm text-gray-500 font-medium">
+                  Datasources Count
+                </Label>
+                <p className="text-base">
+                  {linker.datasourceIds?.length || 0}
+                </p>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Configuration Tabs */}
+      <div className="space-y-4">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <TabsList className="grid grid-cols-2 mx-auto max-w-md w-full">
+            <TabsTrigger value="details">Datasources</TabsTrigger>
+            <TabsTrigger value="execution">Execution</TabsTrigger>
+          </TabsList>
+          <TabsContent value="details" className="pt-4">
+            <Card>
+              <CardContent className="pt-6">
+                {renderDatasourcesList()}
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="execution" className="pt-4">
+            <Card>
+              <CardContent className="pt-6">
+                {renderExecutionDetails()}
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </Page>
+  );
+}
diff --git a/src/pages/app/linker/LinkerEdit.jsx b/src/pages/app/linker/LinkerEdit.jsx
index c64b3261..0ae41473 100644
--- a/src/pages/app/linker/LinkerEdit.jsx
+++ b/src/pages/app/linker/LinkerEdit.jsx
@@ -21,39 +21,31 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
-import { ArrowLeft, Loader2, Save, Plus, Trash, Link as LinkIcon, Check } from 'lucide-react';
+import { ArrowLeft, Loader2, Save, LinkIcon, RefreshCw } from 'lucide-react';
 import { getAllDatasources } from '@/services/datasources';
-import { getLinkerById, updateLinker, testLinkerConnection } from '@/services/linkers';
+import { getLinkerById, updateLinker, executeLinker } from '@/services/linkers';
 
 export function LinkerEdit() {
   const navigate = useNavigate();
   const { id } = useParams();
   const [loading, setLoading] = useState(false);
   const [initialLoading, setInitialLoading] = useState(true);
-  const [testingConnection, setTestingConnection] = useState(false);
-  const [connectionStatus, setConnectionStatus] = useState(null);
+  const [executing, setExecuting] = useState(false);
   const [datasources, setDatasources] = useState([]);
-  const [activeTab, setActiveTab] = useState('general');
   const [formData, setFormData] = useState({
     name: '',
     description: '',
-    status: 'active',
-    datasources: [],
-    config: {
-      refreshInterval: 'daily',
-      notifyOnChange: true,
-      mappings: []
-    }
+    environment: 'dev',
+    datasourceIds: [],
+    defaultMethodName: 'default',
+    isActive: true
   });
   const [errors, setErrors] = useState({});
-  const [sourceDatasource, setSourceDatasource] = useState('');
-  const [targetDatasource, setTargetDatasource] = useState('');
-  const [mappingFields, setMappingFields] = useState([
-    { sourceField: '', targetField: '' }
-  ]);
+
+  // Store the linker for breadcrumbs
+  const [linker, setLinker] = useState(null);
 
   // Fetch datasources and linker data on component mount
   useEffect(() => {
@@ -67,21 +59,16 @@ export function LinkerEdit() {
           getLinkerById(id)
         ]);
         
-        setDatasources(datasourcesResponse.filter(ds => ds.status === 'active'));
+        setDatasources(datasourcesResponse.filter(ds => ds.isActive !== false));
+        setLinker(linkerResponse);
         setFormData({
           name: linkerResponse.name || '',
           description: linkerResponse.description || '',
-          status: linkerResponse.status || 'active',
-          datasources: linkerResponse.datasources || [],
-          config: linkerResponse.config || {
-            refreshInterval: 'daily',
-            notifyOnChange: true,
-            mappings: []
-          }
+          environment: linkerResponse.environment || 'dev',
+          datasourceIds: linkerResponse.datasourceIds || [],
+          defaultMethodName: linkerResponse.defaultMethodName || 'default',
+          isActive: linkerResponse.isActive !== undefined ? linkerResponse.isActive : true
         });
-        
-        // Set initial connection status
-        setConnectionStatus(linkerResponse.status === 'active' ? 'success' : null);
       } catch (err) {
         toast.error('Failed to load linker data');
         console.error('Error loading data:', err);
@@ -101,7 +88,6 @@ export function LinkerEdit() {
       [name]: value
     });
     
-    // Clear error for this field
     if (errors[name]) {
       setErrors({
         ...errors,
@@ -110,188 +96,51 @@ export function LinkerEdit() {
     }
   };
 
-  const handleConfigChange = (field, value) => {
-    setFormData({
-      ...formData,
-      config: {
-        ...formData.config,
-        [field]: value
-      }
-    });
-    
-    // Clear error for this field
-    if (errors[`config.${field}`]) {
-      setErrors({
-        ...errors,
-        [`config.${field}`]: ''
-      });
-    }
-  };
-
   const handleDatasourceToggle = (datasourceId) => {
-    const currentDatasources = [...formData.datasources];
+    const currentDatasources = [...formData.datasourceIds];
     
     if (currentDatasources.includes(datasourceId)) {
-      // Remove datasource
       setFormData({
         ...formData,
-        datasources: currentDatasources.filter(id => id !== datasourceId)
+        datasourceIds: currentDatasources.filter(id => id !== datasourceId)
       });
-      
-      // Remove any mappings involving this datasource
-      const updatedMappings = formData.config.mappings.filter(mapping => 
-        mapping.source !== getDatasourceTypeById(datasourceId) && 
-        mapping.target !== getDatasourceTypeById(datasourceId)
-      );
-      
-      setFormData(prev => ({
-        ...prev,
-        config: {
-          ...prev.config,
-          mappings: updatedMappings
-        }
-      }));
     } else {
-      // Add datasource
       setFormData({
         ...formData,
-        datasources: [...currentDatasources, datasourceId]
+        datasourceIds: [...currentDatasources, datasourceId]
       });
     }
     
-    if (errors.datasources) {
+    if (errors.datasourceIds) {
       setErrors({
         ...errors,
-        datasources: ''
+        datasourceIds: ''
       });
     }
   };
 
-  const getDatasourceTypeById = (id) => {
-    const datasource = datasources.find(ds => ds.id === id);
-    return datasource ? datasource.type : null;
-  };
-
-  const getDatasourceById = (id) => {
-    return datasources.find(ds => ds.id === id) || null;
-  };
-
-  const handleAddMapping = () => {
-    if (!sourceDatasource || !targetDatasource) {
-      toast.error('Please select both source and target datasources');
-      return;
-    }
-    
-    if (sourceDatasource === targetDatasource) {
-      toast.error('Source and target datasources must be different');
-      return;
-    }
-    
-    // Check if this mapping already exists
-    const existingMapping = formData.config.mappings.find(
-      mapping => mapping.source === getDatasourceTypeById(sourceDatasource) && 
-                mapping.target === getDatasourceTypeById(targetDatasource)
-    );
-    
-    if (existingMapping) {
-      toast.error('This mapping already exists');
-      return;
-    }
-    
-    if (mappingFields.some(field => !field.sourceField || !field.targetField)) {
-      toast.error('Please fill in all mapping fields');
-      return;
-    }
-    
-    const newMapping = {
-      source: getDatasourceTypeById(sourceDatasource),
-      target: getDatasourceTypeById(targetDatasource),
-      fieldMappings: [...mappingFields]
-    };
-    
-    setFormData({
-      ...formData,
-      config: {
-        ...formData.config,
-        mappings: [...formData.config.mappings, newMapping]
-      }
-    });
-    
-    // Reset the form for next mapping
-    setSourceDatasource('');
-    setTargetDatasource('');
-    setMappingFields([{ sourceField: '', targetField: '' }]);
-  };
-
-  const handleRemoveMapping = (index) => {
-    const updatedMappings = [...formData.config.mappings];
-    updatedMappings.splice(index, 1);
-    
-    setFormData({
-      ...formData,
-      config: {
-        ...formData.config,
-        mappings: updatedMappings
-      }
-    });
-  };
-
-  const handleAddMappingField = () => {
-    setMappingFields([...mappingFields, { sourceField: '', targetField: '' }]);
-  };
-
-  const handleRemoveMappingField = (index) => {
-    const updatedFields = [...mappingFields];
-    updatedFields.splice(index, 1);
-    setMappingFields(updatedFields);
-  };
-
-  const handleMappingFieldChange = (index, field, value) => {
-    const updatedFields = [...mappingFields];
-    updatedFields[index][field] = value;
-    setMappingFields(updatedFields);
-  };
-
   const validateForm = () => {
     const newErrors = {};
     
-    if (!formData.name.trim()) {
-      newErrors.name = 'Name is required';
-    }
-    
-    if (!formData.description.trim()) {
-      newErrors.description = 'Description is required';
-    }
-    
-    if (formData.datasources.length < 2) {
-      newErrors.datasources = 'At least two datasources must be selected';
-    }
-    
-    if (formData.config.mappings.length === 0) {
-      newErrors.mappings = 'At least one mapping must be defined';
+    if (formData.datasourceIds.length < 1) {
+      newErrors.datasourceIds = 'At least one datasource must be selected';
     }
     
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
 
-  const handleTestConnection = async () => {
-    if (!validateForm()) {
-      toast.error('Please fix the errors before testing');
-      return;
-    }
-    
+  const handleExecute = async () => {
     try {
-      setTestingConnection(true);
-      await testLinkerConnection(formData);
-      setConnectionStatus('success');
-      toast.success('Linker configuration is valid');
+      setExecuting(true);
+      const result = await executeLinker(id, { forceRefresh: true });
+      toast.success('Linker executed successfully');
+      console.log('Execution result:', result);
     } catch (err) {
-      setConnectionStatus('error');
-      toast.error('Linker configuration test failed');
-      console.error('Error testing linker:', err);
+      toast.error(err.message || 'Failed to execute linker');
+      console.error('Error executing linker:', err);
     } finally {
-      setTestingConnection(false);
+      setExecuting(false);
     }
   };
 
@@ -299,37 +148,41 @@ export function LinkerEdit() {
     e.preventDefault();
     
     if (!validateForm()) {
-      toast.error('Please fix the errors before submitting');
+      toast.error('Please select at least one datasource');
       return;
     }
     
     try {
       setLoading(true);
-      await updateLinker(id, formData);
+      // Ensure datasourceConfigs is always included (required field)
+      const updatePayload = {
+        ...formData,
+        datasourceConfigs: formData.datasourceConfigs || {}
+      };
+      await updateLinker(id, updatePayload);
       toast.success('Linker updated successfully');
       navigate('/app/linkers');
     } catch (err) {
-      toast.error('Failed to update linker');
+      toast.error(err.message || 'Failed to update linker');
       console.error('Error updating linker:', err);
     } finally {
       setLoading(false);
     }
   };
 
-  // Mostrar spinner mientras carga los datos iniciales
   if (initialLoading) {
     return (
       <Page name="Edit Linker" className="h-full w-full">
-        <div className="h-64 flex items-center justify-center">
-          <Loader2 className="h-8 w-8 animate-spin" />
-          <span className="ml-2">Loading linker data...</span>
+        <div className="flex h-64 items-center justify-center">
+          <Loader2 className="mr-2 h-8 w-8 animate-spin" />
+          <span>Loading linker data...</span>
         </div>
       </Page>
     );
   }
 
   return (
-    <Page name="Edit Linker" className="h-full w-full">
+    <Page name="Edit Linker" className="h-full w-full" linker={linker}>
       <div className="mx-auto max-w-4xl">
         <div className="mb-6 flex items-center">
           <Button
@@ -347,38 +200,33 @@ export function LinkerEdit() {
           <CardHeader>
             <CardTitle>Edit Linker</CardTitle>
             <CardDescription>
-              Update linker configuration and mappings
+              Update the configuration for this linker
             </CardDescription>
           </CardHeader>
           
           <form onSubmit={handleSubmit}>
             <CardContent>
-              <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
-                <TabsList className="grid grid-cols-3">
-                  <TabsTrigger value="general">General</TabsTrigger>
-                  <TabsTrigger value="datasources">Datasources</TabsTrigger>
-                  <TabsTrigger value="mappings">Mappings</TabsTrigger>
-                </TabsList>
-                
-                <TabsContent value="general" className="mt-4 space-y-4">
+              <div className="space-y-6">
+                {/* General Information */}
+                <div className="space-y-4">
+                  <h3 className="text-lg font-medium">General Information</h3>
+                  
                   <div>
                     <Label htmlFor="name" className="mb-1 block">
-                      Name <span className="text-red-500">*</span>
+                      Name (optional)
                     </Label>
                     <Input
                       id="name"
                       name="name"
                       value={formData.name}
                       onChange={handleInputChange}
-                      placeholder="Enter linker name"
-                      className={errors.name ? 'border-red-500' : ''}
+                      placeholder="Enter linker name (optional)"
                     />
-                    {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
                   </div>
                   
                   <div>
                     <Label htmlFor="description" className="mb-1 block">
-                      Description <span className="text-red-500">*</span>
+                      Description
                     </Label>
                     <Textarea
                       id="description"
@@ -386,321 +234,158 @@ export function LinkerEdit() {
                       value={formData.description}
                       onChange={handleInputChange}
                       placeholder="Enter linker description"
-                      className={errors.description ? 'border-red-500' : ''}
                       rows={3}
                     />
-                    {errors.description && <p className="mt-1 text-sm text-red-500">{errors.description}</p>}
                   </div>
                   
-                  <div>
-                    <Label htmlFor="status" className="mb-1 block">
-                      Status
-                    </Label>
-                    <Select
-                      value={formData.status}
-                      onValueChange={(value) => handleInputChange({ target: { name: 'status', value } })}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="active">Active</SelectItem>
-                        <SelectItem value="inactive">Inactive</SelectItem>
-                      </SelectContent>
-                    </Select>
+                  <div className="grid grid-cols-3 gap-4">
+                    <div>
+                      <Label htmlFor="environment" className="mb-1 block">
+                        Environment
+                      </Label>
+                      <Select
+                        value={formData.environment}
+                        onValueChange={(value) => setFormData({ ...formData, environment: value })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select environment" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="dev">Development</SelectItem>
+                          <SelectItem value="staging">Staging</SelectItem>
+                          <SelectItem value="production">Production</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    
+                    <div>
+                      <Label htmlFor="defaultMethodName" className="mb-1 block">
+                        Default Method
+                      </Label>
+                      <Select
+                        value={formData.defaultMethodName}
+                        onValueChange={(value) => setFormData({ ...formData, defaultMethodName: value })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select method" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="default">Default</SelectItem>
+                          <SelectItem value="getAll">Get All</SelectItem>
+                          <SelectItem value="getById">Get By ID</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    
+                    <div>
+                      <Label htmlFor="isActive" className="mb-1 block">
+                        Status
+                      </Label>
+                      <Select
+                        value={formData.isActive ? 'active' : 'inactive'}
+                        onValueChange={(value) => setFormData({ ...formData, isActive: value === 'active' })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="active">Active</SelectItem>
+                          <SelectItem value="inactive">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
                   </div>
-                  
-                  <div>
-                    <Label htmlFor="refreshInterval" className="mb-1 block">
-                      Refresh Interval
-                    </Label>
-                    <Select
-                      value={formData.config.refreshInterval}
-                      onValueChange={(value) => handleConfigChange('refreshInterval', value)}
+                </div>
+                
+                {/* Datasource Selection */}
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-lg font-medium">Select Datasources</h3>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={handleExecute}
+                      disabled={executing}
                     >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select refresh interval" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="hourly">Hourly</SelectItem>
-                        <SelectItem value="daily">Daily</SelectItem>
-                        <SelectItem value="weekly">Weekly</SelectItem>
-                        <SelectItem value="monthly">Monthly</SelectItem>
-                      </SelectContent>
-                    </Select>
+                      {executing ? (
+                        <>
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          Executing...
+                        </>
+                      ) : (
+                        <>
+                          <RefreshCw className="mr-2 h-4 w-4" />
+                          Execute Now
+                        </>
+                      )}
+                    </Button>
                   </div>
                   
-                  <div className="mt-4 flex items-center space-x-2">
-                    <Checkbox 
-                      id="notifyOnChange" 
-                      checked={formData.config.notifyOnChange}
-                      onCheckedChange={(checked) => handleConfigChange('notifyOnChange', checked)}
-                    />
-                    <Label htmlFor="notifyOnChange">Notify on changes</Label>
+                  {errors.datasourceIds && <p className="text-sm text-red-500">{errors.datasourceIds}</p>}
+                  
+                  <div className="border border-blue-200 rounded-md bg-blue-50 p-3">
+                    <p className="text-sm text-blue-700">
+                      <LinkIcon className="mr-1 inline-block h-4 w-4" />
+                      Changes will be applied on save. The linker will cache results for 14 days.
+                    </p>
                   </div>
-                </TabsContent>
-                
-                <TabsContent value="datasources" className="mt-4">
-                  <div>
-                    <h3 className="mb-4 text-lg font-medium">Select Datasources</h3>
-                    {errors.datasources && <p className="mb-2 text-sm text-red-500">{errors.datasources}</p>}
-                    
-                    {loading ? (
-                      <div className="h-32 flex items-center justify-center">
-                        <Loader2 className="mr-2 h-6 w-6 animate-spin" />
-                        <span>Loading datasources...</span>
-                      </div>
-                    ) : datasources.length === 0 ? (
-                      <div className="border rounded-md py-8 text-center">
-                        <p className="text-gray-500">No active datasources found.</p>
-                        <Button
-                          variant="link"
-                          onClick={() => navigate('/app/datasources/new')}
-                          className="mt-2"
+                  
+                  {datasources.length === 0 ? (
+                    <div className="border rounded-md py-8 text-center">
+                      <p className="text-gray-500">No active datasources found.</p>
+                      <Button
+                        variant="link"
+                        onClick={() => navigate('/app/datasources/new')}
+                        className="mt-2"
+                      >
+                        Create a datasource
+                      </Button>
+                    </div>
+                  ) : (
+                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                      {datasources.map((datasource) => (
+                        <div 
+                          key={datasource.id} 
+                          className={`border rounded-md p-4 cursor-pointer transition-colors ${
+                            formData.datasourceIds.includes(datasource.id) 
+                              ? 'border-blue-500 bg-blue-50' 
+                              : 'hover:border-gray-400'
+                          }`}
+                          onClick={() => handleDatasourceToggle(datasource.id)}
                         >
-                          Create a datasource
-                        </Button>
-                      </div>
-                    ) : (
-                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                        {datasources.map((datasource) => (
-                          <div 
-                            key={datasource.id} 
-                            className={`border rounded-md p-4 cursor-pointer transition-colors ${
-                              formData.datasources.includes(datasource.id) 
-                                ? 'border-blue-500 bg-blue-50' 
-                                : 'hover:border-gray-400'
-                            }`}
-                            onClick={() => handleDatasourceToggle(datasource.id)}
-                          >
-                            <div className="flex items-center justify-between">
-                              <div>
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              <div className="flex items-center">
                                 <h4 className="font-medium">{datasource.name}</h4>
-                                <p className="text-sm text-gray-600">{datasource.type}</p>
+                                {datasource.environment && (
+                                  <Badge variant="outline" className="ml-2 text-xs">
+                                    {datasource.environment}
+                                  </Badge>
+                                )}
                               </div>
-                              <Checkbox 
-                                checked={formData.datasources.includes(datasource.id)} 
-                                onCheckedChange={() => handleDatasourceToggle(datasource.id)}
-                                onClick={(e) => e.stopPropagation()}
-                              />
-                            </div>
-                            <p className="mt-2 truncate text-sm">{datasource.description}</p>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                </TabsContent>
-                
-                <TabsContent value="mappings" className="mt-4">
-                  <div>
-                    <h3 className="mb-4 text-lg font-medium">Configure Mappings</h3>
-                    {errors.mappings && <p className="mb-2 text-sm text-red-500">{errors.mappings}</p>}
-                    
-                    {formData.datasources.length < 2 ? (
-                      <div className="border rounded-md p-6 text-center">
-                        <p className="text-gray-500">Please select at least two datasources first.</p>
-                        <Button
-                          variant="link"
-                          onClick={() => setActiveTab('datasources')}
-                        >
-                          Go to Datasources
-                        </Button>
-                      </div>
-                    ) : (
-                      <>
-                        {/* Existing mappings */}
-                        {formData.config.mappings.length > 0 && (
-                          <div className="mb-6">
-                            <h4 className="mb-3 font-medium">Defined Mappings</h4>
-                            <div className="space-y-3">
-                              {formData.config.mappings.map((mapping, index) => (
-                                <div key={index} className="border rounded-md p-4">
-                                  <div className="flex items-start justify-between">
-                                    <div>
-                                      <div className="flex items-center">
-                                        <Badge className="mr-2">Source</Badge>
-                                        <span>{mapping.source}</span>
-                                      </div>
-                                      <div className="mt-1 flex items-center">
-                                        <Badge className="mr-2">Target</Badge>
-                                        <span>{mapping.target}</span>
-                                      </div>
-                                    </div>
-                                    <Button
-                                      variant="ghost"
-                                      size="sm"
-                                      onClick={() => handleRemoveMapping(index)}
-                                      className="text-red-500 hover:text-red-700"
-                                    >
-                                      <Trash className="h-4 w-4" />
-                                    </Button>
-                                  </div>
-                                  
-                                  <div className="mt-3">
-                                    <h5 className="mb-2 text-sm font-medium">Field Mappings</h5>
-                                    <div className="space-y-1">
-                                      {mapping.fieldMappings.map((field, fidx) => (
-                                        <div key={fidx} className="flex items-center text-sm">
-                                          <span className="text-gray-600">{field.sourceField}</span>
-                                          <span className="mx-2">→</span>
-                                          <span className="text-gray-600">{field.targetField}</span>
-                                        </div>
-                                      ))}
-                                    </div>
-                                  </div>
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-                        )}
-                        
-                        {/* New mapping form */}
-                        <div className="border rounded-md bg-gray-50 p-4">
-                          <h4 className="mb-4 font-medium">Add New Mapping</h4>
-                          
-                          <div className="grid grid-cols-1 mb-4 gap-4 md:grid-cols-2">
-                            <div>
-                              <Label className="mb-1 block">Source Datasource</Label>
-                              <Select
-                                value={sourceDatasource}
-                                onValueChange={setSourceDatasource}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue placeholder="Select source" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  {formData.datasources.map(id => {
-                                    const ds = getDatasourceById(id);
-                                    return ds ? (
-                                      <SelectItem key={id} value={id}>
-                                        {ds.name}
-                                      </SelectItem>
-                                    ) : null;
-                                  })}
-                                </SelectContent>
-                              </Select>
+                              <p className="text-sm text-gray-600">{datasource.definitionId}</p>
+                              {datasource.description && (
+                                <p className="mt-2 text-sm text-gray-500 line-clamp-2">{datasource.description}</p>
+                              )}
                             </div>
-                            
-                            <div>
-                              <Label className="mb-1 block">Target Datasource</Label>
-                              <Select
-                                value={targetDatasource}
-                                onValueChange={setTargetDatasource}
-                              >
-                                <SelectTrigger>
-                                  <SelectValue placeholder="Select target" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                  {formData.datasources.map(id => {
-                                    const ds = getDatasourceById(id);
-                                    return ds ? (
-                                      <SelectItem key={id} value={id}>
-                                        {ds.name}
-                                      </SelectItem>
-                                    ) : null;
-                                  })}
-                                </SelectContent>
-                              </Select>
-                            </div>
-                          </div>
-                          
-                          <div className="mb-4 space-y-3">
-                            <h5 className="text-sm font-medium">Field Mappings</h5>
-                            
-                            {mappingFields.map((field, index) => (
-                              <div key={index} className="flex items-center space-x-2">
-                                <Input
-                                  placeholder="Source field"
-                                  value={field.sourceField}
-                                  onChange={(e) => handleMappingFieldChange(index, 'sourceField', e.target.value)}
-                                  className="flex-1"
-                                />
-                                <span>→</span>
-                                <Input
-                                  placeholder="Target field"
-                                  value={field.targetField}
-                                  onChange={(e) => handleMappingFieldChange(index, 'targetField', e.target.value)}
-                                  className="flex-1"
-                                />
-                                <Button
-                                  type="button"
-                                  variant="ghost"
-                                  size="icon"
-                                  onClick={() => handleRemoveMappingField(index)}
-                                  disabled={mappingFields.length === 1}
-                                  className="text-red-500 hover:text-red-700"
-                                >
-                                  <Trash className="h-4 w-4" />
-                                </Button>
-                              </div>
-                            ))}
-                          </div>
-                          
-                          <div className="flex space-x-2">
-                            <Button
-                              type="button"
-                              variant="outline"
-                              size="sm"
-                              onClick={handleAddMappingField}
-                            >
-                              <Plus className="mr-1 h-4 w-4" /> Add Field
-                            </Button>
-                            
-                            <Button
-                              type="button"
-                              variant="secondary"
-                              size="sm"
-                              onClick={handleAddMapping}
-                              disabled={!sourceDatasource || !targetDatasource}
-                            >
-                              <LinkIcon className="mr-1 h-4 w-4" /> Add Mapping
-                            </Button>
+                            <Checkbox 
+                              checked={formData.datasourceIds.includes(datasource.id)} 
+                              onCheckedChange={() => handleDatasourceToggle(datasource.id)}
+                              onClick={(e) => e.stopPropagation()}
+                            />
                           </div>
                         </div>
-                      </>
-                    )}
-                  </div>
-                </TabsContent>
-              </Tabs>
-              
-              <div className="mt-6 border-t pt-6">
-                <Button
-                  type="button"
-                  onClick={handleTestConnection}
-                  disabled={testingConnection}
-                  className="w-full"
-                >
-                  {testingConnection ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Testing Configuration...
-                    </>
-                  ) : (
-                    <>
-                      {connectionStatus === 'success' ? (
-                        <Check className="mr-2 h-4 w-4" />
-                      ) : (
-                        <LinkIcon className="mr-2 h-4 w-4" />
-                      )}
-                      Test Configuration
-                    </>
+                      ))}
+                    </div>
                   )}
-                </Button>
-                
-                {connectionStatus === 'success' && (
-                  <div className="mt-3 flex items-center border border-green-200 rounded-md bg-green-50 p-3">
-                    <Check className="mr-2 h-5 w-5 text-green-500" />
-                    <p className="text-sm text-green-700">Configuration is valid. You can now save this linker.</p>
-                  </div>
-                )}
-                
-                {connectionStatus === 'error' && (
-                  <div className="mt-3 flex items-center border border-red-200 rounded-md bg-red-50 p-3">
-                    <Trash className="mr-2 h-5 w-5 text-red-500" />
-                    <p className="text-sm text-red-700">Configuration is invalid. Please check your settings and try again.</p>
-                  </div>
-                )}
+                  
+                  {formData.datasourceIds.length > 0 && (
+                    <div className="mt-3 text-sm text-gray-600">
+                      <strong>{formData.datasourceIds.length}</strong> datasource{formData.datasourceIds.length > 1 ? 's' : ''} selected
+                    </div>
+                  )}
+                </div>
               </div>
             </CardContent>
             
@@ -719,12 +404,12 @@ export function LinkerEdit() {
                 {loading ? (
                   <>
                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Saving...
+                    Updating...
                   </>
                 ) : (
                   <>
                     <Save className="mr-2 h-4 w-4" />
-                    Save Changes
+                    Update Linker
                   </>
                 )}
               </Button>
diff --git a/src/pages/app/linker/LinkerEdit_OLD.jsx b/src/pages/app/linker/LinkerEdit_OLD.jsx
new file mode 100644
index 00000000..c64b3261
--- /dev/null
+++ b/src/pages/app/linker/LinkerEdit_OLD.jsx
@@ -0,0 +1,737 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import Page from '@/components/basic-page.jsx';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import { ArrowLeft, Loader2, Save, Plus, Trash, Link as LinkIcon, Check } from 'lucide-react';
+import { getAllDatasources } from '@/services/datasources';
+import { getLinkerById, updateLinker, testLinkerConnection } from '@/services/linkers';
+
+export function LinkerEdit() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const [loading, setLoading] = useState(false);
+  const [initialLoading, setInitialLoading] = useState(true);
+  const [testingConnection, setTestingConnection] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState(null);
+  const [datasources, setDatasources] = useState([]);
+  const [activeTab, setActiveTab] = useState('general');
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    status: 'active',
+    datasources: [],
+    config: {
+      refreshInterval: 'daily',
+      notifyOnChange: true,
+      mappings: []
+    }
+  });
+  const [errors, setErrors] = useState({});
+  const [sourceDatasource, setSourceDatasource] = useState('');
+  const [targetDatasource, setTargetDatasource] = useState('');
+  const [mappingFields, setMappingFields] = useState([
+    { sourceField: '', targetField: '' }
+  ]);
+
+  // Fetch datasources and linker data on component mount
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setInitialLoading(true);
+        
+        // Load datasources and linker in parallel
+        const [datasourcesResponse, linkerResponse] = await Promise.all([
+          getAllDatasources(),
+          getLinkerById(id)
+        ]);
+        
+        setDatasources(datasourcesResponse.filter(ds => ds.status === 'active'));
+        setFormData({
+          name: linkerResponse.name || '',
+          description: linkerResponse.description || '',
+          status: linkerResponse.status || 'active',
+          datasources: linkerResponse.datasources || [],
+          config: linkerResponse.config || {
+            refreshInterval: 'daily',
+            notifyOnChange: true,
+            mappings: []
+          }
+        });
+        
+        // Set initial connection status
+        setConnectionStatus(linkerResponse.status === 'active' ? 'success' : null);
+      } catch (err) {
+        toast.error('Failed to load linker data');
+        console.error('Error loading data:', err);
+        navigate('/app/linkers');
+      } finally {
+        setInitialLoading(false);
+      }
+    }
+    
+    fetchData();
+  }, [id, navigate]);
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+    
+    // Clear error for this field
+    if (errors[name]) {
+      setErrors({
+        ...errors,
+        [name]: ''
+      });
+    }
+  };
+
+  const handleConfigChange = (field, value) => {
+    setFormData({
+      ...formData,
+      config: {
+        ...formData.config,
+        [field]: value
+      }
+    });
+    
+    // Clear error for this field
+    if (errors[`config.${field}`]) {
+      setErrors({
+        ...errors,
+        [`config.${field}`]: ''
+      });
+    }
+  };
+
+  const handleDatasourceToggle = (datasourceId) => {
+    const currentDatasources = [...formData.datasources];
+    
+    if (currentDatasources.includes(datasourceId)) {
+      // Remove datasource
+      setFormData({
+        ...formData,
+        datasources: currentDatasources.filter(id => id !== datasourceId)
+      });
+      
+      // Remove any mappings involving this datasource
+      const updatedMappings = formData.config.mappings.filter(mapping => 
+        mapping.source !== getDatasourceTypeById(datasourceId) && 
+        mapping.target !== getDatasourceTypeById(datasourceId)
+      );
+      
+      setFormData(prev => ({
+        ...prev,
+        config: {
+          ...prev.config,
+          mappings: updatedMappings
+        }
+      }));
+    } else {
+      // Add datasource
+      setFormData({
+        ...formData,
+        datasources: [...currentDatasources, datasourceId]
+      });
+    }
+    
+    if (errors.datasources) {
+      setErrors({
+        ...errors,
+        datasources: ''
+      });
+    }
+  };
+
+  const getDatasourceTypeById = (id) => {
+    const datasource = datasources.find(ds => ds.id === id);
+    return datasource ? datasource.type : null;
+  };
+
+  const getDatasourceById = (id) => {
+    return datasources.find(ds => ds.id === id) || null;
+  };
+
+  const handleAddMapping = () => {
+    if (!sourceDatasource || !targetDatasource) {
+      toast.error('Please select both source and target datasources');
+      return;
+    }
+    
+    if (sourceDatasource === targetDatasource) {
+      toast.error('Source and target datasources must be different');
+      return;
+    }
+    
+    // Check if this mapping already exists
+    const existingMapping = formData.config.mappings.find(
+      mapping => mapping.source === getDatasourceTypeById(sourceDatasource) && 
+                mapping.target === getDatasourceTypeById(targetDatasource)
+    );
+    
+    if (existingMapping) {
+      toast.error('This mapping already exists');
+      return;
+    }
+    
+    if (mappingFields.some(field => !field.sourceField || !field.targetField)) {
+      toast.error('Please fill in all mapping fields');
+      return;
+    }
+    
+    const newMapping = {
+      source: getDatasourceTypeById(sourceDatasource),
+      target: getDatasourceTypeById(targetDatasource),
+      fieldMappings: [...mappingFields]
+    };
+    
+    setFormData({
+      ...formData,
+      config: {
+        ...formData.config,
+        mappings: [...formData.config.mappings, newMapping]
+      }
+    });
+    
+    // Reset the form for next mapping
+    setSourceDatasource('');
+    setTargetDatasource('');
+    setMappingFields([{ sourceField: '', targetField: '' }]);
+  };
+
+  const handleRemoveMapping = (index) => {
+    const updatedMappings = [...formData.config.mappings];
+    updatedMappings.splice(index, 1);
+    
+    setFormData({
+      ...formData,
+      config: {
+        ...formData.config,
+        mappings: updatedMappings
+      }
+    });
+  };
+
+  const handleAddMappingField = () => {
+    setMappingFields([...mappingFields, { sourceField: '', targetField: '' }]);
+  };
+
+  const handleRemoveMappingField = (index) => {
+    const updatedFields = [...mappingFields];
+    updatedFields.splice(index, 1);
+    setMappingFields(updatedFields);
+  };
+
+  const handleMappingFieldChange = (index, field, value) => {
+    const updatedFields = [...mappingFields];
+    updatedFields[index][field] = value;
+    setMappingFields(updatedFields);
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+    
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+    }
+    
+    if (!formData.description.trim()) {
+      newErrors.description = 'Description is required';
+    }
+    
+    if (formData.datasources.length < 2) {
+      newErrors.datasources = 'At least two datasources must be selected';
+    }
+    
+    if (formData.config.mappings.length === 0) {
+      newErrors.mappings = 'At least one mapping must be defined';
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleTestConnection = async () => {
+    if (!validateForm()) {
+      toast.error('Please fix the errors before testing');
+      return;
+    }
+    
+    try {
+      setTestingConnection(true);
+      await testLinkerConnection(formData);
+      setConnectionStatus('success');
+      toast.success('Linker configuration is valid');
+    } catch (err) {
+      setConnectionStatus('error');
+      toast.error('Linker configuration test failed');
+      console.error('Error testing linker:', err);
+    } finally {
+      setTestingConnection(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      toast.error('Please fix the errors before submitting');
+      return;
+    }
+    
+    try {
+      setLoading(true);
+      await updateLinker(id, formData);
+      toast.success('Linker updated successfully');
+      navigate('/app/linkers');
+    } catch (err) {
+      toast.error('Failed to update linker');
+      console.error('Error updating linker:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Mostrar spinner mientras carga los datos iniciales
+  if (initialLoading) {
+    return (
+      <Page name="Edit Linker" className="h-full w-full">
+        <div className="h-64 flex items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin" />
+          <span className="ml-2">Loading linker data...</span>
+        </div>
+      </Page>
+    );
+  }
+
+  return (
+    <Page name="Edit Linker" className="h-full w-full">
+      <div className="mx-auto max-w-4xl">
+        <div className="mb-6 flex items-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate('/app/linkers')}
+            className="mr-4"
+          >
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Linkers
+          </Button>
+        </div>
+        
+        <Card>
+          <CardHeader>
+            <CardTitle>Edit Linker</CardTitle>
+            <CardDescription>
+              Update linker configuration and mappings
+            </CardDescription>
+          </CardHeader>
+          
+          <form onSubmit={handleSubmit}>
+            <CardContent>
+              <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
+                <TabsList className="grid grid-cols-3">
+                  <TabsTrigger value="general">General</TabsTrigger>
+                  <TabsTrigger value="datasources">Datasources</TabsTrigger>
+                  <TabsTrigger value="mappings">Mappings</TabsTrigger>
+                </TabsList>
+                
+                <TabsContent value="general" className="mt-4 space-y-4">
+                  <div>
+                    <Label htmlFor="name" className="mb-1 block">
+                      Name <span className="text-red-500">*</span>
+                    </Label>
+                    <Input
+                      id="name"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleInputChange}
+                      placeholder="Enter linker name"
+                      className={errors.name ? 'border-red-500' : ''}
+                    />
+                    {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
+                  </div>
+                  
+                  <div>
+                    <Label htmlFor="description" className="mb-1 block">
+                      Description <span className="text-red-500">*</span>
+                    </Label>
+                    <Textarea
+                      id="description"
+                      name="description"
+                      value={formData.description}
+                      onChange={handleInputChange}
+                      placeholder="Enter linker description"
+                      className={errors.description ? 'border-red-500' : ''}
+                      rows={3}
+                    />
+                    {errors.description && <p className="mt-1 text-sm text-red-500">{errors.description}</p>}
+                  </div>
+                  
+                  <div>
+                    <Label htmlFor="status" className="mb-1 block">
+                      Status
+                    </Label>
+                    <Select
+                      value={formData.status}
+                      onValueChange={(value) => handleInputChange({ target: { name: 'status', value } })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="active">Active</SelectItem>
+                        <SelectItem value="inactive">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div>
+                    <Label htmlFor="refreshInterval" className="mb-1 block">
+                      Refresh Interval
+                    </Label>
+                    <Select
+                      value={formData.config.refreshInterval}
+                      onValueChange={(value) => handleConfigChange('refreshInterval', value)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select refresh interval" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="hourly">Hourly</SelectItem>
+                        <SelectItem value="daily">Daily</SelectItem>
+                        <SelectItem value="weekly">Weekly</SelectItem>
+                        <SelectItem value="monthly">Monthly</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div className="mt-4 flex items-center space-x-2">
+                    <Checkbox 
+                      id="notifyOnChange" 
+                      checked={formData.config.notifyOnChange}
+                      onCheckedChange={(checked) => handleConfigChange('notifyOnChange', checked)}
+                    />
+                    <Label htmlFor="notifyOnChange">Notify on changes</Label>
+                  </div>
+                </TabsContent>
+                
+                <TabsContent value="datasources" className="mt-4">
+                  <div>
+                    <h3 className="mb-4 text-lg font-medium">Select Datasources</h3>
+                    {errors.datasources && <p className="mb-2 text-sm text-red-500">{errors.datasources}</p>}
+                    
+                    {loading ? (
+                      <div className="h-32 flex items-center justify-center">
+                        <Loader2 className="mr-2 h-6 w-6 animate-spin" />
+                        <span>Loading datasources...</span>
+                      </div>
+                    ) : datasources.length === 0 ? (
+                      <div className="border rounded-md py-8 text-center">
+                        <p className="text-gray-500">No active datasources found.</p>
+                        <Button
+                          variant="link"
+                          onClick={() => navigate('/app/datasources/new')}
+                          className="mt-2"
+                        >
+                          Create a datasource
+                        </Button>
+                      </div>
+                    ) : (
+                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        {datasources.map((datasource) => (
+                          <div 
+                            key={datasource.id} 
+                            className={`border rounded-md p-4 cursor-pointer transition-colors ${
+                              formData.datasources.includes(datasource.id) 
+                                ? 'border-blue-500 bg-blue-50' 
+                                : 'hover:border-gray-400'
+                            }`}
+                            onClick={() => handleDatasourceToggle(datasource.id)}
+                          >
+                            <div className="flex items-center justify-between">
+                              <div>
+                                <h4 className="font-medium">{datasource.name}</h4>
+                                <p className="text-sm text-gray-600">{datasource.type}</p>
+                              </div>
+                              <Checkbox 
+                                checked={formData.datasources.includes(datasource.id)} 
+                                onCheckedChange={() => handleDatasourceToggle(datasource.id)}
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                            </div>
+                            <p className="mt-2 truncate text-sm">{datasource.description}</p>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </TabsContent>
+                
+                <TabsContent value="mappings" className="mt-4">
+                  <div>
+                    <h3 className="mb-4 text-lg font-medium">Configure Mappings</h3>
+                    {errors.mappings && <p className="mb-2 text-sm text-red-500">{errors.mappings}</p>}
+                    
+                    {formData.datasources.length < 2 ? (
+                      <div className="border rounded-md p-6 text-center">
+                        <p className="text-gray-500">Please select at least two datasources first.</p>
+                        <Button
+                          variant="link"
+                          onClick={() => setActiveTab('datasources')}
+                        >
+                          Go to Datasources
+                        </Button>
+                      </div>
+                    ) : (
+                      <>
+                        {/* Existing mappings */}
+                        {formData.config.mappings.length > 0 && (
+                          <div className="mb-6">
+                            <h4 className="mb-3 font-medium">Defined Mappings</h4>
+                            <div className="space-y-3">
+                              {formData.config.mappings.map((mapping, index) => (
+                                <div key={index} className="border rounded-md p-4">
+                                  <div className="flex items-start justify-between">
+                                    <div>
+                                      <div className="flex items-center">
+                                        <Badge className="mr-2">Source</Badge>
+                                        <span>{mapping.source}</span>
+                                      </div>
+                                      <div className="mt-1 flex items-center">
+                                        <Badge className="mr-2">Target</Badge>
+                                        <span>{mapping.target}</span>
+                                      </div>
+                                    </div>
+                                    <Button
+                                      variant="ghost"
+                                      size="sm"
+                                      onClick={() => handleRemoveMapping(index)}
+                                      className="text-red-500 hover:text-red-700"
+                                    >
+                                      <Trash className="h-4 w-4" />
+                                    </Button>
+                                  </div>
+                                  
+                                  <div className="mt-3">
+                                    <h5 className="mb-2 text-sm font-medium">Field Mappings</h5>
+                                    <div className="space-y-1">
+                                      {mapping.fieldMappings.map((field, fidx) => (
+                                        <div key={fidx} className="flex items-center text-sm">
+                                          <span className="text-gray-600">{field.sourceField}</span>
+                                          <span className="mx-2">→</span>
+                                          <span className="text-gray-600">{field.targetField}</span>
+                                        </div>
+                                      ))}
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                        
+                        {/* New mapping form */}
+                        <div className="border rounded-md bg-gray-50 p-4">
+                          <h4 className="mb-4 font-medium">Add New Mapping</h4>
+                          
+                          <div className="grid grid-cols-1 mb-4 gap-4 md:grid-cols-2">
+                            <div>
+                              <Label className="mb-1 block">Source Datasource</Label>
+                              <Select
+                                value={sourceDatasource}
+                                onValueChange={setSourceDatasource}
+                              >
+                                <SelectTrigger>
+                                  <SelectValue placeholder="Select source" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {formData.datasources.map(id => {
+                                    const ds = getDatasourceById(id);
+                                    return ds ? (
+                                      <SelectItem key={id} value={id}>
+                                        {ds.name}
+                                      </SelectItem>
+                                    ) : null;
+                                  })}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            
+                            <div>
+                              <Label className="mb-1 block">Target Datasource</Label>
+                              <Select
+                                value={targetDatasource}
+                                onValueChange={setTargetDatasource}
+                              >
+                                <SelectTrigger>
+                                  <SelectValue placeholder="Select target" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {formData.datasources.map(id => {
+                                    const ds = getDatasourceById(id);
+                                    return ds ? (
+                                      <SelectItem key={id} value={id}>
+                                        {ds.name}
+                                      </SelectItem>
+                                    ) : null;
+                                  })}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                          </div>
+                          
+                          <div className="mb-4 space-y-3">
+                            <h5 className="text-sm font-medium">Field Mappings</h5>
+                            
+                            {mappingFields.map((field, index) => (
+                              <div key={index} className="flex items-center space-x-2">
+                                <Input
+                                  placeholder="Source field"
+                                  value={field.sourceField}
+                                  onChange={(e) => handleMappingFieldChange(index, 'sourceField', e.target.value)}
+                                  className="flex-1"
+                                />
+                                <span>→</span>
+                                <Input
+                                  placeholder="Target field"
+                                  value={field.targetField}
+                                  onChange={(e) => handleMappingFieldChange(index, 'targetField', e.target.value)}
+                                  className="flex-1"
+                                />
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="icon"
+                                  onClick={() => handleRemoveMappingField(index)}
+                                  disabled={mappingFields.length === 1}
+                                  className="text-red-500 hover:text-red-700"
+                                >
+                                  <Trash className="h-4 w-4" />
+                                </Button>
+                              </div>
+                            ))}
+                          </div>
+                          
+                          <div className="flex space-x-2">
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              onClick={handleAddMappingField}
+                            >
+                              <Plus className="mr-1 h-4 w-4" /> Add Field
+                            </Button>
+                            
+                            <Button
+                              type="button"
+                              variant="secondary"
+                              size="sm"
+                              onClick={handleAddMapping}
+                              disabled={!sourceDatasource || !targetDatasource}
+                            >
+                              <LinkIcon className="mr-1 h-4 w-4" /> Add Mapping
+                            </Button>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </TabsContent>
+              </Tabs>
+              
+              <div className="mt-6 border-t pt-6">
+                <Button
+                  type="button"
+                  onClick={handleTestConnection}
+                  disabled={testingConnection}
+                  className="w-full"
+                >
+                  {testingConnection ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Testing Configuration...
+                    </>
+                  ) : (
+                    <>
+                      {connectionStatus === 'success' ? (
+                        <Check className="mr-2 h-4 w-4" />
+                      ) : (
+                        <LinkIcon className="mr-2 h-4 w-4" />
+                      )}
+                      Test Configuration
+                    </>
+                  )}
+                </Button>
+                
+                {connectionStatus === 'success' && (
+                  <div className="mt-3 flex items-center border border-green-200 rounded-md bg-green-50 p-3">
+                    <Check className="mr-2 h-5 w-5 text-green-500" />
+                    <p className="text-sm text-green-700">Configuration is valid. You can now save this linker.</p>
+                  </div>
+                )}
+                
+                {connectionStatus === 'error' && (
+                  <div className="mt-3 flex items-center border border-red-200 rounded-md bg-red-50 p-3">
+                    <Trash className="mr-2 h-5 w-5 text-red-500" />
+                    <p className="text-sm text-red-700">Configuration is invalid. Please check your settings and try again.</p>
+                  </div>
+                )}
+              </div>
+            </CardContent>
+            
+            <CardFooter className="flex justify-between">
+              <Button 
+                variant="outline" 
+                type="button"
+                onClick={() => navigate('/app/linkers')}
+              >
+                Cancel
+              </Button>
+              <Button 
+                type="submit"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Saving...
+                  </>
+                ) : (
+                  <>
+                    <Save className="mr-2 h-4 w-4" />
+                    Save Changes
+                  </>
+                )}
+              </Button>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </Page>
+  );
+}
diff --git a/src/pages/app/linker/Linkers.jsx b/src/pages/app/linker/Linkers.jsx
index 650c6f2d..31bbfb2e 100644
--- a/src/pages/app/linker/Linkers.jsx
+++ b/src/pages/app/linker/Linkers.jsx
@@ -36,6 +36,7 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { useAuth } from '@/hooks/use-auth';
+import { useStorage } from '@/hooks/use-storage';
 
 const columnHelper = createColumnHelper();
 
@@ -47,6 +48,16 @@ export function Linkers() {
   const [linkerToDelete, setLinkerToDelete] = useState(null);
   const [globalFilter, setGlobalFilter] = useState('');
   const [rowSelection, setRowSelection] = useState({});
+  const [columnVisibility, setColumnVisibility] = useStorage('linkers-column-visibility', {
+    defaultValue: {
+      description: false,
+      environment: false,
+      executionStatus: false,
+      cacheStatus: false,
+      version: false,
+      updatedAt: false,
+    },
+  });
   const navigate = useNavigate();
   const { userData } = useAuth();
 
@@ -78,6 +89,10 @@ export function Linkers() {
     navigate('/app/linkers/new');
   }, [navigate]);
 
+  const handleView = useCallback((linker) => {
+    navigate(`/app/linkers/${linker.id}`);
+  }, [navigate]);
+
   const handleEdit = useCallback((linker) => {
     navigate(`/app/linkers/${linker.id}/edit`);
   }, [navigate]);
@@ -148,30 +163,55 @@ export function Linkers() {
     return (
       <div className="flex flex-wrap gap-1">
         {datasourceIds.slice(0, 2).map(id => (
-          <Badge key={id} variant="outline" className="whitespace-nowrap">
+          <Badge key={id} variant="outline" className="whitespace-nowrap text-xs">
             {getDatasourceName(id)}
           </Badge>
         ))}
         {datasourceIds.length > 2 && (
-          <Badge variant="outline" className="whitespace-nowrap">
+          <Badge variant="outline" className="whitespace-nowrap text-xs">
             +{datasourceIds.length - 2} more
           </Badge>
         )}
       </div>
     );
   };
-
-  const getStatusBadge = (status) => {
+  
+  const getExecutionStatusBadge = (status) => {
+    switch (status) {
+    case 'success':
+      return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Success</Badge>;
+    case 'failure':
+      return <Badge variant="destructive">Failed</Badge>;
+    case 'pending':
+      return <Badge variant="outline" className="bg-yellow-100 text-yellow-800">Pending</Badge>;
+    case 'not_executed':
+    default:
+      return <Badge variant="outline" className="bg-gray-100 text-gray-800">Not Executed</Badge>;
+    }
+  };
+  
+  const getCacheStatusBadge = (status) => {
     switch (status) {
-    case 'active':
-      return <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Active</Badge>;
-    case 'inactive':
-      return <Badge variant="outline" className="bg-gray-100 text-gray-800 hover:bg-gray-100">Inactive</Badge>;
+    case 'fresh':
+      return <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100">Fresh</Badge>;
+    case 'stale':
+      return <Badge variant="outline" className="bg-orange-100 text-orange-800">Stale</Badge>;
+    case 'expired':
+      return <Badge variant="outline" className="bg-red-100 text-red-800">Expired</Badge>;
+    case 'none':
     default:
-      return <Badge variant="outline">{status}</Badge>;
+      return <Badge variant="outline" className="bg-gray-100 text-gray-800">No Cache</Badge>;
     }
   };
 
+  const getStatusBadge = (isActive) => {
+    return isActive ? (
+      <Badge className="bg-green-100 text-green-800 hover:bg-green-100">Active</Badge>
+    ) : (
+      <Badge variant="outline" className="bg-gray-100 text-gray-800 hover:bg-gray-100">Inactive</Badge>
+    );
+  };
+
   const columns = useMemo(
     () => [
       {
@@ -197,33 +237,74 @@ export function Linkers() {
       },
       columnHelper.accessor('name', {
         header: 'Name',
-        cell: (info) => info.getValue(),
+        cell: (info) => info.getValue() || <span className="text-gray-400 italic">Unnamed Linker</span>,
       }),
       columnHelper.accessor('description', {
         header: 'Description',
-        cell: (info) => info.getValue() || 'No description',
+        cell: (info) => info.getValue() || '-',
+        enableHiding: true,
       }),
-      columnHelper.accessor('datasources', {
+      columnHelper.accessor('datasourceIds', {
         header: 'Datasources',
         cell: (info) => renderDatasourcesList(info.getValue()),
+        enableHiding: true,
+      }),
+      columnHelper.accessor('environment', {
+        header: 'Environment',
+        cell: (info) => {
+          const env = info.getValue();
+          if (!env) return '-';
+          const envColors = {
+            production: 'bg-red-100 text-red-800',
+            staging: 'bg-yellow-100 text-yellow-800',
+            dev: 'bg-blue-100 text-blue-800'
+          };
+          return <Badge className={envColors[env] || 'bg-gray-100 text-gray-800'}>{env}</Badge>;
+        },
+        enableHiding: true,
       }),
-      columnHelper.accessor('status', {
+      columnHelper.accessor('isActive', {
         header: 'Status',
         cell: (info) => getStatusBadge(info.getValue()),
+        enableHiding: true,
       }),
-      columnHelper.accessor('config.refreshInterval', {
-        header: 'Refresh Interval',
-        cell: (info) => info.getValue() || '-',
+      columnHelper.accessor('executionStatus', {
+        header: 'Execution',
+        cell: (info) => getExecutionStatusBadge(info.getValue()),
+        enableHiding: true,
+      }),
+      columnHelper.accessor('cacheStatus', {
+        header: 'Cache',
+        cell: (info) => getCacheStatusBadge(info.getValue()),
+        enableHiding: true,
+      }),
+      columnHelper.accessor('version', {
+        header: 'Version',
+        cell: (info) => `v${info.getValue()}`,
+        enableHiding: true,
       }),
       columnHelper.accessor('updatedAt', {
         header: 'Last Updated',
         cell: (info) => formatDate(info.getValue()),
+        enableHiding: true,
       }),
       {
         id: 'actions',
         cell: ({ row }) => {
           const linker = row.original;
-          return userData.authority === 'USER' ? null : (
+          return userData.authority === 'USER' ? (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleView(linker);
+              }}
+            >
+              <LinkIcon className="h-4 w-4" />
+              <span className="ml-2">View</span>
+            </Button>
+          ) : (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" className="h-8 w-8 p-0">
@@ -259,9 +340,11 @@ export function Linkers() {
     state: {
       globalFilter,
       rowSelection,
+      columnVisibility,
     },
     onGlobalFilterChange: setGlobalFilter,
     onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: setColumnVisibility,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
@@ -334,7 +417,7 @@ export function Linkers() {
         </div>
       )}
       
-      <div className="mt-4 border rounded-md">
+      <div className="mt-4 border rounded-md overflow-x-auto">
         <Table>
           <TableHeader className="bg-gray-50">
             {table.getHeaderGroups().map((headerGroup) => (
@@ -361,7 +444,7 @@ export function Linkers() {
             
             {!loading && table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => (
-                <TableRow className="cursor-pointer text-left hover:bg-gray-50" key={row.id} data-state={row.getIsSelected() && 'selected'} onClick={() => userData.authority !== 'USER' && handleEdit(row.original)}>
+                <TableRow className="cursor-pointer text-left hover:bg-gray-50" key={row.id} data-state={row.getIsSelected() && 'selected'} onClick={() => handleView(row.original)}>
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id} onClick={(e) => cell.column.id === 'select' && e.stopPropagation()}>
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/src/services/datasources.js b/src/services/datasources.js
index 84f0b34e..6e55fa14 100644
--- a/src/services/datasources.js
+++ b/src/services/datasources.js
@@ -1,86 +1,111 @@
-import { mockDatasources, datasourceTypes } from './mockData';
+import { apiClient } from '@/api/apiClient';
 
-// Simulate API delay
-const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+const BASE_PATH = '/databinder/ds';
 
+/**
+ * Get all datasources for the authenticated user
+ * @returns {Promise<Array>} Array of datasources (without config field for security)
+ */
 export async function getAllDatasources() {
-  await delay(800);
-  return [...mockDatasources];
+  return apiClient.get(BASE_PATH);
 }
 
+/**
+ * Get a specific datasource by ID with full configuration
+ * @param {string} id - Datasource ID
+ * @returns {Promise<Object>} Datasource object with full config
+ */
 export async function getDatasourceById(id) {
-  await delay(500);
-  const datasource = mockDatasources.find(ds => ds.id === id);
-  if (!datasource) {
-    throw new Error(`Datasource with id ${id} not found`);
-  }
-  return { ...datasource };
+  return apiClient.get(`${BASE_PATH}/${id}`);
 }
 
+/**
+ * Create a new datasource
+ * @param {Object} datasourceData - Datasource configuration
+ * @param {string} datasourceData.name - Name of the datasource
+ * @param {string} datasourceData.definitionId - Type of datasource (rest-api, microsoft-graph, owncloud)
+ * @param {Object} datasourceData.config - Configuration object specific to the datasource type
+ * @param {string} [datasourceData.description] - Optional description
+ * @param {string} [datasourceData.environment] - Environment (dev, staging, production)
+ * @returns {Promise<Object>} Created datasource object
+ */
 export async function createDatasource(datasourceData) {
-  await delay(1000);
-  const newDatasource = {
-    id: Math.random().toString(36).substr(2, 9),
-    createdAt: new Date().toISOString(),
-    updatedAt: new Date().toISOString(),
-    status: 'active',
-    connectionStatus: 'connected',
-    lastSyncTime: new Date().toISOString(),
-    ...datasourceData
-  };
-  
-  mockDatasources.push(newDatasource);
-  return { ...newDatasource };
+  return apiClient.post(BASE_PATH, datasourceData);
 }
 
+/**
+ * Update an existing datasource
+ * @param {string} id - Datasource ID
+ * @param {Object} datasourceData - Partial datasource data to update
+ * @returns {Promise<Object>} Updated datasource object
+ */
 export async function updateDatasource(id, datasourceData) {
-  await delay(800);
-  const index = mockDatasources.findIndex(ds => ds.id === id);
-  if (index === -1) {
-    throw new Error(`Datasource with id ${id} not found`);
-  }
-  
-  const updatedDatasource = {
-    ...mockDatasources[index],
-    ...datasourceData,
-    updatedAt: new Date().toISOString()
-  };
-  
-  mockDatasources[index] = updatedDatasource;
-  return { ...updatedDatasource };
+  return apiClient.patch(`${BASE_PATH}/${id}`, datasourceData);
 }
 
+/**
+ * Delete a datasource
+ * @param {string} id - Datasource ID
+ * @returns {Promise<void>}
+ */
 export async function deleteDatasource(id) {
-  await delay(600);
-  const index = mockDatasources.findIndex(ds => ds.id === id);
-  if (index === -1) {
-    throw new Error(`Datasource with id ${id} not found`);
-  }
-  
-  mockDatasources.splice(index, 1);
-  return { success: true };
+  return apiClient.delete(`${BASE_PATH}/${id}`);
 }
 
+/**
+ * Get available datasource type definitions
+ * @returns {Promise<Array>} Array of datasource type definitions
+ */
 export async function getDatasourceTypes() {
-  await delay(500);
-  return [...datasourceTypes];
+  return apiClient.get('/databinder/definitions/available');
 }
 
-export async function testDatasourceConnection(datasourceConfig) {
-  await delay(1500);
-  // Simulate random success/failure for demo purposes
-  const success = Math.random() > 0.2;
-  
-  if (success) {
-    return { 
-      status: 'connected',
-      message: 'Connection successful',
-      details: {
-        connectionTime: new Date().toISOString(),
-        apiVersion: '1.0'
-      }
-    };
-  } else {
-    throw new Error('Connection failed. Please check your credentials and try again.');
-  }
+/**
+ * Test datasource connection
+ * @param {string} id - Datasource ID
+ * @returns {Promise<Object>} Test result with status, message, and details
+ */
+export async function testDatasourceConnection(id) {
+  return apiClient.post(`${BASE_PATH}/${id}/test`);
+}
+
+/**
+ * Get available methods for a datasource
+ * @param {string} id - Datasource ID
+ * @returns {Promise<Object>} Available methods for the datasource
+ */
+export async function getDatasourceMethods(id) {
+  return apiClient.get(`${BASE_PATH}/${id}/methods`);
+}
+
+/**
+ * Get details of a specific method from a datasource
+ * @param {string} id - Datasource ID
+ * @param {string} methodName - Method name to get details for
+ * @returns {Promise<Object>} Method information including parameters and description
+ */
+export async function getDatasourceMethodDetails(id, methodName) {
+  return apiClient.get(`${BASE_PATH}/${id}/methods/${methodName}`);
+}
+
+/**
+ * Get details of all available methods for a datasource
+ * @param {string} id - Datasource ID
+ * @returns {Promise<Object>} All methods information with parameters and descriptions
+ */
+export async function getAllDatasourceMethods(id) {
+  return apiClient.get(`${BASE_PATH}/${id}/methods/all`);
+}
+
+/**
+ * Fetch data from a datasource using a specific method
+ * @param {string} id - Datasource ID
+ * @param {Object} fetchParams - Fetch parameters
+ * @param {string} [fetchParams.methodName] - Optional method to execute (defaults to 'default')
+ * @param {Object} [fetchParams.params] - Method parameters
+ * @param {Object} [fetchParams.propertyMapping] - Optional property mapping for transformation
+ * @returns {Promise<Object>} Fetched data with metadata
+ */
+export async function fetchDatasourceData(id, fetchParams) {
+  return apiClient.post(`${BASE_PATH}/${id}/fetch`, fetchParams);
 }
diff --git a/src/services/linkers.js b/src/services/linkers.js
index b0fddefb..2cff8e7a 100644
--- a/src/services/linkers.js
+++ b/src/services/linkers.js
@@ -1,73 +1,86 @@
-import { mockLinkers } from './mockData';
+import { apiClient } from '@/api/apiClient';
 
-// Simulate API delay
-const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+const BASE_PATH = '/databinder/linker';
 
+/**
+ * Get all linkers for the authenticated user
+ * @returns {Promise<Array>} Array of linkers
+ */
 export async function getAllLinkers() {
-  await delay(800);
-  return [...mockLinkers];
+  return apiClient.get(BASE_PATH);
 }
 
+/**
+ * Get a specific linker by ID
+ * @param {string} id - Linker ID
+ * @returns {Promise<Object>} Linker object with full configuration
+ */
 export async function getLinkerById(id) {
-  await delay(500);
-  const linker = mockLinkers.find(l => l.id === id);
-  if (!linker) {
-    throw new Error(`Linker with id ${id} not found`);
-  }
-  return { ...linker };
+  return apiClient.get(`${BASE_PATH}/${id}`);
 }
 
+/**
+ * Create a new linker
+ * @param {Object} linkerData - Linker configuration
+ * @param {string} [linkerData.name] - Optional name for the linker
+ * @param {Array<string>} linkerData.datasourceIds - Array of datasource IDs to link
+ * @param {Object} linkerData.datasourceConfigs - Per-datasource configurations (REQUIRED, can be empty object {})
+ * @param {string} [linkerData.defaultMethodName] - Default method to use ('default', 'getAll', etc.)
+ * @param {string} [linkerData.description] - Optional description
+ * @param {string} [linkerData.environment] - Environment (dev, staging, production)
+ * @returns {Promise<Object>} Created linker object (auto-executes and caches results)
+ */
 export async function createLinker(linkerData) {
-  await delay(1000);
-  const newLinker = {
-    id: Math.random().toString(36).substr(2, 9),
-    createdAt: new Date().toISOString(),
-    updatedAt: new Date().toISOString(),
-    status: 'active',
-    ...linkerData
-  };
-  
-  mockLinkers.push(newLinker);
-  return { ...newLinker };
+  return apiClient.post(BASE_PATH, linkerData);
 }
 
+/**
+ * Update an existing linker
+ * @param {string} id - Linker ID
+ * @param {Object} linkerData - Partial linker data to update
+ * @returns {Promise<Object>} Updated linker object
+ */
 export async function updateLinker(id, linkerData) {
-  await delay(800);
-  const index = mockLinkers.findIndex(l => l.id === id);
-  if (index === -1) {
-    throw new Error(`Linker with id ${id} not found`);
-  }
-  
-  const updatedLinker = {
-    ...mockLinkers[index],
-    ...linkerData,
-    updatedAt: new Date().toISOString()
-  };
-  
-  mockLinkers[index] = updatedLinker;
-  return { ...updatedLinker };
+  return apiClient.patch(`${BASE_PATH}/${id}`, linkerData);
 }
 
+/**
+ * Delete a linker
+ * @param {string} id - Linker ID
+ * @returns {Promise<void>}
+ */
 export async function deleteLinker(id) {
-  await delay(600);
-  const index = mockLinkers.findIndex(l => l.id === id);
-  if (index === -1) {
-    throw new Error(`Linker with id ${id} not found`);
-  }
-  
-  mockLinkers.splice(index, 1);
-  return { success: true };
+  return apiClient.delete(`${BASE_PATH}/${id}`);
 }
 
-export async function testLinkerConnection(linkerData) {
-  await delay(1500);
-  // Simulate success for demo purposes
-  return { 
-    status: 'valid',
-    message: 'Linker configuration is valid',
-    details: {
-      validatedAt: new Date().toISOString(),
-      datasourcesConnected: linkerData.datasources.length
-    }
-  };
+/**
+ * Execute a linker to fetch aggregated data from all linked datasources
+ * Uses intelligent caching with 14-day TTL and 1-hour staleness threshold
+ * @param {string} id - Linker ID
+ * @param {Object} [options] - Execution options
+ * @param {boolean} [options.forceRefresh] - Force cache refresh
+ * @param {string} [options.methodName] - Override method name for specific datasources at runtime
+ * @param {Object} [options.*] - Additional datasource-specific options
+ * @returns {Promise<Object>} Aggregated data from all datasources with cache metadata
+ */
+export async function executeLinker(id, options = {}) {
+  return apiClient.post(`${BASE_PATH}/${id}/execute`, options);
+}
+
+/**
+ * Get linker cache status
+ * @param {string} id - Linker ID
+ * @returns {Promise<Object>} Cache status and metadata
+ */
+export async function getLinkerCacheStatus(id) {
+  return apiClient.get(`${BASE_PATH}/${id}/cache/status`);
+}
+
+/**
+ * Clear linker cache
+ * @param {string} id - Linker ID
+ * @returns {Promise<Object>} Cache clear confirmation
+ */
+export async function clearLinkerCache(id) {
+  return apiClient.delete(`${BASE_PATH}/${id}/cache`);
 }
diff --git a/src/utils/datasourceResponseDTO.js b/src/utils/datasourceResponseDTO.js
new file mode 100644
index 00000000..9db91a75
--- /dev/null
+++ b/src/utils/datasourceResponseDTO.js
@@ -0,0 +1,41 @@
+/**
+ * Data Transfer Object (DTO) for datasource responses
+ * Removes sensitive and irrelevant information from datasource API responses
+ */
+
+/**
+ * Transforms a datasource response to only include relevant public information
+ * Removes: datasourceId, callInfo, metadata, telemetryContext, logMetadata
+ * Keeps: message, datasourceName, methodUsed, result
+ * 
+ * @param {Object} response - The raw datasource response
+ * @returns {Object} The cleaned response with only public information
+ */
+export function cleanDatasourceResponse(response) {
+  if (!response || typeof response !== 'object') {
+    return response;
+  }
+
+  // Extract only the relevant fields
+  const cleanedResponse = {
+    ...(response.message && { message: response.message }),
+    ...(response.datasourceName && { datasourceName: response.datasourceName }),
+    ...(response.methodUsed && { methodUsed: response.methodUsed }),
+    ...(response.result !== undefined && { result: response.result }),
+  };
+
+  return cleanedResponse;
+}
+
+/**
+ * Transforms multiple datasource responses
+ * @param {Array} responses - Array of raw datasource responses
+ * @returns {Array} Array of cleaned responses
+ */
+export function cleanDatasourceResponses(responses) {
+  if (!Array.isArray(responses)) {
+    return responses;
+  }
+
+  return responses.map(response => cleanDatasourceResponse(response));
+}
diff --git a/src/utils/linkerDraftStorage.js b/src/utils/linkerDraftStorage.js
new file mode 100644
index 00000000..39e34050
--- /dev/null
+++ b/src/utils/linkerDraftStorage.js
@@ -0,0 +1,185 @@
+// Linker draft storage utilities for localStorage
+// These work independently from catalog draft storage
+
+const LINKER_DRAFT_PREFIX = 'linker_draft_';
+const LINKER_INFO_KEY = `${LINKER_DRAFT_PREFIX}info`;
+const LINKER_DATASOURCES_KEY = `${LINKER_DRAFT_PREFIX}datasources`;
+const LINKER_MAPPING_KEY = `${LINKER_DRAFT_PREFIX}mapping`;
+
+// ============= Linker Info Storage =============
+
+/**
+ * Save linker info to localStorage
+ * @param {Object} info - Linker information (name, description, environment)
+ */
+export function saveLinkerInfo(info) {
+  try {
+    localStorage.setItem(LINKER_INFO_KEY, JSON.stringify(info));
+  } catch (error) {
+    console.error('Error saving linker info to localStorage:', error);
+  }
+}
+
+/**
+ * Get linker info from localStorage
+ * @returns {Object|null} Linker info or null if not found
+ */
+export function getLinkerInfo() {
+  try {
+    const data = localStorage.getItem(LINKER_INFO_KEY);
+    return data ? JSON.parse(data) : null;
+  } catch (error) {
+    console.error('Error reading linker info from localStorage:', error);
+    return null;
+  }
+}
+
+/**
+ * Clear linker info from localStorage
+ */
+export function clearLinkerInfo() {
+  try {
+    localStorage.removeItem(LINKER_INFO_KEY);
+  } catch (error) {
+    console.error('Error clearing linker info from localStorage:', error);
+  }
+}
+
+// ============= Datasources Storage =============
+
+/**
+ * Save datasources configuration to localStorage
+ * @param {Array} datasources - Array of datasource configurations
+ */
+export function saveLinkerDatasources(datasources) {
+  try {
+    localStorage.setItem(LINKER_DATASOURCES_KEY, JSON.stringify(datasources));
+  } catch (error) {
+    console.error('Error saving linker datasources to localStorage:', error);
+  }
+}
+
+/**
+ * Get datasources configuration from localStorage
+ * @returns {Array} Array of datasource configurations
+ */
+export function getLinkerDatasources() {
+  try {
+    const data = localStorage.getItem(LINKER_DATASOURCES_KEY);
+    return data ? JSON.parse(data) : [];
+  } catch (error) {
+    console.error('Error reading linker datasources from localStorage:', error);
+    return [];
+  }
+}
+
+/**
+ * Add a datasource to the linker draft
+ * @param {Object} datasource - Datasource configuration
+ */
+export function addLinkerDatasource(datasource) {
+  try {
+    const datasources = getLinkerDatasources();
+    datasources.push(datasource);
+    saveLinkerDatasources(datasources);
+  } catch (error) {
+    console.error('Error adding datasource to linker draft:', error);
+  }
+}
+
+/**
+ * Remove a datasource from the linker draft
+ * @param {number} index - Index of datasource to remove
+ */
+export function removeLinkerDatasource(index) {
+  try {
+    const datasources = getLinkerDatasources();
+    datasources.splice(index, 1);
+    saveLinkerDatasources(datasources);
+  } catch (error) {
+    console.error('Error removing datasource from linker draft:', error);
+  }
+}
+
+/**
+ * Clear all datasources from localStorage
+ */
+export function clearLinkerDatasources() {
+  try {
+    localStorage.removeItem(LINKER_DATASOURCES_KEY);
+  } catch (error) {
+    console.error('Error clearing linker datasources from localStorage:', error);
+  }
+}
+
+// ============= Mapping Storage =============
+
+/**
+ * Save mapping configuration to localStorage
+ * @param {Object} mapping - Mapping configuration
+ */
+export function saveLinkerMapping(mapping) {
+  try {
+    localStorage.setItem(LINKER_MAPPING_KEY, JSON.stringify(mapping));
+  } catch (error) {
+    console.error('Error saving linker mapping to localStorage:', error);
+  }
+}
+
+/**
+ * Get mapping configuration from localStorage
+ * @returns {Object|null} Mapping configuration or null
+ */
+export function getLinkerMapping() {
+  try {
+    const data = localStorage.getItem(LINKER_MAPPING_KEY);
+    return data ? JSON.parse(data) : null;
+  } catch (error) {
+    console.error('Error reading linker mapping from localStorage:', error);
+    return null;
+  }
+}
+
+/**
+ * Clear mapping from localStorage
+ */
+export function clearLinkerMapping() {
+  try {
+    localStorage.removeItem(LINKER_MAPPING_KEY);
+  } catch (error) {
+    console.error('Error clearing linker mapping from localStorage:', error);
+  }
+}
+
+// ============= General Functions =============
+
+/**
+ * Check if there's any linker draft data
+ * @returns {boolean} True if draft data exists
+ */
+export function hasLinkerDraft() {
+  const info = getLinkerInfo();
+  const datasources = getLinkerDatasources();
+  return (info !== null) || (datasources.length > 0);
+}
+
+/**
+ * Clear all linker draft data
+ */
+export function clearLinkerDraft() {
+  clearLinkerInfo();
+  clearLinkerDatasources();
+  clearLinkerMapping();
+}
+
+/**
+ * Get complete linker draft data
+ * @returns {Object} Complete draft data
+ */
+export function getLinkerDraft() {
+  return {
+    info: getLinkerInfo(),
+    datasources: getLinkerDatasources(),
+    mapping: getLinkerMapping(),
+  };
+}