JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ServiceReport Pro - Professional Service Reports</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- Loading Screen -->
    <div id="loading-screen" class="loading-screen">
        <div class="loading-spinner">
            <i class="fas fa-clipboard-list"></i>
            <p>Loading ServiceReport Pro...</p>
        </div>
    </div>

    <!-- App Container -->
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-clipboard-list"></i>
                    <span>ServiceReport Pro</span>
                </div>
                <button class="sidebar-toggle" onclick="toggleSidebar()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <nav class="sidebar-nav">
                <a href="#dashboard" class="nav-link active" data-view="dashboard">
                    <i class="fas fa-home"></i>
                    <span>Dashboard</span>
                </a>
                <a href="#reports" class="nav-link" data-view="reports">
                    <i class="fas fa-file-alt"></i>
                    <span>All Reports</span>
                </a>
                <a href="#customers" class="nav-link" data-view="customers">
                    <i class="fas fa-users"></i>
                    <span>Customers</span>
                </a>
                <a href="#machines" class="nav-link" data-view="machines">
                    <i class="fas fa-cogs"></i>
                    <span>Machines</span>
                </a>
     ...

CSS

/* ServiceReport Pro - Complete CSS */

/* ===== CSS VARIABLES ===== */
:root {
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: #60a5fa;
    --secondary-color: #64748b;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #06b6d4;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-dark: #1e293b;
    --bg-sidebar: #0f172a;
    
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --text-white: #ffffff;
    
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
}

/* ===== BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ===== LOADING SCREEN ===== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.loading-screen.hidden {
    opacity: 0;
    visibility:...

JavaScript

// ServiceReport Pro - Complete JavaScript Application

// ===== APPLICATION STATE =====
const AppState = {
    currentView: 'dashboard',
    currentReport: null,
    reports: [],
    customers: [],
    machines: [],
    settings: {
        autoSave: true,
        theme: 'light',
        language: 'en'
    },
    filters: {
        status: 'all',
        dateRange: 'all',
        customer: 'all'
    },
    sortBy: 'date',
    sortOrder: 'desc'
};

// ===== INITIALIZATION =====
document.addEventListener('DOMContentLoaded', function() {
    console.log('🚀 ServiceReport Pro Initializing...');
    
    // Hide loading screen
    setTimeout(() => {
        const loadingScreen = document.getElementById('loading-screen');
        if (loadingScreen) {
            loadingScreen.classList.add('hidden');
            setTimeout(() => loadingScreen.remove(), 300);
        }
    }, 1000);
    
    // Initialize application
    initializeApp();
    setupEventListeners();
    loadStoredData();
    renderCurrentView();
    
    console.log('✅ ServiceReport Pro Ready!');
    showToast('Welcome to ServiceReport Pro!', 'success');
});

// ===== CORE FUNCTIONS =====
function initializeApp() {
    // Set up navigation
    setupNavigation();
    
    // Initialize dashboard
    updateDashboardStats();
    
    // Set up auto-save
    if (AppState.settings.autoSave) {
        setupAutoSave();
    }
    
    // Initialize search
    setupSearch();
}

function setupNavigation() {
    // Handle navigation links
    document.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const view = this.getAttribute('data-view');
            showView(view);
        });
    });
}

function setupEventListeners() {
    // Global click handler for dropdowns
    document.addEventListener('click', function(e) {
        // Close dropdowns...