diff --git a/src/Router.tsx b/src/Router.tsx
index 24c189d0..28e9ed05 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -86,10 +86,16 @@ export const router = createBrowserRouter(
path: '',
element:
},
- { path: 'campaign-analytics/:id', element: },
- { path: 'campaign-analytics/admin/:id', element: },
- { path: 'campaign-details/:id', element: },
- { path: 'campaign-details/admin/:id', element: },
+ { path: 'campaign-analytics/:id/:activeTab?', element: },
+ {
+ path: 'campaign-analytics/admin/:id/:activeTab?',
+ element:
+ },
+ { path: 'campaign-details/:id/:tabValue?', element: },
+ {
+ path: 'campaign-details/admin/:id/:tabValue?',
+ element:
+ },
{
path: 'billing',
element:
diff --git a/src/components/CampaignAnalytics/CampaignAnalytics.tsx b/src/components/CampaignAnalytics/CampaignAnalytics.tsx
index 697c868f..75d53db4 100644
--- a/src/components/CampaignAnalytics/CampaignAnalytics.tsx
+++ b/src/components/CampaignAnalytics/CampaignAnalytics.tsx
@@ -1,7 +1,7 @@
import { useCallback, useEffect, useState, useMemo } from 'react'
import { Container, Flex, Loader, Tabs, Paper, Group, Text, Anchor, Center } from '@mantine/core'
-import { useParams } from 'react-router-dom'
-import { AnalyticsType, BaseAnalyticsData, AnalyticsPeriod } from 'types'
+import { useParams, useNavigate } from 'react-router-dom'
+import { BaseAnalyticsData, AnalyticsPeriod, AnalyticsType } from 'types'
import GoBack from 'components/common/GoBack/GoBack'
import DownloadCSV from 'components/common/DownloadCSV'
import useCampaignAnalytics from 'hooks/useCampaignAnalytics'
@@ -19,9 +19,9 @@ import { generateCVSData } from './CvsDownloadConfigurations'
import SeeOnMapBtn from './SeeOnMapBtn'
const CampaignAnalytics = ({ isAdminPanel = false }: { isAdminPanel?: boolean }) => {
- const { id } = useParams()
+ const { id, activeTab = 'timeframe' } = useParams<{ id: string; activeTab: AnalyticsType }>()
- const [activeTab, setActiveTab] = useState('timeframe')
+ const navigate = useNavigate()
const [isMapBtnShown, setIsMapBtnShown] = useState(false)
const [isMapVisible, setIsMapVisible] = useState(false)
const [csvData, setCsvData] = useState()
@@ -103,11 +103,16 @@ const CampaignAnalytics = ({ isAdminPanel = false }: { isAdminPanel?: boolean })
}
}, [activeTab, campaignMappedAnalytics])
- const handleTabChange = useCallback((value: string | null) => {
- // TODO: validate value if it is in AnalyticsType
- if (!value) return
- setActiveTab(value as AnalyticsType)
- }, [])
+ const handleTabChange = useCallback(
+ (value: string | null) => {
+ campaign?.id &&
+ navigate(
+ `/dashboard/campaign-analytics${isAdminPanel ? '/admin' : ''}/${campaign?.id}/${value}`,
+ { replace: true }
+ )
+ },
+ [campaign?.id, isAdminPanel, navigate]
+ )
// TODO: there is delay when updated analytics table is displayed after the tab is switched - add loading bars or something
diff --git a/src/components/CampaignAnalytics/Placements.tsx b/src/components/CampaignAnalytics/Placements.tsx
index 2084b1e3..ea8bd9ee 100644
--- a/src/components/CampaignAnalytics/Placements.tsx
+++ b/src/components/CampaignAnalytics/Placements.tsx
@@ -3,8 +3,8 @@ import CustomTable, { TableElement, TableRowAction } from 'components/common/Cus
import { getHumneSrcName } from 'helpers'
import { useMemo } from 'react'
import { BaseAnalyticsData } from 'types'
-import InvisibilityIcon from 'resources/icons/Invisibility'
-import VisibilityIcon from 'resources/icons/Visibility'
+import IncludeIcon from 'resources/icons/Include'
+import ExcludeIcon from 'resources/icons/Exclude'
import { useCampaignsData } from 'hooks/useCampaignsData'
const Placements = ({
@@ -89,7 +89,7 @@ const Placements = ({
label: ({ isBlocked, placementName }: PlacementsTableElement['actionData']) =>
`${isBlocked ? 'Unblock' : 'Block'} "${placementName}"`,
icon: ({ isBlocked }: PlacementsTableElement['actionData']) =>
- isBlocked ? :
+ isBlocked ? :
}
]
: []
diff --git a/src/components/CampaignDetails/CampaignDetails.tsx b/src/components/CampaignDetails/CampaignDetails.tsx
index af54c36b..08dd7ca5 100644
--- a/src/components/CampaignDetails/CampaignDetails.tsx
+++ b/src/components/CampaignDetails/CampaignDetails.tsx
@@ -229,8 +229,8 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
}
- variant="subtle"
- color="mainText"
+ variant={isEditMode ? 'filled' : 'subtle'}
+ color={isEditMode ? 'brand' : 'mainText'}
onClick={() =>
isDraft
? canEditDraft && handleEditDraft()
@@ -262,7 +262,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
{isEditMode ? (
-
+
) : (
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index 19a4b0aa..20003710 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -260,7 +260,7 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
const handleEdit = useCallback(
(data: DashboardTableElement['actionData']) =>
- navigate(`/dashboard/campaign-details/${data.campaign.id}?edit=true`, {}),
+ navigate(`/dashboard/campaign-details/${data.campaign.id}/budget?edit=true`, {}),
[navigate]
)
diff --git a/src/components/EditCampaign/EditCampaign.tsx b/src/components/EditCampaign/EditCampaign.tsx
index 50ddeaea..f5936354 100644
--- a/src/components/EditCampaign/EditCampaign.tsx
+++ b/src/components/EditCampaign/EditCampaign.tsx
@@ -7,7 +7,8 @@ import {
ActionIcon,
Checkbox,
NumberInput,
- Paper
+ Paper,
+ Tabs
} from '@mantine/core'
import { useForm } from '@mantine/form'
import { modals } from '@mantine/modals'
@@ -32,7 +33,7 @@ import type {
unstable_Blocker as Blocker,
unstable_BlockerFunction as BlockerFunction
} from 'react-router-dom'
-import { unstable_useBlocker as useBlocker } from 'react-router-dom'
+import { unstable_useBlocker as useBlocker, useParams, useNavigate } from 'react-router-dom'
import InfoFilledIcon from 'resources/icons/InfoFilled'
import throttle from 'lodash.throttle'
import { defaultConfirmModalProps } from 'components/common/Modals/CustomConfirmModal'
@@ -54,10 +55,12 @@ type FormProps = {
targetingInput: TargetingInputEdit
}
-const EditCampaign = ({ campaign }: { campaign: Campaign }) => {
+const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boolean }) => {
const {
adexAccount: { balanceToken }
} = useAccount()
+ const { tabValue = 'budget' } = useParams()
+ const navigate = useNavigate()
const { supplyStats, editCampaign } = useCampaignsData()
const recommendedPaymentBounds = useMemo(
@@ -242,115 +245,147 @@ const EditCampaign = ({ campaign }: { campaign: Campaign }) => {
if (!campaign) return Invalid Campaign ID
return (
-
-
+
+
+
+
+
)
}
diff --git a/src/index.tsx b/src/index.tsx
index ed4c488b..6a42a46b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+// import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
-
-
-
+ //
+
+ //
)
// If you want to start measuring performance in your app, pass a function