hrms-frontend

name	hrms-frontend
description	Build and maintain the Interview Bot Next.js frontend with dashboard UI, candidate interview pages, and responsive design. Use when creating pages, components, layouts, forms, or frontend configuration.

Interview Bot Next.js Frontend

Tech Stack

{
  "dependencies": {
    "next": "^14.2",
    "react": "^18.3",
    "react-dom": "^18.3",
    "@radix-ui/react-dialog": "^1.1",
    "@radix-ui/react-dropdown-menu": "^2.1",
    "@radix-ui/react-tabs": "^1.1",
    "@radix-ui/react-select": "^2.1",
    "class-variance-authority": "^0.7",
    "clsx": "^2.1",
    "tailwind-merge": "^2.5",
    "lucide-react": "^0.460",
    "recharts": "^2.13",
    "zustand": "^4.5",
    "@tanstack/react-query": "^5.60",
    "@livekit/components-react": "^2.6",
    "livekit-client": "^2.6",
    "@monaco-editor/react": "^4.6",
    "react-hook-form": "^7.53",
    "@hookform/resolvers": "^3.9",
    "zod": "^3.23",
    "sonner": "^1.7",
    "date-fns": "^3.6"
  }
}

API Client

Typed client wrapping fetch with automatic auth headers.

// lib/api.ts
const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8001";

class ApiError extends Error {
  constructor(public status: number, message: string) {
    super(message);
  }
}

async function request<T>(path: string, options?: RequestInit): Promise<T> {
  const token = typeof window !== "undefined"
    ? localStorage.getItem("token")
    : null;

  const res = await fetch(`${API_BASE}${path}`, {
    ...options,
    headers: {
      "Content-Type": "application/json",
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
      ...options?.headers,
    },
  });

  if (!res.ok) {
    const body = await res.json().( ({}));
      (res., body. || );
  }
   res.();
}

  api = {
  :  request<{ :  }>(),

  
  : 
    request<{ : ; :  }>(, {
      : , : .({ email, password }),
    }),
  : 
    request<{ :  }>(, {
      : , : .(data),
    }),

  
  : 
    request<>(),
  : 
    request<>(, {
      : , : .(data),
    }),

  
  : 
    request<[]>(),
  : 
    request<>(),

  
  : 
    request<>(),
  : 
    request<>(, {
      : , : .(data),
    }),

  
  :  request<>(),

  
  :  request<>(),
  : 
    request<{ :  }>(, {
      : , : .({ : planId }),
    }),
};

Page Template

"use client";

import { useEffect, useState } from "react";
import { toast } from "sonner";
import { api } from "@/lib/api";

export default function FeaturePage() {
  const [data, setData] = useState<DataType[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.getData()
      .then(setData)
      .catch((err) => toast.error(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <PageSkeleton />;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-slate-900">Feature</h1>
      
      {/* Content */}
    
  );
}

Dashboard Layout

// app/(dashboard)/layout.tsx
"use client";
import { useState } from "react";
import { Sidebar } from "@/components/layout/sidebar";
import { Topbar } from "@/components/layout/topbar";
import { MobileNav } from "@/components/layout/mobile-nav";

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-indigo-50/30">
      <Sidebar className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64" />
      <MobileNav open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
      <div className="lg:pl-64">
        <Topbar onMenuClick={() => setSidebarOpen(true)} />
        <main className="p-4 sm:p-6 lg:p-8">{children}
      
    
  );
}

KPI Card

// components/dashboard/kpi-card.tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { TrendingUp, TrendingDown } from "lucide-react";

interface KPICardProps {
  label: string;
  value: string;
  changePct: number;
  icon: React.ReactNode;
  loading?: boolean;
}

export function KPICard({ label, value, changePct, icon, loading }: KPICardProps) {
  if (loading) {
    return (
      <Card>
        <CardContent className="p-6">
          <div className="h-4 w-24 animate-pulse rounded bg-slate-200" />
          <div className="mt-3 h-8 w-32 animate-pulse rounded bg-slate-200" />
        </CardContent>
      </Card>
    );
  }

  const isPositive = changePct >= ;

   (
    
  );
}

Form Pattern (React Hook Form + Zod)

"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { toast } from "sonner";
import { api } from "@/lib/api";

const schema = z.object({
  title: z.string().min(3, "Title must be at least 3 characters"),
  job_description: z.string().min(50, "Description must be at least 50 characters"),
  role_type: z.enum(["technical", "non_technical", "mixed"]),
  interview_format: z.enum(["text", "voice", "video"]),
});

type FormData = z.infer<typeof schema>;

export function CreateJobForm({ onSuccess }: { onSuccess: () => void }) {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormData>({ : (schema) });

    () {
     {
       api.(data);
      toast.();
      ();
    }  (: ) {
      toast.(err.);
    }
  }

   (
    
  );
}

Candidate Interview Page (Dark Theme)

The candidate-facing interview page uses a dark theme, distinct from the dashboard.

// app/interview/[token]/page.tsx
"use client";

import { useParams } from "next/navigation";
import { InterviewChat } from "@/components/interview/interview-chat";
import { InterviewVoice } from "@/components/interview/interview-voice";
import { InterviewVideo } from "@/components/interview/interview-video";

export default function InterviewPage() {
  const { token } = useParams<{ token: string }>();

  return (
    <div className="min-h-screen bg-slate-900 text-white">
      {/* Interview UI renders based on format */}
    </div>
  );
}

Chat Bubble Component

// components/interview/chat-bubble.tsx
import { cn } from "@/lib/utils";

interface ChatBubbleProps {
  role: "interviewer" | "candidate";
  content: string;
  timestamp?: string;
}

export function ChatBubble({ role, content, timestamp }: ChatBubbleProps) {
  const isInterviewer = role === "interviewer";

  return (
    <div className={cn("flex", isInterviewer ? "justify-start" : "justify-end")}>
      <div className={cn(
        "max-w-[75%] rounded-2xl px-4 py-3 text-sm",
        isInterviewer
          ? "bg-slate-700 text-slate-100 rounded-bl-md"
          : "bg-indigo-600 text-white rounded-br-md"
      )}>
        <p>{content}</p>
        {timestamp && (
          <span =>{timestamp}
        )}
      
    
  );
}

Loading Skeleton

function PageSkeleton() {
  return (
    <div className="space-y-4">
      <div className="h-8 w-48 animate-pulse rounded-lg bg-slate-200" />
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="h-28 animate-pulse rounded-xl bg-slate-200" />
        ))}
      </div>
      <div className="h-64 animate-pulse rounded-xl bg-slate-200" />
    </div>
  );
}

Error Boundary

// app/(dashboard)/error.tsx
"use client";
export default function DashboardError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div className="flex min-h-[400px] flex-col items-center justify-center gap-4">
      <h2 className="text-xl font-semibold text-slate-900">Something went wrong</h2>
      <p className="text-slate-500">{error.message}</p>
      <button onClick={reset} className="rounded-lg bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-500">
        Try again
      </button>
    </div>
  );
}

Key Rules

1. Never hardcode backend URLs -- use NEXT_PUBLIC_API_URL
2. Always use the api client -- never raw fetch in components
3. Always provide loading skeletons -- never blank screens
4. Always define TypeScript interfaces for API responses
5. Dashboard pages use light theme -- slate/indigo palette
6. Candidate interview pages use dark theme -- slate-900 background
7. Toast notifications via sonner -- never alert()
8. Icons from lucide-react only
9. Mobile-first -- design for 375px, scale up with sm:, md:, lg:
10. Sidebar collapses on screens < 1024px