add explainers re editing

for times when redirect doesn't work

.env

@@ -1,9 +0,0 @@
-# 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"
-AUTH_SECRET="fjvZUGDnuNa4/9kUxrIytM45gHiQhLTvSsdvsMcB/Rg="
-

.gitignore

@@ -34,3 +34,15 @@ 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

@@ -0,0 +1,42 @@
+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,36 +1,18 @@
-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).
+# Subman
+## A self-hosted literary submission manager
 
-## Getting Started
+I developed this project as a demonstration of my full-stack development abilities, utilizing:
 
-First, run the development server:
+- Nextjs
+- Tailwind
+- heavily customised Shadcn components
+- an Sqlite database with Prisma ORM as intermediary
 
-```bash
+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!
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## What it does
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+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.
 
-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.

auth.config.ts

@@ -1,23 +0,0 @@
-import type { NextAuthConfig } from 'next-auth';
-import Credentials from 'next-auth/providers/credentials';
-
-export const authConfig = {
-	pages: {
-		signIn: '/login',
-	},
-	callbacks: {
-		authorized({ auth, request: { nextUrl } }) {
-			const isLoggedIn = !!auth?.user;
-			console.log(`isLoggedIn: ${isLoggedIn}`)
-			const isOnDashboard = nextUrl.pathname.startsWith('/');
-			if (isOnDashboard) {
-				if (isLoggedIn) return true;
-				return false; // Redirect unauthenticated users to login page
-			} else if (isLoggedIn) {
-				return Response.redirect(new URL('/', nextUrl));
-			}
-			return true;
-		},
-	},
-	providers: [Credentials({})], // Add providers with an empty array for now
-} satisfies NextAuthConfig;

auth.ts

@@ -1,57 +0,0 @@
-import NextAuth from 'next-auth';
-import { authConfig } from './auth.config';
-import Credentials from 'next-auth/providers/credentials';
-import { z } from 'zod';
-import prisma from 'app/lib/db';
-import bcrypt from 'bcrypt';
-
-export type User = {
-	id: number,
-	email: string,
-	password: string
-}
-
-async function getUser(email: string): Promise<User | undefined> {
-	try {
-		const user = await prisma.user.findFirst({
-			where: {
-				email
-			}
-		})
-		return user
-	} catch (error) {
-		throw new Error("failed to fetch user")
-	}
-}
-
-
-
-export const { auth, signIn, signOut } = NextAuth({
-	...authConfig,
-	providers: [Credentials({
-		async authorize(credentials) {
-			const parsedCredentials = z
-				.object({ email: z.string().email(), password: z.string().min(6) })
-				.safeParse(credentials);
-
-			console.log(`parsed credentials: ${JSON.stringify(parsedCredentials)}`)
-
-			if (parsedCredentials.success) {
-				const { email, password } = parsedCredentials.data;
-				const user = await getUser(email);
-				console.log(`USER:${user}`)
-				if (!user) return null;
-				console.log(`checking string "·${password}" against hash "${user.password}"`)
-				const passwordsMatch = await bcrypt.compare(password, user.password);
-
-				if (passwordsMatch) {
-					console.log("passwords match!")
-					return user
-				};
-			}
-
-			console.log('Invalid credentials');
-			return null;
-		},
-	})],
-});

middleware.ts

@@ -1,9 +0,0 @@
-import NextAuth from 'next-auth';
-import { authConfig } from './auth.config';
-
-export default NextAuth(authConfig).auth;
-
-export const config = {
-	// https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
-	matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
-};

next.config.mjs

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

package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "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",
@@ -21,14 +23,17 @@
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-toast": "^1.1.5",
         "@tanstack/react-table": "^8.17.3",
+        "@types/bcrypt": "^5.0.2",
         "bcrypt": "^5.1.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
+        "jose": "^5.8.0",
+        "lucide": "^0.445.0",
         "lucide-react": "^0.394.0",
-        "next": "14.2.3",
+        "next": "^14.2.13",
-        "next-auth": "^5.0.0-beta.20",
         "next-themes": "^0.3.0",
+        "playwright": "^1.47.2",
         "react": "^18",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18",
@@ -36,9 +41,11 @@
         "recharts": "^2.12.7",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
+        "text-encoding": "^0.7.0",
         "zod": "^3.23.8"
       },
       "devDependencies": {
+        "@playwright/test": "^1.47.2",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -61,36 +68,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@auth/core": {
-      "version": "0.34.2",
-      "resolved": "https://registry.npmjs.org/@auth/core/-/core-0.34.2.tgz",
-      "integrity": "sha512-KywHKRgLiF3l7PLyL73fjLSIBe1YNcA6sMeew4yMP6cfCWGXZrkkXd32AjRi1hlJ9nvovUBGZHvbn+LijO6ZeQ==",
-      "dependencies": {
-        "@panva/hkdf": "^1.1.1",
-        "@types/cookie": "0.6.0",
-        "cookie": "0.6.0",
-        "jose": "^5.1.3",
-        "oauth4webapi": "^2.10.4",
-        "preact": "10.11.3",
-        "preact-render-to-string": "5.2.3"
-      },
-      "peerDependencies": {
-        "@simplewebauthn/browser": "^9.0.1",
-        "@simplewebauthn/server": "^9.0.2",
-        "nodemailer": "^6.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@simplewebauthn/browser": {
-          "optional": true
-        },
-        "@simplewebauthn/server": {
-          "optional": true
-        },
-        "nodemailer": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@babel/runtime": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
@@ -253,17 +230,18 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.3",
+      "version": "14.2.14",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.14.tgz",
-      "integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA=="
+      "integrity": "sha512-/0hWQfiaD5//LvGNgc8PjvyqV50vGK0cADYzaoOOGN8fxzBn3iAiaq3S0tCRnFBldq0LVveLcxCTi41ZoYgAgg=="
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.3",
+      "version": "14.2.13",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.13.tgz",
-      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
+      "integrity": "sha512-IkAmQEa2Htq+wHACBxOsslt+jMoV3msvxCn0WFSfJSkv/scy+i/EukBKNad36grRxywaXUYJc9mxEGkeIs8Bzg==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -273,12 +251,13 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.3",
+      "version": "14.2.13",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.13.tgz",
-      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
+      "integrity": "sha512-Dv1RBGs2TTjkwEnFMVL5XIfJEavnLqqwYSD6LXgTPdEy/u6FlSrLBSSfe1pcfqhFEXRAgVL3Wpjibe5wXJzWog==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -288,12 +267,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.3",
+      "version": "14.2.13",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.13.tgz",
-      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
+      "integrity": "sha512-yB1tYEFFqo4ZNWkwrJultbsw7NPAAxlPXURXioRl9SdW6aIefOLS+0TEsKrWBtbJ9moTDgU3HRILL6QBQnMevg==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -303,12 +283,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.3",
+      "version": "14.2.13",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.13.tgz",
-      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
+      "integrity": "sha512-v5jZ/FV/eHGoWhMKYrsAweQ7CWb8xsWGM/8m1mwwZQ/sutJjoFaXchwK4pX8NqwImILEvQmZWyb8pPTcP7htWg==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -318,12 +299,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.3",
+      "version": "14.2.13",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.13.tgz",
-      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
+      "integrity": "sha512-aVc7m4YL7ViiRv7SOXK3RplXzOEe/qQzRA5R2vpXboHABs3w8vtFslGTz+5tKiQzWUmTmBNVW0UQdhkKRORmGA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -333,12 +315,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.3",
+      "version": "14.2.13",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.13.tgz",
-      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
+      "integrity": "sha512-4wWY7/OsSaJOOKvMsu1Teylku7vKyTuocvDLTZQq0TYv9OjiYYWt63PiE1nTuZnqQ4RPvME7Xai+9enoiN0Wrg==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -348,12 +331,13 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.3",
+      "version": "14.2.13",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.13.tgz",
-      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
+      "integrity": "sha512-uP1XkqCqV2NVH9+g2sC7qIw+w2tRbcMiXFEbMihkQ8B1+V6m28sshBwAB0SDmOe0u44ne1vFU66+gx/28RsBVQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -363,12 +347,13 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.3",
+      "version": "14.2.13",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.13.tgz",
-      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
+      "integrity": "sha512-V26ezyjPqQpDBV4lcWIh8B/QICQ4v+M5Bo9ykLN+sqeKKBxJVDpEc6biDVyluTXTC40f5IqCU0ttth7Es2ZuMw==",
       "cpu": [
         "ia32"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -378,12 +363,13 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.3",
+      "version": "14.2.13",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.13.tgz",
-      "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
+      "integrity": "sha512-WwzOEAFBGhlDHE5Z73mNU8CO8mqMNLqaG+AO9ETmzdCQlJhVtWZnOl2+rqgVQS+YHunjOWptdFmNfbpwcUuEsw==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -424,12 +410,19 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@panva/hkdf": {
+    "node_modules/@playwright/test": {
-      "version": "1.2.1",
+      "version": "1.47.2",
-      "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.47.2.tgz",
-      "integrity": "sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==",
+      "integrity": "sha512-jTXRsoSPONAs8Za9QEQdyjFn+0ZQFjCiIztAIF6bi1HqhBzG9Ma7g1WotyiGqFSBRZjIEqMdT8RUlbk1QVhzCQ==",
-      "funding": {
+      "devOptional": true,
-        "url": "https://github.com/sponsors/panva"
+      "dependencies": {
+        "playwright": "1.47.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@prisma/client": {
@@ -1256,6 +1249,12 @@
         }
       }
     },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -1301,10 +1300,13 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
-    "node_modules/@types/cookie": {
+    "node_modules/@types/bcrypt": {
-      "version": "0.6.0",
+      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-5.0.2.tgz",
-      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+      "integrity": "sha512-6atioO8Y75fNcbmj0G7UjI9lXN2pQ/IGJ2FWT4a/btd0Lk9lQalHLKhkgKVZ3r+spnmWUKfbMi1GEe9wyHQfNQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
     },
     "node_modules/@types/d3-array": {
       "version": "3.2.1",
@@ -1370,7 +1372,6 @@
       "version": "20.14.9",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz",
       "integrity": "sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==",
-      "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -3386,14 +3387,6 @@
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
     },
-    "node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -4732,9 +4725,9 @@
       }
     },
     "node_modules/eslint-module-utils": {
-      "version": "2.8.1",
+      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.11.0.tgz",
-      "integrity": "sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==",
+      "integrity": "sha512-gbBE5Hitek/oG6MUVj6sFuzEjA/ClzNflVrLovHi/JgLdC7fiN5gLAY1WIPW1a0V5I999MnsrvVrCOGmmVqDBQ==",
       "dev": true,
       "dependencies": {
         "debug": "^3.2.7"
@@ -4758,26 +4751,27 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.29.1",
+      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.30.0.tgz",
-      "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
+      "integrity": "sha512-/mHNE9jINJfiD2EKkg1BKyPyUk4zdnT54YgbOgfjSakWT5oyX/qQLVNTkehyfpcMxZXMy1zyonZ2v7hZTX43Yw==",
       "dev": true,
       "dependencies": {
-        "array-includes": "^3.1.7",
+        "@rtsao/scc": "^1.1.0",
-        "array.prototype.findlastindex": "^1.2.3",
+        "array-includes": "^3.1.8",
+        "array.prototype.findlastindex": "^1.2.5",
         "array.prototype.flat": "^1.3.2",
         "array.prototype.flatmap": "^1.3.2",
         "debug": "^3.2.7",
         "doctrine": "^2.1.0",
         "eslint-import-resolver-node": "^0.3.9",
-        "eslint-module-utils": "^2.8.0",
+        "eslint-module-utils": "^2.9.0",
-        "hasown": "^2.0.0",
+        "hasown": "^2.0.2",
-        "is-core-module": "^2.13.1",
+        "is-core-module": "^2.15.1",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.7",
+        "object.fromentries": "^2.0.8",
-        "object.groupby": "^1.0.1",
+        "object.groupby": "^1.0.3",
-        "object.values": "^1.1.7",
+        "object.values": "^1.2.0",
         "semver": "^6.3.1",
         "tsconfig-paths": "^3.15.0"
       },
@@ -5803,9 +5797,9 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.14.0",
+      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
-      "integrity": "sha512-a5dFJih5ZLYlRtDc0dZWP7RiKr6xIKzmn/oAYCDvdLThadVgyJwlaoQPmRtMSpz+rk0OGAgIu+TcM9HUF0fk1A==",
+      "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
       "dependencies": {
         "hasown": "^2.0.2"
       },
@@ -6294,9 +6288,9 @@
       }
     },
     "node_modules/jose": {
-      "version": "5.6.3",
+      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-5.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-5.8.0.tgz",
-      "integrity": "sha512-1Jh//hEEwMhNYPDDLwXHa2ePWgWiFNNUadVmguAAw2IJ6sj9mNxV5tGXJNqlMkJAybF6Lgw1mISDxTePP/187g==",
+      "integrity": "sha512-E7CqYpL/t7MMnfGnK/eg416OsFCVUrU/Y3Vwe7QjKhu/BkS1Ms455+2xsqZQVN57/U2MHMBvEb5SrmAZWAIntA==",
       "funding": {
         "url": "https://github.com/sponsors/panva"
       }
@@ -6439,6 +6433,11 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lucide": {
+      "version": "0.445.0",
+      "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.445.0.tgz",
+      "integrity": "sha512-Xkaf7xwXnx2DQj6dHAAnEsL8LI0iSeqh1ObVr6CTw9eYLpRchfXHzB+VL6qypqAy18jZmCY1bu4U652dCTHC3Q=="
+    },
     "node_modules/lucide-react": {
       "version": "0.394.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.394.0.tgz",
@@ -6478,9 +6477,9 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
+      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -6591,11 +6590,11 @@
       "peer": true
     },
     "node_modules/next": {
-      "version": "14.2.3",
+      "version": "14.2.13",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.13.tgz",
-      "integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
+      "integrity": "sha512-BseY9YNw8QJSwLYD7hlZzl6QVDoSFHL/URN5K64kVEVpCsSOWeyjbIGK+dZUaRViHTaMQX8aqmnn0PHBbGZezg==",
       "dependencies": {
-        "@next/env": "14.2.3",
+        "@next/env": "14.2.13",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -6610,15 +6609,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.3",
+        "@next/swc-darwin-arm64": "14.2.13",
-        "@next/swc-darwin-x64": "14.2.3",
+        "@next/swc-darwin-x64": "14.2.13",
-        "@next/swc-linux-arm64-gnu": "14.2.3",
+        "@next/swc-linux-arm64-gnu": "14.2.13",
-        "@next/swc-linux-arm64-musl": "14.2.3",
+        "@next/swc-linux-arm64-musl": "14.2.13",
-        "@next/swc-linux-x64-gnu": "14.2.3",
+        "@next/swc-linux-x64-gnu": "14.2.13",
-        "@next/swc-linux-x64-musl": "14.2.3",
+        "@next/swc-linux-x64-musl": "14.2.13",
-        "@next/swc-win32-arm64-msvc": "14.2.3",
+        "@next/swc-win32-arm64-msvc": "14.2.13",
-        "@next/swc-win32-ia32-msvc": "14.2.3",
+        "@next/swc-win32-ia32-msvc": "14.2.13",
-        "@next/swc-win32-x64-msvc": "14.2.3"
+        "@next/swc-win32-x64-msvc": "14.2.13"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -6639,32 +6638,6 @@
         }
       }
     },
-    "node_modules/next-auth": {
-      "version": "5.0.0-beta.20",
-      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-5.0.0-beta.20.tgz",
-      "integrity": "sha512-+48SjV9k9AtUU3JbEIa4PXNjKIewfFjVGL7Xs2RKkuQ5QqegDNIQiIG8sLk6/qo7RTScQYIGKgeQ5IuQRtrTQg==",
-      "dependencies": {
-        "@auth/core": "0.34.2"
-      },
-      "peerDependencies": {
-        "@simplewebauthn/browser": "^9.0.1",
-        "@simplewebauthn/server": "^9.0.2",
-        "next": "^14.0.0-0 || ^15.0.0-0",
-        "nodemailer": "^6.6.5",
-        "react": "^18.2.0 || ^19.0.0-0"
-      },
-      "peerDependenciesMeta": {
-        "@simplewebauthn/browser": {
-          "optional": true
-        },
-        "@simplewebauthn/server": {
-          "optional": true
-        },
-        "nodemailer": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/next-themes": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
@@ -6674,6 +6647,11 @@
         "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",
@@ -6774,14 +6752,6 @@
         "set-blocking": "^2.0.0"
       }
     },
-    "node_modules/oauth4webapi": {
-      "version": "2.11.1",
-      "resolved": "https://registry.npmjs.org/oauth4webapi/-/oauth4webapi-2.11.1.tgz",
-      "integrity": "sha512-aNzOnL98bL6izG97zgnZs1PFEyO4WDVRhz2Pd066NPak44w5ESLRCYmJIyey8avSBPOMtBjhF3ZDDm7bIb7UOg==",
-      "funding": {
-        "url": "https://github.com/sponsors/panva"
-      }
-    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -7537,6 +7507,47 @@
         "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",
@@ -7698,26 +7709,6 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
-    "node_modules/preact": {
-      "version": "10.11.3",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
-      "integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/preact"
-      }
-    },
-    "node_modules/preact-render-to-string": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.3.tgz",
-      "integrity": "sha512-aPDxUn5o3GhWdtJtW0svRC2SS/l8D9MAgo2+AWml+BhDImb27ALf04Q2d+AHqUUOc6RdSXFIBVa2gxzgMKgtZA==",
-      "dependencies": {
-        "pretty-format": "^3.8.0"
-      },
-      "peerDependencies": {
-        "preact": ">=10"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -7728,11 +7719,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/pretty-format": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
-      "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew=="
-    },
     "node_modules/prisma": {
       "version": "5.16.0",
       "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.16.0.tgz",
@@ -9719,6 +9705,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/text-encoding": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.7.0.tgz",
+      "integrity": "sha512-oJQ3f1hrOnbRLOcwKz0Liq2IcrvDeZRHXhd9RgLrsT+DjWY/nty1Hi7v3dtkaEYbPYe0mUoOfzRrMwfXXwgPUA==",
+      "deprecated": "no longer maintained"
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -9923,8 +9915,7 @@
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
-      "dev": true
     },
     "node_modules/update-browserslist-db": {
       "version": "1.0.16",

package.json

@@ -5,13 +5,15 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build && ./package.sh",
     "start": "next start",
     "lint": "next lint",
     "tailwind": "npx tailwindcss -i ./src/app/globals.css -o ./src/app/tailwind.css --watch"
   },
   "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",
@@ -24,14 +26,17 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@tanstack/react-table": "^8.17.3",
+    "@types/bcrypt": "^5.0.2",
     "bcrypt": "^5.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "jose": "^5.8.0",
+    "lucide": "^0.445.0",
     "lucide-react": "^0.394.0",
-    "next": "14.2.3",
+    "next": "^14.2.13",
-    "next-auth": "^5.0.0-beta.20",
     "next-themes": "^0.3.0",
+    "playwright": "^1.47.2",
     "react": "^18",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18",
@@ -39,9 +44,11 @@
     "recharts": "^2.12.7",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "text-encoding": "^0.7.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@playwright/test": "^1.47.2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

package.sh

@@ -0,0 +1,13 @@
+#!/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

@@ -0,0 +1,79 @@
+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/migrations/20240812140835_init/migration.sql

@@ -1,6 +0,0 @@
--- CreateTable
-CREATE TABLE "User" (
-    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
-    "email" TEXT NOT NULL,
-    "password" TEXT NOT NULL
-);

prisma/schema.prisma

@@ -14,6 +14,7 @@ model User {
 id Int @id @default(autoincrement())
 email String
 password String
+
 }
 
 model Story {

prisma/script.js

@@ -1,6 +1,6 @@
-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
@@ -8,20 +8,17 @@ async function main() {
     where: { id: 1 },
     data: {
       title: "Ghost Aliens of Mars",
-			genres: { set: [{ id: 1 }, { id: 2 }], create: { name: "alien-punk" } }
+      genres: { set: [{ id: 1 }, { id: 2 }], create: { name: "alien-punk" } },
-		}
+    },
-
+  });
-	})
-	console.log(story)
-
 }
 
 main()
   .then(async () => {
-		await prisma.$disconnect()
+    await prisma.$disconnect();
   })
   .catch(async (e) => {
-		console.error(e)
+    console.error(e);
-		await prisma.$disconnect()
+    await prisma.$disconnect();
-		process.exit(1)
+    process.exit(1);
-	})
+  });

src/@/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "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",
       className
     )}
     {...props}

src/@/components/ui/table.tsx

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

src/app/api/auth/actions.ts

@@ -0,0 +1,145 @@
+"use server"
+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';
+
+
+
+
+
+
+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)
+		return enc
+	} catch (error) {
+		throw new Error("failed to getJWTSecretKey", error.message)
+	}
+}
+
+export async function verifyJwt(token: string): Promise<JWTPayload | null> {
+	try {
+		const key = await getJWTSecretKey()
+		const { payload } = await jwtVerify(token, key)
+		return payload
+	} catch {
+		return null
+	}
+}
+
+export async function getJwt() {
+	const cookieStore = cookies()
+	const token = cookieStore.get("token")
+
+	if (token) {
+		try {
+			const payload = await verifyJwt(token.value)
+			if (payload) {
+				const authPayload = {
+					email: payload.email as string,
+					iat: payload.iat as number,
+					exp: payload.exp as number
+				}
+				return authPayload
+			}
+		} catch (error) {
+
+			return null
+		}
+	}
+	return null
+}
+
+export async function logout() {
+	const cookieStore = cookies()
+	const token = cookieStore.get('token')
+
+	if (token) {
+		//empty catch swallows errors
+		try {
+			cookieStore.delete('token')
+		} catch { }
+	}
+
+	const userData = cookieStore.get("userData")
+	if (userData) {
+		try {
+			cookieStore.delete('userData')
+			return true
+		} catch (_) { }
+	}
+	//return false if there is no userdata
+	return null
+}
+
+export async function setUserDataCookie(userData) {
+	const cookieStore = cookies();
+	cookieStore.set({
+		name: 'userData',
+		value: JSON.stringify(userData),
+		path: '/',
+		maxAge: 3600,
+		sameSite: 'strict'
+	})
+}
+
+
+export async function login(userLogin: LoginSchema) {
+	const isSafe = loginSchema.safeParse(userLogin)
+	try {
+
+		if (!isSafe.success) throw new Error("parse failed")
+		const user = await prisma.user.findFirst({ where: { email: userLogin.email } })
+		if (!user) throw new Error("user does not exist")
+		const bcrypt = require("bcrypt");
+		const passwordIsValid = await bcrypt.compare(userLogin.password, user.password)
+		if (!passwordIsValid) throw new Error("password is not valid")
+		return { email: userLogin.email }
+	} catch (error) {
+		console.error("WHOOPS", error)
+		throw new Error('login failed')
+	}
+}
+
+export async function jwtExpires() {
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,65 @@
+import { NextResponse, NextRequest } from "next/server";
+import prisma from "app/lib/db";
+import { SignJWT } from "jose";
+
+import { getJWTSecretKey, login, setUserDataCookie } from "../actions";
+
+export interface UserLoginRequest {
+	email: string
+	password: string
+}
+
+//render route afresh every time
+const dynamic = 'force-dynamic'
+
+//POST endpoint
+export async function POST(request: NextRequest) {
+	const body = await request.json()
+	const { email, password } = body
+
+	if (!email || !password) {
+		const res = {
+			succes: false,
+			message: 'Email or password missing'
+		}
+		return NextResponse.json(res, { status: 400 })
+	}
+
+	try {
+
+		//fetch user from db, throw if email or password are invalid
+		const user = await login({ email, password })
+
+		//create and sign JWT
+		const token = await new SignJWT({
+			...user
+		})
+			.setProtectedHeader({ alg: 'HS256' })
+			.setIssuedAt()
+			.setExpirationTime('1h')
+			.sign(await getJWTSecretKey())
+
+		//make response
+		const res = { success: true }
+		const response = NextResponse.json(res)
+
+		//Store jwt as secure http-only cookie
+		response.cookies.set({
+			name: 'token',
+			value: token,
+			path: '/', //defines where the cookie can be accessed - in this case, site wide
+			maxAge: 3600, //1 hour
+			httpOnly: true,
+			sameSite: 'strict'
+		})
+		//Store public user data as cookie
+		setUserDataCookie(user)
+
+		return response
+
+	} catch (error) {
+		console.error(error)
+		const res = { success: false, message: error.message || 'something went wrong' }
+		return NextResponse.json(res, { status: 500 })
+	}
+}

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

@@ -0,0 +1,20 @@
+import { revalidatePath } from "next/cache";
+import { NextRequest } from "next/server";
+import { logout } from "../actions";
+
+const dynamic = 'force-dynamic'
+
+export async function POST(request: NextRequest) {
+	await logout()
+	revalidatePath('/login')
+	const response = {
+		success: true,
+		message: 'Logged out successfully',
+	};
+
+	return new Response(JSON.stringify(response), {
+		headers: {
+			'Content-Type': 'application/json',
+		},
+	});
+}

src/app/layout.tsx

@@ -6,8 +6,8 @@ import "./globals.css";
 import Navlinks from "./ui/navLinks";
 import { ModeToggle } from "./ui/modeToggle";
 import { inter } from "./ui/fonts";
-import { signOut } from "../../auth";
+import LogoutButton from "./ui/logoutButton";
-import { LogOut } from "lucide-react";
+
 
 
 
@@ -17,7 +17,6 @@ export const metadata: Metadata = {
 };
 
 
-
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -32,34 +31,23 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
+          <div id="layout-container" className="md:p-4 w-screen h-screen mt-2 md:mt-6 flex justify-center">
-            <div className="w-5/6 flex">
+            <div className="w-full md:w-5/6 flex flex-col md:flex-row">
-              <div id="sidebar" className="h-5/6 flex flex-col"> <header className="">
+              <div id="sidebar" className=" flex flex-row md:flex-col  justify-between items-center"> <header className="">
-                <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4">SubMan</h1>
+                <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
-                <p className="mt-2 mx-1 text-sm antialiased w-40">The self-hosted literary submission tracker.</p>
+                ">SubMan</h1>
+                <p className="mt-2 mx-1 text-sm antialiased w-40 hidden md:block">The self-hosted literary submission tracker.</p>
               </header>
-                <Navlinks className="mt-6" />
+                <Navlinks className="md:mt-6" />
-
+                <footer className="my-auto md:mt-auto flex justify-center"><ModeToggle /><LogoutButton />
-                <form
+                </footer>
-                  action={async () => {
-                    'use server';
-                    await signOut();
-                  }}
-                >
-                  <button className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
-                    <LogOut className="w-6" />
-                    <div className="hidden md:block">Sign Out</div>
-                  </button>
-                </form>
-
-                <footer className="mt-auto"><ModeToggle /></footer>
               </div>
-              <div className="flex justify-center w-full">
+              <div className="flex justify-center w-screen">
                 {children}
               </div>
             </div>
           </div>
-          <Toaster />
+          <Toaster test-id="toast" />
         </ThemeProvider>
       </body>
     </html >

src/app/lib/actions.ts

@@ -1,25 +0,0 @@
-'use server';
-
-import { signIn } from "../../../auth";
-import { AuthError } from 'next-auth';
-
-// ...
-
-export async function authenticate(
-	prevState: string | undefined,
-	formData: FormData,
-) {
-	try {
-		await signIn('credentials', formData);
-	} catch (error) {
-		if (error instanceof AuthError) {
-			switch (error.type) {
-				case 'CredentialsSignin':
-					return 'Invalid credentials.';
-				default:
-					return 'Something went wrong.';
-			}
-		}
-		throw error;
-	}
-}

src/app/lib/create.ts

@@ -1,59 +1,80 @@
 "use server"
-import { Genre, Story } from "@prisma/client"
+import { 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 { pubSchema } from "app/ui/forms/schemas"
+import { subSchema } from "app/ui/forms/schemas"
+import { prepGenreData, prepStoryData } from "./validate"
 
-export async function createStory(data: Story & { genres: number[] }) {
+
+export async function createStory({ story, genres }: { story: Story, genres: number[] }): Promise<{ success: string }> {
+	// will return undefined if middleware authorization fails
 	"use server"
-	const genresArray = data.genres.map((e) => { return { id: e } })
+	try {
-	const res = await prisma.story.create({
+		const storyData = await prepStoryData(story)
-		data: {
+		const genresArray = await prepGenreData(genres)
-			title: data.title,
+
-			word_count: data.word_count,
+		//submit
-		}
+		const res = await prisma.story.create({ data: storyData })
-	})
+		await prisma.story.update({
-	console.log(res)
-	const genresRes = await prisma.story.update({
 			where: { id: res.id },
 			data: {
 				genres: { set: genresArray }
 			}
 		})
-	console.log(genresRes)
 		revalidatePath("/story")
-	redirect("/story")
+		return { success: `Created the story '${story.title}'.` }
+	} catch (error) {
+		console.error(error)
+	}
+
 }
 
 
-export async function createPub(data) {
+export async function createPub({ pub, genres }: { pub: Pub, genres: number[] }): Promise<{ success: string }> {
 	"use server"
-	const genresArray = data.genres.map(e => { return { id: e } })
+	const genresArray = genres.map(e => { return { id: e } })
+
+	//prepare schemas
+	const schema = pubSchema.omit({ genres: true })
+	const genreSchema = z.object({ id: z.number() })
+	const genresSchema = z.array(genreSchema)
+
+	try {
+
+		//validate
+		schema.parse(pub)
+		genresSchema.safeParse(genresArray)
+
+		//submit
 		const res = await prisma.pub.create({
-		data: {
+			data: pub
-			title: data.title,
-			link: data.link,
-			query_after_days: data.query_after_days
-		}
 		})
-	console.log(res)
 		const genresRes = await prisma.pub.update({
 			where: { id: res.id },
 			data:
 				{ genres: { set: genresArray } }
 		})
-	console.log(genresRes)
 		revalidatePath("/publication")
-	redirect("/publication")
+		return { success: `Created the publication '${pub.title}'.` }
+	} catch (error) {
+		console.error(error)
+	}
+
 }
 
 
 
-export async function createSub(data) {
+export async function createSub(data: Sub): Promise<Sub | boolean> {
 	"use server"
+	try {
+		subSchema.parse(data)
 		const res = await prisma.sub.create({ data })
-	console.log(res)
 		revalidatePath("/submission")
-	redirect("/submission")
+		return res
-
+	} catch (error) {
+		console.error(error)
+		return false
+	}
 }

src/app/lib/del.ts

@@ -10,16 +10,22 @@ const tableMap = {
 	"/submission": "sub"
 }
 
-export async function deleteRecord(id: number, pathname: Pathname) {
+export async function deleteRecord(id: number, pathname: string): 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}`)
-	console.log("revalidating: " + pathname)
 		revalidatePath(pathname)
-	redirect(pathname)
+		return true
+	} catch (error) {
+		console.error(error)
+		return undefined
+	}
 }
 
-export async function deleteRecords(ids: number[], pathname: "/story" | "/publication" | "/submission") {
+export async function deleteRecords(ids: number[], pathname: "/story" | "/publication" | "/submission"): Promise<boolean | undefined> {
+	try {
 		const table = tableMap[pathname]
 		ids.forEach(async (id) => {
 			const res = await prisma[table].delete({
@@ -28,6 +34,10 @@ export async function deleteRecords(ids: number[], pathname: "/story" | "/public
 			console.log(`deleted from ${table}: ${res.id}`)
 		})
 		revalidatePath(pathname)
-	redirect(pathname)
+		return true
+	} catch (error) {
+		console.error(error)
+		return undefined
+	}
 }
 

src/app/lib/edit.ts

@@ -1,15 +0,0 @@
-"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

@@ -0,0 +1,14 @@
+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: "story" | "publication" | "submission"): string {
+export default function pluralize(word: string): string {
 	const map = {
 		story: "stories",
 		publication: "publications",

src/app/lib/update.ts

@@ -1,11 +1,15 @@
 "use server"
-import { Genre } from "@prisma/client"
+import { prepGenreData, prepPubData, prepStoryData } from "./validate"
+import { Genre, Pub, Story, Sub } from "@prisma/client"
 import prisma from "./db"
 import { revalidatePath } from "next/cache"
-import { redirect } from "next/navigation"
+import { subSchema } from "app/ui/forms/schemas"
+import { SubForm } from "app/ui/forms/sub"
 
 
 export async function updateField({ datum, table, column, id, pathname }: { datum?: string | number | Genre[], table: string, column: string, id: number, pathname: string }) {
+	"use server"
+	try {
 		const res = await prisma[table].update({
 			where: { id },
 			data: {
@@ -14,10 +18,16 @@ export async function updateField({ datum, table, column, id, pathname }: { datu
 		})
 		console.log(`updated record in ${table}: ${JSON.stringify(res)}`)
 		revalidatePath(pathname)
-	redirect(pathname)
+		return res
+	} catch (error) {
+		console.error(error)
+		return null
+	}
 }
 
 export async function updateGenres({ genres, table, id, pathname }: { genres: { id: number }[], table: string, id: number, pathname: string }) {
+	"use server"
+	try {
 		const res = await prisma[table].update({
 			where: { id },
 			data: {
@@ -26,5 +36,78 @@ export async function updateGenres({ genres, table, id, pathname }: { genres: {
 		})
 		console.log(`updated record in ${table}: ${JSON.stringify(res)}`)
 		revalidatePath(pathname)
-	redirect(pathname)
+		return res
+	} catch (error) {
+		console.error(error)
+		return null
+	}
 }
+
+export async function updateSub(data: SubForm): Promise<Sub> {
+	"use server"
+	try {
+		subSchema.parse(data)
+		const res = await prisma.sub.update({ where: { id: data.id }, data })
+		revalidatePath("submission")
+		return res
+	} catch (error) {
+		console.error(error)
+		return null
+	}
+}
+
+
+export async function updateStory(data: Story & { genres: number[] }): Promise<{ success: string }> {
+	"use server"
+
+	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 + "'." }
+	} 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
+	}
+}
+
+
+

src/app/lib/validate.ts

@@ -0,0 +1,39 @@
+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";
+
+//schemas
+
+const storySchemaTrimmed = storySchema.omit({ genres: true })
+const pubSchemaTrimmed = pubSchema.omit({ 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 prepPubData(data: Pub): Promise<Pub> {
+	const pubData = structuredClone(data)
+	pubSchemaTrimmed.safeParse(pubData)
+	return pubData
+}
+
+export async function prepGenreData(data: number[]): Promise<{ id: number }[]> {
+	"use server"
+
+	//prepare data
+	const genresArray = data.map((e) => { return { id: e } })
+
+	//prepare schemas
+
+	//throws error if validation fails
+	genresSchema.safeParse(genresArray)
+	return genresArray
+
+}

src/app/login/page.tsx

@@ -1,15 +1,90 @@
-import LoginForm from 'app/ui/login-form';
+"use client"
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "@/components/ui/use-toast";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { redirect } from "next/navigation";
+import { loginSchema } from "./schema";
+import { useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+import revalidate from "./revalidate";
+import { useState } from "react";
+import Link from "next/link";
+
+export default function LoginForm() {
+	const router = useRouter()
+	const searchParams = useSearchParams()
+	const redirect = searchParams.get("from") ?? "/submission"
+	const form = useForm<z.infer<typeof loginSchema>>({
+		resolver: zodResolver(loginSchema),
+	})
+	const [submitted, setSubmitted] = useState(false)
+
+	const onSubmit = form.handleSubmit(async (data, event) => {
+		event.preventDefault()
+		const res = await fetch('/api/auth/login', {
+			method: 'POST',
+			headers: {
+				'Content-type': 'application/json',
+			},
+			body: JSON.stringify(data),
+		})
+		if (res.status === 200) {
+			toast({ title: "login successful!" })
+			setSubmitted(true)
+			await revalidate(redirect)
+			window.location.href = redirect
+		} else {
+			toast({ title: "login failed!" })
+		}
+	})
+
 
-export default function LoginPage() {
 	return (
-    <main className="flex items-center justify-center md:h-screen">
+		<main className="flex flex-col items-center justify-around h-60 w-26">
-      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
+			{submitted ? <div className="flex flex-col items-center justify-around h-30 w-26">
-        <div className="flex h-20 w-full items-end rounded-lg bg-blue-500 p-3 md:h-36">
+				<h1>Logging in...</h1>
-          <div className="w-32 text-white md:w-36">
+				<Button asChild>
-          </div>
+					<Link href={redirect}>Continue</Link>
-        </div>
+				</Button>
-        <LoginForm />
+			</div> :
-      </div>
+				<Form {...form}>
+					<form onSubmit={onSubmit} className="flex flex-col items-center space-y-6">
+						<FormField
+							control={form.control}
+							name="email"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Email Address</FormLabel>
+									<FormControl>
+										<Input placeholder="email goes here" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						></FormField>
+						<FormField
+							control={form.control}
+							name="password"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Password</FormLabel>
+									<FormControl>
+										<Input placeholder="password goes here" type="password"{...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						></FormField>
+						<Button type="submit" className="mt-4">SUBMIT</Button>
+					</form>
+				</Form>
+			}
 		</main>
-  );
+
+	)
 }
+

src/app/login/revalidate.ts

@@ -0,0 +1,11 @@
+"use server"
+import { revalidatePath } from "next/cache"
+export default async function revalidate(path: string) {
+	try {
+		revalidatePath(path)
+		return true
+	} catch (error) {
+		console.error(error)
+		return false
+	}
+}

src/app/login/schema.ts

@@ -0,0 +1,7 @@
+import { z } from "zod"
+export const loginSchema = z.object({
+	email: z.string().email(),
+	password: z.string().min(6)
+})
+
+export type LoginSchema = z.infer<typeof loginSchema>

src/app/page.tsx

@@ -1,13 +1,28 @@
-import Image from "next/image";
+import Link from "next/link";
-import styles from "./page.module.css";
+import { Button } from "@/components/ui/button";
 
 export default function Home() {
   return (
-    <main className={styles.main}>
+    <main className="flex flex-col gap-4 items-center justify-around h-60 w-26 m-6">
-      Hello
+      < div >
-      <h1 className="text-3xl font-black underline">
+        <h1 className="text-3xl font-black">
-        Hello world!
+          Welcome to Subman!
         </h1>
-    </main>
+      </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 >
   );
 }

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} type="submission" />
+      <DataTable columns={columns} data={pubSubs} tableName="sub" />
     </div>
   )
 }

src/app/publication/columns.tsx

@@ -1,19 +1,19 @@
 "use client"
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
-import { ArrowUpDown } from "lucide-react"
+import { ArrowUpDown, BookType, Clock, Drama, SquareArrowOutUpRight } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
+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 { formSchema } from "app/ui/forms/pub"
+import { pubSchema } from "app/ui/forms/schemas"
 import GenrePickerInputCell from "app/ui/tables/inputs/genrePickerInput"
+import { genrePickerFilterFn } from "app/lib/filterFns"
 
 
-const columnHelper = createColumnHelper<PubsWithGenres>()
+const columnHelper = createColumnHelper<PubWithGenres>()
 
-export const columns: ColumnDef<PubsWithGenres>[] = [
+export const columns: ColumnDef<PubWithGenres>[] = [
   selectCol,
   {
     accessorKey: "title",
@@ -23,35 +23,73 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
+          <span className="hidden sm:block">
             Title
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          </span>
+          <span className="block sm:hidden"><BookType /></span>
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
         </Button>
       )
     },
-    cell: TextInputCell,
+    cell: cell => (
-    meta: { formSchema }
+      <>
+        {/* @ts-ignore */}
+        <p className="block text-xs max-w-24 break-words md:hidden">{cell.getValue()}</p>
+        <TextInputCell cellContext={cell} className="hidden md:block" />
+      </>
+    ),
+    meta: { formSchema: pubSchema }
   },
 
   {
     accessorKey: "link",
-    header: "Link",
+    header: () => (
-    cell: TextInputCell,
+      <div className="mx-auto w-fit">
-    meta: { formSchema }
+        <span className="hidden sm:block">Link</span>
+        <span className="block sm:hidden"><SquareArrowOutUpRight /></span>
+      </div>
+    ),
+    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" />
+      </>
+    ),
+    meta: { formSchema: pubSchema }
   },
 
   columnHelper.accessor("genres", {
+    header: () => (
+      <div className="w-fit mx-auto">
+        <span className="hidden sm:block">Genres</span>
+        <span className="sm:hidden"><Drama /></span>
+      </div>
+    ),
     cell: GenrePickerInputCell,
-    filterFn: "arrIncludes"
+    filterFn: genrePickerFilterFn
-    //TODO - write custom filter function, to account for an array of objects
   }),
 
+
   {
     accessorKey: "query_after_days",
-    header: "Query After (days)",
+    header: () => (
-    cell: NumberInputCell,
+      <div>
+        <span className="hidden sm:block">Query After (days)</span>
+        <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" />
+      </>
+    ),
     meta: {
       step: 10,
-      formSchema
+      formSchema: pubSchema
     },
 
   },

src/app/publication/create.tsx

@@ -5,21 +5,31 @@ import { ComponentProps } from "react";
 import { Genre } from "@prisma/client";
 import { createPub } from "app/lib/create";
 import PubForm from "app/ui/forms/pub";
+import { Plus } from "lucide-react";
+import { useState } from "react";
 
 export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
 
+  const [isOpen, setIsOpen] = useState(false)
+  function closeDialog() {
+    setIsOpen(false)
+  }
+
   return (
 
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button>Create new publication</Button>
+        <Button>
+          <span className="hidden md:block">Create new publication</span>
+          <Plus className="block md:hidden" />
+        </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>New publication</DialogTitle>
           <DialogDescription>Create an entry for a new publication i.e. a place you intend to submit stories to.</DialogDescription>
         </DialogHeader>
-        <PubForm createPub={createPub} genres={genres} />
+        <PubForm dbAction={createPub} genres={genres} closeDialog={closeDialog} />
         <DialogFooter>
           <Button form="pubform">Submit</Button>
         </DialogFooter>

src/app/publication/edit.tsx

@@ -0,0 +1,26 @@
+"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 PubsWithGenres = Pub & { genres: Array<Genre> }
+export type PubWithGenres = 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 mx-auto">
+    <div className="container px-0 md:px-4 mx-auto">
       <DataTable data={pubs} columns={columns} tableName="pub" genres={genres}>
         <CreatePubDialog genres={genres} />
       </DataTable>

src/app/story/columns.tsx

@@ -1,14 +1,14 @@
 "use client"
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { StoryWithGenres } from "./page"
-import { ArrowUpDown } from "lucide-react"
+import { ArrowUpDown, BookType, Drama, Tally5 } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import GenreBadges from "app/ui/genreBadges"
 import { selectCol } from "app/ui/tables/selectColumn"
 import NumberInputCell from "app/ui/tables/inputs/numberInput"
-import { formSchema } from "app/ui/forms/story"
+import { 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>[] = [
@@ -19,16 +19,25 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
       return (
         <Button
           variant="ghost"
+          className="px-1"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
+          <span className="hidden sm:block">
             Title
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          </span>
+          <span className="block sm:hidden"><BookType /></span>
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
         </Button>
       )
     },
-    cell: TextInputCell,
+    cell: cell => (
-    meta: { formSchema }
+      <>
-
+        {/* @ts-ignore */}
+        <p className="block break-words max-w-28 md:hidden text-xs">{cell.getValue()}</p>
+        <TextInputCell cellContext={cell} className="hidden md:block" />
+      </>
+    ),
+    meta: { formSchema: storySchema }
   },
   {
     accessorKey: "word_count",
@@ -36,23 +45,41 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
       return (
         <Button
           variant="ghost"
+          className="px-1"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
+          <span className="hidden sm:block">
             Word Count
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          </span>
+          <span className="sm:hidden">
+            <Tally5 />
+          </span>
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
         </Button>
       )
     },
     enableColumnFilter: false,
-    cell: NumberInputCell,
+    cell: cell => (
+      <>
+        {/* @ts-ignore */}
+        <p className="block md:hidden text-center text-xs">{cell.getValue()}</p>
+        <NumberInputCell cellContext={cell} className="hidden md:block" />
+      </>
+    ),
     meta: {
       step: 50,
-      formSchema
+      formSchema: storySchema
     }
   },
   columnHelper.accessor("genres", {
+    header: () => (
+      <div className="w-fit mx-auto">
+        <span className="hidden sm:block">Genres</span>
+        <span className="sm:hidden"><Drama /></span>
+      </div>
+    ),
     cell: GenrePickerInputCell,
-    filterFn: "arrIncludes",
+    filterFn: genrePickerFilterFn,
     meta: {}
   }),
 

src/app/story/create.tsx

@@ -2,24 +2,33 @@
 import { createStory } from "app/lib/create"
 import { Dialog, DialogHeader, DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { ComponentProps } from "react";
+import { ComponentProps, useState } from "react";
 import { Genre } from "@prisma/client";
 import StoryForm from "app/ui/forms/story";
+import { Plus } from "lucide-react";
 
 
 export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
 
+  const [isOpen, setIsOpen] = useState(false)
+  function closeDialog() {
+    setIsOpen(false)
+  }
+
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button>Create new story</Button>
+        <div>
+          <Button className="hidden md:block">Create new story</Button>
+          <Button className="block md:hidden"><Plus /> </Button>
+        </div>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>New story</DialogTitle>
           <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
         </DialogHeader>
-        <StoryForm createStory={createStory} genres={genres} existingData={null} />
+        <StoryForm dbAction={createStory} genres={genres} className="" closeDialog={closeDialog} />
         <DialogFooter>
           <Button form="storyform">Submit</Button>
         </DialogFooter>

src/app/story/create/page.tsx

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

src/app/story/edit.tsx

@@ -0,0 +1,27 @@
+"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 mx-auto">
+    <div className="container px-1 md:px-4 mx-auto">
       <DataTable columns={columns} data={storiesWithGenres} tableName="story"
         genres={genres}
       >

src/app/submission/charts.tsx

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

src/app/submission/columns.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { CellContext, ColumnDef, createColumnHelper } from "@tanstack/react-table"
-import { ArrowUpDown } from "lucide-react"
+import { ArrowUpDown, BookText, CalendarMinus, CalendarPlus, MessageCircleReply, NotepadText } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { SubComplete } from "./page"
 import { selectCol } from "app/ui/tables/selectColumn"
@@ -18,7 +18,12 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "story",
-    header: "Story",
+    header: () => (
+      <>
+        <span className="hidden md:block">Story</span>
+        <NotepadText className="block md:hidden" />
+      </>
+    ),
     cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
   },
   {
@@ -29,7 +34,12 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "pub",
-    header: "Publication",
+    header: () => (
+      <>
+        <span className="hidden md:block">Publication</span>
+        <BookText className="block md:hidden" />
+      </>
+    ),
     cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
   },
   {
@@ -39,16 +49,24 @@ export const columns: ColumnDef<SubComplete>[] = [
       return (
         <Button
           variant="ghost"
+          className="p-0 flex justify-center w-full"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Date Submitted
+          <span className="hidden md:block"> Date Submitted </span>
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <CalendarPlus className="block md:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue().toLocaleDateString()}</p>)
+    cell: (props: CellContext<any, any>) => (
+      <p className="w-full text-center text-xs md:text-sm">{props.getValue().toLocaleDateString('ES', {
+        day: 'numeric',
+        month: 'numeric',
+        year: '2-digit'
+      })}</p>
+    )
   },
   {
     accessorFn: row => row.responded ? new Date(row.responded) : null,
@@ -57,16 +75,22 @@ export const columns: ColumnDef<SubComplete>[] = [
       return (
         <Button
           variant="ghost"
+          className="p-0 flex justify-center w-full"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Date Responded
+          <span className="hidden md:block"> Date Responded </span>
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <CalendarMinus className="block md:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()?.toLocaleDateString()}</p>)
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()?.toLocaleDateString('ES', {
+      day: 'numeric',
+      month: 'numeric',
+      year: '2-digit'
+    })}</p>)
   },
   {
     accessorFn: row => {
@@ -76,8 +100,20 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "response",
-    header: "Response",
+    header: ({ column }) => {
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()}</p>)
+      return (
+        <Button
+          variant="ghost"
+          className="p-0 flex justify-center w-full"
+          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" />
+        </Button>
+      )
+    },
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()}</p>)
   },
 
 ]

src/app/submission/create.tsx

@@ -6,33 +6,35 @@ import { Button } from "@/components/ui/button";
 import { ComponentProps } from "react";
 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, defaults }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[], defaults?: CreateSubDefaults }) {
+export default function CreateSubmissionDialog({ stories, pubs, responses }: ComponentProps<"div"> & { stories: StoryWithGenres[], pubs: PubWithGenres[], responses: Response[] }) {
+
+  const [isOpen, setIsOpen] = useState(false)
+  function closeDialog() {
+    setIsOpen(false)
+  }
 
   return (
-    <Dialog>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <Button>Create new submission</Button>
+        <Button>
+          <span className="hidden md:block">Create new submission</span>
+          <Plus className="block md:hidden" />
+        </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="text-xs md: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 createSub={createSub} pubs={pubs} responses={responses} stories={stories} defaults={defaults} />
+        <SubmissionForm pubs={pubs} responses={responses} stories={stories} closeDialog={closeDialog} />
         <DialogFooter>
-          <DialogClose asChild>
-          </DialogClose>
           <Button form="subform">Submit</Button>
         </DialogFooter>
       </DialogContent>

src/app/submission/create/page.tsx

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

src/app/submission/page.tsx

@@ -1,9 +1,10 @@
-import { getGenres, getPubs, getResponses, getStories, getSubsComplete } from "app/lib/get"
+import { getGenres, getPubs, getPubsWithGenres, getResponses, getStories, getStoriesWithGenres, getSubsComplete } from "app/lib/get"
 import { DataTable } from "app/ui/tables/data-table"
 import { columns } from "./columns"
-import { Pub, Response, Story, Sub } from "@prisma/client"
+import { Genre, Pub, Response, Story, Sub } from "@prisma/client"
 import CreateSubmissionDialog from "./create"
-import { Trash2 } from "lucide-react"
+import { PubWithGenres } from "app/publication/page"
+import { StoryWithGenres } from "app/story/page"
 
 export type SubComplete = Sub & {
   pub: Pub,
@@ -11,13 +12,15 @@ export type SubComplete = Sub & {
   response: Response
 }
 export default async function Page() {
+
   const subs: Array<SubComplete> = await getSubsComplete()
-  const stories = await getStories()
+  const stories: StoryWithGenres[] = await getStoriesWithGenres()
-  const pubs = await getPubs()
+  const pubs: PubWithGenres[] = await getPubsWithGenres()
-  const responses = await getResponses()
+  const responses: Response[] = await getResponses()
-  const genres = await getGenres()
+  const genres: Genre[] = await getGenres()
+
   return (
-    <div className="container">
+    <div className="container px-1 md:px-4 mx-auto">
       <DataTable data={subs} columns={columns} tableName="sub"
         stories={stories}
         pubs={pubs}

src/app/tailwind.css

@@ -634,10 +634,6 @@ body {
   border-width: 0;
 }
 
-.pointer-events-none {
-  pointer-events: none;
-}
-
 .pointer-events-auto {
   pointer-events: auto;
 }
@@ -670,10 +666,6 @@ body {
   left: 0.5rem;
 }
 
-.left-3 {
-  left: 0.75rem;
-}
-
 .left-\[50\%\] {
   left: 50%;
 }
@@ -694,10 +686,6 @@ body {
   top: 0px;
 }
 
-.top-1\/2 {
-  top: 50%;
-}
-
 .top-2 {
   top: 0.5rem;
 }
@@ -718,6 +706,10 @@ body {
   z-index: 100;
 }
 
+.m-6 {
+  margin: 1.5rem;
+}
+
 .m-auto {
   margin: auto;
 }
@@ -727,6 +719,11 @@ body {
   margin-right: -0.25rem;
 }
 
+.mx-0 {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -752,12 +749,9 @@ body {
   margin-bottom: 1.5rem;
 }
 
-.mb-3 {
+.my-auto {
-  margin-bottom: 0.75rem;
+  margin-top: auto;
-}
+  margin-bottom: auto;
-
-.mb-4 {
-  margin-bottom: 1rem;
 }
 
 .ml-2 {
@@ -768,6 +762,14 @@ body {
   margin-left: auto;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -780,18 +782,10 @@ body {
   margin-top: 1rem;
 }
 
-.mt-5 {
-  margin-top: 1.25rem;
-}
-
 .mt-6 {
   margin-top: 1.5rem;
 }
 
-.mt-auto {
-  margin-top: auto;
-}
-
 .block {
   display: block;
 }
@@ -841,10 +835,6 @@ body {
   height: 0.5rem;
 }
 
-.h-20 {
-  height: 5rem;
-}
-
 .h-24 {
   height: 6rem;
 }
@@ -865,8 +855,8 @@ body {
   height: 1.25rem;
 }
 
-.h-5\/6 {
+.h-60 {
-  height: 83.333333%;
+  height: 15rem;
 }
 
 .h-7 {
@@ -885,14 +875,6 @@ body {
   height: 1.2rem;
 }
 
-.h-\[18px\] {
-  height: 18px;
-}
-
-.h-\[48px\] {
-  height: 48px;
-}
-
 .h-\[var\(--radix-select-trigger-height\)\] {
   height: var(--radix-select-trigger-height);
 }
@@ -946,10 +928,6 @@ body {
   width: 0.875rem;
 }
 
-.w-32 {
-  width: 8rem;
-}
-
 .w-4 {
   width: 1rem;
 }
@@ -958,18 +936,6 @@ body {
   width: 10rem;
 }
 
-.w-5 {
-  width: 1.25rem;
-}
-
-.w-5\/6 {
-  width: 83.333333%;
-}
-
-.w-6 {
-  width: 1.5rem;
-}
-
 .w-7 {
   width: 1.75rem;
 }
@@ -986,10 +952,6 @@ body {
   width: 1.2rem;
 }
 
-.w-\[18px\] {
-  width: 18px;
-}
-
 .w-\[240px\] {
   width: 240px;
 }
@@ -1028,8 +990,24 @@ body {
   min-width: fit-content;
 }
 
-.max-w-\[400px\] {
+.max-w-16 {
-  max-width: 400px;
+  max-width: 4rem;
+}
+
+.max-w-24 {
+  max-width: 6rem;
+}
+
+.max-w-28 {
+  max-width: 7rem;
+}
+
+.max-w-32 {
+  max-width: 8rem;
+}
+
+.max-w-60 {
+  max-width: 15rem;
 }
 
 .max-w-full {
@@ -1044,22 +1022,10 @@ body {
   max-width: 24rem;
 }
 
-.max-w-xs {
-  max-width: 20rem;
-}
-
-.flex-1 {
-  flex: 1 1 0%;
-}
-
 .shrink-0 {
   flex-shrink: 0;
 }
 
-.grow {
-  flex-grow: 1;
-}
-
 .caption-bottom {
   caption-side: bottom;
 }
@@ -1068,11 +1034,6 @@ body {
   border-collapse: collapse;
 }
 
-.-translate-y-1\/2 {
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1149,10 +1110,6 @@ body {
   align-items: flex-start;
 }
 
-.items-end {
-  align-items: flex-end;
-}
-
 .items-center {
   align-items: center;
 }
@@ -1173,6 +1130,10 @@ body {
   justify-content: space-between;
 }
 
+.justify-around {
+  justify-content: space-around;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1181,6 +1142,10 @@ body {
   gap: 0.5rem;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -1246,24 +1211,18 @@ body {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
-.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
-}
-
-.space-y-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-}
-
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
 .space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1282,16 +1241,26 @@ body {
   overflow: hidden;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
 
-.rounded-full {
+.break-words {
-  border-radius: 9999px;
+  overflow-wrap: break-word;
 }
 
-.rounded-lg {
+.rounded-3xl {
-  border-radius: var(--radius);
+  border-radius: 1.5rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
 }
 
 .rounded-md {
@@ -1302,11 +1271,6 @@ body {
   border-radius: calc(var(--radius) - 4px);
 }
 
-.rounded-l-3xl {
-  border-top-left-radius: 1.5rem;
-  border-bottom-left-radius: 1.5rem;
-}
-
 .rounded-t-3xl {
   border-top-left-radius: 1.5rem;
   border-top-right-radius: 1.5rem;
@@ -1336,11 +1300,6 @@ body {
   border-color: hsl(var(--destructive));
 }
 
-.border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
-}
-
 .border-input {
   border-color: hsl(var(--input));
 }
@@ -1365,11 +1324,6 @@ body {
   background-color: rgb(0 0 0 / 0.8);
 }
 
-.bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
 .bg-border {
   background-color: hsl(var(--border));
 }
@@ -1382,11 +1336,6 @@ body {
   background-color: hsl(var(--destructive));
 }
 
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
 .bg-input {
   background-color: hsl(var(--input));
 }
@@ -1452,6 +1401,16 @@ body {
   padding: 1.5rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1472,11 +1431,6 @@ body {
   padding-right: 1rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -1512,19 +1466,6 @@ body {
   padding-bottom: 1rem;
 }
 
-.py-\[9px\] {
-  padding-top: 9px;
-  padding-bottom: 9px;
-}
-
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
-.pl-10 {
-  padding-left: 2.5rem;
-}
-
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1553,10 +1494,6 @@ body {
   padding-top: 0.25rem;
 }
 
-.pt-8 {
-  padding-top: 2rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1569,21 +1506,11 @@ body {
   vertical-align: middle;
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
 .text-\[0\.8rem\] {
   font-size: 0.8rem;
 }
@@ -1673,21 +1600,6 @@ body {
   color: hsl(var(--foreground) / 0.5);
 }
 
-.text-gray-50 {
-  --tw-text-opacity: 1;
-  color: rgb(249 250 251 / var(--tw-text-opacity));
-}
-
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
@@ -1704,11 +1616,6 @@ body {
   color: hsl(var(--primary-foreground));
 }
 
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
 .text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
@@ -1718,10 +1625,6 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.underline {
-  text-decoration-line: underline;
-}
-
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -1772,10 +1675,6 @@ body {
   outline-style: solid;
 }
 
-.outline-2 {
-  outline-width: 2px;
-}
-
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
@@ -2053,16 +1952,6 @@ body {
   font-weight: 500;
 }
 
-.placeholder\:text-gray-500::-moz-placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.placeholder\:text-gray-500::placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .placeholder\:text-muted-foreground::-moz-placeholder {
   color: hsl(var(--muted-foreground));
 }
@@ -2111,20 +2000,10 @@ body {
   background-color: hsl(var(--secondary) / 0.8);
 }
 
-.hover\:bg-sky-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 242 254 / var(--tw-bg-opacity));
-}
-
 .hover\:text-accent-foreground:hover {
   color: hsl(var(--accent-foreground));
 }
 
-.hover\:text-blue-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
-}
-
 .hover\:text-foreground:hover {
   color: hsl(var(--foreground));
 }
@@ -2254,11 +2133,6 @@ body {
   --tw-ring-offset-color: #dc2626;
 }
 
-.peer:focus ~ .peer-focus\:text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -2487,6 +2361,22 @@ body {
     top: auto;
   }
 
+  .sm\:block {
+    display: block;
+  }
+
+  .sm\:hidden {
+    display: none;
+  }
+
+  .sm\:h-6 {
+    height: 1.5rem;
+  }
+
+  .sm\:w-6 {
+    width: 1.5rem;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -2525,51 +2415,86 @@ body {
     text-align: left;
   }
 
+  .sm\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
   .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
     --tw-enter-translate-y: 100%;
   }
 }
 
 @media (min-width: 768px) {
-  .md\:-mt-32 {
+  .md\:mt-6 {
-    margin-top: -8rem;
+    margin-top: 1.5rem;
+  }
+
+  .md\:mt-auto {
+    margin-top: auto;
   }
 
   .md\:block {
     display: block;
   }
 
-  .md\:h-36 {
+  .md\:hidden {
-    height: 9rem;
+    display: none;
   }
 
-  .md\:h-screen {
+  .md\:w-24 {
-    height: 100vh;
+    width: 6rem;
   }
 
-  .md\:w-36 {
+  .md\:w-5\/6 {
-    width: 9rem;
+    width: 83.333333%;
   }
 
   .md\:max-w-\[420px\] {
     max-width: 420px;
   }
 
-  .md\:flex-none {
+  .md\:flex-row {
-    flex: none;
+    flex-direction: row;
   }
 
-  .md\:justify-start {
+  .md\:flex-col {
-    justify-content: flex-start;
+    flex-direction: column;
   }
 
-  .md\:p-2 {
+  .md\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
-    padding: 0.5rem;
+    --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));
   }
 
-  .md\:px-3 {
+  .md\:rounded-l-3xl {
-    padding-left: 0.75rem;
+    border-top-left-radius: 1.5rem;
-    padding-right: 0.75rem;
+    border-bottom-left-radius: 1.5rem;
+  }
+
+  .md\:p-4 {
+    padding: 1rem;
+  }
+
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .md\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .md\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
   }
 }
 

src/app/test/page.tsx

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

src/app/ui/forms/editSub.tsx

@@ -0,0 +1,265 @@
+"use client"
+
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Button } from "@/components/ui/button"
+import { toast } from "@/components/ui/use-toast"
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover"
+
+import { Calendar } from "@/components/ui/calendar"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { cn } from "@/lib/utils"
+import { format } from "date-fns"
+import {
+	Form,
+	FormItem,
+	FormLabel,
+	FormField,
+	FormControl,
+	FormDescription,
+	FormMessage
+} from "@/components/ui/form"
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select"
+import { useState } from "react"
+import { createSub } from "app/lib/create"
+import { subSchema } from "./schemas"
+import { updateSub } from "app/lib/update"
+import { useRouter } from "next/navigation"
+
+export type SubForm = z.infer<typeof subSchema>
+
+
+export default function EditSubmissionForm({ stories, pubs, responses, defaults, closeDialog }) {
+	const form = useForm<z.infer<typeof subSchema>>({
+		resolver: zodResolver(subSchema),
+		defaultValues: {
+			responseId: responses[0].id,
+			...defaults
+		}
+	})
+	const [isSubCalendarOpen, setIsSubCalendarOpen] = useState(false);
+	const [isRespCalendarOpen, setIsRespCalendarOpen] = useState(false);
+	const storiesSelectItems = stories.map(e => (
+		<SelectItem value={e.id.toString()} key={e.title}>
+			{e.title}
+		</SelectItem>
+	))
+	const pubsSelectItems = pubs.map(e => (
+		<SelectItem value={e.id} key={e.title}>
+			{e.title}
+		</SelectItem>
+	))
+
+	const reponsesSelectItems = responses.map(e => (
+		<SelectItem value={e.id} key={e.title}>
+			{e.response}
+		</SelectItem>
+	))
+
+
+	const router = useRouter()
+
+	async function onSubmit(values: z.infer<typeof subSchema>) {
+		try {
+			const res = await updateSub(values)
+			if (res === undefined) throw new Error("something went wrong")
+			toast({ title: "Successfully created new submission!" })
+			router.refresh()
+			closeDialog()
+		} catch (error) {
+			toast({
+				title: "UH-OH",
+				description: error.message
+			})
+		}
+	}
+
+	function onErrors(errors) {
+		toast({
+			title: "You have errors",
+			description: (
+				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
+				</pre>
+			),
+		})
+		console.log(JSON.stringify(errors))
+	}
+
+	return (
+		<Form {...form}>
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 md: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()}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select something">
+											<p>{stories?.find(e => e.id === Number(field.value))?.title ?? null}</p>
+										</SelectValue>
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									{storiesSelectItems}
+								</SelectContent>
+							</Select>
+							<FormDescription className="text-xs md:text-base">The piece you submitted</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<FormField
+					control={form.control}
+					name="pubId"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel className="text-sm md:text-base">Publication</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value.toString()}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue placeholder="Select something">
+											<p>{pubs?.find(e => e.id === Number(field.value))?.title ?? null}</p>
+										</SelectValue>
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									{pubsSelectItems}
+								</SelectContent>
+							</Select>
+							<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="submitted"
+					render={({ field }) => (
+						<FormItem className="flex flex-col">
+							<FormLabel className="text-sm md:text-base">Date of submission</FormLabel>
+							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
+								<PopoverTrigger asChild>
+									<FormControl>
+										<Button
+											variant={"outline"}
+											className={cn(
+												"w-[240px] pl-3 text-left font-normal",
+												!field.value && "text-muted-foreground"
+											)}
+										>
+											{field.value ? (
+												format(field.value, "PPP")
+											) : (
+												<span>Pick a date</span>
+											)}
+											<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+										</Button>
+									</FormControl>
+								</PopoverTrigger>
+								<PopoverContent className="w-auto p-0" align="start">
+									{/* @ts-ignore */}
+									<Calendar mode="single" selected={field.value}
+										onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }}
+										disabled={(date) =>
+											date > new Date() || date < new Date("1900-01-01")
+										}
+										initialFocus
+									/>
+								</PopoverContent>
+							</Popover>
+							<FormDescription className="text-xs md:text-base">
+								The date you sent it
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="responded"
+					render={({ field }) => (
+						<FormItem className="flex flex-col">
+							<FormLabel className="text-sm md:text-base">Date of response</FormLabel>
+							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
+								<PopoverTrigger asChild>
+									<FormControl>
+										<Button
+											variant={"outline"}
+											className={cn(
+												"w-[240px] pl-3 text-left font-normal",
+												!field.value && "text-muted-foreground"
+											)}
+										>
+											{field.value ? (
+												format(field.value, "PPP")
+											) : (
+												<span>Pick a date</span>
+											)}
+											<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+										</Button>
+									</FormControl>
+								</PopoverTrigger>
+								<PopoverContent className="w-auto p-0" align="start">
+									{/* @ts-ignore */}
+									<Calendar selected={field.value} onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
+										disabled={(date) =>
+											date > new Date() || date < new Date("1900-01-01")
+										}
+										initialFocus
+									/>
+								</PopoverContent>
+							</Popover>
+							<FormDescription className="text-xs md:text-base">
+								The date they wrote back
+							</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+
+				<FormField
+					control={form.control}
+					name="responseId"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel className="text-sm md:text-base">Response</FormLabel>
+							<Select onValueChange={field.onChange} defaultValue={field.value.toString()}>
+								<FormControl>
+									<SelectTrigger>
+										<SelectValue>
+											<p>{responses?.find(e => e.id === Number(field.value))?.response ?? null}</p>
+										</SelectValue>
+									</SelectTrigger>
+								</FormControl>
+								<SelectContent>
+									{reponsesSelectItems}
+								</SelectContent>
+							</Select>
+							<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+			</form>
+		</Form>
+	)
+}

src/app/ui/forms/fancyForm.tsx

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

src/app/ui/forms/genrePicker.tsx

@@ -21,7 +21,7 @@ export default function GenrePicker({ genres, form }: ComponentProps<"div"> & {
 							<Button
 								variant={"outline"}
 								className={cn(
-									"min-w-fit max-w-full w-fit pl-3 text-left font-normal flex-wrap gap-y-1 h-fit min-h-10",
+									"min-w-fit max-w-60 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,49 +17,53 @@ import { toast } from "@/components/ui/use-toast"
 
 import { randomPublicationTitle } from "app/lib/shortStoryTitleGenerator"
 import { ComponentProps } from "react"
-import { Genre } from "@prisma/client"
+import { Genre, Pub } 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 const formSchema = z.object({
+export default function PubForm({ genres, dbAction, className, closeDialog, defaults }: ComponentProps<"div"> & { genres: Array<Genre>, dbAction: (data: any) => Promise<{ success: string }>, closeDialog: () => void, defaults?: PubWithGenres }) {
-	title: z.string().min(2).max(50),
+	const form = useForm<z.infer<typeof pubSchema>>({
-	link: z.string(),
+		resolver: zodResolver(pubSchema),
-	query_after_days: z.coerce.number().min(30),
-	genres: z.array(z.number()),
-})
-
-export default function PubForm({ genres, createPub, className }: ComponentProps<"div"> & { genres: Array<Genre>, createPub: (data: any) => void }) {
-	const form = useForm<z.infer<typeof formSchema>>({
-		resolver: zodResolver(formSchema),
 		defaultValues: {
-			title: "",
+			id: defaults?.id,
-			link: "",
+			title: defaults?.title ?? "",
-			query_after_days: 30,
+			link: defaults?.link ?? "",
-			genres: []
+			query_after_days: defaults?.query_after_days ?? 30,
+			genres: defaults?.genres.map(e => e.id) ?? []
 		},
 	})
 
-	function onSubmit(values: z.infer<typeof formSchema>) {
+	const router = useRouter()
-		// Do something with the form values.
+
-		// ✅ This will be type-safe and validated.
+	async function onSubmit(values: z.infer<typeof pubSchema>) {
-		toast({
+		try {
-			title: "You submitted the following values:",
+			const res = await dbAction({
-			description: (
+				pub: {
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					id: values?.id,
-					<code className="text-white">{JSON.stringify(values, null, 2)}</code>
+					title: values.title,
-				</pre>
+					link: values.link,
-			),
+					query_after_days: values.query_after_days
+				}, genres: values.genres
 			})
-		createPub(values)
+			if (!res?.success) throw new Error("something went wrong")
-		console.log(values)
+			toast({ title: "Success!", description: res.success })
+			router.refresh()
+			closeDialog()
+		} catch (error) {
+			toast({
+				title: "Oh dear... ",
+				description: error.message
+			})
+		}
 	}
 
 	function onErrors(errors) {
 		toast({
-			title: "You have errors",
 			description: (
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+				<Ban />
-					<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
-				</pre>
 			),
 		})
 		console.log(JSON.stringify(errors))

src/app/ui/forms/schemas.ts

@@ -0,0 +1,54 @@
+import { z } from "zod";
+
+export const storySchema = z.object({
+	title: z.string().min(2).max(50),
+	word_count: z.coerce.number(),
+	genres: z.object({ id: z.number(), name: z.string() }).array()
+})
+
+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),
+	genres: z.array(z.number()),
+})
+
+export const subSchema = z.object({
+	id: z.number().optional(),
+	storyId: z.coerce.number(),
+	pubId: z.coerce.number(),
+	submitted: z.coerce.date().transform((date) => date.toString()),
+	responded: z.coerce.date().transform((date) => {
+		if (date.toString() !== new Date(null).toString()) {
+			return date.toString()
+		}
+		return null
+	}).optional(),
+	responseId: z.coerce.number()
+})
+	.refine(object => {
+		const submitted = new Date(object.submitted)
+		const responded = object.responded ? new Date(object.responded) : null
+		return responded >= submitted || responded === null
+	},
+		{
+			path: ["responded"],
+			message: "'Responded' must be a later date than 'submitted'"
+		})
+	.refine(object => {
+		if (object.responded) {
+			//there is a 'responded' date and the response is not 'pending'
+			return object.responseId !== 7
+		}
+		if (!object.responded) {
+			//there is not a 'responded' date and the response is pending
+			return object.responseId === 7
+		}
+	},
+		{
+			path: ["responseId"],
+			message: "A pending response cannot have a date, and a non-pending response must have a date"
+		}
+	)
+

src/app/ui/forms/story.tsx

@@ -15,10 +15,13 @@ import {
 import { Input } from "@/components/ui/input"
 import { toast } from "@/components/ui/use-toast"
 
-import { ComponentProps } from "react"
+import { ComponentProps, SetStateAction } from "react"
 import { Genre, Story } from "@prisma/client"
 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(),
@@ -27,42 +30,47 @@ export const formSchema = z.object({
 	genres: z.array(z.number())
 })
 
-export default function StoryForm({ genres, createStory, className, existingData }: ComponentProps<"div"> & { genres: Array<Genre>, createStory: (data: any) => void, existingData: Story & { genres: number[] } | null }) {
+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 }) {
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
 		defaultValues: {
-			id: existingData?.id,
+			id: defaults?.id,
-			title: existingData?.title ?? "",
+			title: defaults?.title ?? "",
-			word_count: existingData?.word_count ?? 500,
+			word_count: defaults?.word_count ?? 500,
-			genres: existingData?.genres ?? []
+			genres: defaults?.genres.map(e => e.id) ?? []
 		},
 	})
 
+	const router = useRouter()
 
-
+	async function onSubmit(values: z.infer<typeof formSchema>) {
-	function onSubmit(values: z.infer<typeof formSchema>) {
+		try {
-		toast({
+			const res = await dbAction({
-			title: "You submitted the following values:",
+				story: {
-			description: (
+					id: values?.id,
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+					title: values.title,
-					<code className="text-white">{JSON.stringify(values, null, 2)}</code>
+					word_count: values.word_count,
-				</pre>
+				},
-			),
+				genres: values.genres
 			})
-		createStory(values)
+			//server actions return undefined if middleware authentication fails
-		console.log(values)
+			if (!res?.success) throw new Error("something went wrong")
+			toast({ title: "Success!", description: res.success })
+			router.refresh()
+			closeDialog()
+		} catch (error) {
+			toast({
+				title: "Oh dear... ",
+				description: error.message
+			})
+		}
 	}
 
 
 
 	function onErrors(errors) {
 		toast({
-			title: "You have errors",
+			description: (<Ban />)
-			description: (
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-					<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
-				</pre>
-			),
 		})
 		console.log(JSON.stringify(errors))
 	}
@@ -85,7 +93,7 @@ export default function StoryForm({ genres, createStory, className, existingData
 						)}
 					/>
 
-					<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 items-baseline max-w-full">
+					<div className="inline-flex flex-wrap justify-around items-start w-full gap-x-16 gap-y-8 items-baseline max-w-full">
 
 						<GenrePicker
 							genres={genres}
@@ -96,10 +104,10 @@ export default function StoryForm({ genres, createStory, className, existingData
 							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} min={1} {...field}></Input>
+										<Input className=" w-24" type="number" step={500} {...field}></Input>
 									</FormControl>
 									<FormMessage />
 								</FormItem>

src/app/ui/forms/sub.tsx

@@ -32,54 +32,20 @@ import {
 	SelectValue,
 } from "@/components/ui/select"
 import { useState } from "react"
-import { editSubmission } from "app/lib/edit"
 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 const formSchema = z.object({
+export type SubForm = z.infer<typeof subSchema>
-	id: z.number().optional(),
-	storyId: z.coerce.number(),
-	pubId: z.coerce.number(),
-	submitted: z.coerce.date().transform((date) => date.toString()),
-	responded: z.coerce.date().transform((date) => {
-
-		if (date.toString() !== new Date(null).toString()) {
-			return date.toString()
-		}
-		return null
-	}).optional(),
-	responseId: z.coerce.number()
-})
-	.refine(object => {
-		const submitted = new Date(object.submitted)
-		const responded = object.responded ? new Date(object.responded) : null
-		return responded >= submitted || responded === null
-	},
-		{
-			path: ["responded"],
-			message: "'Responded' must be a later date than 'submitted'"
-		})
-	.refine(object => {
-		if (object.responded) {
-			//there is a 'responded' date and the response is not 'pending'
-			return object.responseId !== 7
-		}
-		if (!object.responded) {
-			//there is not a 'responded' date and the response is pending
-			return object.responseId === 7
-		}
-	},
-		{
-			path: ["responseId"],
-			message: "A pending response cannot have a date, and a non-pending response must have a date"
-		}
-	)
-
-export type SubForm = z.infer<typeof formSchema>
 
 
-export default function SubmissionForm({ stories, pubs, responses, defaults }) {
+export default function SubmissionForm({ stories, pubs, responses, defaults, closeDialog }: { stories: StoryWithGenres[], pubs: PubWithGenres[], responses: Response[], defaults?: Sub, closeDialog?: () => void }) {
-	const form = useForm<z.infer<typeof formSchema>>({
+	const form = useForm<z.infer<typeof subSchema>>({
-		resolver: zodResolver(formSchema),
+		resolver: zodResolver(subSchema),
 		defaultValues: {
 			responseId: responses[0].id,
 			...defaults
@@ -87,51 +53,67 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 	})
 	const [isSubCalendarOpen, setIsSubCalendarOpen] = useState(false);
 	const [isRespCalendarOpen, setIsRespCalendarOpen] = useState(false);
-	const storiesSelectItems = stories.map(e => (
+	const [relevantPubIds, setRelevantPubIds] = useState(pubs.map(e => e.id));
-		<SelectItem value={e.id.toString()} key={e.title}>
+
+	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}>
 			{e.title}
 		</SelectItem>
 	))
-	const pubsSelectItems = pubs.map(e => (
+	const pubsSelectItems = pubs.map(e => {
-		<SelectItem value={e.id}>
+		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}>
+		<SelectItem value={e.id.toString()} key={e.response}>
 			{e.response}
 		</SelectItem>
 	))
 
+	const router = useRouter()
 
-	// 2. Define a submit handler.
+	async function onSubmit(values: z.infer<typeof subSchema>) {
-	function onSubmit(values: z.infer<typeof formSchema>) {
+		try {
-		// Do something with the form values.
+			//@ts-ignore
-		// ✅ This will be type-safe and validated.
+			const res = await createSub(values)
+			if (!res) throw new Error("something went wrong")
+			toast({ title: "Successfully created new submission!" })
+			router.refresh()
+			closeDialog()
+		} catch (error) {
 			toast({
-			title: "You submitted the following values:",
+				title: "UH-OH",
-			description: (
+				description: error.message
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-					<code className="text-white">{JSON.stringify(values, null, 2)}</code>
-				</pre>
-			),
 			})
-		if (values.id) {
-			editSubmission(values)
-		} else {
-			createSub(values)
 		}
-		console.log(values)
 	}
 
 	function onErrors(errors) {
 		toast({
-			title: "You have errors",
 			description: (
-				<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+				<Ban />
-					<code className="text-white">{JSON.stringify(errors, null, 2)}</code>
-				</pre>
 			),
 		})
 		console.log(JSON.stringify(errors))
@@ -139,14 +121,14 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 
 	return (
 		<Form {...form}>
-			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 md:space-y-8 text-xs">
 				<FormField
 					control={form.control}
 					name="storyId"
 					render={({ field }) => (
 						<FormItem>
 							<FormLabel>Story</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value}>
+							<Select onValueChange={field.onChange} defaultValue={field.value?.toString()}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue placeholder="Select something">
@@ -158,7 +140,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 									{storiesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription>The piece you submitted</FormDescription>
+							<FormDescription className="text-xs md:text-base">The piece you submitted</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -168,8 +150,9 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 					name="pubId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel>Publication</FormLabel>
+							<FormLabel className="text-sm md:text-base">Publication</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value}>
+							<Select onOpenChange={() => updateRelevantPubs(form.getValues().storyId
+							)} onValueChange={field.onChange} defaultValue={field.value?.toString()}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue placeholder="Select something">
@@ -181,7 +164,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 									{pubsSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription>The market you sent it to</FormDescription>
+							<FormDescription className="text-xs md:text-base">The market you sent it to. Bad genre fits are greyed out.</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -192,7 +175,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 					name="submitted"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel>Date of submission</FormLabel>
+							<FormLabel className="text-sm md:text-base">Date of submission</FormLabel>
 							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -213,9 +196,8 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 									</FormControl>
 								</PopoverTrigger>
 								<PopoverContent className="w-auto p-0" align="start">
-									<Calendar
+									{/* @ts-ignore */}
-										mode="single"
+									<Calendar mode="single" selected={field.value}
-										selected={field.value}
 										onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }}
 										disabled={(date) =>
 											date > new Date() || date < new Date("1900-01-01")
@@ -224,7 +206,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription>
+							<FormDescription className="text-xs md:text-base">
 								The date you sent it
 							</FormDescription>
 							<FormMessage />
@@ -237,7 +219,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 					name="responded"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel>Date of response</FormLabel>
+							<FormLabel className="text-sm md:text-base">Date of response</FormLabel>
 							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -258,9 +240,8 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 									</FormControl>
 								</PopoverTrigger>
 								<PopoverContent className="w-auto p-0" align="start">
-									<Calendar
+									{/* @ts-ignore */}
-										mode="single"
+									<Calendar mode="single" selected={field.value}
-										selected={field.value}
 										onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
 										disabled={(date) =>
 											date > new Date() || date < new Date("1900-01-01")
@@ -269,7 +250,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription>
+							<FormDescription className="text-xs md:text-base">
 								The date they wrote back
 							</FormDescription>
 							<FormMessage />
@@ -283,8 +264,8 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 					name="responseId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel>Response</FormLabel>
+							<FormLabel className="text-sm md:text-base">Response</FormLabel>
-							<Select onValueChange={field.onChange} defaultValue={field.value}>
+							<Select onValueChange={field.onChange} defaultValue={field.value?.toString()}>
 								<FormControl>
 									<SelectTrigger>
 										<SelectValue>
@@ -296,7 +277,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 									{reponsesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription>The market you sent it to</FormDescription>
+							<FormDescription className="text-xs md: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 key={e.name}>{e.name}</Badge>))}
+      {props.genres.map((e: Genre) => (<Badge className="text-xs md:text-sm" key={e.name}>{e.name}</Badge>))}
     </div>
   )
 }

src/app/ui/login-form.tsx

@@ -1,85 +0,0 @@
-'use client';
-
-import {
-  AtSign,
-  KeyIcon,
-  CircleAlert,
-} from 'lucide-react';
-import { Button } from '@/components/ui/button';
-// import { useActionState } from 'react';
-import { useFormState } from 'react-dom';
-import { authenticate } from 'app/lib/actions';
-import { ArrowRightIcon } from 'lucide-react';
-
-export default function LoginForm() {
-  const [errorMessage, formAction, isPending] = useFormState(
-    authenticate,
-    undefined,
-  );
-
-  return (
-    <form action={formAction} className="space-y-3">
-      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
-        <h1 className={` mb-3 text-2xl`}>
-          Please log in to continue.
-        </h1>
-        <div className="w-full">
-          <div>
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="email"
-            >
-              Email
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
-                id="email"
-                type="email"
-                name="email"
-                placeholder="Enter your email address"
-                required
-              />
-              <AtSign className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
-            </div>
-          </div>
-          <div className="mt-4">
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="password"
-            >
-              Password
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
-                id="password"
-                type="password"
-                name="password"
-                placeholder="Enter password"
-                required
-                minLength={6}
-              />
-              <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
-            </div>
-          </div>
-        </div>
-        <Button className="mt-4 w-full" aria-disabled={isPending}>
-          Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
-        </Button>
-        <div
-          className="flex h-8 items-end space-x-1"
-          aria-live="polite"
-          aria-atomic="true"
-        >
-          {errorMessage && (
-            <>
-              <CircleAlert className="h-5 w-5 text-red-500" />
-              <p className="text-sm text-red-500">{errorMessage}</p>
-            </>
-          )}
-        </div>
-      </div>
-    </form>
-  );
-}

src/app/ui/logoutButton.tsx

@@ -0,0 +1,26 @@
+"use client"
+import { Button } from "@/components/ui/button"
+import { LogOutIcon } from "lucide-react"
+import { useRouter } from "next/navigation"
+
+
+export default function LogoutButton() {
+  const router = useRouter()
+
+  async function handleLogout() {
+    const res = await fetch('/api/auth/logout', {
+      method: 'POST',
+      headers: {
+        'Content-type': 'application/json',
+      }
+    })
+    console.log(res)
+    router.refresh()
+  }
+
+  return (
+    <Button variant="outline" className="w-fit" onClick={handleLogout} >
+      <LogOutIcon />
+    </Button>
+  )
+}

src/app/ui/navLinks.tsx

@@ -4,6 +4,7 @@ import { usePathname } from "next/navigation";
 import { ComponentProps } from "react";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
+import { ArrowUpNarrowWide, BookOpen, BookOpenText } from "lucide-react";
 
 
 function NavLink(props: ComponentProps<"div"> & { href: string }) {
@@ -14,21 +15,24 @@ function NavLink(props: ComponentProps<"div"> & { href: string }) {
 export default function Navlinks(props: ComponentProps<"div">) {
   const pathname = usePathname()
   const links = [
-    { link: "/story", label: "STORIES" },
+    { link: "/story", label: "STORIES", icon: <BookOpenText /> },
-    { link: "/publication", label: "PUBLICATIONS" },
+    { link: "/publication", label: "PUBLICATIONS", icon: <BookOpen /> },
-    { link: "/submission", label: "SUBMISSIONS" },
+    { link: "/submission", label: "SUBMISSIONS", icon: <ArrowUpNarrowWide /> },
   ]
   return (
     <div className={props.className}>
-      <div className="text-secondary-foreground" >
+      <div className="text-secondary-foreground flex flex-row md: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 p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-l-3xl",
+            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 ",
               {
                 "text-primary-foreground bg-primary": pathname.includes(e.link)
               }
             ))}
-          ><p className="drop-shadow-sm">{e.label}</p></NavLink >))
+          >
+            <p className="drop-shadow-sm hidden md:block">{e.label}</p>
+            <span className="block md:hidden">{e.icon}</span>
+          </NavLink >))
         }
       </ div>
     </div>

src/app/ui/tables/contextMenu.tsx

@@ -1,14 +1,10 @@
-import { Dialog, DialogTrigger, DialogClose, DialogDescription, DialogContent, DialogTitle, DialogHeader, DialogFooter } from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
 import { ContextMenuContent, ContextMenuItem, ContextMenuSubTrigger, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent } from "@/components/ui/context-menu"
-import { deleteRecord } from "app/lib/del"
 import Link from "next/link"
 import { ComponentProps, useState } from "react"
 import { Row, Table, TableState } from "@tanstack/react-table"
-import { tableNameToItemName } from "app/lib/nameMaps"
-import EditSubmissionDialog from "app/submission/edit"
 
 export default function FormContextMenu({ table, row, 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
 
@@ -24,15 +20,9 @@ export default function FormContextMenu({ table, row, openEditDialog, openDelete
         : ""
       }
 
-      {
-        pathname === "/submission" ?
-          <>
       <ContextMenuItem onClick={() => openEditDialog(row)}>
         Edit
       </ContextMenuItem>
-          </>
-          : ""
-      }
 
       {
         selectedRows.length > 0 ?

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

@@ -2,8 +2,6 @@
 import { Button } from "@/components/ui/button"
 import {
   ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu"
 import {
@@ -15,7 +13,7 @@ import {
   DropdownMenuRadioGroup
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
-import { Component, ComponentProps, use, useState } from "react"
+import { ComponentProps, useState } from "react"
 import {
   ColumnDef,
   flexRender,
@@ -38,18 +36,22 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { EyeIcon, Trash2 } from "lucide-react"
+import { CircleHelp, EyeIcon, Filter, Trash2 } from "lucide-react"
-import { usePathname } from "next/navigation"
+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 } from "app/lib/update"
+import { updateField, updatePub, updateStory } 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>[]
@@ -78,7 +80,7 @@ export function DataTable<TData, TValue>({
   const [columnVisibility, setColumnVisibility] =
     useState<VisibilityState>({})
   //
-  const pathname: Pathname = usePathname()
+  const pathname: string = usePathname()
   const table = useReactTable({
     data,
     columns,
@@ -117,31 +119,31 @@ export function DataTable<TData, TValue>({
     setIsDeleteDialogVisible(true)
     SetDialogRow(row)
   }
+  function closeEditDialog() {
+    setIsEditDialogVisible(false)
+  }
 
 
-  const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
+
+  const router = useRouter()
+
+  const [filterBy, setFilterBy] = useState(table.getAllColumns().filter(e => e.getCanFilter())[0])
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
   return (<>
-    <div className="flex justify-between items-center py-4">
+    <div className="flex gap-2 justify-between items-center py-1 md:py-4">
-      <div className="flex gap-2">
+      <div className="flex gap-1">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="ml-auto">
+            <Button variant="outline" className="mx-0"> <p className="hidden md:block">Filter by</p><Filter className="block md:hidden" /> </Button>
-              Filter by
-            </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
+            {/*@ts-ignore*/}
             <DropdownMenuRadioGroup value={filterBy} onValueChange={setFilterBy} >
               {table
                 .getAllColumns()
                 .filter((column) => column.getCanFilter())
-                .map((column) => {
+                //@ts-ignore
-                  return (
+                .map((column) => { return (<DropdownMenuRadioItem value={column} className="capitalize" key={column.id}> {column.id} </DropdownMenuRadioItem>) })}
-                    <DropdownMenuRadioItem value={column} className="capitalize" key={column.id}>
-                      {column.id}
-                    </DropdownMenuRadioItem>
-                  )
-                })}
             </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -159,12 +161,30 @@ 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}
+                />
+                : ""
+          }
         </DialogContent>
       </Dialog>
 
@@ -181,8 +201,12 @@ export function DataTable<TData, TValue>({
           <DialogFooter>
             <DialogClose asChild>
               <Button variant="destructive"
-                onClick={() => {
+                onClick={async () => {
-                  deleteRecord(dialogRow.original.id, pathname)
+                  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>
             </DialogClose>
@@ -198,23 +222,29 @@ 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>
-            <DialogClose asChild>
             <Button variant="destructive"
-                onClick={() => {
+              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))
-                  console.table(recordIds)
+                //@ts-ignore
-                  deleteRecords(recordIds, pathname)
+                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)
+                router.refresh()
               }}>
               Yes, delete them!</Button>
-            </DialogClose>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -250,7 +280,8 @@ export function DataTable<TData, TValue>({
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
-    <div className="rounded-md border">
+    <div className="rounded-md">
+
 
       <Table>
         <TableHeader>
@@ -273,11 +304,19 @@ export function DataTable<TData, TValue>({
         </TableHeader>
         <TableBody>
           {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
+            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={() => {
@@ -302,7 +341,8 @@ export function DataTable<TData, TValue>({
                     </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 { ComponentProps, useState } from "react"
+import { BaseSyntheticEvent, ComponentProps, EventHandler, useState } from "react"
 import { EventType, useForm, UseFormReturn } from "react-hook-form"
 import { CellContext } from "@tanstack/react-table"
 import { z } from "zod"
@@ -12,36 +12,38 @@ import { toast } from "@/components/ui/use-toast"
 import GenreBadges from "app/ui/genreBadges"
 import { updateField, updateGenres } from "app/lib/update"
 import { Genre } from "@prisma/client"
+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[] }) {
+  async function onSubmit({ genres }: { genres: number[] }, event: BaseSyntheticEvent) {
     event.preventDefault()
+    try {
       const genresArray = genres.map((e) => { return { id: e } })
-    console.log(`genres: ${genres}, genresArray: ${JSON.stringify(genresArray)}`)
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(genres)}</code>
-        </pre>
-      ),
-    })
       const res = await updateGenres({
         id,
         table,
         genres: genresArray,
         pathname
       })
+      if (res === undefined) throw new Error("Something went wrong.")
+      toast({ title: "Field updated successfully." })
+      router.refresh()
+    } catch (error) {
+      console.error(error)
+      toast({ title: "Something went wrong." })
+    }
     setIsActive(false)
   }
 
@@ -77,9 +79,9 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
             control={form.control}
             name="genres"
             render={({ field }) => (
-              <FormItem className="w-full max-w-xs flex flex-col">
+              <FormItem className="w-full max-w-32 flex flex-col">
                 <PopoverTrigger asChild>
-                  {value.length > 0 ? <Button variant="ghost" className="h-fit"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="w-fit m-auto">Add genres</Button>
+                  {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>
                   }
                 </PopoverTrigger>
 
@@ -101,7 +103,6 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
                               <Checkbox
                                 checked={field.value?.includes(item.id)}
                                 onCheckedChange={(checked) => {
-                                  console.log(field.value)
                                   return checked
                                     ? field.onChange(
                                       [...field.value, item.id]

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

@@ -9,58 +9,56 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "@/components/ui/use-toast";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 
-export default function NumberInputCell(props: CellContext<any, any>) {
+export default function NumberInputCell({ cellContext, className }: { cellContext: CellContext<any, any>, className: string }) {
   const [isActive, setIsActive] = useState(false)
 
-  const table = props.table.options.meta.tableName
+  //@ts-ignore
-  const id = props.row.original.id
+  const table = cellContext.table.options.meta.tableName
-  const column = props.column.id
+  const id = cellContext.row.original.id
-  const pathname = props.table.options.meta.pathname
+  const column = cellContext.column.id
-  const value = props.cell.getValue()
+  //@ts-ignore
-  const formSchema = props.column.columnDef.meta.formSchema.pick({ [column]: true })
+  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>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      [column]: props.cell.getValue()
+      [column]: cellContext.cell.getValue()
     },
 
   })
 
-  function onSubmit(value: z.infer<typeof formSchema>) {
+  async function onSubmit(value: z.infer<typeof formSchema>) {
-    toast({
+    try {
-      title: "You submitted the following values:",
+      const res = await updateField({
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(value, null, 2)}</code>
-        </pre>
-      ),
-    })
-    updateField({
         id,
         table,
-      number: value[column],
+        datum: value[column],
         column,
         pathname
       })
+      if (res === undefined) throw new Error("something went wrong")
+      toast({ title: "Field updated successfully." })
+    } catch (error) {
+      console.error(error)
+      toast({ title: "Something went wrong." })
+    }
     setIsActive(false)
   }
 
-  function onErrors(errors) {
+  function onErrors(errors: Error) {
     toast({
       title: "You have errors",
-      description: (
+      description: errors.message,
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(errors, null, 2)}</code>
-        </pre>
-      ),
     })
     console.log(JSON.stringify(errors))
   }
   return (
     <div
-      onDoubleClick={() => setIsActive(prev => !prev)}
+      onDoubleClick={() => setIsActive(true)}
-      className="w-full h-fit flex items-center justify-center"
+      className={className + " w-full h-fit flex items-center justify-center"}
       tabIndex={0}
       onKeyDown={e => {
         if (e.code === "Enter" && !isActive) {
@@ -82,13 +80,8 @@ export default function NumberInputCell(props: CellContext<any, any>) {
                 >
                   <FormControl
                   >
-                    <Input
+                    {/* @ts-ignore */}
-                      className="w-24"
+                    <Input className="md:w-24" type="number" autoFocus={true} step={cellContext.column.columnDef.meta?.step} {...field} />
-                      type="number"
-                      autoFocus={true}
-                      step={props.column.columnDef.meta?.step}
-                      {...field}
-                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -97,7 +90,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
 
           </form>
         </Form>
-        : <p>{props.cell.getValue()}</p>
+        : <p>{cellContext.cell.getValue()}</p>
       }
     </div >
   )

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

@@ -9,33 +9,29 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "@/components/ui/use-toast";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 import TitleContainer from "app/ui/titleContainer";
+import { useRouter } from "next/navigation";
 
-export function TextInputCell(props: CellContext<any, any>) {
+export function TextInputCell({ cellContext, className }: { className: string, cellContext: CellContext<any, any> }) {
   const [isActive, setIsActive] = useState(false)
-
+  //@ts-ignore
-  const table = props.table.options.meta.tableName
+  const table = cellContext.table.options.meta.tableName
-  const id = props.row.original.id
+  const id = cellContext.row.original.id
-  const column = props.column.id
+  const column = cellContext.column.id
-  const pathname = props.table.options.meta.pathname
+  //@ts-ignore
-  const value = props.cell.getValue()
+  const pathname = cellContext.table.options.meta.pathname
-  const formSchema = props.column.columnDef.meta.formSchema.pick({ [column]: true })
+  const value = cellContext.cell.getValue()
+  //@ts-ignore
+  const formSchema = cellContext.column.columnDef.meta.formSchema.pick({ [column]: true })
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      [column]: props.cell.getValue()
+      [column]: cellContext.cell.getValue()
     },
   })
-
+  const router = useRouter()
   async function onSubmit(value: z.infer<typeof formSchema>) {
-    toast({
+    try {
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(value, null, 2)}</code>
-        </pre>
-      ),
-    })
       const res = await updateField({
         id,
         table,
@@ -43,6 +39,13 @@ export function TextInputCell(props: CellContext<any, any>) {
         column,
         pathname
       })
+      if (res === undefined) throw new Error("something went wrong")
+      toast({ title: "Field updated successfully." })
+      router.refresh()
+    } catch (error) {
+      console.error(error)
+      toast({ title: "Something went wrong." })
+    }
     setIsActive(false)
   }
 
@@ -60,7 +63,7 @@ export function TextInputCell(props: CellContext<any, any>) {
   return (
     <div
       onDoubleClick={() => setIsActive(prev => !prev)}
-      className="w-full h-fit flex items-center justify-left"
+      className={className + " w-full h-fit flex items-center justify-left"}
       tabIndex={0}
       onKeyDown={e => {
         if (e.code === "Enter" && !isActive) {
@@ -96,7 +99,7 @@ export function TextInputCell(props: CellContext<any, any>) {
 
           </form>
         </Form>
-        : <TitleContainer>{props.cell.getValue()}</TitleContainer>
+        : <TitleContainer>{cellContext.cell.getValue()}</TitleContainer>
       }
     </div >
   )

src/app/ui/tables/selectColumn.tsx

@@ -5,8 +5,9 @@ export const selectCol = {
   id: "select",
   header: (props: HeaderContext<any, any>) => {
     return (
-      <div className="flex items-center justify-center">
+      <div className="flex items-start justify-left mx-auto">
         <Checkbox
+          className="mr-4 ml-2"
           checked={props.table.getIsAllRowsSelected()}
           onCheckedChange={props.table.toggleAllRowsSelected}
           aria-label="select/deselect all rows"
@@ -15,11 +16,12 @@ export const selectCol = {
 
     )
   },
-
+  enableColumnFilter: false,
   cell: (props: CellContext<any, any>) => {
     return (
-      <div className="flex items-center justify-center">
+      <div className="flex items-start justify-left">
         <Checkbox
+          className="mr-4 ml-2"
           checked={props.row.getIsSelected()}
           onCheckedChange={props.row.toggleSelected}
           aria-label="select/deselect row"

src/app/ui/titleContainer.tsx

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

src/middleware.ts

@@ -0,0 +1,78 @@
+"use server"
+import { NextRequest, NextResponse } from "next/server";
+import { verifyJwt } from "app/api/auth/actions";
+
+const protectedRoutes = ['/story', '/submission', '/publication']
+
+// Function to match the * wildcard character
+function matchesWildcard(path: string, pattern: string): boolean {
+	if (pattern.endsWith('/*')) {
+		const basePattern = pattern.slice(0, -2);
+		return path.startsWith(basePattern);
+	}
+	return path === pattern;
+}
+
+export default async function(request: NextRequest): Promise<NextResponse> | undefined {
+
+
+	const url = request.nextUrl.clone()
+	url.pathname = "/login"
+	url.searchParams.set('from', request.nextUrl.pathname)
+	if (protectedRoutes.some(pattern => matchesWildcard(request.nextUrl.pathname, pattern))) {
+		const token = request.cookies.get('token')
+		//NOTE - may need to add logic to return 401 for api routes
+
+		if (!token) {
+			console.log("there is no jwt")
+			return NextResponse.redirect(url)
+		}
+
+		try {
+			//decode and verify jwt cookie
+			const jwtIsVerified = await verifyJwt(token.value)
+			if (!jwtIsVerified) {
+				//delete token
+				console.log('could not verify jwt')
+				request.cookies.delete('token')
+				return NextResponse.redirect(url)
+			}
+		} catch (error) {
+			//delete token (failsafe)
+			console.error("failed to very jwt", error.message)
+			request.cookies.delete('token')
+			return NextResponse.redirect(url)
+		}
+
+		//TODO - TEST THIS BECAUSE IT PROBABLY DOESN'T WORK
+		//redirect from login if already logged in
+		let redirectToApp = false
+		if (request.nextUrl.pathname === "/login") {
+			const token = request.cookies.get("token")
+			if (token) {
+				try {
+					const payload = await verifyJwt(token.value)
+					if (payload) {
+						redirectToApp = true
+					} else {
+						request.cookies.delete('token')
+					}
+				} catch (error) {
+					request.cookies.delete('token')
+				}
+			}
+		}
+
+		if (redirectToApp) {
+			return NextResponse.redirect(`${process.env.NEXT_PUBLIC_BASE_URL}/submission`)
+		} else {
+			return NextResponse.next()
+		}
+
+
+
+
+	}
+}
+
+

tests/login.spec.ts

@@ -0,0 +1,31 @@
+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()
+})