refactor: extract reusable ui primitives and standardize dashboard components

[ArshVermaGit]

Overview

This PR addresses significant markup bloat across our src/components/ directory. By extracting common structural elements (Buttons, Cards, Badges, Skeletons) into centralized, reusable primitives, we drastically reduce inline Tailwind CSS duplication. This makes future design changes vastly easier to maintain globally and significantly improves component readability.

Resolved Issue

Resolves #1558

Changes Made

• Tooling Integration: Added clsx, tailwind-merge, and class-variance-authority to power dynamic and conflict-free class resolution in a new cn() utility function (src/lib/utils.ts).
• Standard Primitives: Created foundational UI components located in src/components/ui/:
  • <Button />: Standardized semantic variants (default, outline, ghost, destructive) and sizing (sm, lg, icon).
  • <Card /> Group: Abstracted the standard dashboard container styling (rounded-xl border bg-[var(--card)] p-6).
  • <Badge />: Centralized metric flag styling (success, destructive, outline, etc.).
  • <Skeleton />: Centralized the shimmer loader component.
• Component Refactoring: Modernized three highly visible dashboard components to utilize the new primitives:
  • ProjectMetrics.tsx
  • CodingActivityInsightsCard.tsx
  • WeeklySummaryCard.tsx

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• UI/UX Improvement
• Code Refactoring / Technical Debt Reduction

How Has This Been Tested?

• Verified zero layout jumping or padding changes on the refactored components; they visually match the previous implementation exactly.
• Verified interactive elements (Refresh, Connect Jira, Collapse buttons) function correctly when wrapped in the new <Button> component.
• Ran npm run build and verified the project compiles successfully with no missing module or type errors.

[vercel]

@ArshVermaGit is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[ArshVermaGit]

Hi @Priyanshu-byte-coder ! Issue #1558 has been resolved. Please review the PR and merge it under GSSoC. Thanks!

[Priyanshu-byte-coder]

This PR now has merge conflicts with main due to recent merges. Please rebase onto the latest main branch and resolve conflicts before we can merge.

[Priyanshu-byte-coder]

This PR now has merge conflicts with main. Please rebase your branch against the latest main and force-push to resolve. Run: git fetch upstream && git rebase upstream/main

[ArshVermaGit]

@Priyanshu-byte-coder merge conflicts are resolved please review and merge

[Priyanshu-byte-coder]

This PR has merge conflicts with the current main branch. Please rebase your branch onto main, resolve the conflicts, and force-push. Once conflicts are resolved and the PR is marked as mergeable it will be reviewed for merging.

[gitguardian]

⚠️ GitGuardian has uncovered 3 secrets following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard.
Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard.

🔎 Detected hardcoded secrets in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
33523564	Triggered	Generic High Entropy Secret	c5b7bfe	.env.example	View secret
33523565	Triggered	Supabase Service Role JWT	c5b7bfe	.env.example	View secret
33523566	Triggered	JSON Web Token	c5b7bfe	.env.example	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secrets safely. Learn here the best practices.
3. Revoke and rotate these secrets.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

[Priyanshu-byte-coder]

This PR has developed merge conflicts after recent merges to main. Please rebase onto the latest main branch, resolve all conflicts, and force-push. Once the PR is conflict-free it will be reviewed for merging.

[github-actions]

🎉 Merged! Thanks for contributing to DevTrack.

If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers.

Keep an eye on open issues for your next contribution!