feat: implement create functionality for WapServers across server, sysadmin, and CLI layers

sysadmin-cli/src/api/sysadmin.ts

@@ -196,6 +196,21 @@ export type UpdateWapServerPayload = {
     active?: boolean;
 };
 
+export type CreateWapServerPayload = {
+    name: string;
+    ipv4: string;
+    port: number;
+    maxBots: number;
+    ipv6?: string;
+    description?: string;
+    active?: boolean;
+};
+
+export const createWapServer = async (data: CreateWapServerPayload): Promise<WapServer> => {
+    const res = await sysadminApi.post('/wap/create', data);
+    return res.data;
+};
+
 export const updateWapServer = async (data: UpdateWapServerPayload): Promise<WapServer> => {
     const res = await sysadminApi.post('/wap/update', data);
     return res.data;

sysadmin-cli/src/pages/WapServersPage.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
-import { Search, RotateCcw, CheckCircle, XCircle, Server, ServerOff, ClipboardList, Calculator, X, MoreVertical, Play, Pause, Power, Trash2, Unlink, QrCode, RotateCw, Edit3 } from 'lucide-react';
-import { auditWapServer, deleteWapBot, deleteWapServer, detachWapOrganizationServer, fetchWapServers, getWapBotQr, recalculateWapServerCount, restartWapBot, startWapBot, stopWapBot, updateWapServer, type WapContainerDto, type WapServerAuditResult, type WapServerQrResult, type WapServerRecalculateCountResult } from '../api/sysadmin';
+import { Search, RotateCcw, CheckCircle, XCircle, Server, ServerOff, ClipboardList, Calculator, X, MoreVertical, Play, Pause, Power, Trash2, Unlink, QrCode, RotateCw, Edit3, Plus } from 'lucide-react';
+import { auditWapServer, createWapServer, deleteWapBot, deleteWapServer, detachWapOrganizationServer, fetchWapServers, getWapBotQr, recalculateWapServerCount, restartWapBot, startWapBot, stopWapBot, updateWapServer, type WapContainerDto, type WapServerAuditResult, type WapServerQrResult, type WapServerRecalculateCountResult } from '../api/sysadmin';
 
 const getErrorMessage = (error: unknown, fallback: string): string => {
   const responseData = (error as any)?.response?.data;
@@ -30,6 +30,7 @@ export const WapServersPage = () => {
   const [openActionsServerId, setOpenActionsServerId] = useState<string | null>(null);
   const [openAuditActionKey, setOpenAuditActionKey] = useState<string | null>(null);
   const [editingServer, setEditingServer] = useState<any | null>(null);
+  const [serverFormMode, setServerFormMode] = useState<'create' | 'edit'>('edit');
   const [editForm, setEditForm] = useState({ name: '', ipv4: '', port: '', maxBots: '', active: true });
 
   // Filters
@@ -103,6 +104,7 @@ export const WapServersPage = () => {
   };
 
   const openEditServer = (server: any) => {
+    setServerFormMode('edit');
     setEditingServer(server);
     setEditForm({
       name: server.name || '',
@@ -113,11 +115,17 @@ export const WapServersPage = () => {
     });
   };
 
+  const openCreateServer = () => {
+    setServerFormMode('create');
+    setEditingServer({});
+    setEditForm({ name: '', ipv4: '', port: '', maxBots: '', active: true });
+  };
+
   const handleSaveServer = async (event: React.FormEvent) => {
     event.preventDefault();
     if (!editingServer) return;
 
-    const serverId = getServerId(editingServer);
+    const serverId = serverFormMode === 'edit' ? getServerId(editingServer) : 'create';
     const port = Number(editForm.port);
     const maxBots = Number(editForm.maxBots);
 
@@ -128,15 +136,26 @@ export const WapServersPage = () => {
 
     setActionServerId(serverId);
     try {
-      await updateWapServer({
-        serverId,
-        name: editForm.name,
-        ipv4: editForm.ipv4,
-        port,
-        maxBots,
-        active: editForm.active,
-      });
-      setActionMessage('Servidor WAP actualizado.');
+      if (serverFormMode === 'create') {
+        await createWapServer({
+          name: editForm.name,
+          ipv4: editForm.ipv4,
+          port,
+          maxBots,
+          active: editForm.active,
+        });
+        setActionMessage('Servidor WAP creado.');
+      } else {
+        await updateWapServer({
+          serverId,
+          name: editForm.name,
+          ipv4: editForm.ipv4,
+          port,
+          maxBots,
+          active: editForm.active,
+        });
+        setActionMessage('Servidor WAP actualizado.');
+      }
       setEditingServer(null);
       await loadServers();
     } catch (e) {
@@ -282,6 +301,9 @@ export const WapServersPage = () => {
     <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="animate-fade-in users-page-container" style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem', flexShrink: 0 }}>
         <h1 style={{ fontSize: '2rem', fontWeight: '700' }}>Servidores WAP</h1>
+        <button type="button" className="btn-primary" onClick={openCreateServer} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <Plus size={18} /> Nuevo servidor
+        </button>
       </div>
 
       {/* Filters Bar */}
@@ -567,8 +589,8 @@ export const WapServersPage = () => {
           <form className="edit-server-modal glass-panel" onSubmit={handleSaveServer} onClick={(event) => event.stopPropagation()}>
             <div className="audit-modal-header">
               <div>
-                <h2>Editar servidor</h2>
-                <p>{editingServer.name || getServerId(editingServer)}</p>
+                <h2>{serverFormMode === 'create' ? 'Nuevo servidor' : 'Editar servidor'}</h2>
+                <p>{serverFormMode === 'create' ? 'Crear servidor WAP' : editingServer.name || getServerId(editingServer)}</p>
               </div>
               <button type="button" className="btn-secondary" onClick={() => setEditingServer(null)} aria-label="Cerrar edición">
                 <X size={18} />
@@ -602,7 +624,7 @@ export const WapServersPage = () => {
 
             <div className="edit-server-actions">
               <button type="button" className="btn-secondary" onClick={() => setEditingServer(null)}>Cancelar</button>
-              <button type="submit" className="btn-primary" disabled={actionServerId === getServerId(editingServer)}>Guardar cambios</button>
+              <button type="submit" className="btn-primary" disabled={actionServerId === (serverFormMode === 'create' ? 'create' : getServerId(editingServer))}>{serverFormMode === 'create' ? 'Crear servidor' : 'Guardar cambios'}</button>
             </div>
           </form>
         </div>