Improve the frontend and fix TODOs

frontend/src/components/domain/production/QualityTemplateManager.tsx

@@ -44,6 +44,8 @@ import {
 } from '../../../api/types/qualityTemplates';
 import { CreateQualityTemplateModal } from './CreateQualityTemplateModal';
 import { EditQualityTemplateModal } from './EditQualityTemplateModal';
+import { ViewQualityTemplateModal } from './ViewQualityTemplateModal';
+import { useTranslation } from 'react-i18next';
 
 interface QualityTemplateManagerProps {
   className?: string;
@@ -107,17 +109,28 @@ const PROCESS_STAGE_LABELS = {
 export const QualityTemplateManager: React.FC<QualityTemplateManagerProps> = ({
   className = ''
 }) => {
+  const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedCheckType, setSelectedCheckType] = useState<QualityCheckType | ''>('');
   const [selectedStage, setSelectedStage] = useState<ProcessStage | ''>('');
   const [showActiveOnly, setShowActiveOnly] = useState(true);
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showEditModal, setShowEditModal] = useState(false);
+  const [showViewModal, setShowViewModal] = useState(false);
   const [selectedTemplate, setSelectedTemplate] = useState<QualityCheckTemplate | null>(null);
 
   const currentTenant = useCurrentTenant();
   const tenantId = currentTenant?.id || '';
 
+  // Helper function to get translated category label
+  const getCategoryLabel = (category: string | null | undefined): string => {
+    if (!category) return t('production.quality.categories.appearance', 'Sin categoría');
+    const translationKey = `production.quality.categories.${category}`;
+    const translated = t(translationKey);
+    // If translation is same as key, it means no translation exists, return the original
+    return translated === translationKey ? category : translated;
+  };
+
   // API hooks
   const {
     data: templatesData,
@@ -344,7 +357,7 @@ export const QualityTemplateManager: React.FC<QualityTemplateManagerProps> = ({
               id={template.id}
               statusIndicator={statusConfig}
               title={template.name}
-              subtitle={template.category || 'Sin categoría'}
+              subtitle={getCategoryLabel(template.category)}
               primaryValue={template.weight}
               primaryValueLabel="peso"
               secondaryInfo={{
@@ -366,7 +379,7 @@ export const QualityTemplateManager: React.FC<QualityTemplateManagerProps> = ({
                   priority: 'primary',
                   onClick: () => {
                     setSelectedTemplate(template);
-                    // Could open a view modal here
+                    setShowViewModal(true);
                   }
                 },
                 {
@@ -387,25 +400,12 @@ export const QualityTemplateManager: React.FC<QualityTemplateManagerProps> = ({
                 {
                   label: 'Eliminar',
                   icon: Trash2,
-                  variant: 'danger',
+                  destructive: true,
                   priority: 'secondary',
                   onClick: () => handleDeleteTemplate(template.id)
                 }
               ]}
-            >
-              {/* Additional badges */}
-              <div className="flex flex-wrap gap-1 mt-2">
-                {template.is_active && (
-                  <Badge variant="success" size="sm">Activa</Badge>
-                )}
-                {template.is_required && (
-                  <Badge variant="warning" size="sm">Requerida</Badge>
-                )}
-                {template.is_critical && (
-                  <Badge variant="error" size="sm">Crítica</Badge>
-                )}
-              </div>
-            </StatusCard>
+            />
           );
         })}
       </div>
@@ -451,6 +451,22 @@ export const QualityTemplateManager: React.FC<QualityTemplateManagerProps> = ({
           isLoading={updateTemplateMutation.isPending}
         />
       )}
+
+      {/* View Template Modal */}
+      {selectedTemplate && (
+        <ViewQualityTemplateModal
+          isOpen={showViewModal}
+          onClose={() => {
+            setShowViewModal(false);
+            setSelectedTemplate(null);
+          }}
+          template={selectedTemplate}
+          onEdit={() => {
+            setShowViewModal(false);
+            setShowEditModal(true);
+          }}
+        />
+      )}
     </div>
   );
 };