Coding Diary: Building a Custom Fleet Dashboard in 7 Days

A small local logistics company came to me last week with an old, slow web application. They run a fleet of twenty delivery trucks, and they needed a secure portal to track maintenance logs, route histories, and driver shift checklists. Their existing system was built on a very basic PHP setup, but it looked terrible, had no responsive styling, and was difficult for drivers to use on their tablets while on the road.

Since the company's internal team was already familiar with PHP, we decided to rebuild the frontend using Laravel. To save weeks of styling grids and design work, I searched for a solid starter dashboard package. I chose Arcone - Bootstrap 5 & Laravel 8 Admin Dashboard Template + HTML Version. It came with both a clean Laravel 8 project skeleton and a standalone HTML version, which gave us the flexibility we needed for this transition.

Here is my daily developer journal of how I integrated this template, solved a frustrating asset compilation issue, and launched the portal.

---

Day 1: Scaffolding and Environmental Setup

On Day 1, I unzipped the package files. Inside, I found two primary directories: one for the pure HTML/CSS version and one for the Laravel 8 project setup. Since the client wanted to use Laravel for their backend logic, I chose to work inside the Laravel directory.

I set up a local Docker container using Laravel Sail to ensure a consistent local environment. First, I ran the standard composer installation command to pull down all the required PHP packages:

composer install

Next, I copied the environment configuration file, generated a fresh application key, and ran my initial database migrations:

cp .env.example .env
php artisan key:generate
php artisan migrate

The backend setup was smooth, and the default routes loaded cleanly. The page design was excellent right out of the box, featuring a dark sidebar, pre-configured card layouts, and crisp typography that would make it easy for drivers to read logs in bright daylight.

---

Day 3: Fixing the Sass Compilation Friction

On Day 3, I ran into my first real technical friction point. When I went to run the frontend build tool to customize the theme colors for our brand, the compilation failed. The template was set up to compile styles using Laravel Mix (Webpack), but the node dependencies in the default package.json file were a bit older.

When I ran npm install and then tried to build the assets with npm run dev, the build script threw a deprecation error. The older Sass compiler was crashing because it did not support some of the nested color variables inside the Bootstrap 5 stylesheet on my newer version of Node.js.

To fix this, I updated the package.json dependencies and swapped out the deprecated Sass compiler for sass-loader and Dart Sass. I then updated the webpack.mix.js file to correctly handle the new compiler. Here is the configuration I used to resolve the compilation issue:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 | Webpack configuration to compile custom Bootstrap 5 SCSS variables
 */

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css', {
       sassOptions: {
           quietDeps: true, // Suppress third-party Bootstrap deprecation warnings
       }
   })
   .options({
       processCssUrls: false // Prevent webpack from altering relative font paths
   })
   .version(); // Enable asset versioning for caching

By updating the Laravel Mix configuration and adding quietDeps: true, the compiler ignored the internal Bootstrap warnings and built the stylesheets. This simple fix saved me hours of manually editing third-party Bootstrap variables.

---

Day 5: Connecting Fleet Data and Creating Eloquent Queries

With the compilation issues resolved, I started hooking up the static views to the company's real database. I created a database migration for the truck logs and set up an Eloquent model to fetch the records.

To make sure the dashboard loaded quickly, I added database indexes on the truck ID and timestamp columns. Without indexing, database searches would slow down as the company added thousands of daily route logs. I also wrote a clean Laravel Controller to fetch only the active trucks for the day:

<?php

namespace App\Http\Controllers;

use App\Models\TruckLog;
use Illuminate\Http\Request;

class FleetDashboardController extends Controller
{
    /**
     * Fetch active delivery trucks and log records
     */
    public function index()
    {
        // Use eager loading to prevent N+1 query performance lag
        $activeLogs = TruckLog::with('driver')
            ->whereDate('created_at', today())
            ->orderBy('created_at', 'desc')
            ->paginate(15);

        return view('dashboard.fleet', compact('activeLogs'));
    }
}

In the Blade view, I mapped these variables directly to the pre-styled table components inside the Arcone template. The transition of static dummy data to actual database records worked nicely, and the table rendered cleanly with Bootstrap's responsive layout.

---

Day 7: Performance Polish and Web Server Setup

On the final day, I focused on speed optimization and production deployment. Drivers often access this portal from remote roads with weak mobile signals, so the pages had to be as light as possible.

To optimize the performance, I ran the asset minification scripts to shrink our compiled CSS and JS files. Then, I set up a custom Nginx configuration block on the production VPS. This ensures that the web server applies Gzip compression to all text files and tells the web browsers to cache static assets locally.

Here is the Nginx configuration snippet I added to their server:

# Nginx server configuration for Laravel Fleet Portal
server {
    listen 80;
    server_name fleet-portal.company.com;
    root /var/www/fleet-app/public; # Point directly to Laravel's public directory

    index index.php index.html;

    # Gzip settings to compress large assets over mobile data networks
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml;
    gzip_min_length 1000;

    # Handle standard Laravel routing fallbacks
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    # Browser caching rules for assets and compiled Mix files
    location ~* \.(?:css|js|woff2?|png|jpg|jpeg|gif|svg|ico)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
        access_log off;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.0-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

After compiling the assets, setting up the Nginx rules, and enabling PHP OPcache, the home dashboard page loaded in under 0.9 seconds. The page responsiveness scored a 94 on mobile tests, which is exceptional for a database-driven administration portal.

---

Objective Pros and Cons

After spending a week working inside this codebase, here is my balanced review of the template package:

The Positives:

• Dual Formats: Having access to both a pre-configured Laravel 8 framework and standard static HTML files made it easy to reference raw UI code.

• Clean Visual Design: The dark and light mode layouts are elegant and clean, requiring very few styling tweaks.

• Responsive Layouts: The tables, forms, and charts scale smoothly down to smaller tablet and phone screens.

The Negatives:

• Outdated Compilation Dependencies: The default asset compilation packages caused errors on modern Node.js versions, requiring a manual upgrade of the Webpack loader configurations.

• Bloated Sample Code: It contains several heavy demo scripts that you must manually prune out of your production views to keep the build sizes small.

---

The Result

Using a reliable admin template was a major timesaver for this project. Instead of spending hours styling table margins and form inputs, I spent my development time focusing on database optimization, secure Laravel controllers, and server speed configurations.

The client's fleet portal is now fully operational. The drivers can submit logs quickly from their tablets, the database queries load without lag, and the pages load instantly even on rural delivery routes. It is not a flawless system out of the box, but with a few minor asset adjustments, it served as an incredibly stable foundation for our fleet application.