Login page

app/(home)/reports/page.tsx

@@ -2,7 +2,7 @@
 import { incomeStatements } from "@/app/lib/endpoints";
 import moment from "moment";
 import { List } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import IncomeStatement from "@/app/components/IncomeStatement";
 
@@ -22,23 +22,26 @@ const Reports = () => {
   }, []);
 
   return (
-    <div style={{ padding: 24 }}>
-      <h1>Statements</h1>
-      {statement_id ?
-        <IncomeStatement statementData={statements.find(({id}) => id === Number(statement_id))} />
-        :
-        <List
-          itemLayout="horizontal"
-          dataSource={statements}
-          renderItem={(item: any) => (
-            <List.Item>
-              <List.Item.Meta
-                title={<a onClick={() => router.push(`?statement_id=${item.id}`)}>{`${moment(item.date_from).format('MM-DD-YYYY')} until ${moment(item.date_to).format('MM-DD-YYYY')}`}</a>}
-              />
-            </List.Item>
-          )}
-        />}
-    </div>
+    <Suspense fallback={<div>Loading...</div>}>
+      <div style={{ padding: 24 }}>
+        <h1>Statements</h1>
+        {statement_id ?
+          <IncomeStatement statementData={statements.find(({ id }) => id === Number(statement_id))} />
+          :
+          <List
+            itemLayout="horizontal"
+            dataSource={statements}
+            renderItem={(item: any) => (
+              <List.Item>
+                <List.Item.Meta
+                  title={<a onClick={() => router.push(`?statement_id=${item.id}`)}>{`${moment(item.date_from).format('MM-DD-YYYY')} until ${moment(item.date_to).format('MM-DD-YYYY')}`}</a>}
+                />
+              </List.Item>
+
+            )}
+          />}
+      </div>
+    </Suspense>
   );
 }
 

app/login/page.tsx

@@ -1,70 +0,0 @@
-'use client';
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-
-const Login = () => {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-
-  const router = useRouter();
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    router.push("/dashboard");
-  };
-
-  return (
-    <div className="flex flex-col items-center justify-center h-screen">
-      <h1 className="text-3xl font-bold mb-4">Login to your Financial Assistant</h1>
-      <form
-        className="bg-white shadow-md rounded px-8 pt-6 pb-8 m-4"
-        onSubmit={handleSubmit}
-      >
-        <div className="mb-4">
-          <label
-            className="block text-gray-700 text-sm font-bold mb-2"
-            htmlFor="username"
-          >
-            Username
-          </label>
-          <input
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-            id="username"
-            type="text"
-            placeholder="Username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-        </div>
-        <div className="mb-6">
-          <label
-            className="block text-gray-700 text-sm font-bold mb-2"
-            htmlFor="password"
-          >
-            Password
-          </label>
-          <input
-            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-            id="password"
-            type="password"
-            placeholder="Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        </div>
-        <div className="flex items-center justify-between">
-          <button
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-            type="submit"
-          >
-            Sign In
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export default Login;

next.config.json

@@ -1,5 +1,6 @@
 {
   "experimental": {
+    "missingSuspenseWithCSRBailout": false,
     "outputFileTracingIncludes": {
       "/*": ["./cache/**/*"]
     },