Skip to content

Commit 7605366

Browse files
soorajnrajusoorajnraju
committed
misc
1 parent cec468a commit 7605366

File tree

3 files changed

+63
-71
lines changed

3 files changed

+63
-71
lines changed

‎src/App.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import AdvancedCharts from "./components/AdvancedCharts";
2424
import DataManager from "./components/DataManager";
2525
import RecurringTransactionManager from "./components/RecurringTransactionManager";
2626
import AIAnalysisComponent from "./components/AIAnalysisComponent";
27-
import ValidationDemo from "./components/ValidationDemo";
27+
// import ValidationDemo from "./components/ValidationDemo";
2828
import { AlertProvider } from "./components/AlertSystem";
2929
import { safeParseFloat } from "./utils/validation";
3030

@@ -212,7 +212,7 @@ function App() {
212212
{ id: 'charts', label: 'Analytics', icon: <FaChartLine /> },
213213
{ id: 'ai-analysis', label: 'AI Insights', icon: <FaBrain /> },
214214
{ id: 'data', label: 'Data Management', icon: <FaTrashAlt /> },
215-
{ id: 'validation', label: 'Validation Demo', icon: <FaFlask /> }
215+
// { id: 'validation', label: 'Validation Demo', icon: <FaFlask /> }
216216
];
217217

218218
const allData = {
@@ -288,8 +288,8 @@ function App() {
288288
appVersion="3.0.0"
289289
/>
290290
);
291-
case 'validation':
292-
return <ValidationDemo />;
291+
// case 'validation':
292+
// return <ValidationDemo />;
293293
default:
294294
return <Dashboard insights={insights} currentYear={currentYear} />;
295295
}

‎src/components/AIAnalysisComponent.jsx‎

Lines changed: 43 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -630,60 +630,50 @@ const AIAnalysisComponent = ({
630630
Monthly Average = Net Savings ÷ 12 months = {formatCurrency(analysis.netSavings)} ÷ 12 = {formatCurrency(analysis.monthlyAverage)}
631631
</small>
632632

633-
{/* Manual Override Section */}
634-
<div className="mt-3 border-top p-0 override-container">
635-
<div className="p-3">
636-
<div className="d-flex align-items-center">
637-
<div className="override-switch me-3">
638-
<input
639-
type="checkbox"
640-
id="manualOverrideCheck"
641-
className="switch-checkbox"
642-
checked={useManualOverride}
643-
onChange={(e) => setUseManualOverride(e.target.checked)}
644-
/>
645-
<label htmlFor="manualOverrideCheck" className="switch-label"></label>
646-
</div>
647-
<div>
648-
<h6 className="mb-0 fw-bold text-primary">🎯 Override Monthly Net for Projections</h6>
649-
<small className="text-muted">Use a custom monthly savings amount for future projections</small>
650-
</div>
633+
{/* Manual Override Section - Enhanced Card Layout */}
634+
<div className="mt-4 mb-4 override-container" style={{ background: '#f8fafc', borderRadius: '1rem', boxShadow: '0 2px 8px rgba(0,0,0,0.04)', padding: '2rem 1.5rem' }}>
635+
<div className="d-flex flex-wrap align-items-center justify-content-center gap-4">
636+
{/* Toggle Button */}
637+
<div className="form-check form-switch" style={{ minWidth: '70px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
638+
<input
639+
className="form-check-input"
640+
type="checkbox"
641+
id="manualOverrideCheck"
642+
checked={useManualOverride}
643+
onChange={(e) => setUseManualOverride(e.target.checked)}
644+
style={{ width: '3rem', height: '1.7rem', cursor: 'pointer', border: '2px solid #0d6efd', background: useManualOverride ? '#0d6efd' : '#e9ecef' }}
645+
/>
651646
</div>
652-
</div>
653-
654-
<div className={`custom-amount-container p-3 border-top ${!useManualOverride ? 'opacity-75' : ''}`}>
655-
<div className="row align-items-center">
656-
<div className="col-md-4">
657-
<label className={`fw-bold mb-0 ${!useManualOverride ? 'text-muted' : ''}`}>Custom Monthly Net:</label>
658-
</div>
659-
<div className="col-md-8">
660-
<div className="d-flex align-items-center">
661-
<div className="input-group">
662-
<span className={`input-group-text ${useManualOverride ? '' : 'bg-secondary'}`}>$</span>
663-
<input
664-
type="number"
665-
className="form-control"
666-
placeholder={analysis?.monthlyAverage ? analysis.monthlyAverage.toFixed(2) : '0.00'}
667-
value={manualMonthlyNet}
668-
onChange={(e) => setManualMonthlyNet(e.target.value)}
669-
step="0.01"
670-
disabled={!useManualOverride}
671-
/>
672-
<span className={`input-group-text ${useManualOverride ? '' : 'bg-secondary'}`}>/month</span>
673-
</div>
674-
</div>
675-
<div className="mt-2">
676-
{useManualOverride && manualMonthlyNet ? (
677-
<div className="status-message active">
678-
<span className="status-icon">✓</span> Using custom monthly net: <strong>{formatCurrency(manualMonthlyNet)}</strong>
679-
</div>
680-
) : (
681-
<div className="status-message">
682-
<span className="status-icon">i</span> Currently using calculated average: <strong>{analysis?.monthlyAverage ? formatCurrency(analysis.monthlyAverage) : '$0.00'}</strong>
683-
</div>
684-
)}
685-
</div>
686-
</div>
647+
<div style={{ minWidth: '220px', textAlign: 'center' }}>
648+
<label htmlFor="manualOverrideCheck" className="fw-bold text-primary mb-1" style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
649+
🎯 Override Monthly Net for Projections
650+
</label>
651+
<div className="text-muted" style={{ fontSize: '0.98rem' }}>Use a custom monthly savings amount for future projections</div>
652+
</div>
653+
<div className="input-group" style={{ maxWidth: '240px', minWidth: '180px', alignItems: 'center' }}>
654+
<span className={`input-group-text ${useManualOverride ? '' : 'bg-secondary'}`}>$</span>
655+
<input
656+
type="number"
657+
className="form-control text-center"
658+
placeholder={analysis?.monthlyAverage ? analysis.monthlyAverage.toFixed(2) : '0.00'}
659+
value={manualMonthlyNet}
660+
onChange={(e) => setManualMonthlyNet(e.target.value)}
661+
step="0.01"
662+
disabled={!useManualOverride}
663+
style={{ fontSize: '1.35rem', fontWeight: 500, height: '2.7rem', borderRadius: '0.5rem' }}
664+
/>
665+
<span className={`input-group-text ${useManualOverride ? '' : 'bg-secondary'}`}>/month</span>
666+
</div>
667+
<div style={{ minWidth: '220px', textAlign: 'center' }}>
668+
{useManualOverride && manualMonthlyNet ? (
669+
<span className="status-message active text-success" style={{ fontSize: '1.05rem' }}>
670+
<span className="status-icon">✓</span> Using custom monthly net: <strong>{formatCurrency(manualMonthlyNet)}</strong>
671+
</span>
672+
) : (
673+
<span className="status-message text-muted" style={{ fontSize: '1.05rem' }}>
674+
<span className="status-icon">i</span> Currently using calculated average: <strong>{analysis?.monthlyAverage ? formatCurrency(analysis.monthlyAverage) : '$0.00'}</strong>
675+
</span>
676+
)}
687677
</div>
688678
</div>
689679
</div>

‎src/components/TransactionManager.jsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -429,20 +429,22 @@ const TransactionManager = ({
429429
</td>
430430
<td>
431431
<div className="btn-group btn-group-sm" role="group">
432-
<button
433-
className="btn btn-outline-primary btn-sm"
434-
onClick={() => handleEditTransaction(transaction)}
435-
title="Edit"
436-
>
437-
<FaEdit />
438-
</button>
439-
<button
440-
className="btn btn-outline-danger btn-sm"
441-
onClick={() => handleDeleteTransaction(transaction.id)}
442-
title="Delete"
443-
>
444-
<FaTrash />
445-
</button>
432+
<div className="d-flex justify-content-center align-items-center gap-2">
433+
<button
434+
className="btn btn-outline-primary btn-sm"
435+
onClick={() => handleEditTransaction(transaction)}
436+
title="Edit"
437+
>
438+
<FaEdit />
439+
</button>
440+
<button
441+
className="btn btn-outline-danger btn-sm"
442+
onClick={() => handleDeleteTransaction(transaction.id)}
443+
title="Delete"
444+
>
445+
<FaTrash />
446+
</button>
447+
</div>
446448
</div>
447449
</td>
448450
</tr>

0 commit comments

Comments
 (0)