Enhance finance tracking with record creation and improved data handling

Updates the FinancesPage component to allow creating financial records via API.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7e7c4e8-20cb-41c4-9d0e-79f48938fede
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/0880b8cd-75f3-424e-a72e-7bb3a1a4d190.jpg

client/src/pages/FinancesPage.tsx

@@ -1,94 +1,100 @@
-import { useState } from "react";
+import { useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from "@/components/ui/button";
+import { Button } from '@/components/ui/button';
-import { Input } from "@/components/ui/input";
+import { Input } from '@/components/ui/input';
-import { Label } from "@/components/ui/label";
+import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from '@/components/ui/textarea';
-import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { PageHeader } from "@/components/ui/page-header";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { useToast } from "@/hooks/use-toast";
+import { Badge } from '@/components/ui/badge';
-import Sidebar from "@/components/layout/Sidebar";
+import { PageHeader } from '@/components/ui/page-header';
-import { Plus, DollarSign, TrendingUp, TrendingDown } from "lucide-react";
+import { useToast } from '@/hooks/use-toast';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { apiRequest } from '@/lib/queryClient';
-import { apiRequest } from "@/lib/queryClient";
+import Sidebar from '@/components/layout/Sidebar';
+import { Plus, TrendingUp, TrendingDown, DollarSign } from 'lucide-react';
 
 export default function FinancesPage() {
   const { toast } = useToast();
   const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
   const [newRecord, setNewRecord] = useState({
-    type: "expense",
+    type: 'expense' as 'income' | 'expense',
-    amount: "",
+    amount: '',
-    description: "",
+    category: '',
-    category: "",
+    description: ''
   });
 
-  const { data: recordsResponse, isLoading: recordsLoading } = useQuery({
+  // Fetch financial records
-    queryKey: ["/api/financial/records"],
+  const { data: records, isLoading } = useQuery({
+    queryKey: ['/api/financial-records'],
+    queryFn: async () => {
+      const response = await fetch('/api/financial-records');
+      if (!response.ok) throw new Error('Failed to fetch records');
+      return response.json();
+    }
   });
 
-  const { data: summaryResponse, isLoading: summaryLoading } = useQuery({
+  // Fetch financial summary
-    queryKey: ["/api/financial/summary"],
+  const { data: summary } = useQuery({
+    queryKey: ['/api/financial-records/summary'],
+    queryFn: async () => {
+      const response = await fetch('/api/financial-records/summary');
+      if (!response.ok) throw new Error('Failed to fetch summary');
+      return response.json();
+    }
   });
 
-  const records = (recordsResponse as any)?.records || [];
+  // Create record mutation
-  const summary = (summaryResponse as any)?.summary || { income: 0, expenses: 0, net: 0 };
+  const createMutation = useMutation({
-
+    mutationFn: async (recordData: typeof newRecord) => {
-  const createRecordMutation = useMutation({
+      const response = await fetch('/api/financial-records', {
-    mutationFn: async (record: typeof newRecord) => {
+        method: 'POST',
-      const response = await fetch("/api/financial/records", {
+        headers: { 'Content-Type': 'application/json' },
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
         body: JSON.stringify({
-          ...record,
+          ...recordData,
-          amount: parseFloat(record.amount),
+          amount: parseFloat(recordData.amount)
-        }),
+        })
-        credentials: "include",
       });
-      if (!response.ok) throw new Error("Failed to create record");
+      if (!response.ok) throw new Error('Failed to create record');
       return response.json();
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["/api/financial/records"] });
+      queryClient.invalidateQueries({ queryKey: ['/api/financial-records'] });
-      queryClient.invalidateQueries({ queryKey: ["/api/financial/summary"] });
+      queryClient.invalidateQueries({ queryKey: ['/api/financial-records/summary'] });
       setOpen(false);
-      setNewRecord({ type: "expense", amount: "", description: "", category: "" });
+      setNewRecord({ type: 'expense', amount: '', category: '', description: '' });
-      toast({
+      toast({ title: "Record created successfully!" });
-        title: "Record created",
-        description: "Your financial record has been successfully created.",
-      });
     },
     onError: () => {
-      toast({
+      toast({ title: "Failed to create record", variant: "destructive" });
-        title: "Error",
+    }
-        description: "Failed to create record. Please try again.",
-        variant: "destructive",
-      });
-    },
   });
 
-  const handleCreateRecord = (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!newRecord.amount || isNaN(parseFloat(newRecord.amount))) {
+    if (!newRecord.amount || !newRecord.category) {
-      toast({
+      toast({ title: "Please fill in all required fields", variant: "destructive" });
-        title: "Invalid amount",
-        description: "Please enter a valid amount.",
-        variant: "destructive",
-      });
       return;
     }
-    createRecordMutation.mutate(newRecord);
+    createMutation.mutate(newRecord);
   };
 
-  const categories = {
+  // Income categories
-    income: ["Salary", "Freelance", "Investment", "Business", "Other"],
+  const incomeCategories = [
-    expense: ["Food", "Transportation", "Housing", "Entertainment", "Healthcare", "Shopping", "Other"],
+    'Salary', 'Freelancing', 'Investment', 'Business', 'Gift', 'Other'
-  };
+  ];
 
-  if (recordsLoading || summaryLoading) {
+  // Expense categories
+  const expenseCategories = [
+    'Food', 'Transportation', 'Housing', 'Utilities', 'Healthcare', 
+    'Entertainment', 'Shopping', 'Education', 'Travel', 'Other'
+  ];
+
+  const categories = newRecord.type === 'income' ? incomeCategories : expenseCategories;
+
+  // Loading state
+  if (isLoading) {
     return (
       <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
         <Sidebar className="w-64 border-r" />
@@ -97,7 +103,7 @@ export default function FinancesPage() {
             <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
             <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
             <div className="grid grid-cols-3 gap-4">
-              {[1, 2, 3].map((i) => (
+              {[...Array(3)].map((_, i) => (
                 <div key={i} className="h-24 bg-gray-200 dark:bg-gray-700 rounded"></div>
               ))}
             </div>
@@ -131,58 +137,9 @@ export default function FinancesPage() {
                   </DialogDescription>
                 </DialogHeader>
                 <form onSubmit={handleSubmit} className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="amount">Amount</Label>
-                    <Input
-                      id="amount"
-                      type="number"
-                      step="0.01"
-                      value={formData.amount}
-                      onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
-                      required
-                    />
-                  </div>
                   <div className="space-y-2">
                     <Label htmlFor="type">Type</Label>
-                    <Select value={formData.type} onValueChange={(value) => setFormData({ ...formData, type: value })}>
+                    <Select value={newRecord.type} onValueChange={(value: any) => setNewRecord({ ...newRecord, type: value, category: '' })}>
-                      <SelectTrigger>
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="income">Income</SelectItem>
-                        <SelectItem value="expense">Expense</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="category">Category</Label>
-                    <Input
-                      id="category"
-                      value={formData.category}
-                      onChange={(e) => setFormData({ ...formData, category: e.target.value })}
-                      required
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="description">Description</Label>
-                    <Textarea
-                      id="description"
-                      value={formData.description}
-                      onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                    />
-                  </div>
-                  <Button type="submit" disabled={createMutation.isPending}>
-                    {createMutation.isPending ? "Adding..." : "Add Record"}
-                  </Button>
-                </form>
-              </DialogContent>
-            </Dialog>
-          </PageHeader>
-
-          <div className="space-y-6">
-                  <div className="space-y-2">
-                    <Label htmlFor="type">Type</Label>
-                    <Select value={newRecord.type} onValueChange={(value) => setNewRecord({ ...newRecord, type: value, category: "" })}>
                       <SelectTrigger>
                         <SelectValue />
                       </SelectTrigger>
@@ -211,8 +168,8 @@ export default function FinancesPage() {
                         <SelectValue placeholder="Select category" />
                       </SelectTrigger>
                       <SelectContent>
-                        {categories[newRecord.type as keyof typeof categories].map((category) => (
+                        {categories.map((category) => (
-                          <SelectItem key={category} value={category}>
+                          <SelectItem key={category} value={category.toLowerCase()}>
                             {category}
                           </SelectItem>
                         ))}
@@ -221,23 +178,24 @@ export default function FinancesPage() {
                   </div>
                   <div className="space-y-2">
                     <Label htmlFor="description">Description</Label>
-                    <Input
+                    <Textarea
                       id="description"
-                      placeholder="Brief description"
+                      placeholder="Optional description..."
                       value={newRecord.description}
                       onChange={(e) => setNewRecord({ ...newRecord, description: e.target.value })}
                     />
                   </div>
-                  <Button type="submit" disabled={createRecordMutation.isPending}>
+                  <Button type="submit" disabled={createMutation.isPending}>
-                    {createRecordMutation.isPending ? "Adding..." : "Add Record"}
+                    {createMutation.isPending ? "Adding..." : "Add Record"}
                   </Button>
                 </form>
               </DialogContent>
             </Dialog>
-          </div>
+          </PageHeader>
 
-          {/* Summary Cards */}
+          <div className="space-y-6">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+            {/* Financial Summary Cards */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
               <Card>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Total Income</CardTitle>
@@ -245,11 +203,10 @@ export default function FinancesPage() {
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold text-green-600">
-                  ${summary.income.toFixed(2)}
+                    ${summary?.income?.toFixed(2) || '0.00'}
                   </div>
                 </CardContent>
               </Card>
-            
               <Card>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Total Expenses</CardTitle>
@@ -257,41 +214,36 @@ export default function FinancesPage() {
                 </CardHeader>
                 <CardContent>
                   <div className="text-2xl font-bold text-red-600">
-                  ${summary.expenses.toFixed(2)}
+                    ${summary?.expenses?.toFixed(2) || '0.00'}
                   </div>
                 </CardContent>
               </Card>
-            
               <Card>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                   <CardTitle className="text-sm font-medium">Net Balance</CardTitle>
                   <DollarSign className="h-4 w-4 text-blue-600" />
                 </CardHeader>
                 <CardContent>
-                <div className={`text-2xl font-bold ${summary.net >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+                  <div className={`text-2xl font-bold ${(summary?.net || 0) >= 0 ? 'text-green-600' : 'text-red-600'}`}>
-                  ${summary.net.toFixed(2)}
+                    ${summary?.net?.toFixed(2) || '0.00'}
                   </div>
                 </CardContent>
               </Card>
             </div>
 
-          {/* Records List */}
+            {/* Recent Transactions */}
             <Card>
               <CardHeader>
                 <CardTitle>Recent Transactions</CardTitle>
                 <CardDescription>
-                Your latest financial transactions
+                  Your latest financial records
                 </CardDescription>
               </CardHeader>
               <CardContent>
-              {records.length === 0 ? (
+                {!records || records.length === 0 ? (
-                <div className="text-center py-6">
+                  <div className="text-center py-8">
-                  <DollarSign className="w-12 h-12 mx-auto text-gray-400 mb-4" />
+                    <p className="text-muted-foreground mb-4">
-                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                      No financial records yet. Start by adding your first transaction.
-                    No records yet
-                  </h3>
-                  <p className="text-gray-600 dark:text-gray-300 mb-4">
-                    Start tracking your finances by adding your first record.
                     </p>
                     <Button onClick={() => setOpen(true)}>
                       <Plus className="w-4 h-4 mr-2" />
@@ -330,5 +282,6 @@ export default function FinancesPage() {
           </div>
         </div>
       </div>
+    </div>
   );
 }