diff --git a/app/auth/auth.css b/app/auth/auth.css
new file mode 100644
index 00000000..0b2f892d
--- /dev/null
+++ b/app/auth/auth.css
@@ -0,0 +1,397 @@
+/* Modern Auth Pages Styling */
+.auth-container {
+ min-height: 100vh;
+ display: flex;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ position: relative;
+ overflow: hidden;
+}
+
+/* Animated Background */
+.auth-container::before {
+ content: '';
+ position: absolute;
+ width: 500px;
+ height: 500px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 50%;
+ top: -250px;
+ right: -250px;
+ animation: float 6s ease-in-out infinite;
+}
+
+.auth-container::after {
+ content: '';
+ position: absolute;
+ width: 400px;
+ height: 400px;
+ background: rgba(255, 255, 255, 0.08);
+ border-radius: 50%;
+ bottom: -200px;
+ left: -200px;
+ animation: float 8s ease-in-out infinite reverse;
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translateY(0) scale(1);
+ }
+ 50% {
+ transform: translateY(-20px) scale(1.05);
+ }
+}
+
+/* Left Side - Branding */
+.auth-left {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 3rem;
+ position: relative;
+ z-index: 1;
+}
+
+.auth-branding {
+ text-align: center;
+ color: white;
+}
+
+.auth-logo {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ animation: bounce 2s ease-in-out infinite;
+}
+
+@keyframes bounce {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+}
+
+.auth-brand-title {
+ font-size: 3rem;
+ font-weight: 800;
+ margin: 0 0 1rem 0;
+ background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.auth-brand-subtitle {
+ font-size: 1.2rem;
+ opacity: 0.9;
+ font-weight: 300;
+ margin: 0;
+}
+
+.auth-features {
+ margin-top: 3rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.auth-feature {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+ padding: 1rem 1.5rem;
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+}
+
+.auth-feature:hover {
+ background: rgba(255, 255, 255, 0.15);
+ transform: translateX(10px);
+}
+
+.auth-feature-icon {
+ font-size: 2rem;
+}
+
+.auth-feature-text {
+ font-size: 1rem;
+ color: white;
+ margin: 0;
+}
+
+/* Right Side - Form */
+.auth-right {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2rem;
+ position: relative;
+ z-index: 1;
+}
+
+.auth-form-container {
+ width: 100%;
+ max-width: 450px;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(20px);
+ border-radius: 24px;
+ padding: 3rem;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+ animation: slideIn 0.5s ease-out;
+}
+
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.auth-form-header {
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+.auth-form-title {
+ font-size: 2rem;
+ font-weight: 700;
+ color: #333;
+ margin: 0 0 0.5rem 0;
+}
+
+.auth-form-subtitle {
+ font-size: 0.95rem;
+ color: #666;
+ margin: 0;
+}
+
+.auth-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.auth-input-group {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.auth-label {
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: #444;
+ margin-left: 0.25rem;
+}
+
+.auth-input-wrapper {
+ position: relative;
+}
+
+.auth-input {
+ width: 100%;
+ padding: 0.875rem 1rem;
+ font-size: 1rem;
+ border: 2px solid #e0e0e0;
+ border-radius: 12px;
+ outline: none;
+ transition: all 0.3s ease;
+ background: white;
+ box-sizing: border-box;
+}
+
+.auth-input:focus {
+ border-color: #667eea;
+ box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+}
+
+.auth-input::placeholder {
+ color: #999;
+}
+
+.auth-error {
+ background: #fee;
+ color: #c33;
+ padding: 0.875rem 1rem;
+ border-radius: 12px;
+ font-size: 0.9rem;
+ border-left: 4px solid #c33;
+ animation: shake 0.3s ease;
+}
+
+@keyframes shake {
+ 0%, 100% { transform: translateX(0); }
+ 25% { transform: translateX(-10px); }
+ 75% { transform: translateX(10px); }
+}
+
+.auth-submit-btn {
+ width: 100%;
+ padding: 1rem;
+ font-size: 1.05rem;
+ font-weight: 600;
+ color: white;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border: none;
+ border-radius: 12px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+ position: relative;
+ overflow: hidden;
+}
+
+.auth-submit-btn::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+ transition: left 0.5s ease;
+}
+
+.auth-submit-btn:hover::before {
+ left: 100%;
+}
+
+.auth-submit-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
+}
+
+.auth-submit-btn:active {
+ transform: translateY(0);
+}
+
+.auth-submit-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ transform: none;
+}
+
+.auth-divider {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin: 1.5rem 0;
+}
+
+.auth-divider-line {
+ flex: 1;
+ height: 1px;
+ background: #e0e0e0;
+}
+
+.auth-divider-text {
+ color: #999;
+ font-size: 0.85rem;
+ font-weight: 500;
+}
+
+.auth-footer {
+ text-align: center;
+ margin-top: 1.5rem;
+ font-size: 0.95rem;
+ color: #666;
+}
+
+.auth-link {
+ color: #667eea;
+ font-weight: 600;
+ text-decoration: none;
+ transition: all 0.3s ease;
+}
+
+.auth-link:hover {
+ color: #764ba2;
+ text-decoration: underline;
+}
+
+/* Password Strength Indicator */
+.password-strength {
+ display: flex;
+ gap: 0.25rem;
+ margin-top: 0.5rem;
+}
+
+.strength-bar {
+ flex: 1;
+ height: 4px;
+ background: #e0e0e0;
+ border-radius: 2px;
+ transition: all 0.3s ease;
+}
+
+.strength-bar.active {
+ background: #667eea;
+}
+
+.strength-bar.weak {
+ background: #f44336;
+}
+
+.strength-bar.medium {
+ background: #ff9800;
+}
+
+.strength-bar.strong {
+ background: #4caf50;
+}
+
+/* Responsive Design */
+@media (max-width: 968px) {
+ .auth-container {
+ flex-direction: column;
+ }
+
+ .auth-left {
+ padding: 2rem;
+ min-height: 40vh;
+ }
+
+ .auth-brand-title {
+ font-size: 2rem;
+ }
+
+ .auth-features {
+ display: none;
+ }
+
+ .auth-right {
+ padding: 1rem;
+ }
+
+ .auth-form-container {
+ padding: 2rem 1.5rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .auth-form-container {
+ padding: 1.5rem 1rem;
+ }
+
+ .auth-form-title {
+ font-size: 1.5rem;
+ }
+
+ .auth-brand-title {
+ font-size: 1.75rem;
+ }
+
+ .auth-logo {
+ font-size: 3rem;
+ }
+}
diff --git a/app/auth/login/page.jsx b/app/auth/login/page.jsx
new file mode 100644
index 00000000..67ad6c7a
--- /dev/null
+++ b/app/auth/login/page.jsx
@@ -0,0 +1,119 @@
+"use client";
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/src/contexts/AuthContext';
+import '../auth.css';
+
+export default function LoginPage() {
+ const { login, isAuthenticated } = useAuth();
+ const router = useRouter();
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ const onSubmit = async (e) => {
+ e.preventDefault();
+ setError('');
+ setLoading(true);
+ const res = await login({ email, password });
+ setLoading(false);
+ if (res.success) {
+ router.push('/dashboard');
+ } else {
+ setError(res.message || 'Login failed');
+ }
+ };
+
+ if (isAuthenticated) {
+ router.replace('/dashboard');
+ return null;
+ }
+
+ return (
+
+ {/* Left Side - Branding */}
+
+
+
💰
+
PocketPal
+
Your Smart Financial Companion
+
+
+
+
+
📊
+
Track expenses effortlessly
+
+
+
💡
+
Get personalized saving tips
+
+
+
🎯
+
Achieve your financial goals
+
+
+
+
+ {/* Right Side - Form */}
+
+
+
+
Welcome Back!
+
Sign in to continue to your account
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/auth/register/page.jsx b/app/auth/register/page.jsx
new file mode 100644
index 00000000..5432ff4f
--- /dev/null
+++ b/app/auth/register/page.jsx
@@ -0,0 +1,134 @@
+"use client";
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/src/contexts/AuthContext';
+import '../auth.css';
+
+export default function RegisterPage() {
+ const { register, isAuthenticated } = useAuth();
+ const router = useRouter();
+ const [name, setName] = useState('');
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ const onSubmit = async (e) => {
+ e.preventDefault();
+ setError('');
+ setLoading(true);
+ const res = await register({ name, email, password });
+ setLoading(false);
+ if (res.success) {
+ router.push('/dashboard');
+ } else {
+ setError(res.message || 'Registration failed');
+ }
+ };
+
+ if (isAuthenticated) {
+ router.replace('/dashboard');
+ return null;
+ }
+
+ return (
+
+ {/* Left Side - Branding */}
+
+
+
💰
+
PocketPal
+
Your Smart Financial Companion
+
+
+
+
+
📊
+
Track expenses effortlessly
+
+
+
💡
+
Get personalized saving tips
+
+
+
🎯
+
Achieve your financial goals
+
+
+
+
+ {/* Right Side - Form */}
+
+
+
+
Create Account
+
Join PocketPal and start managing your finances
+
+
+
+
+
+ Already have an account?{' '}
+
Sign in
+
+
+
+
+ );
+}
diff --git a/app/dashboard/dashboard.css b/app/dashboard/dashboard.css
new file mode 100644
index 00000000..abb53b75
--- /dev/null
+++ b/app/dashboard/dashboard.css
@@ -0,0 +1,473 @@
+.dashboard-container {
+ min-height: 100vh;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+ position: relative;
+ overflow-x: hidden;
+}
+
+/* Animated Background Elements */
+.dashboard-container::before {
+ content: '';
+ position: fixed;
+ width: 600px;
+ height: 600px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 50%;
+ top: -300px;
+ right: -300px;
+ animation: float 8s ease-in-out infinite;
+ z-index: 0;
+}
+
+.dashboard-container::after {
+ content: '';
+ position: fixed;
+ width: 500px;
+ height: 500px;
+ background: rgba(255, 255, 255, 0.03);
+ border-radius: 50%;
+ bottom: -250px;
+ left: -250px;
+ animation: float 10s ease-in-out infinite reverse;
+ z-index: 0;
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translateY(0) scale(1);
+ }
+ 50% {
+ transform: translateY(-30px) scale(1.1);
+ }
+}
+
+/* Header */
+.dashboard-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+ position: relative;
+ z-index: 10;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.header-left {
+ display: flex;
+ align-items: center;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: #fff;
+}
+
+.logo-icon {
+ font-size: 2rem;
+}
+
+.header-right {
+ display: flex;
+ gap: 1rem;
+}
+
+.icon-btn {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ border: none;
+ background: rgba(255, 255, 255, 0.2);
+ backdrop-filter: blur(10px);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
+}
+
+.icon-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+ transform: scale(1.05);
+}
+
+/* Main Content */
+.dashboard-main {
+ display: grid;
+ grid-template-columns: 1fr 320px;
+ gap: 2rem;
+ padding: 2rem;
+ max-width: 1600px;
+ margin: 0 auto;
+ position: relative;
+ z-index: 1;
+}
+
+.content-left {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+/* Welcome Section */
+.welcome-section {
+ margin-bottom: 0.5rem;
+}
+
+.welcome-title {
+ font-size: 2rem;
+ font-weight: 700;
+ color: #fff;
+ margin: 0;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Stats Cards */
+.stats-section {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+
+.stat-card {
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 20px;
+ padding: 1.5rem;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.stat-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(90deg, #667eea, #764ba2);
+}
+
+.stat-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+}
+
+.stat-savings {
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(255, 255, 255, 0.95));
+}
+
+.stat-expenses {
+ background: linear-gradient(135deg, rgba(255, 100, 130, 0.15), rgba(255, 255, 255, 0.95));
+}
+
+.stat-earnings {
+ background: linear-gradient(135deg, rgba(118, 75, 162, 0.15), rgba(255, 255, 255, 0.95));
+}
+
+.stat-icon {
+ font-size: 3rem;
+ filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+.stat-info {
+ flex: 1;
+}
+
+.stat-value {
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #333;
+ margin-bottom: 0.25rem;
+}
+
+.stat-label {
+ font-size: 1rem;
+ font-weight: 600;
+ color: #666;
+ margin-bottom: 0.25rem;
+}
+
+.stat-period {
+ font-size: 0.85rem;
+ color: #999;
+}
+
+.stat-action-btn {
+ background: rgba(102, 126, 234, 0.15);
+ border: none;
+ width: 36px;
+ height: 36px;
+ border-radius: 8px;
+ cursor: pointer;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
+}
+
+.stat-action-btn:hover {
+ background: rgba(102, 126, 234, 0.3);
+ transform: scale(1.1);
+}
+
+/* Daily Saving Tips */
+.tips-section {
+ margin: 1rem 0;
+}
+
+.tips-card {
+ background: rgba(0, 0, 0, 0.85);
+ border-radius: 16px;
+ padding: 1.5rem;
+ display: flex;
+ gap: 1rem;
+ align-items: flex-start;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.tips-icon {
+ font-size: 2.5rem;
+ filter: drop-shadow(2px 2px 4px rgba(255, 215, 0, 0.3));
+}
+
+.tips-content {
+ flex: 1;
+}
+
+.tips-title {
+ font-size: 1.2rem;
+ font-weight: 700;
+ color: #a78bfa;
+ margin: 0 0 0.5rem 0;
+}
+
+.tips-text {
+ font-size: 1rem;
+ color: #fff;
+ line-height: 1.6;
+ margin: 0;
+}
+
+/* Recent Spendings */
+.spendings-section {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 20px;
+ padding: 2rem;
+ backdrop-filter: blur(10px);
+}
+
+.section-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: #fff;
+ margin: 0 0 1.5rem 0;
+}
+
+.table-container {
+ overflow-x: auto;
+ border-radius: 12px;
+ background: rgba(0, 0, 0, 0.6);
+}
+
+.spendings-table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.spendings-table thead {
+ background: rgba(0, 0, 0, 0.4);
+}
+
+.spendings-table th {
+ padding: 1rem;
+ text-align: left;
+ font-weight: 600;
+ color: #a78bfa;
+ font-size: 0.9rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.spendings-table tbody tr {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ transition: background 0.2s ease;
+}
+
+.spendings-table tbody tr:hover {
+ background: rgba(102, 126, 234, 0.1);
+}
+
+.spendings-table td {
+ padding: 1rem;
+ color: #fff;
+ font-size: 0.95rem;
+}
+
+.status-badge {
+ display: inline-block;
+ padding: 0.25rem 0.75rem;
+ border-radius: 12px;
+ background: rgba(76, 175, 80, 0.2);
+ color: #4CAF50;
+ font-size: 0.85rem;
+ font-weight: 600;
+}
+
+/* Sidebar - Updates */
+.sidebar-right {
+ display: flex;
+ flex-direction: column;
+}
+
+.updates-panel {
+ background: rgba(0, 0, 0, 0.85);
+ border-radius: 20px;
+ padding: 1.5rem;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+ position: sticky;
+ top: 2rem;
+}
+
+.updates-title {
+ font-size: 1.3rem;
+ font-weight: 700;
+ color: #fff;
+ margin: 0 0 1.5rem 0;
+}
+
+.updates-list {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.update-item {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 1rem;
+ border-left: 3px solid #a78bfa;
+ transition: all 0.3s ease;
+}
+
+.update-item:hover {
+ background: rgba(255, 255, 255, 0.1);
+ transform: translateX(5px);
+}
+
+.update-text {
+ font-size: 0.95rem;
+ color: #fff;
+ margin: 0 0 0.5rem 0;
+ line-height: 1.4;
+}
+
+.update-time {
+ font-size: 0.8rem;
+ color: #999;
+}
+
+/* Floating Action Button */
+.fab {
+ position: fixed;
+ bottom: 2rem;
+ right: 2rem;
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border: none;
+ font-size: 1.8rem;
+ cursor: pointer;
+ box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
+ transition: all 0.3s ease;
+ z-index: 1000;
+}
+
+.fab:hover {
+ transform: scale(1.1) rotate(10deg);
+ box-shadow: 0 12px 32px rgba(102, 126, 234, 0.6);
+}
+
+/* Loading */
+.loading-container {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.loader {
+ width: 50px;
+ height: 50px;
+ border: 5px solid rgba(255, 255, 255, 0.3);
+ border-top-color: #fff;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+ .dashboard-main {
+ grid-template-columns: 1fr;
+ }
+
+ .sidebar-right {
+ order: -1;
+ }
+
+ .updates-panel {
+ position: static;
+ }
+}
+
+@media (max-width: 768px) {
+ .dashboard-header {
+ padding: 1rem;
+ }
+
+ .dashboard-main {
+ padding: 1rem;
+ gap: 1rem;
+ }
+
+ .welcome-title {
+ font-size: 1.5rem;
+ }
+
+ .stats-section {
+ grid-template-columns: 1fr;
+ }
+
+ .table-container {
+ overflow-x: scroll;
+ }
+
+ .spendings-table {
+ min-width: 600px;
+ }
+
+ .fab {
+ bottom: 1rem;
+ right: 1rem;
+ width: 50px;
+ height: 50px;
+ font-size: 1.5rem;
+ }
+}
diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx
new file mode 100644
index 00000000..f5080b4b
--- /dev/null
+++ b/app/dashboard/page.jsx
@@ -0,0 +1,223 @@
+"use client";
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/src/contexts/AuthContext';
+import './dashboard.css';
+
+export default function DashboardPage() {
+ const { user, isAuthenticated, loading, logout } = useAuth();
+ const router = useRouter();
+ const [stats, setStats] = useState({
+ totalSavings: 3200,
+ expenses: 1200,
+ earnings: 1300
+ });
+
+ const [recentSpendings, setRecentSpendings] = useState([
+ {
+ id: 1,
+ description: 'Zomato Order',
+ category: 'Food',
+ date: '2023-10-10',
+ amount: 200,
+ paymentMethod: 'UPI',
+ status: 'Completed'
+ },
+ {
+ id: 2,
+ description: 'Amazon Order',
+ category: 'Shopping',
+ date: '2023-10-11',
+ amount: 500,
+ paymentMethod: 'Debit Card',
+ status: 'Completed'
+ },
+ {
+ id: 3,
+ description: 'Netflix Subscription',
+ category: 'Entertainment',
+ date: '2023-10-12',
+ amount: 649,
+ paymentMethod: 'UPI',
+ status: 'Completed'
+ },
+ {
+ id: 4,
+ description: 'Electricity Bill',
+ category: 'Bills',
+ date: '2023-10-13',
+ amount: 1001,
+ paymentMethod: 'Net Banking',
+ status: 'Completed'
+ },
+ {
+ id: 5,
+ description: 'Phone Bill',
+ category: 'Bills',
+ date: '2023-10-14',
+ amount: 500,
+ paymentMethod: 'Net Banking',
+ status: 'Completed'
+ }
+ ]);
+
+ const [updates, setUpdates] = useState([
+ { id: 1, text: 'Ordered Biryani for ₹500', time: '30 minutes ago' },
+ { id: 2, text: 'Purchased Bluetooth headphones for ₹500', time: '2 hours ago' },
+ { id: 3, text: 'Subscription renewed for ₹649', time: '1 day ago' }
+ ]);
+
+ useEffect(() => {
+ if (!loading && !isAuthenticated) {
+ router.push('/auth/login');
+ }
+ }, [isAuthenticated, loading, router]);
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (!isAuthenticated) {
+ return null;
+ }
+
+ const handleLogout = () => {
+ logout();
+ router.push('/');
+ };
+
+ return (
+
+ {/* Header */}
+
+
+ {/* Main Content */}
+
+
+ {/* Welcome Section */}
+
+ Welcome Back, {user?.name || 'User'}!
+
+
+ {/* Stats Cards */}
+
+
+
💰
+
+
₹{stats.totalSavings.toLocaleString()}
+
Total Savings
+
6 Months
+
+
+
+
+
+
🛒
+
+
₹{stats.expenses.toLocaleString()}
+
Expenses
+
This Month
+
+
+
+
+
+
💵
+
+
₹{stats.earnings.toLocaleString()}
+
Earnings
+
This Month
+
+
+
+
+
+ {/* Daily Saving Tips */}
+
+
+
💡
+
+
Daily Saving Tips
+
+ Try the "52 Week Challenge": Save ₹1 in week 1, ₹2 in week 2, and so on. By the end of the year, you'll have saved ₹1,378!
+
+
+
+
+
+ {/* Recent Spendings Table */}
+
+ Recent Spendings
+
+
+
+
+ | Description |
+ Category |
+ Date |
+ Amount (₹) |
+ Payment Method |
+ Status |
+
+
+
+ {recentSpendings.map((spending) => (
+
+ | {spending.description} |
+ {spending.category} |
+ {spending.date} |
+ {spending.amount} |
+ {spending.paymentMethod} |
+
+ {spending.status}
+ |
+
+ ))}
+
+
+
+
+
+
+ {/* Right Sidebar - Updates */}
+
+
+
+ {/* Floating Action Button */}
+
+
+ );
+}
diff --git a/app/layout.js b/app/layout.js
index 78ad96cc..908c5c50 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,5 +1,6 @@
import "./globals.css";
import {Josefin_Sans} from 'next/font/google';
+import { AuthProvider } from '@/src/contexts/AuthContext';
export const metadata = {
title: "THE BUDGETEERS",
description: "Generated by create next app",
@@ -17,7 +18,7 @@ export default function RootLayout({ children }) {
- {children}
+
+
+ {children}
+
+