# Viartas Admin Theme

A modern, elegant admin panel theme for Laravel applications using jQuery and Bootstrap 5.

![Viartas Admin Theme](https://via.placeholder.com/1200x600?text=Viartas+Admin+Theme)

## Features

- 🎨 **Modern Design** - Clean, professional UI with attention to detail
- 📱 **Fully Responsive** - Works seamlessly on desktop, tablet, and mobile
- 🌙 **Dark Mode** - Built-in dark theme support
- ⚡ **Fast & Lightweight** - Optimized for performance
- 🔧 **Highly Customizable** - Easy to modify via CSS variables and config
- 📦 **Laravel Package** - Simple installation via Composer
- 🎭 **Bootstrap 5** - Built on the latest Bootstrap framework
- 💡 **jQuery Powered** - Smooth interactions and animations

## Requirements

- PHP 8.1+
- Laravel 10.x or 11.x
- Node.js 18+ (for asset compilation)

## Installation

### Step 1: Install via Composer

```bash
composer require viartas/admin-theme
```

### Step 2: Publish Assets

```bash
# Publish all assets (recommended)
php artisan vendor:publish --tag=viartas-all

# Or publish individually
php artisan vendor:publish --tag=viartas-config
php artisan vendor:publish --tag=viartas-views
php artisan vendor:publish --tag=viartas-assets
```

### Step 3: Run Migrations (Optional)

```bash
php artisan migrate
```

### Step 4: Install NPM Dependencies (Optional - for customization)

```bash
cd vendor/viartas/admin-theme
npm install
npm run build
```

## Quick Start

### Using the Layout

Extend the base layout in your Blade views:

```blade
@extends('viartas::accounting.layout')

@section('title', 'My Page Title')

@section('content')
    <div class="vt-page-header">
        <h1 class="vt-page-title">Welcome</h1>
    </div>
    
    <div class="vt-card">
        <div class="vt-card-body">
            Your content here...
        </div>
    </div>
@endsection
```

### Card Styles

The theme includes beautiful modern card variants:

```blade
{{-- Basic Card --}}
<div class="card">
    <div class="card-header">
        <h5 class="card-title">Card Title</h5>
    </div>
    <div class="card-body">
        <p class="card-text">Your content here...</p>
    </div>
</div>

{{-- Card with Glow Effect --}}
<div class="card card-glow">
    <div class="card-body">
        <h5 class="card-title">Glowing Card</h5>
        <p class="card-text">Beautiful glow effect on hover</p>
    </div>
</div>

{{-- Card with Top Accent --}}
<div class="card card-accent">...</div>
<div class="card card-accent accent-success">...</div>
<div class="card card-accent accent-danger">...</div>

{{-- Glassmorphism Card --}}
<div class="card card-glass">...</div>

{{-- Gradient Cards --}}
<div class="card card-gradient-primary">...</div>
<div class="card card-gradient-success">...</div>
<div class="card card-gradient-ocean">...</div>
<div class="card card-gradient-sunset">...</div>

{{-- Card with Icon Badge --}}
<div class="card card-icon-badge">
    <div class="card-icon"><i class="fa-solid fa-chart-line"></i></div>
    <div class="card-body">...</div>
</div>

{{-- Interactive Card --}}
<div class="card card-interactive card-hover-lift">...</div>

{{-- Card with Ribbon --}}
<div class="card card-ribbon">
    <span class="ribbon">New</span>
    <div class="card-body">...</div>
</div>
```

### Using Components

The theme supports both Bootstrap Icons and Font Awesome 6:

```blade
{{-- Using Bootstrap Icons --}}
<div class="vt-stats-icon primary">
    <i class="bi bi-currency-dollar"></i>
</div>

{{-- Using Font Awesome --}}
<div class="vt-stats-icon success">
    <i class="fa-solid fa-chart-line"></i>
</div>

{{-- Menu with Font Awesome --}}
<div class="vt-menu-item">
    <a href="#" class="vt-menu-link">
        <span class="vt-menu-icon"><i class="fa-solid fa-house"></i></span>
        <span class="vt-menu-text">Dashboard</span>
    </a>
</div>

{{-- Button --}}
<button class="vt-btn vt-btn-primary">
    <i class="fa-solid fa-plus"></i>
    Add New
</button>

{{-- Badge --}}
<span class="vt-badge vt-badge-success">Active</span>
```

## Configuration

Publish the config file and customize:

```php
// config/viartas-theme.php

return [
    'name' => 'My Admin Panel',
    
    'logo' => [
        'text' => 'ADMIN',
    ],
    
    'colors' => [
        'primary' => '#6366f1',
        // ...
    ],
    
    'sidebar' => [
        'collapsed' => false,
        'dark_mode' => true,
    ],
    
    'menu' => [
        [
            'title' => 'Dashboard',
            'icon' => 'grid',
            'route' => 'dashboard',
        ],
        // ...
    ],
];
```

## CSS Variables

Customize the theme using CSS variables:

```css
:root {
    --vt-primary: #6366f1;
    --vt-sidebar-width: 280px;
    --vt-header-height: 70px;
    --vt-radius: 10px;
    /* ... */
}
```

## JavaScript API

```javascript
// Toggle sidebar
ViartasTheme.toggleSidebar();

// Toggle dark mode
ViartasTheme.toggleTheme();

// Show toast notification
ViartasTheme.showToast({
    title: 'Success!',
    message: 'Your changes have been saved.',
    type: 'success', // success, danger, warning, info
    duration: 5000
});

// Show confirmation dialog
ViartasTheme.confirm({
    title: 'Delete Item?',
    message: 'This action cannot be undone.',
    confirmText: 'Delete',
    confirmClass: 'vt-btn-danger',
    onConfirm: () => {
        // Handle confirmation
    }
});
```

## Directory Structure

```
viartas-theme/
├── components/
│   └── accounting/
│       └── menus/
│           └── sidebar/
│               ├── inner.blade.php
│               └── render.blade.php
├── config/
│   └── viartas-theme.php
├── database/
│   └── 2025_06_08_182532_install_viartas_theme.php
├── public/
│   ├── css/
│   │   └── app.css
│   ├── js/
│   │   └── app.js
│   └── images/
├── resources/
│   ├── css/
│   │   └── app.css
│   ├── js/
│   │   └── app.js
│   └── theme/
│       └── accounting/
│           ├── partials/
│           │   ├── header.blade.php
│           │   ├── sidebar.blade.php
│           │   └── message.blade.php
│           ├── layout.blade.php
│           └── dashboard.blade.php
├── routes/
│   └── accounting.php
├── src/
│   └── Providers/
│       └── ThemeServiceProvider.php
├── composer.json
├── package.json
├── vite.config.js
└── README.md
```

## Available Classes

### Layout
- `.vt-wrapper` - Main wrapper
- `.vt-sidebar` - Sidebar container
- `.vt-main` - Main content area
- `.vt-header` - Header component
- `.vt-content` - Content wrapper

### Cards
- `.vt-card` - Base card
- `.vt-card-header` - Card header
- `.vt-card-body` - Card body
- `.vt-card-footer` - Card footer
- `.vt-stats-card` - Statistics card

### Buttons
- `.vt-btn` - Base button
- `.vt-btn-primary` - Primary button
- `.vt-btn-secondary` - Secondary button
- `.vt-btn-outline` - Outline button
- `.vt-btn-sm` - Small button
- `.vt-btn-lg` - Large button

### Badges
- `.vt-badge` - Base badge
- `.vt-badge-primary` - Primary badge
- `.vt-badge-success` - Success badge
- `.vt-badge-danger` - Danger badge
- `.vt-badge-warning` - Warning badge
- `.vt-badge-info` - Info badge

### Tables
- `.vt-table` - Styled table

### Forms
- `.vt-form-control` - Input fields
- `.vt-form-select` - Select dropdowns
- `.vt-form-label` - Form labels

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT License. See [LICENSE](LICENSE) for more information.

## Credits

- [Bootstrap 5](https://getbootstrap.com/)
- [jQuery](https://jquery.com/)
- [Bootstrap Icons](https://icons.getbootstrap.com/)
- [Font Awesome 6](https://fontawesome.com/)
- [Chart.js](https://www.chartjs.org/)
- [Plus Jakarta Sans Font](https://fonts.google.com/specimen/Plus+Jakarta+Sans)

---

Made with ❤️ by Viartas
