chore: estructura inicial del MVP

Backend (Express + MariaDB) y frontend (React + Vite, identidad Fluent/Windows) con el nucleo funcional: seguridad, organizacion, proyectos, actividades, subtareas, dependencias, dashboard, calendario, gantt, comentarios, adjuntos, notificaciones in-app y catalogos. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-03 08:37:58 -05:00
commit 1d22adc42e
135 changed files with 10913 additions and 0 deletions
@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+// Flyout generico con light-dismiss: click fuera o Esc cierra. trigger recibe { onClick, ref }.
+export function Flyout({ trigger, children, align = 'end' }) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState({ top: 0, left: 0 });
+  const anchorRef = useRef(null);
+
+  function openFlyout() {
+    const rect = anchorRef.current.getBoundingClientRect();
+    setPos({
+      top: rect.bottom + 6,
+      left: align === 'end' ? rect.right : rect.left,
+    });
+    setOpen(true);
+  }
+
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e) { if (e.key === 'Escape') setOpen(false); }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open]);
+
+  return (
+    <>
+      <span ref={anchorRef}>{trigger({ onClick: () => (open ? setOpen(false) : openFlyout()) })}</span>
+      {open && createPortal(
+        <>
+          <div className="flyout-backdrop" onClick={() => setOpen(false)} />
+          <div
+            className="flyout-panel"
+            style={{ top: pos.top, left: align === 'end' ? pos.left - 220 : pos.left }}
+            onClick={() => setOpen(false)}
+          >
+            {children}
+          </div>
+        </>,
+        document.body
+      )}
+    </>
+  );
+}
+
+export function FlyoutItem({ icon: Icon, danger, children, ...rest }) {
+  return (
+    <button className={`flyout-item ${danger ? 'danger' : ''}`} {...rest}>
+      {Icon && <Icon size={15} />}
+      <span>{children}</span>
+    </button>
+  );
+}
+
+export function FlyoutSeparator() {
+  return <div className="flyout-separator" />;
+}