feat: display report

src/Router.tsx

@@ -4,7 +4,7 @@ import BillsPage from './pages/bills';
 import HomePage from './pages/home';
 import NewBillPage from './pages/newBill';
 import NotFoundPage from './pages/notFound';
-import ReportPage from './pages/ReportPage';
+import ReportPage from './pages/report';
 
 type RouteConfig = {
   path: string;

src/api/reports.ts

@@ -14,7 +14,13 @@ export const fetchReport = async ({
 
   try {
     const { data } = await client.get<Report>(queryURL);
-    return { data };
+    return {
+      data: {
+        // @ts-ignore
+        type: data.report_type,
+        ...data
+      }
+    };
   } catch (error) {
     console.error(error);
     return { error };

src/pages/ReportPage.tsx

@@ -1,55 +0,0 @@
-import { Button, Form } from 'antd';
-import { useForm } from 'react-hook-form';
-import { fetchReport } from '../api/reports';
-import { FormInput } from '../components/formInput';
-import { InputSelect } from '../components/inputSelect';
-import { RadioInput } from '../components/radioInput';
-import { withLayout } from '../layouts/main';
-import { monthToList, ReportFormType, ReportType } from '../types/report';
-
-function ReportPage() {
-  // hooks
-  const { control, handleSubmit, watch } = useForm<ReportFormType>({
-    defaultValues: {
-      type: ReportType.monthly,
-      year: new Date().getFullYear(),
-      month: new Date().getMonth()
-    }
-  });
-
-  // Logic
-  const onFinish = handleSubmit((data) => fetchReport(data));
-
-  const isMonthlyReport = watch('type') === ReportType.monthly;
-
-  return (
-    <>
-      <h1>Reports</h1>
-      <Form layout="vertical" onFinish={onFinish}>
-        <RadioInput
-          control={control}
-          name="type"
-          label="Report type"
-          options={['Monthly', 'Yearly']}
-        />
-
-        <FormInput control={control} name="year" label="Year" type="number" />
-
-        {isMonthlyReport && (
-          <InputSelect
-            control={control}
-            name="month"
-            label="Month"
-            options={monthToList()}
-            placeholder="For which month"
-          />
-        )}
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form>
-    </>
-  );
-}
-
-export default withLayout(ReportPage);

src/pages/report/index.tsx

@@ -0,0 +1,47 @@
+import { Divider } from 'antd';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { fetchReport } from '../../api/reports';
+import { withLayout } from '../../layouts/main';
+import { Report, ReportFormType, ReportType } from '../../types/report';
+import { ReportResult } from './reportResult';
+import { ReportForm } from './reportForm';
+
+function ReportPage() {
+  // hooks
+  const { control, handleSubmit, watch } = useForm<ReportFormType>({
+    defaultValues: {
+      type: ReportType.monthly,
+      year: new Date().getFullYear(),
+      month: new Date().getMonth()
+    }
+  });
+
+  // Local state
+  const [reportFetched, setReportFetched] = useState(false);
+  const [report, setReport] = useState({} as Report);
+
+  // Logic
+  const onFinish = handleSubmit(async (data) => {
+    const { data: content } = await fetchReport(data);
+    if (content) {
+      setReport(() => content);
+      setReportFetched(() => true);
+      return;
+    }
+    setReportFetched(() => false);
+  });
+
+  const isMonthlyReport = watch('type') === ReportType.monthly;
+
+  return (
+    <>
+      <h1>Reports</h1>
+      {reportFetched && <ReportResult content={report} />}
+      <Divider />
+      <ReportForm onFinish={onFinish} control={control} monthlyReport={isMonthlyReport} />
+    </>
+  );
+}
+
+export default withLayout(ReportPage);

src/pages/report/reportForm.tsx

@@ -0,0 +1,41 @@
+import { Button, Form } from 'antd';
+import { BaseSyntheticEvent } from 'react';
+import { Control } from 'react-hook-form';
+import { FormInput } from '../../components/formInput';
+import { InputSelect } from '../../components/inputSelect';
+import { RadioInput } from '../../components/radioInput';
+import { monthToList, ReportFormType } from '../../types/report';
+
+type Props = {
+  onFinish: (e?: BaseSyntheticEvent) => Promise<void>;
+  control: Control<ReportFormType>;
+  monthlyReport: boolean;
+};
+
+export function ReportForm({ control, monthlyReport, onFinish }: Props) {
+  return (
+    <Form layout="vertical" onFinish={onFinish}>
+      <RadioInput
+        control={control}
+        name="type"
+        label="Report type"
+        options={['Monthly', 'Yearly']}
+      />
+
+      <FormInput control={control} name="year" label="Year" type="number" />
+
+      {monthlyReport && (
+        <InputSelect
+          control={control}
+          name="month"
+          label="Month"
+          options={monthToList()}
+          placeholder="For which month"
+        />
+      )}
+      <Button type="primary" htmlType="submit">
+        Submit
+      </Button>
+    </Form>
+  );
+}

src/pages/report/reportResult.tsx

@@ -0,0 +1,45 @@
+import { Card, Col, Divider, List, Row, Statistic } from 'antd';
+import { Link } from 'react-router-dom';
+import { Report } from '../../types/report';
+
+type Props = {
+  content: Report;
+};
+
+export function ReportResult({ content }: Props) {
+  return (
+    <>
+      <Divider />
+      <h2>{content.type.toUpperCase()} report </h2>
+      <Row gutter={16}>
+        <Col span={12}>
+          <Statistic title="Revenue" value={content.revenue} suffix={'€'} />
+        </Col>
+        <Col span={12}>
+          <Statistic title="Profit" value={content.profit} suffix={'€'} />
+        </Col>
+        <Col span={12}>
+          <Statistic title="Bookings" value={content.bookings} />
+        </Col>
+      </Row>
+      <Divider />
+      <h3>Bills</h3>
+      <Row gutter={16}>
+        <List
+          grid={{ gutter: 16, column: 4 }}
+          pagination={{ pageSize: 12 }}
+          dataSource={content.bills}
+          renderItem={(bill) => (
+            <Link to={`/bills/${bill.id}`}>
+              <List.Item>
+                <Card title={bill.id} bordered={false}>
+                  <p>{bill.name}</p>
+                </Card>
+              </List.Item>
+            </Link>
+          )}
+        />
+      </Row>
+    </>
+  );
+}