fix: 🎨 Resume list + Companies list pages neo-brutalism + dark mode

frontend/src/app/(dashboard)/resume/page.tsx

@@ -2,479 +2,124 @@
 
 import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import {
-  FileText,
-  Plus,
-  Download,
-  Eye,
-  Sparkles,
-  Star,
-  Trash2,
-  Copy,
-  MoreHorizontal,
-} from "lucide-react";
+import { FileText, Plus, Download, Eye, Sparkles, Star, Trash2, Copy, MoreHorizontal } from "lucide-react";
 import { apiClient } from "@/lib/api/client";
 
-interface ResumeVersion {
-  id: string;
-  name: string;
-  description: string | null;
-  is_default: boolean;
-  is_generated: boolean;
-  template_id: string | null;
-  ats_score: number | null;
-  target_role: string | null;
-  file_name: string | null;
-  created_at: string;
-  updated_at: string;
-}
-
 const TEMPLATES = [
-  {
-    id: "simple",
-    name: "Simple ATS",
-    description: "Single column, maximum ATS compatibility. No graphics, clean hierarchy.",
-    preview: "📄",
-  },
-  {
-    id: "modern",
-    name: "Modern",
-    description: "Two-column layout with sidebar for skills/contact. Clean and professional.",
-    preview: "📋",
-  },
-  {
-    id: "executive",
-    name: "Executive",
-    description: "Minimal design, high information density. Best for 10+ years experience.",
-    preview: "📑",
-  },
-  {
-    id: "creative",
-    name: "Creative",
-    description: "Bold section headers, accent colors. For design/marketing roles.",
-    preview: "🎨",
-  },
+  { id: "simple", name: "Simple ATS", desc: "Single column, max ATS compatibility", color: "var(--primary)" },
+  { id: "modern", name: "Modern", desc: "Two-column with sidebar", color: "var(--tertiary)" },
+  { id: "executive", name: "Executive", desc: "Minimal, high density", color: "var(--accent)" },
+  { id: "creative", name: "Creative", desc: "Bold headers, accent colors", color: "var(--pop)" },
 ];
 
 export default function ResumePage() {
   const queryClient = useQueryClient();
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [showReviewModal, setShowReviewModal] = useState<string | null>(null);
-  const [selectedResume, setSelectedResume] = useState<ResumeVersion | null>(null);
+  const [showCreate, setShowCreate] = useState(false);
 
   const { data: resumes, isLoading } = useQuery({
     queryKey: ["resumes"],
-    queryFn: async () => {
-      const response = await apiClient.get<ResumeVersion[]>("/resumes");
-      return response.data;
-    },
+    queryFn: async () => { const r = await apiClient.get("/resumes"); return r.data; },
   });
 
   const deleteResume = useMutation({
-    mutationFn: async (id: string) => {
-      await apiClient.delete(`/resumes/${id}`);
-    },
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["resumes"] }),
-  });
-
-  const duplicateResume = useMutation({
-    mutationFn: async (id: string) => {
-      await apiClient.post(`/resumes/${id}/duplicate`);
-    },
+    mutationFn: async (id: string) => { await apiClient.delete(`/resumes/${id}`); },
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ["resumes"] }),
   });
 
   return (
     <div className="space-y-6">
-      {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold">Resume Builder</h1>
-          <p className="text-muted-foreground">
-            Create ATS-optimized resumes tailored for each job application
-          </p>
-        </div>
-        <div className="flex gap-2">
-          <button
-            onClick={() => setShowCreateModal(true)}
-            className="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
-          >
-            <Plus className="h-4 w-4" />
-            New Resume
-          </button>
+          <h1 className="text-3xl md:text-4xl" style={{ fontFamily: "var(--font-display)" }}>Resume Builder</h1>
+          <p className="text-[var(--muted-foreground)] font-medium mt-1">ATS-optimized resumes tailored per job</p>
         </div>
+        <button onClick={() => setShowCreate(true)} className="neo-btn bg-[var(--primary)] text-[var(--primary-foreground)]"><Plus className="h-4 w-4" /> New</button>
       </div>
 
-      {/* Templates Section */}
+      {/* Templates */}
       <div>
-        <h2 className="mb-3 text-lg font-semibold">Templates</h2>
+        <h2 className="text-sm font-extrabold uppercase tracking-wider mb-3 text-[var(--foreground)]" style={{ fontFamily: "var(--font-display)" }}>Templates</h2>
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          {TEMPLATES.map((template) => (
-            <div
-              key={template.id}
-              className="cursor-pointer rounded-lg border bg-card p-4 transition-all hover:border-primary hover:shadow-md"
-              onClick={() => setShowCreateModal(true)}
-            >
-              <div className="mb-3 flex h-24 items-center justify-center rounded-md bg-muted text-4xl">
-                {template.preview}
-              </div>
-              <h3 className="font-medium">{template.name}</h3>
-              <p className="mt-1 text-xs text-muted-foreground">
-                {template.description}
-              </p>
-            </div>
+          {TEMPLATES.map((t) => (
+            <button key={t.id} onClick={() => setShowCreate(true)} className="neo-card p-4 text-left" style={{ backgroundColor: t.color }}>
+              <div className="h-16 flex items-center justify-center border-2 border-[var(--border)] bg-[var(--card)] mb-3 text-2xl" style={{ boxShadow: "var(--neo-xs)" }}>📄</div>
+              <h3 className="font-bold text-xs uppercase text-[var(--foreground)]">{t.name}</h3>
+              <p className="text-[10px] text-[var(--foreground)] opacity-80 mt-0.5">{t.desc}</p>
+            </button>
           ))}
         </div>
       </div>
 
       {/* My Resumes */}
       <div>
-        <h2 className="mb-3 text-lg font-semibold">My Resumes</h2>
+        <h2 className="text-sm font-extrabold uppercase tracking-wider mb-3 text-[var(--foreground)]" style={{ fontFamily: "var(--font-display)" }}>My Resumes</h2>
         {isLoading ? (
-          <div className="space-y-3">
-            {[...Array(3)].map((_, i) => (
-              <div key={i} className="h-20 animate-pulse rounded-lg border bg-muted" />
-            ))}
-          </div>
+          <div className="space-y-3">{[...Array(3)].map((_, i) => <div key={i} className="h-20 border-2 border-[var(--border)] bg-[var(--muted)] animate-pulse" />)}</div>
         ) : resumes && resumes.length > 0 ? (
           <div className="space-y-3">
-            {resumes.map((resume) => (
-              <ResumeCard
-                key={resume.id}
-                resume={resume}
-                onReview={() => setShowReviewModal(resume.id)}
-                onDuplicate={() => duplicateResume.mutate(resume.id)}
-                onDelete={() => deleteResume.mutate(resume.id)}
-              />
+            {resumes.map((resume: any) => (
+              <div key={resume.id} className="neo-card p-4 flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <div className="flex h-10 w-10 items-center justify-center border-2 border-[var(--border)] bg-[var(--primary)]" style={{ boxShadow: "var(--neo-xs)" }}><FileText className="h-5 w-5" /></div>
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-bold text-sm text-[var(--foreground)]">{resume.name}</h3>
+                      {resume.is_default && <span className="neo-badge bg-[var(--primary)]">Default</span>}
+                      {resume.is_generated && <span className="neo-badge bg-[var(--pop)] text-white">AI</span>}
+                    </div>
+                    <div className="flex items-center gap-3 text-[10px] text-[var(--muted-foreground)] font-medium mt-0.5">
+                      {resume.target_role && <span>Target: {resume.target_role}</span>}
+                      {resume.ats_score && <span className="flex items-center gap-1"><Star className="h-3 w-3" />ATS: {resume.ats_score}</span>}
+                      <span>Updated {new Date(resume.updated_at).toLocaleDateString()}</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-1">
+                  <a href={`/resume/editor?id=${resume.id}`} className="neo-interactive bg-[var(--card)] p-2"><Eye className="h-4 w-4 text-[var(--foreground)]" /></a>
+                  <button className="neo-interactive bg-[var(--card)] p-2"><Download className="h-4 w-4 text-[var(--foreground)]" /></button>
+                  <button onClick={() => deleteResume.mutate(resume.id)} className="neo-interactive bg-[var(--card)] p-2"><Trash2 className="h-4 w-4 text-[var(--destructive)]" /></button>
+                </div>
+              </div>
             ))}
           </div>
         ) : (
-          <div className="rounded-lg border border-dashed p-8 text-center">
-            <FileText className="mx-auto h-12 w-12 text-muted-foreground" />
-            <h3 className="mt-4 text-lg font-medium">No resumes yet</h3>
-            <p className="mt-1 text-sm text-muted-foreground">
-              Create your first resume from a template or upload an existing one
-            </p>
-            <div className="mt-4 flex justify-center gap-2">
-              <button
-                onClick={() => setShowCreateModal(true)}
-                className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
-              >
-                Create from Template
-              </button>
-              <button className="rounded-md border px-4 py-2 text-sm font-medium">
-                Upload PDF/DOCX
-              </button>
-            </div>
+          <div className="neo-card p-8 text-center border-dashed">
+            <FileText className="mx-auto h-10 w-10 text-[var(--muted-foreground)]" />
+            <h3 className="mt-3 font-extrabold uppercase text-[var(--foreground)]" style={{ fontFamily: "var(--font-display)" }}>No Resumes</h3>
+            <p className="mt-1 text-sm text-[var(--muted-foreground)]">Create from a template or upload existing</p>
+            <button onClick={() => setShowCreate(true)} className="neo-btn bg-[var(--primary)] text-[var(--primary-foreground)] mt-4">Create First</button>
           </div>
         )}
       </div>
 
-      {/* AI Review Modal */}
-      {showReviewModal && (
-        <AIReviewModal
-          resumeId={showReviewModal}
-          onClose={() => setShowReviewModal(null)}
-        />
-      )}
-
-      {/* Create Modal */}
-      {showCreateModal && (
-        <CreateResumeModal onClose={() => setShowCreateModal(false)} />
-      )}
-    </div>
-  );
-}
-
-function ResumeCard({
-  resume,
-  onReview,
-  onDuplicate,
-  onDelete,
-}: {
-  resume: ResumeVersion;
-  onReview: () => void;
-  onDuplicate: () => void;
-  onDelete: () => void;
-}) {
-  const [showMenu, setShowMenu] = useState(false);
-
-  return (
-    <div className="flex items-center justify-between rounded-lg border bg-card p-4">
-      <div className="flex items-center gap-4">
-        <div className="flex h-10 w-10 items-center justify-center rounded-md bg-primary/10">
-          <FileText className="h-5 w-5 text-primary" />
-        </div>
-        <div>
-          <div className="flex items-center gap-2">
-            <h3 className="font-medium">{resume.name}</h3>
-            {resume.is_default && (
-              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary">
-                Default
-              </span>
-            )}
-            {resume.is_generated && (
-              <span className="rounded-full bg-purple-100 px-2 py-0.5 text-xs text-purple-700 dark:bg-purple-900 dark:text-purple-300">
-                AI Generated
-              </span>
-            )}
-          </div>
-          <div className="mt-0.5 flex items-center gap-3 text-xs text-muted-foreground">
-            {resume.target_role && <span>Target: {resume.target_role}</span>}
-            {resume.ats_score !== null && (
-              <span className="flex items-center gap-1">
-                <Star className="h-3 w-3" />
-                ATS Score: {resume.ats_score}/100
-              </span>
-            )}
-            <span>Updated {new Date(resume.updated_at).toLocaleDateString()}</span>
+      {showCreate && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+          <div className="w-full max-w-md border-[3px] border-[var(--border)] bg-[var(--card)] p-6" style={{ boxShadow: "var(--neo-xl)" }}>
+            <h2 className="text-xl font-extrabold uppercase mb-4" style={{ fontFamily: "var(--font-display)" }}>New Resume</h2>
+            <CreateForm onClose={() => setShowCreate(false)} />
           </div>
         </div>
-      </div>
-      <div className="flex items-center gap-1">
-        <button
-          onClick={onReview}
-          className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
-          title="AI Review"
-        >
-          <Sparkles className="h-4 w-4" />
-        </button>
-        <button
-          className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
-          title="Preview"
-        >
-          <Eye className="h-4 w-4" />
-        </button>
-        <button
-          className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
-          title="Download PDF"
-        >
-          <Download className="h-4 w-4" />
-        </button>
-        <div className="relative">
-          <button
-            onClick={() => setShowMenu(!showMenu)}
-            className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
-            <MoreHorizontal className="h-4 w-4" />
-          </button>
-          {showMenu && (
-            <div className="absolute right-0 top-full z-10 mt-1 w-40 rounded-md border bg-card py-1 shadow-lg">
-              <button
-                onClick={() => { onDuplicate(); setShowMenu(false); }}
-                className="flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-accent"
-              >
-                <Copy className="h-3 w-3" /> Duplicate
-              </button>
-              <button
-                onClick={() => { onDelete(); setShowMenu(false); }}
-                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-destructive hover:bg-accent"
-              >
-                <Trash2 className="h-3 w-3" /> Delete
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function AIReviewModal({ resumeId, onClose }: { resumeId: string; onClose: () => void }) {
-  const [jobDescription, setJobDescription] = useState("");
-  const [review, setReview] = useState<any>(null);
-  const [loading, setLoading] = useState(false);
-
-  const handleReview = async () => {
-    setLoading(true);
-    try {
-      const response = await apiClient.post("/ai/resume-review", {
-        resume_text: "TODO: fetch resume text",
-        job_description: jobDescription || undefined,
-      });
-      setReview(response.data);
-    } catch (err) {
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-lg bg-card p-6 shadow-lg">
-        <h2 className="mb-4 text-lg font-semibold flex items-center gap-2">
-          <Sparkles className="h-5 w-5 text-primary" />
-          AI Resume Review
-        </h2>
-
-        {!review ? (
-          <div className="space-y-4">
-            <div>
-              <label className="mb-1 block text-sm font-medium">
-                Job Description (optional - for tailored feedback)
-              </label>
-              <textarea
-                value={jobDescription}
-                onChange={(e) => setJobDescription(e.target.value)}
-                className="w-full rounded-md border bg-background px-3 py-2 text-sm"
-                rows={6}
-                placeholder="Paste the job description here for targeted keyword analysis..."
-              />
-            </div>
-            <div className="flex justify-end gap-2">
-              <button onClick={onClose} className="rounded-md border px-4 py-2 text-sm">
-                Cancel
-              </button>
-              <button
-                onClick={handleReview}
-                disabled={loading}
-                className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
-              >
-                {loading ? "Analyzing..." : "Review Resume"}
-              </button>
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            {/* Score */}
-            <div className="flex items-center gap-4">
-              <div className="flex h-16 w-16 items-center justify-center rounded-full border-4 border-primary text-xl font-bold">
-                {review.score}
-              </div>
-              <div>
-                <p className="font-medium">ATS Compatibility Score</p>
-                <p className="text-sm text-muted-foreground">{review.overall_feedback}</p>
-              </div>
-            </div>
-
-            {/* Strengths */}
-            {review.strengths?.length > 0 && (
-              <div>
-                <h3 className="mb-2 text-sm font-semibold text-green-600">✅ Strengths</h3>
-                <ul className="space-y-1">
-                  {review.strengths.map((s: string, i: number) => (
-                    <li key={i} className="text-sm text-muted-foreground">• {s}</li>
-                  ))}
-                </ul>
-              </div>
-            )}
-
-            {/* Weaknesses */}
-            {review.weaknesses?.length > 0 && (
-              <div>
-                <h3 className="mb-2 text-sm font-semibold text-red-600">⚠️ Improvements</h3>
-                <ul className="space-y-1">
-                  {review.weaknesses.map((w: string, i: number) => (
-                    <li key={i} className="text-sm text-muted-foreground">• {w}</li>
-                  ))}
-                </ul>
-              </div>
-            )}
-
-            {/* Missing Keywords */}
-            {review.missing_keywords?.length > 0 && (
-              <div>
-                <h3 className="mb-2 text-sm font-semibold">🔑 Missing Keywords</h3>
-                <div className="flex flex-wrap gap-2">
-                  {review.missing_keywords.map((kw: string, i: number) => (
-                    <span
-                      key={i}
-                      className="rounded-full bg-yellow-100 px-3 py-1 text-xs dark:bg-yellow-900"
-                    >
-                      {kw}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            <div className="flex justify-end">
-              <button onClick={onClose} className="rounded-md border px-4 py-2 text-sm">
-                Close
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
+      )}
     </div>
   );
 }
 
-function CreateResumeModal({ onClose }: { onClose: () => void }) {
+function CreateForm({ onClose }: { onClose: () => void }) {
   const queryClient = useQueryClient();
-  const [name, setName] = useState("");
-  const [templateId, setTemplateId] = useState("simple");
-  const [targetRole, setTargetRole] = useState("");
-
+  const [name, setName] = useState(""); const [template, setTemplate] = useState("simple"); const [role, setRole] = useState("");
   const create = useMutation({
-    mutationFn: async () => {
-      await apiClient.post("/resumes", {
-        name: name || "Untitled Resume",
-        template_id: templateId,
-        target_role: targetRole || undefined,
-      });
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["resumes"] });
-      onClose();
-    },
+    mutationFn: async () => { await apiClient.post("/resumes", { name: name || "Untitled", template_id: template, target_role: role || undefined }); },
+    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["resumes"] }); onClose(); },
   });
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="w-full max-w-md rounded-lg bg-card p-6 shadow-lg">
-        <h2 className="mb-4 text-lg font-semibold">Create New Resume</h2>
-        <form
-          onSubmit={(e) => { e.preventDefault(); create.mutate(); }}
-          className="space-y-4"
-        >
-          <div>
-            <label className="mb-1 block text-sm font-medium">Resume Name</label>
-            <input
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="w-full rounded-md border bg-background px-3 py-2 text-sm"
-              placeholder="e.g., Software Engineer Resume"
-            />
-          </div>
-          <div>
-            <label className="mb-1 block text-sm font-medium">Template</label>
-            <select
-              value={templateId}
-              onChange={(e) => setTemplateId(e.target.value)}
-              className="w-full rounded-md border bg-background px-3 py-2 text-sm"
-            >
-              {TEMPLATES.map((t) => (
-                <option key={t.id} value={t.id}>{t.name}</option>
-              ))}
-            </select>
-          </div>
-          <div>
-            <label className="mb-1 block text-sm font-medium">Target Role (optional)</label>
-            <input
-              type="text"
-              value={targetRole}
-              onChange={(e) => setTargetRole(e.target.value)}
-              className="w-full rounded-md border bg-background px-3 py-2 text-sm"
-              placeholder="e.g., Senior Frontend Engineer"
-            />
-          </div>
-          <div className="flex justify-end gap-2">
-            <button type="button" onClick={onClose} className="rounded-md border px-4 py-2 text-sm">
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
-              disabled={create.isPending}
-            >
-              {create.isPending ? "Creating..." : "Create"}
-            </button>
-          </div>
-        </form>
+    <form onSubmit={(e) => { e.preventDefault(); create.mutate(); }} className="space-y-3">
+      <div><label className="block text-[10px] font-bold uppercase tracking-wider text-[var(--muted-foreground)] mb-1">Name</label><input value={name} onChange={(e) => setName(e.target.value)} className="w-full" placeholder="SWE Resume" /></div>
+      <div><label className="block text-[10px] font-bold uppercase tracking-wider text-[var(--muted-foreground)] mb-1">Template</label><select value={template} onChange={(e) => setTemplate(e.target.value)} className="w-full">{TEMPLATES.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}</select></div>
+      <div><label className="block text-[10px] font-bold uppercase tracking-wider text-[var(--muted-foreground)] mb-1">Target Role</label><input value={role} onChange={(e) => setRole(e.target.value)} className="w-full" placeholder="Senior Frontend Engineer" /></div>
+      <div className="flex justify-end gap-2 pt-2">
+        <button type="button" onClick={onClose} className="neo-btn bg-[var(--muted)] text-[var(--foreground)]">Cancel</button>
+        <button type="submit" disabled={create.isPending} className="neo-btn bg-[var(--primary)] text-[var(--primary-foreground)]">{create.isPending ? "Creating..." : "Create →"}</button>
       </div>
-    </div>
+    </form>
   );
 }