feat: botones Cambiar Estado y Asignar funcionales + departamento al crear ticket

frontend/src/app/(app)/tickets/new/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import { createTicket } from "@/lib/api";
+import { createTicket, getGroups, type Group } from "@/lib/api";
 import Link from "next/link";
 
 export default function NewTicketPage() {
@@ -13,13 +13,23 @@ export default function NewTicketPage() {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [priority, setPriority] = useState("Medium");
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [groupId, setGroupId] = useState("");
+
+  useEffect(() => {
+    getGroups().then(setGroups).catch(() => []);
+  }, []);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
+    if (!groupId) {
+      setError("Debes seleccionar un departamento");
+      return;
+    }
     setLoading(true);
     try {
-      const result = await createTicket({ title, description, priority });
+      const result = await createTicket({ title, description, priority, groupId: Number(groupId) });
       router.push(`/tickets/${result.id}`);
     } catch (err: any) {
       setError(err.message || "Error al crear el ticket");
@@ -76,19 +86,37 @@ export default function NewTicketPage() {
                   ></textarea>
                 </div>
 
-                <div className="mb-4">
-                  <label className="form-label fw-semibold">Prioridad</label>
-                  <select
-                    className="form-select"
-                    style={{ maxWidth: "200px" }}
-                    value={priority}
-                    onChange={(e) => setPriority(e.target.value)}
-                  >
-                    <option value="Low">Baja</option>
-                    <option value="Medium">Media</option>
-                    <option value="High">Alta</option>
-                    <option value="Critical">Crítica</option>
-                  </select>
+                <div className="row">
+                  <div className="col-md-6 mb-4">
+                    <label className="form-label fw-semibold">Departamento</label>
+                    <select
+                      className="form-select"
+                      value={groupId}
+                      onChange={(e) => setGroupId(e.target.value)}
+                      required
+                    >
+                      <option value="">Seleccionar departamento...</option>
+                      {groups.map((g) => (
+                        <option key={g.id} value={g.id}>
+                          {g.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="col-md-6 mb-4">
+                    <label className="form-label fw-semibold">Prioridad</label>
+                    <select
+                      className="form-select"
+                      value={priority}
+                      onChange={(e) => setPriority(e.target.value)}
+                    >
+                      <option value="Low">Baja</option>
+                      <option value="Medium">Media</option>
+                      <option value="High">Alta</option>
+                      <option value="Critical">Crítica</option>
+                    </select>
+                  </div>
                 </div>
 
                 <div className="d-flex gap-2">