diff --git a/CREAR_PROYECTO.md b/CREAR_PROYECTO.md new file mode 100644 index 0000000..2c9f672 --- /dev/null +++ b/CREAR_PROYECTO.md @@ -0,0 +1,161 @@ +# Cómo Crear un Nuevo Proyecto + +## Descripción +Esta funcionalidad permite crear nuevos proyectos en la aplicación ALPHA3 desde el Dashboard. + +## Instrucciones de Uso + +### Para Usuarios de la Aplicación: + +1. **Abrir el Dashboard** + - Inicia la aplicación y ve a la página principal (Dashboard) + - Verás el botón **"+ Nuevo Proyecto"** en la esquina superior derecha + +2. **Crear un Proyecto** + - Haz clic en el botón **"+ Nuevo Proyecto"** + - Se abrirá un modal con un formulario + - Ingresa el nombre del proyecto (ej: "Estructura Legal", "Operativa", etc.) + - Haz clic en **"Crear"** o presiona Enter + +3. **Ver el Proyecto Creado** + - El nuevo proyecto aparecerá inmediatamente en el menú lateral + - Aparecerá con 0% de progreso (ya que no tiene categorías ni tareas aún) + - Haz clic en el proyecto para agregar categorías y tareas + +### Para Desarrolladores: + +#### Endpoint del Backend + +```javascript +POST /api/projects +Content-Type: application/json + +{ + "name": "Nombre del Proyecto" +} +``` + +**Respuesta exitosa:** +```json +{ + "message": "created", + "project": { + "id": 123, + "name": "Nombre del Proyecto", + "created_at": "2026-01-15T..." + } +} +``` + +**Respuesta de error:** +```json +{ + "error": "Project name is required" +} +``` + +#### Sincronización en Tiempo Real + +Cuando se crea un proyecto: +1. El servidor emite un evento Socket.io: `projectCreated` +2. Todos los clientes conectados reciben la actualización +3. La interfaz se actualiza automáticamente sin recargar la página + +#### Estructura del Código + +**Frontend (client/src/App.jsx):** +- Componente `DashboardView` contiene el botón y modal +- Función `handleCreateProject` maneja la creación +- Socket listener `projectCreated` sincroniza cambios + +**Backend (server/server.js):** +- Endpoint `POST /api/projects` +- Validación del nombre del proyecto +- Inserción en la base de datos Supabase +- Emisión de evento Socket.io + +## Requisitos Previos + +1. **Base de Datos**: Tabla `projects` en Supabase con al menos: + - `id` (auto-increment) + - `name` (texto) + +2. **Variables de Entorno** (server/.env): + ``` + SUPABASE_URL=tu_url_de_supabase + SUPABASE_KEY=tu_key_de_supabase + PORT=3001 + ``` + +3. **Dependencias Instaladas**: + ```bash + cd server && npm install + cd ../client && npm install + ``` + +## Inicio de la Aplicación + +### Windows (PowerShell): +```powershell +.\start-app.ps1 +``` + +### Linux/Mac: +```bash +# Terminal 1 - Backend +cd server +npm start + +# Terminal 2 - Frontend +cd client +npm run dev +``` + +La aplicación estará disponible en: +- Frontend: http://localhost:5173 +- Backend: http://localhost:3001 + +## Flujo Completo + +``` +Usuario Frontend Backend Database + | | | | + |--[Click "+ Nuevo]------>| | | + | | | | + |<---[Abre Modal]---------| | | | + | | | | + |--[Ingresa Nombre]------>| | | + | | | | + |--[Click "Crear"]------->| | | + | | | | + | |--[POST /api/projects]-->| | + | | | | + | | |--[INSERT project]------>| + | | | | + | | |<--[Proyecto creado]-----| + | | | | + | |<--[{project}]-----------| | + | | | | + | |--[Actualiza UI] |--[emit 'projectCreated']| + | | | | + |<---[Muestra Proyecto]---| | | + | | | | + | |<--[Socket: projectCreated (otros clientes)] | + | | | | +``` + +## Características + +✅ **Validación**: No permite crear proyectos sin nombre +✅ **Tiempo Real**: Sincronización automática entre clientes +✅ **Optimistic UI**: La interfaz se actualiza instantáneamente +✅ **Accesibilidad**: Modal con atributos ARIA apropiados +✅ **Responsive**: Funciona en dispositivos móviles y desktop + +## Próximos Pasos Recomendados + +Después de crear un proyecto, puedes: +1. Agregar categorías al proyecto (usar el botón "+ Categoría") +2. Agregar tareas a cada categoría +3. Marcar tareas como completadas +4. Ver el progreso en tiempo real diff --git a/GUIA_VISUAL.md b/GUIA_VISUAL.md new file mode 100644 index 0000000..9312eba --- /dev/null +++ b/GUIA_VISUAL.md @@ -0,0 +1,267 @@ +# Guía Visual: Crear Nuevo Proyecto + +Esta guía muestra paso a paso cómo usar la nueva funcionalidad de creación de proyectos. + +--- + +## Paso 1: Vista del Dashboard + +Cuando abres la aplicación, verás el Dashboard principal con el botón **"+ Nuevo Proyecto"** en la esquina superior derecha: + +``` +┌────────────────────────────────────────────────────────────────┐ +│ ALPHA3 v1.0 │ +├────────────────────────────────────────────────────────────────┤ +│ │ +│ Dashboard Control ALPHA3 [+ Nuevo Proyecto] │ +│ Gráficos │ +│ ┌─────────────┐ ┌─────────────┐ │ +│ ───────── │ Sub-items │ │ Completados │ │ +│ │ Totales │ │ │ │ +│ Proyecto 1 50% │ 25 │ │ 12 │ │ +│ Proyecto 2 30% └─────────────┘ └─────────────┘ │ +│ │ +│ ┌─────────────┐ │ +│ │ Avance │ │ +│ │ Global │ │ +│ │ 40% │ │ +│ └─────────────┘ │ +│ │ +│ Haz clic en el nombre de cualquier proyecto en el menú │ +│ para ver y editar los procedimientos. │ +│ │ +└────────────────────────────────────────────────────────────────┘ +``` + +**→ Haz clic en el botón "+ Nuevo Proyecto"** + +--- + +## Paso 2: Modal de Creación + +Se abrirá un modal con un formulario: + +``` +┌────────────────────────────────────────────────────────────────┐ +│ ALPHA3 v1.0 │ +├────────────────────────────────────────────────────────────────┤ +│ ┌───────────────────────────────┐ │ +│ Dashboard │ Crear Nuevo Proyecto │ │ +│ Gráficos │ │ │ +│ │ Nombre del Proyecto: │ │ +│ ───────── │ ┌───────────────────────────┐ │ │ +│ │ │ Ej: Estructura Legal │ │ │ +│ Proyecto 1 50% │ └───────────────────────────┘ │ │ +│ Proyecto 2 30% │ │ │ +│ │ [Cancelar] [Crear] │ │ +│ └───────────────────────────────┘ │ +│ │ +│ Haz clic en el nombre de cualquier proyecto en el menú │ +│ para ver y editar los procedimientos. │ +│ │ +└────────────────────────────────────────────────────────────────┘ +``` + +**Instrucciones:** +1. Escribe el nombre de tu proyecto en el campo de texto +2. Puedes usar nombres como: + - "Estructura Legal" + - "Operativa Comercial" + - "Marketing Digital" + - "Desarrollo de Producto" + - Cualquier nombre que desees + +**→ Escribe el nombre y haz clic en "Crear" (o presiona Enter)** + +--- + +## Paso 3: Proyecto Creado + +El modal se cierra y el nuevo proyecto aparece inmediatamente en el menú lateral: + +``` +┌────────────────────────────────────────────────────────────────┐ +│ ALPHA3 v1.0 │ +├────────────────────────────────────────────────────────────────┤ +│ │ +│ Dashboard Control ALPHA3 [+ Nuevo Proyecto] │ +│ Gráficos │ +│ ┌─────────────┐ ┌─────────────┐ │ +│ ───────── │ Sub-items │ │ Completados │ │ +│ │ Totales │ │ │ │ +│ Proyecto 1 50% │ 25 │ │ 12 │ │ +│ Proyecto 2 30% └─────────────┘ └─────────────┘ │ +│ Proyecto 3 0% ← NUEVO! │ +│ ┌─────────────┐ │ +│ │ Avance │ │ +│ │ Global │ │ +│ │ 27% │ │ +│ └─────────────┘ │ +│ │ +│ Haz clic en el nombre de cualquier proyecto en el menú │ +│ para ver y editar los procedimientos. │ +│ │ +└────────────────────────────────────────────────────────────────┘ +``` + +**✅ ¡Proyecto creado exitosamente!** + +El proyecto aparece con: +- **0% de progreso** (porque aún no tiene tareas) +- **Nombre visible** en el menú lateral +- **Listo para agregar** categorías y tareas + +**→ Haz clic en el proyecto para comenzar a agregar categorías** + +--- + +## Paso 4: Agregar Contenido al Proyecto + +Al hacer clic en el proyecto nuevo, verás: + +``` +┌────────────────────────────────────────────────────────────────┐ +│ ALPHA3 v1.0 │ +├────────────────────────────────────────────────────────────────┤ +│ │ +│ Dashboard 3. Proyecto 3 0% [+ Categoría] │ +│ Gráficos (0 de 0) │ +│ ▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ +│ ───────── │ +│ (No hay categorías aún) │ +│ Proyecto 1 50% │ +│ Proyecto 2 30% Usa el botón "+ Categoría" para comenzar │ +│ Proyecto 3 0% │ +│ │ +│ │ +└────────────────────────────────────────────────────────────────┘ +``` + +Ahora puedes: +1. Agregar categorías con el botón **"+ Categoría"** +2. Dentro de cada categoría, agregar pasos/tareas +3. Marcar tareas como completadas +4. Ver el progreso actualizarse automáticamente + +--- + +## Características Adicionales + +### 🔄 Sincronización en Tiempo Real +Si varios usuarios están conectados: +- Cuando uno crea un proyecto, **todos lo ven instantáneamente** +- No necesitas recargar la página +- La sincronización es automática vía WebSocket + +### ✅ Validación +- No puedes crear un proyecto sin nombre +- El botón "Crear" está deshabilitado si el campo está vacío +- Los espacios en blanco se eliminan automáticamente + +### ⌨️ Atajos de Teclado +- **Enter** en el campo de texto → Crea el proyecto +- **Escape** → Cierra el modal sin crear + +### 📱 Responsive +- Funciona en computadoras, tablets y móviles +- El modal se adapta al tamaño de pantalla + +--- + +## Ejemplo Completo + +**Escenario:** Quieres crear un proyecto para "Marketing Digital" + +1. **Click** en "+ Nuevo Proyecto" +2. **Escribe** "Marketing Digital" +3. **Click** en "Crear" o presiona **Enter** +4. **Resultado:** Nuevo proyecto "Marketing Digital" aparece con 0% +5. **Click** en "Marketing Digital" en el menú +6. **Click** en "+ Categoría" para agregar secciones como: + - "Redes Sociales" + - "Email Marketing" + - "SEO" + - etc. + +--- + +## Solución de Problemas + +### El botón "+ Nuevo Proyecto" no aparece +- ✅ Verifica que estás en la vista Dashboard (página principal) +- ✅ El botón está en la esquina superior derecha del header + +### El proyecto no se crea +- ✅ Asegúrate de que el campo no esté vacío +- ✅ Verifica la conexión con el servidor backend +- ✅ Revisa la consola del navegador (F12) para errores + +### El proyecto no aparece en el menú +- ✅ Verifica que la base de datos Supabase esté configurada +- ✅ Revisa que las credenciales en `.env` sean correctas +- ✅ Espera 1-2 segundos para la sincronización + +--- + +## Para Desarrolladores + +### Probar la Funcionalidad + +```bash +# 1. Configurar variables de entorno +cd server +cp .env.example .env +# Edita .env con tus credenciales de Supabase + +# 2. Instalar dependencias +cd server && npm install +cd ../client && npm install + +# 3. Iniciar la aplicación +# Terminal 1 +cd server && npm start + +# Terminal 2 +cd client && npm run dev + +# 4. Abrir en navegador +http://localhost:5173 +``` + +### Probar el API directamente + +```bash +# Crear proyecto vía curl +curl -X POST http://localhost:3001/api/projects \ + -H "Content-Type: application/json" \ + -d '{"name": "Mi Nuevo Proyecto"}' + +# Respuesta esperada: +# { +# "message": "created", +# "project": { +# "id": 4, +# "name": "Mi Nuevo Proyecto" +# } +# } +``` + +### Verificar en la Base de Datos + +```sql +-- Ver todos los proyectos +SELECT * FROM projects ORDER BY id DESC; + +-- Ver el último proyecto creado +SELECT * FROM projects ORDER BY id DESC LIMIT 1; +``` + +--- + +## Resumen + +✨ **Ahora puedes crear proyectos fácilmente desde el Dashboard** + +🎯 **Flujo simple:** Click → Escribe → Crear → Listo + +🚀 **Próximo paso:** Agregar categorías y tareas a tu nuevo proyecto diff --git a/README.md b/README.md new file mode 100644 index 0000000..b8206c8 --- /dev/null +++ b/README.md @@ -0,0 +1,334 @@ +# ALPHA3 - Sistema de Gestión de Proyectos + +![ALPHA3 v1.0](https://img.shields.io/badge/version-1.0-blue) +![React](https://img.shields.io/badge/React-19.2.0-blue) +![Node.js](https://img.shields.io/badge/Node.js-Express-green) +![Supabase](https://img.shields.io/badge/Database-Supabase-green) + +## 📋 ¿Qué hace este proyecto? + +**ALPHA3** es una aplicación web de gestión de proyectos que permite organizar, monitorear y controlar el avance de proyectos mediante una estructura jerárquica de **Proyectos → Categorías → Tareas**. + +La aplicación proporciona: +- ✅ **Gestión de proyectos** con seguimiento de progreso en tiempo real +- 📊 **Dashboard interactivo** con estadísticas y métricas globales +- 📈 **Visualización de datos** mediante gráficos radar y de barras +- ⚡ **Sincronización en tiempo real** entre múltiples usuarios usando WebSocket +- 🎯 **Seguimiento de tareas** con sistema de check/uncheck +- 📱 **Interfaz responsive** que funciona en desktop y móviles + +## 🎯 Características Principales + +### 1. **Dashboard de Control** +Vista general con: +- Contador de sub-items totales +- Items completados +- Avance global en porcentaje +- Acceso rápido a todos los proyectos + +### 2. **Gestión de Proyectos** +- Crear nuevos proyectos con un clic +- Organizar proyectos en categorías +- Asignar tareas específicas a cada categoría +- Visualización del progreso por proyecto + +### 3. **Sistema de Tareas** +- Marcar/desmarcar tareas como completadas +- Descripción paso a paso para cada tarea +- Modal de detalles con guía de implementación +- Actualización automática del progreso + +### 4. **Análisis Visual** +- **Gráfico Radar**: Equilibrio entre módulos del proyecto +- **Gráfico de Barras**: Progreso por área en porcentaje +- Visualización clara del estado de cada proyecto + +### 5. **Sincronización en Tiempo Real** +- Todos los usuarios ven cambios instantáneamente +- Sin necesidad de recargar la página +- Notificaciones automáticas de actualizaciones + +## 🏗️ Arquitectura del Proyecto + +``` +alfa3-app/ +├── client/ # Frontend React + Vite +│ ├── src/ +│ │ ├── App.jsx # Componente principal con rutas +│ │ ├── index.css # Estilos globales +│ │ └── main.jsx # Punto de entrada +│ └── package.json +│ +├── server/ # Backend Node.js + Express +│ ├── server.js # API REST y WebSocket +│ ├── database.js # Configuración Supabase +│ └── package.json +│ +├── CREAR_PROYECTO.md # Guía técnica de creación de proyectos +├── GUIA_VISUAL.md # Guía visual paso a paso +├── render.yaml # Configuración para deploy en Render +└── start-app.ps1 # Script para iniciar la app (Windows) +``` + +## 🛠️ Tecnologías Utilizadas + +### Frontend +- **React 19.2.0**: Biblioteca para interfaces de usuario +- **Vite 7.2.4**: Build tool y dev server ultrarrápido +- **React Router DOM**: Navegación entre vistas +- **Recharts**: Librería para gráficos interactivos +- **Lucide React**: Iconos modernos +- **Socket.io Client**: Comunicación en tiempo real + +### Backend +- **Node.js**: Entorno de ejecución JavaScript +- **Express 5.2.1**: Framework web minimalista +- **Socket.io**: WebSocket para tiempo real +- **Supabase**: Base de datos PostgreSQL en la nube +- **CORS**: Manejo de políticas de origen cruzado +- **dotenv**: Gestión de variables de entorno + +### Base de Datos (Supabase) +Estructura de tres tablas: +- `projects`: Proyectos principales +- `categories`: Categorías dentro de cada proyecto +- `tasks`: Tareas específicas por categoría + +## 🚀 Instalación y Configuración + +### Requisitos Previos +- Node.js 18+ instalado +- Cuenta en [Supabase](https://supabase.com/) (gratuita) +- Git instalado + +### 1. Clonar el Repositorio +```bash +git clone https://github.com/ProyectoG007/alfa3-app.git +cd alfa3-app +``` + +### 2. Configurar el Backend + +```bash +cd server +npm install +``` + +Crear archivo `.env` en la carpeta `server/`: +```env +SUPABASE_URL=tu_url_de_supabase +SUPABASE_KEY=tu_clave_de_supabase +PORT=3001 +``` + +### 3. Configurar el Frontend + +```bash +cd ../client +npm install +``` + +Crear archivo `.env` en la carpeta `client/` (opcional): +```env +VITE_API_URL=http://localhost:3001 +``` + +### 4. Configurar la Base de Datos + +En tu proyecto de Supabase, ejecuta: + +```sql +-- Tabla de proyectos +CREATE TABLE projects ( + id BIGSERIAL PRIMARY KEY, + name TEXT NOT NULL, + created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() +); + +-- Tabla de categorías +CREATE TABLE categories ( + id BIGSERIAL PRIMARY KEY, + project_id BIGINT REFERENCES projects(id) ON DELETE CASCADE, + name TEXT NOT NULL, + created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() +); + +-- Tabla de tareas +CREATE TABLE tasks ( + id BIGSERIAL PRIMARY KEY, + category_id BIGINT REFERENCES categories(id) ON DELETE CASCADE, + title TEXT NOT NULL, + description TEXT, + completed BOOLEAN DEFAULT FALSE, + created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() +); +``` + +## 🎮 Uso de la Aplicación + +### Opción 1: Iniciar manualmente + +**Terminal 1 - Backend:** +```bash +cd server +npm start +``` + +**Terminal 2 - Frontend:** +```bash +cd client +npm run dev +``` + +### Opción 2: Script de Windows +```powershell +.\start-app.ps1 +``` + +Accede a la aplicación en: **http://localhost:5173** + +## 📖 Guías de Usuario + +### Crear un Nuevo Proyecto +1. Haz clic en **"+ Nuevo Proyecto"** en el Dashboard +2. Ingresa el nombre del proyecto +3. Presiona **"Crear"** o Enter +4. El proyecto aparece inmediatamente en el menú lateral + +Ver guía completa en: [CREAR_PROYECTO.md](CREAR_PROYECTO.md) + +### Gestionar Tareas +1. Selecciona un proyecto del menú lateral +2. Haz clic en **"+ Categoría"** para agregar una categoría +3. Agrega tareas con **"+ Agregar Paso"** +4. Marca/desmarca tareas haciendo clic en el círculo +5. El progreso se actualiza automáticamente + +Ver guía visual en: [GUIA_VISUAL.md](GUIA_VISUAL.md) + +## 🌐 API Endpoints + +### GET /api/data +Obtiene todos los proyectos con su jerarquía completa (categorías y tareas). + +**Respuesta:** +```json +{ + "message": "success", + "data": [ + { + "id": 1, + "name": "Estructura Legal", + "progress": 50, + "completed_count": 5, + "total_count": 10, + "categories": [...] + } + ] +} +``` + +### PUT /api/tasks/:id/toggle +Marca/desmarca una tarea como completada. + +**Body:** +```json +{ + "completed": true +} +``` + +### POST /api/projects +Crea un nuevo proyecto. + +**Body:** +```json +{ + "name": "Nombre del Proyecto" +} +``` + +## 🔌 WebSocket Events + +### taskUpdated +Se emite cuando una tarea cambia de estado. +```javascript +socket.on('taskUpdated', (data) => { + // { id: 123, completed: true } +}); +``` + +### projectCreated +Se emite cuando se crea un nuevo proyecto. +```javascript +socket.on('projectCreated', (project) => { + // { id: 4, name: "Nuevo Proyecto", ... } +}); +``` + +## 🎨 Estructura de la Interfaz + +### Componentes Principales + +1. **Sidebar**: Navegación con lista de proyectos +2. **DashboardView**: Vista general con estadísticas +3. **ChartsView**: Gráficos de análisis +4. **ProjectView**: Vista detallada de proyecto con categorías y tareas + +### Rutas + +- `/` - Dashboard principal +- `/charts` - Análisis visual con gráficos +- `/project/:id` - Detalle de proyecto específico + +## 🚢 Deploy en Producción + +El proyecto incluye configuración para deploy en [Render](https://render.com/): + +1. Conecta tu repositorio a Render +2. El archivo `render.yaml` configura automáticamente: + - Servicio backend Node.js + - Variables de entorno necesarias + - Comandos de build y start + +3. Configura las variables de entorno en Render: + - `SUPABASE_URL` + - `SUPABASE_KEY` + +Para el frontend, puedes usar: +- Vercel +- Netlify +- Render Static Sites + +## 🔒 Seguridad + +- Las credenciales de Supabase se gestionan mediante variables de entorno +- CORS configurado para orígenes específicos +- Validación de datos en el backend +- No se exponen secretos en el código fuente + +## 🤝 Contribuir + +1. Fork el proyecto +2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`) +3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`) +4. Push a la rama (`git push origin feature/AmazingFeature`) +5. Abre un Pull Request + +## 📝 Licencia + +Este proyecto es de código abierto. Ver el archivo LICENSE para más detalles. + +## 👥 Autores + +- ProyectoG007 - *Desarrollo inicial* + +## 🙏 Agradecimientos + +- Comunidad de React por la excelente documentación +- Supabase por la plataforma de base de datos +- Todos los contribuidores del proyecto + +--- + +**¿Necesitas ayuda?** Revisa las guías en [CREAR_PROYECTO.md](CREAR_PROYECTO.md) y [GUIA_VISUAL.md](GUIA_VISUAL.md) diff --git a/client/package-lock.json b/client/package-lock.json index b528f1b..3e4f478 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -58,7 +58,6 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -1508,7 +1507,6 @@ "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1556,7 +1554,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1662,7 +1659,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -2082,7 +2078,6 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -2802,7 +2797,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -2864,7 +2858,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -2874,7 +2867,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -2894,7 +2886,6 @@ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", "license": "MIT", - "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -2995,8 +2986,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/redux-thunk": { "version": "3.1.0", @@ -3322,7 +3312,6 @@ "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -3473,7 +3462,6 @@ "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/client/src/App.jsx b/client/src/App.jsx index c7c4540..5da4863 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -17,10 +17,6 @@ const socket = io(API_URL, { // 1. Sidebar Component const Sidebar = ({ projects }) => { - const totalSubItems = projects.reduce((acc, p) => acc + p.total_count, 0); - const completedItems = projects.reduce((acc, p) => acc + p.completed_count, 0); - const globalProgress = totalSubItems === 0 ? 0 : Math.round((completedItems / totalSubItems) * 100); - return (