[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { JobTracker } from "@/components/job-tracker" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/job-tracker.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { PlusCircle, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { JobList } from "@/components/job-list" import { JobForm } from "@/components/job-form" import { StatusFilter } from "@/components/status-filter" import { DateFilter } from "@/components/date-filter" import type { JobApplication } from "@/types/job-application" export function JobTracker() { const [jobs, setJobs] = useState(() => { // Load from localStorage if available if (typeof window !== "undefined") { const saved = localStorage.getItem("remoteTracckApplications") if (saved) return JSON.parse(saved) // Try to migrate from old key if it exists const oldSaved = localStorage.getItem("jobApplications") return oldSaved ? JSON.parse(oldSaved) : [] } return [] }) const [isFormOpen, setIsFormOpen] = useState(false) const [editingJob, setEditingJob] = useState(null) const [searchQuery, setSearchQuery] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [dateFilter, setDateFilter] = useState("all") // Save to localStorage whenever jobs change useEffect(() => { localStorage.setItem("remoteTracckApplications", JSON.stringify(jobs)) }, [jobs]) const addJob = (job: JobApplication) => { setJobs([...jobs, { ...job, id: Date.now().toString() }]) setIsFormOpen(false) } const updateJob = (updatedJob: JobApplication) => { setJobs(jobs.map((job) => (job.id === updatedJob.id ? updatedJob : job))) setEditingJob(null) } const deleteJob = (id: string) => { setJobs(jobs.filter((job) => job.id !== id)) } const openEditForm = (job: JobApplication) => { setEditingJob(job) } // Get date for filtering const getDateForFilter = (filter: string): Date => { const today = new Date() switch (filter) { case "7days": const sevenDaysAgo = new Date() sevenDaysAgo.setDate(today.getDate() - 7) return sevenDaysAgo case "30days": const thirtyDaysAgo = new Date() thirtyDaysAgo.setDate(today.getDate() - 30) return thirtyDaysAgo case "90days": const ninetyDaysAgo = new Date() ninetyDaysAgo.setDate(today.getDate() - 90) return ninetyDaysAgo default: // Return a date far in the past for "all" return new Date(0) } } const filteredJobs = jobs.filter((job) => { // Filter by search query const matchesSearch = job.company.toLowerCase().includes(searchQuery.toLowerCase()) || job.position.toLowerCase().includes(searchQuery.toLowerCase()) // Filter by status const matchesStatus = statusFilter === "all" || job.status === statusFilter // Filter by date const applicationDate = new Date(job.applicationDate) const filterDate = getDateForFilter(dateFilter) const matchesDate = dateFilter === "all" || applicationDate >= filterDate return matchesSearch && matchesStatus && matchesDate }) return (

setSearchQuery(e.target.value)} />

{filteredJobs.length > 0 ? ( ) : (

{jobs.length === 0 ? "No job applications yet. Start tracking your remote job hunt!" : "No matching job applications found."}

)} {(isFormOpen || editingJob) && ( { setIsFormOpen(false) setEditingJob(null) }} /> )}

) } [V0_FILE]typescriptreact:file="components/job-list.tsx" isEdit="true" isMerged="true" "use client" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Edit, Trash2 } from "lucide-react" import type { JobApplication } from "@/types/job-application" import { StatusBadge } from "@/components/status-badge" import { formatDate } from "@/lib/utils" interface JobListProps { jobs: JobApplication[] onEdit: (job: JobApplication) => void onDelete: (id: string) => void } export function JobList({ jobs, onEdit, onDelete }: JobListProps) { // Sort jobs by application date (newest first) const sortedJobs = [...jobs].sort( (a, b) => new Date(b.applicationDate).getTime() - new Date(a.applicationDate).getTime(), ) return (

Company Position Status Applied On Actions {sortedJobs.map((job) => ( {job.company} {job.position} {formatDate(job.applicationDate)}

))}

) } [V0_FILE]typescriptreact:file="components/job-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { JobApplication } from "@/types/job-application" interface JobFormProps { job?: JobApplication | null onSubmit: (job: JobApplication) => void onCancel: () => void } export function JobForm({ job, onSubmit, onCancel }: JobFormProps) { const [formData, setFormData] = useState({ id: job?.id || "", company: job?.company || "", position: job?.position || "", location: job?.location || "", status: job?.status || "applied", applicationDate: job?.applicationDate || new Date().toISOString().split("T")[0], notes: job?.notes || "", url: job?.url || "", }) const [errors, setErrors] = useState>({}) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData({ ...formData, [name]: value }) // Clear error when field is edited if (errors[name]) { setErrors({ ...errors, [name]: "" }) } } const handleSelectChange = (name: string, value: string) => { setFormData({ ...formData, [name]: value }) } const validateForm = () => { const newErrors: Record = {} if (!formData.company.trim()) { newErrors.company = "Company name is required" } if (!formData.position.trim()) { newErrors.position = "Position is required" } if (!formData.applicationDate) { newErrors.applicationDate = "Application date is required" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { onSubmit(formData) } } return (

About

About