Improve the frontend modals

frontend/src/components/ui/QualityPromptDialog/QualityPromptDialog.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { ClipboardCheck, X } from 'lucide-react';
+import { Modal } from '../Modal';
+import { Button } from '../Button';
+
+interface QualityPromptDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfigureNow: () => void;
+  onConfigureLater: () => void;
+  recipeName: string;
+}
+
+/**
+ * QualityPromptDialog - Prompts user to configure quality checks after creating a recipe
+ */
+export const QualityPromptDialog: React.FC<QualityPromptDialogProps> = ({
+  isOpen,
+  onClose,
+  onConfigureNow,
+  onConfigureLater,
+  recipeName
+}) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Configurar Control de Calidad"
+      size="md"
+    >
+      <div className="space-y-4">
+        <div className="flex items-start gap-4">
+          <div className="flex-shrink-0">
+            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
+              <ClipboardCheck className="w-6 h-6 text-blue-600" />
+            </div>
+          </div>
+          <div className="flex-1">
+            <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
+              ¡Receta creada exitosamente!
+            </h3>
+            <p className="text-[var(--text-secondary)] mb-4">
+              La receta <strong>{recipeName}</strong> ha sido creada.
+              Para asegurar la calidad durante la producción, te recomendamos configurar
+              los controles de calidad ahora.
+            </p>
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+              <h4 className="text-sm font-medium text-blue-900 mb-1">
+                ¿Qué son los controles de calidad?
+              </h4>
+              <p className="text-sm text-blue-700">
+                Definir qué verificaciones se deben realizar en cada etapa del proceso de producción
+                (mezclado, fermentación, horneado, etc.) utilizando plantillas de control de calidad
+                reutilizables.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex gap-3 pt-4 border-t border-[var(--border-primary)]">
+          <Button
+            variant="outline"
+            onClick={onConfigureLater}
+            className="flex-1"
+          >
+            Más Tarde
+          </Button>
+          <Button
+            variant="primary"
+            onClick={onConfigureNow}
+            className="flex-1"
+          >
+            Configurar Ahora
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default QualityPromptDialog;

frontend/src/components/ui/QualityPromptDialog/index.ts

@@ -0,0 +1,2 @@
+export { QualityPromptDialog } from './QualityPromptDialog';
+export type { } from './QualityPromptDialog';