DataScope26/WEB

1import { useState, useEffect } from "react";2import { Folder } from "lucide-react";3import { useAreaManagement } from "../hooks/useAreaManagement.jsx";4import ButtonPrimary from "./ButtonPrimary.jsx";5import ButtonSecondary from "./ButtonSecondary.jsx";6import ButtonAlert from "./ButtonAlert.jsx";7import "./AreaManagementCard.css";8 9export default function AreaManagementCard({ companyId }) {10  const {11    areas,12    loading,13    error,14    statusMessage,15    isCreating,16    isUpdating,17    isDeleting,18    fetchAreas,19    handleCreateArea,20    handleUpdateArea,21    handleDeleteArea,22    setStatusMessage,23    setError,24  } = useAreaManagement(companyId);25 26  const [newAreaName, setNewAreaName] = useState("");27  const [editingAreaId, setEditingAreaId] = useState(null);28  const [editingName, setEditingName] = useState("");29  const [showDeleteConfirm, setShowDeleteConfirm] = useState(null);30 31  useEffect(() => {32    if (companyId) {33      fetchAreas();34    }35  }, [companyId]);36 37  const handleCreateClick = async (e) => {38    e.preventDefault();39    if (!newAreaName.trim()) return;40 41    const created = await handleCreateArea(newAreaName);42    if (created) {43      setNewAreaName("");44    }45  };46 47  const handleStartEdit = (area) => {48    setEditingAreaId(area.id);49    setEditingName(area.name);50  };51 52  const handleSaveEdit = async () => {53    const result = await handleUpdateArea(editingAreaId, editingName);54    if (result) {55      setEditingAreaId(null);56      setEditingName("");57    }58  };59 60  const handleCancelEdit = () => {61    setEditingAreaId(null);62    setEditingName("");63  };64 65  const handleConfirmDelete = async (areaId) => {66    const result = await handleDeleteArea(areaId);67    if (result) {68      setShowDeleteConfirm(null);69    }70  };71 72  const handleClearMessages = () => {73    setStatusMessage(null);74    setError(null);75  };76 77  return (78    <section className="cs-card am-card"> 79      <div className="am-card-header">80        <div className="am-card-header-left">81          <span className="am-card-icon"><Folder size={18} /></span>82          <h2 className="am-card-title">Gestionar Áreas</h2>83        </div>84      </div>85 86      {/* Status Messages */}87      {statusMessage && (88        <div className="am-message am-message--success">89          {statusMessage}90          {/*<ButtonClose className="am-message-close" onClick={handleClearMessages} />*/}91        </div>92      )}93 94      {error && (95        <div className="am-message am-message--error">96          {error}97          {/*<ButtonClose className="am-message-close" onClick={handleClearMessages} />*/}98        </div>99      )}100 101      {/* Combined Form + List Content */}102      <div className="am-content">103        <form className="am-form" onSubmit={handleCreateClick}>104          <input105            type="text"106            placeholder="Nombre del área (ej: Desarrollo)"107            value={newAreaName}108            onChange={(e) => setNewAreaName(e.target.value)}109            maxLength={50}110            disabled={isCreating}111            className="am-input"112          />113          <ButtonPrimary114            type="submit"115            disabled={isCreating || !newAreaName.trim()}116            className="am-button--create"117          >118            {isCreating ? "Creando..." : "Crear Área"}119          </ButtonPrimary>120        </form>121 122        <div className="am-list-wrapper">123          {loading ? (124            <p className="am-loading">Cargando áreas...</p>125          ) : areas.length === 0 ? (126            <p className="am-empty">No hay áreas creadas aún.</p>127          ) : (128            <ul className="am-list">129              {areas.map((area) => (130                <li key={area.id} className="am-list-item">131                  {editingAreaId === area.id ? (132                    <div className="am-edit-form">133                      <input134                        type="text"135                        value={editingName}136                        onChange={(e) => setEditingName(e.target.value)}137                        maxLength={50}138                        disabled={isUpdating}139                        className="am-input am-input--small"140                        autoFocus141                      />142                      <div className="am-edit-actions">143                        <ButtonPrimary144                          type="button"145                          onClick={handleSaveEdit}146                          disabled={isUpdating || !editingName.trim()}147                          className="am-button--small"148                        >149                          {isUpdating ? "..." : "Guardar"}150                        </ButtonPrimary>151                        <ButtonSecondary152                          type="button"153                          onClick={handleCancelEdit}154                          disabled={isUpdating}155                          className="am-button--small"156                        >157                          Cancelar158                        </ButtonSecondary>159                      </div>160                    </div>161                  ) : (162                    <div className="am-item-content">163                      <span className="am-item-name">{area.name}</span>164                      <div className="am-item-actions">165                        <ButtonSecondary166                          type="button"167                          onClick={() => handleStartEdit(area)}168                          disabled={isUpdating || isDeleting}169                          className="am-button--small"170                        >171                          Editar172                        </ButtonSecondary>173                        <ButtonAlert174                          type="button"175                          onClick={() => setShowDeleteConfirm(area.id)}176                          disabled={isUpdating || isDeleting}177                          className="am-button--small"178                        >179                          Eliminar180                        </ButtonAlert>181 182                        {showDeleteConfirm === area.id && (183                          <div className="am-delete-confirm">184                            <p>¿Estás seguro? Esta acción no se puede deshacer.</p>185                            <div className="am-confirm-actions">186                              <ButtonAlert187                                type="button"188                                onClick={() => handleConfirmDelete(area.id)}189                                disabled={isDeleting}190                                className="am-button--small"191                              >192                                {isDeleting ? "Eliminando..." : "Confirmar"}193                              </ButtonAlert>194                              <ButtonSecondary195                                type="button"196                                onClick={() => setShowDeleteConfirm(null)}197                                disabled={isDeleting}198                                className="am-button--small"199                              >200                                Cancelar201                              </ButtonSecondary>202                            </div>203                          </div>204                        )}205                      </div>206                    </div>207                  )}208                </li>209              ))}210            </ul>211          )}212        </div>213      </div>214    </section>215  );216}217