checkpoint

components/pages/reports/funnel/FunnelPage.js

@@ -0,0 +1,38 @@
+import { useMutation } from '@tanstack/react-query';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import ReportsLayout from 'components/layout/ReportsLayout';
+import useApi from 'hooks/useApi';
+import { useState } from 'react';
+import FunnelChart from './FunnelChart';
+import FunnelTable from './FunnelTable';
+import FunnelForm from './FunnelForm';
+
+import styles from './FunnelPage.module.css';
+
+export default function FunnelPage() {
+  const { post } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post('/reports/funnel', data));
+  const [data, setData] = useState([{}]);
+  const [formData, setFormData] = useState();
+
+  function handleOnSearch(data) {
+    setFormData(data);
+
+    mutate(data, {
+      onSuccess: async data => {
+        setData(data);
+      },
+    });
+  }
+
+  return (
+    <ReportsLayout filter={<FunnelForm onSearch={handleOnSearch} />} header={'test'}>
+      <Page>
+        <PageHeader title="Funnel Report"></PageHeader>
+        <FunnelChart data={data} />
+        <FunnelTable data={data} />
+      </Page>
+    </ReportsLayout>
+  );
+}