From 0014d0377d4c7fa081d627dbdee0921dcf878527 Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 1 Jul 2024 13:47:53 +0300
Subject: [PATCH 1/6] wip: admin review in campaign details

---
 .../CampaignDetails/AdminActions.tsx          |  70 +++++
 .../CampaignDetails/CampaignDetails.tsx       |  23 +-
 src/components/Dashboard/Dashboard.tsx        |  17 +-
 .../CampainDetailsRow/CampaignDetailsRow.tsx  |   1 +
 .../common/MediaThumb/MediaThumb.tsx          |   5 +-
 .../AdminCampaignModal/AdminCampaignModal.tsx | 245 ------------------
 .../CreativePreviewModal.tsx                  |  10 +-
 src/components/common/Modals/index.ts         |   2 -
 8 files changed, 105 insertions(+), 268 deletions(-)
 create mode 100644 src/components/CampaignDetails/AdminActions.tsx
 delete mode 100644 src/components/common/Modals/AdminCampaignModal/AdminCampaignModal.tsx

diff --git a/src/components/CampaignDetails/AdminActions.tsx b/src/components/CampaignDetails/AdminActions.tsx
new file mode 100644
index 00000000..f824c3db
--- /dev/null
+++ b/src/components/CampaignDetails/AdminActions.tsx
@@ -0,0 +1,70 @@
+import { Button, Flex, Text, Textarea } from '@mantine/core'
+import { Campaign } from 'adex-common'
+
+import { useAdExApi } from 'hooks/useAdexServices'
+import { FormEvent, useState } from 'react'
+
+export const AdminActions = ({ item }: { item: Campaign | null }) => {
+  const { adexServicesRequest } = useAdExApi()
+  const [reason, setReason] = useState('')
+  const [action, setAction] = useState<null | number>(null)
+  const [formed, setFormed] = useState(false)
+
+  const handleAction = (status: string) => {
+    if (!item?.id) return
+    setAction(status === 'approve' ? 3 : 4)
+    setFormed(true)
+  }
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    if (!item?.id) return
+    adexServicesRequest('backend', {
+      route: `/dsp/admin/campaigns/${item.id}`,
+      method: 'PUT',
+      body: {
+        reviewStatus: action,
+        reviewMessage: reason
+      },
+      headers: {
+        'content-type': 'application/json'
+      }
+    }).catch(console.log)
+    setFormed(false)
+  }
+
+  return (
+    <Flex>
+      {!formed ? (
+        <>
+          <Textarea
+            label="Required"
+            required
+            defaultValue={reason}
+            onChange={(e) => setReason(e.target.value)}
+            placeholder="Reason..."
+          />
+          <Flex gap="25px" justify="center" mt="15px">
+            <Button onClick={() => handleAction('approve')} color="green">
+              Approve
+            </Button>
+            <Button onClick={() => handleAction('reject')} color="red">
+              Reject
+            </Button>
+          </Flex>
+        </>
+      ) : (
+        <form onSubmit={handleSubmit}>
+          <Flex gap="25px" direction="column" justify="center" mt="15px">
+            <Text>{action === 3 ? 'Approve' : 'Reject'} reason:</Text>
+            <Text>{reason}</Text>
+            <Button type="submit">Confirm</Button>
+            <Button onClick={() => setFormed(false)} variant="subtle">
+              Cancel
+            </Button>
+          </Flex>
+        </form>
+      )}
+    </Flex>
+  )
+}
diff --git a/src/components/CampaignDetails/CampaignDetails.tsx b/src/components/CampaignDetails/CampaignDetails.tsx
index 08cc1a2c..a6871e5b 100644
--- a/src/components/CampaignDetails/CampaignDetails.tsx
+++ b/src/components/CampaignDetails/CampaignDetails.tsx
@@ -20,6 +20,7 @@ import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import useCustomNotifications from 'hooks/useCustomNotifications'
 import { CustomConfirmModal } from 'components/common/Modals'
 import CatsLocsFormatted from './CatsLocsFormatted'
+import { AdminActions } from './AdminActions'
 
 const useStyles = createStyles((theme) => ({
   wrapper: {
@@ -53,7 +54,7 @@ const useStyles = createStyles((theme) => ({
   }
 }))
 
-const CampaignDetails = () => {
+const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
   const { classes, cx } = useStyles()
   const { campaignsData, updateCampaignDataById, changeCampaignStatus } = useCampaignsData()
   const { updateCampaignFromDraft } = useCreateCampaignContext()
@@ -113,7 +114,7 @@ const CampaignDetails = () => {
         <>
           <Container fluid className={classes.wrapper}>
             <Grid>
-              <Grid.Col span={6}>
+              <Grid.Col md={12} xl={6}>
                 <Text weight="bold" size="sm" pb="sm" className={classes.lighterColor}>
                   Overview
                 </Text>
@@ -241,7 +242,7 @@ const CampaignDetails = () => {
                   />
                 </div>
               </Grid.Col>
-              <Grid.Col span={6}>
+              <Grid.Col md={12} xl={6}>
                 <Grid>
                   <Grid.Col span={12}>
                     <Text weight="bold" size="sm" pb="sm" className={classes.lighterColor}>
@@ -283,7 +284,13 @@ const CampaignDetails = () => {
                             lineHeight="sm"
                             textSize="sm"
                             title={`${item.banner?.format.w}x${item.banner?.format.h}`}
-                            value={<MediaThumb adUnit={item} previewOnClick />}
+                            value={
+                              <MediaThumb
+                                adUnit={item}
+                                previewOnClick
+                                title={`Target URL: ${item.banner?.targetUrl}`}
+                              />
+                            }
                             noBorder={isLast}
                           />
                         )
@@ -347,6 +354,14 @@ const CampaignDetails = () => {
                   </Grid.Col>
                 </Grid>
               </Grid.Col>
+
+              {isAdminPanel && campaign.status === CampaignStatus.inReview && (
+                <Grid>
+                  <Grid.Col>
+                    <AdminActions item={campaign} />
+                  </Grid.Col>
+                </Grid>
+              )}
             </Grid>
           </Container>
           <CustomConfirmModal
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index 83ed2280..afc1e1fb 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -5,8 +5,7 @@ import {
   EventType
 } from 'adex-common'
 import { Container, Flex, Text, Badge, Loader } from '@mantine/core'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useDisclosure } from '@mantine/hooks'
+import { useCallback, useEffect, useMemo } from 'react'
 import CustomTable from 'components/common/CustomTable'
 import { periodNumberToDate } from 'helpers'
 import { useNavigate } from 'react-router-dom'
@@ -14,8 +13,6 @@ import { useCampaignsData } from 'hooks/useCampaignsData'
 import { parseBigNumTokenAmountToDecimal } from 'helpers/balances'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import useCustomNotifications from 'hooks/useCustomNotifications'
-import { AdminCampaignModal } from 'components/common/Modals'
-import { CampaignData } from 'types'
 import UnderReviewIcon from 'resources/icons/UnderReview'
 import BadgeStatusCampaign from './BadgeStatusCampaign'
 
@@ -64,8 +61,6 @@ const getStatusOrder = (status: CampaignStatus) => {
 const Dashboard = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
   const navigate = useNavigate()
   const { campaignsData, initialDataLoading, updateAllCampaignsData } = useCampaignsData()
-  const [opened, { open, close }] = useDisclosure(false)
-  const [selectedItem, setSelectedItem] = useState<CampaignData | null>(null)
   const { updateCampaignFromDraft } = useCreateCampaignContext()
   const { showNotification } = useCustomNotifications()
   // Temporary disabled show/hide archived until no functionality implemented
@@ -163,14 +158,9 @@ const Dashboard = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
 
   const handlePreview = useCallback(
     (item: Campaign) => {
-      if (isAdminPanel) {
-        setSelectedItem(campaignsData?.get(item.id) || null)
-        open()
-      } else {
-        navigate(`/dashboard/campaign-details/${item.id}`)
-      }
+      navigate(`/dashboard/campaign-details/${item.id}`)
     },
-    [campaignsData, isAdminPanel, navigate, open]
+    [navigate]
   )
 
   const handleAnalytics = useCallback(
@@ -276,7 +266,6 @@ const Dashboard = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
           </Flex>
         )}
       </Flex>
-      <AdminCampaignModal item={selectedItem?.campaign || null} opened={opened} close={close} />
     </Container>
   )
 }
diff --git a/src/components/common/CampainDetailsRow/CampaignDetailsRow.tsx b/src/components/common/CampainDetailsRow/CampaignDetailsRow.tsx
index cfd8f2cb..5e52c2a3 100644
--- a/src/components/common/CampainDetailsRow/CampaignDetailsRow.tsx
+++ b/src/components/common/CampainDetailsRow/CampaignDetailsRow.tsx
@@ -39,6 +39,7 @@ const CampaignDetailsRow = ({
       className={cx({ [classes.border]: !noBorder })}
       pt={lineHeight}
       pb={lineHeight}
+      gap="sm"
     >
       <Text
         className={cx(classes.textColor, {
diff --git a/src/components/common/MediaThumb/MediaThumb.tsx b/src/components/common/MediaThumb/MediaThumb.tsx
index 04cd762c..c30570f8 100644
--- a/src/components/common/MediaThumb/MediaThumb.tsx
+++ b/src/components/common/MediaThumb/MediaThumb.tsx
@@ -23,12 +23,14 @@ const MediaThumb = ({
   adUnit,
   previewOnClick,
   width = 40,
-  height = 40
+  height = 40,
+  title
 }: {
   adUnit: AdUnit
   previewOnClick?: boolean
   width?: number | string
   height?: number | string
+  title?: string
 }) => {
   const [modalOpened, setModalOpened] = useState(false)
   const { classes } = useStyles({ width, height })
@@ -55,6 +57,7 @@ const MediaThumb = ({
         media={adUnit}
         opened={modalOpened}
         close={() => setModalOpened(false)}
+        title={title}
       />
     </>
   )
diff --git a/src/components/common/Modals/AdminCampaignModal/AdminCampaignModal.tsx b/src/components/common/Modals/AdminCampaignModal/AdminCampaignModal.tsx
deleted file mode 100644
index acad0b8e..00000000
--- a/src/components/common/Modals/AdminCampaignModal/AdminCampaignModal.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import { Button, Flex, Image, Modal, Text, Textarea, createStyles } from '@mantine/core'
-import { Campaign, EventType } from 'adex-common'
-import BadgeStatusCampaign from 'components/Dashboard/BadgeStatusCampaign'
-import CampaignDetailsRow from 'components/common/CampainDetailsRow'
-import FormattedAmount from 'components/common/FormattedAmount/FormattedAmount'
-import { formatDateTime } from 'helpers'
-import { getMediaUrlWithProvider } from 'helpers/createCampaignHelpers'
-import { useAdExApi } from 'hooks/useAdexServices'
-import { FormEvent, useState } from 'react'
-import LeftArrowIcon from 'resources/icons/LeftArrow'
-import RightArrowIcon from 'resources/icons/RightArrow'
-
-const IPFS_GATEWAY = process.env.REACT_APP_IPFS_GATEWAY
-
-const useStyles = createStyles((theme) => ({
-  header: {
-    marginTop: theme.spacing.lg
-  },
-  title: {
-    fontSize: theme.fontSizes.xl,
-    fontWeight: theme.other.fontWeights.bold
-  },
-  close: {
-    color: theme.colors.mainText[theme.fn.primaryShade()]
-  }
-}))
-
-const AdminCampaignModal = ({
-  item,
-  opened,
-  close
-}: {
-  item: Campaign | null
-  opened: boolean
-  close: () => void
-}) => {
-  const { classes } = useStyles()
-  const { adexServicesRequest } = useAdExApi()
-  const [reason, setReason] = useState('')
-  const [action, setAction] = useState<null | number>(null)
-  const [formed, setFormed] = useState(false)
-  const [currBanner, setCurrBanner] = useState(0)
-
-  const handleAction = (status: string) => {
-    if (!item?.id) return
-    setAction(status === 'approve' ? 3 : 4)
-    setFormed(true)
-  }
-
-  const handleBannerChange = (n: number) => {
-    const nextBannerPos = currBanner + n
-    const bannerLength = item?.adUnits.length || 0
-
-    if (nextBannerPos < 0) return setCurrBanner(0)
-    if (nextBannerPos > bannerLength - 1) return setCurrBanner(bannerLength - 1)
-    setCurrBanner(nextBannerPos)
-  }
-
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault()
-    if (!item?.id) return
-    adexServicesRequest('backend', {
-      route: `/dsp/admin/campaigns/${item.id}`,
-      method: 'PUT',
-      body: {
-        reviewStatus: action,
-        reviewMessage: reason
-      },
-      headers: {
-        'content-type': 'application/json'
-      }
-    })
-      .then(close)
-      .catch(console.log)
-    setFormed(false)
-  }
-
-  return (
-    <Modal
-      size="lg"
-      title="Campaign Overview"
-      padding="xl"
-      opened={opened}
-      onClose={close}
-      classNames={{
-        header: classes.header,
-        title: classes.title,
-        close: classes.close
-      }}
-    >
-      {!formed ? (
-        <>
-          <CampaignDetailsRow title="Title" value={item?.title} />
-          <CampaignDetailsRow title="Id" value={item?.id} />
-          <CampaignDetailsRow
-            title="Status"
-            value={<BadgeStatusCampaign type={item?.status as number} />}
-          />
-
-          <CampaignDetailsRow title="Served" value={item?.nonce} />
-          <CampaignDetailsRow
-            lineHeight="sm"
-            textSize="sm"
-            title="Budget"
-            value={
-              item && (
-                <FormattedAmount
-                  chainId={item.outpaceChainId}
-                  tokenAddress={item.outpaceAssetAddr}
-                  amount={item.campaignBudget}
-                  tokenDecimals={item.outpaceAssetDecimals}
-                />
-              )
-            }
-          />
-          <CampaignDetailsRow
-            title="CPM Min"
-            value={
-              item &&
-              item?.pricingBounds[EventType.IMPRESSION]?.min && (
-                <FormattedAmount
-                  chainId={item.outpaceChainId}
-                  tokenAddress={item.outpaceAssetAddr}
-                  amount={item.pricingBounds[EventType.IMPRESSION].min}
-                  tokenDecimals={item.outpaceAssetDecimals}
-                  isCPMAmount
-                />
-              )
-            }
-          />
-          <CampaignDetailsRow
-            title="CPM Max"
-            value={
-              item &&
-              item?.pricingBounds[EventType.IMPRESSION]?.max && (
-                <FormattedAmount
-                  chainId={item.outpaceChainId}
-                  tokenAddress={item.outpaceAssetAddr}
-                  amount={item.pricingBounds[EventType.IMPRESSION].max}
-                  tokenDecimals={item.outpaceAssetDecimals}
-                  isCPMAmount
-                />
-              )
-            }
-          />
-          {/* TODO: Add data for it */}
-          <CampaignDetailsRow
-            title="Created"
-            value={formatDateTime(new Date(Number(item?.created)))}
-          />
-
-          {/* TODO: Add data for it */}
-          <CampaignDetailsRow
-            title="Starts"
-            value={formatDateTime(new Date(Number(item?.activeFrom)))}
-          />
-          {/* TODO: Add data for it */}
-          <CampaignDetailsRow
-            title="Ends"
-            value={formatDateTime(new Date(Number(item?.activeTo)))}
-          />
-          {/* TODO: Add data for it */}
-          {/* <CampaignDetailsRow title="CPM/CPC min" value="CPM/CPC" /> */}
-          {/* TODO: Add data for it */}
-
-          <CampaignDetailsRow
-            lineHeight="sm"
-            textSize="sm"
-            title="Limit average daily spending"
-            value={item?.targetingInput.inputs.advanced.limitDailyAverageSpending ? 'Yes' : 'No'}
-          />
-          {/* TODO: Add data for it */}
-          <CampaignDetailsRow
-            lineHeight="sm"
-            textSize="sm"
-            title="Disable frequency capping"
-            value={item?.targetingInput.inputs.advanced.disableFrequencyCapping ? 'Yes' : 'No'}
-            noBorder
-          />
-          <CampaignDetailsRow title="Banners:" value={item?.adUnits.length} noBorder />
-          {item?.adUnits && item?.adUnits.length > 1 && (
-            <Flex justify="space-evenly">
-              <LeftArrowIcon onClick={() => handleBannerChange(-1)} />
-              {currBanner + 1}
-              <RightArrowIcon onClick={() => handleBannerChange(1)} />
-            </Flex>
-          )}
-          <CampaignDetailsRow title="Title:" value={item?.adUnits[currBanner].title} />
-          <CampaignDetailsRow
-            title="Target URL:"
-            value={item?.adUnits[currBanner]?.banner?.targetUrl}
-          />
-          <CampaignDetailsRow
-            title="Created on:"
-            value={formatDateTime(new Date(Number(item?.adUnits[currBanner].banner?.created)))}
-          />
-          <CampaignDetailsRow
-            title="Format:"
-            value={`h: ${item?.adUnits[currBanner].banner?.format.h}px, w: \n${item?.adUnits[currBanner].banner?.format.w}px`}
-          />
-          <CampaignDetailsRow
-            title="Image:"
-            value={
-              <Image
-                src={getMediaUrlWithProvider(
-                  item?.adUnits[currBanner].banner?.mediaUrl,
-                  IPFS_GATEWAY
-                )}
-              />
-            }
-            column
-          />
-          <Textarea
-            label="Required"
-            required
-            defaultValue={reason}
-            onChange={(e) => setReason(e.target.value)}
-            placeholder="Reason..."
-          />
-          <Flex gap="25px" justify="center" mt="15px">
-            <Button onClick={() => handleAction('approve')} color="green">
-              Approve
-            </Button>
-            <Button onClick={() => handleAction('reject')} color="red">
-              Reject
-            </Button>
-          </Flex>
-        </>
-      ) : (
-        <form onSubmit={handleSubmit}>
-          <Flex gap="25px" direction="column" justify="center" mt="15px">
-            <Text>{action === 3 ? 'Approve' : 'Reject'} reason:</Text>
-            <Text>{reason}</Text>
-            <Button type="submit">Confirm</Button>
-            <Button onClick={() => setFormed(false)} variant="subtle">
-              Cancel
-            </Button>
-          </Flex>
-        </form>
-      )}
-    </Modal>
-  )
-}
-
-export default AdminCampaignModal
diff --git a/src/components/common/Modals/CreativePreviewModal/CreativePreviewModal.tsx b/src/components/common/Modals/CreativePreviewModal/CreativePreviewModal.tsx
index 844febcd..29697caf 100644
--- a/src/components/common/Modals/CreativePreviewModal/CreativePreviewModal.tsx
+++ b/src/components/common/Modals/CreativePreviewModal/CreativePreviewModal.tsx
@@ -1,4 +1,4 @@
-import { Modal } from '@mantine/core'
+import { Modal, Flex, Text } from '@mantine/core'
 import { AdUnit } from 'adex-common'
 import Media from 'components/common/Media'
 
@@ -6,11 +6,13 @@ const CreativePreviewModal = ({
   hasCloseBtn,
   media,
   opened,
+  title,
   close
 }: {
   hasCloseBtn: boolean
   media: AdUnit
   opened: boolean
+  title?: string
   close: () => void
 }) => {
   return (
@@ -22,7 +24,11 @@ const CreativePreviewModal = ({
       withOverlay={hasCloseBtn}
       size="auto"
     >
-      <Media adUnit={media} width={media.banner?.format.w} height={media.banner?.format.h} />
+      <Flex direction="column" align="center" justify="center" gap="sm">
+        <Text>{title}</Text>
+        <Media adUnit={media} width={media.banner?.format.w} height={media.banner?.format.h} />
+        <Text>{media.banner?.mediaUrl}</Text>
+      </Flex>
     </Modal>
   )
 }
diff --git a/src/components/common/Modals/index.ts b/src/components/common/Modals/index.ts
index fb7e5a50..c61f8571 100644
--- a/src/components/common/Modals/index.ts
+++ b/src/components/common/Modals/index.ts
@@ -1,6 +1,5 @@
 import CreativePreviewModal from './CreativePreviewModal/CreativePreviewModal'
 import CampaignPeriodModal from './CampaignPeriodModal/CampaignPeriodModal'
-import AdminCampaignModal from './AdminCampaignModal/AdminCampaignModal'
 import LaunchCampaignModal from './LaunchCampaignModal/LaunchCampaignModal'
 import SuccessModal from './SuccessModal'
 import CustomConfirmModal from './CustomConfirmModal/CustomConfirmModal'
@@ -8,7 +7,6 @@ import CustomConfirmModal from './CustomConfirmModal/CustomConfirmModal'
 export {
   CreativePreviewModal,
   CampaignPeriodModal,
-  AdminCampaignModal,
   LaunchCampaignModal,
   SuccessModal,
   CustomConfirmModal

From cd8b3298efff0f52a91d6c6a23314fad56cabaf2 Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 1 Jul 2024 14:51:28 +0300
Subject: [PATCH 2/6] admin campaign details

---
 src/Router.tsx                         | 1 +
 src/components/Dashboard/Dashboard.tsx | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Router.tsx b/src/Router.tsx
index 1c54bb32..56f6cc97 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -86,6 +86,7 @@ export const router = createBrowserRouter(
         },
         { path: 'campaign-analytics/:id', element: <CampaignAnalytics /> },
         { path: 'campaign-details/:id', element: <CampaignDetails /> },
+        { path: 'campaign-details/admin/:id', element: <CampaignDetails isAdminPanel /> },
         {
           path: 'billing',
           element: <Billing />
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index afc1e1fb..31a3c005 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -158,9 +158,9 @@ const Dashboard = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
 
   const handlePreview = useCallback(
     (item: Campaign) => {
-      navigate(`/dashboard/campaign-details/${item.id}`)
+      navigate(`/dashboard/campaign-details/${isAdminPanel ? 'admin/' : ''}${item.id}`, {})
     },
-    [navigate]
+    [isAdminPanel, navigate]
   )
 
   const handleAnalytics = useCallback(

From 9e803a190b87a2e27be4ae9cf783c22e2bec7a09 Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 1 Jul 2024 15:41:43 +0300
Subject: [PATCH 3/6] admin actions - styles and throttled submit

---
 .../CampaignDetails/AdminActions.tsx          | 62 +++++++++++--------
 .../CampaignDetails/CampaignDetails.tsx       | 19 ++++--
 2 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/components/CampaignDetails/AdminActions.tsx b/src/components/CampaignDetails/AdminActions.tsx
index f824c3db..514b340a 100644
--- a/src/components/CampaignDetails/AdminActions.tsx
+++ b/src/components/CampaignDetails/AdminActions.tsx
@@ -1,60 +1,72 @@
+import { FormEvent, useCallback, useState, useMemo } from 'react'
 import { Button, Flex, Text, Textarea } from '@mantine/core'
-import { Campaign } from 'adex-common'
-
+import { Campaign, CampaignStatus } from 'adex-common'
+import throttle from 'lodash.throttle'
 import { useAdExApi } from 'hooks/useAdexServices'
-import { FormEvent, useState } from 'react'
 
 export const AdminActions = ({ item }: { item: Campaign | null }) => {
   const { adexServicesRequest } = useAdExApi()
-  const [reason, setReason] = useState('')
+  const [reason, setReason] = useState(item?.reviewMessage || '')
   const [action, setAction] = useState<null | number>(null)
   const [formed, setFormed] = useState(false)
 
+  const disabledBtns = item?.status !== CampaignStatus.inReview
+
   const handleAction = (status: string) => {
     if (!item?.id) return
     setAction(status === 'approve' ? 3 : 4)
     setFormed(true)
   }
 
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault()
-    if (!item?.id) return
-    adexServicesRequest('backend', {
-      route: `/dsp/admin/campaigns/${item.id}`,
-      method: 'PUT',
-      body: {
-        reviewStatus: action,
-        reviewMessage: reason
-      },
-      headers: {
-        'content-type': 'application/json'
-      }
-    }).catch(console.log)
-    setFormed(false)
-  }
+  const handleSubmit = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault()
+      if (!item?.id) return
+      adexServicesRequest('backend', {
+        route: `/dsp/admin/campaigns/${item.id}`,
+        method: 'PUT',
+        body: {
+          reviewStatus: action,
+          reviewMessage: reason
+        },
+        headers: {
+          'content-type': 'application/json'
+        }
+      }).catch(console.log)
+      setFormed(false)
+    },
+    [action, adexServicesRequest, item?.id, reason]
+  )
+
+  const throttledSbm = useMemo(
+    () => throttle(handleSubmit, 1000, { leading: true }),
+    [handleSubmit]
+  )
 
   return (
-    <Flex>
+    <Flex direction="column" justify="flex-start" align="stretch">
       {!formed ? (
         <>
           <Textarea
             label="Required"
             required
+            disabled={disabledBtns}
             defaultValue={reason}
             onChange={(e) => setReason(e.target.value)}
             placeholder="Reason..."
           />
-          <Flex gap="25px" justify="center" mt="15px">
-            <Button onClick={() => handleAction('approve')} color="green">
+          <Flex gap="25px" justify="flex-start" mt="15px">
+            <Button onClick={() => handleAction('approve')} color="green" disabled={disabledBtns}>
               Approve
             </Button>
-            <Button onClick={() => handleAction('reject')} color="red">
+
+            <Button onClick={() => handleAction('reject')} color="red" disabled={disabledBtns}>
               Reject
             </Button>
           </Flex>
         </>
       ) : (
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={throttledSbm}>
           <Flex gap="25px" direction="column" justify="center" mt="15px">
             <Text>{action === 3 ? 'Approve' : 'Reject'} reason:</Text>
             <Text>{reason}</Text>
diff --git a/src/components/CampaignDetails/CampaignDetails.tsx b/src/components/CampaignDetails/CampaignDetails.tsx
index a6871e5b..d0d14e5b 100644
--- a/src/components/CampaignDetails/CampaignDetails.tsx
+++ b/src/components/CampaignDetails/CampaignDetails.tsx
@@ -355,12 +355,19 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                 </Grid>
               </Grid.Col>
 
-              {isAdminPanel && campaign.status === CampaignStatus.inReview && (
-                <Grid>
-                  <Grid.Col>
-                    <AdminActions item={campaign} />
-                  </Grid.Col>
-                </Grid>
+              {isAdminPanel && (
+                <Grid.Col md={12} xl={6} pt="xl">
+                  <Grid>
+                    <Grid.Col span={12}>
+                      <Text weight="bold" size="xl" pb="sm" color="attention">
+                        Admin actions
+                      </Text>
+                    </Grid.Col>
+                    <Grid.Col>
+                      <AdminActions item={campaign} />
+                    </Grid.Col>
+                  </Grid>
+                </Grid.Col>
               )}
             </Grid>
           </Container>

From a34344d2564638323749b5948b1215b4bdee8122 Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 1 Jul 2024 16:05:53 +0300
Subject: [PATCH 4/6] update admin campaign details and actions

---
 .../CampaignDetails/AdminActions.tsx          | 30 +++++++++++++++----
 .../CampaignDetails/CampaignDetails.tsx       |  2 ++
 src/components/Dashboard/Dashboard.tsx        | 16 ++--------
 .../common/AdminBadge/AdminBadge.tsx          | 18 +++++++++++
 src/components/common/AdminBadge/index.ts     |  1 +
 5 files changed, 48 insertions(+), 19 deletions(-)
 create mode 100644 src/components/common/AdminBadge/AdminBadge.tsx
 create mode 100644 src/components/common/AdminBadge/index.ts

diff --git a/src/components/CampaignDetails/AdminActions.tsx b/src/components/CampaignDetails/AdminActions.tsx
index 514b340a..6d9ffceb 100644
--- a/src/components/CampaignDetails/AdminActions.tsx
+++ b/src/components/CampaignDetails/AdminActions.tsx
@@ -1,6 +1,6 @@
 import { FormEvent, useCallback, useState, useMemo } from 'react'
-import { Button, Flex, Text, Textarea } from '@mantine/core'
-import { Campaign, CampaignStatus } from 'adex-common'
+import { Button, Flex, Text, Textarea, Badge } from '@mantine/core'
+import { Campaign, CampaignStatus, ReviewStatus } from 'adex-common'
 import throttle from 'lodash.throttle'
 import { useAdExApi } from 'hooks/useAdexServices'
 
@@ -10,7 +10,7 @@ export const AdminActions = ({ item }: { item: Campaign | null }) => {
   const [action, setAction] = useState<null | number>(null)
   const [formed, setFormed] = useState(false)
 
-  const disabledBtns = item?.status !== CampaignStatus.inReview
+  const reviewed = item?.status !== CampaignStatus.inReview
 
   const handleAction = (status: string) => {
     if (!item?.id) return
@@ -43,24 +43,42 @@ export const AdminActions = ({ item }: { item: Campaign | null }) => {
     [handleSubmit]
   )
 
+  if (reviewed) {
+    return (
+      <Flex direction="column" justify="flex-start" align="stretch">
+        {item?.reviewStatus !== undefined && (
+          <Badge size="xl" mb="md" fullWidth>
+            {ReviewStatus[item.reviewStatus]}
+          </Badge>
+        )}
+        <Text color="secondaryText">Review msg:</Text>
+        <Text>{reason}</Text>
+      </Flex>
+    )
+  }
+
   return (
     <Flex direction="column" justify="flex-start" align="stretch">
+      {item?.reviewStatus !== undefined && (
+        <Badge size="xl" mb="md" fullWidth>
+          {ReviewStatus[item.reviewStatus]}
+        </Badge>
+      )}
       {!formed ? (
         <>
           <Textarea
             label="Required"
             required
-            disabled={disabledBtns}
             defaultValue={reason}
             onChange={(e) => setReason(e.target.value)}
             placeholder="Reason..."
           />
           <Flex gap="25px" justify="flex-start" mt="15px">
-            <Button onClick={() => handleAction('approve')} color="green" disabled={disabledBtns}>
+            <Button onClick={() => handleAction('approve')} color="green">
               Approve
             </Button>
 
-            <Button onClick={() => handleAction('reject')} color="red" disabled={disabledBtns}>
+            <Button onClick={() => handleAction('reject')} color="red">
               Reject
             </Button>
           </Flex>
diff --git a/src/components/CampaignDetails/CampaignDetails.tsx b/src/components/CampaignDetails/CampaignDetails.tsx
index d0d14e5b..a58e3db9 100644
--- a/src/components/CampaignDetails/CampaignDetails.tsx
+++ b/src/components/CampaignDetails/CampaignDetails.tsx
@@ -19,6 +19,7 @@ import EditIcon from 'resources/icons/Edit'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import useCustomNotifications from 'hooks/useCustomNotifications'
 import { CustomConfirmModal } from 'components/common/Modals'
+import { AdminBadge } from 'components/common/AdminBadge'
 import CatsLocsFormatted from './CatsLocsFormatted'
 import { AdminActions } from './AdminActions'
 
@@ -113,6 +114,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
       {campaign && (
         <>
           <Container fluid className={classes.wrapper}>
+            {isAdminPanel && <AdminBadge title="Admin Details" />}
             <Grid>
               <Grid.Col md={12} xl={6}>
                 <Text weight="bold" size="sm" pb="sm" className={classes.lighterColor}>
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index 31a3c005..275d4d1b 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -4,7 +4,7 @@ import {
   // CampaignType,
   EventType
 } from 'adex-common'
-import { Container, Flex, Text, Badge, Loader } from '@mantine/core'
+import { Container, Flex, Text, Loader } from '@mantine/core'
 import { useCallback, useEffect, useMemo } from 'react'
 import CustomTable from 'components/common/CustomTable'
 import { periodNumberToDate } from 'helpers'
@@ -13,7 +13,7 @@ import { useCampaignsData } from 'hooks/useCampaignsData'
 import { parseBigNumTokenAmountToDecimal } from 'helpers/balances'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import useCustomNotifications from 'hooks/useCustomNotifications'
-import UnderReviewIcon from 'resources/icons/UnderReview'
+import { AdminBadge } from 'components/common/AdminBadge'
 import BadgeStatusCampaign from './BadgeStatusCampaign'
 
 const campaignHeaders = [
@@ -225,17 +225,7 @@ const Dashboard = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
       <Flex direction="column" justify="start">
         <Flex justify="space-between" align="center">
           {isAdminPanel ? (
-            <Badge
-              variant="gradient"
-              gradient={{ from: 'violet', to: 'purple' }}
-              size="xl"
-              mb="md"
-              fullWidth
-              leftSection={<UnderReviewIcon size="13px" />}
-              rightSection={<UnderReviewIcon size="13px" />}
-            >
-              Admin Panel
-            </Badge>
+            <AdminBadge title="Admin Panel" />
           ) : (
             <Text size="sm" color="secondaryText" weight="bold" mb="md">
               All Campaigns
diff --git a/src/components/common/AdminBadge/AdminBadge.tsx b/src/components/common/AdminBadge/AdminBadge.tsx
new file mode 100644
index 00000000..cad99310
--- /dev/null
+++ b/src/components/common/AdminBadge/AdminBadge.tsx
@@ -0,0 +1,18 @@
+import { Badge } from '@mantine/core'
+import UnderReviewIcon from 'resources/icons/UnderReview'
+
+export const AdminBadge = ({ title = 'Admin' }: { title: string }) => {
+  return (
+    <Badge
+      variant="gradient"
+      gradient={{ from: 'violet', to: 'purple' }}
+      size="xl"
+      mb="md"
+      fullWidth
+      leftSection={<UnderReviewIcon size="13px" />}
+      rightSection={<UnderReviewIcon size="13px" />}
+    >
+      {title}
+    </Badge>
+  )
+}
diff --git a/src/components/common/AdminBadge/index.ts b/src/components/common/AdminBadge/index.ts
new file mode 100644
index 00000000..f460331b
--- /dev/null
+++ b/src/components/common/AdminBadge/index.ts
@@ -0,0 +1 @@
+export * from './AdminBadge'

From be47336e8d5cf102f03543cb3f97170aaf173862 Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 1 Jul 2024 17:10:28 +0300
Subject: [PATCH 5/6] tem fix: disable campaigns pause

---
 src/components/CampaignDetails/CampaignDetails.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CampaignDetails/CampaignDetails.tsx b/src/components/CampaignDetails/CampaignDetails.tsx
index a58e3db9..4ac2239c 100644
--- a/src/components/CampaignDetails/CampaignDetails.tsx
+++ b/src/components/CampaignDetails/CampaignDetails.tsx
@@ -12,7 +12,7 @@ import CampaignDetailsRow from 'components/common/CampainDetailsRow/CampaignDeta
 import { useCampaignsData } from 'hooks/useCampaignsData'
 import ActiveIcon from 'resources/icons/Active'
 import CampaignActionBtn from 'components/CampaignAnalytics/CampaignActionBtn'
-import StopIcon from 'resources/icons/Stop'
+// import StopIcon from 'resources/icons/Stop'
 import ArchivedIcon from 'resources/icons/Archived'
 import FormattedAmount from 'components/common/FormattedAmount/FormattedAmount'
 import EditIcon from 'resources/icons/Edit'
@@ -314,7 +314,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                           }
                         />
                       )}
-                      {campaign.status === CampaignStatus.active && (
+                      {/* {campaign.status === CampaignStatus.active && (
                         <CampaignActionBtn
                           text="Pause"
                           icon={<StopIcon size="13px" />}
@@ -323,7 +323,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                             changeCampaignStatus(CampaignStatus.paused, campaign.id)
                           }
                         />
-                      )}
+                      )} */}
                       {(campaign.status === CampaignStatus.paused ||
                         campaign.status === CampaignStatus.active) && (
                         <CampaignActionBtn

From 632ae1acdd982957885e74655c3b4a16f43239cf Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 1 Jul 2024 17:11:01 +0300
Subject: [PATCH 6/6] v0.69.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5a6ef430..8faf155a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "adex-interface",
-  "version": "0.69.6",
+  "version": "0.69.7",
   "private": true,
   "dependencies": {
     "@ambire/login-sdk-core": "^0.0.21",