diff options
Diffstat (limited to 'frontend/src/app/(main)/goals/components')
| -rw-r--r-- | frontend/src/app/(main)/goals/components/goal-form.tsx | 349 | ||||
| -rw-r--r-- | frontend/src/app/(main)/goals/components/goals-list.tsx | 297 |
2 files changed, 646 insertions, 0 deletions
diff --git a/frontend/src/app/(main)/goals/components/goal-form.tsx b/frontend/src/app/(main)/goals/components/goal-form.tsx new file mode 100644 index 0000000..6b1cbac --- /dev/null +++ b/frontend/src/app/(main)/goals/components/goal-form.tsx @@ -0,0 +1,349 @@ +"use client"; + +import { useState, useEffect, useCallback } from "react"; +import { useRouter } from "next/navigation"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import { CalendarIcon } from "lucide-react"; +import { format } from "date-fns"; + +import { Button } from "@/components/ui/button"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { Card, CardContent } from "@/components/ui/card"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { Calendar } from "@/components/ui/calendar"; +import { useToast } from "@/components/ui/use-toast"; +import { api } from "@/lib/api"; + +// Validation schema +const formSchema = z.object({ + name: z + .string() + .min(3, { message: "Name must be at least 3 characters" }) + .max(100, { message: "Name must be less than 100 characters" }), + targetAmount: z + .number() + .min(1, { message: "Target amount must be greater than 0" }), + currentAmount: z + .number() + .min(0, { message: "Current amount cannot be negative" }) + .optional(), + targetDate: z.date().optional(), + status: z.enum(["Active", "Paused", "Achieved", "Cancelled"]), +}); + +type FormValues = z.infer<typeof formSchema>; + +interface GoalFormProps { + goalId?: number; + isEditing?: boolean; + onSuccess?: () => void; +} + +export function GoalForm({ + goalId, + isEditing = false, + onSuccess +}: GoalFormProps) { + const [loading, setLoading] = useState(false); + const [initialLoading, setInitialLoading] = useState(false); + const router = useRouter(); + const { toast } = useToast(); + + // Set up form with validation + const form = useForm<FormValues>({ + resolver: zodResolver(formSchema), + defaultValues: { + name: "", + targetAmount: 0, + currentAmount: 0, + status: "Active", + }, + }); + + const fetchGoalData = useCallback(async () => { + setInitialLoading(true); + try { + const response = await api.get(`/goals/${goalId}`); + const goalData = response.data; + + // Set form values + form.reset({ + name: goalData.name, + targetAmount: goalData.targetAmount, + currentAmount: goalData.currentAmount, + status: goalData.status as "Active" | "Paused" | "Achieved" | "Cancelled", + ...(goalData.targetDate && { targetDate: new Date(goalData.targetDate) }), + }); + } catch (error) { + toast({ + title: "Error", + description: "Failed to fetch goal data. Please try again.", + variant: "destructive", + }); + console.error("Error fetching goal:", error); + router.push("/goals"); + } finally { + setInitialLoading(false); + } + }, [goalId, form, toast, router]); + + // Fetch goal data if editing + useEffect(() => { + if (isEditing && goalId) { + fetchGoalData(); + } + }, [isEditing, goalId, fetchGoalData]); + + const onSubmit = async (values: FormValues) => { + try { + setLoading(true); + + // Format data for API + const formattedData = { + ...values, + targetDate: values.targetDate ? format(values.targetDate, "yyyy-MM-dd") : undefined, + }; + + console.log("Submitting goal:", formattedData); + + if (isEditing) { + // Update existing goal + await api.put(`/goals/${goalId}`, formattedData); + toast({ + title: "Goal updated", + description: "Your goal has been updated successfully.", + }); + } else { + // Create new goal + const response = await api.post("/goals", formattedData); + console.log("Goal created response:", response.data); + toast({ + title: "Goal created", + description: "Your new goal has been created successfully.", + }); + } + + // Call onSuccess callback if provided + if (onSuccess) { + onSuccess(); + } else { + // Force a full page reload directly to the goals page + window.location.href = "/goals"; + } + + } catch (error) { + toast({ + title: "Error", + description: `Failed to ${isEditing ? "update" : "create"} goal. Please try again.`, + variant: "destructive", + }); + console.error(`Error ${isEditing ? "updating" : "creating"} goal:`, error); + } finally { + setLoading(false); + } + }; + + if (initialLoading) { + return <div className="text-center py-8">Loading goal data...</div>; + } + + return ( + <Card> + <CardContent className="pt-6"> + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6"> + <FormField + control={form.control} + name="name" + render={({ field }) => ( + <FormItem> + <FormLabel>Goal Name</FormLabel> + <FormControl> + <Input placeholder="e.g., Down Payment for House" {...field} /> + </FormControl> + <FormDescription> + A descriptive name for your financial goal + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> + <FormField + control={form.control} + name="targetAmount" + render={({ field }) => ( + <FormItem> + <FormLabel>Target Amount</FormLabel> + <FormControl> + <Input + type="number" + placeholder="10000" + {...field} + onChange={(e) => field.onChange(Number(e.target.value))} + /> + </FormControl> + <FormDescription> + The total amount you want to save + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="currentAmount" + render={({ field }) => ( + <FormItem> + <FormLabel>Current Amount</FormLabel> + <FormControl> + <Input + type="number" + placeholder="0" + {...field} + value={field.value || ""} + onChange={(e) => field.onChange(Number(e.target.value) || 0)} + /> + </FormControl> + <FormDescription> + How much you've already saved towards this goal + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + </div> + + <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> + <FormField + control={form.control} + name="targetDate" + render={({ field }) => ( + <FormItem className="flex flex-col"> + <FormLabel>Target Date (Optional)</FormLabel> + <Popover> + <PopoverTrigger asChild> + <FormControl> + <Button + variant={"outline"} + className={`w-full pl-3 text-left font-normal ${ + !field.value ? "text-muted-foreground" : "" + }`} + > + {field.value ? ( + format(field.value, "PPP") + ) : ( + <span>Pick a date</span> + )} + <CalendarIcon className="ml-auto h-4 w-4 opacity-50" /> + </Button> + </FormControl> + </PopoverTrigger> + <PopoverContent className="w-auto p-0" align="start"> + <Calendar + mode="single" + selected={field.value || undefined} + onSelect={field.onChange} + disabled={(date) => date < new Date()} + initialFocus + /> + </PopoverContent> + </Popover> + <FormDescription> + When you aim to achieve this goal + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="status" + render={({ field }) => ( + <FormItem> + <FormLabel>Status</FormLabel> + <Select + onValueChange={field.onChange} + defaultValue={field.value} + value={field.value} + > + <FormControl> + <SelectTrigger> + <SelectValue placeholder="Select a status" /> + </SelectTrigger> + </FormControl> + <SelectContent> + <SelectItem value="Active">Active</SelectItem> + <SelectItem value="Paused">Paused</SelectItem> + <SelectItem value="Achieved">Achieved</SelectItem> + <SelectItem value="Cancelled">Cancelled</SelectItem> + </SelectContent> + </Select> + <FormDescription> + The current status of your goal + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + </div> + + <div className="mb-6"> + <h3 className="text-sm font-medium text-muted-foreground mb-2"> + Don't see the amount you need? + </h3> + <p className="text-sm"> + Use the calculator to determine your target amount. + </p> + </div> + + <div className="flex justify-end space-x-4"> + <Button + type="button" + variant="outline" + onClick={() => router.push("/goals")} + disabled={loading} + > + Cancel + </Button> + <Button type="submit" disabled={loading}> + {loading + ? isEditing + ? "Updating..." + : "Creating..." + : isEditing + ? "Update Goal" + : "Create Goal"} + </Button> + </div> + </form> + </Form> + </CardContent> + </Card> + ); +}
\ No newline at end of file diff --git a/frontend/src/app/(main)/goals/components/goals-list.tsx b/frontend/src/app/(main)/goals/components/goals-list.tsx new file mode 100644 index 0000000..65f998a --- /dev/null +++ b/frontend/src/app/(main)/goals/components/goals-list.tsx @@ -0,0 +1,297 @@ +"use client"; + +import { useState, useEffect, useCallback } from "react"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; +import { Progress } from "@/components/ui/progress"; +import { Badge } from "@/components/ui/badge"; +import { Edit, Trash2, BarChart, AlertCircle } from "lucide-react"; +import Link from "next/link"; +import { useToast } from "@/components/ui/use-toast"; +import { formatCurrency } from "@/lib/utils"; +import { api } from "@/lib/api"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; + +// Type definitions +export interface Goal { + id: number; + name: string; + targetAmount: number; + currentAmount: number; + status: string; + targetDate: string; +} + +export interface GoalProgress { + goal: Goal; + percentComplete: number; + amountRemaining: number; + daysRemaining: number; + requiredPerDay: number; + requiredPerMonth: number; + onTrack: boolean; +} + +// Backend API response type +interface ApiGoal { + ID: number; + Name: string; + TargetAmount: number; + CurrentAmount: number; + Status: string; + TargetDate: string; + // Other fields might exist but we don't need them +} + +interface ApiGoalProgress { + goal: ApiGoal; + percentComplete: number; + amountRemaining: number; + daysRemaining: number; + requiredPerDay: number; + requiredPerMonth: number; + onTrack: boolean; +} + +export function GoalsList() { + const [goals, setGoals] = useState<GoalProgress[]>([]); + const [loading, setLoading] = useState(true); + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const [goalToDelete, setGoalToDelete] = useState<{id: number, name: string} | null>(null); + const { toast } = useToast(); + + const fetchGoals = useCallback(async () => { + try { + setLoading(true); + + // Add timestamp parameter to prevent caching + const response = await api.get(`/goals/progress/all?cache=${new Date().getTime()}`); + + if (!response.data || !Array.isArray(response.data)) { + setGoals([]); + return; + } + + // Validate and sanitize the data before setting state + const validatedGoals = response.data.map((goalProgress: ApiGoalProgress) => { + // Map API field names (uppercase) to our component field names (lowercase) + const mappedGoal = { + id: goalProgress.goal.ID, + name: goalProgress.goal.Name, + targetAmount: Number(goalProgress.goal.TargetAmount) || 0, + currentAmount: Number(goalProgress.goal.CurrentAmount) || 0, + status: goalProgress.goal.Status, + targetDate: goalProgress.goal.TargetDate + }; + + return { + goal: mappedGoal, + percentComplete: Number(goalProgress.percentComplete) || 0, + amountRemaining: Number(goalProgress.amountRemaining) || 0, + daysRemaining: Number(goalProgress.daysRemaining) || 0, + requiredPerDay: Number(goalProgress.requiredPerDay) || 0, + requiredPerMonth: Number(goalProgress.requiredPerMonth) || 0, + onTrack: Boolean(goalProgress.onTrack) + }; + }); + + setGoals(validatedGoals); + } catch (error) { + console.error("Error fetching goals:", error); + toast({ + title: "Error", + description: "Failed to fetch goals. Please try again later.", + variant: "destructive", + }); + } finally { + setLoading(false); + } + }, [toast]); + + // Fetch goals when component mounts or if URL contains a refresh parameter + useEffect(() => { + fetchGoals(); + + // Add event listener to refresh when the window gains focus (user comes back to the tab) + window.addEventListener("focus", fetchGoals); + + return () => { + window.removeEventListener("focus", fetchGoals); + }; + }, [fetchGoals]); + + const confirmDelete = (id: number, name: string) => { + setGoalToDelete({ id, name }); + setDeleteDialogOpen(true); + }; + + const handleDeleteConfirm = async () => { + if (!goalToDelete) return; + + try { + const goalId = Number(goalToDelete.id); + await api.delete(`/goals/${goalId}`); + toast({ + title: "Goal deleted", + description: "The goal has been successfully deleted.", + }); + fetchGoals(); + } catch (error) { + console.error("Error deleting goal:", error); + toast({ + title: "Error", + description: "Failed to delete the goal. Please try again.", + variant: "destructive", + }); + } finally { + setDeleteDialogOpen(false); + setGoalToDelete(null); + } + }; + + const handleDeleteCancel = () => { + setDeleteDialogOpen(false); + setGoalToDelete(null); + }; + + if (loading) { + return <div className="text-center py-8">Loading goals...</div>; + } + + if (!goals || goals.length === 0) { + return ( + <div className="text-center py-8"> + <p className="text-muted-foreground mb-4">You haven't created any goals yet.</p> + <Link href="/goals/new"> + <Button>Create your first goal</Button> + </Link> + </div> + ); + } + + return ( + <> + <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6"> + {goals.map((goalProgress, index) => { + const { goal, percentComplete, amountRemaining, daysRemaining, onTrack } = goalProgress; + const isCompleted = goal.status === "Achieved"; + + return ( + <Card key={`goal-${goal.id}-${index}`} className="flex flex-col h-full"> + <CardHeader className="pb-2"> + <div className="flex flex-wrap justify-between items-start gap-2"> + <CardTitle className="text-base sm:text-lg break-words mr-2">{goal.name}</CardTitle> + <Badge variant={isCompleted ? "default" : onTrack ? "outline" : "destructive"} className="whitespace-nowrap"> + {isCompleted ? "Achieved" : onTrack ? "On Track" : "Behind"} + </Badge> + </div> + <p className="text-xs sm:text-sm text-muted-foreground mt-1 break-words"> + Saving for: {goal.name} + </p> + </CardHeader> + <CardContent className="flex-1 py-2"> + <div className="mb-3"> + <div className="flex justify-between mb-1 text-sm"> + <span>Progress</span> + <span>{Math.round(percentComplete)}%</span> + </div> + <Progress value={percentComplete} className="h-2" /> + </div> + + <div className="space-y-1 text-xs sm:text-sm"> + <div key={`target-${goal.id}`} className="flex justify-between"> + <span className="text-muted-foreground">Target</span> + <span className="font-medium">{formatCurrency(goal.targetAmount)}</span> + </div> + <div key={`current-${goal.id}`} className="flex justify-between"> + <span className="text-muted-foreground">Current</span> + <span className="font-medium">{formatCurrency(goal.currentAmount)}</span> + </div> + <div key={`remaining-${goal.id}`} className="flex justify-between"> + <span className="text-muted-foreground">Remaining</span> + <span className="font-medium">{formatCurrency(amountRemaining)}</span> + </div> + {daysRemaining > 0 && ( + <div key={`days-left-${goal.id}`} className="flex justify-between"> + <span className="text-muted-foreground">Days Left</span> + <span className="font-medium">{daysRemaining}</span> + </div> + )} + {goal.targetDate && ( + <div key={`target-date-${goal.id}`} className="flex justify-between"> + <span className="text-muted-foreground">Target Date</span> + <span className="font-medium">{new Date(goal.targetDate).toLocaleDateString()}</span> + </div> + )} + </div> + </CardContent> + <CardFooter className="pt-2 flex flex-wrap gap-2"> + <div className="flex flex-col sm:flex-row gap-2 w-full"> + <Link key={`details-link-${goal.id}`} href={`/goals/${goal.id}`} className="flex-1 min-w-[80px]"> + <Button variant="outline" size="sm" className="w-full text-xs"> + <BarChart className="mr-1 h-3 w-3" /> + Details + </Button> + </Link> + <Link key={`edit-link-${goal.id}`} href={`/goals/edit/${goal.id}`} className="flex-1 min-w-[80px]"> + <Button variant="outline" size="sm" className="w-full text-xs"> + <Edit className="mr-1 h-3 w-3" /> + Edit + </Button> + </Link> + <Button + key={`delete-button-${goal.id}`} + variant="outline" + size="sm" + className="flex-1 min-w-[80px] text-xs" + onClick={() => confirmDelete(goal.id, goal.name)} + > + <Trash2 className="mr-1 h-3 w-3" /> + Delete + </Button> + </div> + </CardFooter> + </Card> + ); + })} + </div> + + <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}> + <DialogContent className="sm:max-w-[425px] p-4 sm:p-6 gap-4"> + <DialogHeader className="space-y-3"> + <DialogTitle className="flex items-center gap-2 text-lg"> + <AlertCircle className="h-5 w-5 text-destructive" /> + Confirm Deletion + </DialogTitle> + <DialogDescription className="text-sm"> + Are you sure you want to delete the goal “{goalToDelete?.name}”? This action cannot be undone. + </DialogDescription> + </DialogHeader> + <DialogFooter className="mt-4 flex-col sm:flex-row gap-2"> + <Button + variant="outline" + onClick={handleDeleteCancel} + className="w-full sm:w-auto" + > + Cancel + </Button> + <Button + variant="destructive" + onClick={handleDeleteConfirm} + className="w-full sm:w-auto" + > + Delete Goal + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + </> + ); +}
\ No newline at end of file |