Resource Scheduling Table (Drag & Assign)

Overview

A drag-and-drop resource scheduling table built with React and TypeScript. This component enables users to assign resources (people, equipment, etc.) to time slots across a weekly calendar view with real-time conflict detection, auto-fill capabilities, and comprehensive filtering options.

Features

• Drag & Drop Assignment: Drag resources from a side panel directly onto calendar slots or click to assign
• Conflict Detection: Modal alerts when attempting to assign a resource to an occupied slot with options to replace or cancel
• Weekly Calendar View: Toggle between full week (7 days) and work week (5 days) views with navigation
• Shift Filtering: Filter slots by shift type (Morning, Afternoon, Evening, Night)
• Resource Filtering: Search and filter resources by name and role
• Auto-Fill: Automatically populate open slots with available resources
• Clear Operations: Clear individual slots or the entire schedule
• Export Schedule: Download schedule data as CSV
• Live Statistics: Real-time display of assigned slots, open positions, coverage percentage, and total hours
• Toast Notifications: User feedback for actions and errors
• Responsive Design: Adapts to different screen sizes with Tailwind CSS

Tech Stack

• React 19.0.0 - UI framework
• TypeScript 5.6 - Type safety
• Tailwind CSS 4.2 - Styling
• Vite 6.0 - Build tool
• React Router DOM 7.14 - Navigation support

Setup & Usage

Installation

npm install

Development

npm run dev

Starts the Vite dev server at http://localhost:5173

Build

npm build

Generates optimized production build in dist/

Type Checking

npm run typecheck

Linting

npm run lint          # Check for issues
npm run lint:fix      # Auto-fix issues