🚀 monitor and page creation (#45)

* 🔥 creation form

* 🧹

* 🟢 fix build

* 🟢 fix build

apps/web/package.json

···
   },
   "dependencies": {
     "@clerk/nextjs": "4.21.14",
+    "@hookform/resolvers": "^3.1.1",
     "@openstatus/api": "workspace:^",
     "@openstatus/db": "workspace:^",
     "@openstatus/tinybird": "workspace:*",
···
     "next-plausible": "3.7.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.45.1",
     "resend": "^0.15.3",
     "superjson": "1.9.1",
     "svix": "1.4.12",

apps/web/src/app/app/(dashboard)/[workspaceId]/endpoint/loading.tsx

···
-import { Container } from "@/components/dashboard/container";
-import { Header } from "@/components/dashboard/header";
-
-export default function Loading() {
-  return (
-    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
-      <Header.Skeleton />
-      <Container.Skeleton />
-      <Container.Skeleton />
-      <Container.Skeleton />
-    </div>
-  );
-}

apps/web/src/app/app/(dashboard)/[workspaceId]/endpoint/page.tsx

···
-import * as React from "react";
-
-import { Container } from "@/components/dashboard/container";
-import { Header } from "@/components/dashboard/header";
-import { wait } from "@/lib/utils";
-
-export default async function EndpointPage() {
-  await wait(1000);
-  return (
-    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
-      <Header title="Endpoint" description="Overview of all your sites." />
-      <Container title="Hello"></Container>
-      <Container title="World"></Container>
-    </div>
-  );
-}

apps/web/src/app/app/(dashboard)/[workspaceId]/incident/page.tsx apps/web/src/app/app/(dashboard)/[workspaceId]/incidents/page.tsx

···
 
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
-import { wait } from "@/lib/utils";
 import { api } from "@/trpc/server";
 
 export default async function IncidentPage({
···
   });
   return (
     <div className="grid gap-6 md:grid-cols-2 md:gap-8">
-      <Header title="Monitor" description="Overview of all the responses." />
+      <Header title="Incidents" description="Overview of all your incidents." />
       <Container title="Hello"></Container>
       <Container title="World"></Container>
     </div>

apps/web/src/app/app/(dashboard)/[workspaceId]/monitor/page.tsx

···
-import * as React from "react";
-
-import { Container } from "@/components/dashboard/container";
-import { Header } from "@/components/dashboard/header";
-import { api } from "@/trpc/server";
-
-export default async function MonitorPage({
-  params,
-}: {
-  params: { workspaceId: string };
-}) {
-  const monitors = await api.monitor.getMonitorsByWorkspace.query({
-    workspaceId: Number(params.workspaceId),
-  });
-  console.log(monitors);
-  // iterate over monitors
-  return (
-    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
-      <Header title="Monitor" description="Overview of all the responses." />
-      <Container title="Hello"></Container>
-      <Container title="World"></Container>
-    </div>
-  );
-}

apps/web/src/app/app/(dashboard)/[workspaceId]/monitors/page.tsx

···
+import * as React from "react";
+
+import { Container } from "@/components/dashboard/container";
+import { Header } from "@/components/dashboard/header";
+import { MonitorCreateForm } from "@/components/forms/montitor-form";
+import { api } from "@/trpc/server";
+
+export default async function MonitorPage({
+  params,
+}: {
+  params: { workspaceId: string };
+}) {
+  const monitors = await api.monitor.getMonitorsByWorkspace.query({
+    workspaceId: Number(params.workspaceId),
+  });
+  // iterate over monitors
+  return (
+    <div className="grid gap-6 md:grid-cols-2 md:gap-8">
+      <Header title="Monitors" description="Overview of all your monitors.">
+        <MonitorCreateForm />
+      </Header>
+      {monitors.map((monitor, index) => (
+        <Container
+          key={index}
+          title={monitor.url}
+          description={monitor.name}
+        ></Container>
+      ))}
+    </div>
+  );
+}

apps/web/src/app/app/(dashboard)/[workspaceId]/page.tsx

···
 
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
-import { DialogForm } from "@/components/forms/dialog-form";
-import { Button } from "@/components/ui/button";
-import { wait } from "@/lib/utils";
+import { StatusPageCreateForm } from "@/components/forms/status-page-form";
 import { api } from "@/trpc/server";
 import Loading from "./loading";
 
···
   return (
     <div className="grid gap-6 md:grid-cols-2 md:gap-8">
       <div className="col-span-full flex w-full justify-between">
-        <Header title="Dashboard" description="Overview of all your websites">
-          {/* <Button>Create</Button> */}
-          <DialogForm />
-        </Header>
+        <Header title="Dashboard" description="Overview of all your websites" />
       </div>
       <Container title="Hello"></Container>
       <Container title="World"></Container>

apps/web/src/app/app/(dashboard)/[workspaceId]/page/page.tsx apps/web/src/app/app/(dashboard)/[workspaceId]/status-pages/page.tsx

···
 
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
-import { wait } from "@/lib/utils";
+import { StatusPageCreateForm } from "@/components/forms/status-page-form";
 import { api } from "@/trpc/server";
 
 export default async function Page({
···
       <Header
         title="Status Page"
         description="Overview of all your status page."
-      />
-      <Container title="Hello"></Container>
-      <Container title="World"></Container>
+      >
+        <StatusPageCreateForm />
+      </Header>
+      {pages.map((page, index) => (
+        <Container key={index} title={page.title}></Container>
+      ))}
     </div>
   );
 }

apps/web/src/components/forms/dialog-form.tsx

···
-"use client";
-
-import * as React from "react";
-import { Loader2 } from "lucide-react";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { wait } from "@/lib/utils";
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
-import { Label } from "../ui/label";
-
-// EXAMPLE
-export function DialogForm() {
-  const [saving, setSaving] = React.useState(false);
-  const [open, setOpen] = React.useState(false);
-
-  // either like that or with a user action
-  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    setSaving(true);
-    const data = Object.fromEntries(new FormData(e.currentTarget));
-
-    console.log(data); // { url: "" }
-    await wait(1500);
-    // save data
-
-    setOpen(false);
-    setSaving(false);
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => setOpen(value)}>
-      <DialogTrigger asChild>
-        <Button>Create</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Create Monitor</DialogTitle>
-          <DialogDescription>
-            Type an URL that you want to ping periodically.
-          </DialogDescription>
-        </DialogHeader>
-        <form onSubmit={handleSubmit} id="monitor">
-          <div className="grid w-full items-center gap-1.5">
-            <Label htmlFor="url">Link</Label>
-            <Input
-              id="url"
-              name="url"
-              type="url"
-              placeholder="https://"
-              required
-            />
-          </div>
-        </form>
-        <DialogFooter>
-          <Button type="submit" form="monitor" disabled={saving}>
-            {!saving ? "Confirm" : <Loader2 className="h-4 w-4 animate-spin" />}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/web/src/components/forms/montitor-form.tsx

···
+"use client";
+
+import * as React from "react";
+import { useParams, useRouter } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import { useForm } from "react-hook-form";
+import type * as z from "zod";
+
+import {
+  insertMonitorSchema,
+  periodicityEnum,
+} from "@openstatus/db/src/schema";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/trpc/client";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+
+// EXAMPLE
+export function MonitorCreateForm() {
+  const [saving, setSaving] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const params = useParams();
+  const router = useRouter();
+
+  const form = useForm<z.infer<typeof insertMonitorSchema>>({
+    resolver: zodResolver(insertMonitorSchema),
+    defaultValues: {
+      name: "",
+      url: "",
+      description: "",
+      workspaceId: Number(params.workspaceId),
+    },
+  });
+
+  // either like that or with a user action
+  async function onSubmit(values: z.infer<typeof insertMonitorSchema>) {
+    setSaving(true);
+    // await api.monitor.getMonitorsByWorkspace.revalidate();
+    await api.monitor.createMonitor.mutate(values);
+    router.refresh();
+    setOpen(false);
+    setSaving(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => setOpen(value)}>
+      <DialogTrigger asChild>
+        <Button>Create</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create Monitor</DialogTitle>
+          <DialogDescription>Create a monitor</DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} id="monitor">
+            <div className="grid w-full items-center  space-y-6">
+              <FormField
+                control={form.control}
+                name="url"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>URL</FormLabel>
+                    <FormControl>
+                      <Input placeholder="" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      This is url you want to monitor.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      The name of the monitor that will be displayed.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Input placeholder="" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Give your user some information about it.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="periodicity"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <Select
+                      onValueChange={(value) =>
+                        field.onChange(periodicityEnum.parse(value))
+                      }
+                      defaultValue={field.value}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="How often it should check" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="1m" disabled>
+                          1 minute
+                        </SelectItem>
+                        <SelectItem value="5m" disabled>
+                          5 minutes
+                        </SelectItem>
+                        <SelectItem value="10m">10 minutes</SelectItem>
+                        <SelectItem value="30m" disabled>
+                          30 minutes
+                        </SelectItem>
+                        <SelectItem value="1h" disabled>
+                          1 hour
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormDescription>
+                      You can manage email addresses in your{" "}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </form>
+        </Form>
+        <DialogFooter>
+          <Button type="submit" form="monitor" disabled={saving}>
+            {!saving ? "Confirm" : <Loader2 className="h-4 w-4 animate-spin" />}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/forms/status-page-form.tsx

···
+"use client";
+
+import { useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import { useForm } from "react-hook-form";
+import type * as z from "zod";
+
+import type { insertMonitorSchema } from "@openstatus/db/src/schema";
+import { insertPageSchema, periodicityEnum } from "@openstatus/db/src/schema";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/trpc/client";
+
+// EXAMPLE
+export function StatusPageCreateForm() {
+  const [saving, setSaving] = useState(false);
+  const [open, setOpen] = useState(false);
+  const params = useParams();
+  const router = useRouter();
+
+  const form = useForm<z.infer<typeof insertPageSchema>>({
+    resolver: zodResolver(insertPageSchema),
+    defaultValues: {
+      title: "",
+      slug: "",
+      description: "",
+      workspaceId: Number(params.workspaceId),
+    },
+  });
+
+  // either like that or with a user action
+  async function onSubmit(values: z.infer<typeof insertPageSchema>) {
+    setSaving(true);
+    // await api.monitor.getMonitorsByWorkspace.revalidate();
+    await api.page.createPage.mutate(values);
+    router.refresh();
+    setOpen(false);
+    setSaving(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => setOpen(value)}>
+      <DialogTrigger asChild>
+        <Button>Create</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create Monitor</DialogTitle>
+          <DialogDescription>Create a monitor</DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit, (e) => {
+              console.log(e);
+            })}
+            id="monitor"
+          >
+            <div className="grid w-full items-center  space-y-6">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Title</FormLabel>
+                    <FormControl>
+                      <Input placeholder="" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      This is title of your page.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="slug"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Slug</FormLabel>
+                    <FormControl>
+                      <Input placeholder="" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      This is your url of your page.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Input placeholder="" {...field} />
+                    </FormControl>
+                    <FormDescription>
+                      Give your user some information about it.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </form>
+        </Form>
+        <DialogFooter>
+          <Button type="submit" form="monitor" disabled={saving}>
+            {!saving ? "Confirm" : <Loader2 className="h-4 w-4 animate-spin" />}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/layout/app-sidebar.tsx

···
   const params = useParams();
   return (
     <ul className="grid gap-1">
-      {pagesConfig.map(({ title, href, icon, disabled }) => {
+      {pagesConfig.map(({ title, href, icon }) => {
         const Icon = Icons[icon];
         const link = `/app/${params.workspaceId}${href}`; // TODO: add
         return (
···
                 "hover:bg-muted/50 hover:text-foreground text-muted-foreground group flex w-full min-w-[200px] items-center rounded-md border border-transparent px-3 py-1",
                 pathname === link &&
                   "bg-muted/50 border-border text-foreground",
-                disabled && "pointer-events-none opacity-60",
               )}
             >
               <Icon className={cn("mr-2 h-4 w-4")} />

apps/web/src/components/ui/form.tsx

···
+import * as React from "react";
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import type { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+import { Controller, FormProvider, useFormContext } from "react-hook-form";
+
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-destructive text-sm font-medium", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

apps/web/src/config/pages.ts

···
     href: "",
     icon: "layout-dashboard",
   },
-  {
-    title: "Endpoints",
-    description: "Keep track of all your endpoints.",
-    href: "/endpoint",
-    icon: "link",
-  },
+
   {
     title: "Monitors",
     description: "Check all the responses in one place.",
-    href: "/monitor",
+    href: "/monitors",
     icon: "activity",
   },
   {
-    title: "Pages",
+    title: "Status Pages",
     description: "Wher you can see all the pages.",
-    href: "/page",
+    href: "/status-pages",
     icon: "panel-top",
   },
   {
     title: "Incidents",
     description: "War room where you handle the incidents.",
-    href: "/incident",
+    href: "/incidents",
     icon: "siren",
-    disabled: true,
   },
   // ...
 ] satisfies Page[];

apps/web/src/middleware.ts

···
       auth.userId &&
       (req.nextUrl.pathname === "/app" || req.nextUrl.pathname === "/app/")
     ) {
-      console.log(auth.userId);
       // improve on sign-up if the webhook has not been triggered yet
       const userQuery = db
         .select()

packages/db/src/schema/monitor.ts

···
   varchar,
 } from "drizzle-orm/mysql-core";
 import { createInsertSchema, createSelectSchema } from "drizzle-zod";
+import { z } from "zod";
 
 import { page } from "./page";
 import { workspace } from "./workspace";
···
     .default("inactive")
     .notNull(),
 
-  url: varchar("url", { length: 512 }),
+  url: varchar("url", { length: 512 }).notNull(),
 
-  name: varchar("name", { length: 256 }),
-  description: text("description"),
+  name: varchar("name", { length: 256 }).default("").notNull(),
+  description: text("description").default("").notNull(),
 
   pageId: int("page_id"),
   workspaceId: int("workspace_id"),
···
   }),
 }));
 
+export const periodicityEnum = z.enum([
+  "1m",
+  "5m",
+  "10m",
+  "30m",
+  "1h",
+  "other",
+]);
 // Schema for inserting a Monitor - can be used to validate API requests
-export const insertMonitorSchema = createInsertSchema(monitor);
+export const insertMonitorSchema = createInsertSchema(monitor, {
+  periodicity: periodicityEnum,
+  url: z.string().url(),
+});
 
 // Schema for selecting a Monitor - can be used to validate API responses
 export const selectMonitorSchema = createSelectSchema(monitor);

packages/db/src/schema/page.ts

···
   varchar,
 } from "drizzle-orm/mysql-core";
 import { createInsertSchema, createSelectSchema } from "drizzle-zod";
+import { z } from "zod";
 
 import { incident } from "./incident";
 import { monitor } from "./monitor";
···
 
   workspaceId: int("workspace_id").notNull(),
 
-  title: text("title"), // title of the page
+  title: text("title").notNull(), // title of the page
+  description: text("description").notNull(), // description of the page
   icon: varchar("icon", { length: 256 }), // icon of the page
-  slug: varchar("slug", { length: 256 }), // which is used for https://slug.openstatus.dev
-  customDomain: varchar("custom_domain", { length: 256 }),
+  slug: varchar("slug", { length: 256 }).notNull(), // which is used for https://slug.openstatus.dev
+  customDomain: varchar("custom_domain", { length: 256 }).notNull().default(""),
 
   // We should store settings of the page
   // theme
···
 }));
 
 // Schema for inserting a Page - can be used to validate API requests
-export const insertPageSchema = createInsertSchema(page);
+export const insertPageSchema = createInsertSchema(page, {
+  customDomain: z.string().optional(),
+});
 
 // Schema for selecting a Page - can be used to validate API responses
 export const selectPageSchema = createSelectSchema(page);

pnpm-lock.yaml

···
       '@clerk/nextjs':
         specifier: 4.21.14
         version: 4.21.14(next@13.4.8)(react-dom@18.2.0)(react@18.2.0)
+      '@hookform/resolvers':
+        specifier: ^3.1.1
+        version: 3.1.1(react-hook-form@7.45.1)
       '@openstatus/api':
         specifier: workspace:^
         version: link:../../packages/api
···
       react-dom:
         specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
+      react-hook-form:
+        specifier: ^7.45.1
+        version: 7.45.1(react@18.2.0)
       resend:
         specifier: ^0.15.3
         version: 0.15.3
···
       '@floating-ui/dom': 1.4.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@hookform/resolvers@3.1.1(react-hook-form@7.45.1):
+    resolution: {integrity: sha512-tS16bAUkqjITNSvbJuO1x7MXbn7Oe8ZziDTJdA9mMvsoYthnOOiznOTGBYwbdlYBgU+tgpI/BtTU3paRbCuSlg==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+    dependencies:
+      react-hook-form: 7.45.1(react@18.2.0)
     dev: false
 
   /@humanwhocodes/config-array@0.11.10:
···
       loose-envify: 1.4.0
       react: 18.2.0
       scheduler: 0.23.0
+    dev: false
+
+  /react-hook-form@7.45.1(react@18.2.0):
+    resolution: {integrity: sha512-6dWoFJwycbuFfw/iKMcl+RdAOAOHDiF11KWYhNDRN/OkUt+Di5qsZHwA0OwsVnu9y135gkHpTw9DJA+WzCeR9w==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18
+    dependencies:
+      react: 18.2.0
     dev: false
 
   /react-is@16.13.1: