finance: feat: added the goal page with some improvements of ui

1 files changed, 297 insertions, 0 deletions

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&apos;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 &ldquo;{goalToDelete?.name}&rdquo;? 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