first commit

components/GasFillupForm.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { useToast } from "@/components/ui/use-toast"
+import { getVehicles, submitGasFillup } from "@/app/actions"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { FuelIcon as GasPump } from "lucide-react"
+
+interface Vehicle {
+  id: string
+  name: string
+}
+
+export default function GasFillupForm() {
+  const { toast } = useToast()
+  const [name, setName] = useState("")
+  const [vehicle, setVehicle] = useState("")
+  const [mileage, setMileage] = useState("")
+  const [fuelAmount, setFuelAmount] = useState("")
+  const [vehicles, setVehicles] = useState<Vehicle[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  useEffect(() => {
+    async function loadVehicles() {
+      setIsLoading(true)
+      try {
+        const vehicleData = await getVehicles()
+        setVehicles(vehicleData)
+      } catch (error) {
+        toast({
+          title: "Error",
+          description: "Failed to load vehicles. Please try again.",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadVehicles()
+  }, [toast])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+
+    try {
+      await submitGasFillup({
+        name,
+        vehicleId: vehicle,
+        mileage: Number(mileage),
+        gallons: Number(fuelAmount),
+      })
+
+      toast({
+        title: "Success",
+        description: "Gas fillup has been recorded successfully.",
+      })
+
+      // Reset form
+      setName("")
+      setVehicle("")
+      setMileage("")
+      setFuelAmount("")
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to submit gas fillup. Please try again.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background p-4 md:p-8">
+      <Card className="max-w-md mx-auto border-primary shadow-lg">
+        <CardHeader className="space-y-1 text-center bg-primary text-white rounded-t-lg">
+          <div className="flex justify-center mb-2">
+            <GasPump size={32} />
+          </div>
+          <CardTitle className="text-2xl font-vollkorn">Gas Fill-up Form</CardTitle>
+        </CardHeader>
+        <CardContent className="p-6">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="name" className="text-mdc-dark">
+                Employee Name
+              </Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+                className="border-mdc-blue focus:ring-secondary"
+                disabled={isSubmitting}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="vehicle" className="text-mdc-dark">
+                Vehicle
+              </Label>
+              <Select value={vehicle} onValueChange={setVehicle} disabled={isLoading || isSubmitting}>
+                <SelectTrigger id="vehicle" className="border-mdc-blue focus:ring-secondary">
+                  <SelectValue placeholder={isLoading ? "Loading vehicles..." : "Select a vehicle"} />
+                </SelectTrigger>
+                <SelectContent>
+                  {vehicles.map((v) => (
+                    <SelectItem key={v.id} value={v.id}>
+                      {v.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="mileage" className="text-mdc-dark">
+                Vehicle Mileage
+              </Label>
+              <Input
+                id="mileage"
+                type="number"
+                value={mileage}
+                onChange={(e) => setMileage(e.target.value)}
+                required
+                min="0"
+                step="1"
+                className="border-mdc-blue focus:ring-secondary"
+                disabled={isSubmitting}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="fuelAmount" className="text-mdc-dark">
+                Fuel Amount (Gallons)
+              </Label>
+              <Input
+                id="fuelAmount"
+                type="number"
+                value={fuelAmount}
+                onChange={(e) => setFuelAmount(e.target.value)}
+                required
+                min="0"
+                step="0.001"
+                className="border-mdc-blue focus:ring-secondary"
+                disabled={isSubmitting}
+              />
+            </div>
+
+            <Button
+              type="submit"
+              className="w-full bg-primary hover:bg-secondary text-mdc-dark font-semibold transition-colors"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "Submitting..." : "Submit"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+

components/ui/toaster.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(({ id, title, description, action, ...props }) => (
+        <Toast key={id} {...props} className="bg-white border-primary">
+          {title && <ToastTitle className="font-vollkorn">{title}</ToastTitle>}
+          {description && <ToastDescription className="font-open-sans">{description}</ToastDescription>}
+          {action}
+          <ToastClose />
+        </Toast>
+      ))}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
+