Funnel form.

components/input/DateFilter.js

@@ -9,7 +9,7 @@ import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
 import useMessages from 'hooks/useMessages';
 
-export function DateFilter({ websiteId, value, className }) {
+export function DateFilter({ websiteId, value, className, onChange, isForm, alignment }) {
   const { formatMessage, labels } = useMessages();
   const { get } = useApi();
   const [dateRange, setDateRange] = useDateRange(websiteId);
@@ -21,10 +21,26 @@ export function DateFilter({ websiteId, value, className }) {
       const data = await get(`/websites/${websiteId}`);
 
       if (data) {
-        setDateRange({ value, ...getDateRangeValues(new Date(data.createdAt), Date.now()) });
+        const websiteRange = { value, ...getDateRangeValues(new Date(data.createdAt), Date.now()) };
+
+        if (!isForm) {
+          setDateRange(websiteRange);
+        }
+
+        if (onChange) {
+          onChange(websiteRange);
+        }
       }
     } else if (value !== 'all') {
-      setDateRange(value);
+      if (!isForm) {
+        setDateRange(value);
+      }
+
+      if (onChange) {
+        onChange(value);
+      }
+
+      console.log(value);
     }
   }
 
@@ -103,7 +119,7 @@ export function DateFilter({ websiteId, value, className }) {
         items={options}
         renderValue={renderValue}
         value={value}
-        alignment="end"
+        alignment={alignment || 'end'}
         onChange={handleChange}
       >
         {({ label, value, divider }) => (

components/metrics/WebsiteChart.js

@@ -107,7 +107,12 @@ export function WebsiteChart({
         <Column defaultSize={12} xl={4}>
           <div className={styles.actions}>
             <RefreshButton websiteId={websiteId} isLoading={isLoading} />
-            <DateFilter websiteId={websiteId} value={value} className={styles.dropdown} />
+            <DateFilter
+              websiteId={websiteId}
+              value={value}
+              className={styles.dropdown}
+              updateSettings={true}
+            />
           </div>
         </Column>
       </Row>

components/pages/reports/FunnelChart.js

@@ -0,0 +1,43 @@
+import FunnelGraph from 'funnel-graph-js/dist/js/funnel-graph';
+import { useEffect, useRef } from 'react';
+
+export default function FunnelChart() {
+  const funnel = useRef(null);
+
+  useEffect(() => {
+    funnel.current.innerHTML = '';
+
+    const data = {
+      labels: ['Cv Sent', '1st  Interview', '2nd Interview', '3rd Interview', 'Offer'],
+      subLabels: ['Cv Sent', '1st  Interview', '2nd Interview', '3rd Interview', 'Offer'],
+      colors: [
+        ['#FFB178', '#FF78B1', '#FF3C8E'],
+        ['#FFB178', '#FF78B1', '#FF3C8E'],
+        ['#A0BBFF', '#EC77FF'],
+        ['#A0F9FF', '#7795FF'],
+        ['#FFB178', '#FF78B1', '#FF3C8E'],
+      ],
+      values: [[3500], [3300], [2000], [600], [330]],
+    };
+
+    const graph = new FunnelGraph({
+      container: '.funnel',
+      gradientDirection: 'horizontal',
+      data: data,
+      displayPercent: true,
+      direction: 'Vertical',
+      width: 1000,
+      height: 350,
+      subLabelValue: 'values',
+    });
+
+    graph.draw();
+  }, []);
+
+  return (
+    <div>
+      FunnelChart
+      <div className="funnel" ref={funnel} />
+    </div>
+  );
+}

components/pages/reports/FunnelForm.js

@@ -0,0 +1,104 @@
+import { useMutation } from '@tanstack/react-query';
+import DateFilter from 'components/input/DateFilter';
+import WebsiteSelect from 'components/input/WebsiteSelect';
+import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
+import useUser from 'hooks/useUser';
+import { parseDateRange } from 'lib/date';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormInput,
+  FormRow,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+import styles from './FunnelForm.module.css';
+import { getNextInternalQuery } from 'next/dist/server/request-meta';
+
+export function FunnelForm({ onSearch }) {
+  const { formatMessage, labels, getMessage } = useMessages();
+  const [dateRange, setDateRange] = useState(null);
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+  const [urls, setUrls] = useState(['']);
+  const [websiteId, setWebsiteId] = useState('');
+
+  const handleSubmit = async data => {
+    onSearch(data);
+  };
+
+  const handleDateChange = value => {
+    const { startDate, endDate } = parseDateRange(value);
+
+    setDateRange(value);
+    setStartDate(startDate);
+    setEndDate(endDate);
+  };
+
+  const handleAddUrl = () => setUrls([...urls, 'meow']);
+
+  const handleRemoveUrl = i => setUrls(urls.splice(i, 1));
+
+  const handleUrlChange = (value, i) => {
+    const nextUrls = [...urls];
+
+    nextUrls[i] = value.target.value;
+    setUrls(nextUrls);
+  };
+
+  return (
+    <>
+      <Form
+        values={{
+          websiteId,
+          startDate,
+          endDate,
+          urls,
+        }}
+        onSubmit={handleSubmit}
+      >
+        <FormRow label="website">
+          <WebsiteSelect websiteId={websiteId} onSelect={value => setWebsiteId(value)} />
+          <FormInput name="websiteId" rules={{ required: formatMessage(labels.required) }}>
+            <TextField value={websiteId} className={styles.hiddenInput} />
+          </FormInput>
+        </FormRow>
+        <FormRow label="Date">
+          <DateFilter
+            className={styles.filter}
+            value={dateRange}
+            alignment="start"
+            onChange={handleDateChange}
+          />
+          <FormInput
+            name="startDate"
+            className={styles.hiddenInput}
+            rules={{ required: formatMessage(labels.required) }}
+          >
+            <TextField value={startDate} />
+          </FormInput>
+          <FormInput name="endDate" rules={{ required: formatMessage(labels.required) }}>
+            <TextField value={endDate} className={styles.hiddenInput} />
+          </FormInput>
+        </FormRow>
+        <Button onClick={handleAddUrl}>Add URL</Button>
+        {urls.map((a, i) => (
+          <FormRow key={`url${i}`} label={`URL ${i + 1}`}>
+            <Button onClick={() => handleRemoveUrl(i)}>Remove URL</Button>
+            <TextField value={urls[i]} onChange={value => handleUrlChange(value, i)} />
+          </FormRow>
+        ))}
+
+        <FormButtons>
+          <SubmitButton variant="primary">Search</SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
+  );
+}
+
+export default FunnelForm;

components/pages/reports/FunnelForm.module.css

@@ -0,0 +1,19 @@
+.filter {
+  min-width: 200px;
+}
+
+.hiddenInput {
+  max-height: 100px;
+}
+
+.hiddenInput {
+  visibility: hidden;
+  min-height: 0px;
+  max-height: 0px;
+}
+
+.hidden {
+  visibility: hidden;
+  min-height: 0px;
+  max-height: 0px;
+}

components/pages/reports/FunnelPage.js

@@ -0,0 +1,26 @@
+import Page from 'components/layout/Page';
+import FunnelChart from './FunnelChart';
+import FunnelForm from './FunnelForm';
+
+export default function FunnelPage() {
+  function handleOnSearch() {
+    // do API CALL to api/reports/funnel to get funnelData
+    // Get DATA
+  }
+
+  return (
+    <Page>
+      funnelPage
+      {/* <ReportForm /> */}
+      <FunnelForm onSearchClick={handleOnSearch} /> website / start/endDate urls: []
+      <FunnelChart />
+      {/* {!chartLoaded && <Loading icon="dots" style={{ minHeight: 300 }} />}
+      {chartLoaded && (
+        <>
+          {!view && <WebsiteTableView websiteId={websiteId} />}
+          {view && <WebsiteMenuView websiteId={websiteId} />}
+        </>
+      )} */}
+    </Page>
+  );
+}

components/pages/settings/profile/DateRangeSetting.js

@@ -7,13 +7,15 @@ import useMessages from 'hooks/useMessages';
 export function DateRangeSetting() {
   const { formatMessage, labels } = useMessages();
   const [dateRange, setDateRange] = useDateRange();
-  const { startDate, endDate, value } = dateRange;
+  const { value } = dateRange;
 
-  const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
+  const handleReset = () => {
+    setDateRange(DEFAULT_DATE_RANGE);
+  };
 
   return (
     <Flexbox gap={10}>
-      <DateFilter value={value} startDate={startDate} endDate={endDate} />
+      <DateFilter value={value} />
       <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
     </Flexbox>
   );