From caace928ac81c284629ee50942d72179d4da9784 Mon Sep 17 00:00:00 2001 From: Biswa Kalyan Bhuyan Date: Thu, 24 Apr 2025 09:13:07 +0530 Subject: feat: Fix loan API type assertion and complete core loan features - Resolve interface conversion panic in loan handlers by correcting user type assertions from *models.User to models.User - Finalize loan management API integration with frontend components - Implement remaining loan calculation logic and CRUD operations - Connect loan display components to backend APIs as per Phase 3 - Update project status in README.md to reflect completed loan features - Add CORS middleware configuration for frontend-backend communication This commit completes core loan management functionality and fixes critical type safety issues in the API handlers, enabling proper user context handling. --- frontend/src/app/(auth)/layout.tsx | 36 +++ frontend/src/app/(auth)/login/page.tsx | 88 +++++++ frontend/src/app/(auth)/signup/page.tsx | 116 +++++++++ frontend/src/app/(main)/dashboard/page.tsx | 10 + frontend/src/app/(main)/layout.tsx | 94 +++++++ frontend/src/app/(main)/loans/page.tsx | 279 +++++++++++++++++++++ frontend/src/app/favicon.ico | Bin 0 -> 25931 bytes frontend/src/app/globals.css | 122 +++++++++ frontend/src/app/layout.tsx | 43 ++++ frontend/src/app/page.tsx | 27 ++ frontend/src/app/providers.tsx | 25 ++ frontend/src/components/shared/Notification.tsx | 82 ++++++ .../src/components/shared/NotificationContext.tsx | 55 ++++ frontend/src/components/shared/ThemeProvider.tsx | 56 +++++ frontend/src/components/shared/ThemeToggle.tsx | 36 +++ frontend/src/components/ui/button.tsx | 59 +++++ frontend/src/components/ui/card.tsx | 92 +++++++ frontend/src/components/ui/dialog.tsx | 135 ++++++++++ frontend/src/components/ui/form.tsx | 167 ++++++++++++ frontend/src/components/ui/input.tsx | 21 ++ frontend/src/components/ui/label.tsx | 24 ++ frontend/src/components/ui/table.tsx | 116 +++++++++ frontend/src/lib/api.ts | 123 +++++++++ frontend/src/lib/utils.ts | 6 + 24 files changed, 1812 insertions(+) create mode 100644 frontend/src/app/(auth)/layout.tsx create mode 100644 frontend/src/app/(auth)/login/page.tsx create mode 100644 frontend/src/app/(auth)/signup/page.tsx create mode 100644 frontend/src/app/(main)/dashboard/page.tsx create mode 100644 frontend/src/app/(main)/layout.tsx create mode 100644 frontend/src/app/(main)/loans/page.tsx create mode 100644 frontend/src/app/favicon.ico create mode 100644 frontend/src/app/globals.css create mode 100644 frontend/src/app/layout.tsx create mode 100644 frontend/src/app/page.tsx create mode 100644 frontend/src/app/providers.tsx create mode 100644 frontend/src/components/shared/Notification.tsx create mode 100644 frontend/src/components/shared/NotificationContext.tsx create mode 100644 frontend/src/components/shared/ThemeProvider.tsx create mode 100644 frontend/src/components/shared/ThemeToggle.tsx create mode 100644 frontend/src/components/ui/button.tsx create mode 100644 frontend/src/components/ui/card.tsx create mode 100644 frontend/src/components/ui/dialog.tsx create mode 100644 frontend/src/components/ui/form.tsx create mode 100644 frontend/src/components/ui/input.tsx create mode 100644 frontend/src/components/ui/label.tsx create mode 100644 frontend/src/components/ui/table.tsx create mode 100644 frontend/src/lib/api.ts create mode 100644 frontend/src/lib/utils.ts (limited to 'frontend/src') diff --git a/frontend/src/app/(auth)/layout.tsx b/frontend/src/app/(auth)/layout.tsx new file mode 100644 index 0000000..9651b4b --- /dev/null +++ b/frontend/src/app/(auth)/layout.tsx @@ -0,0 +1,36 @@ +'use client'; + +import { useEffect } from 'react'; +import { useRouter } from 'next/navigation'; + +export default function AuthLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + const router = useRouter(); + + useEffect(() => { + // If already logged in, redirect to dashboard + const token = localStorage.getItem('token'); + if (token) { + router.push('/dashboard'); + } + }, [router]); + + return ( +
+
+
+

+ Finance Management +

+

+ Manage your personal finances +

+
+ {children} +
+
+ ); +} \ No newline at end of file diff --git a/frontend/src/app/(auth)/login/page.tsx b/frontend/src/app/(auth)/login/page.tsx new file mode 100644 index 0000000..7460b8a --- /dev/null +++ b/frontend/src/app/(auth)/login/page.tsx @@ -0,0 +1,88 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { useRouter, useSearchParams } from 'next/navigation'; +import Link from 'next/link'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { authApi } from '@/lib/api'; +import { useNotification } from '@/components/shared/NotificationContext'; + +export default function LoginPage() { + const router = useRouter(); + const searchParams = useSearchParams(); + const { showNotification } = useNotification(); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [error, setError] = useState(''); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + // Check if the user was redirected from signup + if (searchParams.get('signup') === 'success') { + showNotification('success', 'Account created successfully! Please log in.'); + } + }, [searchParams, showNotification]); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(''); + setIsLoading(true); + + try { + await authApi.login(email, password); + showNotification('success', 'Logged in successfully!'); + router.push('/dashboard'); + } catch (err: any) { + setError(err.message || 'Login failed'); + } finally { + setIsLoading(false); + } + }; + + return ( +
+
+
+ + setEmail(e.target.value)} + required + /> +
+
+ + setPassword(e.target.value)} + required + /> +
+ + {error && ( +
+ {error} +
+ )} + + +
+ +
+ Don't have an account?{' '} + + Sign up + +
+
+ ); +} \ No newline at end of file diff --git a/frontend/src/app/(auth)/signup/page.tsx b/frontend/src/app/(auth)/signup/page.tsx new file mode 100644 index 0000000..af25031 --- /dev/null +++ b/frontend/src/app/(auth)/signup/page.tsx @@ -0,0 +1,116 @@ +'use client'; + +import { useState } from 'react'; +import { useRouter } from 'next/navigation'; +import Link from 'next/link'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { authApi } from '@/lib/api'; +import { useNotification } from '@/components/shared/NotificationContext'; + +export default function SignupPage() { + const router = useRouter(); + const { showNotification } = useNotification(); + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [error, setError] = useState(''); + const [isLoading, setIsLoading] = useState(false); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(''); + + // Validate passwords match + if (password !== confirmPassword) { + setError('Passwords do not match'); + return; + } + + setIsLoading(true); + + try { + await authApi.signup(name, email, password); + // Show success notification + showNotification('success', `Your email ${email} has been successfully registered!`); + // Redirect to login after successful signup with a slight delay to see the notification + setTimeout(() => { + router.push('/login?signup=success'); + }, 1500); + } catch (err: any) { + setError(err.message || 'Signup failed'); + } finally { + setIsLoading(false); + } + }; + + return ( +
+
+
+ + setName(e.target.value)} + required + /> +
+ +
+ + setEmail(e.target.value)} + required + /> +
+ +
+ + setPassword(e.target.value)} + required + /> +
+ +
+ + setConfirmPassword(e.target.value)} + required + /> +
+ + {error && ( +
+ {error} +
+ )} + + +
+ +
+ Already have an account?{' '} + + Login + +
+
+ ); +} \ No newline at end of file diff --git a/frontend/src/app/(main)/dashboard/page.tsx b/frontend/src/app/(main)/dashboard/page.tsx new file mode 100644 index 0000000..ac5fd0d --- /dev/null +++ b/frontend/src/app/(main)/dashboard/page.tsx @@ -0,0 +1,10 @@ +export default function DashboardPage() { + return ( +
+

Dashboard

+

+ Welcome to your Finance Management Dashboard. Navigate to the Loans section to manage your loans. +

+
+ ); +} \ No newline at end of file diff --git a/frontend/src/app/(main)/layout.tsx b/frontend/src/app/(main)/layout.tsx new file mode 100644 index 0000000..846a118 --- /dev/null +++ b/frontend/src/app/(main)/layout.tsx @@ -0,0 +1,94 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import { useRouter } from 'next/navigation'; +import Link from 'next/link'; +import { Button } from '@/components/ui/button'; +import { authApi, userApi } from '@/lib/api'; +import { ThemeToggle } from '@/components/shared/ThemeToggle'; + + +export default function MainLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + const router = useRouter(); + const [userName, setUserName] = useState(''); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + // Check if user is authenticated + const token = localStorage.getItem('token'); + if (!token) { + router.push('/login'); + return; + } + + // Fetch user profile + userApi.getProfile() + .then(data => { + setUserName(data.user.Name); + setIsLoading(false); + }) + .catch(() => { + // If error fetching profile, redirect to login + router.push('/login'); + }); + }, [router]); + + const handleLogout = () => { + authApi.logout(); + }; + + if (isLoading) { + return
Loading...
; + } + + return ( +
+ {/* Top Navigation */} +
+
+
+
Finance Management
+
+ +
+ Welcome!, {userName} + + +
+
+
+ + {/* Main Content */} +
+ {/* Sidebar */} + + + {/* Page Content */} +
+ {children} +
+
+
+ ); +} \ No newline at end of file diff --git a/frontend/src/app/(main)/loans/page.tsx b/frontend/src/app/(main)/loans/page.tsx new file mode 100644 index 0000000..07c1428 --- /dev/null +++ b/frontend/src/app/(main)/loans/page.tsx @@ -0,0 +1,279 @@ +'use client'; + +import { useState } from 'react'; +import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '@/components/ui/table'; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { loanApi, Loan, LoanInput } from '@/lib/api'; + +export default function LoansPage() { + const queryClient = useQueryClient(); + const [isAddDialogOpen, setIsAddDialogOpen] = useState(false); + const [selectedLoan, setSelectedLoan] = useState(null); + + // Form state + const [loanName, setLoanName] = useState(''); + const [originalAmount, setOriginalAmount] = useState(''); + const [currentBalance, setCurrentBalance] = useState(''); + const [interestRate, setInterestRate] = useState(''); + const [startDate, setStartDate] = useState(''); + const [endDate, setEndDate] = useState(''); + const [formError, setFormError] = useState(''); + + // Query loans + const { data, isLoading, error } = useQuery({ + queryKey: ['loans'], + queryFn: async () => { + const response = await loanApi.getLoans(); + return response.loans as Loan[]; + } + }); + + // Create loan mutation + const createLoanMutation = useMutation({ + mutationFn: (loanData: LoanInput) => loanApi.createLoan(loanData), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['loans'] }); + resetForm(); + setIsAddDialogOpen(false); + }, + onError: (error: Error) => { + setFormError(error.message); + } + }); + + // Delete loan mutation + const deleteLoanMutation = useMutation({ + mutationFn: (id: number) => loanApi.deleteLoan(id), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['loans'] }); + } + }); + + const resetForm = () => { + setLoanName(''); + setOriginalAmount(''); + setCurrentBalance(''); + setInterestRate(''); + setStartDate(''); + setEndDate(''); + setFormError(''); + setSelectedLoan(null); + }; + + const handleCreateLoan = (e: React.FormEvent) => { + e.preventDefault(); + setFormError(''); + + try { + // Validate inputs + if (!loanName || !originalAmount || !currentBalance || !startDate || !endDate) { + setFormError('Please fill in all required fields'); + return; + } + + const loanData: LoanInput = { + name: loanName, + originalAmount: Number(originalAmount) * 100, // Convert to cents + currentBalance: Number(currentBalance) * 100, // Convert to cents + interestRate: Number(interestRate) || 0, + startDate, + endDate, + }; + + createLoanMutation.mutate(loanData); + } catch (err: any) { + setFormError(err.message || 'Error creating loan'); + } + }; + + const handleDeleteLoan = (id: number) => { + if (window.confirm('Are you sure you want to delete this loan?')) { + deleteLoanMutation.mutate(id); + } + }; + + // Format currency (convert cents to dollars) + const formatCurrency = (amount: number) => { + return new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }).format(amount / 100); + }; + + // Format date + const formatDate = (dateString: string) => { + return new Date(dateString).toLocaleDateString(); + }; + + if (isLoading) { + return
Loading loans...
; + } + + if (error) { + return
Error loading loans: {error.toString()}
; + } + + return ( +
+
+

Loans

+ + + + + + + Add New Loan + +
+
+ + setLoanName(e.target.value)} + required + /> +
+ +
+ + setOriginalAmount(e.target.value)} + required + /> +
+ +
+ + setCurrentBalance(e.target.value)} + required + /> +
+ +
+ + setInterestRate(e.target.value)} + /> +
+ +
+ + setStartDate(e.target.value)} + required + /> +
+ +
+ + setEndDate(e.target.value)} + required + /> +
+ + {formError && ( +
+ {formError} +
+ )} + +
+ + +
+
+ + +
+ + {data && data.length > 0 ? ( + + + Your Loans + + + + + + Name + Original Amount + Current Balance + Interest Rate + Start Date + End Date + Actions + + + + {data.map((loan) => ( + + {loan.Name} + {formatCurrency(loan.OriginalAmount)} + {formatCurrency(loan.CurrentBalance)} + {loan.InterestRate}% + {formatDate(loan.StartDate)} + {formatDate(loan.EndDate)} + +
+ +
+ + + ))} + +
+ + + ) : ( + + +

You don't have any loans yet.

+ + + + )} +
+ ); +} \ No newline at end of file diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/frontend/src/app/favicon.ico differ diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css new file mode 100644 index 0000000..dc98be7 --- /dev/null +++ b/frontend/src/app/globals.css @@ -0,0 +1,122 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-geist-sans); + --font-mono: var(--font-geist-mono); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); +} + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx new file mode 100644 index 0000000..f746389 --- /dev/null +++ b/frontend/src/app/layout.tsx @@ -0,0 +1,43 @@ +import type { Metadata } from "next"; +import { Geist, Geist_Mono } from "next/font/google"; +import "./globals.css"; +import { Providers } from "./providers"; +import { ThemeProvider } from "@/components/shared/ThemeProvider"; +import { NotificationProvider } from "@/components/shared/NotificationContext"; + +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); + +export const metadata: Metadata = { + title: "Finance Management", + description: "Enhanced Personal Finance Management Application", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + + + + {children} + + + + + + ); +} diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx new file mode 100644 index 0000000..b2f055e --- /dev/null +++ b/frontend/src/app/page.tsx @@ -0,0 +1,27 @@ +'use client'; + +import { useEffect } from 'react'; +import { useRouter } from 'next/navigation'; +import Image from "next/image"; + +export default function Home() { + const router = useRouter(); + + useEffect(() => { + // Check if user is authenticated + const token = localStorage.getItem('token'); + if (token) { + // If authenticated, redirect to dashboard + router.push('/dashboard'); + } else { + // Otherwise, redirect to login + router.push('/login'); + } + }, [router]); + + return ( +
+

Redirecting...

+
+ ); +} diff --git a/frontend/src/app/providers.tsx b/frontend/src/app/providers.tsx new file mode 100644 index 0000000..efedc0b --- /dev/null +++ b/frontend/src/app/providers.tsx @@ -0,0 +1,25 @@ +'use client'; + +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { ReactNode, useState } from 'react'; + +interface ProvidersProps { + children: ReactNode; +} + +export function Providers({ children }: ProvidersProps) { + const [queryClient] = useState(() => new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + retry: 1, + }, + }, + })); + + return ( + + {children} + + ); +} \ No newline at end of file diff --git a/frontend/src/components/shared/Notification.tsx b/frontend/src/components/shared/Notification.tsx new file mode 100644 index 0000000..bcc11c4 --- /dev/null +++ b/frontend/src/components/shared/Notification.tsx @@ -0,0 +1,82 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import { CheckCircle, AlertCircle, X } from 'lucide-react'; + +export type NotificationType = 'success' | 'error' | 'info'; + +interface NotificationProps { + type: NotificationType; + message: string; + duration?: number; + onClose?: () => void; +} + +export function Notification({ + type, + message, + duration = 5000, // Default duration of 5 seconds + onClose +}: NotificationProps) { + const [isVisible, setIsVisible] = useState(true); + + useEffect(() => { + if (duration > 0) { + const timer = setTimeout(() => { + setIsVisible(false); + if (onClose) onClose(); + }, duration); + + return () => clearTimeout(timer); + } + }, [duration, onClose]); + + const handleClose = () => { + setIsVisible(false); + if (onClose) onClose(); + }; + + if (!isVisible) return null; + + const getIcon = () => { + switch (type) { + case 'success': + return ; + case 'error': + return ; + case 'info': + return ; + default: + return null; + } + }; + + const getContainerClasses = () => { + const baseClasses = 'fixed top-4 right-4 z-50 flex items-center gap-3 rounded-lg p-4 shadow-md max-w-sm'; + + switch (type) { + case 'success': + return `${baseClasses} bg-green-50 text-green-800 border border-green-200`; + case 'error': + return `${baseClasses} bg-red-50 text-red-800 border border-red-200`; + case 'info': + return `${baseClasses} bg-blue-50 text-blue-800 border border-blue-200`; + default: + return baseClasses; + } + }; + + return ( +
+ {getIcon()} +
{message}
+ +
+ ); +} \ No newline at end of file diff --git a/frontend/src/components/shared/NotificationContext.tsx b/frontend/src/components/shared/NotificationContext.tsx new file mode 100644 index 0000000..a8f6454 --- /dev/null +++ b/frontend/src/components/shared/NotificationContext.tsx @@ -0,0 +1,55 @@ +'use client'; + +import { createContext, useContext, useState, ReactNode } from 'react'; +import { Notification, NotificationType } from './Notification'; + +type NotificationData = { + id: string; + type: NotificationType; + message: string; + duration?: number; +}; + +interface NotificationContextType { + showNotification: (type: NotificationType, message: string, duration?: number) => void; + hideNotification: (id: string) => void; +} + +const NotificationContext = createContext(undefined); + +export function NotificationProvider({ children }: { children: ReactNode }) { + const [notifications, setNotifications] = useState([]); + + const showNotification = (type: NotificationType, message: string, duration?: number) => { + const id = Math.random().toString(36).substring(2, 9); + setNotifications(prev => [...prev, { id, type, message, duration }]); + return id; + }; + + const hideNotification = (id: string) => { + setNotifications(prev => prev.filter(notification => notification.id !== id)); + }; + + return ( + + {children} + {notifications.map(notification => ( + hideNotification(notification.id)} + /> + ))} + + ); +} + +export function useNotification() { + const context = useContext(NotificationContext); + if (context === undefined) { + throw new Error('useNotification must be used within a NotificationProvider'); + } + return context; +} \ No newline at end of file diff --git a/frontend/src/components/shared/ThemeProvider.tsx b/frontend/src/components/shared/ThemeProvider.tsx new file mode 100644 index 0000000..2fc67d9 --- /dev/null +++ b/frontend/src/components/shared/ThemeProvider.tsx @@ -0,0 +1,56 @@ +'use client'; + +import { createContext, useContext, useEffect, useState, ReactNode } from 'react'; + +type Theme = 'light' | 'dark' | 'system'; + +interface ThemeContextType { + theme: Theme; + setTheme: (theme: Theme) => void; +} + +const ThemeContext = createContext(undefined); + +export function ThemeProvider({ children }: { children: ReactNode }) { + const [theme, setTheme] = useState('system'); + + useEffect(() => { + // Get the theme preference from localStorage if available + const storedTheme = localStorage.getItem('theme') as Theme | null; + if (storedTheme) { + setTheme(storedTheme); + } + }, []); + + useEffect(() => { + const root = window.document.documentElement; + + // Remove all theme classes + root.classList.remove('light', 'dark'); + + // Add the appropriate class based on theme + if (theme === 'system') { + const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + root.classList.add(systemTheme); + } else { + root.classList.add(theme); + } + + // Store the preference + localStorage.setItem('theme', theme); + }, [theme]); + + return ( + + {children} + + ); +} + +export function useTheme() { + const context = useContext(ThemeContext); + if (context === undefined) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +} \ No newline at end of file diff --git a/frontend/src/components/shared/ThemeToggle.tsx b/frontend/src/components/shared/ThemeToggle.tsx new file mode 100644 index 0000000..679bbc5 --- /dev/null +++ b/frontend/src/components/shared/ThemeToggle.tsx @@ -0,0 +1,36 @@ +'use client'; + +import { Moon, Sun } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { useTheme } from './ThemeProvider'; + +export function ThemeToggle() { + const { theme, setTheme } = useTheme(); + + const toggleTheme = () => { + if (theme === 'dark') { + setTheme('light'); + } else { + setTheme('dark'); + } + }; + + return ( + + ); +} \ No newline at end of file diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx new file mode 100644 index 0000000..a2df8dc --- /dev/null +++ b/frontend/src/components/ui/button.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + { + variants: { + variant: { + default: + "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", + destructive: + "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + outline: + "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", + secondary: + "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", + ghost: + "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-9 px-4 py-2 has-[>svg]:px-3", + sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", + lg: "h-10 rounded-md px-6 has-[>svg]:px-4", + icon: "size-9", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +function Button({ + className, + variant, + size, + asChild = false, + ...props +}: React.ComponentProps<"button"> & + VariantProps & { + asChild?: boolean + }) { + const Comp = asChild ? Slot : "button" + + return ( + + ) +} + +export { Button, buttonVariants } diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx new file mode 100644 index 0000000..d05bbc6 --- /dev/null +++ b/frontend/src/components/ui/card.tsx @@ -0,0 +1,92 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Card({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardDescription({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardAction({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardContent({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardAction, + CardDescription, + CardContent, +} diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx new file mode 100644 index 0000000..7d7a9d3 --- /dev/null +++ b/frontend/src/components/ui/dialog.tsx @@ -0,0 +1,135 @@ +"use client" + +import * as React from "react" +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { XIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function Dialog({ + ...props +}: React.ComponentProps) { + return +} + +function DialogTrigger({ + ...props +}: React.ComponentProps) { + return +} + +function DialogPortal({ + ...props +}: React.ComponentProps) { + return +} + +function DialogClose({ + ...props +}: React.ComponentProps) { + return +} + +function DialogOverlay({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function DialogContent({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + + + {children} + + + Close + + + + ) +} + +function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function DialogTitle({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function DialogDescription({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogOverlay, + DialogPortal, + DialogTitle, + DialogTrigger, +} diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx new file mode 100644 index 0000000..524b986 --- /dev/null +++ b/frontend/src/components/ui/form.tsx @@ -0,0 +1,167 @@ +"use client" + +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { Slot } from "@radix-ui/react-slot" +import { + Controller, + FormProvider, + useFormContext, + useFormState, + type ControllerProps, + type FieldPath, + type FieldValues, +} from "react-hook-form" + +import { cn } from "@/lib/utils" +import { Label } from "@/components/ui/label" + +const Form = FormProvider + +type FormFieldContextValue< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +> = { + name: TName +} + +const FormFieldContext = React.createContext( + {} as FormFieldContextValue +) + +const FormField = < + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +>({ + ...props +}: ControllerProps) => { + return ( + + + + ) +} + +const useFormField = () => { + const fieldContext = React.useContext(FormFieldContext) + const itemContext = React.useContext(FormItemContext) + const { getFieldState } = useFormContext() + const formState = useFormState({ name: fieldContext.name }) + const fieldState = getFieldState(fieldContext.name, formState) + + if (!fieldContext) { + throw new Error("useFormField should be used within ") + } + + const { id } = itemContext + + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState, + } +} + +type FormItemContextValue = { + id: string +} + +const FormItemContext = React.createContext( + {} as FormItemContextValue +) + +function FormItem({ className, ...props }: React.ComponentProps<"div">) { + const id = React.useId() + + return ( + +
+ + ) +} + +function FormLabel({ + className, + ...props +}: React.ComponentProps) { + const { error, formItemId } = useFormField() + + return ( +