Spaces:
Sleeping
Sleeping
hook create statement
Browse files- app/(home)/reports/page.tsx +82 -20
- app/lib/endpoints/index.ts +1 -0
app/(home)/reports/page.tsx
CHANGED
@@ -1,15 +1,20 @@
|
|
1 |
'use client';
|
2 |
-
import { incomeStatements } from "@/app/lib/endpoints";
|
3 |
import moment from "moment";
|
4 |
-
import { List } from "antd";
|
5 |
import React, { Suspense, useEffect, useState } from "react";
|
6 |
import { useRouter, useSearchParams } from "next/navigation";
|
7 |
import IncomeStatement from "@/app/components/IncomeStatement";
|
8 |
|
|
|
|
|
9 |
const Reports = () => {
|
|
|
10 |
const searchParams = useSearchParams()
|
11 |
const statement_id = searchParams.get('statement_id')
|
12 |
const [statements, setStatements] = useState([]);
|
|
|
|
|
13 |
const router = useRouter();
|
14 |
|
15 |
useEffect(() => {
|
@@ -21,27 +26,84 @@ const Reports = () => {
|
|
21 |
})();
|
22 |
}, []);
|
23 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
24 |
return (
|
25 |
<Suspense fallback={<div>Loading...</div>}>
|
26 |
-
<div style={{
|
27 |
-
<
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
<
|
32 |
-
|
33 |
-
|
34 |
-
|
35 |
-
|
36 |
-
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
43 |
</div>
|
44 |
-
</Suspense>
|
45 |
);
|
46 |
}
|
47 |
|
|
|
1 |
'use client';
|
2 |
+
import { createIncomeStatementEndpoint, incomeStatements } from "@/app/lib/endpoints";
|
3 |
import moment from "moment";
|
4 |
+
import { Button, List, Modal, DatePicker, message } from "antd";
|
5 |
import React, { Suspense, useEffect, useState } from "react";
|
6 |
import { useRouter, useSearchParams } from "next/navigation";
|
7 |
import IncomeStatement from "@/app/components/IncomeStatement";
|
8 |
|
9 |
+
const { RangePicker } = DatePicker;
|
10 |
+
|
11 |
const Reports = () => {
|
12 |
+
const [isModalVisible, setIsModalVisible] = useState(true);
|
13 |
const searchParams = useSearchParams()
|
14 |
const statement_id = searchParams.get('statement_id')
|
15 |
const [statements, setStatements] = useState([]);
|
16 |
+
const [loading, setLoading] = useState(false);
|
17 |
+
const [selectedDates, setSelectedDates] = useState<string[] | null>(null);
|
18 |
const router = useRouter();
|
19 |
|
20 |
useEffect(() => {
|
|
|
26 |
})();
|
27 |
}, []);
|
28 |
|
29 |
+
function showModal() {
|
30 |
+
setIsModalVisible(true);
|
31 |
+
}
|
32 |
+
|
33 |
+
function handleCancel() {
|
34 |
+
setIsModalVisible(true);
|
35 |
+
};
|
36 |
+
|
37 |
+
async function handleOk() {
|
38 |
+
if (selectedDates == null) {
|
39 |
+
message.error('Please select a date range');
|
40 |
+
return;
|
41 |
+
}
|
42 |
+
setLoading(true);
|
43 |
+
try {
|
44 |
+
const resp = await fetch(createIncomeStatementEndpoint, {
|
45 |
+
method: 'POST',
|
46 |
+
headers: {
|
47 |
+
'Content-Type': 'application/json'
|
48 |
+
},
|
49 |
+
body: JSON.stringify({ user_id: 3, date_from: selectedDates[0], date_to: selectedDates[1] })
|
50 |
+
});
|
51 |
+
} catch (error) {
|
52 |
+
console.error('error', error);
|
53 |
+
message.error(`An error occurred, ${error}`);
|
54 |
+
} finally {
|
55 |
+
setLoading(false);
|
56 |
+
setIsModalVisible(false);
|
57 |
+
}
|
58 |
+
};
|
59 |
+
|
60 |
+
function handleRangeSelect(dates: string[]) {
|
61 |
+
console.log('dates', dates);
|
62 |
+
setSelectedDates(dates);
|
63 |
+
}
|
64 |
+
|
65 |
return (
|
66 |
<Suspense fallback={<div>Loading...</div>}>
|
67 |
+
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
68 |
+
<div style={{ width: '30%', alignSelf: 'end' }}>
|
69 |
+
<Button type="primary" onClick={showModal}>
|
70 |
+
Create new statement
|
71 |
+
</Button>
|
72 |
+
<Modal
|
73 |
+
title="Select Date Range"
|
74 |
+
open={isModalVisible}
|
75 |
+
onOk={handleOk}
|
76 |
+
confirmLoading={loading}
|
77 |
+
onCancel={handleCancel}
|
78 |
+
>
|
79 |
+
<DatePicker.RangePicker
|
80 |
+
allowEmpty={[false, false]}
|
81 |
+
onChange={(date, dateString) => {
|
82 |
+
handleRangeSelect(dateString);
|
83 |
+
}}
|
84 |
+
/>
|
85 |
+
</Modal>
|
86 |
+
</div>
|
87 |
+
<div style={{ padding: 24 }}>
|
88 |
+
<h1>Statements</h1>
|
89 |
+
{statement_id ?
|
90 |
+
<IncomeStatement statementData={statements.find(({ id }) => id === Number(statement_id))} />
|
91 |
+
:
|
92 |
+
<List
|
93 |
+
itemLayout="horizontal"
|
94 |
+
dataSource={statements}
|
95 |
+
renderItem={(item: any) => (
|
96 |
+
<List.Item>
|
97 |
+
<List.Item.Meta
|
98 |
+
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>}
|
99 |
+
/>
|
100 |
+
</List.Item>
|
101 |
+
|
102 |
+
)}
|
103 |
+
/>}
|
104 |
+
</div>
|
105 |
</div>
|
106 |
+
</Suspense >
|
107 |
);
|
108 |
}
|
109 |
|
app/lib/endpoints/index.ts
CHANGED
@@ -5,4 +5,5 @@ export const transactionsEndpoint = `${url}/transactions/3`;
|
|
5 |
export const fielUploadEndpoint = `${url}/file_upload`;
|
6 |
export const incomeStatements = `${url}/income_statement/user/3`;
|
7 |
export const statementEndpoint = `${url}/statement/report/1`;
|
|
|
8 |
|
|
|
5 |
export const fielUploadEndpoint = `${url}/file_upload`;
|
6 |
export const incomeStatements = `${url}/income_statement/user/3`;
|
7 |
export const statementEndpoint = `${url}/statement/report/1`;
|
8 |
+
export const createIncomeStatementEndpoint = `${url}/income_statement`;
|
9 |
|