improve title styling

This reverts commit 2294d0c0b0.

package.json

@@ -14,6 +14,7 @@
     "@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",
@@ -48,5 +49,9 @@
     "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"
   }
 }

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/app/layout.tsx

@@ -31,15 +31,15 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
-            <div className="grid grid-cols-12 w-5/6">
+            <div className="w-5/6 flex">
-              <div id="sidebar" className="col-start-1 col-end-3 h-5/6 flex flex-col"> <header className="">
+              <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">SubMan</h1>
+                <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">The self-hosted literary submission tracker.</p>
+                <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="col-start-3 col-span-full">
+              <div className="flex justify-center w-full">
                 {children}
               </div>
             </div>

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

@@ -2,29 +2,32 @@
 import { revalidatePath } from "next/cache";
 import prisma from "./db";
 import { redirect } from "next/navigation";
+import { Pathname } from "app/types";
 
-export async function deleteStory(id: number) {
+const tableMap = {
-	const res = await prisma.story.delete({
+	"/story": "story",
-		where: { id }
+	"/publication": "pub",
-	})
+	"/submission": "sub"
-	console.log(`deleted: ${res}`)
-	revalidatePath("/story")
-	redirect("/story")
-}
-export async function deletePub(id: number) {
-	const res = await prisma.pub.delete({
-		where: { id }
-	})
-	console.log(`deleted: ${res}`)
-	revalidatePath("/publication")
-	redirect("/publication")
 }
 
-export async function deleteSub(id: number) {
+export async function deleteRecord(id: number, pathname: Pathname) {
-	const res = await prisma.sub.delete({
+	const table = tableMap[pathname]
-		where: { id }
+	const res = await prisma[table].delete({ where: { id } })
-	})
+	console.log(`deleted from ${table}: ${res.id}`)
-	console.log(`deleted: ${res}`)
+	console.log("revalidating: " + pathname)
-	revalidatePath("/submission")
+	revalidatePath(pathname)
-	redirect("/submission")
+	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/get.ts

@@ -13,6 +13,14 @@ export async function getStoriesWithGenres() {
 
 	)
 }
+export async function getStoriesWithGenresAndSubs() {
+	return prisma.story.findMany({
+		include: {
+			genres: true,
+			subs: true
+		}
+	})
+}
 
 export async function getPubs() {
 	return prisma.pub.findMany()

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/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/publication/columns.tsx

@@ -1,28 +1,20 @@
 "use client"
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
-import { ArrowUpDown, MoreHorizontal } from "lucide-react"
+import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
-import { Trash2, Search } from "lucide-react"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { deletePub } from "app/lib/del"
-import Link from "next/link"
 import { PubsWithGenres } from "./page"
-import { DialogClose } from "@radix-ui/react-dialog"
+import { TextInputCell } from "app/ui/tables/inputs/textInput"
-import { actions } from "app/ui/tables/actions"
+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 }) => {
@@ -36,30 +28,32 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
         </Button>
       )
     },
-
+    cell: TextInputCell,
+    meta: { formSchema }
   },
 
   {
     accessorKey: "link",
     header: "Link",
+    cell: TextInputCell,
+    meta: { formSchema }
   },
 
   columnHelper.accessor("genres", {
-    cell: props => {
+    cell: GenrePickerInputCell,
-      const genres = props.getValue()
-        .map(e => <Badge>{e.name}</Badge>)
-      return genres
-    },
     filterFn: "arrIncludes"
     //TODO - write custom filter function, to account for an array of objects
   }),
 
   {
     accessorKey: "query_after_days",
-    header: "Query After (days)"
+    header: "Query After (days)",
+    cell: NumberInputCell,
+    meta: {
+      step: 10,
+      formSchema
+    },
+
   },
-  actions({ pathname: "/publication", deleteFn: deletePub })
-
-
 ]
 

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/create/page.tsx

@@ -1,40 +0,0 @@
-import PubForm from "app/ui/forms/pub";
-import { getGenres } from "app/lib/get";
-import prisma from "app/lib/db";
-import { CreateContainer, CreateContainerContent, CreateContainerDescription, CreateContainerHeader } from "app/ui/createContainer";
-import { revalidatePath } from "next/cache";
-import { redirect } from "next/navigation";
-export default async function Page() {
-	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")
-	}
-	const genres = await getGenres()
-	return (
-		<CreateContainer>
-			<CreateContainerHeader>New publication</CreateContainerHeader>
-			<CreateContainerContent>
-				<CreateContainerDescription>
-					Create a new entry for a publication i.e. a place you intend to submit to.
-				</CreateContainerDescription>
-				<PubForm genres={genres} createPub={createPub} className="mt-6" />
-			</CreateContainerContent>
-		</CreateContainer>
-	)
-}

src/app/publication/page.tsx

@@ -1,15 +1,21 @@
 import { Genre, Pub } from "@prisma/client";
-import { getPubsWithGenres } from "app/lib/get";
+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} type="publication" />
+      <DataTable data={pubs} columns={columns} tableName="pubs" genres={genres}>
+        <CreatePubDialog genres={genres} />
+      </DataTable>
 
     </div>
   )

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

@@ -31,7 +31,7 @@ export default async function Page({ params }: { params: { id: string } }) {
       <PageHeader>{story?.title ?? ""}</PageHeader>
       <GenreBadges genres={story.genres} className="my-6" />
       <PageSubHeader>Submissions:</PageSubHeader>
-      <DataTable columns={columns} data={storySubs} type="submission" />
+      <DataTable columns={columns} data={storySubs} tableName="subs" />
 
     </div>
 

src/app/story/columns.tsx

@@ -3,14 +3,16 @@ import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { StoryWithGenres } from "./page"
 import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { deleteStory } from "app/lib/del"
 import GenreBadges from "app/ui/genreBadges"
-import { actions } from "app/ui/tables/actions"
+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 }) => {
@@ -24,6 +26,8 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
         </Button>
       )
     },
+    cell: TextInputCell,
+    meta: { formSchema }
 
   },
   {
@@ -39,17 +43,18 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
         </Button>
       )
     },
-    enableColumnFilter: false
+    enableColumnFilter: false,
+    cell: NumberInputCell,
+    meta: {
+      step: 50,
+      formSchema
+    }
   },
   columnHelper.accessor("genres", {
-    cell: props => {
+    cell: GenrePickerInputCell,
-      const genres = props.getValue()
+    filterFn: "arrIncludes",
-      return <GenreBadges genres={genres} />
+    meta: {}
-    },
-    filterFn: "arrIncludes"
-    //TODO - write custom filter function, to account for an array of objects
   }),
-  //this is a function so that the actions column can be uniform across tables
+
-  actions({ pathname: "/story", deleteFn: deleteStory })
 ]
 

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/page.tsx

@@ -1,16 +1,30 @@
 import { Story } from "@prisma/client";
 import { DataTable } from "app/ui/tables/data-table";
 import { columns } from "./columns";
-import { getStoriesWithGenres } from "app/lib/get";
+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 stories: Array<StoryWithGenres> = await getStoriesWithGenres()
+  const genres = await getGenres()
+  const storiesWithGenres: Array<StoryWithGenres> = await getStoriesWithGenres()
+
+
+
   return (
     <div className="container mx-auto">
-      <DataTable columns={columns} data={stories} type="story" />
+      <DataTable columns={columns} data={storiesWithGenres} tableName="story"
+        genres={genres}
+      >
+        <CreateStoryDialog genres={genres} />
+      </DataTable>
     </div>
   )
 }

src/app/submission/columns.tsx

@@ -1,15 +1,37 @@
 "use client"
-import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+import { CellContext, ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { deleteSub } from "app/lib/del"
 import { SubComplete } from "./page"
-import { actions } from "app/ui/tables/actions"
+import { selectCol } from "app/ui/tables/selectColumn"
+import TitleContainer from "app/ui/titleContainer"
 
 
-const columnHelper = createColumnHelper<SubComplete>()
 
 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",
@@ -26,7 +48,7 @@ export const columns: ColumnDef<SubComplete>[] = [
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: props => { return props.getValue().toLocaleDateString() }
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue().toLocaleDateString()}</p>)
   },
   {
     accessorFn: row => row.responded ? new Date(row.responded) : null,
@@ -44,7 +66,7 @@ export const columns: ColumnDef<SubComplete>[] = [
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: props => props.getValue() ? props.getValue().toLocaleDateString() : '-'
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()?.toLocaleDateString()}</p>)
   },
   {
     accessorFn: row => {
@@ -54,29 +76,9 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "response",
-    header: "Response"
+    header: "Response",
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()}</p>)
   },
-  {
-    accessorFn: row => {
-      if (row.pub) {
-        return row.pub.title
-      }
-      return "RECORD DELETED"
-    },
-    id: "pub",
-    header: "Publication"
-  },
-  {
-    accessorFn: row => {
-      if (row.story) {
-        return row.story.title
-      }
-      return "RECORD DELETED"
-    },
-    id: "story",
-    header: "Story"
-  },
-  actions({ pathname: "/submission", deleteFn: deleteSub })
 
 ]
 

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/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/page.tsx

@@ -1,7 +1,9 @@
-import { getSubsComplete } from "app/lib/get"
+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,
@@ -10,9 +12,24 @@ export type SubComplete = Sub & {
 }
 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} type="submission" />
+      <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/tailwind.css

@@ -706,22 +706,6 @@ body {
   z-index: 100;
 }
 
-.col-span-full {
-  grid-column: 1 / -1;
-}
-
-.col-start-1 {
-  grid-column-start: 1;
-}
-
-.col-start-3 {
-  grid-column-start: 3;
-}
-
-.col-end-3 {
-  grid-column-end: 3;
-}
-
 .m-auto {
   margin: auto;
 }
@@ -926,6 +910,10 @@ body {
   width: 1rem;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
 .w-5\/6 {
   width: 83.333333%;
 }
@@ -1064,10 +1052,6 @@ body {
           user-select: none;
 }
 
-.grid-cols-12 {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
 .flex-row {
   flex-direction: row;
 }
@@ -1108,10 +1092,6 @@ body {
   justify-content: space-between;
 }
 
-.justify-around {
-  justify-content: space-around;
-}
-
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1283,6 +1263,10 @@ body {
   background-color: rgb(0 0 0 / 0.8);
 }
 
+.bg-border {
+  background-color: hsl(var(--border));
+}
+
 .bg-card {
   background-color: hsl(var(--card));
 }
@@ -1427,6 +1411,10 @@ body {
   padding-right: 0.5rem;
 }
 
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .pr-8 {
   padding-right: 2rem;
 }
@@ -1679,6 +1667,20 @@ body {
   }
 }
 
+.animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
+.fade-in-80 {
+  --tw-enter-opacity: 0.8;
+}
+
 .duration-200 {
   animation-duration: 200ms;
 }
@@ -2156,6 +2158,10 @@ body {
   color: hsl(var(--primary-foreground));
 }
 
+.data-\[state\=open\]\:text-accent-foreground[data-state=open] {
+  color: hsl(var(--accent-foreground));
+}
+
 .data-\[state\=open\]\:text-muted-foreground[data-state=open] {
   color: hsl(var(--muted-foreground));
 }

src/app/types.ts

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

src/app/ui/forms/genreCheckbox.tsx

@@ -1,30 +0,0 @@
-import { FormItem, FormControl, FormLabel } from "@/components/ui/form"
-import { Checkbox } from "@/components/ui/checkbox"
-export default function GenreCheckbox({ field, item }) {
-	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>
-
-
-	)
-}

src/app/ui/forms/genreCheckboxes.tsx

@@ -1,17 +0,0 @@
-import { getGenres } from "app/lib/get"
-import React from "react"
-import { letterCase } from "app/lib/functions"
-export default async function GenreCheckboxes() {
-
-	const genres = await getGenres()
-	const genreCheckboxes = genres.map(e => {
-		const label = letterCase(e.name)
-		return (<React.Fragment key={`fragment${e.name}`}>
-			<input type="checkbox" id={e.name} key={`genreCheckboxInput${e.id}`} />
-			<label htmlFor={e.name} key={`genreCheckboxLabel${e.id}`}>{label}</label>
-		</React.Fragment>
-		)
-	})
-	return <>{genreCheckboxes}</>
-
-}

src/app/ui/forms/genreComboBox.tsx

@@ -1 +0,0 @@
-

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/genresTrigger.tsx

@@ -1,27 +0,0 @@
-import { FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
-import { Popover, PopoverContent, PopoverTrigger } from "@radix-ui/react-popover"
-import { Checkbox } from "@radix-ui/react-checkbox"
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-import { Badge } from "@/components/ui/badge"
-export default function GenresTrigger({ value, genres }) {
-	return (
-		<>
-			<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",
-						!value && "text-muted-foreground"
-					)}
-				>
-					{value.length !== 0 ? (
-						value.map((e, i) => (<Badge>{genres.find(f => e === f.id).name}</Badge>))
-					) : (
-						<p>Select</p>
-					)}
-				</Button>
-			</PopoverTrigger>
-		</>
-	)
-}  

src/app/ui/forms/pub.tsx

@@ -3,7 +3,6 @@
 import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
-import { Button } from "@/components/ui/button"
 import {
 	Form,
 	FormControl,
@@ -16,17 +15,12 @@ import {
 import { Input } from "@/components/ui/input"
 import { toast } from "@/components/ui/use-toast"
 
-import {
-	Popover,
-	PopoverContent,
-} from "@/components/ui/popover"
-import GenresTrigger from "./genresTrigger"
-import GenreCheckbox from "./genreCheckbox"
 import { randomPublicationTitle } from "app/lib/shortStoryTitleGenerator"
 import { ComponentProps } from "react"
 import { Genre } from "@prisma/client"
+import GenrePicker from "./genrePicker"
 
-const formSchema = z.object({
+export const formSchema = z.object({
 	title: z.string().min(2).max(50),
 	link: z.string(),
 	query_after_days: z.coerce.number().min(30),
@@ -79,7 +73,7 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
 	return (
 		<div className={className}>
 			<Form {...form}>
-				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+				<form id="pubform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
 					<FormField
 						control={form.control}
 						name="title"
@@ -109,35 +103,7 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
 					/>
 
 					<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 max-w-full h-fit">
-						<FormField
+						<GenrePicker genres={genres} form={form} />
-							control={form.control}
-							name="genres"
-							render={({ field }) => (
-								<FormItem className="flex flex-col flex-wrap">
-									<FormLabel className="h-5">Genres</FormLabel>
-									<Popover>
-										<GenresTrigger value={field.value} genres={genres} />
-										<PopoverContent align="start">
-											{genres.map((item) => (
-												<FormField
-													key={item.id}
-													control={form.control}
-													name="genres"
-													render={({ field }) => {
-														return (
-															<GenreCheckbox field={field} item={item} />
-														)
-													}}
-												/>
-											))}
-											<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
-										</PopoverContent>
-									</Popover>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
 
 						<FormField
 							control={form.control}
@@ -154,7 +120,6 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
 						/>
 					</div>
 
-					<Button type="submit">Submit</Button>
 				</form>
 			</Form>
 		</div>

src/app/ui/forms/story.tsx

@@ -3,7 +3,6 @@
 import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
-import { Button } from "@/components/ui/button"
 import {
 	Form,
 	FormControl,
@@ -16,37 +15,32 @@ import {
 import { Input } from "@/components/ui/input"
 import { toast } from "@/components/ui/use-toast"
 
-import {
-	Popover,
-	PopoverContent,
-} from "@/components/ui/popover"
-import GenresTrigger from "./genresTrigger"
-import GenreCheckbox from "./genreCheckbox"
 import { ComponentProps } from "react"
-import { Genre } from "@prisma/client"
+import { Genre, Story } from "@prisma/client"
 import { randomStoryTitle } from "app/lib/shortStoryTitleGenerator"
-import { usePathname } from "next/navigation"
+import GenrePicker from "./genrePicker"
 
-const formSchema = z.object({
+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 }: ComponentProps<"div"> & { genres: Array<Genre>, createStory: (data: any) => void }) {
+export default function StoryForm({ genres, createStory, className, existingData }: ComponentProps<"div"> & { genres: Array<Genre>, createStory: (data: any) => void, existingData: Story & { genres: number[] } | null }) {
-	// 1. Define your form.
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
 		defaultValues: {
-			title: "",
+			id: existingData?.id,
-			word_count: 0,
+			title: existingData?.title ?? "",
-			genres: []
+			word_count: existingData?.word_count ?? 500,
+			genres: existingData?.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.
 		toast({
 			title: "You submitted the following values:",
 			description: (
@@ -73,12 +67,10 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 		console.log(JSON.stringify(errors))
 	}
 
-	const pathname = usePathname()
-
 	return (
 		<div className={className}>
 			<Form {...form}>
-				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8" id="storyform">
 					<FormField
 						control={form.control}
 						name="title"
@@ -95,35 +87,9 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 
 					<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 items-baseline max-w-full">
 
-
+						<GenrePicker
-						<FormField
+							genres={genres}
-							control={form.control}
+							form={form}
-							name="genres"
-							render={({ field }) => (
-								<FormItem className="flex flex-col">
-									<FormLabel className="h-5">Genres</FormLabel>
-									<Popover>
-										<GenresTrigger value={field.value} genres={genres} />
-										<PopoverContent align="start">
-											{genres.map((item) => (
-												<FormField
-
-													key={item.id}
-													control={form.control}
-													name="genres"
-													render={({ field }) => {
-														return (
-															<GenreCheckbox field={field} item={item} />
-														)
-													}}
-												/>
-											))}
-											<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
-										</PopoverContent>
-									</Popover>
-									<FormMessage />
-								</FormItem>
-							)}
 						/>
 
 						<FormField
@@ -133,7 +99,7 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 								<FormItem className="flex flex-col">
 									<FormLabel className="h-5">Word count</FormLabel>
 									<FormControl>
-										<Input className=" w-24" type="number" step={500} min={0} {...field}></Input>
+										<Input className=" w-24" type="number" step={500} min={1} {...field}></Input>
 									</FormControl>
 									<FormMessage />
 								</FormItem>
@@ -142,7 +108,6 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 
 					</div>
 
-					<Button type="submit" className="">Submit</Button>
 
 
 				</form>

src/app/ui/forms/sub.tsx

@@ -32,12 +32,21 @@ import {
 	SelectValue,
 } from "@/components/ui/select"
 import { useState } from "react"
+import { editSubmission } from "app/lib/edit"
+import { createSub } from "app/lib/create"
 
-const FormSchema = z.object({
+export const formSchema = z.object({
+	id: z.number().optional(),
 	storyId: z.coerce.number(),
 	pubId: z.coerce.number(),
-	submitted: z.date().transform((date) => date.toString()),
+	submitted: z.coerce.date().transform((date) => date.toString()),
-	responded: z.date().transform((date) => date.toString()).optional(),
+	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 => {
@@ -65,12 +74,15 @@ const FormSchema = z.object({
 		}
 	)
 
+export type SubForm = z.infer<typeof formSchema>
 
-export default function SubmissionForm({ stories, pubs, responses, createSub }) {
+
-	const form = useForm<z.infer<typeof FormSchema>>({
+export default function SubmissionForm({ stories, pubs, responses, defaults }) {
-		resolver: zodResolver(FormSchema),
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
 		defaultValues: {
-			responseId: responses[0].id
+			responseId: responses[0].id,
+			...defaults
 		}
 	})
 	const [isSubCalendarOpen, setIsSubCalendarOpen] = useState(false);
@@ -94,7 +106,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 
 
 	// 2. Define a submit handler.
-	function onSubmit(values: z.infer<typeof FormSchema>) {
+	function onSubmit(values: z.infer<typeof formSchema>) {
 		// Do something with the form values.
 		// ✅ This will be type-safe and validated.
 		toast({
@@ -105,7 +117,11 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 				</pre>
 			),
 		})
-		createSub(values)
+		if (values.id) {
+			editSubmission(values)
+		} else {
+			createSub(values)
+		}
 		console.log(values)
 	}
 
@@ -123,7 +139,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 
 	return (
 		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
 				<FormField
 					control={form.control}
 					name="storyId"
@@ -177,7 +193,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
 							<FormLabel>Date of submission</FormLabel>
-							<Popover open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
+							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
 										<Button
@@ -222,7 +238,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
 							<FormLabel>Date of response</FormLabel>
-							<Popover open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
+							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
 										<Button
@@ -286,7 +302,6 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 					)}
 				/>
 
-				<Button type="submit">Submit</Button>
 			</form>
 		</Form>
 	)

src/app/ui/tables/actions.tsx

@@ -1,45 +0,0 @@
-import { Dialog, DialogTrigger, DialogClose, DialogDescription, DialogContent, DialogTitle, DialogHeader, DialogFooter } from "@/components/ui/dialog"
-import Link from "next/link"
-import { Trash2, Search, Pencil } from "lucide-react"
-import { Button } from "@/components/ui/button"
-
-export function actions({ pathname, deleteFn }: { pathname: string, deleteFn: (id: number) => void }) {
-  return {
-    id: "actions",
-    // header: "Actions",
-    cell: ({ row }) => {
-      return <div className="flex items-center justify-around">
-        {!(pathname === "/submission") ?
-          <Link href={`${pathname}/${row.original.id}`}><Button variant="ghost"><Search /></Button></Link>
-          : ""
-        }
-
-        <Link href={`${pathname}/edit/${row.original.id}`}><Button variant="ghost"><Pencil /></Button></Link>
-
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="ghost"><Trash2 color="red" /></Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Are you sure?</DialogTitle>
-              <DialogDescription>
-                Deleting a {pathname.slice(1)} cannot be undone!
-              </DialogDescription>
-            </DialogHeader>
-            <DialogFooter>
-              <DialogClose asChild>
-                <Button variant="destructive"
-                  onClick={() => {
-                    deleteFn(row.original.id)
-                  }}>Yes, delete it!
-                </Button>
-              </DialogClose>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-    }
-  }
-}
-

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

@@ -1,5 +1,11 @@
 "use client"
 import { Button } from "@/components/ui/button"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu"
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -9,7 +15,7 @@ import {
   DropdownMenuRadioGroup
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
-import { useState } from "react"
+import { Component, ComponentProps, use, useState } from "react"
 import {
   ColumnDef,
   flexRender,
@@ -20,7 +26,7 @@ import {
   getFilteredRowModel,
   getCoreRowModel,
   getPaginationRowModel,
-  useReactTable,
+  useReactTable
 } from "@tanstack/react-table"
 
 import {
@@ -31,12 +37,18 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { EyeIcon } from "lucide-react"
+import { EyeIcon, Trash2 } from "lucide-react"
 import { usePathname } from "next/navigation"
-import { useRouter } from "next/navigation"
+import FormContextMenu from "./contextMenu"
-import Link from "next/link"
+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"
 
-interface DataTableProps<TData, TValue> {
+export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
 }
@@ -45,8 +57,13 @@ interface DataTableProps<TData, TValue> {
 export function DataTable<TData, TValue>({
   columns,
   data,
-  type
+  children,
-}: DataTableProps<TData, TValue> & { type: "publication" | "submission" | "story" | "genre" | "response" }) {
+  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>(
@@ -55,9 +72,12 @@ export function DataTable<TData, TValue>({
   const [columnVisibility, setColumnVisibility] =
     useState<VisibilityState>({})
   //
+  const pathname: Pathname = usePathname()
   const table = useReactTable({
     data,
     columns,
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onSortingChange: setSorting,
@@ -70,11 +90,25 @@ export function DataTable<TData, TValue>({
       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 pathname = usePathname()
+
+
+
+
   const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
   return (<>
-    <div className="flex justify-between py-4">
+    <div className="flex justify-between items-center py-4">
       <div className="flex gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -107,9 +141,38 @@ export function DataTable<TData, TValue>({
         />
       </div>
 
-      <Link href={pathname + "/create"}>
+      {children}
-        <Button>Create new {type}</Button>
+
-      </Link>
+      <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>
@@ -141,6 +204,7 @@ export function DataTable<TData, TValue>({
       </DropdownMenu>
     </div>
     <div className="rounded-md border">
+
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -163,19 +227,26 @@ export function DataTable<TData, TValue>({
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
+              <ContextMenu onOpenChange={open => setIsContextMenuOpen(open)} key={row.id + "contextMenu"}>
-                key={row.id}
+                <ContextMenuTrigger asChild>
-                data-state={row.getIsSelected() && "selected"}
+                  <TableRow
-              >
+                    key={row.id}
-                {row.getVisibleCells().map((cell) => (
+                    data-state={row.getIsSelected() && "selected"}
-                  <TableCell key={cell.id}
+                    tabIndex={0}
-
-                    onClick={(e) => { console.log(`row: ${JSON.stringify(row.original)} cell: ${cell.id} ${JSON.stringify(e.timeStamp)}`) }}
                   >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    {row.getVisibleCells().map((cell) => (
-                  </TableCell>
+                      <TableCell key={cell.id}>
-                ))}
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </TableRow>
+                      </TableCell>
+                    ))}
+                    <FormContextMenu
+                      key={"formContextMenu" + row.id}
+                      row={row}
+                      table={table}
+                    />
+                  </TableRow>
+                </ContextMenuTrigger>
+              </ContextMenu>
             ))
           ) : (
             <TableRow>

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/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>
+}