feat: added databinder views

Author: alvarobernal2412

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 />} />

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 && (

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',

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,14 +45,16 @@ export function NewControlForm({ catalogId, onClose, onSuccess, customSubmit = n
       mashupId: '',
       params: {},
       scopes: {},
-      catalogId: catalogId
+      catalogId: catalogId,
+      linkerId: '', // Añadido linkerId
     }
   });
 
   const { watch, setValue, getValues } = form;
   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="Selecciona un 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">

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 || '',
@@ -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>

src/pages/app/ComputationDetails.jsx

@@ -25,39 +25,49 @@ 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: true, 
     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, 
     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: true, 
     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: true, 
+    result: true,
     from: '2025-01-01T01:00:00',
     to: '2025-01-01T01:59:59'
   },
+  { 
+    id: 'e5', 
+    key: 'guidelines_for_anomaly_reporting', 
+    value: true, 
+    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 +192,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 +205,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}
     >