You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
6.0 KiB
TypeScript
105 lines
6.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Upload,
|
|
Plus,
|
|
Loader2,
|
|
} from "lucide-react";
|
|
import { submitReimbursement } from "@/app/lib/actions";
|
|
|
|
export function ReimbursementForm() {
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
async function handleSubmit(formData: FormData) {
|
|
setIsSubmitting(true);
|
|
try {
|
|
await submitReimbursement(formData);
|
|
setShowForm(false);
|
|
alert("Claim submitted successfully!");
|
|
} catch (e) {
|
|
alert("Failed to submit claim.");
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
onClick={() => setShowForm(!showForm)}
|
|
className="bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl px-6 py-6 h-auto shadow-lg shadow-indigo-200 dark:shadow-none transition-all active:scale-95"
|
|
>
|
|
{showForm ? "Cancel Request" : (
|
|
<span className="flex items-center gap-2">
|
|
<Plus className="w-5 h-5" />
|
|
New Request
|
|
</span>
|
|
)}
|
|
</Button>
|
|
|
|
{showForm && (
|
|
<Card className="border-none shadow-2xl shadow-indigo-500/10 bg-white dark:bg-neutral-900 rounded-3xl overflow-hidden animate-in zoom-in-95 duration-300 absolute top-24 right-0 left-0 z-20 mx-8">
|
|
<CardHeader className="p-8">
|
|
<CardTitle>Submit New Request</CardTitle>
|
|
<CardDescription>Fill in the details and attach your receipt</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="p-8 pt-0">
|
|
<form action={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div className="space-y-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description" className="text-sm font-semibold">Description</Label>
|
|
<Input name="description" placeholder="e.g. Flight to Berlin" required className="rounded-xl border-neutral-200 focus:ring-indigo-500" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="amount" className="text-sm font-semibold">Amount ($)</Label>
|
|
<Input name="amount" type="number" step="0.01" placeholder="0.00" required className="rounded-xl" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="category" className="text-sm font-semibold">Category</Label>
|
|
<select name="category" className="w-full rounded-xl border-neutral-200 bg-white dark:bg-neutral-950 p-2 text-sm focus:ring-2 focus:ring-indigo-500 outline-none h-10 border">
|
|
<option>Travel</option>
|
|
<option>Food</option>
|
|
<option>Equipment</option>
|
|
<option>Medical</option>
|
|
<option>Other</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="date" className="text-sm font-semibold">Transaction Date</Label>
|
|
<Input name="date" type="date" required className="rounded-xl" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-semibold">Receipt Image / PDF</Label>
|
|
<div className="border-2 border-dashed border-neutral-200 dark:border-neutral-800 rounded-3xl p-12 text-center hover:border-indigo-400 hover:bg-indigo-50/50 transition-all cursor-pointer group">
|
|
<div className="w-16 h-16 bg-neutral-50 dark:bg-neutral-800 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white dark:group-hover:bg-neutral-700 transition-colors shadow-sm">
|
|
<Upload className="w-8 h-8 text-neutral-400 group-hover:text-indigo-600 transition-colors" />
|
|
</div>
|
|
<p className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Click to upload or drag and drop</p>
|
|
<p className="text-xs text-neutral-500 mt-1">PNG, JPG or PDF up to 10MB</p>
|
|
</div>
|
|
</div>
|
|
<div className="pt-4 flex justify-end">
|
|
<Button type="submit" disabled={isSubmitting} className="w-full md:w-auto bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl px-12 py-6 h-auto transition-all">
|
|
{isSubmitting ? <Loader2 className="w-5 h-5 animate-spin" /> : "Submit Claim"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</>
|
|
);
|
|
}
|