hook create statement

app/(home)/reports/page.tsx

@@ -1,15 +1,20 @@
 'use client';
-import { incomeStatements } from "@/app/lib/endpoints";
+import { createIncomeStatementEndpoint, incomeStatements } from "@/app/lib/endpoints";
 import moment from "moment";
-import { List } from "antd";
+import { Button, List, Modal, DatePicker, message } from "antd";
 import React, { Suspense, useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import IncomeStatement from "@/app/components/IncomeStatement";
 
+const { RangePicker } = DatePicker;
+
 const Reports = () => {
+  const [isModalVisible, setIsModalVisible] = useState(true);
   const searchParams = useSearchParams()
   const statement_id = searchParams.get('statement_id')
   const [statements, setStatements] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedDates, setSelectedDates] = useState<string[] | null>(null);
   const router = useRouter();
 
   useEffect(() => {
@@ -21,27 +26,84 @@ const Reports = () => {
     })();
   }, []);
 
+  function showModal() {
+    setIsModalVisible(true);
+  }
+
+  function handleCancel() {
+    setIsModalVisible(true);
+  };
+
+  async function handleOk() {
+    if (selectedDates == null) {
+      message.error('Please select a date range');
+      return;
+    }
+    setLoading(true);
+    try {
+      const resp = await fetch(createIncomeStatementEndpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ user_id: 3, date_from: selectedDates[0], date_to: selectedDates[1] })
+      });
+    } catch (error) {
+      console.error('error', error);
+      message.error(`An error occurred, ${error}`);
+    } finally {
+      setLoading(false);
+      setIsModalVisible(false);
+    }
+  };
+
+  function handleRangeSelect(dates: string[]) {
+    console.log('dates', dates);
+    setSelectedDates(dates);
+  }
+
   return (
     <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 style={{ display: 'flex', flexDirection: 'column' }}>
+        <div style={{ width: '30%', alignSelf: 'end' }}>
+          <Button type="primary" onClick={showModal}>
+            Create new statement
+          </Button>
+          <Modal
+            title="Select Date Range"
+            open={isModalVisible}
+            onOk={handleOk}
+            confirmLoading={loading}
+            onCancel={handleCancel}
+          >
+            <DatePicker.RangePicker
+              allowEmpty={[false, false]}
+              onChange={(date, dateString) => {
+                handleRangeSelect(dateString);
+              }}
+            />
+          </Modal>
+        </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>
       </div>
-    </Suspense>
+    </Suspense >
   );
 }
 

app/lib/endpoints/index.ts

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