Initial commit: Cat Sitting Planner with PWA, SQLite, and Webhook Notifications

2026-01-12 20:48:23 +01:00
commit 3121ef223d
52 changed files with 13722 additions and 0 deletions
--- a/components/create-plan-form.tsx
+++ b/components/create-plan-form.tsx
@@ -0,0 +1,147 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { toast } from "sonner"
+import { useRouter } from "next/navigation"
+
+const formSchema = z.object({
+    dateRange: z.object({
+        from: z.date(),
+        to: z.date(),
+    }),
+    password: z.string().min(4, {
+        message: "Password must be at least 4 characters.",
+    }),
+    instructions: z.string().optional(),
+})
+
+export function CreatePlanForm() {
+    const router = useRouter()
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            password: "",
+            instructions: "",
+        },
+    })
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        try {
+            const response = await fetch("/api/plan", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    startDate: values.dateRange.from,
+                    endDate: values.dateRange.to,
+                    password: values.password,
+                    instructions: values.instructions,
+                }),
+            })
+
+            if (!response.ok) {
+                throw new Error("Failed to create plan")
+            }
+
+            const data = await response.json()
+            toast.success("Plan created successfully!")
+            router.push(`/dashboard/${data.planId}`)
+        } catch (error) {
+            toast.error("Something went wrong. Please try again.")
+            console.error(error)
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                <FormField
+                    control={form.control}
+                    name="dateRange"
+                    render={({ field }) => (
+                        <FormItem className="flex flex-col">
+                            <FormLabel>Travel Dates</FormLabel>
+                            <Popover>
+                                <PopoverTrigger asChild>
+                                    <FormControl>
+                                        <Button
+                                            variant={"outline"}
+                                            className={cn(
+                                                "w-full pl-3 text-left font-normal",
+                                                !field.value && "text-muted-foreground"
+                                            )}
+                                        >
+                                            {field.value?.from ? (
+                                                field.value.to ? (
+                                                    <>
+                                                        {format(field.value.from, "LLL dd, y")} -{" "}
+                                                        {format(field.value.to, "LLL dd, y")}
+                                                    </>
+                                                ) : (
+                                                    format(field.value.from, "LLL dd, y")
+                                                )
+                                            ) : (
+                                                <span>Pick a date range</span>
+                                            )}
+                                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                                        </Button>
+                                    </FormControl>
+                                </PopoverTrigger>
+                                <PopoverContent className="w-auto p-0" align="start">
+                                    <Calendar
+                                        mode="range"
+                                        selected={field.value}
+                                        onSelect={field.onChange}
+                                        disabled={(date) =>
+                                            date < new Date(new Date().setHours(0, 0, 0, 0))
+                                        }
+                                        initialFocus
+                                    />
+                                </PopoverContent>
+                            </Popover>
+                            <FormDescription>
+                                Select the days you will be away.
+                            </FormDescription>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <FormField
+                    control={form.control}
+                    name="password"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>Group Password</FormLabel>
+                            <FormControl>
+                                <Input placeholder="secret-meow" {...field} />
+                            </FormControl>
+                            <FormDescription>
+                                Share this password with your cat sitters.
+                            </FormDescription>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <Button type="submit">Create Plan</Button>
+            </form>
+        </Form>
+    )
+}