[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Sidebar } from "@/components/sidebar" import React from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "JobApps", description: "Job applications file management for college students", } export default function RootLayout({ children, }: { children: React.ReactNode }) { const [selectedCategory, setSelectedCategory] = React.useState(null) return (

{React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, { selectedCategory, setSelectedCategory }) : child, )}

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { usePathname } from "next/navigation" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Laptop, Stethoscope, Banknote, GraduationCap, Factory, ShoppingBag, Utensils, Video, Truck, Zap, Wheat, HardHat, } from "lucide-react" const industries = [ { name: "Technology", icon: Laptop }, { name: "Healthcare", icon: Stethoscope }, { name: "Finance", icon: Banknote }, { name: "Education", icon: GraduationCap }, { name: "Manufacturing", icon: Factory }, { name: "Retail", icon: ShoppingBag }, { name: "Hospitality", icon: Utensils }, { name: "Media", icon: Video }, { name: "Transportation", icon: Truck }, { name: "Energy", icon: Zap }, { name: "Agriculture", icon: Wheat }, { name: "Construction", icon: HardHat }, ] interface SidebarProps { selectedCategory: string | null setSelectedCategory: (category: string | null) => void } export function Sidebar({ selectedCategory, setSelectedCategory }: SidebarProps) { const pathname = usePathname() const handleCategoryClick = (category: string) => { if (selectedCategory === category) { setSelectedCategory(null) // Deselect if already selected } else { setSelectedCategory(category) // Select the new category } } return (

JobApps

Industry

{industries.map((industry) => ( ))}

John Doe

john.doe@example.com

) } [V0_FILE]typescriptreact:file="components/job-list.tsx" isMerged="true" isEdit="true" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import type { Job } from "@/types/job" interface JobListProps { jobs: Job[] } export function JobList({ jobs }: JobListProps) { return ( Company Position Date Applied Status {jobs.map((job) => ( {job.company} {job.position} {job.dateApplied} {job.status} ))}

) } [V0_FILE]typescriptreact:file="types/job.ts" isEdit="true" isMerged="true" export type Job = { id: string company: string position: string dateApplied: string status: "Applied" | "Interviewing" | "Offer" | "Rejected" industry: string estimatedSalary?: number } [V0_FILE]typescriptreact:file="app/applied/page.tsx" isMerged="true" isEdit="true" import { JobList } from "@/components/job-list" import type { Job } from "@/types/job" const appliedJobs: Job[] = [ { id: "1", company: "Tech Corp", position: "Software Engineer", dateApplied: "2023-05-01", status: "Applied" }, { id: "2", company: "Data Inc", position: "Data Analyst", dateApplied: "2023-05-03", status: "Applied" }, { id: "3", company: "Web Solutions", position: "Frontend Developer", dateApplied: "2023-05-05", status: "Applied" }, ] export default function AppliedPage() { return (

Applied Jobs

) } [V0_FILE]typescriptreact:file="app/interviewing/page.tsx" isMerged="true" isEdit="true" import { JobList } from "@/components/job-list" import type { Job } from "@/types/job" const interviewingJobs: Job[] = [ { id: "4", company: "Innovate LLC", position: "Product Manager", dateApplied: "2023-04-15", status: "Interviewing" }, { id: "5", company: "Software Systems", position: "Backend Developer", dateApplied: "2023-04-20", status: "Interviewing", }, ] export default function InterviewingPage() { return (

Interviewing

) } [V0_FILE]typescriptreact:file="app/offers/page.tsx" isMerged="true" isEdit="true" import { JobList } from "@/components/job-list" import type { Job } from "@/types/job" const offerJobs: Job[] = [ { id: "6", company: "Tech Innovations", position: "Software Engineer", dateApplied: "2023-03-10", status: "Offer" }, { id: "7", company: "Data Insights", position: "Data Scientist", dateApplied: "2023-03-15", status: "Offer" }, ] export default function OffersPage() { return (

Offers

) } [V0_FILE]typescriptreact:file="app/rejected/page.tsx" isMerged="true" isEdit="true" import { JobList } from "@/components/job-list" import type { Job } from "@/types/job" const rejectedJobs: Job[] = [ { id: "8", company: "StartUp Co", position: "UX Designer", dateApplied: "2023-02-01", status: "Rejected" }, { id: "9", company: "Big Tech", position: "Software Engineer", dateApplied: "2023-02-15", status: "Rejected" }, { id: "10", company: "Finance Firm", position: "Data Analyst", dateApplied: "2023-03-01", status: "Rejected" }, ] export default function RejectedPage() { return (

Rejected Applications

) } [V0_FILE]typescriptreact:file="components/job-form.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { Job } from "@/types/job" const industries = [ "Technology", "Healthcare", "Finance", "Education", "Manufacturing", "Retail", "Hospitality", "Media", "Transportation", "Energy", "Agriculture", "Construction", ] interface JobFormProps { onSubmit: (job: Omit) => void } export function JobForm({ onSubmit }: JobFormProps) { const [company, setCompany] = useState("") const [position, setPosition] = useState("") const [industry, setIndustry] = useState("") const [status, setStatus] = useState("Applied") const [estimatedSalary, setEstimatedSalary] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const dateApplied = new Date().toISOString().split("T")[0] onSubmit({ company, position, industry, status, dateApplied, estimatedSalary: estimatedSalary ? Number.parseInt(estimatedSalary) : undefined, }) } return ( ) } [V0_FILE]typescriptreact:file="components/job-edit-form.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { Job } from "@/types/job" const industries = [ "Technology", "Healthcare", "Finance", "Education", "Manufacturing", "Retail", "Hospitality", "Media", "Transportation", "Energy", "Agriculture", "Construction", ] interface JobEditFormProps { job: Job onSubmit: (updatedJob: Job) => void } export function JobEditForm({ job, onSubmit }: JobEditFormProps) { const [editedJob, setEditedJob] = useState(job) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit(editedJob) } return (

Company setEditedJob({ ...editedJob, company: e.target.value })} required />

Position setEditedJob({ ...editedJob, position: e.target.value })} required />

Industry

Estimated Salary setEditedJob({ ...editedJob, estimatedSalary: Number(e.target.value) })} />

Status

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isEdit="true" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps { industry?: string } const industryColors: { [key: string]: string } = { Technology: "bg-blue-100 text-blue-800", Healthcare: "bg-green-100 text-green-800", Finance: "bg-yellow-100 text-yellow-800", Education: "bg-purple-100 text-purple-800", Manufacturing: "bg-gray-100 text-gray-800", Retail: "bg-pink-100 text-pink-800", Hospitality: "bg-orange-100 text-orange-800", Media: "bg-indigo-100 text-indigo-800", Transportation: "bg-teal-100 text-teal-800", Energy: "bg-red-100 text-red-800", Agriculture: "bg-lime-100 text-lime-800", Construction: "bg-amber-100 text-amber-800", } function Badge({ className, variant, industry, ...props }: BadgeProps) { const industryClass = industry && industryColors[industry] ? industryColors[industry] : "" return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/job-card.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Pencil, Trash2, ChevronLeft, ChevronRight } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { JobEditForm } from "@/components/job-edit-form" import { Badge } from "@/components/ui/badge" import type { Job } from "@/types/job" interface JobCardProps { job: Job className?: string onUpdate: (job: Job) => void onDelete: (job: Job) => void onMoveStatus: (job: Job, direction: "forward" | "backward") => void } const statusOrder = ["Applied", "Interviewing", "Offer", "Rejected"] export function JobCard({ job, className, onUpdate, onDelete, onMoveStatus }: JobCardProps) { const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const currentStatusIndex = statusOrder.indexOf(job.status) const handleEditSubmit = (updatedJob: Job) => { onUpdate(updatedJob) setIsEditDialogOpen(false) } return (

{job.position} {job.industry}

{job.company}

Applied: {job.dateApplied}

Estimated Salary: ${job.estimatedSalary || "N/A"}

{currentStatusIndex > 0 && ( )}

{job.status}

{currentStatusIndex < statusOrder.length - 1 && ( )}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { JobCard } from "@/components/job-card" import { Button } from "@/components/ui/button" import { PlusCircle } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogDescription, } from "@/components/ui/dialog" import { JobForm } from "@/components/job-form" import type { Job } from "@/types/job" const initialJobs: Job[] = [ { id: "1", company: "Tech Corp", position: "Software Engineer", dateApplied: "2023-05-01", status: "Applied", industry: "Technology", estimatedSalary: 80000, }, { id: "2", company: "Data Inc", position: "Data Analyst", dateApplied: "2023-05-03", status: "Applied", industry: "Technology", estimatedSalary: 70000, }, { id: "3", company: "Design Solutions", position: "UX Designer", dateApplied: "2023-05-05", status: "Applied", industry: "Technology", estimatedSalary: 75000, }, { id: "4", company: "City High School", position: "Teacher", dateApplied: "2023-04-15", status: "Interviewing", industry: "Education", estimatedSalary: 55000, }, { id: "5", company: "Investment Bank", position: "Financial Analyst", dateApplied: "2023-04-20", status: "Interviewing", industry: "Finance", estimatedSalary: 85000, }, { id: "6", company: "Retail Chain", position: "Store Manager", dateApplied: "2023-03-10", status: "Offer", industry: "Retail", estimatedSalary: 60000, }, { id: "7", company: "City Hospital", position: "Nurse", dateApplied: "2023-03-15", status: "Offer", industry: "Healthcare", estimatedSalary: 70000, }, { id: "8", company: "University", position: "Professor", dateApplied: "2023-02-01", status: "Rejected", industry: "Education", estimatedSalary: 90000, }, { id: "9", company: "Fashion Outlet", position: "Sales Associate", dateApplied: "2023-02-15", status: "Rejected", industry: "Retail", estimatedSalary: 35000, }, ] interface DashboardPageProps { selectedCategory: string | null setSelectedCategory: (category: string | null) => void } export default function DashboardPage({ selectedCategory, setSelectedCategory }: DashboardPageProps) { const [jobs, setJobs] = useState(initialJobs) const [isDialogOpen, setIsDialogOpen] = useState(false) const [jobToDelete, setJobToDelete] = useState(null) const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) const filteredJobs = selectedCategory ? jobs.filter((job) => job.industry === selectedCategory) : jobs const appliedJobs = filteredJobs.filter((job) => job.status === "Applied") const interviewingJobs = filteredJobs.filter((job) => job.status === "Interviewing") const offerJobs = filteredJobs.filter((job) => job.status === "Offer") const rejectedJobs = filteredJobs.filter((job) => job.status === "Rejected") const handleAddJob = (newJob: Omit) => { const jobWithId = { ...newJob, id: (jobs.length + 1).toString() } setJobs([...jobs, jobWithId]) setIsDialogOpen(false) } const handleUpdateJob = (updatedJob: Job) => { setJobs(jobs.map((job) => (job.id === updatedJob.id ? updatedJob : job))) } const handleDeleteJob = (jobToDelete: Job) => { setJobToDelete(jobToDelete) setIsDeleteDialogOpen(true) } const confirmDeleteJob = () => { if (jobToDelete) { setJobs(jobs.filter((job) => job.id !== jobToDelete.id)) setJobToDelete(null) setIsDeleteDialogOpen(false) } } const handleMoveStatus = (job: Job, direction: "forward" | "backward") => { const statusOrder = ["Applied", "Interviewing", "Offer", "Rejected"] const currentIndex = statusOrder.indexOf(job.status) const newIndex = direction === "forward" ? currentIndex + 1 : currentIndex - 1 if (newIndex >= 0 && newIndex < statusOrder.length) { const updatedJob = { ...job, status: statusOrder[newIndex] as Job["status"] } setJobs(jobs.map((j) => (j.id === job.id ? updatedJob : j))) } } return (

Dashboard

{selectedCategory && (

Filtered by: {selectedCategory}

)}

Total Applications

{filteredJobs.length}

Interviews Scheduled

{interviewingJobs.length}

Offers Received

{offerJobs.length}

Rejection Rate

{filteredJobs.length > 0 ? Math.round((rejectedJobs.length / filteredJobs.length) * 100) : 0}%

5 ? "sm:col-span-2 lg:col-span-2" : ""}`}>

Applied Jobs ({appliedJobs.length})

{appliedJobs.map((job) => ( ))}

5 ? "sm:col-span-2 lg:col-span-2" : ""}`}>

Interviewing ({interviewingJobs.length})

{interviewingJobs.map((job) => ( ))}

5 ? "sm:col-span-2 lg:col-span-2" : ""}`}>

Offers ({offerJobs.length})

{offerJobs.map((job) => ( ))}

5 ? "sm:col-span-2 lg:col-span-2" : ""}`}>

Rejected ({rejectedJobs.length})

{rejectedJobs.map((job) => ( ))}

) }

About

Tags

Share

More from vixclotet

More Templates Like This

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This