Z-Volta

A comprehensive Asset and Booking Management System designed for organizations to efficiently manage resource allocation, employee bookings, and asset inventory. Built with modern Vue.js technologies and powered by Supabase.

📋 Overview

Z-Volta is a web application that allows organizations to:

• Manage Assets - Register and track office assets (desks, meeting rooms, parking spaces)
• Handle Bookings - Create and manage resource reservations with date ranges
• Control Access - Role-based access control for different user types
• Monitor Usage - Generate reports and analytics on asset utilization

🎯 Key Features

👥 Role-Based Access Control

• DIPENDENTE (Employee): View and book available assets
• COORDINATORE (Coordinator): Manage employee bookings and monitor team resource usage
• GESTORE (Manager): Generate reports and view booking analytics
• ADMIN: Full system management including asset configuration and admin access

📅 Booking Management

• Create bookings with custom date ranges
• View active and completed bookings separately
• Modify or cancel active bookings (completed bookings are read-only)
• Real-time availability checking
• Coordinator oversight of team bookings

🏢 Asset Management

• Add, update, and delete assets
• Track asset status (DISPONIBILE / OCCUPATO)
• Categorize assets (desks, meeting rooms, parking spaces)
• View asset location and booking history

📊 Reporting & Analytics

• Asset utilization reports
• Top user bookings statistics
• Recent booking activity tracking
• Booking status breakdown by asset type

🌍 Multi-Language Support

• Italian and English interfaces
• Language toggle in all views

🌙 Dark Mode

• Full dark mode support across all views
• Theme toggle in header

🛠️ Technology Stack

• Frontend Framework: Vue 3.5 with Composition API
• State Management: Pinia 3
• Routing: Vue Router 4
• Styling: Tailwind CSS 3.4
• Icons: Lucide Vue Next
• Backend: Supabase (PostgreSQL + Real-time)
• Build Tool: Vite
• Package Manager: npm

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Supabase account and project (see SUPABASE_SETUP.md)

Installation

npm install

Environment Configuration

See SUPABASE_SETUP.md for Supabase configuration and connection details.

Development Server

npm run dev

The application will be available at http://localhost:5173

Production Build

npm run build

Preview Production Build

npm run preview

📁 Project Structure

├── public/              # Static assets
├── src/
│   ├── assets/          # CSS and styling
│   │   └── main.css     # Global styles
│   ├── lib/             # Utility libraries
│   │   └── supabase.js  # Supabase client configuration
│   ├── router/          # Vue Router configuration
│   │   └── index.js     # Route definitions
│   ├── services/        # API and database services
│   │   └── database.js  # Supabase queries and operations
│   ├── stores/          # Pinia state management
│   │   ├── auth.js      # Authentication store
│   │   ├── theme.js     # Theme (dark mode) store
│   │   ├── lang.js      # Language preference store
│   │   └── counter.js   # Example store
│   ├── views/           # Page components
│   │   ├── HomeView.vue                  # Home & booking management
│   │   ├── MyBookingsView.vue            # User's personal bookings
│   │   ├── EmployeeBookingsView.vue      # Coordinator employee management
│   │   ├── ReportsView.vue               # Analytics and reports
│   │   ├── AdminAssetsView.vue           # Asset management (admin only)
│   │   └── LoginView.vue                 # Authentication
│   ├── i18n.js          # Internationalization configuration
│   ├── App.vue          # Root component
│   └── main.js          # Application entry point
├── index.html           # HTML entry point
├── vite.config.js       # Vite configuration
├── tailwind.config.js   # Tailwind CSS configuration
├── postcss.config.js    # PostCSS configuration
└── package.json         # Project dependencies

🔐 User Roles & Capabilities

Employee (DIPENDENTE)

• View all available assets
• Create personal bookings
• View, modify, and cancel their own active bookings
• Access "Le mie prenotazioni" (My Bookings) section

Coordinator (COORDINATORE)

• All employee capabilities
• Access "Prenotazioni Dipendenti" (Employee Bookings) section
• View and manage bookings of their direct reports
• Modify or cancel employee bookings (only for their team members)

Manager (GESTORE)

• All employee capabilities
• Access "Report" (Reports) section
• View analytics and utilization reports
• Track booking trends and asset usage patterns

Administrator (ADMIN)

• All capabilities of other roles
• Access "Gestione asset" (Asset Management) section
• Create, update, and delete assets
• Modify asset status and details
• System-wide oversight and configuration

📌 Navigation Flow

1. Prenotazioni (Home) - Browse and manage available assets
2. Le mie prenotazioni (My Bookings) - View personal bookings
3. Prenotazioni Dipendenti (Employee Bookings) - Coordinator only - Manage team bookings
4. Report (Reports) - Manager+ only - View analytics
5. Gestione asset (Asset Management) - Admin only - Manage inventory

✨ Key Workflows

Creating a Booking

1. Navigate to "Prenotazioni" (Home)
2. Select an available asset
3. Choose date range for the booking
4. Submit the booking request
5. View in "Le mie prenotazioni"

Managing Team Bookings (Coordinators)

1. Go to "Prenotazioni Dipendenti"
2. View all active bookings of your employees
3. Edit dates or cancel bookings as needed
4. Changes reflect immediately

Viewing Analytics (Managers)

1. Access "Report" section
2. View asset utilization breakdown
3. See top users and booking trends
4. Download reports if needed

Managing Assets (Admin)

1. Access "Gestione asset"
2. Add new assets with type and location
3. Update asset status (DISPONIBILE / OCCUPATO)
4. Delete obsolete assets

🔒 Security Features

• Role-Based Access Control (RBAC): Each user type has restricted access
• Row-Level Security (RLS): Database policies enforce data isolation
• Coordinator Filtering: Employees visible only to their assigned coordinator
• Read-Only Completed Bookings: Past bookings cannot be modified
• Secure Authentication: Supabase authentication with session management

🌐 Internationalization

The application supports multiple languages:

• Italian (IT) - Default
• English (EN)

Toggle language using the Globe icon in the header of any view.

🎨 User Interface

• Responsive Design: Works on desktop, tablet, and mobile devices
• Dark Mode Support: Full dark mode theme with smooth transitions
• Intuitive Navigation: Consistent sidebar navigation across all views
• Status Indicators: Visual cues for booking status (Active/Completed/Occupied)
• Modal Forms: Easy inline editing of bookings and details

📝 Notes

• See SUPABASE_SETUP.md for database schema and configuration instructions
• Active bookings are displayed with orange status badge
• Completed bookings are displayed with emerald status badge and are read-only
• Occupied assets show red status indicator
• Available assets show green status indicator