Real Time Client Project Dashboard Directory Structure

I organized the Real‑Time Client Project Dashboard repository according to the layout described in the project documentation, separating backend and frontend concerns into clear folders and providing example configuration files for each side.

Real-Time Client Project Dashboard/
├── README.md                      # Complete setup, architecture, and schema documentation
├── EXPLANATION.md                 # Technical architecture debrief
├── server/
│   ├── .env.example               # Backend configuration template
│   ├── prisma/
│   │   ├── schema.prisma          # PostgreSQL models & indexes
│   │   └── seed.ts                # Realistic seed data
│   ├── src/
│   │   ├── config/                # env.ts, db.ts (Prisma client)
│   │   ├── middleware/            # auth.ts, roleGuard.ts, validate.ts, errorHandler.ts
│   │   ├── controllers/           # auth, client, project, task, activity, notification, user, search
│   │   ├── services/              # tokenService, socketService, cronService
│   │   ├── routes/                # auth, client, project, task, activity, notification, user, search
│   │   └── index.ts               # Express + HTTP + Socket.io + Cron server
│   └── tests/
│       └── rbac.test.ts           # Integration tests proving cross‑role access is blocked
└── client/
    ├── .env                       # Frontend environment variables
    ├── .env.example               # Frontend environment template
    ├── vercel.json                # Vercel deployment configuration
    ├── index.html
    └── src/
        ├── index.css              # Tailwind v4 theme, HSL variables, dark mode
        ├── App.tsx                # Role‑scoped routes and guards
        ├── types/index.ts         # Shared TypeScript interfaces
        ├── services/
        │   ├── api.ts             # Fetch client with auto refresh token queue
        │   └── socket.ts          # Singleton Socket.io service with ready queue
        ├── context/
        │   ├── AuthContext.tsx    # Auth state, login/logout, session recovery
        │   └── ThemeContext.tsx   # Theme state (defaults to light mode)
        ├── layouts/
        │   ├── AdminLayout.tsx    # Executive navigation with search outlet
        │   ├── PMLayout.tsx       # Scoped to managed projects with search outlet
        │   ├── DeveloperLayout.tsx# Scoped to assigned tasks with search outlet
        │   └── BottomNavigation.tsx # Mobile bottom bar
        ├── routes/
        │   ├── ProtectedRoute.tsx # Redirects to /login
        │   ├── RoleRoute.tsx      # Evaluates allowed roles
        │   └── AccessDenied.tsx   # Access Denied screen
        └── components/shared/
            ├── TopNav.tsx         # Search bar, shortcuts, notifications, theme toggle
            ├── ActiveUsersIndicator.tsx # Presence pill + online users popup
            ├── NotificationBell.tsx     # Unread count badge + card removal ("X")
            ├── KanbanBoard.tsx          # 4‑column drag‑and‑drop board
            ├── TaskCard.tsx             # Task card with overdue badge
            ├── TaskDetailModal.tsx      # Details, status editor, activity logs
            ├── ActivityFeedPanel.tsx    # Live relative timestamps stream
            └── FilterBar.tsx            # URL‑synced filters

I verified the server‑side role‑based access control with the integration test suite; unauthenticated requests receive 401 UNAUTHORIZED, while Developers and Project Managers are blocked from cross‑role actions with 403 FORBIDDEN, and Admins have unrestricted visibility.