Email Box Application

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

Route: /admin/apps/email

Overview

The Email Box application provides a complete email management interface with modern UI/UX design. It includes all essential email features like inbox management, email composition, folder organization, and search functionality.

Features

Core Email Features

• Inbox Management - View and organize incoming emails
• Email Composition - Rich text editor for creating emails
• Folder Organization - Inbox, Sent, Drafts, Trash, Starred, Important
• Email Labels - Color-coded labels for categorization
• Search & Filter - Find emails quickly with search functionality
• Email Threading - Group related emails in conversations
• Attachments - Support for file attachments
• Email Actions - Reply, forward, delete, archive, mark as read/unread

UI/UX Features

• Responsive Design - Works on all devices
• Dark/Light Mode - Automatic theme switching
• Modern Interface - Clean, professional design
• Interactive Elements - Smooth animations and transitions
• Accessibility - WCAG compliant with proper ARIA labels

Interface Layout

Email Sidebar

The left sidebar contains:

• Compose Button - Primary action for creating new emails
• Folder Navigation - Inbox, Starred, Important, Drafts, Sent, Trash
• Labels Section - Color-coded labels for email categorization
• Chat Section - Quick access to chat conversations

Email List

The main content area shows:

• Email List - Scrollable list of emails with sender, subject, preview
• Email Actions - Quick actions like star, delete, archive
• Search Bar - Search through emails
• Filter Options - Filter by date, sender, labels

Email Viewer

When an email is selected:

• Email Header - Sender, recipient, subject, date
• Email Content - Full email body with formatting
• Attachments - List of attached files
• Action Buttons - Reply, forward, delete, print

Email Composition

Compose Modal

The compose modal includes:

• Recipients - To, CC, BCC fields with autocomplete
• Subject Line - Email subject input
• Rich Text Editor - Full formatting capabilities
• Attachments - Drag and drop file upload
• Send Options - Send now, schedule, save as draft

Rich Text Editor Features

• Text Formatting - Bold, italic, underline, strikethrough
• Lists - Bulleted and numbered lists
• Links - Insert and edit hyperlinks
• Images - Insert and resize images
• Tables - Create and format tables
• Code Blocks - Syntax highlighted code snippets

Folder Management

Default Folders

• Inbox - New and unread emails
• Starred - Important emails marked with star
• Important - High priority emails
• Drafts - Unsent emails saved as drafts
• Sent Mail - Successfully sent emails
• Trash - Deleted emails

Custom Labels

Users can create custom labels with:

• Color Coding - Choose from predefined colors
• Label Names - Custom label names
• Email Filtering - Filter emails by labels
• Bulk Actions - Apply labels to multiple emails

Search & Filtering

Search Functionality

• Global Search - Search across all emails
• Advanced Search - Search by sender, subject, content, date
• Search Suggestions - Autocomplete for common searches
• Search History - Recent search queries

Filter Options

• Date Range - Filter by specific date ranges
• Sender - Filter by specific senders
• Labels - Filter by email labels
• Read Status - Show read/unread emails
• Attachments - Show emails with attachments

Email Actions

Quick Actions

• Mark as Read/Unread - Toggle read status
• Star/Unstar - Mark as important
• Archive - Move to archive folder
• Delete - Move to trash
• Spam - Mark as spam

Bulk Actions

• Select All - Select all visible emails
• Bulk Delete - Delete multiple emails
• Bulk Archive - Archive multiple emails
• Bulk Label - Apply labels to multiple emails
• Bulk Mark Read - Mark multiple emails as read

Integration Examples

Backend Integration

// Email Controller
class EmailController extends Controller
{
    public function index()
    {
        $emails = Email::with(['sender', 'attachments'])
            ->where('user_id', auth()->id())
            ->latest()
            ->paginate(20);

        return view('admin.apps.email', compact('emails'));
    }

    public function compose()
    {
        return view('admin.apps.email-compose');
    }

    public function send(Request $request)
    {
        $request->validate([
            'to' => 'required|email',
            'subject' => 'required|string|max:255',
            'body' => 'required|string'
        ]);

        $email = Email::create([
            'user_id' => auth()->id(),
            'to' => $request->to,
            'subject' => $request->subject,
            'body' => $request->body,
            'status' => 'sent'
        ]);

        // Send via email service
        Mail::to($request->to)->send(new CustomMail($email));

        return redirect()->back()->with('success', 'Email sent successfully');
    }
}

Livewire Integration

// Email Livewire Component
class EmailBox extends Component
{
    public $emails = [];
    public $selectedFolder = 'inbox';
    public $search = '';

    public function mount()
    {
        $this->loadEmails();
    }

    public function loadEmails()
    {
        $query = Email::where('user_id', auth()->id());

        if ($this->selectedFolder !== 'all') {
            $query->where('folder', $this->selectedFolder);
        }

        if ($this->search) {
            $query->where(function($q) {
                $q->where('subject', 'like', '%' . $this->search . '%')
                  ->orWhere('body', 'like', '%' . $this->search . '%');
            });
        }

        $this->emails = $query->latest()->get();
    }

    public function updatedSearch()
    {
        $this->loadEmails();
    }

    public function selectFolder($folder)
    {
        $this->selectedFolder = $folder;
        $this->loadEmails();
    }

    public function render()
    {
        return view('livewire.email-box');
    }
}

Email Service Integration

// Email Service for external providers
class EmailService
{
    public function syncWithGmail()
    {
        $gmail = new GmailService();
        $messages = $gmail->getMessages();

        foreach ($messages as $message) {
            Email::updateOrCreate([
                'external_id' => $message->id
            ], [
                'user_id' => auth()->id(),
                'from' => $message->from,
                'to' => $message->to,
                'subject' => $message->subject,
                'body' => $message->body,
                'received_at' => $message->date
            ]);
        }
    }

    public function sendViaSMTP($to, $subject, $body)
    {
        return Mail::to($to)->send(new CustomMail($subject, $body));
    }
}

Customization

Styling

// Custom email styles
.email-container {
    .email-leftbar {
        background: var(--bg-sidebar);
        border-right: 1px solid var(--border-color);
    }

    .email-list {
        .email-item {
            &:hover {
                background: var(--bg-hover);
            }

            &.unread {
                font-weight: 600;
            }
        }
    }

    .compose-modal {
        .rich-editor {
            min-height: 300px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }
    }
}

JavaScript Functionality

// Email functionality
class EmailBox {
    constructor() {
        this.initComposeModal();
        this.initEmailActions();
        this.initSearch();
    }

    initComposeModal() {
        const composeBtn = document.getElementById('composeBtn');
        const composeModal = document.getElementById('composeModal');

        composeBtn.addEventListener('click', () => {
            composeModal.classList.add('show');
        });
    }

    initEmailActions() {
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('email-action')) {
                const action = e.target.dataset.action;
                const emailId = e.target.dataset.emailId;
                this.performAction(action, emailId);
            }
        });
    }

    performAction(action, emailId) {
        // Handle email actions
        switch (action) {
            case 'star':
                this.toggleStar(emailId);
                break;
            case 'delete':
                this.deleteEmail(emailId);
                break;
            case 'archive':
                this.archiveEmail(emailId);
                break;
        }
    }
}

Best Practices

1. Performance: Implement pagination for large email lists
2. Security: Validate all email inputs and sanitize content
3. UX: Provide clear feedback for all user actions
4. Mobile: Ensure touch-friendly interface on mobile devices
5. Accessibility: Use proper ARIA labels and keyboard navigation
6. Error Handling: Handle network errors and provide fallbacks

Production Deployment

The Email Box application is ready for production use in both static HTML and Laravel Livewire editions. For production deployment:

1. Configure Email Service - Set up SMTP or email service provider
2. Database Setup - Create necessary tables for email storage
3. File Storage - Configure attachment storage
4. Security - Implement proper authentication and authorization
5. Performance - Set up caching for frequently accessed data