improve title styling

This reverts commit 2294d0c0b0.

.env

@@ -0,0 +1,7 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+DATABASE_URL="file:./dev.db"

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package.json

@@ -1,27 +1,57 @@
 {
   "name": "subman-nextjs",
-  "type":"module",
+  "type": "module",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "tailwind": "npx tailwindcss -i ./src/app/globals.css -o ./src/app/tailwind.css --watch"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.6.0",
     "@prisma/client": "^5.15.0",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-context-menu": "^2.2.1",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@tanstack/react-table": "^8.17.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "lucide-react": "^0.394.0",
     "next": "14.2.3",
+    "next-themes": "^0.3.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18",
+    "react-hook-form": "^7.51.5",
+    "recharts": "^2.12.7",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^8",
+    "autoprefixer": "^10.4.19",
     "eslint-config-next": "14.2.3",
+    "postcss": "^8.4.38",
     "prisma": "^5.15.0",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5"
+  },
+  "overrides": {
+    "@radix-ui/react-dismissable-layer": "^1.0.5",
+    "@radix-ui/react-focus-scope": "^1.0.4"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

prisma/migrations/20240619155421_init/migration.sql

@@ -0,0 +1,19 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Sub" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "storyId" INTEGER,
+    "pubId" INTEGER,
+    "submitted" TEXT NOT NULL,
+    "responded" TEXT,
+    "responseId" INTEGER,
+    CONSTRAINT "Sub_storyId_fkey" FOREIGN KEY ("storyId") REFERENCES "Story" ("id") ON DELETE SET NULL ON UPDATE CASCADE,
+    CONSTRAINT "Sub_pubId_fkey" FOREIGN KEY ("pubId") REFERENCES "Pub" ("id") ON DELETE SET NULL ON UPDATE CASCADE,
+    CONSTRAINT "Sub_responseId_fkey" FOREIGN KEY ("responseId") REFERENCES "Response" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+INSERT INTO "new_Sub" ("id", "pubId", "responded", "responseId", "storyId", "submitted") SELECT "id", "pubId", "responded", "responseId", "storyId", "submitted" FROM "Sub";
+DROP TABLE "Sub";
+ALTER TABLE "new_Sub" RENAME TO "Sub";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

prisma/migrations/20240619155628_init/migration.sql

@@ -0,0 +1,19 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `deleted` on the `Story` table. All the data in the column will be lost.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Story" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "word_count" INTEGER NOT NULL,
+    "title" TEXT NOT NULL
+);
+INSERT INTO "new_Story" ("id", "title", "word_count") SELECT "id", "title", "word_count" FROM "Story";
+DROP TABLE "Story";
+ALTER TABLE "new_Story" RENAME TO "Story";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

prisma/migrations/20240619155716_init/migration.sql

@@ -0,0 +1,20 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `deleted` on the `Pub` table. All the data in the column will be lost.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Pub" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "title" TEXT NOT NULL,
+    "link" TEXT NOT NULL DEFAULT '',
+    "query_after_days" INTEGER NOT NULL
+);
+INSERT INTO "new_Pub" ("id", "link", "query_after_days", "title") SELECT "id", "link", "query_after_days", "title" FROM "Pub";
+DROP TABLE "Pub";
+ALTER TABLE "new_Pub" RENAME TO "Pub";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

prisma/schema.prisma

@@ -14,7 +14,6 @@ model Story {
   id         Int     @id @default(autoincrement())
   word_count Int
   title      String
-  deleted    Int     @default(0)
   subs       Sub[]
   genres     Genre[]
 }
@@ -24,7 +23,6 @@ model Pub {
   title            String
   link             String  @default("")
   query_after_days Int
-  deleted          Int     @default(0)
   subs             Sub[]
   genres           Genre[]
 }
@@ -44,12 +42,12 @@ model Response {
 
 model Sub {
   id         Int      @id @default(autoincrement())
-  story      Story    @relation(fields: [storyId], references: [id])
+  story      Story?    @relation(fields: [storyId], references: [id])
-  storyId    Int
+  storyId    Int?
-  pub        Pub      @relation(fields: [pubId], references: [id])
+  pub        Pub?      @relation(fields: [pubId], references: [id])
-  pubId      Int
+  pubId      Int?
   submitted  String
-  responded  String
+  responded  String?
-  response   Response @relation(fields: [responseId], references: [id])
+  response   Response? @relation(fields: [responseId], references: [id])
-  responseId Int
+  responseId Int?
 }

src/@/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-accent text-accent-foreground",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+  VariantProps<typeof badgeVariants> { }
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

src/@/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

src/@/components/ui/calendar.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

src/@/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/@/components/ui/context-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

src/@/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

src/@/components/ui/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

src/@/components/ui/form.tsx

@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+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-sm text-muted-foreground", 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-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

src/@/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> { }
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

src/@/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-base font-bold leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

src/@/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

src/@/components/ui/select.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

src/@/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/@/components/ui/toast.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

src/@/components/ui/toaster.tsx

@@ -0,0 +1,35 @@
+"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(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

src/@/components/ui/use-toast.ts

@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

src/@/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/app/globals.css

@@ -1,107 +1,160 @@
-:root {
+@tailwind base;
-  --max-width: 1100px;
+@tailwind components;
-  --border-radius: 12px;
+@tailwind utilities;
-  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
-    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
-    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
-  --foreground-rgb: 0, 0, 0;
+/**/
-  --background-start-rgb: 214, 219, 220;
+/* @layer base { */
-  --background-end-rgb: 255, 255, 255;
+/*   :root { */
+/*     --background: 43 62% 98%; */
+/*     --foreground: 43 73% 2%; */
+/*     --muted: 43 24% 85%; */
+/*     --muted-foreground: 43 10% 37%; */
+/*     --popover: 43 62% 98%; */
+/*     --popover-foreground: 43 73% 2%; */
+/*     --card: 43 62% 98%; */
+/*     --card-foreground: 43 73% 2%; */
+/*     --border: 43 15% 91%; */
+/*     --input: 43 15% 91%; */
+/*     --primary: 43 50% 69%; */
+/*     --primary-foreground: 43 50% 9%; */
+/*     --secondary: 43 6% 92%; */
+/*     --secondary-foreground: 43 6% 32%; */
+/*     --accent: 43 13% 83%; */
+/*     --accent-foreground: 43 13% 23%; */
+/*     --destructive: 8 84% 20%; */
+/*     --destructive-foreground: 8 84% 80%; */
+/*     --ring: 43 50% 69%; */
+/*     --radius: 0.5rem; */
+/*   } */
+/**/
+/*   .dark { */
+/*     --background: 43 48% 4%; */
+/*     --foreground: 43 26% 97%; */
+/*     --muted: 43 24% 15%; */
+/*     --muted-foreground: 43 10% 63%; */
+/*     --popover: 43 48% 4%; */
+/*     --popover-foreground: 43 26% 97%; */
+/*     --card: 43 48% 4%; */
+/*     --card-foreground: 43 26% 97%; */
+/*     --border: 43 15% 13%; */
+/*     --input: 43 15% 13%; */
+/*     --primary: 43 50% 69%; */
+/*     --primary-foreground: 43 50% 9%; */
+/*     --secondary: 43 8% 18%; */
+/*     --secondary-foreground: 43 8% 78%; */
+/*     --accent: 43 14% 23%; */
+/*     --accent-foreground: 43 14% 83%; */
+/*     --destructive: 8 84% 52%; */
+/*     --destructive-foreground: 0 0% 100%; */
+/*     --ring: 43 50% 69%; */
+/*   } */
+/* } */
 
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
 
-  --tile-start-rgb: 239, 245, 249;
+@layer base {
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
+    --background: 220 0% 96%;
-    --background-start-rgb: 0, 0, 0;
+    --foreground: 222.2 84% 4.9%;
-    --background-end-rgb: 0, 0, 0;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --primary: 144.91 90% 32%;
+    --primary-foreground: 75 10% 97.84%;
+    --secondary: 240 0% 100%;
+    --secondary-foreground: 150 95% 30%;
+    --accent: 150 55% 95%;
+    --accent-foreground: 155 100% 20%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 0% 100%;
+    --ring: 150 100% 40%;
+    --radius: 0.5rem;
+  }
 
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+  .dark {
-    --secondary-glow: linear-gradient(
+    --background: 222.2 40% 4%;
-      to bottom right,
+    --foreground: 210 40% 98%;
-      rgba(1, 65, 255, 0),
+    --muted: 217.2 32.6% 17.5%;
-      rgba(1, 65, 255, 0),
+    --muted-foreground: 215 20.2% 65.1%;
-      rgba(1, 65, 255, 0.3)
+    --popover: 230 25% 10%;
-    );
+    --popover-foreground: 210 40% 98%;
-
+    --card: 222.2 20% 6%;
-    --tile-start-rgb: 2, 13, 46;
+    --card-foreground: 210 40% 98%;
-    --tile-end-rgb: 2, 5, 19;
+    --border: 217.2 20% 10%;
-    --tile-border: conic-gradient(
+    --input: 217.2 32.6% 17.5%;
-      #ffffff80,
+    --primary: 155 70% 35%;
-      #ffffff40,
+    --primary-foreground: 80 10% 97.84%;
-      #ffffff30,
+    --secondary: 200 50% 98%;
-      #ffffff20,
+    --secondary-foreground: 155 85% 30%;
-      #ffffff10,
+    --accent: 170 60% 10%;
-      #ffffff10,
+    --accent-foreground: 155 60% 65%;
-      #ffffff80
+    --destructive: 5 90% 65%;
-    );
+    --destructive-foreground: 0 100% 10%;
-
+    --ring: 160 90% 45%;
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
   }
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
 
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
 
-body {
+/**/
-  color: rgb(var(--foreground-rgb));
+/* @layer base { */
-  background: linear-gradient(
+/*   :root { */
-      to bottom,
+/*     --background: 258 70% 100%; */
-      transparent,
+/*     --foreground: 258 77% 0%; */
-      rgb(var(--background-end-rgb))
+/*     --muted: 258 29% 85%; */
-    )
+/*     --muted-foreground: 258 10% 40%; */
-    rgb(var(--background-start-rgb));
+/*     --popover: 258 70% 100%; */
-}
+/*     --popover-foreground: 258 77% 0%; */
+/*     --card: 258 70% 100%; */
+/*     --card-foreground: 258 77% 0%; */
+/*     --border: 220 13% 91%; */
+/*     --input: 220 13% 91%; */
+/*     --primary: 258 58% 37%; */
+/*     --primary-foreground: 258 58% 97%; */
+/*     --secondary: 258 19% 81%; */
+/*     --secondary-foreground: 258 19% 21%; */
+/*     --accent: 258 19% 81%; */
+/*     --accent-foreground: 258 19% 21%; */
+/*     --destructive: 19 98% 27%; */
+/*     --destructive-foreground: 19 98% 87%; */
+/*     --ring: 258 58% 37%; */
+/*     --radius: 0.5rem; */
+/*   } */
+/**/
+/*   .dark { */
+/*     --background: 258 53% 3%; */
+/*     --foreground: 258 40% 97%; */
+/*     --muted: 258 29% 15%; */
+/*     --muted-foreground: 258 10% 60%; */
+/*     --popover: 258 53% 3%; */
+/*     --popover-foreground: 258 40% 97%; */
+/*     --card: 258 53% 3%; */
+/*     --card-foreground: 258 40% 97%; */
+/*     --border: 215 27.9% 16.9%; */
+/*     --input: 215 27.9% 16.9%; */
+/*     --primary: 258 58% 37%; */
+/*     --primary-foreground: 258 58% 97%; */
+/*     --secondary: 258 15% 10%; */
+/*     --secondary-foreground: 258 15% 70%; */
+/*     --accent: 258 15% 10%; */
+/*     --accent-foreground: 258 15% 70%; */
+/*     --destructive: 19 98% 46%; */
+/*     --destructive-foreground: 0 0% 100%; */
+/*     --ring: 258 58% 37%; */
+/*   } */
+/* } */
 
-a {
-  color: inherit;
-  text-decoration: none;
-}
 
-@media (prefers-color-scheme: dark) {
+@layer base {
-  html {
+  * {
-    color-scheme: dark;
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
   }
 }

src/app/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/app/layout.tsx

@@ -1,14 +1,21 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+
+import { ThemeProvider } from "./ui/theme";
+import { Toaster } from "@/components/ui/toaster";
 import "./globals.css";
+import Navlinks from "./ui/navLinks";
+import { ModeToggle } from "./ui/modeToggle";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Subman",
-  description: "Generated by create next app",
+  description: "A self-hosted literary submission tracker."
 };
 
+
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -17,10 +24,29 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <div id="sidebar">
+        <ThemeProvider
-          SIDEBAR
+          attribute="class"
-        </div>
+          defaultTheme="system"
-        {children}</body>
+          enableSystem
-    </html>
+          disableTransitionOnChange
+        >
+          <div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
+            <div className="w-5/6 flex">
+              <div id="sidebar" className="h-5/6 flex flex-col"> <header className="">
+                <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4">SubMan</h1>
+                <p className="mt-2 mx-1 text-sm antialiased w-40">The self-hosted literary submission tracker.</p>
+              </header>
+                <Navlinks className="mt-6" />
+                <footer className="mt-auto"><ModeToggle /></footer>
+              </div>
+              <div className="flex justify-center w-full">
+                {children}
+              </div>
+            </div>
+          </div>
+          <Toaster />
+        </ThemeProvider>
+      </body>
+    </html >
   );
 }

src/app/lib/create.ts

@@ -0,0 +1,59 @@
+"use server"
+import { Genre, Story } from "@prisma/client"
+import prisma from "./db"
+import { revalidatePath } from "next/cache"
+import { redirect } from "next/navigation"
+
+export async function createStory(data: Story & { genres: number[] }) {
+	"use server"
+	const genresArray = data.genres.map((e) => { return { id: e } })
+	const res = await prisma.story.create({
+		data: {
+			title: data.title,
+			word_count: data.word_count,
+		}
+	})
+	console.log(res)
+	const genresRes = await prisma.story.update({
+		where: { id: res.id },
+		data: {
+			genres: { set: genresArray }
+		}
+	})
+	console.log(genresRes)
+	revalidatePath("/story")
+	redirect("/story")
+}
+
+
+export async function createPub(data) {
+	"use server"
+	const genresArray = data.genres.map(e => { return { id: e } })
+	const res = await prisma.pub.create({
+		data: {
+			title: data.title,
+			link: data.link,
+			query_after_days: data.query_after_days
+		}
+	})
+	console.log(res)
+	const genresRes = await prisma.pub.update({
+		where: { id: res.id },
+		data:
+			{ genres: { set: genresArray } }
+	})
+	console.log(genresRes)
+	revalidatePath("/publication")
+	redirect("/publication")
+}
+
+
+
+export async function createSub(data) {
+	"use server"
+	const res = await prisma.sub.create({ data })
+	console.log(res)
+	revalidatePath("/submission")
+	redirect("/submission")
+
+}

src/app/lib/del.ts

@@ -0,0 +1,33 @@
+"use server"
+import { revalidatePath } from "next/cache";
+import prisma from "./db";
+import { redirect } from "next/navigation";
+import { Pathname } from "app/types";
+
+const tableMap = {
+	"/story": "story",
+	"/publication": "pub",
+	"/submission": "sub"
+}
+
+export async function deleteRecord(id: number, pathname: Pathname) {
+	const table = tableMap[pathname]
+	const res = await prisma[table].delete({ where: { id } })
+	console.log(`deleted from ${table}: ${res.id}`)
+	console.log("revalidating: " + pathname)
+	revalidatePath(pathname)
+	redirect(pathname)
+}
+
+export async function deleteRecords(ids: number[], pathname: "/story" | "/publication" | "/submission") {
+	const table = tableMap[pathname]
+	ids.forEach(async (id) => {
+		const res = await prisma[table].delete({
+			where: { id }
+		})
+		console.log(`deleted from ${table}: ${res.id}`)
+	})
+	revalidatePath(pathname)
+	redirect(pathname)
+}
+

src/app/lib/edit.ts

@@ -0,0 +1,15 @@
+"use server"
+import prisma from "./db"
+import { revalidatePath } from "next/cache"
+import { redirect } from "next/navigation"
+import { SubForm } from "app/ui/forms/sub"
+
+export async function editSubmission(data: SubForm) {
+	const res = await prisma.sub.update({
+		where: { id: data.id },
+		data
+	})
+	console.log(`updated ${data} to ${res}`)
+	revalidatePath("/submission")
+	redirect("/submission")
+}

src/app/lib/functions.ts

@@ -0,0 +1,3 @@
+export function letterCase(str: String) {
+	return str.charAt(0).toUpperCase() + str.slice(1)
+}

src/app/lib/get.ts

@@ -0,0 +1,53 @@
+"use server"
+import prisma from "./db"
+export async function getStories() {
+	return prisma.story.findMany()
+}
+export async function getStoriesWithGenres() {
+	return prisma.story.findMany(
+		{
+			include: {
+				genres: true
+			}
+		}
+
+	)
+}
+export async function getStoriesWithGenresAndSubs() {
+	return prisma.story.findMany({
+		include: {
+			genres: true,
+			subs: true
+		}
+	})
+}
+
+export async function getPubs() {
+	return prisma.pub.findMany()
+}
+export async function getPubsWithGenres() {
+	return prisma.pub.findMany({
+		include: { genres: true }
+	})
+}
+
+export async function getGenres() {
+	return prisma.genre.findMany()
+}
+export async function getResponses() {
+	return prisma.response.findMany()
+}
+
+export async function getSubs() {
+	return prisma.sub.findMany()
+}
+
+export async function getSubsComplete() {
+	return prisma.sub.findMany({
+		include: {
+			story: true,
+			pub: true,
+			response: true
+		}
+	})
+}

src/app/lib/nameMaps.ts

@@ -0,0 +1,8 @@
+export function tableNameToItemName(tableName: string) {
+	const map = {
+		subs: "submission",
+		pubs: "publication",
+		story: "story"
+	}
+	return map[tableName]
+}

src/app/lib/pluralize.ts

@@ -0,0 +1,8 @@
+export default function pluralize(word: "story" | "publication" | "submission"): string {
+	const map = {
+		story: "stories",
+		publication: "publications",
+		submission: "submissions"
+	}
+	return map[word]
+}

src/app/lib/shortStoryTitleGenerator.tsx

@@ -0,0 +1,35 @@
+function randomArrayItem(array: Array<string>) {
+  return array[Math.floor(Math.random() * (array.length - 1))]
+
+}
+
+
+export function randomStoryTitle() {
+  const titles = [
+    "The Signalman",
+    "The Time Machine",
+    "The Lawnmover Man",
+    "La Casa de Adela",
+    "The Tell-Tale Heart",
+    "The Lottery",
+    "The Birds",
+    "The Minority Report",
+    "The Bear Came Over the Mountain"
+  ]
+  return randomArrayItem(titles)
+}
+
+export function randomPublicationTitle() {
+  const titles = [
+    "Nightmare Magazine",
+    "Apex",
+    "The Dark",
+    "Reader's Digest",
+    "The New Yorker",
+    "Short Story Magazine",
+    "Weird Tales",
+    "Detective Stories"
+  ]
+  return randomArrayItem(titles)
+}
+

src/app/lib/update.ts

@@ -0,0 +1,30 @@
+"use server"
+import { Genre } from "@prisma/client"
+import prisma from "./db"
+import { revalidatePath } from "next/cache"
+import { redirect } from "next/navigation"
+
+
+export async function updateField({ datum, table, column, id, pathname }: { datum?: string | number | Genre[], table: string, column: string, id: number, pathname: string }) {
+	const res = await prisma[table].update({
+		where: { id },
+		data: {
+			[column]: datum
+		}
+	})
+	console.log(`updated record in ${table}: ${JSON.stringify(res)}`)
+	revalidatePath(pathname)
+	redirect(pathname)
+}
+
+export async function updateGenres({ genres, table, id, pathname }: { genres: { id: number }[], table: string, id: number, pathname: string }) {
+	const res = await prisma[table].update({
+		where: { id },
+		data: {
+			genres: { set: genres }
+		}
+	})
+	console.log(`updated record in ${table}: ${JSON.stringify(res)}`)
+	revalidatePath(pathname)
+	redirect(pathname)
+}

src/app/loading.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils"
+import { ComponentProps } from "react"
+export const LoadingSpinner = ({ className }: ComponentProps<"svg">) => {
+  return <div className="size-full flex justify-center items-center z">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100"
+      height="100"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("animate-spin", className)}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  </div>
+}
+export default function Loading() {
+  return (
+    <LoadingSpinner />
+  )
+}

src/app/page.tsx

@@ -5,7 +5,9 @@ export default function Home() {
   return (
     <main className={styles.main}>
       Hello
-
+      <h1 className="text-3xl font-black underline">
+        Hello world!
+      </h1>
     </main>
   );
 }

src/app/publication/[id]/page.tsx

@@ -0,0 +1,37 @@
+import prisma from "app/lib/db";
+import { columns } from "app/submission/columns";
+import GenreBadges from "app/ui/genreBadges";
+import { PageHeader, PageSubHeader } from "app/ui/pageHeader";
+import { DataTable } from "app/ui/tables/data-table";
+
+async function getPubWithGenres(id: string) {
+  return prisma.pub.findFirst({
+    where: { id: Number(id) },
+    include: { genres: true }
+  })
+}
+
+async function getPubSubmissions(id: string) {
+  return prisma.sub.findMany({
+    where: { storyId: Number(id) },
+    include: {
+      story: true,
+      pub: true,
+      response: true
+    }
+  })
+}
+
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const pub = await getPubWithGenres(params.id)
+  const pubSubs = await getPubSubmissions(params.id)
+  return (
+    <div className="container">
+      <PageHeader>{pub.title}</PageHeader>
+      <GenreBadges genres={pub.genres} className="my-6" />
+      <PageSubHeader>Submissions:</PageSubHeader>
+      <DataTable columns={columns} data={pubSubs} type="submission" />
+    </div>
+  )
+}

src/app/publication/columns.tsx

@@ -0,0 +1,59 @@
+"use client"
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+import { ArrowUpDown } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { PubsWithGenres } from "./page"
+import { TextInputCell } from "app/ui/tables/inputs/textInput"
+import { selectCol } from "app/ui/tables/selectColumn"
+import NumberInputCell from "app/ui/tables/inputs/numberInput"
+import { formSchema } from "app/ui/forms/pub"
+import GenrePickerInputCell from "app/ui/tables/inputs/genrePickerInput"
+
+
+const columnHelper = createColumnHelper<PubsWithGenres>()
+
+export const columns: ColumnDef<PubsWithGenres>[] = [
+  selectCol,
+  {
+    accessorKey: "title",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Title
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
+    cell: TextInputCell,
+    meta: { formSchema }
+  },
+
+  {
+    accessorKey: "link",
+    header: "Link",
+    cell: TextInputCell,
+    meta: { formSchema }
+  },
+
+  columnHelper.accessor("genres", {
+    cell: GenrePickerInputCell,
+    filterFn: "arrIncludes"
+    //TODO - write custom filter function, to account for an array of objects
+  }),
+
+  {
+    accessorKey: "query_after_days",
+    header: "Query After (days)",
+    cell: NumberInputCell,
+    meta: {
+      step: 10,
+      formSchema
+    },
+
+  },
+]
+

src/app/publication/create.tsx

@@ -0,0 +1,30 @@
+"use client"
+import { Dialog, DialogHeader, DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ComponentProps } from "react";
+import { Genre } from "@prisma/client";
+import { createPub } from "app/lib/create";
+import PubForm from "app/ui/forms/pub";
+
+export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
+
+  return (
+
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Create new publication</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New publication</DialogTitle>
+          <DialogDescription>Create an entry for a new publication i.e. a place you intend to submit stories to.</DialogDescription>
+        </DialogHeader>
+        <PubForm createPub={createPub} genres={genres} />
+        <DialogFooter>
+          <Button form="pubform">Submit</Button>
+        </DialogFooter>
+
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/publication/loading.tsx

@@ -0,0 +1,5 @@
+import { LoadingSpinner } from "app/loading";
+
+export default function Loading() {
+  return <LoadingSpinner />
+}

src/app/publication/page.tsx

@@ -0,0 +1,22 @@
+import { Genre, Pub } from "@prisma/client";
+import { getGenres, getPubsWithGenres } from "app/lib/get";
+import { columns } from "./columns";
+import { DataTable } from "app/ui/tables/data-table";
+import CreatePubDialog from "./create";
+
+export type PubsWithGenres = Pub & { genres: Array<Genre> }
+
+
+
+export default async function Page() {
+  const genres = await getGenres()
+  const pubs = await getPubsWithGenres()
+  return (
+    <div className="container mx-auto">
+      <DataTable data={pubs} columns={columns} tableName="pubs" genres={genres}>
+        <CreatePubDialog genres={genres} />
+      </DataTable>
+
+    </div>
+  )
+}

src/app/rose-pine.css

@@ -0,0 +1,53 @@
+.theme-rp {
+  --rp-base: 249 22 12;
+  --rp-surface: 247 23 15;
+  --rp-overlay: 248 25 18;
+  --rp-muted: 249 12 47;
+  --rp-subtle: 248 15 61;
+  --rp-text: 245 50 91;
+  --rp-love: 343 76 68;
+  --rp-gold: 35 88 72;
+  --rp-rose: 2 55 83;
+  --rp-pine: 197 49 38;
+  --rp-foam: 189 43 73;
+  --rp-iris: 267 57 78;
+  --rp-highlight-low: 244 18 15;
+  --rp-highlight-med: 249 15 28;
+  --rp-highlight-high: 248 13 36;
+}
+
+.theme-rp-moon {
+  --rp-base: 246 24 17;
+  --rp-surface: 248 24 20;
+  --rp-overlay: 248 21 26;
+  --rp-muted: 249 12 47;
+  --rp-subtle: 248 15 61;
+  --rp-text: 245 50 91;
+  --rp-love: 343 76 68;
+  --rp-gold: 35 88 72;
+  --rp-rose: 2 66 75;
+  --rp-pine: 197 48 47;
+  --rp-foam: 189 43 73;
+  --rp-iris: 267 57 78;
+  --rp-highlight-low: 245 22 20;
+  --rp-highlight-med: 247 16 30;
+  --rp-highlight-high: 249 15 38;
+}
+
+.theme-rp-dawn {
+  --rp-base: 32 57 95;
+  --rp-surface: 35 100 98;
+  --rp-overlay: 33 43 91;
+  --rp-muted: 257 9 61;
+  --rp-subtle: 248 12 52;
+  --rp-text: 248 19 40;
+  --rp-love: 343 35 55;
+  --rp-gold: 35 81 56;
+  --rp-rose: 3 53 67;
+  --rp-pine: 197 53 34;
+  --rp-foam: 189 30 48;
+  --rp-iris: 268 21 57;
+  --rp-highlight-low: 25 35 93;
+  --rp-highlight-med: 10 9 86;
+  --rp-highlight-high: 315 4 80;
+}

src/app/story/[id]/page.tsx

@@ -0,0 +1,41 @@
+import prisma from "app/lib/db"
+import { columns } from "app/submission/columns"
+import { PageHeader, PageSubHeader } from "app/ui/pageHeader"
+import { DataTable } from "app/ui/tables/data-table"
+import GenreBadges from "app/ui/genreBadges"
+
+//ids are string here because they're coming from url params
+async function getStoryWithGenres(id: string) {
+  return prisma.story.findFirst({
+    where: { id: Number(id) }, include: {
+      genres: true
+    }
+  })
+}
+async function getStorySubmissions(id: string) {
+  return prisma.sub.findMany({
+    where: { storyId: Number(id) }, include: {
+      story: true,
+      pub: true,
+      response: true
+    }
+  })
+}
+
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const story = await getStoryWithGenres(params.id)
+  const storySubs = await getStorySubmissions(params.id)
+  return <>
+    <div className="container">
+      <PageHeader>{story?.title ?? ""}</PageHeader>
+      <GenreBadges genres={story.genres} className="my-6" />
+      <PageSubHeader>Submissions:</PageSubHeader>
+      <DataTable columns={columns} data={storySubs} tableName="subs" />
+
+    </div>
+
+  </>
+}
+
+

src/app/story/[slug]/page.tsx

@@ -1,3 +0,0 @@
-export default function Page({ params }: { params: { slug: string } }) {
-  return <div>My Post: {params.slug}</div>
-}

src/app/story/columns.tsx

@@ -0,0 +1,60 @@
+"use client"
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+import { StoryWithGenres } from "./page"
+import { ArrowUpDown } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import GenreBadges from "app/ui/genreBadges"
+import { selectCol } from "app/ui/tables/selectColumn"
+import NumberInputCell from "app/ui/tables/inputs/numberInput"
+import { formSchema } from "app/ui/forms/story"
+import { TextInputCell } from "app/ui/tables/inputs/textInput"
+import GenrePickerInputCell from "app/ui/tables/inputs/genrePickerInput"
+const columnHelper = createColumnHelper<StoryWithGenres>()
+
+export const columns: ColumnDef<StoryWithGenres>[] = [
+  selectCol,
+  {
+    accessorKey: "title",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Title
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
+    cell: TextInputCell,
+    meta: { formSchema }
+
+  },
+  {
+    accessorKey: "word_count",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Word Count
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
+    enableColumnFilter: false,
+    cell: NumberInputCell,
+    meta: {
+      step: 50,
+      formSchema
+    }
+  },
+  columnHelper.accessor("genres", {
+    cell: GenrePickerInputCell,
+    filterFn: "arrIncludes",
+    meta: {}
+  }),
+
+]
+

src/app/story/create.tsx

@@ -0,0 +1,31 @@
+"use client"
+import { createStory } from "app/lib/create"
+import { Dialog, DialogHeader, DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ComponentProps } from "react";
+import { Genre } from "@prisma/client";
+import StoryForm from "app/ui/forms/story";
+
+
+export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Create new story</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New story</DialogTitle>
+          <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
+        </DialogHeader>
+        <StoryForm createStory={createStory} genres={genres} existingData={null} />
+        <DialogFooter>
+          <Button form="storyform">Submit</Button>
+        </DialogFooter>
+
+      </DialogContent>
+    </Dialog>
+  )
+}
+

src/app/story/create/page.tsx

@@ -0,0 +1,38 @@
+import { getGenres } from "app/lib/get";
+import StoryForm from "app/ui/forms/story";
+import prisma from "app/lib/db";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { CreateContainerContent, CreateContainerHeader, CreateContainer, CreateContainerDescription } from "app/ui/createContainer";
+export default async function Page() {
+	const genres = await getGenres()
+	async function createStory(data) {
+		"use server"
+		const genresArray = data.genres.map(e => { return { id: e } })
+		const res = await prisma.story.create({
+			data: {
+				title: data.title,
+				word_count: data.word_count,
+			}
+		})
+		console.log(res)
+		const genresRes = await prisma.story.update({
+			where: { id: res.id },
+			data: {
+				genres: { set: genresArray }
+			}
+		})
+		console.log(genresRes)
+		revalidatePath("/story")
+		redirect("/story")
+	}
+	return (
+		<CreateContainer>
+			<CreateContainerHeader>New story</CreateContainerHeader>
+			<CreateContainerContent>
+				<CreateContainerDescription>Make an entry for a new work of fiction i.e. a thing you intend to submit for publication.</CreateContainerDescription>
+				<StoryForm genres={genres} createStory={createStory} className="mt-6" />
+			</CreateContainerContent>
+		</CreateContainer>
+	)
+}

src/app/story/loading.tsx

@@ -0,0 +1,5 @@
+import { LoadingSpinner } from "app/loading";
+
+export default function Loading() {
+  return <LoadingSpinner />
+}

src/app/story/page.tsx

@@ -0,0 +1,33 @@
+import { Story } from "@prisma/client";
+import { DataTable } from "app/ui/tables/data-table";
+import { columns } from "./columns";
+import { getGenres, getStoriesWithGenres, getPubsWithGenres } from "app/lib/get";
+import { Genre } from "@prisma/client";
+import CreateStoryDialog from "./create";
+
+export type StoryWithGenres = Story & { genres: Array<Genre> }
+
+
+
+
+
+
+export default async function Page() {
+  const genres = await getGenres()
+  const storiesWithGenres: Array<StoryWithGenres> = await getStoriesWithGenres()
+
+
+
+  return (
+    <div className="container mx-auto">
+      <DataTable columns={columns} data={storiesWithGenres} tableName="story"
+        genres={genres}
+      >
+        <CreateStoryDialog genres={genres} />
+      </DataTable>
+    </div>
+  )
+}
+
+
+

src/app/submission/charts.tsx

@@ -0,0 +1,39 @@
+"use client"
+import { LineChart, Line, CartesianGrid, XAxis, YAxis, PieChart, Pie } from "recharts"
+import { SubComplete } from "./page"
+export function SubsChart({ data }: { data: Array<SubComplete> }) {
+  const pieData: Array<{ story: string, occurrences: number }> = []
+  data.forEach(dataRow => {
+    const story = dataRow.story.title
+    const exists = pieData.findIndex(pieRow => story === pieRow.story)
+    if (exists === -1) {
+      //add the story to pieData if it doesn't already exist
+      pieData.push({ story: story, occurrences: 0 })
+      return
+    }
+    pieData[exists].occurrences++
+  })
+  console.log(pieData)
+
+
+
+  return (
+    <>
+      <PieChart width={400} height={400}>
+        <Pie data={pieData} dataKey="story" outerRadius={50} fill="teal" />
+      </PieChart>
+
+
+
+
+      <LineChart width={400} height={400} data={data}>
+        <Line type="monotone" dataKey="id" stroke="#8884d8" />
+        <CartesianGrid />
+        <XAxis dataKey="submitted" />
+        <YAxis />
+
+      </LineChart>
+    </>
+
+  )
+}

src/app/submission/columns.tsx

@@ -0,0 +1,84 @@
+"use client"
+import { CellContext, ColumnDef, createColumnHelper } from "@tanstack/react-table"
+import { ArrowUpDown } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { SubComplete } from "./page"
+import { selectCol } from "app/ui/tables/selectColumn"
+import TitleContainer from "app/ui/titleContainer"
+
+
+
+export const columns: ColumnDef<SubComplete>[] = [
+  selectCol,
+  {
+    accessorFn: row => {
+      if (row.story) {
+        return row.story.title
+      }
+      return "RECORD DELETED"
+    },
+    id: "story",
+    header: "Story",
+    cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
+  },
+  {
+    accessorFn: row => {
+      if (row.pub) {
+        return row.pub.title
+      }
+      return "RECORD DELETED"
+    },
+    id: "pub",
+    header: "Publication",
+    cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
+  },
+  {
+    accessorFn: row => new Date(row.submitted),
+    id: "submitted",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Date Submitted
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
+    enableColumnFilter: false,
+    sortingFn: "datetime",
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue().toLocaleDateString()}</p>)
+  },
+  {
+    accessorFn: row => row.responded ? new Date(row.responded) : null,
+    id: "responded",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Date Responded
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
+    enableColumnFilter: false,
+    sortingFn: "datetime",
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()?.toLocaleDateString()}</p>)
+  },
+  {
+    accessorFn: row => {
+      if (row.response) {
+        return row.response.response
+      }
+      return "RECORD DELETED"
+    },
+    id: "response",
+    header: "Response",
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()}</p>)
+  },
+
+]
+

src/app/submission/create.tsx

@@ -0,0 +1,41 @@
+
+"use client"
+import { createSub } from "app/lib/create"
+import { Dialog, DialogHeader, DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ComponentProps } from "react";
+import { Pub, Response, Story } from "@prisma/client";
+import SubmissionForm from "app/ui/forms/sub";
+
+
+type CreateSubDefaults = {
+  subId?: number,
+  storyId: number,
+  pubId: number,
+  submitted: Date,
+  responded: Date,
+  respoonseId: number
+}
+
+export default function CreateSubmissionDialog({ stories, pubs, responses, defaults }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[], defaults?: CreateSubDefaults }) {
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Create new submission</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New submission</DialogTitle>
+          <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
+        </DialogHeader>
+        <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} defaults={defaults} />
+        <DialogFooter>
+          <DialogClose asChild>
+          </DialogClose>
+          <Button form="subform">Submit</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/submission/create/page.tsx

@@ -0,0 +1,29 @@
+"use server"
+import { getPubs, getResponses, getStories } from "app/lib/get";
+import SubmissionForm from "app/ui/forms/sub";
+import prisma from "app/lib/db";
+import { CreateContainer, CreateContainerContent, CreateContainerHeader } from "app/ui/createContainer";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
+export default async function Page() {
+	const stories = await getStories()
+	const pubs = await getPubs()
+	const responses = await getResponses()
+	async function createSub(data) {
+		"use server"
+		const res = await prisma.sub.create({ data })
+		console.log(res)
+		revalidatePath("/submission")
+		redirect("/submission")
+
+	}
+	return (
+		<CreateContainer>
+			<CreateContainerHeader>New submission</CreateContainerHeader>
+			<CreateContainerContent>
+				<SubmissionForm stories={stories} pubs={pubs} responses={responses} createSub={createSub} />
+			</CreateContainerContent>
+		</CreateContainer>
+	)
+}

src/app/submission/edit.tsx

@@ -0,0 +1,27 @@
+"use client"
+import { createSub } from "app/lib/create"
+import { Dialog, DialogHeader, DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ComponentProps } from "react";
+import { Pub, Response, Story } from "@prisma/client";
+import SubmissionForm, { SubForm } from "app/ui/forms/sub";
+
+
+
+export default function EditSubmissionDialog({ stories, pubs, responses, defaults, children }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[], defaults: SubForm }) {
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Edit Submission</DialogTitle>
+        <DialogDescription>Change response status, edit dates etc</DialogDescription>
+      </DialogHeader>
+      <SubmissionForm pubs={pubs} responses={responses} stories={stories} defaults={defaults} />
+      <DialogFooter>
+        <DialogClose asChild>
+        </DialogClose>
+        <Button form="subform">Submit</Button>
+      </DialogFooter>
+    </>
+  )
+}

src/app/submission/loading.tsx

@@ -0,0 +1,5 @@
+import { LoadingSpinner } from "app/loading";
+
+export default function Loading() {
+  return <LoadingSpinner />
+}

src/app/submission/page.tsx

@@ -0,0 +1,35 @@
+import { getGenres, getPubs, getResponses, getStories, getSubsComplete } from "app/lib/get"
+import { DataTable } from "app/ui/tables/data-table"
+import { columns } from "./columns"
+import { Pub, Response, Story, Sub } from "@prisma/client"
+import CreateSubmissionDialog from "./create"
+import { Trash2 } from "lucide-react"
+
+export type SubComplete = Sub & {
+  pub: Pub,
+  story: Story,
+  response: Response
+}
+export default async function Page() {
+  const subs: Array<SubComplete> = await getSubsComplete()
+  const stories = await getStories()
+  const pubs = await getPubs()
+  const responses = await getResponses()
+  const genres = await getGenres()
+  return (
+    <div className="container">
+      <DataTable data={subs} columns={columns} tableName="sub"
+        stories={stories}
+        pubs={pubs}
+        responses={responses}
+        genres={genres}
+      >
+        <CreateSubmissionDialog
+          stories={stories}
+          pubs={pubs}
+          responses={responses}
+        />
+      </DataTable>
+    </div>
+  )
+}

src/app/test/page.tsx

@@ -0,0 +1,7 @@
+import { CheckboxReactHookFormMultiple } from "app/ui/forms/Checkboxdemo";
+
+export default function Page() {
+  return (
+    <CheckboxReactHookFormMultiple />
+  )
+}

src/app/types.ts

@@ -0,0 +1 @@
+export type Pathname = "/story" | "/publication" | "/submission"

src/app/ui/createContainer.tsx

@@ -0,0 +1,22 @@
+import { ComponentProps } from "react";
+
+export function CreateContainer({ children }: ComponentProps<"div">) {
+  return <div className="w-2/5 m-auto bg-card rounded-t-3xl border-border">{children}</div>
+}
+
+export function CreateContainerHeader({ children }: ComponentProps<"h1">) {
+  return <h1 className="text-primary-foreground bg-primary w-full font-black text-3xl p-5 rounded-t-3xl">{children}</h1>
+}
+
+export function CreateContainerDescription({ children }: ComponentProps<"p">) {
+  return <p className="">{children}</p>
+}
+
+export function CreateContainerContent({ children, className }: ComponentProps<"div">) {
+  return <div className="p-6">
+    {children}
+  </div>
+}
+
+
+

src/app/ui/forms/fancyForm.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Genre } from "@prisma/client"
+import { Button } from "@/components/ui/button"
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Checkbox } from "@/components/ui/checkbox"
+
+const formSchema = z.object({
+	title: z.string().min(2).max(50),
+	word_count: z.number(),
+	genres: z.object({ id: z.number(), name: z.string() }).array()
+})
+
+
+export default function FancyForm({ genres }) {
+	// 1. Define your form.
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			title: "",
+			word_count: 0,
+			genres: genres
+		},
+	})
+	// 2. Define a submit handler.
+	function onSubmit(values: z.infer<typeof formSchema>) {
+		// Do something with the form values.
+		// ✅ This will be type-safe and validated.
+		console.log(values)
+	}
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+				<FormField
+					control={form.control}
+					name="title"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Title</FormLabel>
+							<FormControl>
+								<Input placeholder="title goes here..." {...field} />
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="word_count"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Word count</FormLabel>
+							<FormControl>
+								<Input type="number" step={500} min={0} {...field}></Input>
+							</FormControl>
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="genres"
+					render={({ field }) => (
+						<FormItem>
+							<div className="mb-4">
+								<FormLabel>Genres</FormLabel>
+								<FormDescription>genres baby</FormDescription>
+							</div>
+							{genres.map((item) => (
+								<FormField
+									key={item.id}
+									control={form.control}
+									name="genres"
+									render={({ field }) => {
+										return (
+											<FormItem
+												key={item.id}
+												className="flex flex-row items-start space-x-3 space-y-0"
+											>
+												<FormControl>
+													<Checkbox
+														checked={field.value?.includes(item.id)}
+														onCheckedChange={(checked) => {
+															return checked
+																? field.onChange([...field.value, item.id])
+																: field.onChange(
+																	field.value?.filter(
+																		(value) => value !== item.id
+																	)
+																)
+														}}
+													/>
+												</FormControl>
+												<FormLabel className="text-sm font-normal">
+													{item.name}
+												</FormLabel>
+											</FormItem>
+										)
+									}}
+								/>
+							))}
+						</FormItem>
+					)}
+
+				/>
+				<Button type="submit">Submit</Button>
+			</form>
+		</Form>
+	)
+}

src/app/ui/forms/genrePicker.tsx

@@ -0,0 +1,85 @@
+import { FormField, FormItem, FormLabel, FormMessage, FormControl } from "@/components/ui/form"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Checkbox } from "@/components/ui/checkbox"
+import { cn } from "@/lib/utils"
+import { ComponentProps } from "react"
+import { Genre } from "@prisma/client"
+import { UseFormReturn } from "react-hook-form"
+
+export default function GenrePicker({ genres, form }: ComponentProps<"div"> & { genres: Genre[], form: UseFormReturn }) {
+	return (
+		<Popover modal={true}>
+			<FormField
+				control={form.control}
+				name="genres"
+				render={({ field }) => (
+					<FormItem className="flex flex-col">
+						<FormLabel className="h-5">Genres</FormLabel>
+						<PopoverTrigger asChild>
+							<Button
+								variant={"outline"}
+								className={cn(
+									"min-w-fit max-w-full w-fit pl-3 text-left font-normal flex-wrap gap-y-1 h-fit min-h-10",
+									!field.value && "text-muted-foreground"
+								)}
+							>
+								{field.value.length !== 0 ? (
+									field.value.map((e, i) => (<Badge key={i}>{genres.find(f => e === f.id).name}</Badge>))
+								) : (
+									<p>Select</p>
+								)}
+							</Button>
+						</PopoverTrigger>
+
+
+
+						<PopoverContent align="start">
+							{genres.map((item) => (
+								< FormField
+									key={item.id}
+									control={form.control}
+									name="genres"
+									render={({ field }) => {
+										return (
+											<FormItem
+												key={item.id}
+												className="flex flex-row items-start space-x-3 space-y-0"
+											>
+												<FormControl>
+													<Checkbox
+														checked={field.value?.includes(item.id)}
+														onCheckedChange={(checked) => {
+															return checked
+																? field.onChange([...field.value, item.id])
+																: field.onChange(
+																	field.value?.filter(
+																		(value) => value !== item.id
+																	)
+																)
+														}}
+													/>
+												</FormControl>
+												<FormLabel className="text-sm font-normal">
+													{item.name}
+												</FormLabel>
+											</FormItem>
+										)
+									}}
+								/>
+							))}
+							<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
+						</PopoverContent>
+						<FormMessage />
+					</FormItem>
+				)}
+			/>
+		</Popover>
+	)
+}
+
+
+
+
+

src/app/ui/forms/pub.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { toast } from "@/components/ui/use-toast"
+
+import { randomPublicationTitle } from "app/lib/shortStoryTitleGenerator"
+import { ComponentProps } from "react"
+import { Genre } from "@prisma/client"
+import GenrePicker from "./genrePicker"
+
+export const formSchema = z.object({
+	title: z.string().min(2).max(50),
+	link: z.string(),
+	query_after_days: z.coerce.number().min(30),
+	genres: z.array(z.number()),
+})
+
+export default function PubForm({ genres, createPub, className }: ComponentProps<"div"> & { genres: Array<Genre>, createPub: (data: any) => void }) {
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			title: "",
+			link: "",
+			query_after_days: 30,
+			genres: []
+		},
+	})
+
+	function onSubmit(values: z.infer<typeof formSchema>) {
+		// Do something with the form values.
+		// ✅ This will be type-safe and validated.
+		toast({
+			title: "You submitted the following values:",
+			description: (
+				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					<code className="text-white">{JSON.stringify(values, null, 2)}</code>
+				</pre>
+			),
+		})
+		createPub(values)
+		console.log(values)
+	}
+
+	function onErrors(errors) {
+		toast({
+			title: "You have errors",
+			description: (
+				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
+				</pre>
+			),
+		})
+		console.log(JSON.stringify(errors))
+	}
+
+	const exampleTitle = randomPublicationTitle()
+	const exampleUrl = "www." +
+		exampleTitle.replace(/ /g, '')
+			.toLowerCase() +
+		".com"
+	return (
+		<div className={className}>
+			<Form {...form}>
+				<form id="pubform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+					<FormField
+						control={form.control}
+						name="title"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Title</FormLabel>
+								<FormControl>
+									<Input placeholder={exampleTitle} {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<FormField
+						control={form.control}
+						name="link"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Website</FormLabel>
+								<FormControl>
+									<Input placeholder={exampleUrl} {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 max-w-full h-fit">
+						<GenrePicker genres={genres} form={form} />
+
+						<FormField
+							control={form.control}
+							name="query_after_days"
+							render={({ field }) => (
+								<FormItem className="flex flex-col">
+									<FormLabel className="h-5">Query after (days)</FormLabel>
+									<FormControl>
+										<Input className=" w-24" type="number" step={5} min={30} {...field}></Input>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+
+				</form>
+			</Form>
+		</div>
+
+	)
+}

src/app/ui/forms/pubsDropdown.tsx

@@ -0,0 +1,15 @@
+import { getPubs } from "app/lib/get"
+export default async function PubsDropdown() {
+	const pubs = await getPubs()
+	const pubsDropdown = pubs.map(e => {
+		return <option value={e.id} key={e.title}>{e.title}</option>
+	})
+	return (<>
+		<label htmlFor="pubdDropdown">Publication:</label>
+		<select key="pubsDropdown" id="pubsDropdown">
+			{pubsDropdown}
+		</select>
+	</>
+	)
+
+}

src/app/ui/forms/responseDropdown.tsx

@@ -0,0 +1,22 @@
+import prisma from "app/lib/db"
+
+export default async function ResponseDropdown() {
+	async function getResponses() {
+		"use server"
+		return prisma.response.findMany()
+	}
+	const responses = await getResponses()
+	const responsesDropdown = responses.map(e => {
+		return <option value={e.id} key={e.response}>{e.response}</option>
+	})
+	return (
+		<>
+			<label htmlFor="responsesDropdown">
+				Status:
+			</label>
+			<select key="responsesDropdown" id="responsesDropdown">
+				{responsesDropdown}
+			</select>
+		</>
+	)
+}

src/app/ui/forms/story.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { toast } from "@/components/ui/use-toast"
+
+import { ComponentProps } from "react"
+import { Genre, Story } from "@prisma/client"
+import { randomStoryTitle } from "app/lib/shortStoryTitleGenerator"
+import GenrePicker from "./genrePicker"
+
+export const formSchema = z.object({
+	id: z.number().optional(),
+	title: z.string().min(2).max(50),
+	word_count: z.coerce.number().min(100),
+	genres: z.array(z.number())
+})
+
+export default function StoryForm({ genres, createStory, className, existingData }: ComponentProps<"div"> & { genres: Array<Genre>, createStory: (data: any) => void, existingData: Story & { genres: number[] } | null }) {
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			id: existingData?.id,
+			title: existingData?.title ?? "",
+			word_count: existingData?.word_count ?? 500,
+			genres: existingData?.genres ?? []
+		},
+	})
+
+
+
+	function onSubmit(values: z.infer<typeof formSchema>) {
+		toast({
+			title: "You submitted the following values:",
+			description: (
+				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					<code className="text-white">{JSON.stringify(values, null, 2)}</code>
+				</pre>
+			),
+		})
+		createStory(values)
+		console.log(values)
+	}
+
+
+
+	function onErrors(errors) {
+		toast({
+			title: "You have errors",
+			description: (
+				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
+				</pre>
+			),
+		})
+		console.log(JSON.stringify(errors))
+	}
+
+	return (
+		<div className={className}>
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8" id="storyform">
+					<FormField
+						control={form.control}
+						name="title"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Title</FormLabel>
+								<FormControl>
+									<Input placeholder={randomStoryTitle()} {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 items-baseline max-w-full">
+
+						<GenrePicker
+							genres={genres}
+							form={form}
+						/>
+
+						<FormField
+							control={form.control}
+							name="word_count"
+							render={({ field }) => (
+								<FormItem className="flex flex-col">
+									<FormLabel className="h-5">Word count</FormLabel>
+									<FormControl>
+										<Input className=" w-24" type="number" step={500} min={1} {...field}></Input>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+					</div>
+
+
+
+				</form>
+			</Form>
+		</div>
+	)
+}

src/app/ui/forms/storyDropdown.tsx

@@ -0,0 +1,15 @@
+import { getStories } from "app/lib/get"
+export default async function StoryDropdown() {
+	const stories = await getStories()
+	const storiesDrowpdown = stories.map(e => {
+		return <option value={e.id} key={`${e.title}`}>{e.title}</option>
+	})
+	return (
+		<>
+			<label htmlFor="storyDropdown">Story:</label>
+			<select key="storyDropdown" id="storyDropdown">
+				{storiesDrowpdown}
+			</select>
+		</>
+	)
+}

src/app/ui/forms/sub.tsx

@@ -0,0 +1,308 @@
+"use client"
+
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Button } from "@/components/ui/button"
+import { toast } from "@/components/ui/use-toast"
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover"
+
+import { Calendar } from "@/components/ui/calendar"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { cn } from "@/lib/utils"
+import { format } from "date-fns"
+import {
+	Form,
+	FormItem,
+	FormLabel,
+	FormField,
+	FormControl,
+	FormDescription,
+	FormMessage
+} from "@/components/ui/form"
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select"
+import { useState } from "react"
+import { editSubmission } from "app/lib/edit"
+import { createSub } from "app/lib/create"
+
+export const formSchema = z.object({
+	id: z.number().optional(),
+	storyId: z.coerce.number(),
+	pubId: z.coerce.number(),
+	submitted: z.coerce.date().transform((date) => date.toString()),
+	responded: z.coerce.date().transform((date) => {
+
+		if (date.toString() !== new Date(null).toString()) {
+			return date.toString()
+		}
+		return null
+	}).optional(),
+	responseId: z.coerce.number()
+})
+	.refine(object => {
+		const submitted = new Date(object.submitted)
+		const responded = object.responded ? new Date(object.responded) : null
+		return responded >= submitted || responded === null
+	},
+		{
+			path: ["responded"],
+			message: "'Responded' must be a later date than 'submitted'"
+		})
+	.refine(object => {
+		if (object.responded) {
+			//there is a 'responded' date and the response is not 'pending'
+			return object.responseId !== 7
+		}
+		if (!object.responded) {
+			//there is not a 'responded' date and the response is pending
+			return object.responseId === 7
+		}
+	},
+		{
+			path: ["responseId"],
+			message: "A pending response cannot have a date, and a non-pending response must have a date"
+		}
+	)
+
+export type SubForm = z.infer<typeof formSchema>
+
+
+export default function SubmissionForm({ stories, pubs, responses, defaults }) {
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			responseId: responses[0].id,
+			...defaults
+		}
+	})
+	const [isSubCalendarOpen, setIsSubCalendarOpen] = useState(false);
+	const [isRespCalendarOpen, setIsRespCalendarOpen] = useState(false);
+	const storiesSelectItems = stories.map(e => (
+		<SelectItem value={e.id.toString()} key={e.title}>
+			{e.title}
+		</SelectItem>
+	))
+	const pubsSelectItems = pubs.map(e => (
+		<SelectItem value={e.id}>
+			{e.title}
+		</SelectItem>
+	))
+
+	const reponsesSelectItems = responses.map(e => (
+		<SelectItem value={e.id}>
+			{e.response}
+		</SelectItem>
+	))
+
+
+	// 2. Define a submit handler.
+	function onSubmit(values: z.infer<typeof formSchema>) {
+		// Do something with the form values.
+		// ✅ This will be type-safe and validated.
+		toast({
+			title: "You submitted the following values:",
+			description: (
+				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					<code className="text-white">{JSON.stringify(values, null, 2)}</code>
+				</pre>
+			),
+		})
+		if (values.id) {
+			editSubmission(values)
+		} else {
+			createSub(values)
+		}
+		console.log(values)
+	}
+
+	function onErrors(errors) {
+		toast({
+			title: "You have errors",
+			description: (
+				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
+				</pre>
+			),
+		})
+		console.log(JSON.stringify(errors))
+	}
+
+	return (
+		<Form {...form}>
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+				<FormField
+					control={form.control}
+					name="storyId"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Story</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select something">
+											<p>{stories?.find(e => e.id === Number(field.value))?.title ?? null}</p>
+										</SelectValue>
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									{storiesSelectItems}
+								</SelectContent>
+							</Select>
+							<FormDescription>The piece you submitted</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="pubId"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Publication</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select something">
+											<p>{pubs?.find(e => e.id === Number(field.value))?.title ?? null}</p>
+										</SelectValue>
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									{pubsSelectItems}
+								</SelectContent>
+							</Select>
+							<FormDescription>The market you sent it to</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="submitted"
+					render={({ field }) => (
+						<FormItem className="flex flex-col">
+							<FormLabel>Date of submission</FormLabel>
+							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
+								<PopoverTrigger asChild>
+									<FormControl>
+										<Button
+											variant={"outline"}
+											className={cn(
+												"w-[240px] pl-3 text-left font-normal",
+												!field.value && "text-muted-foreground"
+											)}
+										>
+											{field.value ? (
+												format(field.value, "PPP")
+											) : (
+												<span>Pick a date</span>
+											)}
+											<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+										</Button>
+									</FormControl>
+								</PopoverTrigger>
+								<PopoverContent className="w-auto p-0" align="start">
+									<Calendar
+										mode="single"
+										selected={field.value}
+										onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }}
+										disabled={(date) =>
+											date > new Date() || date < new Date("1900-01-01")
+										}
+										initialFocus
+									/>
+								</PopoverContent>
+							</Popover>
+							<FormDescription>
+								The date you sent it
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="responded"
+					render={({ field }) => (
+						<FormItem className="flex flex-col">
+							<FormLabel>Date of response</FormLabel>
+							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
+								<PopoverTrigger asChild>
+									<FormControl>
+										<Button
+											variant={"outline"}
+											className={cn(
+												"w-[240px] pl-3 text-left font-normal",
+												!field.value && "text-muted-foreground"
+											)}
+										>
+											{field.value ? (
+												format(field.value, "PPP")
+											) : (
+												<span>Pick a date</span>
+											)}
+											<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+										</Button>
+									</FormControl>
+								</PopoverTrigger>
+								<PopoverContent className="w-auto p-0" align="start">
+									<Calendar
+										mode="single"
+										selected={field.value}
+										onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
+										disabled={(date) =>
+											date > new Date() || date < new Date("1900-01-01")
+										}
+										initialFocus
+									/>
+								</PopoverContent>
+							</Popover>
+							<FormDescription>
+								The date they wrote back
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+
+				<FormField
+					control={form.control}
+					name="responseId"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Response</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue>
+											<p>{responses?.find(e => e.id === Number(field.value))?.response ?? null}</p>
+										</SelectValue>
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									{reponsesSelectItems}
+								</SelectContent>
+							</Select>
+							<FormDescription>The market you sent it to</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+			</form>
+		</Form>
+	)
+}

src/app/ui/genreBadges.tsx

@@ -0,0 +1,11 @@
+import { Genre } from "@prisma/client";
+import { ComponentProps } from "react";
+import { Badge } from "@/components/ui/badge";
+
+export default function GenreBadges(props: ComponentProps<"div"> & { genres: Array<Genre> }) {
+  return (
+    <div className={props.className}>
+      {props.genres.map((e: Genre) => (<Badge key={e.name}>{e.name}</Badge>))}
+    </div>
+  )
+}

src/app/ui/modeToggle.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+

src/app/ui/navLinks.tsx

@@ -0,0 +1,36 @@
+"use client"
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ComponentProps } from "react";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+
+function NavLink(props: ComponentProps<"div"> & { href: string }) {
+  return (
+    <Link href={props.href}><h1 className={props.className}>{props.children}</h1></Link>
+  )
+}
+export default function Navlinks(props: ComponentProps<"div">) {
+  const pathname = usePathname()
+  const links = [
+    { link: "/story", label: "STORIES" },
+    { link: "/publication", label: "PUBLICATIONS" },
+    { link: "/submission", label: "SUBMISSIONS" },
+  ]
+  return (
+    <div className={props.className}>
+      <div className="text-secondary-foreground" >
+        {
+          links.map(e => (<NavLink key={e.link} href={e.link}
+            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-l-3xl",
+              {
+                "text-primary-foreground bg-primary": pathname.includes(e.link)
+              }
+            ))}
+          ><p className="drop-shadow-sm">{e.label}</p></NavLink >))
+        }
+      </ div>
+    </div>
+  )
+}

src/app/ui/pageHeader.tsx

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react"
+
+export function PageHeader(props: ComponentProps<"h1">) {
+  return <h1 className="text-3xl font-bold mt-3">{props.children}</h1>
+}
+
+export function PageSubHeader(props: ComponentProps<"h2">) {
+  return <h2 className="text-xl font-bold">{props.children}</h2>
+}

src/app/ui/tables/contextMenu.tsx

@@ -0,0 +1,87 @@
+import { Dialog, DialogTrigger, DialogClose, DialogDescription, DialogContent, DialogTitle, DialogHeader, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { ContextMenuContent, ContextMenuItem, ContextMenuSubTrigger, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent } from "@/components/ui/context-menu"
+import { deleteRecord } from "app/lib/del"
+import Link from "next/link"
+import { ComponentProps, useState } from "react"
+import { Row, Table, TableState } from "@tanstack/react-table"
+import { tableNameToItemName } from "app/lib/nameMaps"
+import EditSubmissionDialog from "app/submission/edit"
+
+export default function FormContextMenu({ table, row }: ComponentProps<"div"> & { table: Table<any>, row: Row<any> }) {
+  const pathname = table.options.meta.pathname
+  const selectedRows = table.getSelectedRowModel().flatRows
+
+  const [dialog, setDialog] = useState<"edit" | "delete" | null>("delete")
+
+  return (
+    <Dialog modal={true}>
+      <ContextMenuContent >
+        {pathname !== "/submission" && selectedRows.length <= 1 ?
+          <>
+            <Link href={`${pathname}/${row.original.id}`}>
+              <ContextMenuItem>Inspect</ContextMenuItem>
+            </Link>
+          </>
+          : ""
+        }
+
+        {
+          pathname === "/submission" ?
+            <>
+              <DialogTrigger asChild>
+                <ContextMenuItem onClick={() => setDialog("edit")}>
+                  Edit
+                </ContextMenuItem>
+              </DialogTrigger>
+            </>
+            : ""
+        }
+
+        {
+          selectedRows.length > 0 ?
+            <ContextMenuItem onClick={() => { table.resetRowSelection() }}>Deselect</ContextMenuItem>
+            : ""
+        }
+        <ContextMenuSeparator />
+        <DialogTrigger asChild>
+          <ContextMenuItem className="text-destructive" onClick={() => setDialog("delete")}>Delete</ContextMenuItem>
+        </DialogTrigger>
+      </ContextMenuContent>
+      <DialogContent>
+        {
+          dialog === "delete" ?
+            <>
+              <DialogHeader>
+                <DialogTitle>Are you sure?</DialogTitle>
+                <DialogDescription>
+                  Deleting a {tableNameToItemName(table.options.meta.tableName)} cannot be undone!
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="destructive"
+                    onClick={() => {
+                      deleteRecord(row.original.id, pathname)
+                    }}>Yes, delete it!
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </>
+            : dialog === "edit" ?
+              <EditSubmissionDialog
+                stories={table.options.meta.stories}
+                pubs={table.options.meta.pubs}
+                responses={table.options.meta.responses}
+                defaults={row.original}
+              />
+              :
+              <>
+                <DialogTitle>Edit/delete dialog</DialogTitle>
+              </>
+        }
+      </DialogContent>
+    </Dialog>
+
+  )
+}

src/app/ui/tables/data-table.tsx

@@ -0,0 +1,282 @@
+"use client"
+import { Button } from "@/components/ui/button"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuRadioItem,
+  DropdownMenuRadioGroup
+} from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Component, ComponentProps, use, useState } from "react"
+import {
+  ColumnDef,
+  flexRender,
+  SortingState,
+  getSortedRowModel,
+  ColumnFiltersState,
+  VisibilityState,
+  getFilteredRowModel,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable
+} from "@tanstack/react-table"
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { EyeIcon, Trash2 } from "lucide-react"
+import { usePathname } from "next/navigation"
+import FormContextMenu from "./contextMenu"
+import { deleteRecords } from "app/lib/del"
+import { Pathname } from "app/types"
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@/components/ui/dialog"
+import pluralize from "app/lib/pluralize"
+import { updateField } from "app/lib/update"
+import { tableNameToItemName } from "app/lib/nameMaps"
+import { Genre, Pub, Response, Story } from "@prisma/client"
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+}
+
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  children,
+  tableName,
+  stories,
+  pubs,
+  responses,
+  genres
+}: DataTableProps<TData, TValue> & ComponentProps<"div"> & { tableName: string, stories?: Story[], pubs?: Pub[], responses?: Response[], genres?: Genre[] }) {
+  //STATE
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    useState<VisibilityState>({})
+  //
+  const pathname: Pathname = usePathname()
+  const table = useReactTable({
+    data,
+    columns,
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
+    //this is where you put arbitrary functions etc to make them accessible via the table api
+    meta: {
+      updateTextField: updateField,
+      tableName,
+      pathname,
+      stories,
+      pubs,
+      responses,
+      genres
+    }
+  })
+
+
+
+
+  const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
+  return (<>
+    <div className="flex justify-between items-center py-4">
+      <div className="flex gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Filter by
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuRadioGroup value={filterBy} onValueChange={setFilterBy} >
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanFilter())
+                .map((column) => {
+                  return (
+                    <DropdownMenuRadioItem value={column} className="capitalize" key={column.id}>
+                      {column.id}
+                    </DropdownMenuRadioItem>
+                  )
+                })}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Input
+          placeholder={`${filterBy.id}`}
+          value={(table.getColumn(filterBy.id)?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn(filterBy.id)?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+      </div>
+
+      {children}
+
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="destructive" disabled={!(table.getIsSomeRowsSelected() || table.getIsAllRowsSelected())}>
+            <Trash2 />
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            {`Delete ${Object.keys(table.getState().rowSelection).length} ${pluralize(pathname.slice(1))}?`}
+          </DialogHeader>
+          <DialogDescription>
+            {`Deleting ${pluralize(tableNameToItemName(table.options.meta.tableName))} cannot be undone!`}
+          </DialogDescription>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="destructive"
+                onClick={() => {
+                  const selectedRows = table.getState().rowSelection
+                  const rowIds = Object.keys(selectedRows)
+                  const recordIds = rowIds.map(id => Number(table.getRow(id).original.id))
+                  console.table(recordIds)
+                  deleteRecords(recordIds, pathname)
+                }}>
+                Yes, delete them!</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" className="justify-self-end">
+            <EyeIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {table
+            .getAllColumns()
+            .filter(
+              (column) => column.getCanHide()
+            )
+            .map((column) => {
+              return (
+                <DropdownMenuCheckboxItem
+                  key={column.id}
+                  className="capitalize"
+                  checked={column.getIsVisible()}
+                  onCheckedChange={(value) =>
+                    column.toggleVisibility(!!value)
+                  }
+                >
+                  {column.id}
+                </DropdownMenuCheckboxItem>
+              )
+            })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+    <div className="rounded-md border">
+
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                  </TableHead>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <ContextMenu onOpenChange={open => setIsContextMenuOpen(open)} key={row.id + "contextMenu"}>
+                <ContextMenuTrigger asChild>
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                    tabIndex={0}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    ))}
+                    <FormContextMenu
+                      key={"formContextMenu" + row.id}
+                      row={row}
+                      table={table}
+                    />
+                  </TableRow>
+                </ContextMenuTrigger>
+              </ContextMenu>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  </>
+  )
+}
+

src/app/ui/tables/inputs/genrePickerInput.tsx

@@ -0,0 +1,142 @@
+"use client"
+import { FormField, FormItem, FormLabel, FormMessage, FormControl, Form } from "@/components/ui/form"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { ComponentProps, useState } from "react"
+import { EventType, useForm, UseFormReturn } from "react-hook-form"
+import { CellContext } from "@tanstack/react-table"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { toast } from "@/components/ui/use-toast"
+import GenreBadges from "app/ui/genreBadges"
+import { updateField, updateGenres } from "app/lib/update"
+import { Genre } from "@prisma/client"
+export default function GenrePickerInputCell(props: CellContext<any, any>) {
+
+
+
+  const table = props.table.options.meta.tableName
+  const pathname = props.table.options.meta.pathname
+  const id = props.row.original.id
+  const column = props.column.id
+  const value = props.cell.getValue()
+  const genres = props.table.options.meta.genres
+  const [isActive, setIsActive] = useState(false)
+
+  async function onSubmit({ genres }: { genres: number[] }) {
+    event.preventDefault()
+    const genresArray = genres.map((e) => { return { id: e } })
+    console.log(`genres: ${genres}, genresArray: ${JSON.stringify(genresArray)}`)
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(genres)}</code>
+        </pre>
+      ),
+    })
+    const res = await updateGenres({
+      id,
+      table,
+      genres: genresArray,
+      pathname
+    })
+    setIsActive(false)
+  }
+
+  function onErrors(errors) {
+    toast({
+      title: "You have errors",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(errors, null, 2)}</code>
+        </pre>
+      ),
+    })
+    console.log(JSON.stringify(errors))
+  }
+  const formSchema = z.object({
+    genres: z.array(z.coerce.number())
+  })
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      genres: value.map(e => e.id)
+    }
+  })
+
+  const formId = "editGenresForm" + props.cell.id
+
+  return (
+
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id={formId}>
+        <Popover modal={true} open={isActive} onOpenChange={() => setIsActive(prev => !prev)}>
+          <FormField
+            control={form.control}
+            name="genres"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <PopoverTrigger>
+                  {value.length > 0 ? <GenreBadges genres={value} /> : <p>Add genres</p>
+                  }
+                </PopoverTrigger>
+
+
+
+                <PopoverContent align="start">
+                  {genres.map((item: Genre) => (
+                    < FormField
+                      key={item.id}
+                      control={form.control}
+                      name="genres"
+                      render={({ field }) => {
+                        return (
+                          <FormItem
+                            key={item.id}
+                            className="flex flex-row items-start space-x-3 space-y-0"
+                          >
+                            <FormControl>
+                              <Checkbox
+                                checked={field.value?.includes(item.id)}
+                                onCheckedChange={(checked) => {
+                                  console.log(field.value)
+                                  return checked
+                                    ? field.onChange(
+                                      [...field.value, item.id]
+                                    )
+                                    : field.onChange(
+                                      field.value?.filter(
+                                        (value) => value !== item.id
+                                      )
+                                    )
+                                }}
+                              />
+                            </FormControl>
+                            <FormLabel className="text-sm font-normal">
+                              {item.name}
+                            </FormLabel>
+                          </FormItem>
+                        )
+                      }}
+                    />
+                  ))}
+                  <Button variant="ghost" form={formId}>Submit</Button>
+                  <Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
+                </PopoverContent>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </Popover>
+      </form>
+    </Form>
+
+  )
+}
+
+
+
+
+

src/app/ui/tables/inputs/numberInput.tsx

@@ -0,0 +1,104 @@
+"use client"
+import { Input } from "@/components/ui/input";
+import { CellContext } from "@tanstack/react-table";
+import { updateField } from "app/lib/update";
+import { useState } from "react";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "@/components/ui/use-toast";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
+
+export default function NumberInputCell(props: CellContext<any, any>) {
+  const [isActive, setIsActive] = useState(false)
+
+  const table = props.table.options.meta.tableName
+  const id = props.row.original.id
+  const column = props.column.id
+  const pathname = props.table.options.meta.pathname
+  const value = props.cell.getValue()
+  const formSchema = props.column.columnDef.meta.formSchema.pick({ [column]: true })
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      [column]: props.cell.getValue()
+    },
+
+  })
+
+  function onSubmit(value: z.infer<typeof formSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(value, null, 2)}</code>
+        </pre>
+      ),
+    })
+    updateField({
+      id,
+      table,
+      number: value[column],
+      column,
+      pathname
+    })
+    setIsActive(false)
+  }
+
+  function onErrors(errors) {
+    toast({
+      title: "You have errors",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(errors, null, 2)}</code>
+        </pre>
+      ),
+    })
+    console.log(JSON.stringify(errors))
+  }
+  return (
+    <div
+      onDoubleClick={() => setIsActive(prev => !prev)}
+      className="w-full h-fit flex items-center justify-center"
+      tabIndex={0}
+      onKeyDown={e => {
+        if (e.code === "Enter" && !isActive) {
+          e.preventDefault()
+          setIsActive(true)
+        }
+      }}
+    >
+      {isActive ?
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit, onErrors)}
+          >
+            <FormField
+              control={form.control}
+              name={column}
+              render={({ field }) => (
+                <FormItem
+                  onBlur={() => setIsActive(false)}
+                >
+                  <FormControl
+                  >
+                    <Input
+                      className="w-24"
+                      type="number"
+                      autoFocus={true}
+                      step={props.column.columnDef.meta?.step}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+          </form>
+        </Form>
+        : <p>{props.cell.getValue()}</p>
+      }
+    </div >
+  )
+}

src/app/ui/tables/inputs/textInput.tsx

@@ -0,0 +1,103 @@
+"use client"
+import { Input } from "@/components/ui/input";
+import { CellContext } from "@tanstack/react-table";
+import { updateField } from "app/lib/update";
+import { useState } from "react";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "@/components/ui/use-toast";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
+import TitleContainer from "app/ui/titleContainer";
+
+export function TextInputCell(props: CellContext<any, any>) {
+  const [isActive, setIsActive] = useState(false)
+
+  const table = props.table.options.meta.tableName
+  const id = props.row.original.id
+  const column = props.column.id
+  const pathname = props.table.options.meta.pathname
+  const value = props.cell.getValue()
+  const formSchema = props.column.columnDef.meta.formSchema.pick({ [column]: true })
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      [column]: props.cell.getValue()
+    },
+  })
+
+  async function onSubmit(value: z.infer<typeof formSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(value, null, 2)}</code>
+        </pre>
+      ),
+    })
+    const res = await updateField({
+      id,
+      table,
+      datum: value[column],
+      column,
+      pathname
+    })
+    setIsActive(false)
+  }
+
+  function onErrors(errors) {
+    toast({
+      title: "You have errors",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(errors, null, 2)}</code>
+        </pre>
+      ),
+    })
+    console.log(JSON.stringify(errors))
+  }
+  return (
+    <div
+      onDoubleClick={() => setIsActive(prev => !prev)}
+      className="w-full h-fit flex items-center justify-left"
+      tabIndex={0}
+      onKeyDown={e => {
+        if (e.code === "Enter" && !isActive) {
+          e.preventDefault()
+          setIsActive(true)
+        }
+      }}
+    >
+      {isActive ?
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit, onErrors)}
+          >
+            <FormField
+              control={form.control}
+              name={column}
+              render={({ field }) => (
+                <FormItem
+                  onBlur={() => setIsActive(false)}
+                >
+                  <FormControl
+                  >
+                    <Input
+                      className="w-fit"
+                      type="text"
+                      autoFocus={true}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+          </form>
+        </Form>
+        : <TitleContainer>{props.cell.getValue()}</TitleContainer>
+      }
+    </div >
+  )
+}

src/app/ui/tables/selectColumn.tsx

@@ -0,0 +1,32 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { CellContext, Column, ColumnDef, ColumnMeta, Header, HeaderContext, RowSelectionTableState, Table, TableState } from "@tanstack/react-table";
+
+export const selectCol = {
+  id: "select",
+  header: (props: HeaderContext<any, any>) => {
+    return (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={props.table.getIsAllRowsSelected()}
+          onCheckedChange={props.table.toggleAllRowsSelected}
+          aria-label="select/deselect all rows"
+        />
+      </div>
+
+    )
+  },
+
+  cell: (props: CellContext<any, any>) => {
+    return (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={props.row.getIsSelected()}
+          onCheckedChange={props.row.toggleSelected}
+          aria-label="select/deselect row"
+        />
+
+      </div>
+    )
+  }
+}
+

src/app/ui/theme.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
+

src/app/ui/titleContainer.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+
+export default function itleContainer({ children }: ComponentProps<"div">) {
+  let classes = "w-full text-left m-auto"
+  console.table(children)
+  if (children == "RECORD DELETED") {
+    console.log("BINGO")
+    classes = classes + " text-destructive font-bold"
+  }
+  return <span className="h-10 flex align-center"><p className={classes}>{children}</p></span>
+}

tailwind.config.js

@@ -0,0 +1,81 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  prefix: "",
+  theme: {
+    fontFamily: {
+      sans: ["ui-sans-serif", "system-ui"],
+      serif: ["ui-serif", "Georgia"],
+      mono: ["ui-monospace", "SFMono-Regular"],
+      display: ["Playfair"],
+      body: ['"Open Sans"'],
+    },
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        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))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};

tsconfig.json

@@ -1,26 +1,37 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": "src/",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
+    "strict": false,
     "noEmit": true,
-    "esModuleInterop": true,
+    "incremental": true,
     "module": "esnext",
-    "moduleResolution": "bundler",
+    "target": "es2017",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true,
     "plugins": [
       {
         "name": "next"
       }
-    ],
+    ]
-    "paths": {
-      "@/*": ["./src/*"]
-    }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "prisma/script.mts"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "src/app/lib/db.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }