Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js: Version 18.x or higher
  • pnpm: Package manager (recommended) or npm/yarn
  • MariaDB/MySQL: Version 10.6 or higher
  • Git: For cloning the repository
This guide uses pnpm as the package manager. You can also use npm or yarn by replacing pnpm commands accordingly.

​
Getting Started

Follow these steps to get Beils Dashboard running on your local machine:
1

Clone the Repository

Clone the Beils Dashboard repository to your local machine:
git clone <repository-url>
cd tp-plus-dashboard
2

Install Dependencies

Install all required packages using pnpm:
pnpm install
This will install all dependencies including:
  • Nuxt 4 framework and modules
  • Prisma ORM and MariaDB adapter
  • Vue Query for data fetching
  • Authentication libraries (bcryptjs, jsonwebtoken)
  • UI libraries (Tailwind CSS, DaisyUI, Lucide icons)
3

Configure Database

Create a MariaDB/MySQL database for the application:
CREATE DATABASE transpallet_plus_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
Create a .env file in the project root with your database credentials:
.env
# Database Configuration
DATABASE_HOST=localhost
DATABASE_USER=root
DATABASE_PASSWORD=your_password_here
DATABASE_NAME=transpallet_plus_db
DATABASE_PORT=3306

# JWT Secret for Authentication
JWT_SECRET=your-secure-secret-key-here

# Node Environment
NODE_ENV=development
Never commit your .env file to version control. It contains sensitive credentials.
4

Generate Prisma Client

Generate the Prisma client based on your schema:
pnpm prisma:generate
This creates the type-safe Prisma client for database operations.
5

Run Database Migrations

Apply the database schema to your MariaDB database:
pnpm prisma:migrate
This creates all necessary tables, indexes, and relationships defined in the Prisma schema.
6

Seed the Database

Populate the database with sample data:
pnpm seed
This creates:
  • 25 sample users (1 admin, 2 staff, 22 clients)
  • 2 brands (Masglo, Bioline Jato)
  • Client consents, questionnaires, and bookings
  • Random appointments across past and future dates
The seed script creates an admin account with credentials:
7

Start the Development Server

Launch the Nuxt development server:
pnpm dev
The application will be available at http://localhost:3000
8

Log In to the Dashboard

Open your browser and navigate to http://localhost:3000Use the admin credentials to log in:You’ll be redirected to the dashboard overview after successful authentication.

​
Your First Actions

Now that you’re logged in, here are some key actions to explore:

​
1. View Clients

Navigate to Clientes (Clients) from the sidebar to see the list of seeded clients. 
// The client management page uses Vue Query for data fetching
const { data: clients } = useQuery({
  queryKey: ['clients-list'],
  queryFn: () => $fetch('/api/clients')
})

Add a New Client

Click the “Add Client” button to create a new client profile with:
  • Personal information (name, email, phone)
  • Address and demographics
  • Document type (DNI, Passport, NIE)

View Client Details

Click on any client to view their complete profile, including:
  • Booking history
  • Consent forms
  • Questionnaires
  • Debt status

​
2. Manage Appointments

Navigate to Agenda (Schedule) to view and manage appointments:
  • View upcoming and past bookings
  • Create new appointments with client and staff assignment
  • Update appointment status (pending, confirmed, completed, cancelled)
  • Add notes for each booking

​
3. Browse the Product Catalog

Explore the Catálogo section:
Manage your product inventory:
  • Add products with SKU/barcode
  • Set pricing and tax rates
  • Track stock levels with minimum stock alerts
  • Assign categories, subcategories, and brands

​
4. Create a Sale

Navigate to TPV (Point of Sale) to process transactions: 
// Cart management flow
1. Select client
2. Add items to cart (products, services, packs)
3. Apply discounts or coupons
4. Choose payment method (cash, card, transfer, mixed)
5. Complete the sale
The cart system automatically calculates subtotals, taxes, and final totals based on item prices and tax rates.

​
Available Scripts

Here are all the npm scripts available in Beils Dashboard:
CommandDescription
pnpm devStart development server with hot reload
pnpm buildBuild for production
pnpm previewPreview production build locally
pnpm generateGenerate static site (SSG)
pnpm postinstallPrepare Nuxt (runs automatically after install)
pnpm seedSeed database with sample data
pnpm prisma:generateGenerate Prisma client
pnpm prisma:migrateRun database migrations
pnpm prisma:pullPull schema from existing database
pnpm prisma:resetReset database and re-run migrations

​
Understanding the Authentication Flow

Beils Dashboard uses JWT-based authentication:
1

User Login

User submits email and password to /api/auth/login
// server/api/auth/login.post.ts
const loginSchema = z.object({
  email: z.string().email(),
  password: z.string().min(1),
})
2

Credential Verification

Server validates credentials:
  • Checks if user exists
  • Verifies user status is “ON”
  • Compares password hash using bcrypt
3

Token Generation

On success, server generates JWT token:
const token = signToken({ 
  userId: user.user_id, 
  email: user.email, 
  role: user.role 
})
Token expires after 24 hours by default.
4

Client Storage

Frontend stores the token and uses it for authenticated requests:
// Include token in API requests
headers: {
  Authorization: `Bearer ${token}`
}

​
API Endpoints Overview

The platform exposes RESTful API endpoints organized by feature:

​
Authentication

  • POST /api/auth/login - User login
  • GET /api/auth/me - Get current user profile

​
Clients

  • GET /api/clients - List all clients (with search)
  • POST /api/clients - Create new client
  • PUT /api/clients/[id] - Update client
  • DELETE /api/clients/[id] - Delete client

​
Catalog

  • GET /api/catalog/brands - List brands
  • POST /api/catalog/brands - Create brand
  • GET /api/catalog/categories - List categories
  • GET /api/catalog/products - List products

​
Agenda

  • GET /api/agenda/bookings - List bookings
  • POST /api/agenda/bookings - Create booking
  • PUT /api/agenda/bookings/[id] - Update booking
All API endpoints use Zod schemas for request validation, ensuring type safety and data integrity.

​
Next Steps

Installation Guide

Learn about production deployment, environment variables, and advanced configuration

API Reference

Explore detailed API documentation for all endpoints

​
Troubleshooting

  • Verify MariaDB/MySQL is running: sudo systemctl status mariadb
  • Check database credentials in .env
  • Ensure database exists: SHOW DATABASES;
  • Check port is not blocked: netstat -tuln | grep 3306
  • Regenerate Prisma client: pnpm prisma:generate
  • Clear node_modules and reinstall: rm -rf node_modules && pnpm install
  • Check schema.prisma syntax for errors
  • Change port in nuxt.config.ts:
export default defineNuxtConfig({
  devServer: { port: 3001 }
})
  • Or kill existing process: lsof -ti:3000 | xargs kill
  • Check JWT_SECRET is set in .env
  • Verify user status is “ON” in database
  • Check browser console for CORS or network errors
  • Ensure seed script completed successfully
If you encounter build errors, check the TypeScript configuration and ensure all dependencies are properly installed.

Build docs developers (and LLMs) love

Get started for freeTalk to us