feat: base form

package.json

@@ -15,10 +15,12 @@
 		"@fontsource/raleway": "5.2.8",
 		"@mui/icons-material": "^9.1.1",
 		"@mui/material": "^9.1.1",
+		"@mui/x-date-pickers": "^9.6.0",
 		"@tanstack/react-query": "^5.101.0",
 		"@tanstack/react-router": "^1.170.16",
 		"@tanstack/react-router-devtools": "^1.167.0",
 		"better-sqlite3": "^12.11.1",
+		"date-fns": "^4.4.0",
 		"express": "^5.1.0",
 		"kysely": "^0.29.2",
 		"react": "^19.1.0",

src/client/components/DashboardLayout.tsx

@@ -20,10 +20,7 @@ interface Page {
 	to: ValidRoutes;
 }
 
-const pages: Page[] = [
+const pages: Page[] = [{ title: "Announcements", to: "/" }];
-	{ title: "Announcements", to: "/" },
-	{ title: "Subroute", to: "/subroute" },
-];
 
 export default function DashboardLayout({
 	children,

src/client/main.tsx

@@ -3,12 +3,13 @@ import "@fontsource/raleway/400.css";
 import "@fontsource/raleway/500.css";
 import "@fontsource/raleway/700.css";
 
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { queryClient } from "./query-client";
-// Import the generated route tree
 import { routeTree } from "./routeTree.gen";
 
 // Create a new router instance
@@ -23,8 +24,10 @@ declare module "@tanstack/react-router" {
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
+		<LocalizationProvider dateAdapter={AdapterDateFns}>
 			<QueryClientProvider client={queryClient}>
 				<RouterProvider router={router} />
 			</QueryClientProvider>
+		</LocalizationProvider>
 	</React.StrictMode>,
 );

src/client/routeTree.gen.ts

@@ -10,43 +10,43 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
-import { Route as SubrouteIndexRouteImport } from './routes/subroute/index'
+import { Route as AddIndexRouteImport } from './routes/add/index'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SubrouteIndexRoute = SubrouteIndexRouteImport.update({
+const AddIndexRoute = AddIndexRouteImport.update({
-  id: '/subroute/',
+  id: '/add/',
-  path: '/subroute/',
+  path: '/add/',
   getParentRoute: () => rootRouteImport,
 } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/subroute/': typeof SubrouteIndexRoute
+  '/add/': typeof AddIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/subroute': typeof SubrouteIndexRoute
+  '/add': typeof AddIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
-  '/subroute/': typeof SubrouteIndexRoute
+  '/add/': typeof AddIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/subroute/'
+  fullPaths: '/' | '/add/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/subroute'
+  to: '/' | '/add'
-  id: '__root__' | '/' | '/subroute/'
+  id: '__root__' | '/' | '/add/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  SubrouteIndexRoute: typeof SubrouteIndexRoute
+  AddIndexRoute: typeof AddIndexRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -58,11 +58,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/subroute/': {
+    '/add/': {
-      id: '/subroute/'
+      id: '/add/'
-      path: '/subroute'
+      path: '/add'
-      fullPath: '/subroute/'
+      fullPath: '/add/'
-      preLoaderRoute: typeof SubrouteIndexRouteImport
+      preLoaderRoute: typeof AddIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
   }
@@ -70,7 +70,7 @@ declare module '@tanstack/react-router' {
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  SubrouteIndexRoute: SubrouteIndexRoute,
+  AddIndexRoute: AddIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/client/routes/add/index.tsx

@@ -0,0 +1,27 @@
+import { Box, FormLabel, TextareaAutosize, TextField } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/add/")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return (
+		<Box
+			component="form"
+			sx={{
+				display: "flex",
+				flexDirection: "column",
+				"& > :not(style)": { m: 1, width: "25ch" },
+			}}
+			noValidate
+			autoComplete="off"
+		>
+			<TextField label="Title"></TextField>
+			<FormLabel>Text:</FormLabel>
+			<TextareaAutosize minRows={6}></TextareaAutosize>
+			<DatePicker />
+		</Box>
+	);
+}

src/client/routes/index.tsx

@@ -58,7 +58,7 @@ function RouteComponent() {
 				sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}
 			>
 				<Typography variant="h4">Announcements</Typography>
-				<RouterButton to="/" variant="contained">
+				<RouterButton to="/add" variant="contained">
 					Add announcement
 				</RouterButton>
 			</Box>

src/client/routes/subroute/index.tsx

@@ -1,9 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/subroute/")({
-	component: RouteComponent,
-});
-
-function RouteComponent() {
-	return <div>Hello "/subroute/"!</div>;
-}

yarn.lock

@@ -130,7 +130,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.29.7"
 
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.29.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.29.2", "@babel/runtime@^7.29.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.29.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.29.7.tgz#12022450c45a4da6d8d8287b18a4ff2ddb23f768"
   integrity sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==
@@ -165,6 +165,16 @@
     "@babel/helper-string-parser" "^7.29.7"
     "@babel/helper-validator-identifier" "^7.29.7"
 
+"@base-ui/utils@^0.2.9":
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/@base-ui/utils/-/utils-0.2.9.tgz#f6fe1704722a072721704f487a48754dbfe8f96b"
+  integrity sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw==
+  dependencies:
+    "@babel/runtime" "^7.29.2"
+    "@floating-ui/utils" "^0.2.11"
+    reselect "^5.1.1"
+    use-sync-external-store "^1.6.0"
+
 "@biomejs/biome@2.5.0":
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/@biomejs/biome/-/biome-2.5.0.tgz#e2bf9805de38b8a9ece8518514c2460eb43d229f"
@@ -586,6 +596,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz#10064ee44f4347b90c9a02b446bbf80a91632b12"
   integrity sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==
 
+"@floating-ui/utils@^0.2.11":
+  version "0.2.11"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.11.tgz#a269e055e40e2f45873bae9d1a2fdccbd314ea3f"
+  integrity sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==
+
 "@fontsource/raleway@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@fontsource/raleway/-/raleway-5.2.8.tgz#d011757f5b80ca5f86321fba0c7b904f96b47b47"
@@ -697,7 +712,7 @@
   dependencies:
     "@babel/runtime" "^7.29.2"
 
-"@mui/utils@^9.1.1":
+"@mui/utils@^9.0.1", "@mui/utils@^9.1.1":
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-9.1.1.tgz#94dbb62dbaadad0d890ca0501838ce578d17da04"
   integrity sha512-qSNfnkzZMptaaWFFklpDf4NPJztgwsMDVfM/sSDt+wq4ssYSBhLYwwjuB6eS/+p2IUYbeRzHluzXbw0Zn7aI4A==
@@ -709,6 +724,31 @@
     prop-types "^15.8.1"
     react-is "^19.2.6"
 
+"@mui/x-date-pickers@^9.6.0":
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-9.6.0.tgz#d27afa81e03f12b8c9938b5d2996a34e9862cad9"
+  integrity sha512-Cdk0qkdfxjQtDAnrQdrkCCGyXifjmqzzoDnnoPPxLz5915BWW33cAG9RcZFUAupRaUuh3i6QE8C5oUA9Mrx+1A==
+  dependencies:
+    "@babel/runtime" "^7.29.7"
+    "@mui/utils" "^9.0.1"
+    "@mui/x-internals" "^9.6.0"
+    "@types/react-transition-group" "^4.4.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-transition-group "^4.4.5"
+
+"@mui/x-internals@^9.6.0":
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/@mui/x-internals/-/x-internals-9.6.0.tgz#5f9e65adf0d45146437a2f1e32530d8f27df4763"
+  integrity sha512-lBh+4P2CRyspoFbBwCemTFIYmAAX8esznDsYYDGgV0+Id9z7Xi5pRZUAFY33XodYgTnMPiN4TJyfd8bfJbPNzg==
+  dependencies:
+    "@babel/runtime" "^7.29.7"
+    "@base-ui/utils" "^0.2.9"
+    "@mui/utils" "^9.0.1"
+    core-js-pure "^3.49.0"
+    reselect "^5.2.0"
+    use-sync-external-store "^1.6.0"
+
 "@popperjs/core@^2.11.8":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -1347,6 +1387,11 @@ cookie@^0.7.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.2.tgz#556369c472a2ba910f2979891b526b3436237ed7"
   integrity sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==
 
+core-js-pure@^3.49.0:
+  version "3.49.0"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.49.0.tgz#ff8436b7251a3832f5fdbbe3e10f7f2e58e51fb1"
+  integrity sha512-XM4RFka59xATyJv/cS3O3Kml72hQXUeGRuuTmMYFxwzc9/7C8OYTaIR/Ji+Yt8DXzsFLNhat15cE/JP15HrCgw==
+
 cosmiconfig@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
@@ -1363,6 +1408,11 @@ csstype@^3.0.2, csstype@^3.2.2, csstype@^3.2.3:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
   integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
 
+date-fns@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-4.4.0.tgz#806539edf45c616b2b76b5f78b88c56ed3c7e036"
+  integrity sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2240,6 +2290,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+reselect@^5.1.1, reselect@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.2.0.tgz#f380ef7664332d26ea06c1cba04bdbbdcaa955f1"
+  integrity sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"