reafctor: pages for management and split components

2025-08-23 08:16:09 +02:00
parent 97d274190d
commit 2e195ca5cf
29 changed files with 1968 additions and 1607 deletions
--- a/components/admin/skills/skill-form-dialog.tsx
+++ b/components/admin/skills/skill-form-dialog.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { SkillCategory } from "@/lib/types";
+
+interface SkillFormData {
+  name: string;
+  categoryId: string;
+  description: string;
+  icon: string;
+}
+
+interface SkillFormDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+  title: string;
+  formData: SkillFormData;
+  onFormDataChange: (data: SkillFormData) => void;
+  skillCategories: SkillCategory[];
+  isSubmitting?: boolean;
+}
+
+export function SkillFormDialog({
+  isOpen,
+  onClose,
+  onSubmit,
+  title,
+  formData,
+  onFormDataChange,
+  skillCategories,
+  isSubmitting = false,
+}: SkillFormDialogProps) {
+  const handleInputChange = (field: keyof SkillFormData, value: string) => {
+    onFormDataChange({ ...formData, [field]: value });
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="skill-name">Nom de la skill *</Label>
+            <Input
+              id="skill-name"
+              value={formData.name}
+              onChange={(e) => handleInputChange("name", e.target.value)}
+              placeholder="Ex: React, Node.js, PostgreSQL"
+            />
+          </div>
+          <div>
+            <Label htmlFor="skill-category">Catégorie *</Label>
+            <Select
+              value={formData.categoryId}
+              onValueChange={(value) => handleInputChange("categoryId", value)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionner une catégorie" />
+              </SelectTrigger>
+              <SelectContent>
+                {skillCategories.map((category, index) => (
+                  <SelectItem key={index} value={index.toString()}>
+                    {category.category}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label htmlFor="skill-description">Description</Label>
+            <Textarea
+              id="skill-description"
+              value={formData.description}
+              onChange={(e) => handleInputChange("description", e.target.value)}
+              placeholder="Description de la skill..."
+              rows={3}
+            />
+          </div>
+          <div>
+            <Label htmlFor="skill-icon">Icône</Label>
+            <Input
+              id="skill-icon"
+              value={formData.icon}
+              onChange={(e) => handleInputChange("icon", e.target.value)}
+              placeholder="Ex: react, nodejs, postgresql"
+            />
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <Button variant="outline" onClick={onClose} disabled={isSubmitting}>
+              Annuler
+            </Button>
+            <Button onClick={onSubmit} disabled={isSubmitting}>
+              {isSubmitting
+                ? "En cours..."
+                : title.includes("Créer")
+                ? "Créer"
+                : "Mettre à jour"}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}