Build a dark-theme dashboard page called “Projects”. Use React with shadcn/ui + Tailwind. Do NOT add custom colours; rely on the default dark palette.
Layout
Sidebar (icons only) on the left, header bar with “Uploader” and “Support” on the right – mimic the structure in the screenshot.
Main area: a searchable DataTable that fills the width.
Columns:Project, Profile, Progression, Photos, Date, Cloud, Delivery/Quick Actions.
Row design
Inside the Progression cell place a horizontal AutoLayout of 6 pill components: Cull, Review Cull, Edit, Review Edit, AI Retouch, Social.
Pills have 4 variants → completed / next / pending / optional (use primary-500 filled, primary-500 outline, zinc-600 outline, zinc-800 outline).
After the pills show a subtle ... icon. Clicking it → opens a modal titled “Customise Workflow” with toggle chips for each step (Boolean state; “Save” closes and updates the row).
On row hover hide the kebab and instead reveal four icon buttons (eye-open, upload-cloud, magic-wand, share-2 from lucide-react).
Eye = Preview
Upload = Upload final edits
Wand = AI Retouch
Share = Social Pack
Toast
Add a “Download” button in a dummy Edit page. When clicked → navigate back to the dashboard and fire a bottom-right shadcn Toast: “Nice! Want to polish skin & teeth? Try AI Final Touches →”.
Sample data (seed 6 rows)
Imagen / Natural Home adj… / cull:complete, reviewCull:pending, edit:pending / 3 photos / 12 May 2025
Lightroom Catalog / Natural Home adj… / cull:complete, reviewCull:complete, edit:next / 621 photos / 11 May 2025
6_Party 31056 / Natural Home adj… / cull:complete, reviewCull:complete, edit:complete, reviewEdit:next / 62 photos / 6 May 2025
Noa’s collection 79820 / Noga / all steps pending / 3 photos / 17 Feb 2025
Denoise2 77555 / Natural Feels / all steps pending / 4 photos / 16 Feb 2025
Nadav Rotem AI / JPEG new / cull:complete, reviewCull:pending, edit:pending / 3 781 photos / 16 Feb 2025
Component breakdown to generate
<WorkflowPill> (variants)
<ProgressionStrip> (maps project state → pills)
<QuickActionRow> (visible on hover)
<CustomiseWorkflowModal> <ToastDemo>Interactions to wire
Clicking a pill navigates to a placeholder page (use Next.js routes e.g. /edit/[id]).
The toast appears only once per session (simple state flag).
Modal toggles hide/show the corresponding pill (optional pills rendered with the “optional” variant).
Loading...
Loading...
- I don't see the Pill variants (can you make it more visible in the UI?)
- Do you think the user will really customize the workflow step per each project? can we think of other solution?
- Clicking on a pill should be availble only for projects in the relevant states (should be reflected somehow in the design, for example, I can only Review edit after I edited etc.)
- For when the main CTA is replaced with icon - can you add tooltip? currently their display does not allow me to click on the main CTA