DOCSEARCHbyAlgolia
Submit Docs

Mosaic Lite Laravel Admin Dashboard Template

repository·main·Indexed 19 days ago

https://github.com/cruip/laravel-tailwindcss-admin-dashboard-template

A responsive admin dashboard template built with Tailwind CSS and Laravel Jetstream using the Livewire and Blade stack. Designed as a foundation for SaaS products and admin panels, it includes features such as a dark mode switcher, flatpickr date range pickers, and custom Chart.js plugins for area gradients and background colors.

Tokens
2.3K
Snippets
9
Records
10
Agent score
66%

What's inside Mosaic Lite Laravel

  1. Generate and Manage Test Data

    main

    The template includes pre-made database seeders to populate your application with test data.

    To generate the data, run: php artisan db:seed

    Warning on Duplication: Running this command multiple times will duplicate the data in your tables. To avoid duplicate test data, you should truncate the datafeeds table in your database before re-seeding.

    php artisan db:seed

  2. Compile Frontend Assets

    main

    The template uses NPM to manage and compile CSS and JS assets.

    • Install dependencies: npm install
    • Development mode: Run npm run dev to start a development server that automatically re-compiles static assets when you make changes.
    • Production mode: Run npm run build to compile and minify assets for production use.
    npm install
npm run dev
# or for production
npm run build

  3. Install and Setup Mosaic Lite Laravel

    main

    Follow these steps to set up the Mosaic Lite Laravel dashboard template on your local machine:

    1. Configure Environment: Update your .env file with your database credentials (database name, username, password, and port).
    2. Install PHP Dependencies: Run composer install or php composer.phar install in the project root.
    3. Migrate Database: Run php artisan migrate to create the necessary database tables.
    4. Seed Test Data: Run php artisan db:seed to populate the database with pre-made test data.
    5. Install Frontend Dependencies: Run npm install to install NPM packages.
    6. Compile Assets: Use npm run dev for development or npm run build for production.
    7. Start Server: Run php artisan serve to launch the Laravel backend.
    # Install PHP dependencies
composer install

# Setup database
php artisan migrate
php artisan db:seed

# Setup frontend
npm install
npm run dev

# Start application
php artisan serve

  4. Use the built-in Dark Mode switcher

    main

    The dashboard includes a global dark mode toggle system.

    Implementation Details:

    • Trigger: Any element with the class .light-switch acts as a toggle.
    • Persistence: The preference is saved to localStorage under the key 'dark-mode'.
    • Events: When the mode changes, a custom browser event named darkMode is dispatched. You can listen for this event to update other parts of your application.
    • Styling: It toggles the .dark class on the <html> element and updates the color-scheme CSS property.
    // Listening for dark mode changes in your own scripts
document.addEventListener('darkMode', (event) => {
  const mode = event.detail.mode; // 'on' or 'off'
  console.log('Dark mode is now:', mode);
});

  5. Initialize datepickers with the .datepicker class

    main

    The template uses flatpickr to initialize date range pickers. To use the pre-configured styling and behavior, add the .datepicker class to your input elements.

    Default Configuration:

    • Mode: range (selects a start and end date).
    • Format: M j, Y (e.g., Jan 1, 2023).
    • Behavior: The input value is automatically formatted to replace the 'to' separator with a '-' (e.g., Jan 1 - Jan 7, 2023).
    • Customization: You can pass a custom CSS class via the data-class attribute on the input element to style the calendar container.
    <!-- Standard date range picker -->
<input type="text" class="datepicker" />

<!-- Date picker with custom calendar styling -->
<input type="text" class="datepicker" data-class="my-custom-calendar-class" />

  6. Configure core application settings in config/app.php

    main

    The config/app.php file defines the core behavior of the Laravel application. Most settings are driven by environment variables defined in your .env file. Key configuration areas include:

    • Identity & Environment: Set APP_NAME, APP_ENV (e.g., local, production), and APP_DEBUG (boolean) to control error reporting and application identity.
    • URLs: APP_URL is used by the Artisan CLI to generate URLs, and ASSET_URL can be used to define a base URL for assets.
    • Localization: Control the application's language via locale and fallback_locale. The faker_locale setting determines the localization used by the Faker library during database seeding.
    • Security: The key (loaded via APP_KEY) is used for encryption. It should be a random 32-character string. The cipher defaults to AES-256-CBC.
    • Maintenance Mode: The maintenance.driver setting determines how maintenance mode is managed. Supported drivers are file and cache.

  7. Configure chart area background color via chartAreaPlugin

    main

    The template includes a custom Chart.js plugin named chartAreaPlugin. This plugin allows you to set a background color for the entire chart area by adding a chartArea object to your chart's options.

    To use it, include a chartArea key in your Chart.js configuration object with a backgroundColor property.

    new Chart(ctx, {
  type: 'line',
  data: { ... },
  options: {
    chartArea: {
      backgroundColor: 'rgba(0, 0, 0, 0.05)'
    },
    // ... other options
  }
});

  8. Register Service Providers and Class Aliases

    main

    The application uses providers and aliases arrays to bootstrap functionality:

    • Service Providers: The providers array contains classes that are automatically loaded on every request. This template includes default Laravel providers and specific providers for Fortify and Jetstream.
    • Class Aliases: The aliases array allows you to register 'lazy' loaded class aliases (Facades) for easier access within the application.
    'providers' => ServiceProvider::defaultProviders()->merge([
    App\Providers\AppServiceProvider::class,
    App\Providers\AuthServiceProvider::class,
    App\Providers\EventServiceProvider::class,
    App\Providers\RouteServiceProvider::class,
    App\Providers\FortifyServiceProvider::class,
    App\Providers\JetstreamServiceProvider::class,
])->toArray(),

'aliases' => Facade::defaultAliases()->merge([
    // 'Example' => App\Facades\Example::class,
])->toArray(),

  9. Reference core application configuration keys

    main

    The following keys are available in config/app.php. Most values are retrieved from the .env file using the env() helper.

    'name' => env('APP_NAME', 'Laravel'),
'env' => env('APP_ENV', 'production'),
'debug' => (bool) env('APP_DEBUG', false),
'url' => env('APP_URL', 'http://localhost'),
'asset_url' => env('ASSET_URL'),
'timezone' => 'UTC',
'locale' => 'en',
'fallback_locale' => 'en',
'faker_locale' => 'en_US',
'key' => env('APP_KEY'),
'cipher' => 'AES-256-CBC',
'maintenance' => [
    'driver' => 'file',
],

  10. Generate chart area gradients with chartAreaGradient()

    main

    The chartAreaGradient function is an exported utility used to create linear gradients for Chart.js line charts. It takes a canvas context, the chart area dimensions, and an array of color stops to return a CSS-compatible gradient object.

    Parameters:

    • ctx: The 2D drawing context of the canvas.
    • chartArea: An object containing the dimensions of the chart area (e.g., top, bottom, left, right).
    • colorStops: An array of objects containing { stop: number, color: string } (where stop is a value between 0 and 1).

    If any required parameter is missing or colorStops is empty, it returns 'transparent'.

    import { chartAreaGradient } from './path/to/app.js';

// Example usage within a Chart.js configuration
const gradient = chartAreaGradient(ctx, chartArea, [
  { stop: 0, color: 'rgba(255, 0, 0, 0)' },
  { stop: 1, color: 'rgba(255, 0, 0, 1)' }
]);