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.
65 lines
3.3 KiB
TypeScript
65 lines
3.3 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 { Textarea } from "@/components/ui/textarea";
|
|
import { Zap, Loader2 } from "lucide-react";
|
|
import { submitOvertime } from "@/app/lib/actions";
|
|
|
|
export function OvertimeForm() {
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
async function handleSubmit(formData: FormData) {
|
|
setIsSubmitting(true);
|
|
try {
|
|
await submitOvertime(formData);
|
|
alert("Overtime logged successfully!");
|
|
(document.getElementById('overtime-form') as HTMLFormElement).reset();
|
|
} catch (e) {
|
|
alert("Failed to log overtime.");
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card className="border-none shadow-2xl shadow-indigo-500/10 bg-white dark:bg-neutral-900 rounded-3xl overflow-hidden">
|
|
<CardHeader className="p-8 border-b border-neutral-100 dark:border-neutral-800 flex flex-row items-center justify-between">
|
|
<div>
|
|
<CardTitle>Log Extra Hours</CardTitle>
|
|
<CardDescription>Enter details for your additional work hours</CardDescription>
|
|
</div>
|
|
<div className="p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl">
|
|
<Zap className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-8">
|
|
<form id="overtime-form" action={handleSubmit} className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="date" className="text-sm font-semibold">Work Date</Label>
|
|
<Input name="date" type="date" required className="rounded-xl" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="hours" className="text-sm font-semibold">Hours Worked</Label>
|
|
<Input name="hours" type="number" step="0.5" placeholder="e.g. 2.5" required className="rounded-xl" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="reason" className="text-sm font-semibold">Reason / Project</Label>
|
|
<Textarea name="reason" placeholder="Briefly describe the work you performed..." className="rounded-2xl min-h-[120px] bg-neutral-50 dark:bg-neutral-800/50 border-none resize-none px-4 py-3" />
|
|
</div>
|
|
<div className="pt-4">
|
|
<Button type="submit" disabled={isSubmitting} className="w-full bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl py-6 h-auto text-lg font-bold transition-all shadow-lg shadow-indigo-100 dark:shadow-none">
|
|
{isSubmitting ? <Loader2 className="w-5 h-5 animate-spin mx-auto" /> : "Log Overtime"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|