From a667574d50a7f91202f739151c295a94829eef2b Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Sun, 12 Oct 2025 22:31:03 +0000
Subject: [PATCH] feat: add subscription section to settings page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added subscription management section to user settings page:

Changes:
- Added "Subscription & Usage" card to settings page
- Embedded UsageDisplay component (compact mode)
- Added "Manage Plan" button linking to /[locale]/subscription
- Added "View Subscription Details" text button
- Imported CardMembership icon for visual consistency

User Experience:
- Users can now view their subscription status directly in settings
- Shows tier badge (Free/Premium)
- Displays usage progress bar for free users
- Shows remaining conversations and reset date
- Quick access to full subscription management page

Location: app/[locale]/settings/page.tsx:253-289

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/[locale]/settings/page.tsx | 43 +++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/app/[locale]/settings/page.tsx b/app/[locale]/settings/page.tsx
index fedf74d..6f7affd 100644
--- a/app/[locale]/settings/page.tsx
+++ b/app/[locale]/settings/page.tsx
@@ -30,8 +30,11 @@ import {
   Notifications,
   Security,
   Save,
-  MenuBook
+  MenuBook,
+  CardMembership
 } from '@mui/icons-material'
+import UsageDisplay from '@/components/subscription/usage-display'
+import Link from 'next/link'
 
 export default function SettingsPage() {
   const { user } = useAuth()
@@ -247,6 +250,44 @@ export default function SettingsPage() {
               </Card>
             </Box>
 
+            {/* Subscription & Usage */}
+            <Box sx={{ flex: '1 1 100%' }}>
+              <Card variant="outlined">
+                <CardContent>
+                  <Box display="flex" alignItems="center" justifyContent="space-between" mb={3}>
+                    <Box display="flex" alignItems="center">
+                      <CardMembership sx={{ mr: 1, color: 'primary.main' }} />
+                      <Typography variant="h6">
+                        Subscription & Usage
+                      </Typography>
+                    </Box>
+                    <Button
+                      variant="outlined"
+                      size="small"
+                      component={Link}
+                      href={`/${locale}/subscription`}
+                    >
+                      Manage Plan
+                    </Button>
+                  </Box>
+
+                  <UsageDisplay compact={true} showUpgradeButton={false} />
+
+                  <Box mt={2}>
+                    <Button
+                      variant="text"
+                      size="small"
+                      component={Link}
+                      href={`/${locale}/subscription`}
+                      fullWidth
+                    >
+                      View Subscription Details
+                    </Button>
+                  </Box>
+                </CardContent>
+              </Card>
+            </Box>
+
             {/* Bible Preferences */}
             <Box sx={{ flex: '1 1 100%' }}>
               <Card variant="outlined">