Update shift creation to ensure correct date objects are used

Adjust the `Shifts` component to correctly format `startTime` and `endTime` as Date objects before submitting to the `createMutation`, preventing potential issues with date parsing on the backend.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 99f0fce6-9386-489a-9632-1d81223cab44
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/6d543d2c-20b9-4ea6-93fe-70fe9b1d9f80/99f0fce6-9386-489a-9632-1d81223cab44/nGJAldO
This commit is contained in:
marco370 2025-10-11 09:51:15 +00:00
parent abe4041cd1
commit 133be08785
2 changed files with 216 additions and 134 deletions

View File

@ -65,7 +65,13 @@ export default function Shifts() {
});
const onSubmit = (data: InsertShift) => {
createMutation.mutate(data);
// Ensure dates are Date objects, not strings
const shiftData = {
...data,
startTime: data.startTime instanceof Date ? data.startTime : new Date(data.startTime),
endTime: data.endTime instanceof Date ? data.endTime : new Date(data.endTime),
};
createMutation.mutate(shiftData);
};
const getStatusLabel = (status: string) => {

342
replit.md
View File

@ -1,140 +1,216 @@
# VigilanzaTurni - Security Shift Management System
# VigilanzaTurni - Sistema Gestione Turni per Istituti di Vigilanza
## Overview
Sistema professionale di gestione turni 24/7 per istituti di vigilanza con:
- Autenticazione multi-ruolo (Admin, Coordinatore, Guardia, Cliente)
- Gestione anagrafica guardie con skill matrix e certificazioni
- Pianificazione turni con calendario 24/7
- Gestione siti/commesse con tipologie servizio
- Dashboard operativa con KPI live
- Reportistica ore lavorate
- Sistema notifiche
VigilanzaTurni is a professional 24/7 shift management system designed specifically for security and surveillance institutes. The application manages guards, sites, shifts, certifications, and provides comprehensive operational control for security operations.
## Project Architecture
**Core Purpose:** Streamline security personnel scheduling, credential management, site assignments, and real-time operational oversight with compliance-focused audit trails and reporting.
### Stack Tecnologico
- **Frontend**: React + TypeScript + Tailwind CSS + Shadcn UI
- **Backend**: Express.js + TypeScript
- **Database**: PostgreSQL (Neon) con Drizzle ORM
- **Autenticazione**: Replit Auth (OIDC)
- **State Management**: TanStack Query v5
- **Routing**: Wouter
**Technology Stack:**
- Frontend: React with TypeScript, Vite bundler
- UI Framework: Radix UI components with shadcn/ui (New York style)
- Styling: Tailwind CSS with custom design system
- Backend: Express.js with TypeScript
- Database: PostgreSQL via Neon serverless
- ORM: Drizzle ORM
- Authentication: Replit Auth with OpenID Connect
- State Management: TanStack Query (React Query)
- Form Handling: React Hook Form with Zod validation
### Design System
- **Font Principale**: Inter (sans-serif)
- **Font Monospace**: JetBrains Mono (per matricole, ID)
- **Colori**:
- Primary: Blue (210, 100%, 45-50%) - operativo, affidabile
- Status Active: Green (140, 60%, 45%)
- Status Late/Warning: Orange (25, 90%, 55%)
- Status Emergency: Red (0, 70%, 55%)
- Status Inactive: Gray (220, 15%, 50%)
- **Tema**: Dark mode di default con supporto light mode
- **Componenti**: Shadcn UI con design operativo
## Database Schema
### Core Tables
**users** (Replit Auth):
- id, email, firstName, lastName, profileImageUrl
- role: admin | coordinator | guard | client
- createdAt, updatedAt
**guards**:
- id, userId (FK), badgeNumber (unique), phoneNumber
- Skills: isArmed, hasFireSafety, hasFirstAid, hasDriverLicense
- languages: array
**certifications**:
- id, guardId (FK), type, name
- issueDate, expiryDate
- status: valid | expiring_soon | expired
**sites**:
- id, name, address, clientId (FK)
- shiftType: fixed_post | patrol | night_inspection | quick_response
- minGuards, requiresArmed, requiresDriverLicense
- isActive
**shifts**:
- id, siteId (FK)
- startTime, endTime
- status: planned | active | completed | cancelled
**shift_assignments**:
- id, shiftId (FK), guardId (FK)
- checkInTime, checkOutTime
**notifications**:
- id, userId (FK), title, message, type
- isRead, relatedEntityId
## API Endpoints
### Authentication
- `GET /api/login` - Inizia flow OIDC
- `GET /api/callback` - Callback OIDC
- `GET /api/logout` - Logout
- `GET /api/auth/user` - Current user (protected)
### Guards
- `GET /api/guards` - Lista guardie con certificazioni
- `POST /api/guards` - Crea guardia
### Sites
- `GET /api/sites` - Lista siti
- `POST /api/sites` - Crea sito
### Shifts
- `GET /api/shifts` - Lista tutti i turni
- `GET /api/shifts/active` - Solo turni attivi
- `POST /api/shifts` - Crea turno
### Notifications
- `GET /api/notifications` - Lista notifiche utente
- `PATCH /api/notifications/:id/read` - Segna come letto
## Frontend Routes
| Route | Accesso | Descrizione |
|-------|---------|-------------|
| `/` | Public/Protected | Landing page o Dashboard |
| `/guards` | Admin, Coordinator | Gestione guardie |
| `/sites` | Admin, Coordinator, Client | Gestione siti |
| `/shifts` | Admin, Coordinator, Guard | Pianificazione turni |
| `/reports` | Admin, Coordinator, Client | Reportistica |
| `/notifications` | Admin, Coordinator, Guard | Notifiche |
## User Roles
### Admin
- Accesso completo a tutte le funzionalità
- Gestione guardie, siti, turni
- Visualizzazione reportistica completa
### Coordinator
- Pianificazione turni
- Assegnazione guardie
- Gestione siti operativi
- Reportistica
### Guard
- Visualizzazione turni assegnati
- Timbratura (future)
- Notifiche
- Profilo personale
### Client
- Visualizzazione siti di competenza
- Reportistica servizi
- KPI e SLA
## Key Features
### Dashboard Operativa
- KPI Cards: Turni attivi, Guardie totali, Siti attivi, Certificazioni in scadenza
- Live status turni in corso
- Alert certificazioni in scadenza (< 30 giorni)
### Gestione Guardie
- Anagrafica completa con foto profilo
- Skill matrix (armato, antincendio, primo soccorso, patente)
- Gestione certificazioni con scadenze automatiche
- Badge number univoco
### Gestione Siti/Commesse
- Tipologie servizio: Presidio fisso, Pattugliamento, Ispettorato notturno, Pronto intervento
- Requisiti minimi (n° guardie, armato, patente)
- Geolocalizzazione (future)
### Pianificazione Turni
- Calendario 24/7
- Assegnazione manuale guardie
- Vincoli base (future: riposi, orari massimi)
- Stati turno: pianificato, attivo, completato, annullato
### Reportistica
- Ore totali lavorate
- Ore mensili per guardia
- Statistiche turni completati
- Export dati (future)
## Development
### Setup
```bash
npm install
npm run db:push # Setup database
npm run dev # Start application
```
### Environment Variables
- `DATABASE_URL` - PostgreSQL connection string
- `SESSION_SECRET` - Session encryption key
- `REPLIT_DOMAINS` - Authorized domains for OIDC
- `ISSUER_URL` - OIDC provider URL (default: https://replit.com/oidc)
- `REPL_ID` - Replit application ID
### Testing
All interactive elements have `data-testid` attributes for automated testing.
## Recent Changes
### 2025-10-11
- Implementato schema database completo
- Creato frontend con tutte le pagine operative
- Configurato Replit Auth per autenticazione multi-ruolo
- Implementati endpoint API per CRUD completo
- Aggiunto sistema notifiche
- Fix bug conversione date nei turni
- Aggiunto SEO completo (title, meta description, Open Graph)
## Future Enhancements
### Priorità Alta
- App mobile guardie con geofencing e timbratura GPS
- Motore ottimizzazione turni con vincoli avanzati
- Sistema ronde con checkpoint NFC/QR
- Panic button e incident reporting
### Priorità Media
- Portale clienti dedicato
- Gestione dotazioni (armi, bodycam, radio)
- Integrazione payroll (Zucchetti/Teamsystem)
- Export reportistica avanzata
### Priorità Bassa
- Dashboard analytics avanzata
- Audit trail completo
- API pubblica per integrazioni terze
## User Preferences
Preferred communication style: Simple, everyday language.
## System Architecture
### Frontend Architecture
**Component Structure:**
- Page-based routing using Wouter for client-side navigation
- Component library built on Radix UI primitives with shadcn/ui styling
- Custom operational components (KPICard, StatusBadge) for security-specific UI
- Responsive sidebar layout (SidebarProvider) with collapsible navigation
- Theme system supporting dark/light modes with operational color palette
**State Management:**
- TanStack Query for server state and API caching
- Custom hooks pattern (useAuth, useIsMobile, useToast) for reusable logic
- Form state managed via React Hook Form with Zod schema validation
- Client-side authentication state derived from user query
**Design System:**
- Material Design principles adapted for operational clarity
- Dark mode as primary interface (operational background: HSL 220 15% 12%)
- Status-based color coding: Green (active), Red (emergency), Orange (alerts), Amber (pending)
- Typography: Inter for UI, JetBrains Mono for technical data (IDs, timestamps)
- Border radius: 9px (lg), 6px (md), 3px (sm) for consistent visual hierarchy
### Backend Architecture
**API Layer:**
- RESTful Express.js server with TypeScript
- Session-based authentication using connect-pg-simple
- Route handlers in `/server/routes.ts` with middleware authentication
- Request/response logging middleware for audit trails
- Error handling middleware with standardized error responses
**Database Design:**
- PostgreSQL schema defined in `/shared/schema.ts` using Drizzle ORM
- Key entities: Users, Guards, Sites, Shifts, ShiftAssignments, Certifications, Notifications
- Enums for role management, shift types, certification status
- Foreign key relationships: Guards → Users, ShiftAssignments → Guards/Shifts, Certifications → Guards
- Automatic timestamp tracking (createdAt, updatedAt)
**Data Access Pattern:**
- Storage abstraction layer in `/server/storage.ts` implementing IStorage interface
- Centralized database operations preventing direct DB access in routes
- Drizzle ORM for type-safe queries with PostgreSQL dialect
- Relationship loading via Drizzle relations for nested data (guards with certifications)
### Authentication & Authorization
**Replit Auth Integration:**
- OpenID Connect flow via `openid-client` library
- Session management with PostgreSQL-backed session store
- User profile synchronization on login (upsertUser pattern)
- Role-based access control via userRoleEnum (admin, coordinator, guard, client)
- Middleware authentication check (`isAuthenticated`) protecting all `/api/*` routes
**Session Security:**
- HTTPOnly cookies with secure flag
- 7-day session TTL with automatic cleanup
- Session data stored in dedicated `sessions` table
- CSRF protection via same-origin policy
### External Dependencies
**Third-party Services:**
- Neon Database: Serverless PostgreSQL with WebSocket connections
- Replit Auth: OAuth/OIDC authentication provider
- Google Fonts: Inter and JetBrains Mono font families
**Key Libraries:**
- `@neondatabase/serverless`: PostgreSQL driver with WebSocket support
- `drizzle-orm`: Type-safe ORM with schema validation
- `drizzle-zod`: Schema-to-Zod validator generation
- `express-session`: Session middleware
- `connect-pg-simple`: PostgreSQL session store
- `passport` + `openid-client`: Authentication strategy
- `@tanstack/react-query`: Async state management
- `react-hook-form` + `@hookform/resolvers`: Form validation
- `date-fns`: Date manipulation and formatting (Italian locale support)
- `wouter`: Lightweight client-side routing
- `class-variance-authority` + `clsx` + `tailwind-merge`: Dynamic styling utilities
**Build & Development:**
- Vite for frontend bundling with React plugin
- esbuild for server-side bundling
- TypeScript with strict mode and path aliases (@/, @shared/, @assets/)
- PostCSS with Tailwind CSS and Autoprefixer
### Data Models
**Core Entities:**
1. **Guards**: Badge number, contact info, skills (armed, fire safety, first aid, driver license, languages), user relationship
2. **Certifications**: Type, issue/expiry dates, status (valid/expiring_soon/expired), attached to guards
3. **Sites**: Name, address, shift type requirements, minimum guards, armed/driver requirements, active status
4. **Shifts**: Time range, site assignment, status (planned/active/completed/cancelled), guard assignments
5. **ShiftAssignments**: Many-to-many relationship between shifts and guards
6. **Notifications**: Type-based alerts (shift_assigned, certification_expiring, shift_reminder), read status
**Business Logic:**
- Certification status auto-update based on expiry date (< 30 days = expiring_soon, past = expired)
- Real-time shift status tracking (active shifts query endpoint)
- Guard-site compatibility checking (armed requirement, skills matching)
- Operational KPIs: active shifts, total guards, active sites, expiring certifications
### Deployment Configuration
**Environment Variables Required:**
- `DATABASE_URL`: PostgreSQL connection string (Neon)
- `SESSION_SECRET`: Session encryption key
- `REPL_ID`: Replit deployment identifier
- `ISSUER_URL`: OIDC provider URL (default: https://replit.com/oidc)
- `REPLIT_DOMAINS`: Allowed authentication domains
**Build Process:**
- Client: `vite build``dist/public`
- Server: `esbuild` bundling → `dist/index.js`
- Database migrations: `drizzle-kit push` for schema sync
- Production: Node.js serves static files + API routes
- Interfaccia in italiano
- Dark mode di default
- Design operativo e funzionale (non decorativo)
- Focus su efficienza e densità informativa