From 57be693e0daa72da4febd9a0d3234906e7bb2e5a Mon Sep 17 00:00:00 2001 From: Steve Dogiakos Date: Thu, 6 Feb 2025 08:41:43 -0700 Subject: [PATCH] first commit --- app/actions.ts | 27 ++++++ app/globals.css | 56 ++++++++++++ app/layout.tsx | 31 +++++++ app/page.tsx | 12 +++ components/GasFillupForm.tsx | 171 +++++++++++++++++++++++++++++++++++ components/ui/toaster.tsx | 23 +++++ tailwind.config.js | 67 ++++++++++++++ utils/api.ts | 86 ++++++++++++++++++ 8 files changed, 473 insertions(+) create mode 100644 app/actions.ts create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.tsx create mode 100644 components/GasFillupForm.tsx create mode 100644 components/ui/toaster.tsx create mode 100644 tailwind.config.js create mode 100644 utils/api.ts diff --git a/app/actions.ts b/app/actions.ts new file mode 100644 index 0000000..c962a14 --- /dev/null +++ b/app/actions.ts @@ -0,0 +1,27 @@ +"use server" + +import { fetchVehicles, submitFillup } from "@/utils/api" + +export async function getVehicles() { + try { + return await fetchVehicles() + } catch (error) { + console.error("Error fetching vehicles:", error) + throw new Error("Failed to fetch vehicles") + } +} + +export async function submitGasFillup(data: { + name: string + vehicleId: string + mileage: number + gallons: number +}) { + try { + return await submitFillup(data) + } catch (error) { + console.error("Error submitting fillup:", error) + throw new Error("Failed to submit gas fillup") + } +} + diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..4329d46 --- /dev/null +++ b/app/globals.css @@ -0,0 +1,56 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 300 20% 98%; + --foreground: 195 31% 13%; + + --card: 300 20% 98%; + --card-foreground: 195 31% 13%; + + --popover: 300 20% 98%; + --popover-foreground: 195 31% 13%; + + --primary: 181 70% 46%; + --primary-foreground: 195 31% 13%; + + --secondary: 191 89% 68%; + --secondary-foreground: 195 31% 13%; + + --muted: 195 31% 13%; + --muted-foreground: 195 31% 45%; + + --accent: 191 89% 68%; + --accent-foreground: 195 31% 13%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + + --border: 195 31% 13%; + --input: 195 31% 13%; + --ring: 181 70% 46%; + + --radius: 0.5rem; + } +} + +@layer base { + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + @apply font-vollkorn; + } +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..e26f704 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,31 @@ +import { Toaster } from "@/components/ui/toaster" +import { Vollkorn, Open_Sans } from "next/font/google" +import "./globals.css" +import type React from "react" // Import React + +const vollkorn = Vollkorn({ + subsets: ["latin"], + weight: ["700"], + variable: "--font-vollkorn", +}) + +const openSans = Open_Sans({ + subsets: ["latin"], + variable: "--font-open-sans", +}) + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + {children} + + + + ) +} + diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..5311310 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,12 @@ +"use client" + +import GasFillupForm from "@/components/GasFillupForm" + +export default function Page() { + return ( +
+ +
+ ) +} + diff --git a/components/GasFillupForm.tsx b/components/GasFillupForm.tsx new file mode 100644 index 0000000..8448773 --- /dev/null +++ b/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([]) + 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 ( +
+ + +
+ +
+ Gas Fill-up Form + + +
+
+ + setName(e.target.value)} + required + className="border-mdc-blue focus:ring-secondary" + disabled={isSubmitting} + /> +
+ +
+ + +
+ +
+ + setMileage(e.target.value)} + required + min="0" + step="1" + className="border-mdc-blue focus:ring-secondary" + disabled={isSubmitting} + /> +
+ +
+ + setFuelAmount(e.target.value)} + required + min="0" + step="0.001" + className="border-mdc-blue focus:ring-secondary" + disabled={isSubmitting} + /> +
+ + +
+ + +
+ ) +} + diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx new file mode 100644 index 0000000..655e950 --- /dev/null +++ b/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 ( + + {toasts.map(({ id, title, description, action, ...props }) => ( + + {title && {title}} + {description && {description}} + {action} + + + ))} + + + ) +} + diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..af36b73 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,67 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + darkMode: ["class"], + content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], + theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + colors: { + // Montana Dinosaur Center colors + primary: "#23c4c8", + secondary: "#62e5f7", + background: "#f6eff6", + "mdc-dark": "#172b2d", + "mdc-blue": "#1f4e63", + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + fontFamily: { + vollkorn: ["var(--font-vollkorn)"], + "open-sans": ["var(--font-open-sans)"], + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + }, + }, + plugins: [require("tailwindcss-animate")], +} + diff --git a/utils/api.ts b/utils/api.ts new file mode 100644 index 0000000..2d0ad89 --- /dev/null +++ b/utils/api.ts @@ -0,0 +1,86 @@ +"use server" + +let authToken: string | null = null +let tokenExpiry: number | null = null + +async function getAuthToken() { + // Check if we have a valid token + if (authToken && tokenExpiry && Date.now() < tokenExpiry) { + return authToken + } + + // Get new token + try { + const response = await fetch(`${process.env.LUBELOGGER_API_URL}/api/auth/login`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + username: process.env.LUBELOGGER_USERNAME, + password: process.env.LUBELOGGER_PASSWORD, + }), + }) + + if (!response.ok) { + throw new Error("Authentication failed") + } + + const data = await response.json() + authToken = data.token + // Set token expiry to 1 hour from now + tokenExpiry = Date.now() + 60 * 60 * 1000 + return authToken + } catch (error) { + console.error("Authentication error:", error) + throw new Error("Failed to authenticate with LubeLogger API") + } +} + +export async function fetchVehicles() { + const token = await getAuthToken() + + const response = await fetch(`${process.env.LUBELOGGER_API_URL}/api/vehicles`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + + if (!response.ok) { + throw new Error("Failed to fetch vehicles") + } + + return response.json() +} + +export async function submitFillup(data: { + name: string + vehicleId: string + mileage: number + gallons: number +}) { + const token = await getAuthToken() + + const response = await fetch(`${process.env.LUBELOGGER_API_URL}/api/fillups`, { + method: "POST", + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({ + employee: data.name, + vehicle_id: data.vehicleId, + odometer: data.mileage, + gallons: data.gallons, + date: new Date().toISOString(), + }), + }) + + if (!response.ok) { + const error = await response.json().catch(() => ({ message: "Failed to submit fillup" })) + throw new Error(error.message) + } + + return response.json() +} +