feat: improve UI design of DelegationDetailPanel and add Spanish i18n support

Author: beyondnetPeru

src/apps/ums.web-app/src/presentation/identity/delegation/components/DelegationDetailPanel.tsx

@@ -4,6 +4,9 @@ import { Delegation } from '@domain/identity/models/delegation.model';
 import { DetailPanelShell, DetailTab } from '@shared/components/DetailPanelShell';
 import { DelegationProfileCard } from './DelegationProfileCard';
 import { useI18n } from '@app/i18n/use-i18n';
+import { KeyValueRow } from '@shared/components/KeyValueRow';
+import { CodeBadge } from '@shared/components/CodeBadge';
+import { Calendar, AlertCircle } from 'lucide-react';
 
 export type DelegationConsoleTab = 'overview' | 'permissions';
 
@@ -44,8 +47,8 @@ export const DelegationDetailPanel: React.FC<DelegationDetailPanelProps> = ({
   };
 
   const labels: Record<DelegationConsoleTab, string> = {
-    overview: 'Overview',
-    permissions: 'Permissions',
+    overview: t.overview ?? 'Resumen',
+    permissions: t.permissions ?? 'Permisos',
   };
 
   const tabs: DetailTab<DelegationConsoleTab>[] = consoleTabs.map((tab) => ({
@@ -73,21 +76,36 @@ export const DelegationDetailPanel: React.FC<DelegationDetailPanelProps> = ({
       }
     >
       {activeConsoleTab === 'overview' && activeDelegation && (
-        <div className="p-4 text-sm text-m3-on-surface-variant">
-          <p><strong>Valid From:</strong> {formatDate(activeDelegation.validFrom)}</p>
-          <p><strong>Valid Until:</strong> {formatDate(activeDelegation.validUntil)}</p>
-          <p><strong>Requires Approval:</strong> {activeDelegation.requiresApproval ? 'Yes' : 'No'}</p>
+        <div className="p-5 flex flex-col gap-3">
+          <KeyValueRow
+            icon={<Calendar className="w-3.5 h-3.5" />}
+            label={t.validFrom ?? 'Válido desde'}
+            value={formatDate(activeDelegation.validFrom)}
+          />
+          <KeyValueRow
+            icon={<Calendar className="w-3.5 h-3.5" />}
+            label={t.validUntil ?? 'Válido hasta'}
+            value={formatDate(activeDelegation.validUntil)}
+          />
+          <KeyValueRow
+            icon={<AlertCircle className="w-3.5 h-3.5" />}
+            label={t.requiresApproval ?? 'Requiere Aprobación'}
+            value={activeDelegation.requiresApproval ? (t.yes ?? 'Sí') : (t.no ?? 'No')}
+            bordered={false}
+          />
         </div>
       )}
 
       {activeConsoleTab === 'permissions' && activeDelegation && (
-        <div className="p-4">
-          <h4 className="text-sm font-semibold mb-2 text-m3-on-surface">Allowed Actions</h4>
-          <ul className="list-disc list-inside text-sm text-m3-on-surface-variant">
+        <div className="p-5">
+          <h4 className="text-xs font-bold uppercase tracking-wider text-m3-secondary mb-3">
+            {t.allowedActions ?? 'Acciones Permitidas'}
+          </h4>
+          <div className="flex flex-wrap gap-2">
             {activeDelegation.allowedActions.map((action) => (
-              <li key={action}>{action}</li>
+              <CodeBadge key={action} code={action} />
             ))}
-          </ul>
+          </div>
         </div>
       )}
     </DetailPanelShell>