🌟 About • 🚀 Live Demo • 👥 Team • 🏆 Modules • 🔐 Roles • 📋 Specifications • 💻 Tech Stack • ⚡ Start Guide
WorkSync is an Enterprise Office Management System built for high performance software engineering internship offices and development teams. It unifies project management, task tracking, Kanban workflows, employee attendance, AI assisted prompt generation, approval inboxes, activity audit trails, and team collaboration into a single, intuitive workspace.
🚀 Designed and developed based on the Office Management System Software Design and Functional Specification Version 3.0, WorkSync replaces scattered spreadsheets, manual attendance sheets, informal task assignments, and disconnected notes with an enterprise ready platform.
| 🎯 Key Highlights | ||
|---|---|---|
| 🔐 Granular RBAC Permissions | 📋 Interactive Kanban Board | 🤖 AI Prompt Builder Assistant |
| ⏰ Attendance and Leave Inbox | 📅 Google Classroom Style Calendar | 📈 Reports and Workload Analytics |
| 💬 Tasks with Embedded Chatbox | 🔔 Real Time Notification Routing | 📜 Full System Audit Activity Log |
Our project was built through a dedicated modular distribution where each team member took ownership of core application modules:
| No. | 🧑💻 Team Member | 🐙 GitHub Profile | 🎯 Assigned Module | 📊 Status |
|---|---|---|---|---|
| 01 | Salman Ahmed | @Salman-ahmed-2 | 🖥️ Dashboard + Repo Setup | ✅ Completed |
| 02 | Taha Sohail | @TahaSohail-Goat | 🔑 Login + Activity Log | ✅ Completed |
| 03 | Maryam | @meowryam | 📈 Reports + Profile | ✅ Completed |
| 04 | Inshrah Mumtaz | @inshrahmumtaz | ⏰ Attendance + Approval Inbox | ✅ Completed |
| 05 | Laiba Inqilab | @laibainqilab-ds | 📁 Projects + Calendar | ✅ Completed |
| 06 | Bilal Mughal | @Bilalmughal-07 | 📋 Notifications + Kanban | ✅ Completed |
| 07 | Hassaan Ahmed | @hassaanahmed-dev | 👥 Members + AI Assistant | ✅ Completed |
| 08 | Abiha Jibran | @abihajibbran1-lang | ✅ Tasks + Chatbox | ✅ Completed |
| 09 | Abdul Azeem Hashmi | @AbdulAzeemHashmi | 📖 Readme.md | ✅ Completed |
1️⃣ 🖥️ Dashboard & Repository Setup (Salman Ahmed)
Lead Developer: @Salman-ahmed-2
- 🏠 Central Workspace Hub: Provides immediate visibility into active work, upcoming deadlines, pending items, and quick system actions.
- ⚙️ Project Repository Architecture: Built the initial foundation, build pipeline, Vite configuration, and reusable frontend modular structure.
- 📊 Role Sensitive Summary Cards: Displays personal metrics for Team Members, team progress for Managers, and system oversight for Administrators.
- ⚡ Quick Action Buttons: Dynamic role-based action triggers for fast task creation, project initialization, and attendance check-in.
- 🔔 Compact Calendar & Notification Preview: Integrated quick view panels for active calendar events and recent system alerts.
2️⃣ 🔑 Login & Activity Log (Taha Sohail)
Lead Developer: @TahaSohail-Goat
- 🔒 Authentication & Session Handling: Secure sign-in workflow supporting Admin, Manager, Team Member, Team Lead, and HR roles.
- 📜 System Audit Trail: Complete activity logging capturing actor, action type, entity target, old/new field values, and timestamps.
- 🔍 Activity Search & Filtering: Filter logs by actor, project context, entity type, date range, and approval status.
- 🛡️ Security Safeguards: Ensures sensitive values like passwords, tokens, or secret keys are never exposed in log entries.
- 📅 Chronological Grouping: Organizes log records cleanly into Today, Yesterday, and historical date blocks.
3️⃣ 📁 Projects & Calendar (Laiba Inqilab)
Lead Developer: @laibainqilab-ds
- 📁 Project Management Center: Complete project overview with status indicators, manager ownership, start/end dates, and progress meters.
- 📅 Google Classroom Inspired Calendar: Full Month, Week, Day, and Agenda schedule views showing task deadlines, project milestones, and meetings.
- 🎯 Milestones & Dependencies: Define project milestones, task dependencies, and project scope members.
- 🗄️ Project Archival Workflow: Archive completed or inactive projects while keeping historical records intact and viewable.
- 🎨 Visual Event Categorization: Visually distinguishable calendar events by type without relying solely on color indicators.
4️⃣ ✅ Tasks & Chatbox (Abiha Jibran)
Lead Developer: @abihajibbran1-lang
- 📝 Task Management Hub: Combined task listing, detail inspection, subtasks, circular dependency prevention, and priority tracking.
- 💬 Embedded Task Chatbox: Built asynchronous discussion threads with @mentions, rich comments, and blocker assistance requests.
- 📎 File & Attachment Support: Secure attachment upload for task specifications, design mocks, and completion evidence.
- 🚧 Blocker Reporting: Mandatory blocker reason entry when transitioning tasks into Blocked status.
- 🔒 Controlled Task Edits: Protects task changes (due date, priority, assignee) by routing updates through approval rules.
5️⃣ 📋 Notifications & Kanban Board (Bilal Mughal)
Lead Developer: @Bilalmughal-07
- 🎯 Interactive Kanban Board: Visual workflow board for dragging and dropping tasks across Todo, In Progress, Review, Done, and Blocked stages.
- 🔔 Real Time Notification Inbox: Category filtered alert center tracking assignments, deadline warnings, mentions, and approval outcomes.
- ♿ Accessible Inline Status Toggles: Keyboard and accessible status transition controls for screen readers and quick adjustments.
- 🎯 Smart Kanban Filters: Filter board tasks by project, assignee, priority, overdue status, or personal assignments.
- 🚀 Stage Transition Rules: Enforces mandatory work summaries when submitting tasks to Review or Done.
6️⃣ 📈 Reports & Profile (Maryam)
Lead Developer: @meowryam
- 📊 Operational Reports Suite: Summarizes project progress, overdue task counts, member workloads, and project health indicators using Recharts.
- 📤 Multi Format Export: Export reports directly to CSV and print ready formats.
- 👤 Personal Profile Center: User workspace displaying personal assigned tasks, project memberships, attendance logs, and personal activity.
- 🏷️ Designation & Department Management: Profile details editor covering job titles, departments, profile avatars, and notification preferences.
- 🔐 Scoped Data Visibility: Ensures members see personal reports, managers see team/project analytics, and admins see organization metrics.
7️⃣ ⏰ Attendance & Approval Inbox (Inshrah Mumtaz)
Lead Developer: @inshrahmumtaz
- ⏰ Daily Attendance System: One click check-in, check-out, working hours calculation, late check-in, and early departure tracking.
- 📥 Pending Approval Inbox: Dedicated queue for reviewing controlled task edit proposals, leave requests, and attendance corrections.
- 🏖️ Leave Request Workflow: Submit and process leave requests with date range pickers, supporting documents, and decision notes.
- 🛡️ Temporary HR Permissions: Restricts attendance and leave approval powers exclusively to users holding active HR assignments.
- 🚫 Validation Enforcements: Prevents check-out before check-in, duplicate check-ins, or overlapping leave request windows.
8️⃣ 👥 Members & AI Assistant / Prompt Builder (Hassaan Ahmed)
Lead Developer: @hassaanahmed-dev
- 👥 Team Member Directory: Searchable team member roster with grid/table views, department filters, and profile details.
- 🤖 AI Prompt Builder: Converts real project and task context into structured AI prompts for breakdowns, acceptance criteria, test cases, and code reviews.
- 📑 Prompt Customization: Request beginner-friendly, technical, checklist, or step-by-step versions of generated prompts.
- 🛡️ AI Safety & Privacy Filters: Prevents secret API keys, passwords, or system configurations from being injected into AI prompts.
- 💾 Drafts & Generation History: Save, copy, and reuse generated AI prompt outputs.
9️⃣ 📖 Complete Documentation & README (Abdul Azeem Hashmi)
Lead Developer: @AbdulAzeemHashmi
- 📖 Comprehensive Project README: Created full technical documentation, team contribution matrix, system specifications, and getting started guide.
- 📐 System Specification Mapping: Documented functional requirements (FR-001 through FR-020), validation rules, non-functional requirements, and RBAC matrix.
- 🎨 Visual Aesthetics & Banners: Designed animated header banners, shield badges, typing SVGs, and formatted module breakdown views.
- 📜 Clean Formatting Standards: Standardized documentation layout without prohibited special dash characters.
WorkSync implements a dual layer permission model comprising permanent system roles and temporary project/functional delegations:
+-----------------------+
| Administrator |
+-----------+-----------+
|
v
+-----------------------+
| Manager |
+-----------+-----------+
|
v
+-----------------------+
| Team Member |
+-----+-----------+-----+
| |
+----------------+ +----------------+
| |
v v
+-------------------------------+ +-------------------------------+
| Temporary Team Lead (Project) | | Temporary HR (Attendance) |
+-------------------------------+ +-------------------------------+
| Role | Scope | Key Capabilities |
|---|---|---|
| 👑 Administrator | Global System | User account creation, manager access grants, system security settings, global activity audit log. |
| 👔 Manager | Office / Projects | Project & task creation, member assignment, temporary Team Lead & HR delegations, project progress approval. |
| 🧑💻 Team Member | Assigned Scope | Task execution, Kanban status movement, task comments, check-in/out, leave requests, Prompt Builder access. |
| 🛡️ Temporary Team Lead | Project Scoped | Review & approve controlled task field edits (deadlines, priority, assignees) for assigned projects. |
| 📋 Temporary HR | HR Functions | Review & approve attendance corrections, leave requests, and attendance report viewing. |
The following core requirements govern system behavior (derived from Software Specification v3.0):
| ID | Functional Requirement Description |
|---|---|
| FR-001 | All authenticated users shall be able to view all active projects and tasks. |
| FR-002 | The system shall restrict task edits to authorized Managers, assigned Team Members, and applicable temporary Team Leads. |
| FR-003 | Every record list shall provide search, filtering, and sorting appropriate to that module. |
| FR-004 | Filters shall combine using AND logic unless the interface clearly states otherwise. |
| FR-005 | The system shall preserve the current filter state while the user opens and closes detail panels. |
| FR-006 | Dashboard cards shall navigate to the matching filtered module. |
| FR-007 | Every important create, edit, archive, delete, assignment, approval, and status change shall create an Activity Log entry. |
| FR-008 | The system shall support comments on projects and tasks. |
| FR-009 | The system shall support file and image attachments on projects, tasks, and comments. |
| FR-010 | The system shall display upload progress, success, failure, and retry states. |
| FR-011 | The system shall prevent duplicate submissions caused by repeated clicks. |
| FR-012 | The system shall support temporary Team Lead and HR assignments with scope and optional expiry. |
| FR-013 | Attendance approval notifications shall be sent only to users with active HR permission. |
| FR-014 | The Prompt Builder shall use selected project and task data as context. |
| FR-015 | Generated AI content shall remain editable and shall not directly change system records without user review. |
| FR-016 | All date and permission validation shall be enforced server side. |
| FR-017 | The system shall provide clear success, warning, and error messages. |
| FR-018 | Archived records shall remain available for viewing and reporting. |
| FR-019 | Destructive actions shall require user confirmation. |
| FR-020 | The system shall support responsive desktop, tablet, and mobile layouts. |
WorkSync leverages a modern, reliable full stack TypeScript architecture:
| Layer | Technology | Purpose |
|---|---|---|
| Frontend Framework | React 19 + Vite 6 | Lightning fast SPA client application rendering |
| Language | TypeScript 5.8 | Full end to end type safety and reliable code contracts |
| Styling & UI | Tailwind CSS v4 | Modern responsive styling & glassmorphism components |
| Icons & Motion | Lucide React + Motion | Elegant SVG icons & fluid UI micro animations |
| Charts | Recharts 3 | Responsive interactive analytics & workload visualizations |
| Backend Runtime | Node.js + Express 4 | RESTful API routes, authentication middleware & business rules |
| Database | PostgreSQL 16+ / Supabase | Relational data persistence & 3NF database model |
| Document Generation | PDFKit | Server-side PDF export generation for reports |
| Deployment | Vercel | Production web hosting & automated CI/CD deployment |
Follow these steps to run WorkSync locally on your machine.
- Node.js:
v18.0.0or higher - npm or bun package manager
- PostgreSQL: Local instance or Supabase connection string
-
Clone the Repository
git clone https://github.com/CODOC-IT/worksync.git cd worksync -
Install Dependencies
npm install
-
Configure Environment Variables Create a
.envfile in the root directory:PORT=3000 DATABASE_URL=postgresql://user:password@localhost:5432/worksync JWT_SECRET=your_jwt_secret_key_here VITE_API_URL=http://localhost:3000
-
Run Development Mode Start both the frontend development server and backend service:
# Start frontend app (Vite) npm run dev # In a separate terminal, start backend API server npm run server
-
Open in Browser Navigate to
http://localhost:3000to interact with WorkSync. -
Run Test Suites
npm run test:accounts
worksync/
├── api/ # Vercel serverless entry points
├── backend/ # Express backend API & domain services
│ └── src/
│ ├── accounts/ # User accounts & RBAC logic
│ ├── database/ # PostgreSQL client & queries
│ └── server.ts # Express server initialization
├── database/ # SQL migrations & 3NF schemas
├── docs/ # Software specifications & design documents
├── frontend/ # Vite + React 19 frontend codebase
│ └── src/
│ ├── components/ # Reusable glassmorphism UI components
│ ├── features/ # Feature modules (Kanban, Attendance, Reports, etc.)
│ └── pages/ # Application view routes
├── package.json # Scripts & project dependencies
├── tsconfig.json # TypeScript compiler configuration
└── vite.config.ts # Vite bundler configuration
As defined in Section 23 of the functional specification, future iterations of WorkSync will incorporate:
- 💬 Real Time Team Chat: Direct messaging and channels for instant team communication.
- 📱 Native Mobile Application: iOS and Android mobile apps for attendance and task management.
- 🔔 Email & Push Notifications: External email summaries and browser push notifications.
- 📅 Third Party Calendar Sync: Two way sync with Google Calendar and Microsoft Outlook.
- 🔗 GitHub Repository Integration: Link pull requests and commits directly to tasks.
- 🤖 Advanced AI Analytics: Workload prediction and task complexity estimation.
WorkSync Office Management System • Built with ❤️ by the Intern Engineering Team
