Skip to content

PHASE2_QUICK_ACTION_PLAN.md

Latest commit

 

History

History
402 lines (319 loc) · 8.33 KB

PHASE2_QUICK_ACTION_PLAN.md

File metadata and controls

402 lines (319 loc) · 8.33 KB
Raw

Phase 2 Quick Action Plan - Apply Premium Components 🎯

Timeline: 2-3 hours
Effort: Medium (repetitive)
Impact: High (entire app feels premium)

🎯 Goal

Apply premium components to all dashboard pages to create a cohesive, professional experience.

📋 Quick Checklist

Step 1: Admin Dashboard (30 min)

# File: src/app/admin/dashboard/page.tsx

# Changes:
1. Import: import { StatCard, PremiumButton, PremiumCard } from '@/components/premium'
2. Replace stat cards with StatCard component
3. Replace buttons with PremiumButton
4. Replace cards with PremiumCard
5. Apply Indigo color scheme
6. Update typography (text-premium-h1, text-premium-h2, etc.)
7. Improve spacing (space-premium-lg)

Step 2: Contract Analyzer (30 min)

# File: src/app/contract-analyzer/page.tsx

# Changes:
1. Import premium components
2. Update file upload card with PremiumCard
3. Replace result cards with PremiumCard
4. Replace buttons with PremiumButton
5. Apply Indigo color scheme
6. Update typography
7. Improve spacing

Step 3: Pricing Page (20 min)

# File: src/app/pricing/page.tsx

# Changes:
1. Import premium components
2. Update pricing cards with PremiumCard
3. Replace buttons with PremiumButton
4. Apply Indigo color scheme
5. Update typography
6. Improve spacing

Step 4: Cases Page (20 min)

# File: src/app/cases/page.tsx

# Changes:
1. Import premium components
2. Update case cards with PremiumCard
3. Replace buttons with PremiumButton
4. Apply Indigo color scheme
5. Update typography
6. Improve spacing

Step 5: Drafts Page (20 min)

# File: src/app/drafts/page.tsx

# Changes:
1. Import premium components
2. Update draft cards with PremiumCard
3. Replace buttons with PremiumButton
4. Apply Indigo color scheme
5. Update typography
6. Improve spacing

Step 6: Summarizer Page (20 min)

# File: src/app/summarizer/page.tsx

# Changes:
1. Import premium components
2. Update summary cards with PremiumCard
3. Replace buttons with PremiumButton
4. Apply Indigo color scheme
5. Update typography
6. Improve spacing

Step 7: Case Tracker Page (20 min)

# File: src/app/case-tracker/page.tsx

# Changes:
1. Import premium components
2. Update tracker cards with PremiumCard
3. Replace buttons with PremiumButton
4. Apply Indigo color scheme
5. Update typography
6. Improve spacing

Step 8: CRM Page (20 min)

# File: src/app/crm/page.tsx

# Changes:
1. Import premium components
2. Update client cards with PremiumCard
3. Replace buttons with PremiumButton
4. Apply Indigo color scheme
5. Update typography
6. Improve spacing

Step 9: News Page (15 min)

# File: src/app/news/page.tsx

# Changes:
1. Import premium components
2. Update news cards with PremiumCard
3. Replace buttons with PremiumButton
4. Apply Indigo color scheme
5. Update typography

Step 10: Acts Page (15 min)

# File: src/app/acts/page.tsx

# Changes:
1. Import premium components
2. Update act cards with PremiumCard
3. Replace buttons with PremiumButton
4. Apply Indigo color scheme
5. Update typography

Step 11: Notices Page (15 min)

# File: src/app/notices/page.tsx

# Changes:
1. Import premium components
2. Update notice cards with PremiumCard
3. Replace buttons with PremiumButton
4. Apply Indigo color scheme
5. Update typography

Step 12: Research Page (15 min)

# File: src/app/research/page.tsx

# Changes:
1. Import premium components
2. Update research cards with PremiumCard
3. Replace buttons with PremiumButton
4. Apply Indigo color scheme
5. Update typography

🔄 Common Pattern

Every page follows the same pattern:

1. Import Components

import { StatCard, PremiumButton, PremiumCard, SkeletonLoader } from '@/components/premium'

2. Replace Stat Cards

// Before
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-4 sm:p-5">
  <p className="text-sm text-gray-500 dark:text-gray-400">Total Queries</p>
  <p className="text-2xl font-bold text-gray-900 dark:text-white">1,247</p>
</div>

// After
<StatCard
  label="Total Queries"
  value={1247}
  icon={<BarChart3 className="h-5 w-5" />}
  color="indigo"
  trend={{ value: 12, isPositive: true }}
/>

3. Replace Buttons

// Before
<button className="inline-flex items-center gap-2 px-4 sm:px-5 py-2.5 bg-gray-900 dark:bg-white hover:bg-gray-800 dark:hover:bg-gray-100 text-white dark:text-gray-900 font-medium rounded-xl transition-colors text-sm sm:text-base">
  <Plus className="h-4 w-4" />
  Add New
</button>

// After
<PremiumButton size="lg">
  <Plus className="h-4 w-4" />
  Add New
</PremiumButton>

4. Replace Cards

// Before
<div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-4 sm:p-5">
  <h3 className="font-semibold text-gray-900 dark:text-white">Title</h3>
  {/* Content */}
</div>

// After
<PremiumCard title="Title" hoverable>
  {/* Content */}
</PremiumCard>

5. Update Typography

// Before
<h1 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">Title</h1>

// After
<h1 className="text-premium-h1 text-slate-900 dark:text-white">Title</h1>

6. Update Spacing

// Before
<div className="space-y-6 sm:space-y-8">

// After
<div className="space-y-8">

⚡ Speed Tips

  1. Use Find & Replace in VS Code

    • Find: bg-gray-900 dark:bg-white
    • Replace: (use PremiumButton instead)

  2. Copy-Paste Pattern from dashboard.tsx

    • Already has all the patterns
    • Just adapt to each page

  3. Test as You Go

    • After each page, run npm run dev
    • Check it looks good
    • Move to next page

  4. Batch Similar Pages

    • Do all "card" pages together
    • Do all "list" pages together
    • Do all "form" pages together

🧪 Testing Each Page

After updating each page:

# 1. Run dev server
npm run dev

# 2. Navigate to page
# http://localhost:3000/page-name

# 3. Check:
- [ ] Page loads without errors
- [ ] Dark mode works
- [ ] Mobile responsive
- [ ] Hover states work
- [ ] No console errors

# 4. If all good, move to next page

📊 Progress Tracking

Admin Dashboard      ⏳ TODO
Contract Analyzer   ⏳ TODO
Pricing Page        ⏳ TODO
Cases Page          ⏳ TODO
Drafts Page         ⏳ TODO
Summarizer Page     ⏳ TODO
Case Tracker Page   ⏳ TODO
CRM Page            ⏳ TODO
News Page           ⏳ TODO
Acts Page           ⏳ TODO
Notices Page        ⏳ TODO
Research Page       ⏳ TODO
─────────────────────────────
Total: 12 pages
Time: 2-3 hours

🚀 After Phase 2

Testing (30 min)

  • All pages load
  • Dark mode works
  • Mobile responsive
  • No console errors
  • Build passes

Deployment (10 min)

git add .
git commit -m "Apply premium components to all pages"
git push origin main
# Vercel auto-deploys

Verification (10 min)

💡 Pro Tips

  1. Keep Components Consistent

    • Use same color scheme everywhere
    • Use same spacing everywhere
    • Use same typography everywhere

  2. Don't Over-Engineer

    • Keep it simple
    • Use existing patterns
    • Don't add new features

  3. Test Frequently

    • After each page
    • Check dark mode
    • Check mobile
    • Check console

  4. Commit Often

    • After each page
    • Makes it easy to revert
    • Easier to track changes

🎯 Success Criteria

✅ All pages use premium components
✅ Consistent Indigo color scheme
✅ Proper typography hierarchy
✅ 24-32px spacing between sections
✅ Hover elevation effects
✅ Dark mode support
✅ Mobile responsive
✅ No console errors
✅ Build passing
✅ All features working

📞 Need Help?

  • Quick Reference: PREMIUM_COMPONENTS_QUICK_REFERENCE.md
  • Implementation Guide: PREMIUM_COMPONENTS_IMPLEMENTATION.md
  • Visual Guide: COMPONENT_LIBRARY_VISUAL_GUIDE.md
  • Example: src/app/dashboard/page.tsx

🎉 Summary

Phase 2 is straightforward:

  1. Apply same pattern to 12 pages
  2. Takes 2-3 hours
  3. Transforms entire app
  4. High impact on user experience

Let's make LAW.AI look premium! 🚀

Last Updated: February 20, 2026