swap md: for sm:

issue - I was importing the textEncoder for browser, rather than using the native one

.env

@@ -0,0 +1,8 @@
+# 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"
+JWT_SECRET="/VziPKch4YqGXA85ghyYGd/JIvO7fJ+BZEyxc910sEc="

.gitignore

@@ -34,15 +34,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-#secret
-.env
-
-#build
-/pack
-subman.tar.gz
-node_modules/
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/

Jenkinsfile

@@ -1,42 +0,0 @@
-pipeline {
-agent any
-	environment{
-	JWT_SECRET=credentials('JWT_SECRET')
-	DATABASE_URL=credentials('DATABASE_URL')
-	}
-	stages{
-		stage('build'){
-			steps{
-				sh 'echo "JWT_SECRET=${JWT_SECRET}" | cat >> .env'
-				sh 'echo "DATABASE_URL=${DATABASE_URL}" | cat >> .env'
-				sh 'npm install'
-				sh 'npm run build'
-			}
-		}
-		stage('test'){
-			steps{
-				sh 'npx playwright install'
-				sh 'npx playwright test'	
-				sh 'rm -r pack'
-			}
-		}
-		stage('deploy'){
-			steps{
-				sshPublisher(publishers: [sshPublisherDesc(configName: 'Demos', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: 'ssh-uploads/subman/upgrade.sh', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: 'ssh-uploads/subman/', remoteDirectorySDF: false, removePrefix: '', sourceFiles: 'subman.tar.gz')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
-			}
-		}
-	}
-	post {
-        // Clean after build
-        always {
-            cleanWs(cleanWhenNotBuilt: true,
-	    cleanWhenFailure: false,
-                    deleteDirs: true,
-                    disableDeferredWipeout: true,
-                    // notFailBuild: true,
-										cleanWhenSuccess:false,
-                    patterns: [[pattern: '**/*', type: 'INCLUDE'],
-                               [pattern: '.propsfile', type: 'EXCLUDE']])
-        }
-    }
-}

README.md

@@ -1,18 +1,36 @@
-# Subman
-## A self-hosted literary submission manager
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-I developed this project as a demonstration of my full-stack development abilities, utilizing:
+## Getting Started
 
-- Nextjs
-- Tailwind
-- heavily customised Shadcn components
-- an Sqlite database with Prisma ORM as intermediary
+First, run the development server:
 
-My previous attempt at this project was [a Nodejs server](https://projects.ajstepien.xyz/andrzej/sub-manager-backend) with [ a React frontend ](https://projects.ajstepien.xyz/andrzej/sub-manager-frontend), but this version is much better!
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-## What it does
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-Subman was inspired by my experiences submitting short fiction to magazines for publication. It allows the user to track where submissions are pending, in addition to meta-data such as genres, word count and so on. What you see here is the Minimum Shippable Product.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
+## Learn More
 
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

next.config.mjs

@@ -1,7 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "standalone",
-  // basePath: "/subman",
   webpack: (config) => {
     config.externals = [...config.externals, "bcrypt"];
     return config;

package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "@hookform/resolvers": "^3.6.0",
         "@mapbox/node-pre-gyp": "^1.0.11",
-        "@next/env": "^14.2.14",
         "@prisma/client": "^5.15.0",
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-context-menu": "^2.2.1",
@@ -33,7 +32,6 @@
         "lucide-react": "^0.394.0",
         "next": "^14.2.13",
         "next-themes": "^0.3.0",
-        "playwright": "^1.47.2",
         "react": "^18",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18",
@@ -45,7 +43,6 @@
         "zod": "^3.23.8"
       },
       "devDependencies": {
-        "@playwright/test": "^1.47.2",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -230,9 +227,10 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.14",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.14.tgz",
-      "integrity": "sha512-/0hWQfiaD5//LvGNgc8PjvyqV50vGK0cADYzaoOOGN8fxzBn3iAiaq3S0tCRnFBldq0LVveLcxCTi41ZoYgAgg=="
+      "version": "14.2.13",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.13.tgz",
+      "integrity": "sha512-s3lh6K8cbW1h5Nga7NNeXrbe0+2jIIYK9YaA9T7IufDWnZpozdFUp6Hf0d5rNWUKu4fEuSX2rCKlGjCrtylfDw==",
+      "license": "MIT"
     },
     "node_modules/@next/swc-darwin-arm64": {
       "version": "14.2.13",
@@ -410,21 +408,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@playwright/test": {
-      "version": "1.47.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.47.2.tgz",
-      "integrity": "sha512-jTXRsoSPONAs8Za9QEQdyjFn+0ZQFjCiIztAIF6bi1HqhBzG9Ma7g1WotyiGqFSBRZjIEqMdT8RUlbk1QVhzCQ==",
-      "devOptional": true,
-      "dependencies": {
-        "playwright": "1.47.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@prisma/client": {
       "version": "5.16.0",
       "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.16.0.tgz",
@@ -6647,11 +6630,6 @@
         "react-dom": "^16.8 || ^17 || ^18"
       }
     },
-    "node_modules/next/node_modules/@next/env": {
-      "version": "14.2.13",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.13.tgz",
-      "integrity": "sha512-s3lh6K8cbW1h5Nga7NNeXrbe0+2jIIYK9YaA9T7IufDWnZpozdFUp6Hf0d5rNWUKu4fEuSX2rCKlGjCrtylfDw=="
-    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -7507,47 +7485,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.47.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.47.2.tgz",
-      "integrity": "sha512-nx1cLMmQWqmA3UsnjaaokyoUpdVaaDhJhMoxX2qj3McpjnsqFHs516QAKYhqHAgOP+oCFTEOCOAaD1RgD/RQfA==",
-      "dependencies": {
-        "playwright-core": "1.47.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "node_modules/playwright-core": {
-      "version": "1.47.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.47.2.tgz",
-      "integrity": "sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==",
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/playwright/node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build && ./package.sh",
+    "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "tailwind": "npx tailwindcss -i ./src/app/globals.css -o ./src/app/tailwind.css --watch"
@@ -13,7 +13,6 @@
   "dependencies": {
     "@hookform/resolvers": "^3.6.0",
     "@mapbox/node-pre-gyp": "^1.0.11",
-    "@next/env": "^14.2.14",
     "@prisma/client": "^5.15.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-context-menu": "^2.2.1",
@@ -36,7 +35,6 @@
     "lucide-react": "^0.394.0",
     "next": "^14.2.13",
     "next-themes": "^0.3.0",
-    "playwright": "^1.47.2",
     "react": "^18",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18",
@@ -48,7 +46,6 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@playwright/test": "^1.47.2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

package.sh

@@ -1,13 +0,0 @@
-#!/usr/bin/env bash
-
-mkdir pack
-cp -r public pack/
-cp -r prisma pack/
-cp -rT .next/standalone pack/
-cp -r .next/static pack/.next/
-
-cd pack
-npx prisma db push
-cd ..
-
-tar -cf subman.tar.gz pack

playwright.config.ts

@@ -1,79 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  testDir: './tests',
-  /* Run tests in files in parallel */
-  fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://127.0.0.1:3000',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
-  },
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    // {
-    //   name: 'webkit',
-    //   use: { ...devices['Desktop Safari'] },
-    // },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
-  ],
-
-  /* Run your local dev server before starting the tests */
-  webServer: {
-    command: 'node pack/server.js',
-    url: 'http://127.0.0.1:3000',
-    reuseExistingServer: !process.env.CI,
-  },
-});

prisma/script.js

@@ -1,24 +1,27 @@
-import { PrismaClient } from "@prisma/client";
+import { PrismaClient } from '@prisma/client'
 
-const prisma = new PrismaClient();
+const prisma = new PrismaClient()
 
 async function main() {
-  // ... you will write your Prisma Client queries here
-  const story = await prisma.story.update({
-    where: { id: 1 },
-    data: {
-      title: "Ghost Aliens of Mars",
-      genres: { set: [{ id: 1 }, { id: 2 }], create: { name: "alien-punk" } },
-    },
-  });
+	// ... you will write your Prisma Client queries here
+	const story = await prisma.story.update({
+		where: { id: 1 },
+		data: {
+			title: "Ghost Aliens of Mars",
+			genres: { set: [{ id: 1 }, { id: 2 }], create: { name: "alien-punk" } }
+		}
+
+	})
+	console.log(story)
+
 }
 
 main()
-  .then(async () => {
-    await prisma.$disconnect();
-  })
-  .catch(async (e) => {
-    console.error(e);
-    await prisma.$disconnect();
-    process.exit(1);
-  });
+	.then(async () => {
+		await prisma.$disconnect()
+	})
+	.catch(async (e) => {
+		console.error(e)
+		await prisma.$disconnect()
+		process.exit(1)
+	})

src/@/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-3 w-3 sm:h-6 sm:w-6 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",
+      "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}

src/@/components/ui/table.tsx

@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 md:px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-12 sm:px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className
     )}
     {...props}
@@ -87,7 +87,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("md:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn("sm:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
 ))

src/@/components/ui/toast.tsx

@@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
   <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]",
+      "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 sm:max-w-[420px]",
       className
     )}
     {...props}

src/app/api/auth/actions.ts

@@ -3,17 +3,13 @@ import prisma from 'app/lib/db';
 import { jwtVerify, JWTPayload, decodeJwt, SignJWT } from 'jose';
 import { cookies } from 'next/headers';
 import { loginSchema, LoginSchema } from 'app/login/schema';
-
-
-
-
-
+import { NextResponse } from 'next/server';
 
 export async function getJWTSecretKey<Uint8Array>() {
 	const secret = process.env.JWT_SECRET
 	if (!secret) throw new Error("There is no JWT secret key")
 	try {
-		const enc = new TextEncoder().encode(secret)
+		const enc: Uint8Array = new TextEncoder().encode(secret)
 		return enc
 	} catch (error) {
 		throw new Error("failed to getJWTSecretKey", error.message)

src/app/api/auth/login/route.ts

@@ -15,6 +15,7 @@ const dynamic = 'force-dynamic'
 //POST endpoint
 export async function POST(request: NextRequest) {
 	const body = await request.json()
+	console.log(`body: ${JSON.stringify(body)}`)
 	const { email, password } = body
 
 	if (!email || !password) {

src/app/layout.tsx

@@ -31,23 +31,22 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div id="layout-container" className="md:p-4 w-screen h-screen mt-2 md:mt-6 flex justify-center">
-            <div className="w-full md:w-5/6 flex flex-col md:flex-row">
-              <div id="sidebar" className=" flex flex-row md:flex-col  justify-between items-center"> <header className="">
-                <h1 className="font-black text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4 text-sm sm:text-4xl
-                ">SubMan</h1>
-                <p className="mt-2 mx-1 text-sm antialiased w-40 hidden md:block">The self-hosted literary submission tracker.</p>
+          <div id="layout-container" className="sm:p-4 w-screen h-screen mt-2 sm:mt-6 flex justify-center">
+            <div className="w-full sm:w-5/6 flex flex-col sm:flex-row">
+              <div id="sidebar" className=" flex flex-row sm:flex-col  justify-between"> <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 hidden sm:block">SubMan</h1>
+                <p className="mt-2 mx-1 text-sm antialiased w-40 hidden sm:block">The self-hosted literary submission tracker.</p>
               </header>
-                <Navlinks className="md:mt-6" />
-                <footer className="my-auto md:mt-auto flex justify-center"><ModeToggle /><LogoutButton />
+                <Navlinks className="sm:mt-6" />
+                <footer className="my-auto sm:mt-auto flex justify-center"><ModeToggle /><LogoutButton />
                 </footer>
               </div>
-              <div className="flex justify-center w-screen">
+              <div className="flex justify-center w-full">
                 {children}
               </div>
             </div>
           </div>
-          <Toaster test-id="toast" />
+          <Toaster />
         </ThemeProvider>
       </body>
     </html >

src/app/lib/create.ts

@@ -1,19 +1,22 @@
 "use server"
-import { Pub, Story, Sub } from "@prisma/client"
+import { Genre, Pub, Story, Sub } from "@prisma/client"
 import prisma from "./db"
 import { revalidatePath } from "next/cache"
+import { redirect } from "next/navigation"
 import { z } from "zod"
+import { storySchema } from "app/ui/forms/schemas"
 import { pubSchema } from "app/ui/forms/schemas"
 import { subSchema } from "app/ui/forms/schemas"
 import { prepGenreData, prepStoryData } from "./validate"
 
+//TODO - data validation, error handling, unauthorized access handling
 
-export async function createStory({ story, genres }: { story: Story, genres: number[] }): Promise<{ success: string }> {
+export async function createStory(data: Story & { genres: number[] }): Promise<Story | boolean | undefined> {
 	// will return undefined if middleware authorization fails
 	"use server"
 	try {
-		const storyData = await prepStoryData(story)
-		const genresArray = await prepGenreData(genres)
+		const storyData = await prepStoryData(data)
+		const genresArray = await prepGenreData(data.genres)
 
 		//submit
 		const res = await prisma.story.create({ data: storyData })
@@ -24,17 +27,24 @@ export async function createStory({ story, genres }: { story: Story, genres: num
 			}
 		})
 		revalidatePath("/story")
-		return { success: `Created the story '${story.title}'.` }
+		return res
 	} catch (error) {
 		console.error(error)
+		return false
 	}
 
 }
 
 
-export async function createPub({ pub, genres }: { pub: Pub, genres: number[] }): Promise<{ success: string }> {
+export async function createPub(data: Pub & { genres: number[] }): Promise<Pub | boolean | undefined> {
 	"use server"
-	const genresArray = genres.map(e => { return { id: e } })
+	//prepare data
+	const pubData = {
+		title: data.title,
+		link: data.link,
+		query_after_days: data.query_after_days
+	}
+	const genresArray = data.genres.map(e => { return { id: e } })
 
 	//prepare schemas
 	const schema = pubSchema.omit({ genres: true })
@@ -44,12 +54,12 @@ export async function createPub({ pub, genres }: { pub: Pub, genres: number[] })
 	try {
 
 		//validate
-		schema.parse(pub)
+		schema.parse(pubData)
 		genresSchema.safeParse(genresArray)
 
 		//submit
 		const res = await prisma.pub.create({
-			data: pub
+			data: pubData
 		})
 		const genresRes = await prisma.pub.update({
 			where: { id: res.id },
@@ -57,16 +67,17 @@ export async function createPub({ pub, genres }: { pub: Pub, genres: number[] })
 				{ genres: { set: genresArray } }
 		})
 		revalidatePath("/publication")
-		return { success: `Created the publication '${pub.title}'.` }
+		return genresRes
 	} catch (error) {
 		console.error(error)
+		return false
 	}
 
 }
 
 
 
-export async function createSub(data: Sub): Promise<Sub | boolean> {
+export async function createSub(data: Sub): Promise<Sub | undefined> {
 	"use server"
 	try {
 		subSchema.parse(data)
@@ -75,6 +86,6 @@ export async function createSub(data: Sub): Promise<Sub | boolean> {
 		return res
 	} catch (error) {
 		console.error(error)
-		return false
+		return undefined
 	}
 }

src/app/lib/del.ts

@@ -10,10 +10,9 @@ const tableMap = {
 	"/submission": "sub"
 }
 
-export async function deleteRecord(id: number, pathname: string): Promise<undefined | boolean> {
+export async function deleteRecord(id: number, pathname: Pathname): Promise<undefined | boolean> {
 	const table = tableMap[pathname]
 	try {
-		//@ts-ignore
 		const res = await prisma[table].delete({ where: { id } })
 		console.log(`deleted from ${table}: ${res.id}`)
 		revalidatePath(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/filterFns.ts

@@ -1,14 +0,0 @@
-import { Genre } from "@prisma/client";
-import { FilterFn, Row } from "@tanstack/react-table";
-
-export const genrePickerFilterFn = (row: Row<any>, columnId: string, filterValue: any) => {
-
-	const genres: Genre[] = row.getValue(columnId)
-
-	for (let index = 0; index < genres.length; index++) {
-		if (genres[genres.length - 1].name.includes(filterValue)) {
-			return true
-		}
-	}
-	return false
-}

src/app/lib/pluralize.ts

@@ -1,4 +1,4 @@
-export default function pluralize(word: string): string {
+export default function pluralize(word: "story" | "publication" | "submission"): string {
 	const map = {
 		story: "stories",
 		publication: "publications",

src/app/lib/update.ts

@@ -1,10 +1,10 @@
 "use server"
-import { prepGenreData, prepPubData, prepStoryData } from "./validate"
-import { Genre, Pub, Story, Sub } from "@prisma/client"
+import { Genre, Story, Sub } from "@prisma/client"
 import prisma from "./db"
 import { revalidatePath } from "next/cache"
-import { subSchema } from "app/ui/forms/schemas"
-import { SubForm } from "app/ui/forms/sub"
+import { redirect } from "next/navigation"
+import { storySchema, subSchema } from "app/ui/forms/schemas"
+import { z } from "zod"
 
 
 export async function updateField({ datum, table, column, id, pathname }: { datum?: string | number | Genre[], table: string, column: string, id: number, pathname: string }) {
@@ -21,7 +21,7 @@ export async function updateField({ datum, table, column, id, pathname }: { datu
 		return res
 	} catch (error) {
 		console.error(error)
-		return null
+		return undefined
 	}
 }
 
@@ -39,11 +39,11 @@ export async function updateGenres({ genres, table, id, pathname }: { genres: {
 		return res
 	} catch (error) {
 		console.error(error)
-		return null
+		return undefined
 	}
 }
 
-export async function updateSub(data: SubForm): Promise<Sub> {
+export async function updateSub(data: Sub): Promise<Sub | undefined> {
 	"use server"
 	try {
 		subSchema.parse(data)
@@ -52,62 +52,35 @@ export async function updateSub(data: SubForm): Promise<Sub> {
 		return res
 	} catch (error) {
 		console.error(error)
-		return null
+		return undefined
 	}
 }
 
 
-export async function updateStory(data: Story & { genres: number[] }): Promise<{ success: string }> {
+export async function updateStory(data: Story & { genres: number[] }): Promise<Story | undefined> {
 	"use server"
-
+	//prepare data
+	const genresArray = data.genres.map((e) => { return { id: e } })
+	const storyData = {
+		title: data.title,
+		word_count: data.word_count,
+	}
+	//prepare schemas
+	const schema = storySchema.omit({ id: true, genres: true })
+	const genreSchema = z.object({ id: z.number() })
+	const genresSchema = z.array(genreSchema)
 	try {
-		//prep and validate
-		const storyData = await prepStoryData(data)
-		const genresArray = await prepGenreData(data.genres)
-		//submit
-		const res = await prisma.story.update({
-			where: { id: data.id },
-			data: storyData
-		})
-		const genreRes = await prisma.story.update({
-			where: { id: data.id },
-			data: {
-				genres: { set: genresArray }
-			}
-		})
-		return { success: "Updated the story '" + res.title + "'." }
+		//validate
+		schema.safeParse(storyData)
+		genresSchema.safeParse(genresArray)
+
 	} catch (error) {
 		console.error(error)
-		return null
-	}
-}
-
-
-export async function updatePub(data: Pub & { genres: number[] }): Promise<{ success: string }> {
-	"use server"
-
-	try {
-		//prep and validate
-		const pubData = await prepPubData
-			(data)
-		const genresArray = await prepGenreData(data.genres)
-		//submit
-		const res = await prisma.pub.update({
-			where: { id: data.id },
-			data: pubData
-		})
-		await prisma.pub.update({
-			where: { id: data.id },
-			data: {
-				genres: { set: genresArray }
-			}
-		})
-		return { success: "Updated the publication '" + res.title + "'" }
-	} catch (error) {
-		console.error(error)
-		return null
+		return undefined
 	}
 }
 
 
 
+
+

src/app/lib/validate.ts

@@ -1,27 +1,24 @@
 import { z } from "zod";
 import { storySchema } from "app/ui/forms/schemas";
-import { Pub, Story } from "@prisma/client";
-import { pubSchema } from "app/ui/forms/schemas";
-import { StoryWithGenres } from "app/story/page";
+import { Story } from "@prisma/client";
 
 //schemas
 
-const storySchemaTrimmed = storySchema.omit({ genres: true })
-const pubSchemaTrimmed = pubSchema.omit({ genres: true })
+const schema = storySchema.omit({ id: true, genres: true })
 const genreSchema = z.object({ id: z.number() })
 const genresSchema = z.array(genreSchema)
 
-export async function prepStoryData(data: Story): Promise<{ title: string, word_count: number }> {
-	const storyData = structuredClone(data)
-	//throw an error if validation fails
-	storySchemaTrimmed.safeParse(storyData)
-	return storyData
-}
+export async function prepStoryData(data: Story & { genres: number[] }): Promise<{ title: string, word_count: number }> {
+	const storyData = {
+		title: data.title,
+		word_count: data.word_count,
+	}
+	//prepare schemas
 
-export async function prepPubData(data: Pub): Promise<Pub> {
-	const pubData = structuredClone(data)
-	pubSchemaTrimmed.safeParse(pubData)
-	return pubData
+	//throw an error if validation fails
+	schema.safeParse(storyData)
+
+	return storyData
 }
 
 export async function prepGenreData(data: number[]): Promise<{ id: number }[]> {

src/app/login/page.tsx

@@ -18,6 +18,7 @@ export default function LoginForm() {
 	const router = useRouter()
 	const searchParams = useSearchParams()
 	const redirect = searchParams.get("from") ?? "/submission"
+	console.log(redirect)
 	const form = useForm<z.infer<typeof loginSchema>>({
 		resolver: zodResolver(loginSchema),
 	})
@@ -36,7 +37,7 @@ export default function LoginForm() {
 			toast({ title: "login successful!" })
 			setSubmitted(true)
 			await revalidate(redirect)
-			window.location.href = redirect
+			router.push(redirect)
 		} else {
 			toast({ title: "login failed!" })
 		}
@@ -44,15 +45,10 @@ export default function LoginForm() {
 
 
 	return (
-		<main className="flex flex-col items-center justify-around h-60 w-26">
-			{submitted ? <div className="flex flex-col items-center justify-around h-30 w-26">
-				<h1>Logging in...</h1>
-				<Button asChild>
-					<Link href={redirect}>Continue</Link>
-				</Button>
-			</div> :
+		<>
+			{submitted ? <p>Logging in...</p> :
 				<Form {...form}>
-					<form onSubmit={onSubmit} className="flex flex-col items-center space-y-6">
+					<form onSubmit={onSubmit} className="mt-20 flex flex-col items-center space-y-6">
 						<FormField
 							control={form.control}
 							name="email"
@@ -83,7 +79,7 @@ export default function LoginForm() {
 					</form>
 				</Form>
 			}
-		</main>
+		</>
 
 	)
 }

src/app/page.tsx

@@ -1,28 +1,13 @@
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import styles from "./page.module.css";
 
 export default function Home() {
   return (
-    <main className="flex flex-col gap-4 items-center justify-around h-60 w-26 m-6">
-      < div >
-        <h1 className="text-3xl font-black">
-          Welcome to Subman!
-        </h1>
-      </div >
-      <div className="flex flex-col gap-3">
-        <p>
-          This app is for demonstration purposes only. Data is reset periodically.
-        </p>
-        <p>
-          <b>USERNAME:</b> demo@demo.demo
-        </p>
-        <p>
-          <b>PASSWORD:</b> password
-        </p>
-      </div>
-      <Button className="mt-6">
-        <Link href="/login">Log in</Link>
-      </Button>
-    </main >
+    <main className={styles.main}>
+      Hello
+      <h1 className="text-3xl font-black underline">
+        Hello world!
+      </h1>
+    </main>
   );
 }

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

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

src/app/publication/columns.tsx

@@ -2,18 +2,17 @@
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { ArrowUpDown, BookType, Clock, Drama, SquareArrowOutUpRight } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { PubWithGenres } from "./page"
+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 { pubSchema } from "app/ui/forms/schemas"
 import GenrePickerInputCell from "app/ui/tables/inputs/genrePickerInput"
-import { genrePickerFilterFn } from "app/lib/filterFns"
 
 
-const columnHelper = createColumnHelper<PubWithGenres>()
+const columnHelper = createColumnHelper<PubsWithGenres>()
 
-export const columns: ColumnDef<PubWithGenres>[] = [
+export const columns: ColumnDef<PubsWithGenres>[] = [
   selectCol,
   {
     accessorKey: "title",
@@ -27,15 +26,14 @@ export const columns: ColumnDef<PubWithGenres>[] = [
             Title
           </span>
           <span className="block sm:hidden"><BookType /></span>
-          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
+          <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       )
     },
     cell: cell => (
       <>
-        {/* @ts-ignore */}
-        <p className="block text-xs max-w-24 break-words md:hidden">{cell.getValue()}</p>
-        <TextInputCell cellContext={cell} className="hidden md:block" />
+        <p className="block text-xs max-w-24 break-words sm:hidden">{cell.getValue()}</p>
+        <TextInputCell cellContext={cell} className="hidden sm:block" />
       </>
     ),
     meta: { formSchema: pubSchema }
@@ -51,9 +49,8 @@ export const columns: ColumnDef<PubWithGenres>[] = [
     ),
     cell: cell => (
       <>
-        {/* @ts-ignore */}
-        <p className="block text-xs max-w-16 truncate md:hidden">{cell.getValue()}</p>
-        <TextInputCell cellContext={cell} className="hidden md:block" />
+        <p className="block text-xs max-w-16 truncate sm:hidden">{cell.getValue()}</p>
+        <TextInputCell cellContext={cell} className="hidden sm:block" />
       </>
     ),
     meta: { formSchema: pubSchema }
@@ -67,10 +64,10 @@ export const columns: ColumnDef<PubWithGenres>[] = [
       </div>
     ),
     cell: GenrePickerInputCell,
-    filterFn: genrePickerFilterFn
+    filterFn: "arrIncludes"
+    //TODO - write custom filter function, to account for an array of objects
   }),
 
-
   {
     accessorKey: "query_after_days",
     header: () => (
@@ -79,12 +76,10 @@ export const columns: ColumnDef<PubWithGenres>[] = [
         <span className="sm:hidden"><Clock /></span>
       </div>
     ),
-    enableColumnFilter: false,
     cell: cell => (
       <>
-        {/* @ts-ignore */}
-        <p className="block md:hidden text-center">{cell.getValue()}</p>
-        <NumberInputCell cellContext={cell} className="hidden md:block" />
+        <p className="block sm:hidden text-center">{cell.getValue()}</p>
+        <NumberInputCell cellContext={cell} className="hidden sm:block" />
       </>
     ),
     meta: {

src/app/publication/create.tsx

@@ -20,8 +20,8 @@ export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { ge
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button>
-          <span className="hidden md:block">Create new publication</span>
-          <Plus className="block md:hidden" />
+          <span className="hidden sm:block">Create new publication</span>
+          <Plus className="block sm:hidden" />
         </Button>
       </DialogTrigger>
       <DialogContent>
@@ -29,7 +29,7 @@ export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { ge
           <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 dbAction={createPub} genres={genres} closeDialog={closeDialog} />
+        <PubForm createPub={createPub} genres={genres} closeDialog={closeDialog} />
         <DialogFooter>
           <Button form="pubform">Submit</Button>
         </DialogFooter>

src/app/publication/edit.tsx

@@ -1,26 +0,0 @@
-"use client"
-import { DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { ComponentProps } from "react";
-import { Genre, Pub } from "@prisma/client";
-import PubForm from "app/ui/forms/pub";
-import { PubWithGenres } from "./page";
-
-export default function EditPubDialog({ genres, closeDialog, defaults, dbAction }: ComponentProps<"div"> & { genres: Genre[], closeDialog: () => void, defaults: PubWithGenres, dbAction: (data: Pub & { genres: number[] }) => Promise<{ success: string }> }) {
-
-
-  return (
-
-    <>
-      <DialogHeader>
-        <DialogTitle>Edit publication</DialogTitle>
-        <DialogDescription>Modify an entry for an existing publication. Remember - you can edit fields inline by double clicking on them!</DialogDescription>
-      </DialogHeader>
-      <PubForm dbAction={dbAction} genres={genres} closeDialog={closeDialog} defaults={defaults} />
-      <DialogFooter>
-        <Button form="pubform">Submit</Button>
-      </DialogFooter>
-    </>
-
-  )
-}

src/app/publication/page.tsx

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

src/app/story/columns.tsx

@@ -8,7 +8,6 @@ import NumberInputCell from "app/ui/tables/inputs/numberInput"
 import { storySchema } from "app/ui/forms/schemas"
 import { TextInputCell } from "app/ui/tables/inputs/textInput"
 import GenrePickerInputCell from "app/ui/tables/inputs/genrePickerInput"
-import { genrePickerFilterFn } from "app/lib/filterFns"
 const columnHelper = createColumnHelper<StoryWithGenres>()
 
 export const columns: ColumnDef<StoryWithGenres>[] = [
@@ -26,15 +25,14 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
             Title
           </span>
           <span className="block sm:hidden"><BookType /></span>
-          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
+          <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       )
     },
     cell: cell => (
       <>
-        {/* @ts-ignore */}
-        <p className="block break-words max-w-28 md:hidden text-xs">{cell.getValue()}</p>
-        <TextInputCell cellContext={cell} className="hidden md:block" />
+        <p className="block break-words max-w-36 sm:hidden text-xs">{cell.getValue()}</p>
+        <TextInputCell cellContext={cell} className="hidden sm:block" />
       </>
     ),
     meta: { formSchema: storySchema }
@@ -54,16 +52,15 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
           <span className="sm:hidden">
             <Tally5 />
           </span>
-          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
+          <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       )
     },
     enableColumnFilter: false,
     cell: cell => (
       <>
-        {/* @ts-ignore */}
-        <p className="block md:hidden text-center text-xs">{cell.getValue()}</p>
-        <NumberInputCell cellContext={cell} className="hidden md:block" />
+        <p className="block sm:hidden text-center text-xs">{cell.getValue()}</p>
+        <NumberInputCell cellContext={cell} className="hidden sm:block" />
       </>
     ),
     meta: {
@@ -79,7 +76,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
       </div>
     ),
     cell: GenrePickerInputCell,
-    filterFn: genrePickerFilterFn,
+    filterFn: "arrIncludes",
     meta: {}
   }),
 

src/app/story/create.tsx

@@ -19,8 +19,8 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <div>
-          <Button className="hidden md:block">Create new story</Button>
-          <Button className="block md:hidden"><Plus /> </Button>
+          <Button className="hidden sm:block">Create new story</Button>
+          <Button className="block sm:hidden"><Plus /> </Button>
         </div>
       </DialogTrigger>
       <DialogContent>
@@ -28,7 +28,7 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & {
           <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 dbAction={createStory} genres={genres} className="" closeDialog={closeDialog} />
+        <StoryForm createStory={createStory} genres={genres} className="" closeDialog={closeDialog} />
         <DialogFooter>
           <Button form="storyform">Submit</Button>
         </DialogFooter>

src/app/story/create/page.tsx

@@ -4,10 +4,9 @@ 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";
-import { Story } from "@prisma/client";
 export default async function Page() {
 	const genres = await getGenres()
-	async function createStory(data: Story & { genres: number[] }): Promise<{ success: string }> {
+	async function createStory(data) {
 		"use server"
 		const genresArray = data.genres.map(e => { return { id: e } })
 		const res = await prisma.story.create({
@@ -27,14 +26,12 @@ export default async function Page() {
 		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} dbAction={createStory} className="mt-6" />
+				<StoryForm genres={genres} createStory={createStory} className="mt-6" />
 			</CreateContainerContent>
 		</CreateContainer>
 	)

src/app/story/edit.tsx

@@ -1,27 +0,0 @@
-"use client"
-import { DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { ComponentProps, useState } from "react";
-import { Genre, Story } from "@prisma/client";
-import StoryForm from "app/ui/forms/story";
-import { StoryWithGenres } from "./page";
-
-
-export default function EditStoryDialog({ genres, closeDialog, defaults, dbAction }: ComponentProps<"div"> & { genres: Genre[], closeDialog: () => void, defaults: StoryWithGenres, dbAction: (data: Story & { genres: number[] }) => Promise<{ success: string }> }) {
-
-
-  return (
-    <>
-      <DialogHeader>
-        <DialogTitle>Edit story</DialogTitle>
-        <DialogDescription>Modify an entry for an existing story. Remember - you can edit fields inline by double-clicking on them!</DialogDescription>
-      </DialogHeader>
-      <StoryForm dbAction={dbAction} genres={genres} className="" closeDialog={closeDialog} defaults={defaults} />
-      <DialogFooter>
-        <Button form="storyform">Submit</Button>
-      </DialogFooter>
-    </>
-
-  )
-}
-

src/app/story/page.tsx

@@ -19,7 +19,7 @@ export default async function Page() {
 
 
   return (
-    <div className="container px-1 md:px-4 mx-auto">
+    <div className="container px-1 sm:px-4 mx-auto">
       <DataTable columns={columns} data={storiesWithGenres} tableName="story"
         genres={genres}
       >

src/app/submission/columns.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button"
 import { SubComplete } from "./page"
 import { selectCol } from "app/ui/tables/selectColumn"
 import TitleContainer from "app/ui/titleContainer"
+import { CalendarArrowUp } from "lucide"
 
 
 
@@ -20,8 +21,8 @@ export const columns: ColumnDef<SubComplete>[] = [
     id: "story",
     header: () => (
       <>
-        <span className="hidden md:block">Story</span>
-        <NotepadText className="block md:hidden" />
+        <span className="hidden sm:block">Story</span>
+        <NotepadText className="block sm:hidden" />
       </>
     ),
     cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
@@ -36,8 +37,8 @@ export const columns: ColumnDef<SubComplete>[] = [
     id: "pub",
     header: () => (
       <>
-        <span className="hidden md:block">Publication</span>
-        <BookText className="block md:hidden" />
+        <span className="hidden sm:block">Publication</span>
+        <BookText className="block sm:hidden" />
       </>
     ),
     cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
@@ -49,19 +50,19 @@ export const columns: ColumnDef<SubComplete>[] = [
       return (
         <Button
           variant="ghost"
-          className="p-0 flex justify-center w-full"
+          className="p-0"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          <span className="hidden md:block"> Date Submitted </span>
-          <CalendarPlus className="block md:hidden" />
-          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
+          <span className="hidden sm:block"> Date Submitted </span>
+          <CalendarPlus className="block sm:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
     cell: (props: CellContext<any, any>) => (
-      <p className="w-full text-center text-xs md:text-sm">{props.getValue().toLocaleDateString('ES', {
+      <p className="w-full text-center text-xs sm:text-sm">{props.getValue().toLocaleDateString('ES', {
         day: 'numeric',
         month: 'numeric',
         year: '2-digit'
@@ -75,18 +76,18 @@ export const columns: ColumnDef<SubComplete>[] = [
       return (
         <Button
           variant="ghost"
-          className="p-0 flex justify-center w-full"
+          className="p-0"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          <span className="hidden md:block"> Date Responded </span>
-          <CalendarMinus className="block md:hidden" />
-          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
+          <span className="hidden sm:block"> Date Responded </span>
+          <CalendarMinus className="block sm:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()?.toLocaleDateString('ES', {
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs sm:text-sm">{props.getValue()?.toLocaleDateString('ES', {
       day: 'numeric',
       month: 'numeric',
       year: '2-digit'
@@ -104,16 +105,16 @@ export const columns: ColumnDef<SubComplete>[] = [
       return (
         <Button
           variant="ghost"
-          className="p-0 flex justify-center w-full"
+          className="p-0"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          <span className="hidden md:block"> Response </span>
-          <MessageCircleReply className="block md:hidden" />
-          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
+          <span className="hidden sm:block"> Response </span>
+          <MessageCircleReply className="block sm:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
         </Button>
       )
     },
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()}</p>)
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs sm:text-sm">{props.getValue()}</p>)
   },
 
 ]

src/app/submission/create.tsx

@@ -8,12 +8,18 @@ import { Pub, Response, Story } from "@prisma/client";
 import SubmissionForm from "app/ui/forms/sub";
 import { Plus } from "lucide-react";
 import { useState } from "react";
-import { StoryWithGenres } from "app/story/page";
-import { PubWithGenres } from "app/publication/page";
 
 
+type CreateSubDefaults = {
+  subId?: number,
+  storyId: number,
+  pubId: number,
+  submitted: Date,
+  responded: Date,
+  respoonseId: number
+}
 
-export default function CreateSubmissionDialog({ stories, pubs, responses }: ComponentProps<"div"> & { stories: StoryWithGenres[], pubs: PubWithGenres[], responses: Response[] }) {
+export default function CreateSubmissionDialog({ stories, pubs, responses, defaults }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[], defaults?: CreateSubDefaults }) {
 
   const [isOpen, setIsOpen] = useState(false)
   function closeDialog() {
@@ -24,16 +30,16 @@ export default function CreateSubmissionDialog({ stories, pubs, responses }: Com
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button>
-          <span className="hidden md:block">Create new submission</span>
-          <Plus className="block md:hidden" />
+          <span className="hidden sm:block">Create new submission</span>
+          <Plus className="block sm:hidden" />
         </Button>
       </DialogTrigger>
-      <DialogContent className="text-xs md:text-sm">
+      <DialogContent className="text-xs sm:text-sm">
         <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 pubs={pubs} responses={responses} stories={stories} closeDialog={closeDialog} />
+        <SubmissionForm pubs={pubs} responses={responses} stories={stories} defaults={defaults} closeDialog={closeDialog} />
         <DialogFooter>
           <Button form="subform">Submit</Button>
         </DialogFooter>

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

@@ -1,10 +1,12 @@
 "use client"
-import { DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+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 { SubForm } from "app/ui/forms/sub";
+import SubmissionForm, { SubForm } from "app/ui/forms/sub";
 import EditSubmissionForm from "app/ui/forms/editSub";
+import { useState } from "react";
 
 
 export default function EditSubmissionDialog({ stories, pubs, responses, defaults, children, closeDialog }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[], defaults: SubForm, closeDialog: () => void }) {

src/app/submission/page.tsx

@@ -1,10 +1,8 @@
-import { getGenres, getPubs, getPubsWithGenres, getResponses, getStories, getStoriesWithGenres, 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 { Genre, Pub, Response, Story, Sub } from "@prisma/client"
+import { Pub, Response, Story, Sub } from "@prisma/client"
 import CreateSubmissionDialog from "./create"
-import { PubWithGenres } from "app/publication/page"
-import { StoryWithGenres } from "app/story/page"
 
 export type SubComplete = Sub & {
   pub: Pub,
@@ -14,13 +12,13 @@ export type SubComplete = Sub & {
 export default async function Page() {
 
   const subs: Array<SubComplete> = await getSubsComplete()
-  const stories: StoryWithGenres[] = await getStoriesWithGenres()
-  const pubs: PubWithGenres[] = await getPubsWithGenres()
-  const responses: Response[] = await getResponses()
-  const genres: Genre[] = await getGenres()
+  const stories = await getStories()
+  const pubs = await getPubs()
+  const responses = await getResponses()
+  const genres = await getGenres()
 
   return (
-    <div className="container px-1 md:px-4 mx-auto">
+    <div className="container px-1 sm:px-4 mx-auto">
       <DataTable data={subs} columns={columns} tableName="sub"
         stories={stories}
         pubs={pubs}

src/app/tailwind.css

@@ -706,10 +706,6 @@ body {
   z-index: 100;
 }
 
-.m-6 {
-  margin: 1.5rem;
-}
-
 .m-auto {
   margin: auto;
 }
@@ -719,11 +715,6 @@ body {
   margin-right: -0.25rem;
 }
 
-.mx-0 {
-  margin-left: 0px;
-  margin-right: 0px;
-}
-
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -762,10 +753,6 @@ body {
   margin-left: auto;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .mr-4 {
   margin-right: 1rem;
 }
@@ -774,6 +761,10 @@ body {
   margin-top: 0.5rem;
 }
 
+.mt-20 {
+  margin-top: 5rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -855,10 +846,6 @@ body {
   height: 1.25rem;
 }
 
-.h-60 {
-  height: 15rem;
-}
-
 .h-7 {
   height: 1.75rem;
 }
@@ -998,16 +985,8 @@ body {
   max-width: 6rem;
 }
 
-.max-w-28 {
-  max-width: 7rem;
-}
-
-.max-w-32 {
-  max-width: 8rem;
-}
-
-.max-w-60 {
-  max-width: 15rem;
+.max-w-36 {
+  max-width: 9rem;
 }
 
 .max-w-full {
@@ -1022,6 +1001,10 @@ body {
   max-width: 24rem;
 }
 
+.max-w-xs {
+  max-width: 20rem;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1130,10 +1113,6 @@ body {
   justify-content: space-between;
 }
 
-.justify-around {
-  justify-content: space-around;
-}
-
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1142,10 +1121,6 @@ body {
   gap: 0.5rem;
 }
 
-.gap-3 {
-  gap: 0.75rem;
-}
-
 .gap-4 {
   gap: 1rem;
 }
@@ -1401,11 +1376,6 @@ body {
   padding: 1.5rem;
 }
 
-.px-0 {
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1511,6 +1481,11 @@ body {
   line-height: 2.25rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-\[0\.8rem\] {
   font-size: 0.8rem;
 }
@@ -1625,6 +1600,10 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -2361,6 +2340,14 @@ body {
     top: auto;
   }
 
+  .sm\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .sm\:mt-auto {
+    margin-top: auto;
+  }
+
   .sm\:block {
     display: block;
   }
@@ -2369,12 +2356,16 @@ body {
     display: none;
   }
 
-  .sm\:h-6 {
-    height: 1.5rem;
+  .sm\:w-24 {
+    width: 6rem;
   }
 
-  .sm\:w-6 {
-    width: 1.5rem;
+  .sm\:w-5\/6 {
+    width: 83.333333%;
+  }
+
+  .sm\:max-w-\[420px\] {
+    max-width: 420px;
   }
 
   .sm\:flex-row {
@@ -2407,17 +2398,47 @@ body {
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
+  .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+  }
+
   .sm\:rounded-lg {
     border-radius: var(--radius);
   }
 
+  .sm\:rounded-l-3xl {
+    border-top-left-radius: 1.5rem;
+    border-bottom-left-radius: 1.5rem;
+  }
+
+  .sm\:p-4 {
+    padding: 1rem;
+  }
+
+  .sm\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .sm\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
 
-  .sm\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
+  .sm\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .sm\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
   }
 
   .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {

src/app/test/page.tsx

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

src/app/ui/forms/editSub.tsx

@@ -56,13 +56,13 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 		</SelectItem>
 	))
 	const pubsSelectItems = pubs.map(e => (
-		<SelectItem value={e.id} key={e.title}>
+		<SelectItem value={e.id}>
 			{e.title}
 		</SelectItem>
 	))
 
 	const reponsesSelectItems = responses.map(e => (
-		<SelectItem value={e.id} key={e.title}>
+		<SelectItem value={e.id}>
 			{e.response}
 		</SelectItem>
 	))
@@ -99,14 +99,14 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 
 	return (
 		<Form {...form}>
-			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 md:space-y-8">
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 sm:space-y-8">
 				<FormField
 					control={form.control}
 					name="storyId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel className="text-sm md:text-base">Story</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value.toString()}>
+							<FormLabel className="text-sm sm:text-base">Story</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue placeholder="Select something">
@@ -118,7 +118,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									{storiesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The piece you submitted</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The piece you submitted</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -128,8 +128,8 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 					name="pubId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel className="text-sm md:text-base">Publication</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value.toString()}>
+							<FormLabel className="text-sm sm:text-base">Publication</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue placeholder="Select something">
@@ -141,7 +141,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									{pubsSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -152,7 +152,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 					name="submitted"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel className="text-sm md:text-base">Date of submission</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Date of submission</FormLabel>
 							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -173,8 +173,9 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									</FormControl>
 								</PopoverTrigger>
 								<PopoverContent className="w-auto p-0" align="start">
-									{/* @ts-ignore */}
-									<Calendar mode="single" selected={field.value}
+									<Calendar
+										mode="single"
+										selected={field.value}
 										onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }}
 										disabled={(date) =>
 											date > new Date() || date < new Date("1900-01-01")
@@ -183,7 +184,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription className="text-xs md:text-base">
+							<FormDescription className="text-xs sm:text-base">
 								The date you sent it
 							</FormDescription>
 							<FormMessage />
@@ -196,7 +197,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 					name="responded"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel className="text-sm md:text-base">Date of response</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Date of response</FormLabel>
 							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -217,8 +218,10 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									</FormControl>
 								</PopoverTrigger>
 								<PopoverContent className="w-auto p-0" align="start">
-									{/* @ts-ignore */}
-									<Calendar selected={field.value} onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
+									<Calendar
+										mode="single"
+										selected={field.value}
+										onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
 										disabled={(date) =>
 											date > new Date() || date < new Date("1900-01-01")
 										}
@@ -226,7 +229,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription className="text-xs md:text-base">
+							<FormDescription className="text-xs sm:text-base">
 								The date they wrote back
 							</FormDescription>
 							<FormMessage />
@@ -240,8 +243,8 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 					name="responseId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel className="text-sm md:text-base">Response</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value.toString()}>
+							<FormLabel className="text-sm sm:text-base">Response</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue>
@@ -253,7 +256,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
 									{reponsesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}

src/app/ui/forms/genrePicker.tsx

@@ -21,7 +21,7 @@ export default function GenrePicker({ genres, form }: ComponentProps<"div"> & {
 							<Button
 								variant={"outline"}
 								className={cn(
-									"min-w-fit max-w-60 pl-3 text-left font-normal flex-wrap gap-y-1 h-fit min-h-10",
+									"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"
 								)}
 							>

src/app/ui/forms/pub.tsx

@@ -17,22 +17,20 @@ import { toast } from "@/components/ui/use-toast"
 
 import { randomPublicationTitle } from "app/lib/shortStoryTitleGenerator"
 import { ComponentProps } from "react"
-import { Genre, Pub } from "@prisma/client"
+import { Genre } from "@prisma/client"
 import GenrePicker from "./genrePicker"
 import { pubSchema } from "./schemas"
 import { useRouter } from "next/navigation"
 import { Ban } from "lucide-react"
-import { PubWithGenres } from "app/publication/page"
 
-export default function PubForm({ genres, dbAction, className, closeDialog, defaults }: ComponentProps<"div"> & { genres: Array<Genre>, dbAction: (data: any) => Promise<{ success: string }>, closeDialog: () => void, defaults?: PubWithGenres }) {
+export default function PubForm({ genres, createPub, className, closeDialog }: ComponentProps<"div"> & { genres: Array<Genre>, createPub: (data: any) => void, closeDialog: () => void }) {
 	const form = useForm<z.infer<typeof pubSchema>>({
 		resolver: zodResolver(pubSchema),
 		defaultValues: {
-			id: defaults?.id,
-			title: defaults?.title ?? "",
-			link: defaults?.link ?? "",
-			query_after_days: defaults?.query_after_days ?? 30,
-			genres: defaults?.genres.map(e => e.id) ?? []
+			title: "",
+			link: "",
+			query_after_days: 30,
+			genres: []
 		},
 	})
 
@@ -40,16 +38,9 @@ export default function PubForm({ genres, dbAction, className, closeDialog, defa
 
 	async function onSubmit(values: z.infer<typeof pubSchema>) {
 		try {
-			const res = await dbAction({
-				pub: {
-					id: values?.id,
-					title: values.title,
-					link: values.link,
-					query_after_days: values.query_after_days
-				}, genres: values.genres
-			})
-			if (!res?.success) throw new Error("something went wrong")
-			toast({ title: "Success!", description: res.success })
+			const res = await createPub(values)
+			if (!res) throw new Error("something went wrong")
+			toast({ title: "Successfully submitted:", description: values.title })
 			router.refresh()
 			closeDialog()
 		} catch (error) {

src/app/ui/forms/schemas.ts

@@ -7,7 +7,6 @@ export const storySchema = z.object({
 })
 
 export const pubSchema = z.object({
-	id: z.coerce.number().optional(),
 	title: z.string().min(2).max(50),
 	link: z.string(),
 	query_after_days: z.coerce.number().min(30),

src/app/ui/forms/story.tsx

@@ -21,7 +21,6 @@ import { randomStoryTitle } from "app/lib/shortStoryTitleGenerator"
 import GenrePicker from "./genrePicker"
 import { useRouter } from "next/navigation"
 import { Ban, Cross } from "lucide-react"
-import { StoryWithGenres } from "app/story/page"
 
 export const formSchema = z.object({
 	id: z.number().optional(),
@@ -30,14 +29,12 @@ export const formSchema = z.object({
 	genres: z.array(z.number())
 })
 
-export default function StoryForm({ genres, dbAction, className, closeDialog, defaults }: ComponentProps<"div"> & { genres: Array<Genre>, dbAction: (data: any) => Promise<{ success: string }>, className: string, closeDialog?: () => void, defaults?: StoryWithGenres }) {
+export default function StoryForm({ genres, createStory, className, closeDialog }: ComponentProps<"div"> & { genres: Array<Genre>, createStory: (data: any) => void, className: string, closeDialog: () => void }) {
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
 		defaultValues: {
-			id: defaults?.id,
-			title: defaults?.title ?? "",
-			word_count: defaults?.word_count ?? 500,
-			genres: defaults?.genres.map(e => e.id) ?? []
+			word_count: 500,
+			genres: []
 		},
 	})
 
@@ -45,17 +42,10 @@ export default function StoryForm({ genres, dbAction, className, closeDialog, de
 
 	async function onSubmit(values: z.infer<typeof formSchema>) {
 		try {
-			const res = await dbAction({
-				story: {
-					id: values?.id,
-					title: values.title,
-					word_count: values.word_count,
-				},
-				genres: values.genres
-			})
+			const res = await createStory(values)
 			//server actions return undefined if middleware authentication fails
-			if (!res?.success) throw new Error("something went wrong")
-			toast({ title: "Success!", description: res.success })
+			if (!res) throw new Error("something went wrong")
+			toast({ title: "Sucessfully submitted:", description: values.title })
 			router.refresh()
 			closeDialog()
 		} catch (error) {
@@ -93,7 +83,7 @@ export default function StoryForm({ genres, dbAction, className, closeDialog, de
 						)}
 					/>
 
-					<div className="inline-flex flex-wrap justify-around items-start w-full gap-x-16 gap-y-8 items-baseline max-w-full">
+					<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 items-baseline max-w-full">
 
 						<GenrePicker
 							genres={genres}
@@ -104,7 +94,7 @@ export default function StoryForm({ genres, dbAction, className, closeDialog, de
 							control={form.control}
 							name="word_count"
 							render={({ field }) => (
-								<FormItem className="flex flex-col ">
+								<FormItem className="flex flex-col">
 									<FormLabel className="h-5">Word count</FormLabel>
 									<FormControl>
 										<Input className=" w-24" type="number" step={500} {...field}></Input>

src/app/ui/forms/sub.tsx

@@ -36,14 +36,11 @@ import { createSub } from "app/lib/create"
 import { subSchema } from "./schemas"
 import { useRouter } from "next/navigation"
 import { Ban } from "lucide-react"
-import { Pub, Response, Story, Sub } from "@prisma/client"
-import { StoryWithGenres } from "app/story/page"
-import { PubWithGenres } from "app/publication/page"
 
 export type SubForm = z.infer<typeof subSchema>
 
 
-export default function SubmissionForm({ stories, pubs, responses, defaults, closeDialog }: { stories: StoryWithGenres[], pubs: PubWithGenres[], responses: Response[], defaults?: Sub, closeDialog?: () => void }) {
+export default function SubmissionForm({ stories, pubs, responses, defaults, closeDialog }: { stories: any, pubs: any, responses: any, defaults: any, closeDialog: () => void }) {
 	const form = useForm<z.infer<typeof subSchema>>({
 		resolver: zodResolver(subSchema),
 		defaultValues: {
@@ -53,41 +50,19 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 	})
 	const [isSubCalendarOpen, setIsSubCalendarOpen] = useState(false);
 	const [isRespCalendarOpen, setIsRespCalendarOpen] = useState(false);
-	const [relevantPubIds, setRelevantPubIds] = useState(pubs.map(e => e.id));
-
-	function updateRelevantPubs(storyId: number) {
-		console.log("storyId: " + storyId)
-		console.log("stories: ", stories)
-		const story = stories.find(e => e.id == storyId)
-		console.log("story: ", story)
-		const storyGenreIds = story?.genres.map(e => e.id) ?? []
-		const relevantPubIds = pubs.filter(e => {
-			const pubGenreIds = e.genres.map(e => e.id)
-			for (let i = 0; i < storyGenreIds.length; i++) {
-				const storyGenreId = storyGenreIds[i];
-				if (pubGenreIds.includes(storyGenreId)) return true
-			}
-		}).map(e => e.id)
-		console.log("relevant pubs: ", relevantPubIds)
-		setRelevantPubIds(relevantPubIds)
-	}
-
-	const storiesSelectItems = stories.map((e: Story) => (
-		<SelectItem value={e.id?.toString()} key={e.title}>
+	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 pubsSelectItems = pubs.map(e => {
-		const isDisabled = !relevantPubIds.includes(e.id)
-		return (
-			<SelectItem disabled={isDisabled} value={e.id.toString()} key={e.title}>
-				{e.title}
-			</SelectItem>
-		)
-	})
 
 	const reponsesSelectItems = responses.map(e => (
-		<SelectItem value={e.id.toString()} key={e.response}>
+		<SelectItem value={e.id}>
 			{e.response}
 		</SelectItem>
 	))
@@ -96,7 +71,6 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 
 	async function onSubmit(values: z.infer<typeof subSchema>) {
 		try {
-			//@ts-ignore
 			const res = await createSub(values)
 			if (!res) throw new Error("something went wrong")
 			toast({ title: "Successfully created new submission!" })
@@ -121,14 +95,14 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 
 	return (
 		<Form {...form}>
-			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 md:space-y-8 text-xs">
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 sm:space-y-8 text-xs">
 				<FormField
 					control={form.control}
 					name="storyId"
 					render={({ field }) => (
 						<FormItem>
 							<FormLabel>Story</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value?.toString()}>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue placeholder="Select something">
@@ -140,7 +114,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									{storiesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The piece you submitted</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The piece you submitted</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -150,9 +124,8 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="pubId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel className="text-sm md:text-base">Publication</FormLabel>
-							<Select onOpenChange={() => updateRelevantPubs(form.getValues().storyId
-							)} onValueChange={field.onChange} defaultValue={field.value?.toString()}>
+							<FormLabel className="text-sm sm:text-base">Publication</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue placeholder="Select something">
@@ -164,7 +137,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									{pubsSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The market you sent it to. Bad genre fits are greyed out.</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -175,7 +148,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="submitted"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel className="text-sm md:text-base">Date of submission</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Date of submission</FormLabel>
 							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -196,8 +169,9 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									</FormControl>
 								</PopoverTrigger>
 								<PopoverContent className="w-auto p-0" align="start">
-									{/* @ts-ignore */}
-									<Calendar mode="single" selected={field.value}
+									<Calendar
+										mode="single"
+										selected={field.value}
 										onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }}
 										disabled={(date) =>
 											date > new Date() || date < new Date("1900-01-01")
@@ -206,7 +180,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription className="text-xs md:text-base">
+							<FormDescription className="text-xs sm:text-base">
 								The date you sent it
 							</FormDescription>
 							<FormMessage />
@@ -219,7 +193,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="responded"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel className="text-sm md:text-base">Date of response</FormLabel>
+							<FormLabel className="text-sm sm:text-base">Date of response</FormLabel>
 							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -240,8 +214,9 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									</FormControl>
 								</PopoverTrigger>
 								<PopoverContent className="w-auto p-0" align="start">
-									{/* @ts-ignore */}
-									<Calendar mode="single" selected={field.value}
+									<Calendar
+										mode="single"
+										selected={field.value}
 										onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
 										disabled={(date) =>
 											date > new Date() || date < new Date("1900-01-01")
@@ -250,7 +225,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription className="text-xs md:text-base">
+							<FormDescription className="text-xs sm:text-base">
 								The date they wrote back
 							</FormDescription>
 							<FormMessage />
@@ -264,8 +239,8 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="responseId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel className="text-sm md:text-base">Response</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value?.toString()}>
+							<FormLabel className="text-sm sm:text-base">Response</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue>
@@ -277,7 +252,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									{reponsesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
+							<FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}

src/app/ui/genreBadges.tsx

@@ -5,7 +5,7 @@ import { Badge } from "@/components/ui/badge";
 export default function GenreBadges(props: ComponentProps<"div"> & { genres: Array<Genre> }) {
   return (
     <div className={"flex flex-wrap gap-1 justify-center " + props.className}>
-      {props.genres.map((e: Genre) => (<Badge className="text-xs md:text-sm" key={e.name}>{e.name}</Badge>))}
+      {props.genres.map((e: Genre) => (<Badge className="" key={e.name}>{e.name}</Badge>))}
     </div>
   )
 }

src/app/ui/navLinks.tsx

@@ -21,17 +21,17 @@ export default function Navlinks(props: ComponentProps<"div">) {
   ]
   return (
     <div className={props.className}>
-      <div className="text-secondary-foreground flex flex-row md:flex-col" >
+      <div className="text-secondary-foreground flex flex-row sm:flex-col" >
         {
           links.map(e => (<NavLink key={e.link} href={e.link}
-            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full mr-2 p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-3xl md:rounded-l-3xl ",
+            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-3xl sm:rounded-l-3xl ",
               {
                 "text-primary-foreground bg-primary": pathname.includes(e.link)
               }
             ))}
           >
-            <p className="drop-shadow-sm hidden md:block">{e.label}</p>
-            <span className="block md:hidden">{e.icon}</span>
+            <p className="drop-shadow-sm hidden sm:block">{e.label}</p>
+            <span className="block sm:hidden">{e.icon}</span>
           </NavLink >))
         }
       </ div>

src/app/ui/tables/contextMenu.tsx

@@ -4,7 +4,6 @@ import { ComponentProps, useState } from "react"
 import { Row, Table, TableState } from "@tanstack/react-table"
 
 export default function FormContextMenu({ table, row, openEditDialog, openDeleteDialog }: ComponentProps<"div"> & { table: Table<any>, row: Row<any>, openEditDialog: (row: Row<any>) => void, openDeleteDialog: (row: Row<any>) => void }) {
-  //@ts-ignore
   const pathname = table.options.meta.pathname
   const selectedRows = table.getSelectedRowModel().flatRows
 
@@ -20,9 +19,15 @@ export default function FormContextMenu({ table, row, openEditDialog, openDelete
         : ""
       }
 
-      <ContextMenuItem onClick={() => openEditDialog(row)}>
-        Edit
-      </ContextMenuItem>
+      {
+        pathname === "/submission" ?
+          <>
+            <ContextMenuItem onClick={() => openEditDialog(row)}>
+              Edit
+            </ContextMenuItem>
+          </>
+          : ""
+      }
 
       {
         selectedRows.length > 0 ?

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

@@ -2,6 +2,8 @@
 import { Button } from "@/components/ui/button"
 import {
   ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu"
 import {
@@ -13,7 +15,7 @@ import {
   DropdownMenuRadioGroup
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
-import { ComponentProps, useState } from "react"
+import { Component, ComponentProps, use, useState } from "react"
 import {
   ColumnDef,
   flexRender,
@@ -36,22 +38,20 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { CircleHelp, EyeIcon, Filter, Trash2 } from "lucide-react"
+import { EyeIcon, Trash2 } from "lucide-react"
 import { usePathname, useSearchParams } from "next/navigation"
 import FormContextMenu from "./contextMenu"
 import { deleteRecord, 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, updatePub, updateStory } from "app/lib/update"
+import { updateField } from "app/lib/update"
 import { tableNameToItemName } from "app/lib/nameMaps"
 import { Genre, Pub, Response, Story } from "@prisma/client"
 import EditSubmissionDialog from "app/submission/edit"
 import { DialogTitle } from "@radix-ui/react-dialog"
 import { toast } from "@/components/ui/use-toast"
 import { useRouter } from "next/navigation"
-import EditStoryDialog from "app/story/edit"
-import EditPubDialog from "app/publication/edit"
 
 export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -80,7 +80,7 @@ export function DataTable<TData, TValue>({
   const [columnVisibility, setColumnVisibility] =
     useState<VisibilityState>({})
   //
-  const pathname: string = usePathname()
+  const pathname: Pathname = usePathname()
   const table = useReactTable({
     data,
     columns,
@@ -127,23 +127,29 @@ export function DataTable<TData, TValue>({
 
   const router = useRouter()
 
-  const [filterBy, setFilterBy] = useState(table.getAllColumns().filter(e => e.getCanFilter())[0])
+  const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
   return (<>
-    <div className="flex gap-2 justify-between items-center py-1 md:py-4">
-      <div className="flex gap-1">
+    <div className="flex justify-between items-center py-1 sm:py-4">
+      <div className="flex gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="mx-0"> <p className="hidden md:block">Filter by</p><Filter className="block md:hidden" /> </Button>
+            <Button variant="outline" className="hidden sm:display-blockml-auto">
+              Filter by
+            </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-            {/*@ts-ignore*/}
             <DropdownMenuRadioGroup value={filterBy} onValueChange={setFilterBy} >
               {table
                 .getAllColumns()
                 .filter((column) => column.getCanFilter())
-                //@ts-ignore
-                .map((column) => { return (<DropdownMenuRadioItem value={column} className="capitalize" key={column.id}> {column.id} </DropdownMenuRadioItem>) })}
+                .map((column) => {
+                  return (
+                    <DropdownMenuRadioItem value={column} className="capitalize" key={column.id}>
+                      {column.id}
+                    </DropdownMenuRadioItem>
+                  )
+                })}
             </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -161,30 +167,13 @@ export function DataTable<TData, TValue>({
 
       <Dialog open={isEditDialogVisible} onOpenChange={setIsEditDialogVisible}>
         <DialogContent>
-          {tableName === "sub" ?
-            <EditSubmissionDialog
-              stories={stories}
-              pubs={pubs}
-              responses={responses}
-              defaults={dialogRow?.original}
-              closeDialog={closeEditDialog}
-            />
-            : tableName === "story" ?
-              < EditStoryDialog
-                dbAction={updateStory}
-                genres={genres}
-                defaults={dialogRow?.original}
-                closeDialog={closeEditDialog}
-              />
-              : tableName === "pub" ?
-                <EditPubDialog
-                  dbAction={updatePub}
-                  genres={genres}
-                  defaults={dialogRow?.original}
-                  closeDialog={closeEditDialog}
-                />
-                : ""
-          }
+          <EditSubmissionDialog
+            stories={stories}
+            pubs={pubs}
+            responses={responses}
+            defaults={dialogRow?.original}
+            closeDialog={closeEditDialog}
+          />
         </DialogContent>
       </Dialog>
 
@@ -205,7 +194,6 @@ export function DataTable<TData, TValue>({
                   const res = await deleteRecord(dialogRow.original.id, pathname)
                   if (!res) toast({ title: "Oh dear...", description: "Failed to delete." })
                   if (res) toast({ title: "Successfully deleted record of id:", description: dialogRow.original.id })
-                  table.resetRowSelection()
                   router.refresh()
                 }}>Yes, delete it!
               </Button>
@@ -222,11 +210,9 @@ export function DataTable<TData, TValue>({
         </DialogTrigger>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Delete items?</DialogTitle>
             {`Delete ${Object.keys(table.getState().rowSelection).length} ${pluralize(pathname.slice(1))}?`}
           </DialogHeader>
           <DialogDescription>
-            {/* @ts-ignore */}
             {`Deleting ${pluralize(tableNameToItemName(table.options.meta.tableName))} cannot be undone!`}
           </DialogDescription>
           <DialogFooter>
@@ -234,15 +220,12 @@ export function DataTable<TData, TValue>({
               onClick={async () => {
                 const selectedRows = table.getState().rowSelection
                 const rowIds = Object.keys(selectedRows)
-                //@ts-ignore
                 const recordIds = rowIds.map(id => Number(table.getRow(id).original.id))
-                //@ts-ignore
                 const res = await deleteRecords(recordIds, pathname)
                 if (!res) toast({ title: "Oh dear...", description: "Failed to delete." })
-                if (res) toast({ title: "Successfully deleted records of id:", description: JSON.stringify(recordIds) })
-                table.resetRowSelection()
-                setIsDeleteDialogVisible(false)
+                if (res) toast({ title: "Sucessfully deleted records of id:", description: JSON.stringify(recordIds) })
                 router.refresh()
+                setIsDeleteDialogVisible(false)
               }}>
               Yes, delete them!</Button>
           </DialogFooter>
@@ -280,7 +263,7 @@ export function DataTable<TData, TValue>({
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
-    <div className="rounded-md">
+    <div className="rounded-md border">
 
 
       <Table>
@@ -304,45 +287,36 @@ export function DataTable<TData, TValue>({
         </TableHeader>
         <TableBody>
           {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => {
-              const classes = () => {
-                const classes = []
-                if (row.getValue('response') === "Pending") classes.push("bg-accent")
-                if (row.getValue('response') === "Acceptance") classes.push("bg-primary")
-                return classes.join(" ")
-              }
-              return (
-                <ContextMenu key={row.id + "contextMenu"}>
-                  <ContextMenuTrigger asChild>
-                    <TableRow
-                      key={row.id}
-                      className={classes()}
-                      data-state={row.getIsSelected() && "selected"}
-                      tabIndex={0}
-                      onDoubleClick={() => {
-                        if (tableName === "sub") {
-                          openEditDialog(row)
-                        }
+            table.getRowModel().rows.map((row) => (
+              <ContextMenu key={row.id + "contextMenu"}>
+                <ContextMenuTrigger asChild>
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                    tabIndex={0}
+                    onDoubleClick={() => {
+                      if (tableName === "sub") {
+                        openEditDialog(row)
                       }
-                      }
-                    >
-                      {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}
-                        openEditDialog={openEditDialog}
-                        openDeleteDialog={openDeleteDialog}
-                      />
-                    </TableRow>
-                  </ContextMenuTrigger>
-                </ContextMenu>
-              )
-            })
+                    }
+                    }
+                  >
+                    {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}
+                      openEditDialog={openEditDialog}
+                      openDeleteDialog={openDeleteDialog}
+                    />
+                  </TableRow>
+                </ContextMenuTrigger>
+              </ContextMenu>
+            ))
           ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">

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

@@ -3,7 +3,7 @@ import { FormField, FormItem, FormLabel, FormMessage, FormControl, Form } from "
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
-import { BaseSyntheticEvent, ComponentProps, EventHandler, useState } from "react"
+import { ComponentProps, useState } from "react"
 import { EventType, useForm, UseFormReturn } from "react-hook-form"
 import { CellContext } from "@tanstack/react-table"
 import { z } from "zod"
@@ -16,18 +16,16 @@ import { useRouter } from "next/navigation"
 export default function GenrePickerInputCell(props: CellContext<any, any>) {
 
 
-  //@ts-ignore
+
   const table = props.table.options.meta.tableName
-  //@ts-ignore
   const pathname = props.table.options.meta.pathname
   const id = props.row.original.id
   const column = props.column.id
   const value = props.cell.getValue()
-  //@ts-ignore
   const genres = props.table.options.meta.genres
   const [isActive, setIsActive] = useState(false)
   const router = useRouter()
-  async function onSubmit({ genres }: { genres: number[] }, event: BaseSyntheticEvent) {
+  async function onSubmit({ genres }: { genres: number[] }, event: Event) {
     event.preventDefault()
     try {
       const genresArray = genres.map((e) => { return { id: e } })
@@ -79,9 +77,9 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
             control={form.control}
             name="genres"
             render={({ field }) => (
-              <FormItem className="w-full max-w-32 flex flex-col">
+              <FormItem className="w-full max-w-xs flex flex-col">
                 <PopoverTrigger asChild>
-                  {value.length > 0 ? <Button variant="ghost" className="h-fit p-0"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="text-xs md:text-sm w-fit m-auto">Add genres</Button>
+                  {value.length > 0 ? <Button variant="ghost" className="h-fit p-1"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="text-xs sm:text-sm w-fit m-auto">Add genres</Button>
                   }
                 </PopoverTrigger>
 

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

@@ -12,14 +12,11 @@ import { Form, FormControl, FormField, FormItem, FormMessage } from "@/component
 export default function NumberInputCell({ cellContext, className }: { cellContext: CellContext<any, any>, className: string }) {
   const [isActive, setIsActive] = useState(false)
 
-  //@ts-ignore
   const table = cellContext.table.options.meta.tableName
   const id = cellContext.row.original.id
   const column = cellContext.column.id
-  //@ts-ignore
   const pathname = cellContext.table.options.meta.pathname
   const value = cellContext.cell.getValue()
-  //@ts-ignore
   const formSchema = cellContext.column.columnDef.meta.formSchema.pick({ [column]: true })
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -80,8 +77,13 @@ export default function NumberInputCell({ cellContext, className }: { cellContex
                 >
                   <FormControl
                   >
-                    {/* @ts-ignore */}
-                    <Input className="md:w-24" type="number" autoFocus={true} step={cellContext.column.columnDef.meta?.step} {...field} />
+                    <Input
+                      className="sm:w-24"
+                      type="number"
+                      autoFocus={true}
+                      step={cellContext.column.columnDef.meta?.step}
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>

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

@@ -13,14 +13,15 @@ import { useRouter } from "next/navigation";
 
 export function TextInputCell({ cellContext, className }: { className: string, cellContext: CellContext<any, any> }) {
   const [isActive, setIsActive] = useState(false)
-  //@ts-ignore
+  if (cellContext === undefined) {
+    console.error("CELL CONTEXT UNDEFINED!")
+    return false
+  }
   const table = cellContext.table.options.meta.tableName
   const id = cellContext.row.original.id
   const column = cellContext.column.id
-  //@ts-ignore
   const pathname = cellContext.table.options.meta.pathname
   const value = cellContext.cell.getValue()
-  //@ts-ignore
   const formSchema = cellContext.column.columnDef.meta.formSchema.pick({ [column]: true })
 
   const form = useForm<z.infer<typeof formSchema>>({

src/app/ui/tables/selectColumn.tsx

@@ -16,7 +16,7 @@ export const selectCol = {
 
     )
   },
-  enableColumnFilter: false,
+
   cell: (props: CellContext<any, any>) => {
     return (
       <div className="flex items-start justify-left">

src/app/ui/titleContainer.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
 
 export default function TitleContainer({ children }: ComponentProps<"div">) {
-  let classes = "w-full text-left m-auto h-fit flex align-center text-xs md:text-sm"
+  let classes = "w-full text-left m-auto h-fit flex align-center text-xs sm:text-sm"
   if (children == "RECORD DELETED") {
     classes = classes + " text-destructive font-bold"
   }

tests/login.spec.ts

@@ -1,31 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('should redirect to login page if not logged in', async ({ page }) => {
-  await page.goto('/')
-  await page.click('text=Stories')
-  await expect(page).toHaveURL('/login?from=%2Fstory')
-  await page.click('text=Publications')
-  await expect(page).toHaveURL('/login?from=%2Fpublication')
-  await page.click('text=Submissions')
-  await expect(page).toHaveURL('/login?from=%2Fsubmission')
-})
-
-test('positive login', async ({ page }) => {
-  await page.goto('/login')
-  await page.getByRole('textbox', { name: 'email' }).fill('demo@demo.demo')
-  await page.getByRole('textbox', { name: 'password' }).fill('password')
-  await page.getByRole('button', { name: 'submit' }).click()
-
-  await page.waitForURL('**/submission', { timeout: 5000 })
-  await expect(page).toHaveURL('/submission');
-
-})
-
-test('negative login', async ({ page }) => {
-
-  await page.goto('/login')
-  await page.getByRole('textbox', { name: 'email' }).fill('demo@demo.negative')
-  await page.getByRole('textbox', { name: 'password' }).fill('negative')
-  await page.getByRole('button', { name: 'submit' }).click()
-  await expect(page.getByText("login failed!")).toBeTruthy()
-})