Job Tracker AI: a small app worth testing

import { test, expect } from '@playwright/test';

const URL = 'https://app.thetestingacademy.com/ai/blueprint/learn/job-tracker-ai.html';

test('a new job lands in its column and the stored record matches', async ({ page }) => {
  await page.goto(URL);
  await page.getByTestId('jobt-add-applied').click();
  await page.getByTestId('jobt-company').fill('Acme Robotics');
  await page.getByTestId('jobt-role').fill('QA Engineer');
  await page.getByTestId('jobt-save').click();

  await expect(page.getByTestId('jobt-toast')).toHaveText('Job added');
  await expect(page.getByTestId('jobt-count-applied')).toHaveText('3');
  await expect(page.getByTestId('jobt-total')).toHaveText('8 jobs');
  await expect(page.getByTestId('jobt-record')).toContainText('"status": "applied"');
});

test('validation blocks a save with missing fields and a bad URL', async ({ page }) => {
  await page.goto(URL);
  await page.getByTestId('jobt-add').click();
  await page.getByTestId('jobt-url').fill('linkedin.com/jobs/1');
  await page.getByTestId('jobt-save').click();

  await expect(page.getByTestId('jobt-err-company')).toHaveText('Company is required');
  await expect(page.getByTestId('jobt-err-role')).toHaveText('Role is required');
  await expect(page.getByTestId('jobt-err-url')).toHaveText('Enter a valid URL');
  await expect(page.getByTestId('jobt-total')).toHaveText('7 jobs');
});

test('in UTC-4 a job added today says 1 day until the fix is applied', async ({ page }) => {
  await page.goto(URL);
  await page.getByTestId('jobt-tz').selectOption('-240');
  await page.getByTestId('jobt-add').click();
  await expect(page.getByTestId('jobt-date')).toHaveValue('2026-10-09');
  await page.getByTestId('jobt-company').fill('Acme Robotics');
  await page.getByTestId('jobt-role').fill('QA Engineer');
  await page.getByTestId('jobt-save').click();

  await expect(page.getByTestId('jobt-days-job-8')).toHaveText('1 day');
  await page.getByTestId('jobt-fix').check();
  await expect(page.getByTestId('jobt-days-job-8')).toHaveText('Today');
});

import { openDB } from "idb";

const DB_NAME = "job-tracker-ai";
const DB_VERSION = 1;
const JOB_STORE = "jobs";

const dbPromise = openDB(DB_NAME, DB_VERSION, {
  upgrade(db) {
    if (!db.objectStoreNames.contains(JOB_STORE)) {
      const store = db.createObjectStore(JOB_STORE, { keyPath: "id" });
      store.createIndex("status", "status");
      store.createIndex("company", "company");
      store.createIndex("role", "role");
    }
  },
});

export async function getAllJobs() {
  const db = await dbPromise;
  return db.getAll(JOB_STORE);
}

export async function saveJob(job) {
  const db = await dbPromise;
  await db.put(JOB_STORE, job);
  return job;
}

export async function deleteJob(id) {
  const db = await dbPromise;
  await db.delete(JOB_STORE, id);
}

export async function replaceJobs(jobs) {
  const db = await dbPromise;
  const tx = db.transaction(JOB_STORE, "readwrite");
  await tx.store.clear();

  for (const job of jobs) {
    await tx.store.put(job);
  }

  await tx.done;
  return jobs;
}

const dateToTime = (value) => {
  const time = new Date(value).getTime();
  return Number.isFinite(time) ? time : 0;
};

const makeId = () => {
  if (crypto?.randomUUID) {
    return crypto.randomUUID();
  }

  return `job_${Date.now()}_${Math.random().toString(16).slice(2)}`;
};

const daysSince = (value) => {
  const start = new Date(value);
  if (Number.isNaN(start.getTime())) {
    return "No date";
  }

  const today = new Date();
  const startDay = new Date(start.getFullYear(), start.getMonth(), start.getDate());
  const todayDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
  const diff = Math.floor((todayDay - startDay) / 86_400_000);

  if (diff < 0) return "Future";
  if (diff === 0) return "Today";
  if (diff === 1) return "1 day";
  return `${diff} days`;
};

const isValidUrl = (value) => {
  if (!value.trim()) return true;

  try {
    const url = new URL(value);
    return ["http:", "https:"].includes(url.protocol);
  } catch {
    return false;
  }
};

const normalizeImportedJobs = (items) =>
  items
    .filter((item) => item && String(item.company || "").trim() && String(item.role || "").trim())
    .map((item) => {
      const createdAt = item.createdAt || new Date().toISOString();
      const status = STATUS_BY_ID[item.status] ? item.status : "wishlist";

      return {
        id: item.id || makeId(),
        company: String(item.company || "").trim(),
        role: String(item.role || "").trim(),
        linkedinUrl: String(item.linkedinUrl || "").trim(),
        resume: String(item.resume || "").trim(),
        dateApplied: item.dateApplied || todayInputValue(),
        salary: String(item.salary || "").trim(),
        notes: String(item.notes || "").trim(),
        status,
        createdAt,
        updatedAt: item.updatedAt || createdAt,
      };
    });

  const resumeOptions = useMemo(() => {
    const names = jobs.map((job) => job.resume).filter(Boolean);
    return [...new Set(names)].sort((a, b) => a.localeCompare(b));
  }, [jobs]);

  const filteredJobs = useMemo(() => {
    const needle = query.trim().toLowerCase();
    if (!needle) return jobs;

    return jobs.filter((job) =>
      [job.company, job.role].some((value) => value.toLowerCase().includes(needle)),
    );
  }, [jobs, query]);

  const jobsByStatus = useMemo(() => {
    const grouped = Object.fromEntries(STATUS_COLUMNS.map((column) => [column.id, []]));

    for (const job of filteredJobs) {
      const status = STATUS_BY_ID[job.status] ? job.status : "wishlist";
      grouped[status].push(job);
    }

    for (const column of STATUS_COLUMNS) {
      grouped[column.id].sort((a, b) => {
        const diff = dateToTime(a.dateApplied) - dateToTime(b.dateApplied);
        return sortDirection === "oldest" ? diff : -diff;
      });
    }

    return grouped;
  }, [filteredJobs, sortDirection]);

  const openCreate = (status = "wishlist") => setModalState({ open: true, job: null, status });

  const openEdit = (job) => setModalState({ open: true, job, status: job.status });

  const closeModal = () => setModalState({ open: false, job: null, status: "wishlist" });

  const upsertJob = async (values) => {
    const existing = modalState.job;
    const timestamp = new Date().toISOString();
    const nextJob = existing
      ? { ...existing, ...values, updatedAt: timestamp }
      : {
          ...values,
          id: makeId(),
          createdAt: timestamp,
          updatedAt: timestamp,
        };

    await saveJob(nextJob);
    setJobs((current) => {
      if (existing) {
        return current.map((job) => (job.id === nextJob.id ? nextJob : job));
      }

      return [nextJob, ...current];
    });
    setToast(existing ? "Job updated" : "Job added");
    closeModal();
  };

  const confirmDelete = async () => {
    if (!deleteTarget) return;

    await deleteJob(deleteTarget.id);
    setJobs((current) => current.filter((job) => job.id !== deleteTarget.id));
    setToast("Job deleted");
    setDeleteTarget(null);
  };

  const handleDragStart = ({ active }) => {
    const job = jobs.find((item) => item.id === active.id);
    setActiveJob(job || null);
  };

  const handleDragEnd = async ({ active, over }) => {
    setActiveJob(null);
    if (!over || !STATUS_BY_ID[over.id]) return;

    const job = jobs.find((item) => item.id === active.id);
    if (!job || job.status === over.id) return;

    const updated = { ...job, status: over.id, updatedAt: new Date().toISOString() };
    await saveJob(updated);
    setJobs((current) => current.map((item) => (item.id === updated.id ? updated : item)));
  };

  const exportJobs = () => {
    const payload = {
      exportedAt: new Date().toISOString(),
      version: 1,
      jobs,
    };
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = `job-tracker-ai-${todayInputValue()}.json`;
    document.body.appendChild(link);
    link.click();
    link.remove();
    URL.revokeObjectURL(url);
  };

  const importJobs = async (event) => {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file) return;

    try {
      const parsed = JSON.parse(await file.text());
      const rawJobs = Array.isArray(parsed) ? parsed : parsed.jobs;

      if (!Array.isArray(rawJobs)) {
        throw new Error("Invalid backup file");
      }

      const normalized = normalizeImportedJobs(rawJobs);
      if (!normalized.length) {
        throw new Error("No valid jobs found");
      }

      const shouldReplace = window.confirm(
        `Import ${normalized.length} jobs and replace the current board?`,
      );
      if (!shouldReplace) return;

      await replaceJobs(normalized);
      setJobs(normalized);
      setToast("Backup imported");
    } catch (error) {
      setToast(error.message || "Import failed");
    }
  };

export const STATUS_COLUMNS = [
  {
    id: "wishlist",
    title: "Wishlist",
    accent: "border-l-amber-400",
    badge: "bg-amber-100 text-amber-800 dark:bg-amber-400/15 dark:text-amber-200",
    drop: "bg-amber-50/80 dark:bg-amber-400/10",
  },
  {
    id: "applied",
    title: "Applied",
    accent: "border-l-sky-400",
    badge: "bg-sky-100 text-sky-800 dark:bg-sky-400/15 dark:text-sky-200",
    drop: "bg-sky-50/80 dark:bg-sky-400/10",
  },
  {
    id: "follow-up",
    title: "Follow-up",
    accent: "border-l-violet-400",
    badge: "bg-violet-100 text-violet-800 dark:bg-violet-400/15 dark:text-violet-200",
    drop: "bg-violet-50/80 dark:bg-violet-400/10",
  },
  {
    id: "interview",
    title: "Interview",
    accent: "border-l-teal-400",
    badge: "bg-teal-100 text-teal-800 dark:bg-teal-400/15 dark:text-teal-200",
    drop: "bg-teal-50/80 dark:bg-teal-400/10",
  },
  {
    id: "offer",
    title: "Offer",
    accent: "border-l-emerald-400",
    badge: "bg-emerald-100 text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-200",
    drop: "bg-emerald-50/80 dark:bg-emerald-400/10",
  },
  {
    id: "rejected",
    title: "Rejected",
    accent: "border-l-rose-400",
    badge: "bg-rose-100 text-rose-800 dark:bg-rose-400/15 dark:text-rose-200",
    drop: "bg-rose-50/80 dark:bg-rose-400/10",
  },
];

export const STATUS_BY_ID = Object.fromEntries(
  STATUS_COLUMNS.map((column) => [column.id, column]),
);

export const todayInputValue = () => new Date().toISOString().slice(0, 10);

export const blankJobForm = (status = "wishlist") => ({
  company: "",
  role: "",
  linkedinUrl: "",
  resume: "",
  dateApplied: todayInputValue(),
  salary: "",
  notes: "",
  status,
});