Add new unit form

src/actions/inventory/units.ts

@@ -0,0 +1,9 @@
+"use server"
+
+import { type addUnitSchema } from "@/validations/inventory"
+import type { z } from "zod"
+
+export async function addNewUnit(input: z.infer<typeof addUnitSchema>) {
+  console.log(input.name, input.abbreviation)
+  return "success"
+}

src/app/(app)/app/inventory/units/new-unit/page.tsx

@@ -1,3 +1,30 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { AddUnitForm } from "@/components/forms/inventory/add-unit-form"
+import { SubSubHeader } from "@/components/inventory/subheaders/subsubheader"
+
 export default function AppInventoryUnitsNewUnitPage(): JSX.Element {
-  return <div className="p-5">App Inventory Units NewUnit Page</div>
+  return (
+    <div>
+      <SubSubHeader />
+      <div className="p-5">
+        <Card className="max-w-6xl rounded-md bg-tertiary">
+          <CardHeader className="px-5 pt-5">
+            <CardTitle className="text-2xl">New Unit</CardTitle>
+            <CardDescription className="text-base">
+              Define new unit
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="px-5 pt-2">
+            <AddUnitForm />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
 }

src/components/forms/inventory/add-unit-form.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import React from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { addNewUnit } from "@/actions/inventory/units"
+import { addUnitSchema } from "@/validations/inventory"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import type { z } from "zod"
+
+import { useToast } from "@/hooks/use-toast"
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Icons } from "@/components/icons"
+
+type AddUnitFormInputs = z.infer<typeof addUnitSchema>
+
+export function AddUnitForm(): JSX.Element {
+  const { toast } = useToast()
+  const router = useRouter()
+  const [isPending, startTransition] = React.useTransition()
+
+  const form = useForm<AddUnitFormInputs>({
+    resolver: zodResolver(addUnitSchema),
+    defaultValues: {
+      name: "",
+      abbreviation: "",
+    },
+  })
+
+  function onSubmit(formData: AddUnitFormInputs) {
+    startTransition(async () => {
+      try {
+        const response = await addNewUnit({
+          name: formData.name,
+          abbreviation: formData.abbreviation,
+        })
+
+        if (response === "success") {
+          toast({ title: "Success!", description: "New unit added" })
+        }
+
+        router.push("/app/inventory/units")
+      } catch (error) {
+        toast({
+          title: "Something wend wrong",
+          description: "Please try again",
+          variant: "destructive",
+        })
+      }
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        className="grid w-full gap-5"
+        onSubmit={(...args) => void form.handleSubmit(onSubmit)(...args)}
+      >
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem className="w-1/2">
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input type="text" placeholder="Add unit name" {...field} />
+              </FormControl>
+              <FormMessage className="pt-2 sm:text-sm" />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="abbreviation"
+          render={({ field }) => (
+            <FormItem className="w-1/2">
+              <FormLabel>Abbreviation</FormLabel>
+              <FormControl>
+                <Input
+                  type="text"
+                  placeholder="Add unit abbreviation"
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage className="pt-2 sm:text-sm" />
+            </FormItem>
+          )}
+        />
+
+        <div className=" flex items-center gap-2 pt-2">
+          <Button disabled={isPending} aria-label="Add Unit" className="w-fit">
+            {isPending ? (
+              <>
+                <Icons.spinner
+                  className="mr-2 h-4 w-4 animate-spin"
+                  aria-hidden="true"
+                />
+                <span>Adding...</span>
+              </>
+            ) : (
+              <span>Add Unit</span>
+            )}
+            <span className="sr-only">Add Unit</span>
+          </Button>
+
+          <Link
+            href="/app/inventory/categories"
+            className={cn(buttonVariants({ variant: "ghost" }), "w-fit")}
+          >
+            Cancel
+          </Link>
+        </div>
+      </form>
+    </Form>
+  )
+}

src/validations/inventory.ts

@@ -13,3 +13,8 @@ export const addItemSchema = z.object({
   unit: z.string(),
   returnable: z.boolean(),
 })
+
+export const addUnitSchema = z.object({
+  name: z.string(),
+  abbreviation: z.string(),
+})