Worker Management Dashboard:Project

By /

Introducton

In modern warehouse and staff management, efficient workforce coordination plays a crucial role in ensuring productivity and operational success. TradeConnect is a robust Worker Management Dashboard designed to streamline task assignments, attendance tracking, and time management for employees across various roles, including Workers, Supervisors, and Administrators.

TradeConnect provides a responsive, user-friendly interface that simplifies everyday workflows while ensuring real-time tracking of attendance and task completion. The system is built using the Model-View-Controller (MVC) architecture with PHP 8.x and MySQL as the backend, ensuring a scalable and maintainable structure. The frontend is powered by Tailwind CSS for a modern, responsive design, complemented by JavaScript for interactive elements.

The dashboard enables workers to efficiently clock in and out, view their assigned tasks, and track work hours with an intuitive interface. Supervisors and administrators can monitor attendance summaries, generate productivity reports, and manage user roles with ease. By integrating role-based access, Trade_Connect ensures that each user has access to relevant features and information based on their responsibilities.

With features such as a collapsible sidebar, attendance calendar, task prioritization, and quick actions, TradeConnect enhances workforce management by reducing manual tracking efforts and improving real-time visibility into worker performance. This project aims to deliver a complete solution that boosts efficiency, simplifies task management, and improves accountability in workforce operations.

Great! Let’s start step by step. First, we’ll design the database schema, then move on to the UI design, and finally work on the backend logic.

Step 1: Database Schema

I’ll design the MySQL database schema based on your requirements, ensuring proper relationships between tables.

Database Name: tradeconnect_db

Here’s the schema with tables and relationships:

1. Users Table (users)

Stores worker, supervisor, and admin details.

CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL,
role ENUM(‘Worker’, ‘Supervisor’, ‘Admin’) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. Tasks Table (tasks)

Stores assigned tasks, priorities, and statuses.

CREATE TABLE tasks (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
title VARCHAR(255) NOT NULL,
description TEXT,
priority ENUM(‘High’, ‘Medium’, ‘Low’) NOT NULL,
status ENUM(‘Pending’, ‘In Progress’, ‘Completed’) DEFAULT ‘Pending’,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

3. Attendance Table (attendance)

Stores workers’ daily attendance records.

CREATE TABLE attendance (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
date DATE NOT NULL,
status ENUM(‘Present’, ‘Absent’, ‘Late’) NOT NULL,
clock_in TIME DEFAULT NULL,
clock_out TIME DEFAULT NULL,
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

4. Time Tracking Table (time_tracking)

Tracks hours worked on tasks.

CREATE TABLE time_tracking (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
task_id INT NOT NULL,
date DATE NOT NULL,
hours DECIMAL(5,2) NOT NULL CHECK (hours >= 0),
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
FOREIGN KEY (task_id) REFERENCES tasks(id) ON DELETE CASCADE
);

5. Role-Based Permissions Table (Optional)

If you need fine-grained control over permissions.

CREATE TABLE roles (
id INT AUTO_INCREMENT PRIMARY KEY,
role_name ENUM(‘Worker’, ‘Supervisor’, ‘Admin’) NOT NULL UNIQUE
);

Step 2: UI Design (Frontend with Tailwind CSS)

Now, we’ll design the UI using Tailwind CSS. The dashboard should be:
✅ Responsive (Mobile & Desktop)
✅ Modern & Clean (Minimal UI)
✅ Interactive (Collapsible Sidebar, Dynamic Elements)

📌 Dashboard Layout

The main dashboard will have:

  • Sidebar: Collapsible menu (Dashboard, Tasks, Attendance, Reports, Profile)
  • Navbar: Shows logged-in user, quick actions
  • Main Content: Displays widgets like attendance summary, tasks, and productivity stats

📌 Key Components

  1. Sidebar (Collapsible)
  2. Navbar (User info, logout button)
  3. Task List (Sortable by priority)
  4. Attendance Calendar (Color-coded)
  5. Quick Actions (Clock-in, Clock-out, Report Issue)

💻 UI Code (HTML + Tailwind CSS)



TradeConnect Dashboard

TradeConnect

    <!-- Main Content -->
    <main class="flex-1 p-6">
        <header class="flex justify-between items-center bg-white p-4 shadow-md rounded-md">
            <h2 class="text-lg font-semibold">Dashboard</h2>
            <button class="px-4 py-2 bg-red-500 text-white rounded">Logout</button>
        </header>

        <div class="grid grid-cols-3 gap-4 mt-6">
            <!-- Attendance Widget -->
            <div class="bg-white p-5 rounded shadow">
                <h3 class="text-lg font-bold">Attendance</h3>
                <p class="text-gray-600">Check-in / Check-out</p>
                <button class="mt-2 bg-green-500 text-white px-4 py-2 rounded">Clock In</button>
            </div>

            <!-- Tasks Widget -->
            <div class="bg-white p-5 rounded shadow">
                <h3 class="text-lg font-bold">Tasks</h3>
                <ul class="mt-2 space-y-2">
                    <li class="p-2 bg-gray-100 rounded">Complete Inventory Check</li>
                    <li class="p-2 bg-gray-100 rounded">Update Stock Records</li>
                </ul>
            </div>

            <!-- Productivity Widget -->
            <div class="bg-white p-5 rounded shadow">
                <h3 class="text-lg font-bold">Productivity</h3>
                <p class="text-gray-600">Weekly Hours: 35</p>
            </div>
        </div>
    </main>
</div>

✅ UI Features Implemented

✔ Sidebar Navigation (Dashboard, Tasks, Attendance, Reports, Profile)
✔ Main Dashboard Widgets (Attendance, Tasks, Productivity)
✔ Logout Button
✔ Responsive Layout with Tailwind CSS

Step 3: Backend Development (PHP – MVC Architecture)

Now, we’ll implement the backend logic using PHP (MVC structure) with the following key functionalities:
✅ Authentication System (Login, Logout)
✅ Task Management (Assign, Update, Filter by Priority)
✅ Attendance Tracking (Clock-in/Clock-out)
✅ Time Tracking (Daily/Weekly Reports)

📌 Setting Up the MVC Structure

We’ll structure the project as follows:

/tradeconnect
│── /app
│ │── /controllers
│ │ │── AuthController.php
│ │ │── DashboardController.php
│ │ │── TaskController.php
│ │ │── AttendanceController.php
│ │── /models
│ │ │── User.php
│ │ │── Task.php
│ │ │── Attendance.php
│ │── /views
│ │ │── dashboard.php
│ │ │── login.php
│── /public
│ │── index.php
│── /config
│ │── database.php
│── .htaccess
│── routes.php

📌 Step 3.1: Database Connection (database.php)

We need a database connection to interact with MySQL.

<?php
class Database {
private $host = “localhost”;
private $db_name = “tradeconnect_db”;
private $username = “root”;
private $password = “”;
public $conn;

public function connect() {
    $this->conn = null;
    try {
        $this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
        $this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    } catch (PDOException $e) {
        echo "Connection error: " . $e->getMessage();
    }
    return $this->conn;
}

}

✅ Features Implemented

✔ Database Connection Class (Using PDO for security)
✔ Handles Connection Errors Gracefully

We’ll build the authentication system (login/logout).

<?php
session_start();
require_once ‘../config/database.php’;
require_once ‘../models/User.php’;

class AuthController {
private $db;
private $user;

public function __construct() {
    $database = new Database();
    $this->db = $database->connect();
    $this->user = new User($this->db);
}

// Login Function
public function login($email, $password) {
    $user = $this->user->getUserByEmail($email);
    if ($user && password_verify($password, $user['password'])) {
        $_SESSION['user_id'] = $user['id'];
        $_SESSION['role'] = $user['role'];
        header("Location: ../views/dashboard.php");
        exit();
    } else {
        echo "Invalid credentials!";
    }
}

// Logout Function
public function logout() {
    session_destroy();
    header("Location: ../views/login.php");
    exit();
}

}

// Handling Login Request
if ($_SERVER[‘REQUEST_METHOD’] == ‘POST’ && isset($_POST[‘login’])) {
$email = $_POST[’email’];
$password = $_POST[‘password’];
$auth = new AuthController();
$auth->login($email, $password);
}

// Handling Logout Request
if (isset($_GET[‘logout’])) {
$auth = new AuthController();
$auth->logout();
}

✅ Features Implemented

✔ Secure Login with Password Hashing
✔ Session Management (User authentication)
✔ Logout Functionality

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top