10 |
11 |
13 |
15 |
16 | {user.name}
17 |
18 | );
19 | }
20 | export default UserInfo;
21 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "@/*": ["./src/*"]
22 | }
23 | },
24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 | "exclude": ["node_modules"]
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/providers/ConvexClerkProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ClerkProvider, useAuth } from "@clerk/nextjs";
4 | import { ConvexReactClient } from "convex/react";
5 | import { ConvexProviderWithClerk } from "convex/react-clerk";
6 |
7 | const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
8 | function ConvexClerkProvider({ children }: { children: React.ReactNode }) {
9 | return (
10 |
24 |
26 | );
27 | }
28 |
29 | return (
30 | Meeting not found
25 |
22 |
39 |
23 | {/* ACTION ICON */}
24 |
38 |
27 |
29 |
30 | {/* ACTION DETAILS */}
31 |
32 |
37 | 33 | {action.title} 34 |
35 |{action.description}
36 |
44 | {children}
46 |
47 |
41 |
43 | )}
44 |
23 |
33 | {status === "live" ? "Live Now" : status === "upcoming" ? "Upcoming" : "Completed"}
34 |
35 |
36 |
37 |
24 |
27 |
28 |
36 | {/* HEADER SECTION */}
37 |
45 | {recordings.length > 0 ? (
46 |
57 |
58 | );
59 | }
60 | export default RecordingsPage;
61 |
--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | body {
5 | font-family: Arial, Helvetica, sans-serif;
6 | }
7 |
8 | @layer utilities {
9 | .text-balance {
10 | text-wrap: balance;
11 | }
12 | }
13 | @layer base {
14 | :root {
15 | --background: 0 0% 100%;
16 | --foreground: 240 10% 3.9%;
17 | --card: 0 0% 100%;
18 | --card-foreground: 240 10% 3.9%;
19 | --popover: 0 0% 100%;
20 | --popover-foreground: 240 10% 3.9%;
21 | --primary: 142.1 76.2% 36.3%;
22 | --primary-foreground: 355.7 100% 97.3%;
23 | --secondary: 240 4.8% 95.9%;
24 | --secondary-foreground: 240 5.9% 10%;
25 | --muted: 240 4.8% 95.9%;
26 | --muted-foreground: 240 3.8% 46.1%;
27 | --accent: 240 4.8% 95.9%;
28 | --accent-foreground: 240 5.9% 10%;
29 | --destructive: 0 84.2% 60.2%;
30 | --destructive-foreground: 0 0% 98%;
31 | --border: 240 5.9% 90%;
32 | --input: 240 5.9% 90%;
33 | --ring: 142.1 76.2% 36.3%;
34 | --radius: 0.5rem;
35 | --chart-1: 12 76% 61%;
36 | --chart-2: 173 58% 39%;
37 | --chart-3: 197 37% 24%;
38 | --chart-4: 43 74% 66%;
39 | --chart-5: 27 87% 67%;
40 | }
41 |
42 | .dark {
43 | --background: 20 14.3% 4.1%;
44 | --foreground: 0 0% 95%;
45 | --card: 24 9.8% 10%;
46 | --card-foreground: 0 0% 95%;
47 | --popover: 0 0% 9%;
48 | --popover-foreground: 0 0% 95%;
49 | --primary: 142.1 70.6% 45.3%;
50 | --primary-foreground: 144.9 80.4% 10%;
51 | --secondary: 240 3.7% 15.9%;
52 | --secondary-foreground: 0 0% 98%;
53 | --muted: 0 0% 15%;
54 | --muted-foreground: 240 5% 64.9%;
55 | --accent: 12 6.5% 15.1%;
56 | --accent-foreground: 0 0% 98%;
57 | --destructive: 0 62.8% 30.6%;
58 | --destructive-foreground: 0 85.7% 97.3%;
59 | --border: 240 3.7% 15.9%;
60 | --input: 240 3.7% 15.9%;
61 | --ring: 142.4 71.8% 29.2%;
62 | --chart-1: 220 70% 50%;
63 | --chart-2: 160 60% 45%;
64 | --chart-3: 30 80% 55%;
65 | --chart-4: 280 65% 60%;
66 | --chart-5: 340 75% 55%;
67 | }
68 | }
69 |
70 | @layer base {
71 | * {
72 | @apply border-border;
73 | }
74 | body {
75 | @apply bg-background text-foreground;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/convex/http.ts:
--------------------------------------------------------------------------------
1 | import { httpRouter } from "convex/server";
2 | import { httpAction } from "./_generated/server";
3 | import { WebhookEvent } from "@clerk/nextjs/server";
4 | import { Webhook } from "svix";
5 | import { api } from "./_generated/api";
6 |
7 | const http = httpRouter();
8 |
9 | http.route({
10 | path: "/clerk-webhook",
11 | method: "POST",
12 | handler: httpAction(async (ctx, request) => {
13 | const webhookSecret = process.env.CLERK_WEBHOOK_SECRET;
14 | if (!webhookSecret) {
15 | throw new Error("Missing CLERK_WEBHOOK_SECRET environment variable");
16 | }
17 |
18 | const svix_id = request.headers.get("svix-id");
19 | const svix_signature = request.headers.get("svix-signature");
20 | const svix_timestamp = request.headers.get("svix-timestamp");
21 |
22 | if (!svix_id || !svix_signature || !svix_timestamp) {
23 | return new Response("No svix headers found", {
24 | status: 400,
25 | });
26 | }
27 |
28 | const payload = await request.json();
29 | const body = JSON.stringify(payload);
30 |
31 | const wh = new Webhook(webhookSecret);
32 | let evt: WebhookEvent;
33 |
34 | try {
35 | evt = wh.verify(body, {
36 | "svix-id": svix_id,
37 | "svix-timestamp": svix_timestamp,
38 | "svix-signature": svix_signature,
39 | }) as WebhookEvent;
40 | } catch (err) {
41 | console.error("Error verifying webhook:", err);
42 | return new Response("Error occurred", { status: 400 });
43 | }
44 |
45 | const eventType = evt.type;
46 |
47 | if (eventType === "user.created") {
48 | const { id, email_addresses, first_name, last_name, image_url } = evt.data;
49 |
50 | const email = email_addresses[0].email_address;
51 | const name = `${first_name || ""} ${last_name || ""}`.trim();
52 |
53 | try {
54 | await ctx.runMutation(api.users.syncUser, {
55 | clerkId: id,
56 | email,
57 | name,
58 | image: image_url,
59 | });
60 | } catch (error) {
61 | console.log("Error creating user:", error);
62 | return new Response("Error creating user", { status: 500 });
63 | }
64 | }
65 |
66 | return new Response("Webhook processed successfully", { status: 200 });
67 | }),
68 | });
69 |
70 | export default http;
71 |
--------------------------------------------------------------------------------
/convex/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to your Convex functions directory!
2 |
3 | Write your Convex functions here.
4 | See https://docs.convex.dev/functions for more.
5 |
6 | A query function that takes two arguments looks like:
7 |
8 | ```ts
9 | // functions.js
10 | import { query } from "./_generated/server";
11 | import { v } from "convex/values";
12 |
13 | export const myQueryFunction = query({
14 | // Validators for arguments.
15 | args: {
16 | first: v.number(),
17 | second: v.string(),
18 | },
19 |
20 | // Function implementation.
21 | handler: async (ctx, args) => {
22 | // Read the database as many times as you need here.
23 | // See https://docs.convex.dev/database/reading-data.
24 | const documents = await ctx.db.query("tablename").collect();
25 |
26 | // Arguments passed from the client are properties of the args object.
27 | console.log(args.first, args.second);
28 |
29 | // Write arbitrary JavaScript here: filter, aggregate, build derived data,
30 | // remove non-public properties, or create new objects.
31 | return documents;
32 | },
33 | });
34 | ```
35 |
36 | Using this query function in a React component looks like:
37 |
38 | ```ts
39 | const data = useQuery(api.functions.myQueryFunction, {
40 | first: 10,
41 | second: "hello",
42 | });
43 | ```
44 |
45 | A mutation function looks like:
46 |
47 | ```ts
48 | // functions.js
49 | import { mutation } from "./_generated/server";
50 | import { v } from "convex/values";
51 |
52 | export const myMutationFunction = mutation({
53 | // Validators for arguments.
54 | args: {
55 | first: v.string(),
56 | second: v.string(),
57 | },
58 |
59 | // Function implementation.
60 | handler: async (ctx, args) => {
61 | // Insert or modify documents in the database here.
62 | // Mutations can also read from the database like queries.
63 | // See https://docs.convex.dev/database/writing-data.
64 | const message = { body: args.first, author: args.second };
65 | const id = await ctx.db.insert("messages", message);
66 |
67 | // Optionally, return a value from your mutation.
68 | return await ctx.db.get(id);
69 | },
70 | });
71 | ```
72 |
73 | Using this mutation function in a React component looks like:
74 |
75 | ```ts
76 | const mutation = useMutation(api.functions.myMutationFunction);
77 | function handleButtonPress() {
78 | // fire and forget, the most common way to use mutations
79 | mutation({ first: "Hello!", second: "me" });
80 | // OR
81 | // use the result once the mutation has completed
82 | mutation({ first: "Hello!", second: "me" }).then((result) =>
83 | console.log(result),
84 | );
85 | }
86 | ```
87 |
88 | Use the Convex CLI to push your functions to a deployment. See everything
89 | the Convex CLI can do by running `npx convex -h` in your project root
90 | directory. To learn more, launch the docs with `npx convex docs`.
91 |
--------------------------------------------------------------------------------
/src/components/RecordingCard.tsx:
--------------------------------------------------------------------------------
1 | import { CallRecording } from "@stream-io/video-react-sdk";
2 | import toast from "react-hot-toast";
3 | import { format } from "date-fns";
4 | import { calculateRecordingDuration } from "@/lib/utils";
5 | import { Card, CardContent, CardFooter, CardHeader } from "./ui/card";
6 | import { CalendarIcon, ClockIcon, CopyIcon, PlayIcon } from "lucide-react";
7 | import { Button } from "./ui/button";
8 |
9 | function RecordingCard({ recording }: { recording: CallRecording }) {
10 | const handleCopyLink = async () => {
11 | try {
12 | await navigator.clipboard.writeText(recording.url);
13 | toast.success("Recording link copied to clipboard");
14 | } catch (error) {
15 | toast.error("Failed to copy link to clipboard");
16 | }
17 | };
18 |
19 | const formattedStartTime = recording.start_time
20 | ? format(new Date(recording.start_time), "MMM d, yyyy, hh:mm a")
21 | : "Unknown";
22 |
23 | const duration =
24 | recording.start_time && recording.end_time
25 | ? calculateRecordingDuration(recording.start_time, recording.end_time)
26 | : "Unknown duration";
27 |
28 | return (
29 | Recordings
38 |39 | {recordings.length} {recordings.length === 1 ? "recording" : "recordings"} available 40 |
41 | 42 | {/* RECORDINGS GRID */} 43 | 44 |
47 | {recordings.map((r) => (
48 |
51 | ) : (
52 |
53 |
55 | )}
56 | No recordings available
54 |
33 |
44 |
34 |
43 |
35 |
38 |
39 |
42 | window.open(recording.url, "_blank")}
53 | >
54 |
58 |
55 |
57 | ✨ Video Calling Interview Platform ✨
2 | 3 |
4 | 
14 | A modern interview platform tailored for seamless video calls, real-time screen sharing, and secure candidate assessments. 15 |
16 | 17 | 18 | --- 19 | 20 | ## 🚀 Features 21 | 22 | - **Next.js & TypeScript** — Cutting-edge frontend stack for speed & reliability. 23 | - **Stream Integration** — Real-time video calls, screen sharing, and recording. 24 | - **Authentication & Authorization** — Secure access via Clerk. 25 | - **Convex** — Serverless backend for scalable data storage. 26 | - **Dynamic & Static Routing** — Flexible navigation architecture. 27 | - **Server & Client Components** — Optimized data fetching and UI updates. 28 | - **Server Actions** — Secure backend operations with Next.js. 29 | - **Modern UI** — Styled with Tailwind CSS and Shadcn for a professional look. 30 | - **Responsive Design** — Works great on desktops, laptops & mobile devices. 31 | 32 | --- 33 | 34 | ## 🛠️ Getting Started 35 | 36 | ### 1. Clone the Repository 37 | 38 | ```shell 39 | git clone https://github.com/your-username/video-calling-interview-platform.git 40 | cd video-calling-interview-platform 41 | ``` 42 | 43 | ### 2. Install Dependencies 44 | 45 | ```shell 46 | npm install 47 | ``` 48 | 49 | ### 3. Configure Environment Variables 50 | 51 | Create a `.env.local` file at the root of your project and add the following variables: 52 | 53 | ```env 54 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key 55 | CLERK_SECRET_KEY=your_clerk_secret_key 56 | CONVEX_DEPLOYMENT=your_convex_deployment_url 57 | NEXT_PUBLIC_CONVEX_URL=your_convex_url 58 | NEXT_PUBLIC_STREAM_API_KEY=your_stream_api_key 59 | STREAM_SECRET_KEY=your_stream_secret_key 60 | ``` 61 | 62 | > 💡 **Tip:** Never commit your `.env.local` file. Store secrets securely. 63 | 64 | ### 4. Start the Development Server 65 | 66 | ```shell 67 | npm run dev 68 | ``` 69 | 70 | Visit [http://localhost:3000](http://localhost:3000) to explore the platform. 71 | 72 | --- 73 | 74 | ## 📱 Responsive & Attractive Design 75 | 76 | - **Mobile First:** Optimized layouts for all devices. 77 | - **Intuitive UI:** Easy navigation and user-friendly controls. 78 | - **Professional Styling:** Clean, modern look with Tailwind and Shadcn components. 79 | 80 | --- 81 | 82 | ## 📚 Documentation 83 | 84 | 85 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx"; 2 | import { addHours, intervalToDuration, isAfter, isBefore, isWithinInterval } from "date-fns"; 3 | import { twMerge } from "tailwind-merge"; 4 | import { Doc } from "../../convex/_generated/dataModel"; 5 | 6 | export function cn(...inputs: ClassValue[]) { 7 | return twMerge(clsx(inputs)); 8 | } 9 | type Interview = Doc<"interviews">; 10 | type User = Doc<"users">; 11 | 12 | export const groupInterviews = (interviews: Interview[]) => { 13 | if (!interviews) return {}; 14 | 15 | return interviews.reduce((acc: any, interview: Interview) => { 16 | const date = new Date(interview.startTime); 17 | const now = new Date(); 18 | 19 | if (interview.status === "succeeded") { 20 | acc.succeeded = [...(acc.succeeded || []), interview]; 21 | } else if (interview.status === "failed") { 22 | acc.failed = [...(acc.failed || []), interview]; 23 | } else if (isBefore(date, now)) { 24 | acc.completed = [...(acc.completed || []), interview]; 25 | } else if (isAfter(date, now)) { 26 | acc.upcoming = [...(acc.upcoming || []), interview]; 27 | } 28 | 29 | return acc; 30 | }, {}); 31 | }; 32 | 33 | export const getCandidateInfo = (users: User[], candidateId: string) => { 34 | const candidate = users?.find((user) => user.clerkId === candidateId); 35 | return { 36 | name: candidate?.name || "Unknown Candidate", 37 | image: candidate?.image || "", 38 | initials: 39 | candidate?.name 40 | ?.split(" ") 41 | .map((n) => n[0]) 42 | .join("") || "UC", 43 | }; 44 | }; 45 | 46 | export const getInterviewerInfo = (users: User[], interviewerId: string) => { 47 | const interviewer = users?.find((user) => user.clerkId === interviewerId); 48 | return { 49 | name: interviewer?.name || "Unknown Interviewer", 50 | image: interviewer?.image, 51 | initials: 52 | interviewer?.name 53 | ?.split(" ") 54 | .map((n) => n[0]) 55 | .join("") || "UI", 56 | }; 57 | }; 58 | 59 | export const calculateRecordingDuration = (startTime: string, endTime: string) => { 60 | const start = new Date(startTime); 61 | const end = new Date(endTime); 62 | 63 | const duration = intervalToDuration({ start, end }); 64 | 65 | if (duration.hours && duration.hours > 0) { 66 | return `${duration.hours}:${String(duration.minutes).padStart(2, "0")}:${String( 67 | duration.seconds 68 | ).padStart(2, "0")}`; 69 | } 70 | 71 | if (duration.minutes && duration.minutes > 0) { 72 | return `${duration.minutes}:${String(duration.seconds).padStart(2, "0")}`; 73 | } 74 | 75 | return `${duration.seconds} seconds`; 76 | }; 77 | 78 | export const getMeetingStatus = (interview: Interview) => { 79 | const now = new Date(); 80 | const interviewStartTime = interview.startTime; 81 | const endTime = addHours(interviewStartTime, 1); 82 | 83 | if ( 84 | interview.status === "completed" || 85 | interview.status === "failed" || 86 | interview.status === "succeeded" 87 | ) 88 | return "completed"; 89 | if (isWithinInterval(now, { start: interviewStartTime, end: endTime })) return "live"; 90 | if (isBefore(now, interviewStartTime)) return "upcoming"; 91 | return "completed"; 92 | }; 93 | -------------------------------------------------------------------------------- /src/components/ui/calendar.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { ChevronLeft, ChevronRight } from "lucide-react" 5 | import { DayPicker } from "react-day-picker" 6 | 7 | import { cn } from "@/lib/utils" 8 | import { buttonVariants } from "@/components/ui/button" 9 | 10 | export type CalendarProps = React.ComponentProps
42 | {/* WELCOME SECTION */}
43 | setShowModal(false)}
69 | title={modalType === "join" ? "Join Meeting" : "Start Meeting"}
70 | isJoinMeeting={modalType === "join"}
71 | />
72 |
73 | ) : (
74 | <>
75 |
100 | );
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/MeetingRoom.tsx:
--------------------------------------------------------------------------------
1 | import {
2 |
3 | CallControls,
4 | CallingState,
5 | CallParticipantsList,
6 | PaginatedGridLayout,
7 | SpeakerLayout,
8 | useCallStateHooks,
9 | } from "@stream-io/video-react-sdk";
10 | import { LayoutListIcon, LoaderIcon, UsersIcon } from "lucide-react";
11 | import { useRouter } from "next/navigation";
12 | import { useState } from "react";
13 | import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resizable";
14 | import {
15 | DropdownMenu,
16 | DropdownMenuContent,
17 | DropdownMenuItem,
18 | DropdownMenuTrigger,
19 | } from "./ui/dropdown-menu";
20 | import { Button } from "./ui/button";
21 | import EndCallButton from "./EndCallButton";
22 | import CodeEditor from "./CodeEditor";
23 |
24 |
25 | function MeetingRoom() {
26 | const router = useRouter();
27 | const [layout, setLayout] = useState<"grid" | "speaker">("speaker");
28 | const [showParticipants, setShowParticipants] = useState(false);
29 | const { useCallCallingState } = useCallStateHooks();
30 |
31 | const callingState = useCallCallingState();
32 |
33 | if (callingState !== CallingState.JOINED) {
34 | return (
35 |
44 |
53 |
54 | {isInterviewer ? (
55 | <>
56 | 45 | Welcome back! 46 |
47 |48 | {isInterviewer 49 | ? "Manage your interviews and review candidates effectively" 50 | : "Access your upcoming interviews and preparations"} 51 |
52 |
57 | {QUICK_ACTIONS.map((action) => (
58 | handleQuickAction(action.title)}
62 | />
63 | ))}
64 |
65 |
66 |
76 |
79 |
80 | Your Interviews
77 |View and join your scheduled interviews
78 |
81 | {interviews === undefined ? (
82 |
97 |
98 | )}
99 |
83 |
85 | ) : interviews.length > 0 ? (
86 |
87 | {interviews.map((interview) => (
88 |
91 | ) : (
92 |
93 | You have no scheduled interviews at the moment
94 |
95 | )}
96 |
36 |
38 | );
39 | }
40 |
41 |
42 | return (
43 |
44 |
45 |
46 | {/* VIDEO LAYOUT */}
47 |
97 |
98 |
101 |
103 |
104 |
105 | );
106 | }
107 | export default MeetingRoom;
108 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
5 | import { X } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Dialog = DialogPrimitive.Root
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger
12 |
13 | const DialogPortal = DialogPrimitive.Portal
14 |
15 | const DialogClose = DialogPrimitive.Close
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef
48 | {layout === "grid" ?
57 |
58 | {/* VIDEO CONTROLS */}
59 |
60 |
53 | setShowParticipants(false)} />
54 |
55 | )}
56 |
61 |
96 |
62 |
95 |
63 | router.push("/")} />
64 |
65 |
94 |
66 |
67 |
68 |
71 |
72 |
73 | setLayout("grid")}>
74 | Grid View
75 |
76 | setLayout("speaker")}>
77 | Speaker View
78 |
79 |
80 |
81 |
82 |
90 |
91 |
93 |
31 |
128 | );
129 | }
130 | export default MeetingSetup;
131 |
--------------------------------------------------------------------------------
/src/app/(admin)/dashboard/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useMutation, useQuery } from "convex/react";
4 | import { api } from "../../../../convex/_generated/api";
5 | import { Doc, Id } from "../../../../convex/_generated/dataModel";
6 | import toast from "react-hot-toast";
7 | import LoaderUI from "@/components/LoaderUI";
8 | import { getCandidateInfo, groupInterviews } from "@/lib/utils";
9 | import Link from "next/link";
10 | import { Button } from "@/components/ui/button";
11 | import { INTERVIEW_CATEGORY } from "@/constants";
12 | import { Badge } from "@/components/ui/badge";
13 | import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
14 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
15 | import { CalendarIcon, CheckCircle2Icon, ClockIcon, XCircleIcon } from "lucide-react";
16 | import { format } from "date-fns";
17 | import CommentDialog from "@/components/CommentDialog";
18 |
19 | type Interview = Doc<"interviews">;
20 |
21 | function DashboardPage() {
22 | const users = useQuery(api.users.getUsers);
23 | const interviews = useQuery(api.interviews.getAllInterviews);
24 | const updateStatus = useMutation(api.interviews.updateInterviewStatus);
25 |
26 | const handleStatusUpdate = async (interviewId: Id<"interviews">, status: string) => {
27 | try {
28 | await updateStatus({ id: interviewId, status });
29 | toast.success(`Interview marked as ${status}`);
30 | } catch (error) {
31 | toast.error("Failed to update status");
32 | }
33 | };
34 |
35 | if (!interviews || !users) return
32 |
127 |
33 | {/* VIDEO PREVIEW CONTAINER */}
34 |
35 |
47 |
48 | {/* CARD CONTROLS */}
49 |
50 |
51 |
125 |
126 |
36 |
39 |
40 | {/* VIDEO PREVIEW */}
41 | Camera Preview
37 |Make sure you look good!
38 |
42 |
46 |
43 |
45 |
52 | {/* MEETING DETAILS */}
53 |
124 |
54 |
57 |
58 | Meeting Details
55 |{call.id}
56 |
59 |
123 |
60 | {/* CAM CONTROL */}
61 |
112 |
113 | {/* JOIN BTN */}
114 |
62 | setIsCameraDisabled(!checked)}
76 | />
77 |
78 |
79 | {/* MIC CONTROL */}
80 |
63 |
73 |
64 |
66 |
67 |
72 | Camera
68 |69 | {isCameraDisabled ? "Off" : "On"} 70 |
71 |
81 | setIsMicDisabled(!checked)}
95 | />
96 |
97 |
98 | {/* DEVICE SETTINGS */}
99 |
82 |
92 |
83 |
85 |
86 |
91 | Microphone
87 |88 | {isMicDisabled ? "Off" : "On"} 89 |
90 |
100 |
111 |
101 |
109 |
102 |
104 |
105 |
108 | Settings
106 |Configure devices
107 |
115 |
118 |
122 | 119 | Do not worry, our team is super friendly! We want you to succeed. 🎉 120 |
121 |
41 |
125 | );
126 | }
127 | export default DashboardPage;
128 |
--------------------------------------------------------------------------------
/convex/_generated/server.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /**
3 | * Generated utilities for implementing server-side Convex query and mutation functions.
4 | *
5 | * THIS CODE IS AUTOMATICALLY GENERATED.
6 | *
7 | * To regenerate, run `npx convex dev`.
8 | * @module
9 | */
10 |
11 | import {
12 | ActionBuilder,
13 | HttpActionBuilder,
14 | MutationBuilder,
15 | QueryBuilder,
16 | GenericActionCtx,
17 | GenericMutationCtx,
18 | GenericQueryCtx,
19 | GenericDatabaseReader,
20 | GenericDatabaseWriter,
21 | } from "convex/server";
22 | import type { DataModel } from "./dataModel.js";
23 |
24 | /**
25 | * Define a query in this Convex app's public API.
26 | *
27 | * This function will be allowed to read your Convex database and will be accessible from the client.
28 | *
29 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
30 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
31 | */
32 | export declare const query: QueryBuilder
42 |
43 |
44 |
45 |
46 |
47 |
48 | {INTERVIEW_CATEGORY.map(
49 | (category) =>
50 | groupedInterviews[category.id]?.length > 0 && (
51 |
52 | {/* CATEGORY TITLE */}
53 |
121 | )
122 | )}
123 |
124 |
54 | {groupedInterviews[category.id].length}
56 |
57 |
58 | {category.title}
55 |
59 | {groupedInterviews[category.id].map((interview: Interview) => {
60 | const candidateInfo = getCandidateInfo(users, interview.candidateId);
61 | const startTime = new Date(interview.startTime);
62 |
63 | return (
64 |
65 | {/* CANDIDATE INFO */}
66 |
67 |
78 |
79 | {/* DATE & TIME */}
80 |
81 |
92 |
93 | {/* PASS & FAIL BUTTONS */}
94 |
95 | {interview.status === "completed" && (
96 |
116 |
117 | );
118 | })}
119 |
120 |
68 |
69 | {candidateInfo.initials}
71 |
72 |
77 |
73 | {candidateInfo.name}
74 |
76 | {interview.title}
75 |
82 |
91 |
83 |
86 |
87 |
90 |
97 |
104 |
112 |
113 | )}
114 |
56 | {[1, 2, 3, 4, 5].map((starValue) => (
57 |
63 | );
64 |
65 | if (existingComments === undefined || users === undefined) return null;
66 |
67 | return (
68 |