Refresh dashboard, adopt MUI X, and improve AI follow-ups

job-tracker-ui/src/components/AddJobModal.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+
 import {
   Alert,
   Autocomplete,
@@ -65,6 +67,17 @@ function getTodayIso() {
   return new Date().toISOString().slice(0, 10);
 }
 
+function parsePickerDate(value?: string | null): Date | null {
+  if (!value) return null;
+  const parsed = new Date(value);
+  return Number.isNaN(+parsed) ? null : parsed;
+}
+
+function toPickerIso(value: Date | null) {
+  if (!value || Number.isNaN(+value)) return "";
+  return value.toISOString().slice(0, 10);
+}
+
 function emptyAttachmentBuckets(): AttachmentBuckets {
   return {
     resume: [],
@@ -448,7 +461,12 @@ export default function AddJobModal({ open, onClose, onCreated }: Props) {
             </Button>
           </Box>
 
-          <TextField label={t("addJobModalDateApplied")} type="date" value={dateApplied} onChange={(e) => setDateApplied(e.target.value)} InputLabelProps={{ shrink: true }} />
+          <DatePicker
+            label={t("addJobModalDateApplied")}
+            value={parsePickerDate(dateApplied)}
+            onChange={(value) => setDateApplied(toPickerIso(value))}
+            slotProps={{ textField: { fullWidth: true } }}
+          />
 
           <TextField select label={t("addJobModalStatus")} value={status} onChange={(e) => setStatus(e.target.value as any)}>
             {STATUS_OPTIONS.map((s) => (
@@ -462,7 +480,12 @@ export default function AddJobModal({ open, onClose, onCreated }: Props) {
           <TextField label={t("location")} value={location} onChange={(e) => setLocation(e.target.value)} />
 
           <TextField label={t("addJobModalSalary")} value={salary} onChange={(e) => setSalary(e.target.value)} />
-          <TextField label={t("addJobModalDeadline")} type="date" value={deadline} onChange={(e) => setDeadline(e.target.value)} InputLabelProps={{ shrink: true }} />
+          <DatePicker
+            label={t("addJobModalDeadline")}
+            value={parsePickerDate(deadline)}
+            onChange={(value) => setDeadline(toPickerIso(value))}
+            slotProps={{ textField: { fullWidth: true } }}
+          />
 
           <Box sx={{ gridColumn: "1 / -1" }}>
             <TagsInput value={tags} onChange={setTags} />