145 lines
4.5 KiB
TypeScript
145 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
|
|
interface PaymentFormProps {
|
|
clientName: string
|
|
outstandingAmount: number
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
onSubmit: (payment: { amount: number; notes: string; date: string }) => void
|
|
}
|
|
|
|
export function PaymentForm({ clientName, outstandingAmount, open, onOpenChange, onSubmit }: PaymentFormProps) {
|
|
const [formData, setFormData] = useState({
|
|
amount: 0,
|
|
notes: "",
|
|
date: new Date().toISOString().split("T")[0],
|
|
})
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
onSubmit(formData)
|
|
onOpenChange(false)
|
|
setFormData({
|
|
amount: 0,
|
|
notes: "",
|
|
date: new Date().toISOString().split("T")[0],
|
|
})
|
|
}
|
|
|
|
const maxPayment = outstandingAmount
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-[500px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Record Payment</DialogTitle>
|
|
<DialogDescription>Record a payment from {clientName}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="p-4 bg-muted rounded-lg">
|
|
<p className="text-sm text-muted-foreground mb-1">Outstanding Amount</p>
|
|
<p className="text-2xl font-bold">${outstandingAmount.toFixed(2)}</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="amount">Payment Amount ($) *</Label>
|
|
<Input
|
|
id="amount"
|
|
type="number"
|
|
step="0.01"
|
|
min="0.01"
|
|
max={maxPayment}
|
|
value={formData.amount}
|
|
onChange={(e) => setFormData({ ...formData, amount: Number.parseFloat(e.target.value) || 0 })}
|
|
placeholder="0.00"
|
|
required
|
|
/>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setFormData({ ...formData, amount: maxPayment / 4 })}
|
|
>
|
|
25%
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setFormData({ ...formData, amount: maxPayment / 2 })}
|
|
>
|
|
50%
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setFormData({ ...formData, amount: maxPayment })}
|
|
>
|
|
Full Amount
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="date">Payment Date *</Label>
|
|
<Input
|
|
id="date"
|
|
type="date"
|
|
value={formData.date}
|
|
onChange={(e) => setFormData({ ...formData, date: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="notes">Notes</Label>
|
|
<Textarea
|
|
id="notes"
|
|
value={formData.notes}
|
|
onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
|
|
placeholder="Payment method, reference number, etc."
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
|
|
{formData.amount > 0 && (
|
|
<div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
|
|
<p className="text-sm text-green-800 dark:text-green-200">
|
|
New outstanding amount: <strong>${(outstandingAmount - formData.amount).toFixed(2)}</strong>
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={formData.amount <= 0 || formData.amount > maxPayment}>
|
|
Record Payment
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|