diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/FunnelIssues.tsx b/frontend/app/components/Dashboard/components/FunnelIssues/FunnelIssues.tsx new file mode 100644 index 000000000..9467029b2 --- /dev/null +++ b/frontend/app/components/Dashboard/components/FunnelIssues/FunnelIssues.tsx @@ -0,0 +1,36 @@ +import { useStore } from 'App/mstore'; +import { useObserver } from 'mobx-react-lite'; +import React, { useEffect } from 'react'; +import { NoContent, Loader } from 'UI'; +import FunnelIssuesSort from '../FunnelIssuesSort'; + +function FunnelIssues(props) { + const { funnelStore } = useStore(); + const funnel = useObserver(() => funnelStore.instance); + const issues = useObserver(() => funnelStore.issues); + const loading = useObserver(() => funnelStore.isLoadingIssues); + + useEffect(() => { + funnelStore.fetchIssues(funnel?.funnelId); + }, []); + + return ( +
+
+

Most significant issues identified in this funnel

+ +
+ + + Issues + + +
+ ); +} + +export default FunnelIssues; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/FunnelIssues/index.ts b/frontend/app/components/Dashboard/components/FunnelIssues/index.ts new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/app/components/Dashboard/components/FunnelIssuesSort/FunnelIssuesSort.tsx b/frontend/app/components/Dashboard/components/FunnelIssuesSort/FunnelIssuesSort.tsx new file mode 100644 index 000000000..b3ab876d4 --- /dev/null +++ b/frontend/app/components/Dashboard/components/FunnelIssuesSort/FunnelIssuesSort.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import Select from 'Shared/Select'; + +const sortOptions = [ + { value: 'afectedUsers-desc', label: 'Affected Users (High)' }, + { value: 'afectedUsers-asc', label: 'Affected Users (Low)' }, + { value: 'conversionImpact-desc', label: 'Conversion Impact (High)' }, + { value: 'conversionImpact-asc', label: 'Conversion Impact (Low)' }, + { value: 'lostConversions-desc', label: 'Lost Conversions (High)' }, + { value: 'lostConversions-asc', label: 'Lost Conversions (Low)' }, +] +function FunnelIssuesSort(props) { + return ( +
+