+
+ {children}
+
+ {competencies.map((c, idx) => (
+
+
+
+
+
+
+
+
+ ))}
+
+ );
+}
+
+export default function Layout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ const [roadmaps, setRoadmaps] = useState
+
+
+
+ {c.skill}
+
+ {c.resources.map((c, idx) => (
+
+ + {c} +
+ ))} +
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/learning/page.tsx b/src/app/learning/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..85ec6ae985119add9a82a08dc3b52a10e49f44ca
--- /dev/null
+++ b/src/app/learning/page.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { RoadmapsRoot } from "../onboarding/learningPath";
+import Button from "@/components/button";
+
+function Breadcrumbs({ path }: { path: string }) {
+ const crumbs = path.split("/");
+ return (
+ <>
+ {crumbs.map((c) => (
+
+
+ ))}
+
+ );
+}
+
+export default function Learning({}) {
+ const [roadmaps, setRoadmaps] = useState
+ {c}
+
+ /
+
+
+ );
+}
diff --git a/src/app/onboarding/layout.tsx b/src/app/onboarding/layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a32f9188e8ddb35206bd95938d0e60570b8497f6
--- /dev/null
+++ b/src/app/onboarding/layout.tsx
@@ -0,0 +1,46 @@
+export default function OnboardingLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+
+
+ Your Progress
+
+
+
+ ![]({"/duration.svg"})
+
+
+ + Duration: 48 weeks +
+
+ ![]({"/video.svg"})
+
+
+ + 12 Learning video +
+
+ ![]({"/description.svg"})
+
+
+ 8 courses
+
+ ![]({"/book.svg"})
+
+
+ 5 books
+
+
+
+
+
+
+
+
+
+
+
+
+ + My Notes +
+
+
+ + Resources & Downloads +
+
+
+ Important Notes
+ +
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/app/onboarding/learningPath.tsx b/src/app/onboarding/learningPath.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e3504936804a8c2e432961105acb20b6f6f6960e
--- /dev/null
+++ b/src/app/onboarding/learningPath.tsx
@@ -0,0 +1,206 @@
+import { useState } from "react";
+import Loading from "./loading";
+import Button from "@/components/button";
+import { ResumeData } from "./upload";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from "@/components/ui/accordion";
+
+export interface RoadmapsRoot {
+ roadmaps: Roadmaps;
+}
+
+export interface Roadmaps {
+ roadmap_1: Roadmap1;
+ roadmap_2: Roadmap2;
+ roadmap_3: Roadmap3;
+}
+
+export interface Roadmap1 {
+ competencies: Competency[];
+ insight: string;
+}
+
+export interface Competency {
+ skill: string;
+ description: string;
+ resources: string[];
+}
+
+export interface Roadmap2 {
+ competencies: Competency2[];
+ insight: string;
+}
+
+export interface Competency2 {
+ skill: string;
+ description: string;
+ resources: string[];
+}
+
+export interface Roadmap3 {
+ competencies: Competency3[];
+ insight: string;
+}
+
+export interface Competency3 {
+ skill: string;
+ description: string;
+ resources: string[];
+}
+
+function LearningAccordion({
+ competencies,
+}: {
+ competencies: { skill: string; description: string; resources: string[] }[];
+}) {
+ return (
+
+ {competencies.map((c, idx) => (
+
+
+
+
+
+
+
+
+
+ ))}
+
+ );
+}
+
+export default function LearningPath({
+ onNext,
+ userProfile,
+}: {
+ onNext: () => void;
+ userProfile: ResumeData | null;
+}) {
+ const [isLoading, setIsLoading] = useState
+
+
+
+ + {idx + 1} +
+
+
+ {c.skill}
++ {c.description} +
+
+
+ + Key Topics & Resources: +
+ {c.resources.map((c, idx) => ( ++ {c} +
+ ))} +
+
+ );
+
+ return (
+
+
+ + Recommended Learning Path +
+
+
+ Why this path?
++ {roadmap.roadmaps.roadmap_1.insight} +
+
+
+ );
+}
diff --git a/src/app/onboarding/loading.tsx b/src/app/onboarding/loading.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8509009d729202779ad447d209614df16ff0a064
--- /dev/null
+++ b/src/app/onboarding/loading.tsx
@@ -0,0 +1,38 @@
+import Image from "next/image";
+
+type LoadingProps = {
+ title: string;
+ desc: string;
+ imgSrc: string;
+ progress: number;
+};
+
+const LoadingBar = ({ progress }: { progress: number }) => {
+ // Ensure the progress value is between 0 and 100
+ const clampedProgress = Math.max(0, Math.min(100, progress));
+
+ return (
+
+
+
+
+ + Describe your target or goals: +
++ Write down your specific goals or career target for the future. +
+
+
+ );
+};
+
+export default function Loading(props: LoadingProps) {
+ return (
+
+
+
+ {clampedProgress}%
+
+
+ );
+}
diff --git a/src/app/onboarding/page.tsx b/src/app/onboarding/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a6a6ecf826ea1da41f4963c7cf3737bdecd89ec8
--- /dev/null
+++ b/src/app/onboarding/page.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useState } from "react";
+import Page1 from "./page1";
+import UploadCV, { ResumeData } from "./upload";
+import LearningPath from "./learningPath";
+
+export default function Onboarding() {
+ const [step, setStep] = useState(1);
+ const [resumeData, setResumeData] = useState{props.title}
+
+
+ {props.desc}
+
+ 
+
+
+
+
+ How would you like to start?
++ Our AI needs to understand you to create the best recommendation. + Choose the method that's most convenient for you. +
+
+ {cards.map((card) => (
+
+
+ );
+}
+
+type CardProps = {
+ title: string;
+ description: string;
+ imageUrl: string;
+ classname?: string;
+ onChoose?: () => void;
+};
+
+function Card({ title, description, imageUrl, classname, onChoose = () => {} }: CardProps) {
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/onboarding/upload.tsx b/src/app/onboarding/upload.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1605a9afce2cd7d119a9e800f3e93da1bc67f67f
--- /dev/null
+++ b/src/app/onboarding/upload.tsx
@@ -0,0 +1,316 @@
+"use client";
+import Button from "@/components/button";
+import {
+ Dropzone,
+ DropZoneArea,
+ DropzoneDescription,
+ DropzoneFileList,
+ DropzoneFileListItem,
+ DropzoneMessage,
+ DropzoneRemoveFile,
+ DropzoneTrigger,
+ useDropzone,
+ UseDropzoneReturn,
+} from "@/components/ui/dropzone";
+import { CloudUploadIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import Loading from "./loading";
+
+export interface ResumeData {
+ personal_info: PersonalInfo;
+ summary: string;
+ yoe: number;
+ work_experience: WorkExperience[];
+ education: Education[];
+ skills: Skills;
+ projects: Project[];
+ certifications: Certification[];
+ languages: Language[];
+ awards_honors: AwardsHonor[];
+ publications: any[];
+ interests: any[];
+ character_traits_keywords: string[];
+}
+
+interface WorkExperience {
+ company_name: string;
+ job_title: string;
+}
+
+export interface PersonalInfo {
+ full_name: string;
+ email: string;
+ phone: string;
+ linkedin_profile: string;
+ portfolio_url: string;
+ address: Address;
+}
+
+export interface Address {
+ street: any;
+ city: any;
+ state: any;
+ zip_code: any;
+ country: any;
+}
+
+export interface Education {
+ degree: string;
+ major: string;
+ institution: string;
+ location: string;
+ start_date: string;
+ end_date: string;
+ gpa: string;
+}
+
+export interface Skills {
+ technical_skills: string[];
+ soft_skills: string[];
+ tools_technologies: any[];
+}
+
+export interface Project {
+ project_name: string;
+ description: string;
+ technologies_used: string[];
+ project_url: any;
+ start_date?: string;
+ end_date?: string;
+}
+
+export interface Certification {
+ name: string;
+ issuing_organization: string;
+ issue_date: string;
+ expiration_date: any;
+}
+
+export interface Language {
+ language: string;
+ proficiency: string;
+}
+
+export interface AwardsHonor {
+ name: string;
+ issuing_organization: string;
+ date: string;
+}
+
+export function CVDropzone({
+ dropzone,
+}: {
+ dropzone: UseDropzoneReturn
+
+
+ 
+
+
+
+ {title}
++ {description} +
+
+
+
+
+
+
+ {dropzone.fileStatuses.map((file) => (
+
+ {file.status === "pending" ? (
+
+ ) : (
+
+ ))}
+
+
+
+ );
+}
+
+export default function UploadCV({
+ onNext,
+ resumeData,
+ setResumeData
+}: {
+ onNext: () => void;
+ resumeData: ResumeData | null;
+ setResumeData: React.Dispatch
+
+
+
+
+
+
+
+
+
+
+ + Drag & drop files or click to browse +
++ Click here or drag and drop to upload +
+
+
+
+
+ )}
+
+
+ {file.fileName}
++ {(file.file.size / (1024 * 1024)).toFixed(2)} MB +
+
+
+ );
+ }
+
+ if (isUploading)
+ return (
+ + Does this look right? We found these key points in your CV: +
+
+
+ Name:
+{resumeData?.personal_info.full_name}
+Last Position:
++ {resumeData?.work_experience.length === 0 + ? "Fresh Graduate" + : `${resumeData?.work_experience[0].job_title}, ${resumeData?.work_experience[0].company_name}`} +
+Years of Experience:
++ {resumeData.yoe} +
+Key Skills:
+
+ {resumeData?.skills.technical_skills.map(skill => (
+
+ + {skill} +
+ ))} + {resumeData?.skills.soft_skills.map(skill => ( ++ {skill} +
+ ))} +Education:
++ {resumeData?.education.length === 0 + ? "" + : resumeData?.education[0].degree} +
+
+
+
+ 
+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a93289420dc025158f3c2b2be729906c6dd36ff0
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,103 @@
+import Image from "next/image";
+
+export default function Home() {
+ return (
+
+ + Drag & drop your CV here, or click to browse files. +
+
+
+ Upload
+
+
+
+
+
+ );
+}
diff --git a/src/app/recruitment/layout.tsx b/src/app/recruitment/layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..760ddf5ad4f0e7ed69e2016b4cce1ca5c1702b12
--- /dev/null
+++ b/src/app/recruitment/layout.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { Header } from '@/components/dashboard/header';
+import { HeaderMenu } from '@/components/dashboard/header-menu';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from 'react';
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ const [queryClient] = useState(() => new QueryClient())
+ return (
+ -
+
-
+ Get started by editing{" "}
+
+ src/app/page.tsx ++ . +
+ - + Save and see your changes instantly. + +
+ {/*
+
+
+
+
+
+
+ {/*
+
+
*/}
+
+ {children}
+ + Recruitment AI Dashboard – MT Intake +
+ +
+
+ );
+}
diff --git a/src/components/button.tsx b/src/components/button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c3506789e122aedbadb838917aead97ccd41860f
--- /dev/null
+++ b/src/components/button.tsx
@@ -0,0 +1,35 @@
+export default function Button({
+ label,
+ onClick,
+ className = "",
+ type = "button",
+ buttonType = "primary",
+ disabled = false,
+ children,
+}: {
+ label: string;
+ onClick: () => void;
+ className?: string;
+ type?: "button" | "submit" | "reset";
+ buttonType?: "primary" | "secondary";
+ disabled?: boolean;
+ children?: React.ReactNode;
+}) {
+ // You can add more styles based on buttonType if needed
+ const buttonStyles =
+ buttonType === "primary"
+ ? "bg-[#01A3FF] hover:bg-[#0190d9] text-white"
+ : "bg-white hover:bg-neutral-700 text-[#01A3FF] border-1 border-solid border-[#01A3FF]";
+ return (
+
+ );
+}
diff --git a/src/components/dashboard/candidates-table.tsx b/src/components/dashboard/candidates-table.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bad85e6c1815ffd440ae57f81617736789089584
--- /dev/null
+++ b/src/components/dashboard/candidates-table.tsx
@@ -0,0 +1,1149 @@
+"use client"
+
+import { DetailDialog } from "@/components/dashboard/detail-dialog"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { authFetch } from "@/lib/api"
+import { CalculateWeightPayload, WeightBody } from "@/types/calculate"
+import { Candidate, Column, FilterFormValues, OptionsData, PaginationProps } from "@/types/candidate-table"
+import { useMutation, useQuery } from "@tanstack/react-query"
+import { Check, ChevronDown, ChevronUp, Columns, Eye, Filter, Plus, Search, Trash2 } from "lucide-react"
+import { memo, useCallback, useEffect, useMemo, useState } from "react"
+import { useFieldArray, useForm } from "react-hook-form"
+import { Combobox, ComboboxOption } from "../ui/combobox"
+
+// Transform form values → API body
+function toWeightBody(value: CalculateWeightPayload): WeightBody {
+ const edu = (i: number) => value.education[i] ?? { university: 0, major: 0, gpa: 0 }
+ return {
+ univ_edu_1: edu(0).university, major_edu_1: edu(0).major, gpa_edu_1: edu(0).gpa,
+ univ_edu_2: edu(1).university, major_edu_2: edu(1).major, gpa_edu_2: edu(1).gpa,
+ univ_edu_3: edu(2).university, major_edu_3: edu(2).major, gpa_edu_3: edu(2).gpa,
+ domicile: value.others.domicile,
+ yoe: value.others.yearOfExperiences,
+ hardskills: value.others.hardskills,
+ softskills: value.others.softskills,
+ certifications: value.others.certifications,
+ business_domain: value.others.businessDomain,
+ }
+}
+
+// ============= FETCHER FUNCTIONS (outside component) =============
+const fetchOptions = async (): Promise
+ {col.label}
+ {sortConfig.key === col.id && (
+ sortConfig.direction === "asc"
+ ?
+
+
+))
+Toolbar.displayName = "Toolbar"
+
+// ============= PAGINATION =============
+const Pagination = memo(({
+ currentPage, totalPages, itemsPerPage, totalItems, onPageChange
+}: {
+ currentPage: number
+ totalPages: number
+ itemsPerPage: number
+ totalItems: number
+ onPageChange: (page: number) => void
+}) => {
+ const start = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1
+ const end = Math.min(currentPage * itemsPerPage, totalItems)
+
+ return (
+
+
+
+
+
+
+ {/* */}
+
+
+
+ )
+})
+Pagination.displayName = "Pagination"
+
+// ============= COLUMN SETTINGS DIALOG =============
+const ColumnSettingsDialog = memo(({
+ open, onOpenChange, tempColumns, onToggleColumn, onReset, onApply
+}: {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ tempColumns: Record+ Showing {start} to {end} from {totalItems} entries +
+
+
+ {Array.from({ length: Math.min(7, totalPages) }, (_, i) => {
+ let pageNum
+ if (totalPages <= 7) pageNum = i + 1
+ else if (currentPage <= 4) pageNum = i + 1
+ else if (currentPage >= totalPages - 3) pageNum = totalPages - 6 + i
+ else pageNum = currentPage - 3 + i
+ return (
+
+ )
+ })}
+
+
+
+
+ onChange(path, parseInt(e.target.value))}
+ disabled={disabled}
+ className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-green-500"
+ />
+ onChange(path, parseInt(e.target.value) || 0)}
+ disabled={disabled}
+ className="w-16 text-center border rounded px-2 py-1 text-sm"
+ />
+
+))
+SliderRow.displayName = "SliderRow"
+
+// ============= FILTER DIALOG =============
+const CalculateDialog = memo(({
+ open, onOpenChange, filter, onApplyCalculation
+}: {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ filter: FilterFormValues
+ onApplyCalculation: (values: unknown) => void,
+}) => {
+
+ // ---- Which fields are active based on filter ----
+ const activeFields = useMemo(() => ({
+ // Education — check per index
+ education: filter.educations.map((e) => ({
+ university: !!e.university,
+ major: !!e.major,
+ gpa: !!(e.gpa_min || e.gpa_max),
+ })),
+ others: {
+ domicile: !!filter.domicile,
+ yearOfExperiences: !!(filter.yoe_min || filter.yoe_max),
+ hardskills: false, // hardskills not in filter, always disabled
+ softskills: !!filter.softskills,
+ certifications: !!filter.certifications,
+ businessDomain: !!filter.businessDomain,
+ }
+ }), [filter])
+
+ // ---- Reset values for disabled fields to 0 when filter changes ----
+ useEffect(() => {
+ // Reset others
+ Object.entries(activeFields.others).forEach(([key, active]) => {
+ if (!active) setValue(`others.${key}`, 0)
+ })
+ // Reset education fields
+ activeFields.education.forEach((edu, i) => {
+ if (!edu.university) setValue(`education.${i}.university`, 0)
+ if (!edu.major) setValue(`education.${i}.major`, 0)
+ if (!edu.gpa) setValue(`education.${i}.gpa`, 0)
+ })
+ }, [activeFields])
+
+ const { control, watch, setValue, reset, handleSubmit } = useForm({
+ defaultValues: {
+ education: [
+ { university: 0, major: 0, gpa: 0 }
+ ],
+ others: {
+ domicile: 0,
+ yearOfExperiences: 0,
+ hardskills: 0,
+ softskills: 0,
+ certifications: 0,
+ businessDomain: 0
+ }
+ }
+ });
+
+ const { fields, append, remove } = useFieldArray({
+ control,
+ name: "education"
+ });
+
+ const watchAll = watch();
+
+ const calculateTotal = () => {
+ let total = 0;
+
+ // Sum all education fields
+ watchAll.education?.forEach(edu => {
+ total += Number(edu.university) || 0;
+ total += Number(edu.major) || 0;
+ total += Number(edu.gpa) || 0;
+ });
+
+ // Sum all others fields
+ if (watchAll.others) {
+ Object.values(watchAll.others).forEach(value => {
+ total += Number(value) || 0;
+ });
+ }
+
+ return total;
+ };
+
+ const handleSliderChange = (path, newValue) => {
+ const total = calculateTotal();
+ const currentValue = path.split('.').reduce((obj, key) => obj?.[key], watchAll);
+ const difference = newValue - (Number(currentValue) || 0);
+
+ if (total + difference <= 100) {
+ setValue(path, newValue);
+ }
+ };
+
+ const handleAddEducation = () => {
+ append({ university: 0, major: 0, gpa: 0 });
+ };
+
+ const handleReset = () => {
+ reset({
+ education: [
+ { university: 0, major: 0, gpa: 0 }
+ ],
+ others: {
+ domicile: 0,
+ yearOfExperiences: 0,
+ hardskills: 0,
+ softskills: 0,
+ certifications: 0,
+ businessDomain: 0
+ }
+ });
+ };
+
+ const onCalculate = handleSubmit((value) => {
+ console.log(value)
+ onApplyCalculation(value)
+ });
+
+ const total = calculateTotal();
+
+ return (
+
+ )
+})
+CalculateDialog.displayName = "CalculateDialog"
+
+// ============= LOADING DIALOGS =============
+const LoadingDialog = memo(({ open }: { open: boolean }) => (
+
+))
+LoadingDialog.displayName = "LoadingDialog"
+
+// ============= SUCCESS DIALOGS =============
+const SuccessDialog = memo(({ open, onClose }: { open: boolean; onClose: () => void }) => (
+
+))
+SuccessDialog.displayName = "SuccessDialog"
+
+// ============= MAIN COMPONENT =============
+export default function CandidateTable() {
+ const [selectedRows, setSelectedRows] = useState
+ setShowFilter(true)}
+ onCalculateOpen={() => setShowCalculateScore(true)}
+ onColumnOpen={() => setShowColumnSettings(true)}
+ />
+
+ setTempVisibleColumns((prev) => ({ ...prev, [id]: checked }))}
+ onReset={() => setTempVisibleColumns(allColumns.reduce((acc, col) => ({ ...acc, [col.id]: col.visible }), {}))}
+ onApply={() => { setVisibleColumns(tempVisibleColumns); setShowColumnSettings(false) }}
+ />
+
+ { setAppliedFilters(values); setShowFilter(false) }}
+ />
+
+ setShowSuccess(false)} />
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/dashboard/charts-section.tsx b/src/components/dashboard/charts-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e1c07cffd7fb8ff5e90e61a2f00e80327c03bfb2
--- /dev/null
+++ b/src/components/dashboard/charts-section.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { SuitabilityPie } from './charts/suitability-pie';
+import { UniversityBar } from './charts/university-bar';
+
+export function ChartsSection() {
+ return (
+
+
+
+
+ {isLoading ? (
+
+
+ )}
+
+
+
+
+ ) : candidates.length === 0 ? (
+
+ No candidates found.
+
+ ) : (
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/dashboard/charts/suitability-pie.tsx b/src/components/dashboard/charts/suitability-pie.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e8fbd9b13f4c7ef9d8ec1a03911a2ba8e0e70396
--- /dev/null
+++ b/src/components/dashboard/charts/suitability-pie.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import {
+ PieChart,
+ Pie,
+ Cell,
+ Legend,
+ Tooltip,
+ ResponsiveContainer,
+} from 'recharts';
+
+const data = [
+ { name: 'Eligible', value: 70, color: '#22c55e' },
+ { name: 'On Review', value: 15, color: '#f59e0b' },
+ { name: 'Rejected', value: 15, color: '#ef4444' },
+];
+
+export function SuitabilityPie() {
+ return (
+ + Distribusi Suitability % (Eligible) +
++ Top Universitas (Eligible) +
+
+
+ )
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/dashboard/filter-dialog.tsx b/src/components/dashboard/filter-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..91a19f8a1fac512cdf8837a65afd4235274a480f
--- /dev/null
+++ b/src/components/dashboard/filter-dialog.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+interface FilterDialogProps {
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
+}
+
+export function FilterDialog({ open, onOpenChange }: FilterDialogProps) {
+ return (
+
+ );
+}
diff --git a/src/components/dashboard/header-menu.tsx b/src/components/dashboard/header-menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6589b7a86eb8211a6692e9fc1ce5444b9ccf8872
--- /dev/null
+++ b/src/components/dashboard/header-menu.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import {
+ Breadcrumb, BreadcrumbHome, BreadcrumbItem,
+ BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator,
+} from "../ui/breadcrumb";
+
+export function HeaderMenu() {
+ const [now, setNow] = useState{label}
+{value || "-"}
+ {dateStr}
+ + Recruitment AI Dashboard – MT Intake +
+
+
+
+
+ );
+}
diff --git a/src/components/dashboard/multiple-dropdown.tsx b/src/components/dashboard/multiple-dropdown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..db9c95abc79a20313c36243cab458c19f6089f34
--- /dev/null
+++ b/src/components/dashboard/multiple-dropdown.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command";
+import { cn } from "@/lib/utils";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+
+export function MultiSelect({
+ options,
+ value,
+ onChange,
+ placeholder = 'Select...',
+}: {
+ options: { label: string; value: string }[];
+ value: string[];
+ onChange: (values: string[]) => void;
+ placeholder?: string;
+}) {
+ const [open, setOpen] = React.useState(false);
+
+ const toggleValue = (val: string) => {
+ if (value.includes(val)) {
+ onChange(value.filter((v) => v !== val));
+ } else {
+ onChange([...value, val]);
+ }
+ };
+
+ return (
+
+
+ Processed
+ 12.000
+
+
+ Total Profile
+ 32.000
+
+ {value.length > 0 ? value.join(", ") : placeholder}
+
+
+
+ );
+}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e538a33b9946acb372e2f569a7cb4b22b17cff12
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+ ...props
+}: React.ComponentProps
+ {isOpen && (
+
+
+
+
+
+ )}
+
+
+ B
+
+
+
+ BUKIT
+ Recruitment
+ {children}
+
+ {children}
+
+