setup income and expense statement

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

@@ -5,7 +5,6 @@ import { List } from "antd";
 import React, { 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,7 +14,8 @@ 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);
     })();

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,5 @@ const url = `${baseUrl}/api/v1`
 
 export const transactionsEndpoint = `${url}/transactions/1`;
 export const fielUploadEndpoint = `${url}/file_upload`;
-export const incomeStatements = `${url}/income_statement/1`;
-export const statementEndpoint = `${url}/statement`;
+export const incomeStatements = `${url}/income_statement/user/1`;
+export const statementEndpoint = `${url}/statement/report/1`;

middleware.ts

@@ -4,7 +4,7 @@ import type { NextRequest } from 'next/server'
 // This function can be marked `async` if using `await` inside
 export function middleware(request: NextRequest) {
   if (request.nextUrl.pathname === '/') {
-    return NextResponse.redirect(new URL('/dashboard', request.url))
+    return NextResponse.redirect(new URL('/login', request.url))
   }
   return NextResponse.next();
 }