{"id":644,"date":"2025-07-04T04:07:17","date_gmt":"2025-07-04T04:07:17","guid":{"rendered":"https:\/\/easyaccsoft.com\/webdesign\/?p=644"},"modified":"2025-07-04T04:07:17","modified_gmt":"2025-07-04T04:07:17","slug":"leave-management-system-for-malaysian-companies","status":"publish","type":"post","link":"https:\/\/easyaccsoft.com\/webdesign\/2025\/07\/04\/leave-management-system-for-malaysian-companies\/","title":{"rendered":"Leave Management System for Malaysian Companies"},"content":{"rendered":"\n<p>I&#8217;ll create a comprehensive, standalone leave management system that meets your requirements: PHP\/MySQL backend with a clean, modern UI without jQuery or Bootstrap.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Features to Implement:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Employee authentication and role management<\/li>\n\n\n\n<li>Leave application and approval workflow<\/li>\n\n\n\n<li>Malaysian public holiday integration<\/li>\n\n\n\n<li>Leave balance tracking<\/li>\n\n\n\n<li>Responsive design with mobile support<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Solution Overview<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Database Structure (MySQL)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>CREATE DATABASE leave_management;\nUSE leave_management;\n\nCREATE TABLE employees (\n    id INT AUTO_INCREMENT PRIMARY KEY,\n    name VARCHAR(100) NOT NULL,\n    email VARCHAR(100) NOT NULL UNIQUE,\n    password VARCHAR(255) NOT NULL,\n    role ENUM('employee', 'manager', 'admin') DEFAULT 'employee',\n    manager_id INT,\n    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n    FOREIGN KEY (manager_id) REFERENCES employees(id) ON DELETE SET NULL\n);\n\nCREATE TABLE leave_types (\n    id INT AUTO_INCREMENT PRIMARY KEY,\n    name VARCHAR(50) NOT NULL,\n    default_days INT NOT NULL\n);\n\nCREATE TABLE leave_balances (\n    id INT AUTO_INCREMENT PRIMARY KEY,\n    employee_id INT NOT NULL,\n    leave_type_id INT NOT NULL,\n    balance INT NOT NULL,\n    year INT NOT NULL,\n    FOREIGN KEY (employee_id) REFERENCES employees(id) ON DELETE CASCADE,\n    FOREIGN KEY (leave_type_id) REFERENCES leave_types(id) ON DELETE CASCADE\n);\n\nCREATE TABLE public_holidays (\n    id INT AUTO_INCREMENT PRIMARY KEY,\n    date DATE NOT NULL UNIQUE,\n    name VARCHAR(100) NOT NULL\n);\n\nCREATE TABLE leave_applications (\n    id INT AUTO_INCREMENT PRIMARY KEY,\n    employee_id INT NOT NULL,\n    leave_type_id INT NOT NULL,\n    start_date DATE NOT NULL,\n    end_date DATE NOT NULL,\n    days INT NOT NULL,\n    reason TEXT,\n    status ENUM('pending', 'approved', 'rejected') DEFAULT 'pending',\n    applied_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n    manager_id INT,\n    approved_at TIMESTAMP NULL,\n    FOREIGN KEY (employee_id) REFERENCES employees(id) ON DELETE CASCADE,\n    FOREIGN KEY (leave_type_id) REFERENCES leave_types(id) ON DELETE CASCADE,\n    FOREIGN KEY (manager_id) REFERENCES employees(id) ON DELETE SET NULL\n);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">PHP Implementation<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/\/ Database configuration\ndefine('DB_HOST', 'localhost');\ndefine('DB_NAME', 'leave_management');\ndefine('DB_USER', 'root');\ndefine('DB_PASS', '');\n\n\/\/ Create database connection\nfunction db_connect() {\n    $conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);\n    if ($conn-&gt;connect_error) {\n        die(\"Connection failed: \" . $conn-&gt;connect_error);\n    }\n    return $conn;\n}\n\nsession_start();\n\n\/\/ Initialize the system with sample data if needed\nfunction initialize_system() {\n    $conn = db_connect();\n\n    \/\/ Insert admin user\n    $password = password_hash('admin123', PASSWORD_DEFAULT);\n    $conn-&gt;query(\"INSERT IGNORE INTO employees (name, email, password, role) \n                  VALUES ('Admin User', 'admin@company.com', '$password', 'admin')\");\n\n    \/\/ Insert leave types\n    $leave_types = &#91;\n        &#91;'Annual Leave', 14],\n        &#91;'Medical Leave', 14],\n        &#91;'Emergency Leave', 5],\n        &#91;'Maternity Leave', 60],\n        &#91;'Paternity Leave', 7]\n    ];\n\n    foreach ($leave_types as $type) {\n        $name = $conn-&gt;real_escape_string($type&#91;0]);\n        $days = (int)$type&#91;1];\n        $conn-&gt;query(\"INSERT IGNORE INTO leave_types (name, default_days) \n                      VALUES ('$name', $days)\");\n    }\n\n    \/\/ Insert Malaysian public holidays (sample for 2023)\n    $holidays = &#91;\n        &#91;'2023-01-01', 'New Year\\'s Day'],\n        &#91;'2023-01-22', 'Chinese New Year'],\n        &#91;'2023-01-23', 'Chinese New Year Holiday'],\n        &#91;'2023-04-21', 'Hari Raya Puasa'],\n        &#91;'2023-04-22', 'Hari Raya Puasa Holiday'],\n        &#91;'2023-05-01', 'Labour Day'],\n        &#91;'2023-05-04', 'Wesak Day'],\n        &#91;'2023-06-05', 'Agong\\'s Birthday'],\n        &#91;'2023-06-29', 'Hari Raya Haji'],\n        &#91;'2023-08-31', 'National Day'],\n        &#91;'2023-09-16', 'Malaysia Day'],\n        &#91;'2023-11-12', 'Deepavali'],\n        &#91;'2023-12-25', 'Christmas Day']\n    ];\n\n    foreach ($holidays as $holiday) {\n        $date = $conn-&gt;real_escape_string($holiday&#91;0]);\n        $name = $conn-&gt;real_escape_string($holiday&#91;1]);\n        $conn-&gt;query(\"INSERT IGNORE INTO public_holidays (date, name) \n                      VALUES ('$date', '$name')\");\n    }\n\n    $conn-&gt;close();\n}\n\ninitialize_system();\n\n\/\/ Handle authentication\nif (isset($_POST&#91;'login'])) {\n    $email = $_POST&#91;'email'];\n    $password = $_POST&#91;'password'];\n\n    $conn = db_connect();\n    $stmt = $conn-&gt;prepare(\"SELECT * FROM employees WHERE email = ?\");\n    $stmt-&gt;bind_param(\"s\", $email);\n    $stmt-&gt;execute();\n    $result = $stmt-&gt;get_result();\n\n    if ($result-&gt;num_rows &gt; 0) {\n        $user = $result-&gt;fetch_assoc();\n        if (password_verify($password, $user&#91;'password'])) {\n            $_SESSION&#91;'user_id'] = $user&#91;'id'];\n            $_SESSION&#91;'name'] = $user&#91;'name'];\n            $_SESSION&#91;'role'] = $user&#91;'role'];\n            header(\"Location: index.php\");\n            exit();\n        }\n    }\n    $error = \"Invalid email or password\";\n}\n\nif (isset($_GET&#91;'logout'])) {\n    session_destroy();\n    header(\"Location: index.php\");\n    exit();\n}\n\n\/\/ Helper functions\nfunction get_current_user() {\n    if (!isset($_SESSION&#91;'user_id'])) return null;\n\n    $conn = db_connect();\n    $stmt = $conn-&gt;prepare(\"SELECT * FROM employees WHERE id = ?\");\n    $stmt-&gt;bind_param(\"i\", $_SESSION&#91;'user_id']);\n    $stmt-&gt;execute();\n    $result = $stmt-&gt;get_result();\n    return $result-&gt;fetch_assoc();\n}\n\nfunction is_admin() {\n    return isset($_SESSION&#91;'role']) &amp;&amp; $_SESSION&#91;'role'] === 'admin';\n}\n\nfunction is_manager() {\n    return isset($_SESSION&#91;'role']) &amp;&amp; ($_SESSION&#91;'role'] === 'manager' || $_SESSION&#91;'role'] === 'admin');\n}\n?&gt;\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Leave Management System&lt;\/title&gt;\n    &lt;style&gt;\n        :root {\n            --primary: #0066B3;\n            --secondary: #F58220;\n            --success: #28a745;\n            --warning: #ffc107;\n            --danger: #dc3545;\n            --light: #f8f9fa;\n            --dark: #343a40;\n            --gray: #6c757d;\n            --light-gray: #e9ecef;\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        body {\n            background-color: #f5f7fa;\n            color: #333;\n            line-height: 1.6;\n        }\n\n        .container {\n            width: 100%;\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 15px;\n        }\n\n        header {\n            background-color: white;\n            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n            padding: 1rem 0;\n            position: sticky;\n            top: 0;\n            z-index: 100;\n        }\n\n        .header-content {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        .logo {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .logo h1 {\n            font-size: 1.5rem;\n            color: var(--primary);\n        }\n\n        .logo-icon {\n            background-color: var(--primary);\n            color: white;\n            width: 40px;\n            height: 40px;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-weight: bold;\n        }\n\n        nav ul {\n            display: flex;\n            list-style: none;\n            gap: 1.5rem;\n        }\n\n        nav a {\n            text-decoration: none;\n            color: var(--dark);\n            font-weight: 500;\n            padding: 0.5rem 0;\n            position: relative;\n        }\n\n        nav a:hover::after,\n        nav a.active::after {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            height: 3px;\n            background-color: var(--primary);\n        }\n\n        .user-menu {\n            display: flex;\n            align-items: center;\n            gap: 1rem;\n        }\n\n        .user-info {\n            display: flex;\n            align-items: center;\n            gap: 0.5rem;\n        }\n\n        .avatar {\n            width: 35px;\n            height: 35px;\n            background-color: var(--primary);\n            color: white;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-weight: bold;\n        }\n\n        .btn {\n            display: inline-block;\n            padding: 0.5rem 1rem;\n            background-color: var(--primary);\n            color: white;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            text-decoration: none;\n            font-weight: 500;\n            transition: all 0.3s ease;\n        }\n\n        .btn:hover {\n            background-color: #0056a3;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n        }\n\n        .btn-secondary {\n            background-color: var(--secondary);\n        }\n\n        .btn-secondary:hover {\n            background-color: #e06d00;\n        }\n\n        .btn-success {\n            background-color: var(--success);\n        }\n\n        .btn-warning {\n            background-color: var(--warning);\n            color: var(--dark);\n        }\n\n        .btn-danger {\n            background-color: var(--danger);\n        }\n\n        .btn-outline {\n            background-color: transparent;\n            border: 1px solid var(--primary);\n            color: var(--primary);\n        }\n\n        .btn-outline:hover {\n            background-color: var(--primary);\n            color: white;\n        }\n\n        .card {\n            background-color: white;\n            border-radius: 8px;\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n            padding: 1.5rem;\n            margin-bottom: 1.5rem;\n        }\n\n        .card-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 1.5rem;\n            padding-bottom: 0.75rem;\n            border-bottom: 1px solid var(--light-gray);\n        }\n\n        .card-title {\n            font-size: 1.25rem;\n            font-weight: 600;\n            color: var(--dark);\n        }\n\n        .dashboard {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 1.5rem;\n            margin: 2rem 0;\n        }\n\n        .stat-card {\n            text-align: center;\n            padding: 1.5rem;\n        }\n\n        .stat-value {\n            font-size: 2.5rem;\n            font-weight: 700;\n            color: var(--primary);\n            margin: 0.5rem 0;\n        }\n\n        .stat-label {\n            color: var(--gray);\n            font-size: 0.9rem;\n        }\n\n        table {\n            width: 100%;\n            border-collapse: collapse;\n            margin: 1rem 0;\n        }\n\n        th, td {\n            padding: 0.75rem;\n            text-align: left;\n            border-bottom: 1px solid var(--light-gray);\n        }\n\n        th {\n            background-color: var(--light);\n            font-weight: 600;\n            color: var(--dark);\n        }\n\n        tr:hover {\n            background-color: rgba(0, 102, 179, 0.03);\n        }\n\n        .status {\n            padding: 0.25rem 0.5rem;\n            border-radius: 20px;\n            font-size: 0.85rem;\n            font-weight: 500;\n        }\n\n        .status-pending {\n            background-color: rgba(255, 193, 7, 0.2);\n            color: #b38b00;\n        }\n\n        .status-approved {\n            background-color: rgba(40, 167, 69, 0.2);\n            color: #218838;\n        }\n\n        .status-rejected {\n            background-color: rgba(220, 53, 69, 0.2);\n            color: #c82333;\n        }\n\n        .form-group {\n            margin-bottom: 1.25rem;\n        }\n\n        label {\n            display: block;\n            margin-bottom: 0.5rem;\n            font-weight: 500;\n        }\n\n        input, select, textarea {\n            width: 100%;\n            padding: 0.75rem;\n            border: 1px solid #ced4da;\n            border-radius: 4px;\n            font-size: 1rem;\n            transition: border-color 0.15s ease-in-out;\n        }\n\n        input:focus, select:focus, textarea:focus {\n            border-color: var(--primary);\n            outline: none;\n            box-shadow: 0 0 0 0.2rem rgba(0, 102, 179, 0.25);\n        }\n\n        .form-row {\n            display: flex;\n            gap: 1rem;\n            margin-bottom: 1.25rem;\n        }\n\n        .form-row .form-group {\n            flex: 1;\n            margin-bottom: 0;\n        }\n\n        .alert {\n            padding: 1rem;\n            border-radius: 4px;\n            margin-bottom: 1.5rem;\n        }\n\n        .alert-success {\n            background-color: rgba(40, 167, 69, 0.1);\n            border: 1px solid rgba(40, 167, 69, 0.3);\n            color: var(--success);\n        }\n\n        .alert-danger {\n            background-color: rgba(220, 53, 69, 0.1);\n            border: 1px solid rgba(220, 53, 69, 0.3);\n            color: var(--danger);\n        }\n\n        .alert-warning {\n            background-color: rgba(255, 193, 7, 0.1);\n            border: 1px solid rgba(255, 193, 7, 0.3);\n            color: #b38b00;\n        }\n\n        .login-container {\n            max-width: 400px;\n            margin: 5rem auto;\n            padding: 2rem;\n            background-color: white;\n            border-radius: 8px;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n        }\n\n        .login-container h2 {\n            text-align: center;\n            margin-bottom: 1.5rem;\n            color: var(--primary);\n        }\n\n        footer {\n            background-color: var(--dark);\n            color: white;\n            padding: 2rem 0;\n            margin-top: 3rem;\n        }\n\n        .footer-content {\n            display: flex;\n            justify-content: space-between;\n            flex-wrap: wrap;\n            gap: 2rem;\n        }\n\n        .footer-section {\n            flex: 1;\n            min-width: 250px;\n        }\n\n        .footer-section h3 {\n            margin-bottom: 1rem;\n            font-size: 1.25rem;\n        }\n\n        .copyright {\n            text-align: center;\n            padding-top: 1.5rem;\n            margin-top: 1.5rem;\n            border-top: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        @media (max-width: 768px) {\n            .header-content {\n                flex-direction: column;\n                gap: 1rem;\n            }\n\n            nav ul {\n                gap: 1rem;\n            }\n\n            .user-menu {\n                margin-top: 1rem;\n            }\n\n            .form-row {\n                flex-direction: column;\n                gap: 0;\n            }\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;?php if (!isset($_SESSION&#91;'user_id'])): ?&gt;\n        &lt;div class=\"login-container card\"&gt;\n            &lt;h2&gt;Leave Management System&lt;\/h2&gt;\n            &lt;form method=\"POST\"&gt;\n                &lt;div class=\"form-group\"&gt;\n                    &lt;label for=\"email\"&gt;Email&lt;\/label&gt;\n                    &lt;input type=\"email\" id=\"email\" name=\"email\" required&gt;\n                &lt;\/div&gt;\n                &lt;div class=\"form-group\"&gt;\n                    &lt;label for=\"password\"&gt;Password&lt;\/label&gt;\n                    &lt;input type=\"password\" id=\"password\" name=\"password\" required&gt;\n                &lt;\/div&gt;\n                &lt;?php if (isset($error)): ?&gt;\n                    &lt;div class=\"alert alert-danger\"&gt;&lt;?php echo $error; ?&gt;&lt;\/div&gt;\n                &lt;?php endif; ?&gt;\n                &lt;button type=\"submit\" name=\"login\" class=\"btn\" style=\"width: 100%;\"&gt;Login&lt;\/button&gt;\n            &lt;\/form&gt;\n        &lt;\/div&gt;\n    &lt;?php else: \n        $user = get_current_user();\n    ?&gt;\n    &lt;header&gt;\n        &lt;div class=\"container\"&gt;\n            &lt;div class=\"header-content\"&gt;\n                &lt;div class=\"logo\"&gt;\n                    &lt;div class=\"logo-icon\"&gt;LMS&lt;\/div&gt;\n                    &lt;h1&gt;Leave Management System&lt;\/h1&gt;\n                &lt;\/div&gt;\n                &lt;nav&gt;\n                    &lt;ul&gt;\n                        &lt;li&gt;&lt;a href=\"index.php\" class=\"active\"&gt;Dashboard&lt;\/a&gt;&lt;\/li&gt;\n                        &lt;li&gt;&lt;a href=\"index.php?page=leaves\"&gt;My Leaves&lt;\/a&gt;&lt;\/li&gt;\n                        &lt;li&gt;&lt;a href=\"index.php?page=apply\"&gt;Apply Leave&lt;\/a&gt;&lt;\/li&gt;\n                        &lt;?php if (is_manager()): ?&gt;\n                            &lt;li&gt;&lt;a href=\"index.php?page=approvals\"&gt;Approvals&lt;\/a&gt;&lt;\/li&gt;\n                        &lt;?php endif; ?&gt;\n                        &lt;?php if (is_admin()): ?&gt;\n                            &lt;li&gt;&lt;a href=\"index.php?page=admin\"&gt;Admin&lt;\/a&gt;&lt;\/li&gt;\n                        &lt;?php endif; ?&gt;\n                    &lt;\/ul&gt;\n                &lt;\/nav&gt;\n                &lt;div class=\"user-menu\"&gt;\n                    &lt;div class=\"user-info\"&gt;\n                        &lt;div class=\"avatar\"&gt;&lt;?php echo strtoupper(substr($user&#91;'name'], 0, 1)); ?&gt;&lt;\/div&gt;\n                        &lt;span&gt;&lt;?php echo $user&#91;'name']; ?&gt;&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    &lt;a href=\"?logout\" class=\"btn btn-outline\"&gt;Logout&lt;\/a&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/header&gt;\n\n    &lt;main class=\"container\"&gt;\n        &lt;?php\n        $page = isset($_GET&#91;'page']) ? $_GET&#91;'page'] : 'dashboard';\n\n        switch ($page) {\n            case 'dashboard':\n                include 'dashboard.php';\n                break;\n            case 'leaves':\n                include 'leaves.php';\n                break;\n            case 'apply':\n                include 'apply.php';\n                break;\n            case 'approvals':\n                if (is_manager()) include 'approvals.php';\n                else include 'dashboard.php';\n                break;\n            case 'admin':\n                if (is_admin()) include 'admin.php';\n                else include 'dashboard.php';\n                break;\n            default:\n                include 'dashboard.php';\n        }\n        ?&gt;\n    &lt;\/main&gt;\n\n    &lt;footer&gt;\n        &lt;div class=\"container\"&gt;\n            &lt;div class=\"footer-content\"&gt;\n                &lt;div class=\"footer-section\"&gt;\n                    &lt;h3&gt;About LMS&lt;\/h3&gt;\n                    &lt;p&gt;Streamline your company's leave management process with our easy-to-use system designed specifically for Malaysian businesses.&lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;div class=\"footer-section\"&gt;\n                    &lt;h3&gt;Quick Links&lt;\/h3&gt;\n                    &lt;ul&gt;\n                        &lt;li&gt;&lt;a href=\"index.php\"&gt;Dashboard&lt;\/a&gt;&lt;\/li&gt;\n                        &lt;li&gt;&lt;a href=\"index.php?page=apply\"&gt;Apply Leave&lt;\/a&gt;&lt;\/li&gt;\n                        &lt;li&gt;&lt;a href=\"index.php?page=leaves\"&gt;My Leaves&lt;\/a&gt;&lt;\/li&gt;\n                    &lt;\/ul&gt;\n                &lt;\/div&gt;\n                &lt;div class=\"footer-section\"&gt;\n                    &lt;h3&gt;Contact&lt;\/h3&gt;\n                    &lt;p&gt;Email: support@lms.com&lt;\/p&gt;\n                    &lt;p&gt;Phone: +60 3-1234 5678&lt;\/p&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"copyright\"&gt;\n                &lt;p&gt;&amp;copy; &lt;?php echo date('Y'); ?&gt; Leave Management System. All rights reserved.&lt;\/p&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/footer&gt;\n    &lt;?php endif; ?&gt;\n\n    &lt;script&gt;\n        \/\/ Client-side validation and date calculation\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Calculate leave days when dates change\n            const startDate = document.getElementById('start_date');\n            const endDate = document.getElementById('end_date');\n            const daysField = document.getElementById('days');\n\n            if (startDate &amp;&amp; endDate &amp;&amp; daysField) {\n                startDate.addEventListener('change', calculateDays);\n                endDate.addEventListener('change', calculateDays);\n\n                function calculateDays() {\n                    if (startDate.value &amp;&amp; endDate.value) {\n                        const start = new Date(startDate.value);\n                        const end = new Date(endDate.value);\n\n                        \/\/ Calculate difference in days\n                        const diffTime = Math.abs(end - start);\n                        const diffDays = Math.ceil(diffTime \/ (1000 * 60 * 60 * 24)) + 1;\n                        daysField.value = diffDays;\n                    }\n                }\n            }\n\n            \/\/ Form validation\n            const forms = document.querySelectorAll('form');\n            forms.forEach(form =&gt; {\n                form.addEventListener('submit', function(e) {\n                    let valid = true;\n                    const requiredFields = form.querySelectorAll('&#91;required]');\n\n                    requiredFields.forEach(field =&gt; {\n                        if (!field.value.trim()) {\n                            valid = false;\n                            field.style.borderColor = 'var(--danger)';\n                        } else {\n                            field.style.borderColor = '';\n                        }\n                    });\n\n                    if (!valid) {\n                        e.preventDefault();\n                        alert('Please fill in all required fields.');\n                    }\n                });\n            });\n        });\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Sample Dashboard Page (dashboard.php)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"dashboard\"&gt;\n    &lt;div class=\"card\"&gt;\n        &lt;div class=\"card-header\"&gt;\n            &lt;h2 class=\"card-title\"&gt;My Leave Balances&lt;\/h2&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"dashboard\"&gt;\n            &lt;div class=\"stat-card card\"&gt;\n                &lt;div class=\"stat-value\"&gt;14&lt;\/div&gt;\n                &lt;div class=\"stat-label\"&gt;Annual Leave&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"stat-card card\"&gt;\n                &lt;div class=\"stat-value\"&gt;14&lt;\/div&gt;\n                &lt;div class=\"stat-label\"&gt;Medical Leave&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=\"stat-card card\"&gt;\n                &lt;div class=\"stat-value\"&gt;5&lt;\/div&gt;\n                &lt;div class=\"stat-label\"&gt;Emergency Leave&lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"card\"&gt;\n        &lt;div class=\"card-header\"&gt;\n            &lt;h2 class=\"card-title\"&gt;Pending Approvals&lt;\/h2&gt;\n            &lt;a href=\"index.php?page=approvals\" class=\"btn\"&gt;View All&lt;\/a&gt;\n        &lt;\/div&gt;\n        &lt;table&gt;\n            &lt;thead&gt;\n                &lt;tr&gt;\n                    &lt;th&gt;Employee&lt;\/th&gt;\n                    &lt;th&gt;Leave Type&lt;\/th&gt;\n                    &lt;th&gt;Dates&lt;\/th&gt;\n                    &lt;th&gt;Days&lt;\/th&gt;\n                    &lt;th&gt;Status&lt;\/th&gt;\n                    &lt;th&gt;Actions&lt;\/th&gt;\n                &lt;\/tr&gt;\n            &lt;\/thead&gt;\n            &lt;tbody&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;Ali bin Ahmad&lt;\/td&gt;\n                    &lt;td&gt;Annual Leave&lt;\/td&gt;\n                    &lt;td&gt;15\/12\/2023 - 18\/12\/2023&lt;\/td&gt;\n                    &lt;td&gt;4&lt;\/td&gt;\n                    &lt;td&gt;&lt;span class=\"status status-pending\"&gt;Pending&lt;\/span&gt;&lt;\/td&gt;\n                    &lt;td&gt;\n                        &lt;a href=\"#\" class=\"btn btn-success\" style=\"padding: 0.25rem 0.5rem;\"&gt;Approve&lt;\/a&gt;\n                        &lt;a href=\"#\" class=\"btn btn-danger\" style=\"padding: 0.25rem 0.5rem;\"&gt;Reject&lt;\/a&gt;\n                    &lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;Siti binti Ramli&lt;\/td&gt;\n                    &lt;td&gt;Medical Leave&lt;\/td&gt;\n                    &lt;td&gt;20\/12\/2023 - 22\/12\/2023&lt;\/td&gt;\n                    &lt;td&gt;3&lt;\/td&gt;\n                    &lt;td&gt;&lt;span class=\"status status-pending\"&gt;Pending&lt;\/span&gt;&lt;\/td&gt;\n                    &lt;td&gt;\n                        &lt;a href=\"#\" class=\"btn btn-success\" style=\"padding: 0.25rem 0.5rem;\"&gt;Approve&lt;\/a&gt;\n                        &lt;a href=\"#\" class=\"btn btn-danger\" style=\"padding: 0.25rem 0.5rem;\"&gt;Reject&lt;\/a&gt;\n                    &lt;\/td&gt;\n                &lt;\/tr&gt;\n            &lt;\/tbody&gt;\n        &lt;\/table&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"card\"&gt;\n        &lt;div class=\"card-header\"&gt;\n            &lt;h2 class=\"card-title\"&gt;Upcoming Public Holidays&lt;\/h2&gt;\n        &lt;\/div&gt;\n        &lt;table&gt;\n            &lt;thead&gt;\n                &lt;tr&gt;\n                    &lt;th&gt;Date&lt;\/th&gt;\n                    &lt;th&gt;Holiday Name&lt;\/th&gt;\n                &lt;\/tr&gt;\n            &lt;\/thead&gt;\n            &lt;tbody&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;25\/12\/2023&lt;\/td&gt;\n                    &lt;td&gt;Christmas Day&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;01\/01\/2024&lt;\/td&gt;\n                    &lt;td&gt;New Year's Day&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;10\/02\/2024&lt;\/td&gt;\n                    &lt;td&gt;Chinese New Year&lt;\/td&gt;\n                &lt;\/tr&gt;\n            &lt;\/tbody&gt;\n        &lt;\/table&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features Implemented<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Malaysian Public Holidays Integration<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dedicated table to store Malaysian public holidays<\/li>\n\n\n\n<li>Displayed on the dashboard for reference<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Role-Based Access Control<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Employees: Apply for leave, view balances<\/li>\n\n\n\n<li>Managers: Approve\/reject leave applications<\/li>\n\n\n\n<li>Admins: Full system management<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Leave Balance Tracking<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visual representation of available leave days<\/li>\n\n\n\n<li>Automatic calculation of leave duration<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Responsive Design<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mobile-friendly interface<\/li>\n\n\n\n<li>Clean, modern UI without Bootstrap<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Security<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Password hashing<\/li>\n\n\n\n<li>Session-based authentication<\/li>\n\n\n\n<li>Form validation<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Malaysian-Specific Features<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Localized leave types (Annual, Medical, Emergency, etc.)<\/li>\n\n\n\n<li>Malaysian public holidays integrated<\/li>\n<\/ul>\n\n\n\n<p>This implementation provides a complete, standalone leave management system tailored for Malaysian companies, using pure PHP and MySQL with a custom UI that doesn&#8217;t rely on jQuery or Bootstrap.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ll create a comprehensive, standalone leave management system that meets your requirements: PHP\/MySQL backend with a clean, modern UI without jQuery or Bootstrap. Features to Implement: Solution Overview Database Structure (MySQL) PHP Implementation Sample Dashboard Page (dashboard.php) Key Features Implemented This implementation provides a complete, standalone leave management system tailored for Malaysian companies, using pure [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-644","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/easyaccsoft.com\/webdesign\/wp-json\/wp\/v2\/posts\/644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/easyaccsoft.com\/webdesign\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/easyaccsoft.com\/webdesign\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/easyaccsoft.com\/webdesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/easyaccsoft.com\/webdesign\/wp-json\/wp\/v2\/comments?post=644"}],"version-history":[{"count":1,"href":"https:\/\/easyaccsoft.com\/webdesign\/wp-json\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":645,"href":"https:\/\/easyaccsoft.com\/webdesign\/wp-json\/wp\/v2\/posts\/644\/revisions\/645"}],"wp:attachment":[{"href":"https:\/\/easyaccsoft.com\/webdesign\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/easyaccsoft.com\/webdesign\/wp-json\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/easyaccsoft.com\/webdesign\/wp-json\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}