Color-Coded Status Cards and Quick Link Icons: Making AdminStack Dashboards Pop
Just wrapped up a solid session enhancing AdminStack's dashboard experience, and I'm pretty stoked about how these visual improvements turned out.
Status Cards That Actually Make Sense
One thing that always bugged me was having to dig through project lists to understand what's happening across an organization. So I built out a proper project status breakdown with color-coded cards.
Now the dashboard shows Active, Planning, Paused, Completed, Archived, and Client project counts in a clean 6-column grid. Each card has its own color scheme (using precise hex colors instead of Tailwind classes for that perfect look) and hover effects that feel responsive.
The best part? Each card is clickable and takes you straight to a filtered project view. Want to see all your paused projects? One click and you're there. The cards only show up when you actually have projects too, so new orgs don't see empty states cluttering their dashboard.
Quick Access Where It Matters
I also tackled something that seems small but makes a huge difference in daily workflow - quick access to project URLs right from the project list.
Instead of having to click into each project to find staging links or GitHub repos, I added inline icon shortcuts below each project description. The system automatically maps URL keys to the right icons:
- Live/production/staging sites get a globe icon
- Railway deployments get a server stack icon
- Netlify deployments get a cloud icon
- GitHub/repo links get a code bracket icon
All with hover effects and proper external link behavior. Used stopPropagation on the clicks so you can hit these quick links without accidentally navigating into the project row.
Dashboard Header Polish
Rounded out the session by cleaning up the dashboard header. Added a "View Site" button that links directly to the org's live URL, positioned right next to the existing Upgrade button. Small touches like this make the whole experience feel more cohesive.
The Vibe
This is exactly the kind of session I love - focused improvements that make the product feel more polished without getting bogged down in complex features. Everything committed cleanly to main, build passes, and the visual hierarchy just feels better now.
AdminStack's dashboard is starting to feel like a proper command center rather than just a list of stuff. Next session I'm thinking about diving into some performance optimizations, but for now, these UX wins are exactly what the product needed.