Topbar UI & login (#4)

- setup income and expense statement (cae527dac373f79c4bdbc1f25070a50cf6a67794)
- remove login page (b78b146c6045b0c76b67fc233e53d452c90c9b26)
- Merge branch 'main' into pr/4 (e9add910a499564d58a661669a844f35fec4f58d)
- Revert "remove login page" (e8d90bc63b296d8745ea8a9db1dc3bdeebf8ea93)
- Login page (ac67c7a771e0c69c91ff6e0c13620825d7c8e942)
- hardcode user3 (f81ecbc0efb3e4fe02cfa3741973abae82b9d070)

app/(auth)/login/page.tsx

@@ -0,0 +1,69 @@
+'use client';
+import React from 'react';
+import { Form, Input, Button, Checkbox, Typography, Layout, FormProps } from 'antd';
+import './styles.css';
+import { useRouter } from 'next/navigation';
+
+const { Title } = Typography;
+const { Content } = Layout;
+
+type FieldType = {
+  username?: string;
+  password?: string;
+  remember?: string;
+};
+
+const LoginPage = () => {
+  const router = useRouter();
+  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
+    console.log('Success:', values);
+    router.push('/dashboard');
+  };
+
+  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  return (
+    <Layout className="layout">
+      <Content className="content">
+        <div className="login-container">
+          <Title level={2}>Login</Title>
+          <Form
+            name="basic"
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              name="username"
+              rules={[{ required: true, message: 'Please input your username!' }]}
+            >
+              <Input placeholder="Username" />
+            </Form.Item>
+
+            <Form.Item
+              name="password"
+              rules={[{ required: true, message: 'Please input your password!' }]}
+            >
+              <Input.Password placeholder="Password" />
+            </Form.Item>
+
+            <Form.Item name="remember" valuePropName="checked">
+              <Checkbox>Remember me</Checkbox>
+            </Form.Item>
+
+            <Form.Item>
+              <Button type="primary" htmlType="submit" block>
+                Log in
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
+      </Content>
+    </Layout>
+  );
+};
+
+export default LoginPage;

app/(auth)/login/styles.css

@@ -0,0 +1,26 @@
+.layout {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f0f2f5; /* Optional: Change the background color as needed */
+}
+
+.content {
+  width: 100%;
+  max-height: 450px;
+  max-width: 400px;
+  padding: 24px;
+  background: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px; /* Optional: Add border radius for rounded corners */
+}
+
+.login-container {
+  width: 100%;
+  text-align: center;
+}
+
+.login-container .ant-typography {
+  margin-bottom: 24px;
+}

app/(home)/layout.tsx

@@ -9,6 +9,7 @@ import {
 } from '@ant-design/icons';
 import { Button, Layout, Menu, theme } from 'antd';
 import { useRouter } from "next/navigation";
+import TopBar from "../components/Topbar";
 const { Header, Sider, Content } = Layout;
 
 const Dashboard = ({
@@ -25,12 +26,13 @@ const Dashboard = ({
     router.push(route);
   }
   return (
-    <main className="flex min-h-screen">
+    <>
+    <TopBar />
+    <main className="flex min-h-screen flex-col">
       <Layout>
         <Sider trigger={null} collapsible collapsed={collapsed}>
           <div className="demo-logo-vertical" />
           <Menu
-            style={{ marginTop: '8rem' }}
             theme="dark"
             mode="inline"
             defaultSelectedKeys={['1']}
@@ -89,6 +91,7 @@ const Dashboard = ({
         </Layout>
       </Layout>
     </main >
+    </>
   );
 }
 

app/(home)/reports/page.tsx

@@ -2,10 +2,9 @@
 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";
-import { DoubleLeftOutlined } from '@ant-design/icons';
 
 const Reports = () => {
   const searchParams = useSearchParams()
@@ -15,30 +14,34 @@ const Reports = () => {
 
   useEffect(() => {
     (async () => {
-      const data = await fetch(incomeStatements)
+      const data = await fetch(incomeStatements);
+      console.log('data', data);
       const statements = await data.json();
       setStatements(statements);
     })();
   }, []);
 
   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/components/Topbar/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Layout, Menu, Avatar } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import './styles.css';  // Create a CSS file for any custom styling
+import Link from 'next/link';
+
+const { Header } = Layout;
+
+const TopBar = () => {
+
+  return (
+    <Layout>
+      <Header className="header">
+        <div className="logo">
+          <Link href={'/dashboard'}>
+          <img src="/llama.png" alt="Company Logo" />
+          </Link>
+        </div>
+        <Menu theme="dark" mode="horizontal" style={{ flex: 1 }}>
+          {/* You can add menu items here if needed */}
+        </Menu>
+        <div className="settings">
+          <Avatar icon={<SettingOutlined />} />
+        </div>
+      </Header>
+    </Layout>
+  );
+};
+
+export default TopBar;

app/components/Topbar/styles.css

@@ -0,0 +1,14 @@
+.header {
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+  background-color: #3b5998;  /* Change this to your desired top bar color */
+}
+
+.logo img {
+  height: 32px;
+}
+
+.settings {
+  margin-left: auto;
+}

app/lib/endpoints/index.ts

@@ -3,5 +3,6 @@ const url = `${baseUrl}/api/v1`
 
 export const transactionsEndpoint = `${url}/transactions/3`;
 export const fielUploadEndpoint = `${url}/file_upload`;
-export const incomeStatements = `${url}/income_statement/3`;
-export const statementEndpoint = `${url}/statement`;
+export const incomeStatements = `${url}/income_statement/user/3`;
+export const statementEndpoint = `${url}/statement/report/1`;
+

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/**/*"]
     },