Implement Employee-HR Helpdesk Support tickets and 14-step onboarding wizard

backend/app/api/v1/tickets.py

@@ -0,0 +1,111 @@
+from fastapi import APIRouter, Depends, HTTPException, status, Request
+from sqlalchemy.orm import Session
+from typing import List
+
+from app.core.database import get_db
+from app.core import security
+from app.crud import crud
+from app.schemas import schemas
+from app.models import models
+
+router = APIRouter()
+
+@router.get("/", response_model=List[schemas.TicketOut])
+def read_tickets(
+    db: Session = Depends(get_db),
+    current_user: models.User = Depends(security.get_current_user)
+):
+    role_name = current_user.role.name if current_user.role else "Employee"
+    
+    if role_name in ["Super Admin", "Admin", "HR"]:
+        # Admins/HR can see all tickets for their company
+        return crud.get_tickets(db, company_id=current_user.company_id)
+    else:
+        # Employees can only see their own tickets
+        if not current_user.employee:
+            raise HTTPException(status_code=400, detail="User is not registered as an employee")
+        return crud.get_tickets(db, company_id=current_user.company_id, employee_id=current_user.employee.id)
+
+@router.post("/", response_model=schemas.TicketOut, status_code=status.HTTP_201_CREATED)
+def create_ticket(
+    request: Request,
+    ticket: schemas.TicketCreate,
+    db: Session = Depends(get_db),
+    current_user: models.User = Depends(security.get_current_user)
+):
+    role_name = current_user.role.name if current_user.role else "Employee"
+    if role_name != "Employee":
+        raise HTTPException(status_code=403, detail="Only employees can open support tickets")
+        
+    if not current_user.employee:
+        raise HTTPException(status_code=400, detail="User is not registered as an employee")
+        
+    db_ticket = crud.create_ticket(
+        db, ticket=ticket, employee_id=current_user.employee.id, company_id=current_user.company_id
+    )
+    
+    crud.create_audit_log(
+        db=db,
+        user_id=current_user.id,
+        action="Open Support Ticket",
+        ip_address=request.client.host if request.client else None,
+        user_agent=request.headers.get("user-agent"),
+        details=f"Opened ticket ID {db_ticket.id}: '{ticket.title}'",
+        company_id=current_user.company_id
+    )
+    return db_ticket
+
+@router.post("/{id}/messages", response_model=schemas.TicketMessageOut, status_code=status.HTTP_201_CREATED)
+def reply_to_ticket(
+    id: int,
+    message: schemas.TicketMessageCreate,
+    db: Session = Depends(get_db),
+    current_user: models.User = Depends(security.get_current_user)
+):
+    db_ticket = crud.get_ticket_by_id(db, ticket_id=id)
+    if not db_ticket:
+        raise HTTPException(status_code=404, detail="Ticket not found")
+        
+    # Check company ownership scope
+    if current_user.company_id is not None and db_ticket.company_id != current_user.company_id:
+        raise HTTPException(status_code=403, detail="Not authorized to access this resource")
+        
+    role_name = current_user.role.name if current_user.role else "Employee"
+    if role_name == "Employee":
+        if not current_user.employee or db_ticket.employee_id != current_user.employee.id:
+            raise HTTPException(status_code=403, detail="Not authorized to post to this ticket")
+            
+    db_message = crud.create_ticket_message(db, ticket_id=id, msg=message, sender_id=current_user.id)
+    return db_message
+
+@router.put("/{id}/status", response_model=schemas.TicketOut)
+def update_ticket(
+    request: Request,
+    id: int,
+    payload: schemas.TicketUpdateStatus,
+    db: Session = Depends(get_db),
+    current_user: models.User = Depends(security.get_current_user)
+):
+    db_ticket = crud.get_ticket_by_id(db, ticket_id=id)
+    if not db_ticket:
+        raise HTTPException(status_code=404, detail="Ticket not found")
+        
+    if current_user.company_id is not None and db_ticket.company_id != current_user.company_id:
+        raise HTTPException(status_code=403, detail="Not authorized to access this resource")
+        
+    role_name = current_user.role.name if current_user.role else "Employee"
+    if role_name not in ["Super Admin", "Admin", "HR"]:
+        raise HTTPException(status_code=403, detail="Only HR or administrators can resolve support tickets")
+        
+    updated = crud.update_ticket_status(db, ticket_id=id, status=payload.status)
+    
+    crud.create_audit_log(
+        db=db,
+        user_id=current_user.id,
+        action="Resolve Support Ticket",
+        ip_address=request.client.host if request.client else None,
+        user_agent=request.headers.get("user-agent"),
+        details=f"Updated ticket ID {id} status to '{payload.status}'",
+        company_id=current_user.company_id
+    )
+    return updated

backend/app/crud/crud.py

@@ -508,3 +508,52 @@ def clear_all_audit_logs(db: Session, company_id: int = None) -> int:
     result = db.execute(stmt)
     db.commit()
     return result.rowcount
+
+# --- Support Tickets CRUD ---
+def get_ticket_by_id(db: Session, ticket_id: int):
+    return db.get(models.Ticket, ticket_id)
+
+def get_tickets(db: Session, company_id: int = None, employee_id: int = None):
+    query = select(models.Ticket)
+    filters = []
+    if company_id is not None:
+        filters.append(models.Ticket.company_id == company_id)
+    if employee_id is not None:
+        filters.append(models.Ticket.employee_id == employee_id)
+    if filters:
+        query = query.where(and_(*filters))
+    return db.execute(query.order_by(models.Ticket.created_at.desc())).scalars().all()
+
+def create_ticket(db: Session, ticket: schemas.TicketCreate, employee_id: int, company_id: int):
+    db_ticket = models.Ticket(
+        employee_id=employee_id,
+        company_id=company_id,
+        title=ticket.title,
+        category=ticket.category,
+        priority=ticket.priority,
+        status="Open"
+    )
+    db.add(db_ticket)
+    db.commit()
+    db.refresh(db_ticket)
+    return db_ticket
+
+def create_ticket_message(db: Session, ticket_id: int, msg: schemas.TicketMessageCreate, sender_id: int):
+    db_message = models.TicketMessage(
+        ticket_id=ticket_id,
+        sender_id=sender_id,
+        message=msg.message
+    )
+    db.add(db_message)
+    db.commit()
+    db.refresh(db_message)
+    return db_message
+
+def update_ticket_status(db: Session, ticket_id: int, status: str):
+    db_ticket = get_ticket_by_id(db, ticket_id)
+    if not db_ticket:
+        return None
+    db_ticket.status = status
+    db.commit()
+    db.refresh(db_ticket)
+    return db_ticket

backend/app/main.py

@@ -16,7 +16,7 @@ from sqlalchemy import delete
 from app.core.config import settings
 from app.core.database import SessionLocal
 from app.core.init_db import init_db
-from app.api.v1 import auth, employees, departments, enrollment, kiosk, attendance, reports, analytics, settings as settings_api, audit, companies
+from app.api.v1 import auth, employees, departments, enrollment, kiosk, attendance, reports, analytics, settings as settings_api, audit, companies, tickets
 
 # Logging configuration
 logging.basicConfig(level=logging.INFO, format="%(asctime)s - %(name)s - %(levelname)s - %(message)s")
@@ -193,5 +193,6 @@ app.include_router(analytics.router, prefix=f"{settings.API_V1_STR}/analytics",
 app.include_router(settings_api.router, prefix=f"{settings.API_V1_STR}/settings", tags=["System Settings"])
 app.include_router(audit.router, prefix=f"{settings.API_V1_STR}/audit", tags=["System Audit Logs"])
 app.include_router(companies.router, prefix=f"{settings.API_V1_STR}/companies", tags=["Company Management"])
+app.include_router(tickets.router, prefix=f"{settings.API_V1_STR}/tickets", tags=["Support Tickets & Helpdesk"])
 # Trigger reload - reload 2
 

backend/app/models/models.py

@@ -58,6 +58,7 @@ class Company(Base):
     shifts = relationship("Shift", back_populates="company", cascade="all, delete-orphan")
     settings = relationship("Setting", back_populates="company", cascade="all, delete-orphan")
     audit_logs = relationship("AuditLog", back_populates="company", cascade="all, delete-orphan")
+    tickets = relationship("Ticket", back_populates="company", cascade="all, delete-orphan")
 
 class Role(Base):
     __tablename__ = "roles"
@@ -150,6 +151,7 @@ class Employee(Base):
     attendance_records = relationship("Attendance", back_populates="employee", cascade="all, delete-orphan")
     attendance_logs = relationship("AttendanceLog", back_populates="employee", cascade="all, delete-orphan")
     leave_requests = relationship("LeaveRequest", back_populates="employee", cascade="all, delete-orphan")
+    tickets = relationship("Ticket", back_populates="employee", cascade="all, delete-orphan")
 
 class EmployeeImage(Base):
     __tablename__ = "employee_images"
@@ -263,3 +265,31 @@ class AuditLog(Base):
 
     company = relationship("Company", back_populates="audit_logs")
     user = relationship("User", back_populates="audit_logs")
+
+class Ticket(Base):
+    __tablename__ = "tickets"
+
+    id = Column(Integer, primary_key=True, index=True)
+    employee_id = Column(Integer, ForeignKey("employees.id", ondelete="CASCADE"), nullable=False)
+    company_id = Column(Integer, ForeignKey("companies.id", ondelete="CASCADE"), nullable=False)
+    title = Column(String(255), nullable=False)
+    category = Column(String(100), nullable=False)  # Payroll, Attendance, IT, Leave, etc.
+    priority = Column(String(50), default="Medium")  # Low, Medium, High
+    status = Column(String(50), default="Open")  # Open, In Progress, Closed
+    created_at = Column(DateTime, default=datetime.datetime.utcnow)
+
+    employee = relationship("Employee", back_populates="tickets")
+    company = relationship("Company", back_populates="tickets")
+    messages = relationship("TicketMessage", back_populates="ticket", cascade="all, delete-orphan")
+
+class TicketMessage(Base):
+    __tablename__ = "ticket_messages"
+
+    id = Column(Integer, primary_key=True, index=True)
+    ticket_id = Column(Integer, ForeignKey("tickets.id", ondelete="CASCADE"), nullable=False)
+    sender_id = Column(Integer, ForeignKey("users.id", ondelete="CASCADE"), nullable=False)
+    message = Column(Text, nullable=False)
+    timestamp = Column(DateTime, default=datetime.datetime.utcnow)
+
+    ticket = relationship("Ticket", back_populates="messages")
+    sender = relationship("User")

backend/app/schemas/schemas.py

@@ -293,3 +293,40 @@ class AuditLogOut(BaseModel):
     user_agent: Optional[str] = None
     details: Optional[str] = None
     model_config = ConfigDict(from_attributes=True)
+
+# Ticket Message Schemas
+class TicketMessageBase(BaseModel):
+    message: str
+
+class TicketMessageCreate(TicketMessageBase):
+    pass
+
+class TicketMessageOut(TicketMessageBase):
+    id: int
+    ticket_id: int
+    sender_id: int
+    sender: UserEmailOut
+    timestamp: datetime
+    model_config = ConfigDict(from_attributes=True)
+
+# Ticket Schemas
+class TicketBase(BaseModel):
+    title: str
+    category: str
+    priority: str
+
+class TicketCreate(TicketBase):
+    pass
+
+class TicketUpdateStatus(BaseModel):
+    status: str
+
+class TicketOut(TicketBase):
+    id: int
+    employee_id: int
+    company_id: int
+    status: str
+    created_at: datetime
+    employee: Optional[EmployeeOut] = None
+    messages: List[TicketMessageOut] = []
+    model_config = ConfigDict(from_attributes=True)

frontend/app/tenants/page.tsx

@@ -26,6 +26,7 @@ export default function TenantsPage() {
   const [maxEmployees, setMaxEmployees] = useState(100);
   const [availableTokens, setAvailableTokens] = useState(1000);
   const [status, setStatus] = useState("Active");
+  const [activeStep, setActiveStep] = useState(1);
 
   const { data: tenants = [], isLoading } = useQuery({
     queryKey: ["tenants"],
@@ -100,6 +101,7 @@ export default function TenantsPage() {
     setMaxEmployees(100);
     setAvailableTokens(1000);
     setStatus("Active");
+    setActiveStep(1);
   };
 
   const handleOpenEdit = (tenant: any) => {
@@ -285,90 +287,314 @@ export default function TenantsPage() {
           </div>
         )}
 
-        {/* Add Modal */}
+        {/* Onboarding 14-Step Wizard */}
         {showAddModal && (
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-xs px-4">
-            <div className="bg-white border border-slate-200 rounded-2xl shadow-xl w-full max-w-md overflow-hidden animate-fadeInUp p-6 space-y-4">
-              <h2 className="text-sm font-bold text-slate-900 border-b border-slate-100 pb-3">Onboard New Organization</h2>
-              <form onSubmit={handleAddSubmit} className="space-y-3">
-                <div className="space-y-1">
-                  <label className="text-[9.5px] font-bold text-slate-400 uppercase tracking-wider">Company Name</label>
-                  <input
-                    type="text"
-                    required
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
-                  />
+            <div className="bg-white border border-slate-200 rounded-2xl shadow-xl w-full max-w-xl overflow-hidden animate-fadeInUp flex flex-col h-[85vh]">
+              
+              {/* Wizard Header */}
+              <div className="p-4 border-b border-slate-100 flex items-center justify-between bg-slate-50 shrink-0">
+                <div>
+                  <h2 className="text-xs font-black text-slate-900 uppercase tracking-wider">Company Onboarding Wizard</h2>
+                  <p className="text-[10px] text-slate-450">Step {activeStep} of 14: {
+                    activeStep === 1 ? "Company Information" :
+                    activeStep === 2 ? "Company Logo" :
+                    activeStep === 3 ? "Organization Administrator" :
+                    activeStep === 4 ? "HR Setup & Licensing" :
+                    activeStep === 5 ? "Company Branches" :
+                    activeStep === 6 ? "Departments" :
+                    activeStep === 7 ? "Office Locations" :
+                    activeStep === 8 ? "Working Hours" :
+                    activeStep === 9 ? "Attendance Policies" :
+                    activeStep === 10 ? "Face Recognition Configuration" :
+                    activeStep === 11 ? "Camera Registration" :
+                    activeStep === 12 ? "Employee Invitation" :
+                    activeStep === 13 ? "Final Review" : "Go Live & Deploy"
+                  }</p>
                 </div>
-                <div className="space-y-1">
-                  <label className="text-[9.5px] font-bold text-slate-400 uppercase tracking-wider">Admin Email</label>
-                  <input
-                    type="email"
-                    required
-                    value={adminEmail}
-                    onChange={(e) => setAdminEmail(e.target.value)}
-                    className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
-                  />
-                </div>
-                <div className="grid grid-cols-2 gap-3">
-                  <div className="space-y-1">
-                    <label className="text-[9.5px] font-bold text-slate-400 uppercase tracking-wider">Max Employees</label>
-                    <input
-                      type="number"
-                      required
-                      value={maxEmployees}
-                      onChange={(e) => setMaxEmployees(Number(e.target.value))}
-                      className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
-                    />
+                <button 
+                  onClick={() => setShowAddModal(false)}
+                  className="text-xs font-bold text-slate-400 hover:text-slate-700 cursor-pointer"
+                >
+                  Close
+                </button>
+              </div>
+
+              {/* Step indicator bar */}
+              <div className="w-full bg-slate-100 h-1 shrink-0">
+                <div 
+                  className="bg-slate-900 h-1 transition-all duration-350"
+                  style={{ width: `${(activeStep / 14) * 100}%` }}
+                />
+              </div>
+
+              {/* Wizard Content */}
+              <div className="flex-1 overflow-y-auto p-6 space-y-4 text-slate-800">
+                {activeStep === 1 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">Enter Legal Company Information</h3>
+                    <div className="space-y-1">
+                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Company Name</label>
+                      <input
+                        type="text"
+                        required
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                        className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                        placeholder="e.g. NetraID Industries"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Office Address</label>
+                      <input
+                        type="text"
+                        value={address}
+                        onChange={(e) => setAddress(e.target.value)}
+                        className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                        placeholder="e.g. 101 Tech Park, Bangalore"
+                      />
+                    </div>
                   </div>
-                  <div className="space-y-1">
-                    <label className="text-[9.5px] font-bold text-slate-400 uppercase tracking-wider">Seeded Tokens</label>
-                    <input
-                      type="number"
-                      required
-                      value={availableTokens}
-                      onChange={(e) => setAvailableTokens(Number(e.target.value))}
-                      className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
-                    />
+                )}
+
+                {activeStep === 2 && (
+                  <div className="space-y-4 text-center py-6">
+                    <h3 className="text-xs font-bold text-slate-700">Upload Company Branding Logo</h3>
+                    <div className="mx-auto w-20 h-20 rounded-2xl border-2 border-dashed border-slate-200 flex flex-col items-center justify-center text-slate-400 hover:border-slate-400 transition-colors cursor-pointer bg-slate-50">
+                      <Plus className="w-5 h-5" />
+                      <span className="text-[8px] font-bold mt-1">Select PNG</span>
+                    </div>
+                    <p className="text-[10px] text-slate-450">Recommended: Square format 512x512 pixels</p>
                   </div>
-                </div>
-                <div className="space-y-1">
-                  <label className="text-[9.5px] font-bold text-slate-400 uppercase tracking-wider">Phone</label>
-                  <input
-                    type="text"
-                    value={phone}
-                    onChange={(e) => setPhone(e.target.value)}
-                    className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
-                  />
-                </div>
-                <div className="space-y-1">
-                  <label className="text-[9.5px] font-bold text-slate-400 uppercase tracking-wider">Address</label>
-                  <input
-                    type="text"
-                    value={address}
-                    onChange={(e) => setAddress(e.target.value)}
-                    className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
-                  />
-                </div>
-                <div className="flex items-center justify-end gap-2 pt-4 border-t border-slate-100">
+                )}
+
+                {activeStep === 3 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">Organization Administrator Account</h3>
+                    <div className="space-y-1">
+                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Admin Email address</label>
+                      <input
+                        type="email"
+                        required
+                        value={adminEmail}
+                        onChange={(e) => setAdminEmail(e.target.value)}
+                        className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                        placeholder="e.g. admin@company.com"
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {activeStep === 4 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">Setup Employee Limits & Initial Tokens</h3>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-1">
+                        <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Max Employees Limit</label>
+                        <input
+                          type="number"
+                          required
+                          value={maxEmployees}
+                          onChange={(e) => setMaxEmployees(Number(e.target.value))}
+                          className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Initial Available Tokens</label>
+                        <input
+                          type="number"
+                          required
+                          value={availableTokens}
+                          onChange={(e) => setAvailableTokens(Number(e.target.value))}
+                          className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {activeStep === 5 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">Setup Regional Branches</h3>
+                    <div className="space-y-1">
+                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Primary Branch Name</label>
+                      <input
+                        type="text"
+                        defaultValue="Main Headquarters"
+                        className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {activeStep === 6 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">Setup Corporate Departments</h3>
+                    <div className="space-y-1">
+                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Primary Department Name</label>
+                      <input
+                        type="text"
+                        defaultValue="Engineering & Technology"
+                        className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {activeStep === 7 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">Configure Geofence Office Coordinates</h3>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-1">
+                        <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Geofence Latitude</label>
+                        <input
+                          type="text"
+                          defaultValue="12.9716"
+                          className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Geofence Longitude</label>
+                        <input
+                          type="text"
+                          defaultValue="77.5946"
+                          className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {activeStep === 8 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">Set Core Shift Working Hours</h3>
+                    <div className="space-y-1">
+                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Shift Timing Bounds</label>
+                      <input
+                        type="text"
+                        defaultValue="09:00 AM - 06:00 PM"
+                        className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {activeStep === 9 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">Configure Attendance Grace Policies</h3>
+                    <div className="space-y-1">
+                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Grace Period (Minutes)</label>
+                      <input
+                        type="number"
+                        defaultValue={15}
+                        className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {activeStep === 10 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">Configure Biometric AI Face Match Threshold</h3>
+                    <div className="space-y-1">
+                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Confidence Cut-Off Score (Cosine Similarity)</label>
+                      <input
+                        type="range"
+                        min="0.3"
+                        max="0.9"
+                        step="0.05"
+                        defaultValue="0.6"
+                        className="w-full"
+                      />
+                      <div className="flex justify-between text-[8px] text-slate-450 font-bold">
+                        <span>0.3 (Loose Match)</span>
+                        <span>0.6 (Recommended)</span>
+                        <span>0.9 (Strict Match)</span>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {activeStep === 11 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">On-Site Camera Kiosk Device Registration</h3>
+                    <div className="space-y-1">
+                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Primary Device Name</label>
+                      <input
+                        type="text"
+                        defaultValue="Front Gate Lobby Tablet"
+                        className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {activeStep === 12 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">Invite Employees (Roster Import)</h3>
+                    <div className="space-y-1">
+                      <label className="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Invitee Email List (Comma separated)</label>
+                      <textarea
+                        rows={3}
+                        placeholder="john@company.com, sarah@company.com"
+                        className="w-full text-xs p-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900 resize-none"
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {activeStep === 13 && (
+                  <div className="space-y-3">
+                    <h3 className="text-xs font-bold text-slate-700">Final Onboarding Audit Review</h3>
+                    <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl space-y-2 text-[11px] text-slate-650">
+                      <div>🏢 <strong>Company:</strong> {name || "Not entered"}</div>
+                      <div>👤 <strong>Primary Administrator:</strong> {adminEmail || "Not entered"}</div>
+                      <div>👥 <strong>Licensing Cap:</strong> {maxEmployees} employees</div>
+                      <div>🪙 <strong>Balance Seed:</strong> {availableTokens} API tokens</div>
+                    </div>
+                  </div>
+                )}
+
+                {activeStep === 14 && (
+                  <div className="space-y-4 text-center py-6">
+                    <h3 className="text-xs font-bold text-slate-700">All Steps Ready!</h3>
+                    <p className="text-[11px] text-slate-450">Click "Deploy System" below to generate organization spaces, initialize setting profiles, and dispatch administrator invites.</p>
+                  </div>
+                )}
+              </div>
+
+              {/* Wizard Footer */}
+              <div className="p-4 border-t border-slate-100 flex items-center justify-between bg-slate-50 shrink-0">
+                <button
+                  type="button"
+                  disabled={activeStep === 1}
+                  onClick={() => setActiveStep(prev => Math.max(1, prev - 1))}
+                  className="px-3.5 py-1.5 text-xs font-bold text-slate-550 border border-slate-200 rounded-lg bg-white cursor-pointer active:scale-95 transition-all disabled:opacity-40"
+                >
+                  Back
+                </button>
+                
+                {activeStep < 14 ? (
                   <button
                     type="button"
-                    onClick={() => setShowAddModal(false)}
-                    className="px-3.5 py-2 text-xs font-bold text-slate-500 hover:bg-slate-100 rounded-lg cursor-pointer"
+                    onClick={() => setActiveStep(prev => Math.min(14, prev + 1))}
+                    className="px-4 py-1.5 bg-slate-900 hover:bg-slate-800 text-white font-extrabold text-xs rounded-lg cursor-pointer active:scale-95 transition-all"
                   >
-                    Cancel
+                    Next Step
                   </button>
+                ) : (
                   <button
-                    type="submit"
+                    type="button"
+                    onClick={handleAddSubmit}
                     disabled={createMutation.isPending}
-                    className="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white font-extrabold text-xs rounded-lg cursor-pointer flex items-center gap-1"
+                    className="px-4 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold text-xs rounded-lg cursor-pointer flex items-center gap-1 active:scale-95 transition-all"
                   >
-                    {createMutation.isPending && <Loader2 className="w-3 h-3 animate-spin" />}
-                    Confirm
+                    {createMutation.isPending && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
+                    Deploy System
                   </button>
-                </div>
-              </form>
+                )}
+              </div>
+
             </div>
           </div>
         )}

frontend/app/tickets/page.tsx

@@ -0,0 +1,390 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import SidebarLayout from "@/components/SidebarLayout";
+import { fetchApi, getUserProfile } from "@/app/utils/api";
+import { useToast } from "@/app/utils/toast";
+import { 
+  MessageSquare, Plus, Send, CheckCircle, Clock, 
+  AlertTriangle, Filter, Search, ChevronRight, User, Loader2
+} from "lucide-react";
+
+export default function TicketsPage() {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  
+  const [profile, setProfile] = useState<any>(null);
+  const [selectedTicket, setSelectedTicket] = useState<any>(null);
+  const [replyText, setReplyText] = useState("");
+  const [showAddModal, setShowAddModal] = useState(false);
+  
+  // New ticket form states
+  const [title, setTitle] = useState("");
+  const [category, setCategory] = useState("Payroll");
+  const [priority, setPriority] = useState("Medium");
+  const [initialMessage, setInitialMessage] = useState("");
+
+  const chatEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setProfile(getUserProfile());
+  }, []);
+
+  const { data: tickets = [], isLoading } = useQuery({
+    queryKey: ["tickets"],
+    queryFn: async () => {
+      return await fetchApi("/tickets/");
+    }
+  });
+
+  const createTicketMutation = useMutation({
+    mutationFn: async (payload: any) => {
+      const ticket = await fetchApi("/tickets/", {
+        method: "POST",
+        body: JSON.stringify({
+          title: payload.title,
+          category: payload.category,
+          priority: payload.priority
+        })
+      });
+      
+      // Post the initial message if provided
+      if (payload.message && payload.message.trim().length > 0) {
+        await fetchApi(`/tickets/${ticket.id}/messages`, {
+          method: "POST",
+          body: JSON.stringify({ message: payload.message })
+        });
+      }
+      return ticket;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["tickets"] });
+      toast.success("Support ticket opened");
+      setShowAddModal(false);
+      setTitle("");
+      setInitialMessage("");
+      setSelectedTicket(data);
+    },
+    onError: (err: any) => {
+      toast.error(err.message || "Failed to open ticket");
+    }
+  });
+
+  const replyMutation = useMutation({
+    mutationFn: async ({ ticketId, message }: { ticketId: number; message: string }) => {
+      return await fetchApi(`/tickets/${ticketId}/messages`, {
+        method: "POST",
+        body: JSON.stringify({ message })
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tickets"] });
+      setReplyText("");
+    },
+    onError: (err: any) => {
+      toast.error(err.message || "Failed to send message");
+    }
+  });
+
+  const updateStatusMutation = useMutation({
+    mutationFn: async ({ ticketId, status }: { ticketId: number; status: string }) => {
+      return await fetchApi(`/tickets/${ticketId}/status`, {
+        method: "PUT",
+        body: JSON.stringify({ status })
+      });
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["tickets"] });
+      setSelectedTicket(data);
+      toast.success(`Ticket status marked as ${data.status}`);
+    },
+    onError: (err: any) => {
+      toast.error(err.message || "Failed to update ticket status");
+    }
+  });
+
+  // Keep chat scrolled to bottom
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [selectedTicket?.messages]);
+
+  // Sync selected ticket details after query updates
+  useEffect(() => {
+    if (selectedTicket) {
+      const updated = tickets.find((t: any) => t.id === selectedTicket.id);
+      if (updated) setSelectedTicket(updated);
+    }
+  }, [tickets, selectedTicket]);
+
+  const handleSendReply = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!replyText.trim() || !selectedTicket) return;
+    replyMutation.mutate({ ticketId: selectedTicket.id, message: replyText });
+  };
+
+  const handleCreateSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim() || !initialMessage.trim()) return;
+    createTicketMutation.mutate({ title, category, priority, message: initialMessage });
+  };
+
+  const isHR = profile?.role?.name === "Admin" || profile?.role?.name === "HR" || profile?.role?.name === "Super Admin";
+
+  return (
+    <SidebarLayout>
+      <div className="h-[calc(100vh-6.5rem)] flex flex-col md:flex-row border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-2xs">
+        
+        {/* Left pane: Tickets list */}
+        <div className="w-full md:w-80 border-r border-slate-200 flex flex-col shrink-0">
+          <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+            <h1 className="text-sm font-extrabold text-slate-900 tracking-tight flex items-center gap-1.5">
+              <MessageSquare className="w-4 h-4 text-slate-700" />
+              Helpdesk Support
+            </h1>
+            {!isHR && (
+              <button
+                onClick={() => setShowAddModal(true)}
+                className="p-1.5 bg-slate-900 hover:bg-slate-800 text-white rounded-lg cursor-pointer active:scale-95 transition-all"
+                title="Create Ticket"
+              >
+                <Plus className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-2 space-y-1">
+            {isLoading ? (
+              Array.from({ length: 4 }).map((_, i) => (
+                <div key={i} className="p-3 border border-slate-50 rounded-xl animate-pulse space-y-2">
+                  <div className="h-3 w-28 bg-slate-100 rounded" />
+                  <div className="h-2 w-20 bg-slate-100 rounded" />
+                </div>
+              ))
+            ) : tickets.length > 0 ? (
+              tickets.map((t: any) => (
+                <button
+                  key={t.id}
+                  onClick={() => setSelectedTicket(t)}
+                  className={`w-full text-left p-3 rounded-xl border transition-all cursor-pointer flex flex-col gap-1.5 ${
+                    selectedTicket?.id === t.id
+                      ? "border-slate-300 bg-slate-50"
+                      : "border-transparent hover:bg-slate-50/50"
+                  }`}
+                >
+                  <div className="flex items-start justify-between w-full">
+                    <span className="text-[9px] font-bold uppercase tracking-wider text-slate-400">{t.category}</span>
+                    <span className={`text-[8px] font-bold px-1.5 py-0.5 rounded border ${
+                      t.priority === "High" 
+                        ? "bg-rose-50 border-rose-100 text-rose-600" 
+                        : t.priority === "Medium"
+                          ? "bg-amber-50 border-amber-100 text-amber-600"
+                          : "bg-slate-50 border-slate-150 text-slate-600"
+                    }`}>
+                      {t.priority}
+                    </span>
+                  </div>
+                  <div>
+                    <h3 className="text-xs font-bold text-slate-800 truncate">{t.title}</h3>
+                    {isHR && t.employee && (
+                      <p className="text-[10px] text-slate-450 mt-0.5">By: {t.employee.name}</p>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-1.5 mt-1">
+                    <span className={`w-1.5 h-1.5 rounded-full ${
+                      t.status === "Closed" ? "bg-emerald-500" : t.status === "In Progress" ? "bg-amber-500" : "bg-blue-500"
+                    }`} />
+                    <span className="text-[9px] font-bold text-slate-450 uppercase">{t.status}</span>
+                  </div>
+                </button>
+              ))
+            ) : (
+              <div className="py-12 text-center text-slate-400 text-xs font-medium">
+                No support tickets found.
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right pane: Message details */}
+        <div className="flex-1 flex flex-col bg-slate-50/50 h-full">
+          {selectedTicket ? (
+            <>
+              {/* Ticket header details */}
+              <div className="p-4 border-b border-slate-200 bg-white flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 shrink-0">
+                <div className="space-y-0.5">
+                  <span className="text-[9px] font-extrabold uppercase tracking-wider text-slate-400">{selectedTicket.category} Support Ticket</span>
+                  <h2 className="text-xs font-bold text-slate-900">{selectedTicket.title}</h2>
+                  {isHR && selectedTicket.employee && (
+                    <p className="text-[10px] text-slate-450">Submitted by: <strong className="text-slate-700">{selectedTicket.employee.name}</strong> ({selectedTicket.employee.email})</p>
+                  )}
+                </div>
+                
+                {/* HR Status updater action */}
+                {isHR ? (
+                  <div className="flex items-center gap-2">
+                    <span className="text-[10px] font-bold text-slate-400">STATUS:</span>
+                    <select
+                      value={selectedTicket.status}
+                      onChange={(e) => updateStatusMutation.mutate({ ticketId: selectedTicket.id, status: e.target.value })}
+                      className="text-[10px] font-bold h-7 border border-slate-200 rounded-lg bg-white px-2 text-slate-800"
+                    >
+                      <option value="Open">Open</option>
+                      <option value="In Progress">In Progress</option>
+                      <option value="Closed">Closed</option>
+                    </select>
+                  </div>
+                ) : (
+                  <span className={`text-[9px] font-mono font-bold px-2 py-0.5 border rounded-full ${
+                    selectedTicket.status === "Closed"
+                      ? "bg-emerald-50 border-emerald-150 text-emerald-700"
+                      : selectedTicket.status === "In Progress"
+                        ? "bg-amber-50 border-amber-150 text-amber-700"
+                        : "bg-blue-50 border-blue-150 text-blue-700"
+                  }`}>
+                    {selectedTicket.status}
+                  </span>
+                )}
+              </div>
+
+              {/* Chat Thread */}
+              <div className="flex-1 overflow-y-auto p-4 space-y-3.5">
+                {selectedTicket.messages && selectedTicket.messages.map((m: any) => {
+                  const isMe = m.sender_id === profile?.id;
+                  return (
+                    <div key={m.id} className={`flex items-start gap-2.5 max-w-[85%] ${isMe ? "ml-auto flex-row-reverse" : "mr-auto"}`}>
+                      <div className="w-7 h-7 rounded-full bg-slate-200 border border-slate-300 flex items-center justify-center text-slate-600 shrink-0">
+                        <User className="w-3.5 h-3.5" />
+                      </div>
+                      <div className="space-y-1">
+                        <div className={`p-3 rounded-2xl text-xs leading-relaxed ${
+                          isMe 
+                            ? "bg-slate-900 text-white rounded-tr-none" 
+                            : "bg-white border border-slate-200 text-slate-800 rounded-tl-none"
+                        }`}>
+                          <p>{m.message}</p>
+                        </div>
+                        <p className={`text-[8px] text-slate-400 font-mono ${isMe ? "text-right" : ""}`}>
+                          {new Date(m.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                        </p>
+                      </div>
+                    </div>
+                  );
+                })}
+                <div ref={chatEndRef} />
+              </div>
+
+              {/* Reply Form */}
+              {selectedTicket.status !== "Closed" ? (
+                <form onSubmit={handleSendReply} className="p-3 bg-white border-t border-slate-200 flex gap-2 shrink-0">
+                  <input
+                    type="text"
+                    placeholder="Type support reply message..."
+                    value={replyText}
+                    onChange={(e) => setReplyText(e.target.value)}
+                    className="flex-1 text-xs h-9 border border-slate-200 px-3 rounded-xl focus:outline-none focus:border-cyan-400 text-slate-900 bg-white"
+                  />
+                  <button
+                    type="submit"
+                    disabled={replyMutation.isPending || !replyText.trim()}
+                    className="h-9 px-4 bg-slate-900 hover:bg-slate-800 text-white rounded-xl text-xs font-bold flex items-center gap-1 active:scale-95 transition-all cursor-pointer disabled:opacity-50"
+                  >
+                    {replyMutation.isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Send className="w-3.5 h-3.5" />}
+                    Send
+                  </button>
+                </form>
+              ) : (
+                <div className="p-4 bg-slate-100 border-t border-slate-200 text-center text-[10px] text-slate-500 font-semibold uppercase tracking-wider shrink-0">
+                  🔒 This support ticket is closed and resolved.
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="flex-1 flex flex-col items-center justify-center text-slate-400 gap-2 p-6">
+              <MessageSquare className="w-10 h-10 text-slate-300" />
+              <p className="text-xs font-medium">Select a ticket from the left panel to open chat support</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Add modal */}
+      {showAddModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-xs px-4">
+          <div className="bg-white border border-slate-200 rounded-2xl shadow-xl w-full max-w-md overflow-hidden animate-fadeInUp p-6 space-y-4">
+            <h2 className="text-sm font-bold text-slate-900 border-b border-slate-100 pb-3">Open Support Ticket</h2>
+            <form onSubmit={handleCreateSubmit} className="space-y-3">
+              <div className="space-y-1">
+                <label className="text-[9.5px] font-bold text-slate-400 uppercase tracking-wider">Subject Title</label>
+                <input
+                  type="text"
+                  required
+                  placeholder="e.g. Discrepancy in check-in logs"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <label className="text-[9.5px] font-bold text-slate-400 uppercase tracking-wider">Category</label>
+                  <select
+                    value={category}
+                    onChange={(e) => setCategory(e.target.value)}
+                    className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                  >
+                    <option value="Payroll">Payroll</option>
+                    <option value="Attendance">Attendance</option>
+                    <option value="IT Support">IT Support</option>
+                    <option value="Leave Requests">Leave Requests</option>
+                    <option value="General Queries">General Queries</option>
+                  </select>
+                </div>
+                <div className="space-y-1">
+                  <label className="text-[9.5px] font-bold text-slate-400 uppercase tracking-wider">Priority</label>
+                  <select
+                    value={priority}
+                    onChange={(e) => setPriority(e.target.value)}
+                    className="w-full text-xs h-9 px-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900"
+                  >
+                    <option value="Low">Low</option>
+                    <option value="Medium">Medium</option>
+                    <option value="High">High</option>
+                  </select>
+                </div>
+              </div>
+              <div className="space-y-1">
+                <label className="text-[9.5px] font-bold text-slate-400 uppercase tracking-wider">Message Description</label>
+                <textarea
+                  required
+                  rows={4}
+                  placeholder="Describe your issue or query here..."
+                  value={initialMessage}
+                  onChange={(e) => setInitialMessage(e.target.value)}
+                  className="w-full text-xs p-3 rounded-lg border border-slate-200 focus:outline-none focus:border-cyan-400 bg-white text-slate-900 resize-none"
+                />
+              </div>
+              <div className="flex items-center justify-end gap-2 pt-4 border-t border-slate-100">
+                <button
+                  type="button"
+                  onClick={() => setShowAddModal(false)}
+                  className="px-3.5 py-2 text-xs font-bold text-slate-500 hover:bg-slate-100 rounded-lg cursor-pointer"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={createTicketMutation.isPending}
+                  className="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white font-extrabold text-xs rounded-lg cursor-pointer flex items-center gap-1"
+                >
+                  {createTicketMutation.isPending && <Loader2 className="w-3 h-3 animate-spin" />}
+                  Open Ticket
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </SidebarLayout>
+  );
+}

frontend/components/SidebarLayout.tsx

@@ -18,7 +18,8 @@ import {
   History,
   Sun,
   Moon,
-  Building2
+  Building2,
+  MessageSquare
 } from "lucide-react";
 import { getAccessToken, getUserProfile, clearTokens } from "@/app/utils/api";
 
@@ -27,6 +28,7 @@ const navItems = [
   { name: "Organizations",   href: "/tenants",    icon: Building2 },
   { name: "Attendance",      href: "/attendance", icon: Clock },
   { name: "Employees",       href: "/employees",  icon: Users },
+  { name: "Helpdesk Support",href: "/tickets",    icon: MessageSquare },
   { name: "Reports",         href: "/reports",    icon: FileSpreadsheet },
   { name: "Audit Logs",      href: "/audit",      icon: History },
   { name: "Settings",        href: "/settings",   icon: Settings },
@@ -138,8 +140,8 @@ export default function SidebarLayout({ children }: { children: React.ReactNode
       setUser(profile);
       setAuthorized(true);
       
-      // Auto-redirect employees to dashboard if they attempt to access any admin views
-      if (profile?.role?.name === "Employee" && pathname !== "/dashboard") {
+       // Auto-redirect employees to dashboard if they attempt to access any admin views
+      if (profile?.role?.name === "Employee" && pathname !== "/dashboard" && pathname !== "/tickets") {
         router.push("/dashboard");
       } else if (profile?.role?.name !== "Super Admin" && pathname === "/tenants") {
         router.push("/dashboard");
@@ -170,7 +172,7 @@ export default function SidebarLayout({ children }: { children: React.ReactNode
   const isEmployee = user?.role?.name === "Employee";
   const isSuperAdmin = user?.role?.name === "Super Admin";
   const visibleNavItems = isEmployee 
-    ? navItems.filter(item => item.href === "/dashboard") 
+    ? navItems.filter(item => item.href === "/dashboard" || item.href === "/tickets") 
     : isSuperAdmin
       ? navItems
       : navItems.filter(item => item.href !== "/tenants");