diff --git a/app/src/App.tsx b/app/src/App.tsx index 3c28623..68b9aa7 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -1,5 +1,6 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { Landing } from './pages/Landing'; +import { Guidelines } from './pages/Guidelines'; import { FacultySignup } from './pages/auth/FacultySignup'; import { WardenSignup } from './pages/auth/WardenSignup'; import { CentreHeadSignup } from './pages/auth/CentreHeadSignup'; @@ -32,6 +33,7 @@ function App() { } /> + } /> } /> } /> } /> diff --git a/app/src/components/layout/Navbar.tsx b/app/src/components/layout/Navbar.tsx index df0c310..d2016fc 100644 --- a/app/src/components/layout/Navbar.tsx +++ b/app/src/components/layout/Navbar.tsx @@ -57,9 +57,9 @@ export function Navbar() {
  • - +
  • @@ -72,9 +72,9 @@ export function Navbar() {
  • - +
    • )} @@ -222,9 +222,9 @@ export function Navbar() { )} - + {/* Administration accordion */}
    @@ -242,9 +242,9 @@ export function Navbar() { )}
    - + )} diff --git a/app/src/pages/Guidelines.tsx b/app/src/pages/Guidelines.tsx new file mode 100644 index 0000000..738f6f1 --- /dev/null +++ b/app/src/pages/Guidelines.tsx @@ -0,0 +1,448 @@ +import { useState } from 'react'; +import { Link } from 'react-router-dom'; +import { UserPlus, MailCheck, LogIn, FilePlus, Bell, CheckCircle2, MailQuestion, MousePointerClick, LayoutDashboard, ClipboardList, MessageSquare, Network, UserCheck, Undo2 } from 'lucide-react'; +import type { LucideIcon } from 'lucide-react'; +import { MainLayout } from '../components/layout/MainLayout'; + +type RoleKey = 'employee' | 'warden' | 'centrehead' | 'admin'; +type PositionKey = 'xen' | 'ae' | 'je'; + +// what each admin position can do on a complaint post +const POSITIONS: Record = { + xen: { + label: 'XEN', + actions: [ + 'Post a comment on the complaint thread.', + 'Approve the complaint — it then moves down to the AE.', + 'Close the complaint. Only the XEN can close one.', + 'When a complaint already passed to the AE comes back up, mark it as completed — or send it back to the AE if something looks off.', + ], + }, + ae: { + label: 'AE', + actions: [ + 'Post a comment on the complaint thread.', + 'Pass the complaint back to the XEN for re-approval if confused about it.', + 'Pass the complaint to a JE — and when multiple JEs work under you, pick whichever JE you want.', + 'When a JE marks the work completed, mark it as passed (if satisfied) so it moves up to the XEN.', + ], + }, + je: { + label: 'JE', + actions: [ + 'Post a comment on the complaint thread.', + 'Mark the complaint as completed once the work is done — a JE cannot close it.', + 'After that, the AE passes it (if satisfied) and finally the XEN marks it as completed — or sends it back down if confused.', + ], + }, +}; + +interface RoleInfo { + label: string; + description: string; + signupRoute: string; + loginRoute: string; + postRoute: string; + extraField: string; +} + +const ROLES: Record = { + employee: { + label: 'Employee', + description: 'Faculty members and non-teaching staff residing in campus quarters.', + signupRoute: '/faculty/signup', + loginRoute: '/faculty/login', + postRoute: '/faculty/posts', + extraField: 'your department, house number, block and quarter type', + }, + warden: { + label: 'Warden', + description: 'Hostel wardens file complaints on behalf of the students of their hostel — students report issues to their warden, who lodges and tracks them here.', + signupRoute: '/warden/signup', + loginRoute: '/warden/login', + postRoute: '/warden/posts', + extraField: 'the hostel you are the warden of', + }, + centrehead: { + label: 'Centre Head', + description: 'Centre heads file complaints on behalf of the employees of their department/centre — issues faced at the centre are reported to the head, who lodges and tracks them here.', + signupRoute: '/centre-head/signup', + loginRoute: '/centre-head/login', + postRoute: '/centre-head/posts', + extraField: 'the building your centre operates from', + }, + admin: { + label: 'Admin Staff (XEN / AE / JE)', + description: 'Construction Cell staff — Executive Engineers, Assistant Engineers and Junior Engineers (Civil / Electrical) — who act on the complaints.', + signupRoute: '/staff/login', + loginRoute: '/staff/login', + postRoute: '/', + extraField: '', + }, +}; + +interface Step { + icon: LucideIcon; + title: string; + body: React.ReactNode; +} + +export function Guidelines() { + const [role, setRole] = useState('employee'); + const [position, setPosition] = useState('xen'); + const info = ROLES[role]; + + const registrationSteps: Step[] = [ + { + icon: UserPlus, + title: 'Create your account', + body: ( + <> + Go to the{' '} + + {info.label} signup page + {' '} + and fill in your name, institute email address, a password, your phone number and {info.extraField}. + + ), + }, + { + icon: MailCheck, + title: 'Verify your email', + body: ( + <> + A verification link is mailed to the address you signed up with. Open it and click{' '} + Verify Email Address. Until you verify, you cannot log in. + + ), + }, + { + icon: LogIn, + title: 'Log in', + body: ( + <> + Once verified, log in from the{' '} + + {info.label} login page + {' '} + with your email and password. Forgot it? Use the forgot-password link on the same page to get a reset mail. + + ), + }, + ]; + + const complaintSteps: Step[] = [ + { + icon: FilePlus, + title: 'Lodge the complaint', + body: ( + <> + After logging in, open{' '} + Lodge a Complaint (or go to your complaints page directly) and describe + the issue — a clear title, a short description of the problem, and the exact place/room so the staff can locate it. + + ), + }, + { + icon: Bell, + title: 'Track updates', + body: ( + <> + Your complaint is forwarded to the concerned XEN / AE / JE. Every status change or comment on it is + mailed to you, and you can follow the whole thread from your{' '} + Profile page at any time. + + ), + }, + { + icon: MessageSquare, + title: 'Ask queries via comments', + body: ( + <> + You can comment on your complaint anytime to ask a query. Depending on the stage your complaint is at, + the concerned staff (XEN / AE / JE) receive a notification for it and can reply on the same thread. + + ), + }, + { + icon: CheckCircle2, + title: 'Resolution', + body: ( + <> + When the work is done the complaint is marked resolved. If the issue persists, comment on the same + complaint thread instead of filing a duplicate — it keeps the history in one place. + + ), + }, + ]; + + // admin accounts are pre-registered and log in passwordless via email link + const adminLoginSteps: Step[] = [ + { + icon: MailQuestion, + title: 'Request a login link', + body: ( + <> + Admin accounts are pre-registered by the Construction Cell — there is no signup and no password. + Open the{' '} + + Staff Login page + + , enter your official email address and click Mail me a login link. + + ), + }, + { + icon: MousePointerClick, + title: 'Log in from your inbox', + body: ( + <> + Check your inbox for the login mail and click Log In — you land on a + confirmation page; one click there logs you in and takes you straight to your dashboard. The link expires, + so request a fresh one if it stops working. + + ), + }, + { + icon: LayoutDashboard, + title: 'Your dashboard', + body: ( + <> + Depending on your position you get the XEN, AE or JE dashboard, listing the complaints relevant to you. + You stay logged in on this browser, and can log out any time from the top bar. + + ), + }, + ]; + + const adminHandlingSteps: Step[] = [ + { + icon: ClipboardList, + title: 'Review and update status', + body: ( + <> + Open a complaint to see its full details and history. Move it through its stages as work progresses — + every status change is mailed automatically to the complainant, so keep the status honest and current. + + ), + }, + { + icon: MessageSquare, + title: 'Communicate on the thread', + body: ( + <> + Use comments on the complaint thread to ask for clarifications or record what was done. Everyone involved + in the thread is notified by email, keeping the whole conversation in one place. + + ), + }, + { + icon: CheckCircle2, + title: 'Close it out', + body: ( + <> + Once the work is verified, mark the complaint resolved. If the complainant reports the issue again on the + same thread, it comes back to you with the full context attached. + + ), + }, + ]; + + // the chain of command XEN → AE → JE that the site enforces + const adminHierarchySteps: Step[] = [ + { + icon: Network, + title: 'XEN → AE', + body: ( + <> + Complaints approved by the XEN move down to the{' '} + AE. Only the AE has the authority to pass a complaint onward — + or to send it back up to the XEN with queries. + + ), + }, + { + icon: UserCheck, + title: 'AE → JE', + body: ( + <> + The AE assigns the complaint to a JE for execution. When multiple + JEs work under an AE, the AE selects which JE the complaint goes to. + + ), + }, + { + icon: Undo2, + title: 'Reporting goes back up the same chain', + body: ( + <> + JEs report to AEs, and AEs report to XENs. A JE cannot convey queries about a post directly to the XEN, + even though all three are present on the same conversation thread — queries travel through the AE. + This order is mandatory and the site follows it. + + ), + }, + ]; + + const renderSteps = (steps: Step[]) => ( +
      + {steps.map((step, i) => ( +
    1. +
      + +
      +
      +

      + Step {i + 1}. + {step.title} +

      +

      {step.body}

      +
      +
      2. + ))} +
    + ); + + return ( + +
    + + {/* Header strip */} +
    +
    +

    Guidelines

    +

    + How to register and lodge a complaint on the Construction Cell CMS. +

    +
    +
    + +
    +
    + + {/* Role selector */} +
    +

    I am a…

    +
    + {(Object.keys(ROLES) as RoleKey[]).map((key) => ( + + ))} +
    +

    {info.description}

    + + {/* Position branch — only for admin staff */} + {role === 'admin' && ( +
    +

    Which one…

    +
    + {(Object.keys(POSITIONS) as PositionKey[]).map((key) => ( + + ))} +
    +
    + )} +
    + +
    + + {role === 'admin' ? ( + <> + {/* Per-position powers */} +
    +

    + 1 — What a {POSITIONS[position].label} can do on a complaint +

    +
    +
      + {POSITIONS[position].actions.map((action) => ( +
    • + + {action} +
      • + ))} +
    +
    +
    + + {/* Passwordless login */} +
    +

    + 2 — Logging in (passwordless) +

    + {renderSteps(adminLoginSteps)} +
    + + {/* Handling complaints */} +
    +

    + 3 — Handling complaints +

    + {renderSteps(adminHandlingSteps)} +
    + + {/* Hierarchy */} +
    +

    + 4 — Hierarchy (XEN → AE → JE) +

    + {renderSteps(adminHierarchySteps)} +
    + + ) : ( + <> + {/* Registration */} +
    +

    + 1 — Registering as {info.label} +

    + {renderSteps(registrationSteps)} +
    + + {/* Posting a complaint */} +
    +

    + 2 — Posting a complaint +

    + {renderSteps(complaintSteps)} +
    + + )} + + {/* Help */} +
    +

    + Stuck somewhere? Write to{' '} + + admin.cccms@nith.ac.in + {' '} + and the Construction Cell will help you out. +

    +
    + +
    +
    + +
    + + ); +}