From 0150c39c1cbade9208d8c52dd04f10393e85a92d Mon Sep 17 00:00:00 2001 From: Aditya190803 Date: Sat, 3 Oct 2026 12:02:22 +0530 Subject: [PATCH 1/2] design: preserve dashboard redesign concepts --- design-previews/01-editorial.html | 827 ++++++++++++++++++++++++ design-previews/02-precision.html | 965 ++++++++++++++++++++++++++++ design-previews/03-dark-studio.html | 948 +++++++++++++++++++++++++++ 3 files changed, 2740 insertions(+) create mode 100644 design-previews/01-editorial.html create mode 100644 design-previews/02-precision.html create mode 100644 design-previews/03-dark-studio.html diff --git a/design-previews/01-editorial.html b/design-previews/01-editorial.html new file mode 100644 index 0000000..6a3a7c8 --- /dev/null +++ b/design-previews/01-editorial.html @@ -0,0 +1,827 @@ + + + + + + + + ATS — Editorial workspace + + + + +
+ + +
+ Personal workspaceAD +
+
+
+
+
+
Saturday, October 3 · your career, in progress
+

A little closer to
your next chapter.

+

Welcome back, Adi. Here’s where your search stands.

+
+ +
+
+
+
+
+ 12Active applications +
+
+ 03Interviews ahead +
+
+ 82%Average resume match +
+
+ 04Sites you're watching +
+
+
+
+

Opportunities in motion

+ +
+
+
LN
+
+

Product engineer

+

Linear · Remote · Full time

+
+
+ InterviewMonday, 10:30 AM +
+
+
+
NT
+
+

Frontend engineer

+

Notion · Bengaluru · Hybrid

+
+
+ AppliedUpdated 2 days ago +
+
+
+
FG
+
+

Software engineer

+

Figma · Remote · Full time

+
+
+ PreparingResume match 89% +
+
+
+
+
+

Make your next move count

+ Your preparation toolkit +
+
+ +
+
+
+ +
+
+ + +

+

+ + + + + diff --git a/design-previews/02-precision.html b/design-previews/02-precision.html new file mode 100644 index 0000000..f0a1d34 --- /dev/null +++ b/design-previews/02-precision.html @@ -0,0 +1,965 @@ + + + + + + + + ATS — Precision workspace + + + + +
+ +
+
+

+ Workspace /Overview +

+
+ AD +
+
+
+
+
+

Your search, organized.

+

Manage your applications and keep your next steps in view.

+
+
+ +
+
+
+
+ Active applications123 added this week +
+
+ Upcoming interviews03Next: Monday, 10:30 +
+
+ Average resume match82%Across 8 analyses +
+
+ Career sites watched042 new roles found +
+
+
+
+
+

Application pipeline 12

+ +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Company / roleStageMatchNext step
+
+ LN +
LinearProduct engineer
+
+ 		Interview + 86% + Oct 5
+
+ NT +
NotionFrontend engineer
+
+ 		Applied + 78% + Follow up
+
+ FG +
FigmaSoftware engineer
+
+ 		Preparing + 89% + Tailor resume
+
+ VR +
VercelFrontend engineer
+
+ 		Applied + 84% + Oct 8
+
+ RP +
RazorpayProduct engineer
+
+ 		Interview + 73% + Oct 9
+ +
+
+ Showing 5 of 12 applications · sample data +
+
+ +
+
+
+

Recently worked on

+ +
+
+ +
+
+
+
+
+ + +

+

+ + + + + diff --git a/design-previews/03-dark-studio.html b/design-previews/03-dark-studio.html new file mode 100644 index 0000000..9f5425f --- /dev/null +++ b/design-previews/03-dark-studio.html @@ -0,0 +1,948 @@ + + + + + + + + ATS — Dark studio + + + + +
+ + +
+ Personal workspaceAD +
+
+
+
+
+ Your next chapter starts here +

Good work.
Great possibilities.

+

12 opportunities in play. One place to move them forward.

+ +
+
+
+ 12Active applications3 added this week ↗ +
+
+ 82%Average resume matchAcross 8 saved analyses +
+
+ 03Upcoming interviewsNext up: Linear +
+
+ 04Career sites watched2 new matching roles +
+
+
+
+
+
+

Your opportunity board

+ 12 active +
+
+ +
+
+
+
+
Preparing 3
+
+
+
+ FGFigma +
+ 89% fit +
+

Software engineer

+

Remote · Full time

+
+ Tailor resume +
+
+
+
+
+ STStripe +
+ 81% fit +
+

Frontend engineer

+

Bengaluru · Full time

+
+ Draft cover letter +
+
+ +
+
+
Applied 5
+
+
+
+ NTNotion +
+ 78% fit +
+

Frontend engineer

+

Bengaluru · Hybrid · Full time

+
+ Follow-up due +
+
+
+
+
+ VRVercel +
+ 84% fit +
+

Frontend engineer

+

Remote · Full time

+
+ Applied 2 days ago +
+
+ +
+
+
Interviewing 3
+
+
+
+ LNLinear +
+ 86% fit +
+

Product engineer

+

Remote · Full time

+
↗ Monday, Oct 5 · 10:30 AM
+
+ Practice questions +
+
+
+
+
+ RPRazorpay +
+ 73% fit +
+

Product engineer

+

Bengaluru · Full time

+
+ Friday, Oct 9 +
+
+ +
+
+
Offer 1
+
+
+
+ PHPostHog +
+ 91% fit +
+

Software engineer

+

Remote · Full time

+
+ Review offer +
+
+
+ A new chapter is taking shape.
Keep your notes and next steps together. +
+ +
+
+
+
+
+
+

Built for your next move

+ Preparation studio +
+
+ +
+
+ +
+
+
+

Recently in your workspace

+
+ Resume analysis saved for Figma +
+
+ 2 new roles found on your watchlist +
+
+ Frontend resume — v3 uploaded +
+

Sample workspace · design concept 03

+
+
+
+ + +

+

+ + + + + From e52ae02d27646b1008c93aa2c8e3018900d889dd Mon Sep 17 00:00:00 2001 From: Aditya190803 Date: Sat, 3 Oct 2026 12:02:33 +0530 Subject: [PATCH 2/2] feat(ui): adopt the editorial workspace design --- src/app/contact/page.tsx | 233 +++----- src/app/dashboard/analysis/[slug]/page.tsx | 20 +- src/app/dashboard/analysis/page.tsx | 50 +- .../applications/[id]/interview/page.tsx | 22 +- src/app/dashboard/applications/page.tsx | 48 +- .../dashboard/cover-letter/[slug]/page.tsx | 14 +- src/app/dashboard/cover-letter/page.tsx | 57 +- src/app/dashboard/history/page.tsx | 24 +- src/app/dashboard/page.tsx | 561 +++++++++++------- .../dashboard/resume-builder/[slug]/page.tsx | 22 +- src/app/dashboard/resume-builder/new/page.tsx | 2 +- src/app/dashboard/resume-builder/page.tsx | 44 +- .../dashboard/resume-builder/step-2/page.tsx | 40 +- src/app/dashboard/upload/page.tsx | 30 +- src/app/dashboard/watchlist/page.tsx | 46 +- src/app/globals.css | 342 ++++++----- src/app/how-it-works/page.tsx | 62 +- src/app/layout.tsx | 30 +- src/app/not-found.tsx | 25 + src/app/page.tsx | 477 ++++++--------- src/app/privacy/page.tsx | 61 +- src/app/terms/page.tsx | 63 +- src/components/common/EmptyState.tsx | 8 +- src/components/common/LoadingSpinner.tsx | 4 +- src/components/common/StatCard.tsx | 6 +- .../CoverLetterPreferencesPanel.tsx | 2 +- .../cover-letter/CoverLetterResultPanel.tsx | 6 +- .../dashboard/history/HistoryFilterTabs.tsx | 7 +- .../dashboard/upload/ResumeList.tsx | 2 +- src/components/layout/PageHeader.tsx | 25 + src/components/layout/index.tsx | 276 +++++---- src/components/resume/ResumeSelect.tsx | 10 +- src/components/ui/button.tsx | 10 +- src/components/ui/card.tsx | 7 +- src/components/ui/input.tsx | 2 +- src/components/ui/select.tsx | 4 +- src/components/ui/textarea.tsx | 2 +- test/app/dashboard/page.test.tsx | 92 +++ 38 files changed, 1350 insertions(+), 1386 deletions(-) create mode 100644 src/app/not-found.tsx create mode 100644 src/components/layout/PageHeader.tsx create mode 100644 test/app/dashboard/page.test.tsx diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index d376129..94f0eb3 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -1,175 +1,92 @@ -"use client"; - -import { ArrowLeft, Clock, Mail, MessageSquare } from "lucide-react"; -import Image from "next/image"; +import { ArrowRight, Clock, Mail } from "lucide-react"; import Link from "next/link"; -import { Button } from "@/components/ui/button"; +import { PageHeader } from "@/components/layout/PageHeader"; + +const questions = [ + { + question: "Can I build a resume without a PDF?", + answer: + "Yes. Start with career notes, a saved resume, or a previous analysis in Resume Builder. Choose a format, edit the result, and download a PDF.", + }, + { + question: "How do career-site trackers work?", + answer: + "Add a career page in Job Alerts and choose your filters. The first scan records a baseline. Later scans find new roles; email alerts are optional when delivery is configured.", + }, + { + question: "Where can I prepare for an interview?", + answer: + "Open a tracked role in Applications and select Prepare for interview. Generate questions and STAR guidance, then save answer notes with that application.", + }, + { + question: "Can I export my application tracker?", + answer: + "Search or filter your applications, then select Export CSV. The export includes the matching stages, contacts, notes, and follow-up dates.", + }, + { + question: "Can I export cover letters?", + answer: + "You can copy a generated letter or download it as a document from the cover-letter screen. Saved letters are available in History.", + }, + { + question: "Should I review AI suggestions?", + answer: + "Always review generated documents and analysis. Keep only experience and achievements you can support, and make sure the result reflects your own story.", + }, +]; export default function ContactPage() { return ( -
- {/* Header */} -
-
- - ATS logo - ATS - - - - -
-
- - {/* Content */} -
-
-
- - We're Here to Help -
-

- Contact Support -

-

- Need help with a career-site tracker, your resume, an application, or interview - preparation? Check the guide below or get in touch. -

-
- - {/* Contact Cards */} -
-
-
- -
-

Email Support

-

- For general inquiries, technical support, or partnership requests. +

+
+ +
+
+ +

Write to us.

+

+ For questions, technical support, and feedback.

- adityamer.work@gmail.com + adityamer.work@gmail.com ↗
- -
-
- -
-

Response Time

-

- We typically respond to all inquiries within -

-

- 24-48 Hours +

+ +

We’ll get back to you.

+

We typically respond within

+

+ 24–48 hours

-
- - {/* FAQ Section */} -
-
-

Frequently Asked Questions

-
-
-

Can I create a resume without uploading a PDF?

-

- Yes. In Resume Builder, paste your career details or use a saved resume. Choose one - of seven LaTeX formats, review and edit the result, and download a PDF. Add a job - description if you want to tailor it to a role. -

-
-
-

How do career-site trackers work?

-

- In Job Alerts, add a career-page URL and choose role, location, and exclusion - filters. The first scan sets a baseline; later scans find new roles. You can scan - manually and choose email alerts when email delivery is available. -

-
-
-

Where do I prepare for an interview?

-

- Open Applications and select Prepare for interview on a tracked role. Generate - questions from your resume and the job description, then save your answer notes. - They stay with the application; regenerating replaces the questions and clears the - answers after confirmation. -

-
-
-

Can I export my application tracker?

-

- Yes. Search or filter your applications, then select Export CSV to download the - matching records, including stages, contacts, notes, and follow-up dates. -

-
-
-

- How do I delete my account? -

-

- You can delete your account from the settings page. This will permanently remove all - your data. -

-
-
-

Is my resume data secure?

-

- Yes, we use industry-standard encryption and security practices to protect your - data. -

-
-
-

- Can I export my cover letters? -

-

- Yes, you can copy or download any generated cover letter directly from the app. -

-
-
-

- How accurate is the AI analysis? -

-

- Our AI uses advanced models to provide insights, but we recommend human review for - important decisions. -

-
+
+
+

A few quick answers

+

Good questions. Clear next steps.

+
+ {questions.map((item) => ( +
+

{item.question}

+

{item.answer}

+
+ ))}
-
- - Read the full workflow guide → - -
- - {/* Footer */} -
-
-

- © 2026 ATS (Application Tracking System). All rights reserved. -

-
-
+ + Read the full workspace guide + + +
); } diff --git a/src/app/dashboard/analysis/[slug]/page.tsx b/src/app/dashboard/analysis/[slug]/page.tsx index 3c8d5bd..cb0b745 100644 --- a/src/app/dashboard/analysis/[slug]/page.tsx +++ b/src/app/dashboard/analysis/[slug]/page.tsx @@ -269,12 +269,6 @@ export default function AnalysisSlugPage() { fetchAnalysis(); }, [generateAnalysis, slug]); - const getScoreGradient = (score: number) => { - if (score >= 80) return "from-emerald-500 to-emerald-400"; - if (score >= 60) return "from-amber-500 to-orange-400"; - return "from-red-500 to-rose-400"; - }; - const matchedSkills = Array.from(new Set(result?.skillsMatch?.matched || [])).sort((a, b) => a.localeCompare(b), ); @@ -295,7 +289,7 @@ export default function AnalysisSlugPage() { if (isGenerating) { return ( -
+
@@ -386,7 +380,7 @@ export default function AnalysisSlugPage() { } return ( -
+
Back to Analysis -

Resume Analysis

+

Your resume analysis

{item?.resumeName &&

Resume: {item.resumeName}

} {generationMeta && (
@@ -413,9 +407,7 @@ export default function AnalysisSlugPage() {

Match Score

- + {result.matchScore}% match @@ -485,7 +477,7 @@ export default function AnalysisSlugPage() { matchedSkills.map((skill, i) => (
{i + 1} @@ -511,7 +503,7 @@ export default function AnalysisSlugPage() { missingSkills.map((skill, i) => (
{i + 1} diff --git a/src/app/dashboard/analysis/page.tsx b/src/app/dashboard/analysis/page.tsx index 19bcd73..c78cfc2 100644 --- a/src/app/dashboard/analysis/page.tsx +++ b/src/app/dashboard/analysis/page.tsx @@ -5,7 +5,6 @@ import { ArrowRight, Bell, CheckCircle, - Compass, ExternalLink, FileText, Sparkles, @@ -16,6 +15,7 @@ import { useRouter } from "next/navigation"; import { useCallback, useEffect, useMemo, useState } from "react"; import { DraftRestoreBanner } from "@/components/dashboard/analysis/DraftRestoreBanner"; +import { PageHeader } from "@/components/layout/PageHeader"; import { ResumeSelect } from "@/components/resume/ResumeSelect"; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; @@ -235,38 +235,24 @@ export default function AnalysisPage() { }, [jobDescription]); return ( -
-
-
-
-
- -
-
-
- - Match Studio -
-

- Resume analysis -

-

- Paste a role description, compare against your resume, and generate focused - improvements. -

-
+
+
+ - - How it works + Read the guide ↗ -
-
+ } + /> {listing && ( -
+
@@ -302,7 +288,7 @@ export default function AnalysisPage() { {showDraftRestoreHint && !listing && }
-
+
@@ -381,7 +367,7 @@ export default function AnalysisPage() {
); } diff --git a/src/app/dashboard/applications/page.tsx b/src/app/dashboard/applications/page.tsx index 0b11c42..c8e371a 100644 --- a/src/app/dashboard/applications/page.tsx +++ b/src/app/dashboard/applications/page.tsx @@ -7,6 +7,7 @@ import { Suspense, useCallback, useEffect, useMemo, useState } from "react"; import { ApplicationCard } from "@/components/dashboard/applications/ApplicationCard"; import { ApplicationForm } from "@/components/dashboard/applications/ApplicationForm"; +import { PageHeader } from "@/components/layout/PageHeader"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { useToast } from "@/components/ui/toast"; @@ -210,29 +211,23 @@ function ApplicationsTracker() { }; return ( -
+
-
-
-

- - Application tracker -

-

Your next role, in progress

-

- Track each opportunity and follow-up. Open “Prepare for interview” on a role to - generate questions and save answer notes. -

-
- -
+ setForm({ fields: { ...EMPTY_APPLICATION } })} + disabled={importing || loading} + > + + Add application + + } + />
{[ { label: "Active opportunities", value: summary.active }, @@ -240,9 +235,14 @@ function ApplicationsTracker() { { label: "Offers received", value: summary.offers }, { label: "Follow-ups due", value: summary.followUpsDue }, ].map((stat) => ( -
+

{stat.label}

-

{loading ? "…" : error ? "—" : stat.value}

+

+ {loading ? "…" : error ? "—" : stat.value} +

))}
diff --git a/src/app/dashboard/cover-letter/[slug]/page.tsx b/src/app/dashboard/cover-letter/[slug]/page.tsx index 28eebfd..cea5ae6 100644 --- a/src/app/dashboard/cover-letter/[slug]/page.tsx +++ b/src/app/dashboard/cover-letter/[slug]/page.tsx @@ -259,9 +259,9 @@ export default function CoverLetterSlugPage() { if (isGenerating) { return ( -
+
-
+
@@ -357,7 +357,7 @@ export default function CoverLetterSlugPage() { } return ( -
+
Back to Cover Letter -

Cover Letter

+

Your cover letter

{item?.companyName && (

{item.companyName} @@ -376,7 +376,7 @@ export default function CoverLetterSlugPage() { )}

-
+
@@ -460,8 +460,8 @@ export default function CoverLetterSlugPage() {
-
- 
+          

+            
               {coverLetter}
             

           

diff --git a/src/app/dashboard/cover-letter/page.tsx b/src/app/dashboard/cover-letter/page.tsx
index 1000eee..4509411 100644
--- a/src/app/dashboard/cover-letter/page.tsx
+++ b/src/app/dashboard/cover-letter/page.tsx
@@ -1,15 +1,7 @@
 "use client";
 
 import { useUser } from "@stackframe/stack";
-import {
-  AlertCircle,
-  CheckCircle,
-  Clock,
-  Compass,
-  FileText,
-  Loader2,
-  Sparkles,
-} from "lucide-react";
+import { AlertCircle, CheckCircle, FileText, Loader2, Sparkles } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
@@ -23,6 +15,7 @@ import type {
   RecentCoverLetter,
   SearchHistoryItem,
 } from "@/components/dashboard/cover-letter/types";
+import { PageHeader } from "@/components/layout/PageHeader";
 import { ResumeSelect } from "@/components/resume/ResumeSelect";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -314,41 +307,21 @@ export default function CoverLetterPage() {
   };
 
   return (
-    

-      

-        

-        

-      

-
-      

-        

-          

-            
-            Letter Studio
-          

-          

-            Cover letter generator
-          

-          

-            Generate role-specific letters from your resume, job details, and style preferences.
-          

-          

-            
-              
-              How it works
-            
+    

+      

+        
-              
-              Review history
+              Your saved letters ↗
             
-          

-        

+          }
+        />
 
         {showDraftRestoreHint && }
 
@@ -360,7 +333,7 @@ export default function CoverLetterPage() {
         ) : (
           

             

-              

+              

                 

                   

                     
@@ -498,7 +471,7 @@ export default function CoverLetterPage() {