Templates & Applications

UltraViolet Pro includes a comprehensive set of pre-built application templates for common use cases. These templates provide complete, functional interfaces that can be customized for your specific needs.

📚 New Documentation: For detailed information about each application, see the Applications & Templates section.

Overview

The templates section includes fully functional applications with:

Complete UI/UX design
Interactive features
Responsive layouts
Integration examples
Best practices implementation

Email Application

A full-featured email client interface with inbox, compose, and email viewing.

Route: /admin/apps/email

Email Inbox

<div class="row">
    <!-- Email Sidebar -->
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <button class="btn btn-primary w-100 mb-3">
                    <i class="material-symbols-rounded me-2">edit</i>
                    Compose
                </button>

                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            <i class="material-symbols-rounded me-2">inbox</i>
                            Inbox <span class="badge bg-primary ms-auto">24</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="material-symbols-rounded me-2">send</i>
                            Sent
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="material-symbols-rounded me-2">drafts</i>
                            Drafts <span class="badge bg-secondary ms-auto">5</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="material-symbols-rounded me-2">star</i>
                            Starred
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="material-symbols-rounded me-2">delete</i>
                            Trash
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Email List -->
    <div class="col-md-9">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Inbox</h5>
                    <div class="d-flex gap-2">
                        <input type="search" class="form-control" placeholder="Search emails...">
                        <button class="btn btn-outline-secondary">
                            <i class="material-symbols-rounded">refresh</i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="list-group list-group-flush">
                <!-- Email items -->
            </div>
        </div>
    </div>
</div>

Features

Inbox management
Email composition with rich text editor
Attachments support
Folder organization
Search and filters
Star/flag emails

Chat Application

Real-time chat interface with contact list and message history.

Route: /admin/apps/chat

Chat Interface

<div class="row g-0">
    <!-- Contacts Sidebar -->
    <div class="col-md-4 border-end">
        <div class="chat-sidebar">
            <div class="p-3 border-bottom">
                <input type="search" class="form-control" placeholder="Search contacts...">
            </div>
            <div class="list-group list-group-flush">
                <a href="#" class="list-group-item list-group-item-action active">
                    <div class="d-flex align-items-center">
                        <img src="./images/avatar1.jpg" class="rounded-circle me-3" width="40" height="40">
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between">
                                <h6 class="mb-0">John Doe</h6>
                                <small class="text-muted">2m ago</small>
                            </div>
                            <small class="text-muted">Hey, how are you?</small>
                        </div>
                        <span class="badge bg-primary rounded-pill">3</span>
                    </div>
                </a>
                <!-- More contacts -->
            </div>
        </div>
    </div>

    <!-- Chat Area -->
    <div class="col-md-8">
        <div class="chat-area">
            <div class="chat-header p-3 border-bottom">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <img src="./images/avatar1.jpg" class="rounded-circle me-3" width="40" height="40">
                        <div>
                            <h6 class="mb-0">John Doe</h6>
                            <small class="text-success">Online</small>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <button class="btn btn-sm btn-outline-secondary">
                            <i class="material-symbols-rounded">call</i>
                        </button>
                        <button class="btn btn-sm btn-outline-secondary">
                            <i class="material-symbols-rounded">videocam</i>
                        </button>
                        <button class="btn btn-sm btn-outline-secondary">
                            <i class="material-symbols-rounded">more_vert</i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="chat-messages p-3" style="height: 500px; overflow-y: auto;">
                <!-- Messages -->
            </div>

            <div class="chat-input p-3 border-top">
                <div class="input-group">
                    <button class="btn btn-outline-secondary">
                        <i class="material-symbols-rounded">attach_file</i>
                    </button>
                    <input type="text" class="form-control" placeholder="Type a message...">
                    <button class="btn btn-primary">
                        <i class="material-symbols-rounded">send</i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Features

Real-time messaging with Livewire
Contact management
Online/offline status
File attachments
Emoji support
Message search
Group chats

Calendar Application

Event management with FullCalendar integration.

Route: /admin/apps/calendar

Calendar View

<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Calendar</h5>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newEventModal">
                <i class="material-symbols-rounded me-2">add</i>
                New Event
            </button>
        </div>
    </div>
    <div class="card-body">
        <div id="calendar"></div>
    </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.13/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        editable: true,
        selectable: true,
        events: [
            {
                title: 'Team Meeting',
                start: '2025-10-16T10:00:00',
                end: '2025-10-16T11:00:00',
                backgroundColor: '#6366f1'
            }
        ],
        eventClick: function(info) {
            // Show event details modal
        }
    });
    calendar.render();
});
</script>

Features

Multiple calendar views (month, week, day, list)
Drag and drop events
Event creation and editing
Recurring events
Event categories and colors
Google Calendar integration ready

Taskboard

Kanban-style task management with drag-and-drop.

Route: /admin/apps/taskboard

Kanban Board

<div class="row g-3">
    <div class="col-md-3">
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h6 class="mb-0">To Do</h6>
                <span class="badge bg-white text-secondary">5</span>
            </div>
            <div class="card-body sortable-list" id="todo-list">
                <div class="task-card mb-2">
                    <h6>Update documentation</h6>
                    <p class="text-muted small">Due: Oct 18, 2025</p>
                    <div class="d-flex justify-content-between">
                        <span class="badge bg-primary">Documentation</span>
                        <img src="./images/avatar1.jpg" class="rounded-circle" width="24" height="24">
                    </div>
                </div>
                <!-- More tasks -->
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-header bg-warning text-white">
                <h6 class="mb-0">In Progress</h6>
                <span class="badge bg-white text-warning">3</span>
            </div>
            <div class="card-body sortable-list" id="inprogress-list">
                <!-- Tasks -->
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0">Review</h6>
                <span class="badge bg-white text-info">2</span>
            </div>
            <div class="card-body sortable-list" id="review-list">
                <!-- Tasks -->
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0">Done</h6>
                <span class="badge bg-white text-success">8</span>
            </div>
            <div class="card-body sortable-list" id="done-list">
                <!-- Tasks -->
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
// Initialize sortable lists
['todo-list', 'inprogress-list', 'review-list', 'done-list'].forEach(listId => {
    new Sortable(document.getElementById(listId), {
        group: 'tasks',
        animation: 150,
        ghostClass: 'sortable-ghost'
    });
});
</script>

Features

Drag and drop tasks
Multiple task lists
Task assignments
Due dates and priorities
Labels and categories
Progress tracking

Invoice Application

Invoice generation and management system.

Route: /admin/apps/invoice

Invoice Template

<div class="card">
    <div class="card-body">
        <div class="invoice-header mb-4">
            <div class="row">
                <div class="col-md-6">
                    <img src="./images/logo.png" width="150" alt="Logo">
                    <div class="mt-3">
                        <h2>INVOICE</h2>
                        <p class="mb-0">Invoice #INV-2025-001</p>
                        <p class="text-muted">Date: October 16, 2025</p>
                    </div>
                </div>
                <div class="col-md-6 text-end">
                    <h6>From:</h6>
                    <p>
                        Your Company Name<br>
                        123 Business St<br>
                        City, State 12345<br>
                        contact@yourcompany.com
                    </p>
                </div>
            </div>
        </div>

        <div class="invoice-to mb-4">
            <div class="row">
                <div class="col-md-6">
                    <h6>Bill To:</h6>
                    <p>
                        Client Name<br>
                        456 Client Ave<br>
                        City, State 67890<br>
                        client@email.com
                    </p>
                </div>
                <div class="col-md-6 text-end">
                    <h6>Payment Details:</h6>
                    <p>
                        Payment Method: Bank Transfer<br>
                        Due Date: October 31, 2025<br>
                        Status: <span class="badge bg-warning">Pending</span>
                    </p>
                </div>
            </div>
        </div>

        <div class="invoice-items mb-4">
            <table class="table">
                <thead class="table-light">
                    <tr>
                        <th>Item</th>
                        <th>Description</th>
                        <th class="text-end">Qty</th>
                        <th class="text-end">Rate</th>
                        <th class="text-end">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Web Design</td>
                        <td>Homepage redesign</td>
                        <td class="text-end">1</td>
                        <td class="text-end">$2,500.00</td>
                        <td class="text-end">$2,500.00</td>
                    </tr>
                    <tr>
                        <td>Development</td>
                        <td>Custom features implementation</td>
                        <td class="text-end">40</td>
                        <td class="text-end">$75.00</td>
                        <td class="text-end">$3,000.00</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4" class="text-end"><strong>Subtotal:</strong></td>
                        <td class="text-end">$5,500.00</td>
                    </tr>
                    <tr>
                        <td colspan="4" class="text-end"><strong>Tax (10%):</strong></td>
                        <td class="text-end">$550.00</td>
                    </tr>
                    <tr class="table-active">
                        <td colspan="4" class="text-end"><strong>Total:</strong></td>
                        <td class="text-end"><strong>$6,050.00</strong></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div class="invoice-footer">
            <div class="row">
                <div class="col-md-6">
                    <h6>Notes:</h6>
                    <p class="text-muted">Payment is due within 15 days. Please make checks payable to Your Company Name.</p>
                </div>
                <div class="col-md-6 text-end">
                    <button class="btn btn-primary me-2">
                        <i class="material-symbols-rounded me-2">print</i>
                        Print
                    </button>
                    <button class="btn btn-success">
                        <i class="material-symbols-rounded me-2">download</i>
                        Download PDF
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Features

Professional invoice templates
PDF generation
Automatic calculations
Multiple currency support
Payment tracking
Invoice history

Maps Application

Interactive maps with markers and location features.

Route: /admin/apps/maps

Map Interface

<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0">Interactive Map</h5>
    </div>
    <div class="card-body">
        <div id="map" style="height: 600px;"></div>
    </div>
</div>

<script>
// Google Maps integration example
function initMap() {
    const map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
    });

    // Add markers
    const marker = new google.maps.Marker({
        position: { lat: -34.397, lng: 150.644 },
        map: map,
        title: 'Location Name'
    });
}
</script>

Features

Interactive Google Maps integration
Custom markers and popups
Geolocation services
Route planning
Location search
Layer controls

Text Editor

Rich text editing with formatting options.

Route: /admin/apps/editor

Editor Interface

<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0">Rich Text Editor</h5>
    </div>
    <div class="card-body">
        <div class="editor-toolbar mb-2">
            <div class="btn-group btn-group-sm me-2">
                <button class="btn btn-outline-secondary" data-command="bold">
                    <i class="material-symbols-rounded">format_bold</i>
                </button>
                <button class="btn btn-outline-secondary" data-command="italic">
                    <i class="material-symbols-rounded">format_italic</i>
                </button>
                <button class="btn btn-outline-secondary" data-command="underline">
                    <i class="material-symbols-rounded">format_underlined</i>
                </button>
            </div>
            <div class="btn-group btn-group-sm me-2">
                <button class="btn btn-outline-secondary" data-command="justifyLeft">
                    <i class="material-symbols-rounded">format_align_left</i>
                </button>
                <button class="btn btn-outline-secondary" data-command="justifyCenter">
                    <i class="material-symbols-rounded">format_align_center</i>
                </button>
                <button class="btn btn-outline-secondary" data-command="justifyRight">
                    <i class="material-symbols-rounded">format_align_right</i>
                </button>
            </div>
        </div>

        <div class="editor-content border rounded p-3" contenteditable="true" style="min-height: 400px;">
            <p>Start typing here...</p>
        </div>
    </div>
</div>

Features

Rich text formatting
Image insertion
Link management
Tables
Code blocks
Save and export options

AI Agent

AI-powered chat interface for intelligent assistance.

Route: /admin/apps/ai-agent

AI Chat Interface

<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0">
            <i class="material-symbols-rounded me-2">psychology</i>
            AI Assistant
        </h5>
    </div>
    <div class="card-body">
        <div class="ai-chat-container" style="height: 500px; overflow-y: auto;">
            <div class="message ai-message mb-3">
                <div class="d-flex">
                    <div class="avatar me-3">
                        <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center" 
                             style="width: 40px; height: 40px;">
                            <i class="material-symbols-rounded text-white">smart_toy</i>
                        </div>
                    </div>
                    <div class="message-content">
                        <p class="mb-0">Hello! I'm your AI assistant. How can I help you today?</p>
                        <small class="text-muted">Just now</small>
                    </div>
                </div>
            </div>

            <div class="message user-message mb-3">
                <div class="d-flex flex-row-reverse">
                    <div class="avatar ms-3">
                        <img src="./images/avatar.jpg" class="rounded-circle" width="40" height="40">
                    </div>
                    <div class="message-content text-end">
                        <p class="mb-0">Help me write a professional email</p>
                        <small class="text-muted">Just now</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="ai-input mt-3">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Type your message...">
                <button class="btn btn-primary">
                    <i class="material-symbols-rounded">send</i>
                </button>
            </div>
        </div>
    </div>
</div>

Features

AI-powered responses
Conversation history
Context awareness
Code assistance
Natural language processing
Multiple AI models support

Micro Blog

Simple blogging platform with posts and comments.

Route: /admin/apps/micro-blog

Blog Interface

<div class="row">
    <div class="col-md-8">
        <!-- Blog Posts -->
        <div class="card mb-3">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <img src="./images/avatar1.jpg" class="rounded-circle me-3" width="48" height="48">
                    <div>
                        <h6 class="mb-0">John Doe</h6>
                        <small class="text-muted">2 hours ago</small>
                    </div>
                </div>
                <h5 class="card-title">Getting started with UltraViolet</h5>
                <p class="card-text">Just installed UltraViolet and loving the design! The documentation is excellent and setup was a breeze.</p>
                <div class="d-flex gap-3 text-muted">
                    <button class="btn btn-sm btn-outline-secondary">
                        <i class="material-symbols-rounded me-1">thumb_up</i> 24
                    </button>
                    <button class="btn btn-sm btn-outline-secondary">
                        <i class="material-symbols-rounded me-1">comment</i> 5
                    </button>
                    <button class="btn btn-sm btn-outline-secondary">
                        <i class="material-symbols-rounded me-1">share</i>
                    </button>
                </div>
            </div>
        </div>
        <!-- More posts -->
    </div>

    <div class="col-md-4">
        <!-- Sidebar -->
        <div class="card mb-3">
            <div class="card-body">
                <h6>Create Post</h6>
                <textarea class="form-control mb-2" rows="3" placeholder="What's on your mind?"></textarea>
                <button class="btn btn-primary w-100">Post</button>
            </div>
        </div>
    </div>
</div>

Features

Post creation and editing
Comments system
Likes and reactions
Hashtags support
User mentions
Media attachments

Best Practices

Customization: Adapt templates to your specific needs
Performance: Optimize for your data volume
Security: Implement proper authentication and authorization
UX: Maintain consistent user experience
Mobile: Ensure templates work on all devices
Accessibility: Follow WCAG guidelines

Production Usage

All templates are included in both editions with mock data for demonstration. For production use, integrate with your backend APIs and databases.

Documentation

Getting Started

Authentication

Livewire

Dashboard & Widgets

Applications

UI Components

Data Visualization

E-commerce

Job Board

Cryptocurrency

Advanced

Templates & Applications

Templates & Applications

Overview

Email Application

Email Inbox

Features

Chat Application

Chat Interface

Features

Calendar Application

Calendar View

Features

Taskboard

Kanban Board

Features

Invoice Application

Invoice Template

Features

Maps Application

Map Interface

Features

Text Editor

Editor Interface

Features

AI Agent

AI Chat Interface

Features

Micro Blog

Blog Interface

Features

Best Practices

Production Usage