reafctor: pages for management and split components

components/admin/teams/team-form-dialog.tsx

@@ -0,0 +1,96 @@
+"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 {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface TeamFormData {
+  name: string;
+  direction: string;
+}
+
+interface TeamFormDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+  title: string;
+  formData: TeamFormData;
+  onFormDataChange: (data: TeamFormData) => void;
+  directions: string[];
+  isSubmitting?: boolean;
+}
+
+export function TeamFormDialog({
+  isOpen,
+  onClose,
+  onSubmit,
+  title,
+  formData,
+  onFormDataChange,
+  directions,
+  isSubmitting = false,
+}: TeamFormDialogProps) {
+  const handleInputChange = (field: keyof TeamFormData, 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="team-name">Nom de l'équipe *</Label>
+            <Input
+              id="team-name"
+              value={formData.name}
+              onChange={(e) => handleInputChange("name", e.target.value)}
+              placeholder="Ex: Équipe Frontend, Équipe Backend"
+            />
+          </div>
+          <div>
+            <Label htmlFor="team-direction">Direction *</Label>
+            <Select
+              value={formData.direction}
+              onValueChange={(value) => handleInputChange("direction", value)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Sélectionner une direction" />
+              </SelectTrigger>
+              <SelectContent>
+                {directions.map((direction) => (
+                  <SelectItem key={direction} value={direction}>
+                    {direction}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </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>
+  );
+}