+
+
);
}
diff --git a/src/components/company/CandidateResults.tsx b/src/components/company/CandidateResults.tsx
new file mode 100644
index 0000000..cd37668
--- /dev/null
+++ b/src/components/company/CandidateResults.tsx
@@ -0,0 +1,355 @@
+import React, { useState } from "react";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+ Search,
+ Filter,
+ MoreHorizontal,
+ FileText,
+ Mail,
+ CheckCircle,
+ Clock,
+ AlertCircle,
+ ThumbsUp,
+ ThumbsDown,
+ HelpCircle,
+} from "lucide-react";
+
+interface Candidate {
+ id: string;
+ name: string;
+ email: string;
+ testTitle: string;
+ score: number;
+ submittedAt: string;
+ status: "Completed" | "In Progress" | "Failed";
+ suitability: "Suitable" | "Pending" | "Not Suitable";
+}
+
+const CandidateResults = () => {
+ const [searchQuery, setSearchQuery] = useState("");
+ const [statusFilter, setStatusFilter] = useState
(null);
+ const [suitabilityFilter, setSuitabilityFilter] = useState(
+ null,
+ );
+
+ // Mock candidate data
+ const candidates: Candidate[] = [
+ {
+ id: "1",
+ name: "Kim Min-ji",
+ email: "minji.kim@example.com",
+ testTitle: "JavaScript Fundamentals",
+ score: 92,
+ submittedAt: "2023-11-25 14:30",
+ status: "Completed",
+ suitability: "Suitable",
+ },
+ {
+ id: "2",
+ name: "Park Ji-hoon",
+ email: "jihoon.park@example.com",
+ testTitle: "React Component Architecture",
+ score: 78,
+ submittedAt: "2023-11-24 10:15",
+ status: "Completed",
+ suitability: "Suitable",
+ },
+ {
+ id: "3",
+ name: "Lee Soo-jin",
+ email: "soojin.lee@example.com",
+ testTitle: "Advanced Algorithms",
+ score: 0,
+ submittedAt: "2023-11-26 09:45",
+ status: "In Progress",
+ suitability: "Pending",
+ },
+ {
+ id: "4",
+ name: "Choi Tae-woo",
+ email: "taewoo.choi@example.com",
+ testTitle: "JavaScript Fundamentals",
+ score: 65,
+ submittedAt: "2023-11-23 16:20",
+ status: "Failed",
+ suitability: "Not Suitable",
+ },
+ {
+ id: "5",
+ name: "Kang Hye-jin",
+ email: "hyejin.kang@example.com",
+ testTitle: "Database Design",
+ score: 88,
+ submittedAt: "2023-12-01 11:30",
+ status: "Completed",
+ suitability: "Suitable",
+ },
+ {
+ id: "6",
+ name: "Yoon Jae-hyun",
+ email: "jaehyun.yoon@example.com",
+ testTitle: "API Development with Node.js",
+ score: 72,
+ submittedAt: "2023-12-02 13:45",
+ status: "Completed",
+ suitability: "Pending",
+ },
+ ];
+
+ // Filter candidates based on search query and filters
+ const filteredCandidates = candidates.filter((candidate) => {
+ const matchesSearch =
+ candidate.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ candidate.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ candidate.testTitle.toLowerCase().includes(searchQuery.toLowerCase());
+
+ const matchesStatus = !statusFilter || candidate.status === statusFilter;
+ const matchesSuitability =
+ !suitabilityFilter || candidate.suitability === suitabilityFilter;
+
+ return matchesSearch && matchesStatus && matchesSuitability;
+ });
+
+ const getStatusIcon = (status: string) => {
+ switch (status) {
+ case "Completed":
+ return ;
+ case "In Progress":
+ return ;
+ case "Failed":
+ return ;
+ default:
+ return null;
+ }
+ };
+
+ const getStatusColor = (status: string) => {
+ switch (status) {
+ case "Completed":
+ return "bg-green-100 text-green-800";
+ case "In Progress":
+ return "bg-blue-100 text-blue-800";
+ case "Failed":
+ return "bg-red-100 text-red-800";
+ default:
+ return "";
+ }
+ };
+
+ const getSuitabilityIcon = (suitability: string) => {
+ switch (suitability) {
+ case "Suitable":
+ return ;
+ case "Not Suitable":
+ return ;
+ case "Pending":
+ return ;
+ default:
+ return null;
+ }
+ };
+
+ const getSuitabilityColor = (suitability: string) => {
+ switch (suitability) {
+ case "Suitable":
+ return "bg-green-100 text-green-800";
+ case "Not Suitable":
+ return "bg-red-100 text-red-800";
+ case "Pending":
+ return "bg-amber-100 text-amber-800";
+ default:
+ return "";
+ }
+ };
+
+ return (
+
+
+
Candidate Results
+
+
+
+
+ Candidate Evaluations
+
+ Review test results and candidate performance
+
+
+
+
+
+
+
+ setSearchQuery(e.target.value)}
+ />
+
+
+
+
+
+
+ setStatusFilter(null)}>
+ All Statuses
+
+ setStatusFilter("Completed")}>
+ Completed
+
+ setStatusFilter("In Progress")}
+ >
+ In Progress
+
+ setStatusFilter("Failed")}>
+ Failed
+
+
+
+
+
+
+
+
+ setSuitabilityFilter(null)}>
+ All Suitability
+
+ setSuitabilityFilter("Suitable")}
+ >
+ Suitable
+
+ setSuitabilityFilter("Pending")}
+ >
+ Pending
+
+ setSuitabilityFilter("Not Suitable")}
+ >
+ Not Suitable
+
+
+
+
+
+
+
+ Candidate
+ Test
+ Score
+ Submitted
+ Status
+ Suitability
+ Actions
+
+
+
+ {filteredCandidates.map((candidate) => (
+
+
+
+
{candidate.name}
+
+ {candidate.email}
+
+
+
+ Showing {filteredCandidates.length} of {candidates.length}{" "}
+ candidates
+
+
+
+
+
+
+
Company Profile
+ {!editMode ? (
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+ {/* Company Basic Info */}
+
+
+ Company Information
+ Your company's basic information
+
+
+
+
+ {company.logo ? (
+
+ ) : (
+
+ {company.name.slice(0, 2).toUpperCase()}
+
+ )}
+
+ {editMode && (
+
+ )}
+
+
+
+
+ Company Name
+
+ {editMode ? (
+
+ ) : (
+
{company.name}
+ )}
+
+
+
+
+
+ Email
+
+ {editMode ? (
+
+ ) : (
+
{company.email}
+ )}
+
+
+
+
+
+ Industry
+
+ {editMode ? (
+
+ ) : (
+
{company.industry}
+ )}
+
+
+
+
+
+ Employee Count
+
+ {editMode ? (
+
+ ) : (
+
{company.employeeCount}
+ )}
+
+
+ {editMode && (
+ <>
+
+
+
+
+
+
+ )}
+
+ {!editMode && (
+ <>
+ {company.website && (
+
+
+
+ Website
+
+
{company.website}
+
+ )}
+
+ {company.location && (
+
+
+
+ Location
+
+
{company.location}
+
+ )}
+
+ {company.phone && (
+
+ )}
+
+ )}
+
+
+ {/* Company Details */}
+
+
+ Company Details
+
+ Additional information about your company
+
+
+
+
+
+
+ {editMode ? (
+
+ ) : (
+
+ {company.description || "No company description provided."}
+
+ )}
+
+
+
+
+
+
+
+
+ {company.techStack.map((tech) => (
+
+ {tech}
+ {editMode && (
+ handleRemoveTech(tech)}
+ />
+ )}
+
+ ))}
+
+ {editMode && (
+
+
setNewTech(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ handleAddTech();
+ }
+ }}
+ />
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ GitHub
+
+
+
+
+
+
+
+ Jira
+
+
+
+
+
+
+
+
+
+
+
+
+
Company Dashboard
+
+ Overview
+ Tests
+ Candidates
+ Company Profile
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Stats Cards */}
+
+
+
+ Total Tests
+
+
+
+ {stats.totalTests}
+
+ {stats.activeTests} currently active
+
+
+
+
+
+
+
+ Total Candidates
+
+
+
+
+ {stats.totalCandidates}
+ +14 from last month
+
+
+
+
+
+ Pass Rate
+
+
+
+ {stats.passRate}%
+
+ +5% from previous tests
+
+
+
+
+
+
+ Average Score
+
+
+
+ {stats.averageScore}/100
+
+ Based on all completed tests
+
+
+
+
+
+
+
+ Pending Reviews
+
+
+
+
+ {stats.pendingReviews}
+
+ Candidates awaiting review
+
+
+
+
+
+
+
+ Next Scheduled Test
+
+
+
+
+ Frontend Developer
+ Tomorrow, 10:00 AM
+
+
+
+
+ {/* Charts and Activity */}
+
+
+
+ Test Score Distribution
+
+ Score distribution across all candidates
+
+
+
+
+
+
+
+
+
+
+
+ Test Status
+
+ Overview of test completion status
+
+
+
+
+
+
+
+
+
+
+ {/* Recent Activity */}
+
+
+
+ Recent Activity
+ Latest actions and updates
+
+
+
+
+
+
+
+
+ {activities.map((activity) => (
+
+
+ {getActivityIcon(activity.type)}
+
+
+
+
{activity.title}
+ {getActivityBadge(activity.type)}
+
+
+ {activity.description}
+
+
+ {activity.user && (
+
+
+
+
+ {activity.user.name.slice(0, 2).toUpperCase()}
+
+
+
{activity.user.name}
+
+ )}
+
•
+
{activity.timestamp}
+
+
+
+ ))}
+
+ {/* Company Logo and Name */}
+
+
+
+
+
+
{companyName}
+
Company Dashboard
+
+
+
+ {/* Navigation */}
+
+
+ {navItems.map((item) => (
+
+
+
+ ))}
+
+
+ {/* Create New Test Button */}
+
+
+
+
+
+ {/* Company Profile */}
+
+
+
+ {companyLogo ? (
+
+ ) : (
+
+ {companyName.slice(0, 2).toUpperCase()}
+
+ )}
+
+
+
{companyName}
+
+ {companyEmail}
+
+
+
+
+
+
+
+
+ Log out
+
+
+
+
+
+
+
+
Test Management
+
+
+
+
+
+ Your Tests
+
+ Manage your coding tests and assessments
+
+
+
+
+
+
+
+ setSearchQuery(e.target.value)}
+ />
+
+
+
+
+
+
+ setSelectedFilter(null)}>
+ All Types
+
+ {testTypes.map((type) => (
+ setSelectedFilter(type)}
+ >
+ {type}
+
+ ))}
+
+
+
+
+
+
+ Title
+ Type
+ Difficulty
+ Submissions
+ Pass Rate
+ Status
+ Created
+ Actions
+
+
+
+ {filteredTests.map((test) => (
+
+ {test.title}
+ {test.type}
+
+
+ {test.difficulty}
+
+
+
+ {test.submissions}
+
+
+ {test.passRate}%
+
+
+
+ {test.status}
+
+
+ {test.createdAt}
+
+
+
+
+
+
+
+ View
+
+
+ Edit
+
+
+ Duplicate
+
+
+ Share
+
+
+ Delete
+
+
+
+
+
+ ))}
+
+
+
+ Showing {filteredTests.length} of {tests.length} tests
+
+
+
+
+
|
+ ))}
+
+
+
+
+
+ );
+};
diff --git a/src/components/dashboard/Sidebar.tsx b/src/components/dashboard/Sidebar.tsx
index f998207..c44022d 100644
--- a/src/components/dashboard/Sidebar.tsx
+++ b/src/components/dashboard/Sidebar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";