Feat/analytics overhaul

src/app/accounts/page.tsx

@@ -442,7 +442,7 @@ export default function AccountsPage() {
                     <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                       <button
                         className="btn-ghost"
-                        onClick={() => openTransactionModal('transfer', undefined)}
+                        onClick={() => openTransactionModal('transfer', card.id)}
                         title="Pay credit card bill"
                         style={{ fontSize: '0.75rem', color: 'var(--brand-primary)', fontWeight: 600 }}
                       >

src/app/api/transfers/route.ts

@@ -25,6 +25,7 @@ export async function POST(req: Request) {
       date: body.date,
       destinationAccountId: body.toAccountId,
       notes: body.notes,
+      tags: body.tags,
     });
 
     return NextResponse.json({ transfer: result }, { status: 201 });

src/app/loans/page.tsx

@@ -445,9 +445,9 @@ export default function LoansPage() {
                   </div>
                   <div>
                     <div style={{ fontSize: '0.72rem', fontWeight: 600, color: 'var(--text-muted)', letterSpacing: '0.04em' }}>
-                      {isEmi ? 'REMAINING BALANCE' : 'OUTSTANDING PRINCIPAL'}
+                      {isEmi ? 'REMAINING BALANCE' : 'OUTSTANDING BALANCE'}
                     </div>
-                    <MoneyDisplay amount={loan.outstanding_principal} size="lg" weight="bold" colored />
+                    <MoneyDisplay amount={loan.remainingBalance ?? loan.outstanding_principal} size="lg" weight="bold" colored />
                   </div>
                   <div>
                     <div style={{ fontSize: '0.72rem', fontWeight: 600, color: 'var(--text-muted)', letterSpacing: '0.04em' }}>
@@ -469,8 +469,8 @@ export default function LoansPage() {
                 <div>
                   <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.75rem', marginBottom: '0.25rem' }}>
                     <span>
-                      Principal Repaid: ₹{Math.round(loan.paidPrincipal / 100).toLocaleString('en-IN')} of ₹
-                      {Math.round(loan.principal / 100).toLocaleString('en-IN')}
+                      Repaid: ₹{Math.round((loan.totalPaid ?? loan.paidPrincipal) / 100).toLocaleString('en-IN')} of ₹
+                      {Math.round((loan.totalPayable ?? loan.principal) / 100).toLocaleString('en-IN')}
                     </span>
                     <span style={{ fontWeight: 600, color: 'var(--color-income)' }}>{loan.progressPercent}% Completed</span>
                   </div>
@@ -517,8 +517,8 @@ export default function LoansPage() {
                               <td style={{ padding: '0.4rem 0.75rem', textAlign: 'right', color: 'var(--color-expense)' }}>
                                 ₹{Math.round(row.interestComponent / 100).toLocaleString('en-IN')}
                               </td>
-                              <td style={{ padding: '0.4rem 0.75rem', textAlign: 'right' }}>
-                                ₹{Math.round(row.remainingPrincipal / 100).toLocaleString('en-IN')}
+                              <td style={{ padding: '0.4rem 0.75rem', textAlign: 'right', fontWeight: 600 }}>
+                                ₹{Math.round((row.remainingBalance ?? row.remainingPrincipal) / 100).toLocaleString('en-IN')}
                               </td>
                             </tr>
                           ))}

src/app/reports/page.tsx

@@ -356,7 +356,7 @@ function ExpenseDonutChart({
           letterSpacing="0.04em"
           style={{ textTransform: 'uppercase' }}
         >
-          {activeSlice ? (activeSlice.name.length > 14 ? activeSlice.name.substring(0, 12) + '…' : activeSlice.name) : 'TOTAL SPENT'}
+          {activeSlice ? (activeSlice.name.length > 14 ? activeSlice.name.substring(0, 12) + '…' : activeSlice.name) : (analyticsLabel === 'Tag' ? 'TOTAL TAGGED' : 'TOTAL SPENT')}
         </text>
 
         <text
@@ -378,7 +378,7 @@ function ExpenseDonutChart({
           fontSize="11"
           fontWeight="600"
         >
-          {activeSlice ? `${activeSlice.percentage}% of total` : `${slices.length} ${analyticsLabel.toLowerCase()}s`}
+          {activeSlice ? `${activeSlice.percentage}% of ${analyticsLabel === 'Tag' ? 'tagged' : 'total'}` : `${slices.length} ${analyticsLabel.toLowerCase()}s`}
         </text>
       </svg>
     </div>
@@ -493,7 +493,9 @@ export default function ReportsPage() {
   const savingsRate = totalMonthIncome > 0 ? Math.round(((totalMonthIncome - totalMonthSpend) / totalMonthIncome) * 100) : 0;
 
   // Active analytics data based on view mode
+  const totalTaggedSpend = useMemo(() => spendingByTag.reduce((acc: number, t: any) => acc + (t.total || 0), 0), [spendingByTag]);
   const activeAnalytics = analyticsView === 'category' ? spendingByCategory : spendingByTag;
+  const activeAnalyticsTotal = analyticsView === 'category' ? totalMonthSpend : totalTaggedSpend;
   const analyticsLabel = analyticsView === 'category' ? 'Category' : 'Tag';
 
   return (
@@ -1101,7 +1103,7 @@ export default function ReportsPage() {
                 >
                   <ExpenseDonutChart
                     items={activeAnalytics}
-                    totalSpend={totalMonthSpend}
+                    totalSpend={activeAnalyticsTotal}
                     analyticsLabel={analyticsLabel}
                     hoveredId={hoveredAnalyticsId}
                     onHover={setHoveredAnalyticsId}
@@ -1156,7 +1158,7 @@ export default function ReportsPage() {
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.25rem', padding: '0.5rem 0' }}>
                   <ExpenseDonutChart
                     items={activeAnalytics}
-                    totalSpend={totalMonthSpend}
+                    totalSpend={activeAnalyticsTotal}
                     analyticsLabel={analyticsLabel}
                     hoveredId={hoveredAnalyticsId}
                     onHover={setHoveredAnalyticsId}

src/components/TransactionModal.tsx

@@ -233,13 +233,28 @@ export const TransactionModal = () => {
             setAccounts(d.accounts);
             if (!editingTransaction) {
               if (preselectedAccountId) {
-                setAccountId(preselectedAccountId);
+                const preselectedAcc = d.accounts.find((a: any) => a.id === preselectedAccountId);
+                if (preselectedAcc && preselectedAcc.type === 'credit_card' && transactionModalType === 'transfer') {
+                  const defaultBank = d.accounts.find((a: any) => a.id !== preselectedAcc.id && a.type !== 'credit_card') || d.accounts.find((a: any) => a.id !== preselectedAcc.id);
+                  if (defaultBank) setAccountId(defaultBank.id);
+                  setDestinationAccountId(preselectedAcc.id);
+                  setSelectedTags(prev => prev.some(t => t.name.toLowerCase() === 'cc-repayment') ? prev : [...prev, { id: 'cc-repayment', name: 'cc-repayment', color: '#3B82F6' }]);
+                } else {
+                  setAccountId(preselectedAccountId);
+                  const otherAcc = d.accounts.find((a: any) => a.id !== preselectedAccountId);
+                  if (otherAcc) setDestinationAccountId(otherAcc.id);
+                }
               } else {
                 const defaultAcc = d.accounts.find((a: any) => Boolean(a.is_default)) || d.accounts[0];
                 if (defaultAcc) {
                   setAccountId(defaultAcc.id);
                   const otherAcc = d.accounts.find((a: any) => a.id !== defaultAcc.id);
-                  if (otherAcc) setDestinationAccountId(otherAcc.id);
+                  if (otherAcc) {
+                    setDestinationAccountId(otherAcc.id);
+                    if (otherAcc.type === 'credit_card' && transactionModalType === 'transfer') {
+                      setSelectedTags(prev => prev.some(t => t.name.toLowerCase() === 'cc-repayment') ? prev : [...prev, { id: 'cc-repayment', name: 'cc-repayment', color: '#3B82F6' }]);
+                    }
+                  }
                 }
               }
             }
@@ -517,6 +532,7 @@ export const TransactionModal = () => {
             amount: minorAmount,
             date,
             notes,
+            tags: selectedTags.map(t => t.name),
           }),
         });
         const data = await res.json();
@@ -1006,7 +1022,14 @@ export const TransactionModal = () => {
                 <select
                   className="form-select"
                   value={destinationAccountId}
-                  onChange={e => setDestinationAccountId(e.target.value)}
+                  onChange={e => {
+                    const newDestId = e.target.value;
+                    setDestinationAccountId(newDestId);
+                    const destAcc = accounts.find(a => a.id === newDestId);
+                    if (destAcc && destAcc.type === 'credit_card') {
+                      setSelectedTags(prev => prev.some(t => t.name.toLowerCase() === 'cc-repayment') ? prev : [...prev, { id: 'cc-repayment', name: 'cc-repayment', color: '#3B82F6' }]);
+                    }
+                  }}
                 >
                   {accounts.map(acc => {
                     const bal = acc.isLiability ? (acc.totalDebt ?? acc.current_balance) : acc.current_balance;

src/lib/db.ts

@@ -481,6 +481,24 @@ export function initSchema(db: DatabaseSync) {
   try {
     db.exec(`UPDATE users SET owner_email = email WHERE owner_email IS NULL OR owner_email = ''`);
     db.exec(`CREATE INDEX IF NOT EXISTS idx_users_owner_email ON users(owner_email)`);
+
+    // Ensure cc-repayment tag exists for users who have credit cards
+    db.exec(`
+      INSERT OR IGNORE INTO tags (id, user_id, name, color)
+      SELECT DISTINCT 'tag_' || a.user_id || '_ccrepayment', a.user_id, 'cc-repayment', '#3B82F6'
+      FROM accounts a
+      WHERE a.type = 'credit_card';
+    `);
+
+    // Backfill cc-repayment tag link on credit card transfers
+    db.exec(`
+      INSERT OR IGNORE INTO transaction_tags (transaction_id, tag_id)
+      SELECT t.id, tg.id
+      FROM transactions t
+      JOIN accounts a ON a.id = COALESCE(t.destination_account_id, t.transfer_peer_account_id)
+      JOIN tags tg ON tg.user_id = t.user_id AND LOWER(tg.name) = 'cc-repayment'
+      WHERE t.type = 'transfer' AND a.type = 'credit_card';
+    `);
   } catch {
     // Ignore
   }