From 78445cc3e8edbb74e139ba84ad51a3e5bb58aacb Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 16 Dec 2024 11:41:42 +0200
Subject: [PATCH 01/14] add dsp stats data, action and admin tab

---
 src/components/AdminPanel/AdminPanel.tsx   |  6 +++
 src/components/AdminPanel/DspStats.tsx     | 15 +++++++
 src/contexts/AdminContext/AdminContext.tsx | 46 +++++++++++++++++++++-
 src/types/dspStats.ts                      | 17 ++++++++
 4 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AdminPanel/DspStats.tsx
 create mode 100644 src/types/dspStats.ts

diff --git a/src/components/AdminPanel/AdminPanel.tsx b/src/components/AdminPanel/AdminPanel.tsx
index d31bf23f..b9f2c4fa 100644
--- a/src/components/AdminPanel/AdminPanel.tsx
+++ b/src/components/AdminPanel/AdminPanel.tsx
@@ -7,6 +7,7 @@ import Invoices from 'components/Billing/Invoices'
 import AdminAnalytics from './AdminAnalytics'
 import Accounts from './Accounts'
 import SSPsAnalytics from './SSPsAnalytics'
+import DspStats from './DspStats'
 // import { AccountDetails } from './AccountDetails'
 
 const AdminPanel = () => {
@@ -28,6 +29,7 @@ const AdminPanel = () => {
           <Tabs.Tab value="invoices">Invoices</Tabs.Tab>
           <Tabs.Tab value="validatorAnalytics">Validator Analytics</Tabs.Tab>
           <Tabs.Tab value="sspAnalytics">SSPs Analytics</Tabs.Tab>
+          <Tabs.Tab value="dspStats">DSP stats</Tabs.Tab>
           <Tabs.Tab value="accounts">Accounts</Tabs.Tab>
           <Tabs.Tab value="user-account" disabled>
             Account details
@@ -51,6 +53,10 @@ const AdminPanel = () => {
             <SSPsAnalytics />
           </Tabs.Panel>
 
+          <Tabs.Panel value="dspStats" pt="xs">
+            <DspStats />
+          </Tabs.Panel>
+
           <Tabs.Panel value="accounts" pt="xs">
             <Accounts />
           </Tabs.Panel>
diff --git a/src/components/AdminPanel/DspStats.tsx b/src/components/AdminPanel/DspStats.tsx
new file mode 100644
index 00000000..695184aa
--- /dev/null
+++ b/src/components/AdminPanel/DspStats.tsx
@@ -0,0 +1,15 @@
+import { Stack } from '@mantine/core'
+import useAdmin from 'hooks/useAdmin'
+import { useEffect } from 'react'
+
+const DspStats = () => {
+  const { dspStats, getDspStats } = useAdmin()
+
+  useEffect(() => {
+    getDspStats()
+  }, [])
+
+  return <Stack>{JSON.stringify(dspStats, null, 2)}</Stack>
+}
+
+export default DspStats
diff --git a/src/contexts/AdminContext/AdminContext.tsx b/src/contexts/AdminContext/AdminContext.tsx
index 1c7a0c7c..b5c5f977 100644
--- a/src/contexts/AdminContext/AdminContext.tsx
+++ b/src/contexts/AdminContext/AdminContext.tsx
@@ -2,10 +2,13 @@ import { createContext, FC, PropsWithChildren, useMemo, useState, useCallback }
 import { Account, AdminTransfer, AdminTransferType } from 'types'
 import { useAdExApi } from 'hooks/useAdexServices'
 import { removeOptionalEmptyStringProps } from 'helpers'
+import { DspStats } from 'types/dspStats'
 
 interface IAdminContext {
   accounts: Map<string, Account>
   getAllAccounts: () => void
+  dspStats: DspStats
+  getDspStats: () => void
   initialDataLoading: boolean
   makeTransfer: (
     values: AdminTransfer,
@@ -20,12 +23,25 @@ interface IAdminContext {
   ) => Promise<void>
 }
 
+const dspStatsDefault = {
+  totalRequests: 0,
+  ortbRequests: 0,
+  throttledRequests: 0,
+  ortbRequestsPerSecond: 0,
+  throttledRequestsPerSecond: 0,
+  bidRequestsWithNoBids: 0,
+  bidRequestsBidsInTime: 0,
+  bidRequestsWithBidsLate: 0,
+  ssp: []
+}
+
 const AdminContext = createContext<IAdminContext | null>(null)
 
 const AdminProvider: FC<PropsWithChildren> = ({ children }) => {
   const { adexServicesRequest } = useAdExApi()
   const [initialDataLoading, setLoading] = useState(true)
   const [accounts, setAccounts] = useState<Map<string, Account>>(new Map<string, Account>())
+  const [dspStats, setDspStats] = useState<DspStats>(dspStatsDefault)
 
   const getAllAccounts = useCallback(async () => {
     try {
@@ -131,15 +147,43 @@ const AdminProvider: FC<PropsWithChildren> = ({ children }) => {
     [adexServicesRequest]
   )
 
+  const getDspStats = useCallback(async () => {
+    try {
+      const res = await adexServicesRequest<DspStats>('backend', {
+        route: '/dsp/admin/sysinfo',
+        method: 'GET',
+        headers: {
+          'content-type': 'application/json'
+        }
+      })
+
+      if (res) {
+        setDspStats(res)
+      }
+    } catch (err) {
+      console.log({ err })
+    }
+  }, [adexServicesRequest])
+
   const contextValue = useMemo(
     () => ({
       accounts,
       getAllAccounts,
+      getDspStats,
+      dspStats,
       initialDataLoading,
       makeTransfer,
       updateAccountInfo
     }),
-    [accounts, initialDataLoading, makeTransfer, getAllAccounts, updateAccountInfo]
+    [
+      accounts,
+      getAllAccounts,
+      getDspStats,
+      dspStats,
+      initialDataLoading,
+      makeTransfer,
+      updateAccountInfo
+    ]
   )
 
   return <AdminContext.Provider value={contextValue}>{children}</AdminContext.Provider>
diff --git a/src/types/dspStats.ts b/src/types/dspStats.ts
new file mode 100644
index 00000000..1a7bfa9e
--- /dev/null
+++ b/src/types/dspStats.ts
@@ -0,0 +1,17 @@
+export type SSPQPSStats = {
+  name: string
+  qpsConfig?: number
+  qpsCurrent: number
+  qpsDropped: number
+}
+export type DspStats = {
+  totalRequests: number
+  ortbRequests: number
+  throttledRequests: number
+  ortbRequestsPerSecond: number
+  throttledRequestsPerSecond: number
+  bidRequestsWithNoBids: number
+  bidRequestsBidsInTime: number
+  bidRequestsWithBidsLate: number
+  ssp: SSPQPSStats[]
+}

From c68c9e155a16b10fd120424a076f39d0ee46bf5d Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 16 Dec 2024 12:02:22 +0200
Subject: [PATCH 02/14] rename campaign details row to details row

---
 .../CreateCampaign/CampaignSummary.tsx        | 40 ++++++-------------
 .../CreateCampaign/StepFour/StepFour.tsx      |  4 +-
 .../common/CampainDetailsRow/index.ts         |  3 --
 .../DetailsRow.tsx}                           |  8 ++--
 src/components/common/DetailsRow/index.ts     |  3 ++
 5 files changed, 22 insertions(+), 36 deletions(-)
 delete mode 100644 src/components/common/CampainDetailsRow/index.ts
 rename src/components/common/{CampainDetailsRow/CampaignDetailsRow.tsx => DetailsRow/DetailsRow.tsx} (86%)
 create mode 100644 src/components/common/DetailsRow/index.ts

diff --git a/src/components/CreateCampaign/CampaignSummary.tsx b/src/components/CreateCampaign/CampaignSummary.tsx
index 92ec661a..2fcec032 100644
--- a/src/components/CreateCampaign/CampaignSummary.tsx
+++ b/src/components/CreateCampaign/CampaignSummary.tsx
@@ -3,7 +3,7 @@ import { Button, Group, Stack, Text } from '@mantine/core'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import LeftArrowIcon from 'resources/icons/LeftArrow'
 import useCreateCampaignData from 'hooks/useCreateCampaignData/useCreateCampaignData'
-import CampaignDetailsRow from 'components/common/CampainDetailsRow'
+import DetailsRow from 'components/common/DetailsRow'
 import { UtmInfo } from './CreateCampaignCommon'
 
 const CampaignSummary = ({ onLaunchClick }: { onLaunchClick: () => void }) => {
@@ -39,51 +39,41 @@ const CampaignSummary = ({ onLaunchClick }: { onLaunchClick: () => void }) => {
 
   return (
     <Stack gap="xs">
-      <CampaignDetailsRow
-        lighterColor
-        title="Budget"
-        value={campaignBudgetFormatted}
-        textSize="sm"
-      />
-      <CampaignDetailsRow lighterColor title="CPM" value={priceBoundsFormatted} textSize="sm" />
-      <CampaignDetailsRow
+      <DetailsRow lighterColor title="Budget" value={campaignBudgetFormatted} textSize="sm" />
+      <DetailsRow lighterColor title="CPM" value={priceBoundsFormatted} textSize="sm" />
+      <DetailsRow
         lighterColor
         title="Placement"
         value={placement === 'site' ? 'Website' : 'App'}
         textSize="sm"
       />
       {placement === 'site' && (
-        <CampaignDetailsRow
-          lighterColor
-          title="Device"
-          textSize="sm"
-          value={formattedSelectedDevice}
-        />
+        <DetailsRow lighterColor title="Device" textSize="sm" value={formattedSelectedDevice} />
       )}
-      <CampaignDetailsRow lighterColor title="Ad Format" value={adFormats} textSize="sm" />
-      <CampaignDetailsRow lighterColor title="Categories" value={formattedCats} textSize="sm" />
-      <CampaignDetailsRow lighterColor title="Countries" value={formattedLocs} textSize="sm" />
-      <CampaignDetailsRow
+      <DetailsRow lighterColor title="Ad Format" value={adFormats} textSize="sm" />
+      <DetailsRow lighterColor title="Categories" value={formattedCats} textSize="sm" />
+      <DetailsRow lighterColor title="Countries" value={formattedLocs} textSize="sm" />
+      <DetailsRow
         lighterColor
         title="Limit average daily spending"
         value={advancedTargeInput.limitDailyAverageSpending ? 'Yes' : 'No'}
         textSize="sm"
       />
-      <CampaignDetailsRow
+      <DetailsRow
         lighterColor
         title="Aggressive bidding"
         value={advancedTargeInput.aggressiveBidding ? 'Yes' : 'No'}
         textSize="sm"
       />
 
-      <CampaignDetailsRow
+      <DetailsRow
         lighterColor
         title="Loose source bidding"
         value={advancedTargeInput.looseSourceCTR ? 'Yes' : 'No'}
         textSize="sm"
       />
 
-      <CampaignDetailsRow
+      <DetailsRow
         lighterColor
         title="Auto UTM tracking"
         value={
@@ -98,11 +88,7 @@ const CampaignSummary = ({ onLaunchClick }: { onLaunchClick: () => void }) => {
         noBorder
         mb="xs"
       />
-      <CampaignDetailsRow
-        title="Estimated Impressions"
-        value={estimatedImpressions}
-        textSize="sm"
-      />
+      <DetailsRow title="Estimated Impressions" value={estimatedImpressions} textSize="sm" />
       <Stack align="stretch" justify="space-between" gap="sm" mt="xl" px="md">
         {step === 3 ? (
           <Button onClick={onLaunchClick} size="lg" variant="filled">
diff --git a/src/components/CreateCampaign/StepFour/StepFour.tsx b/src/components/CreateCampaign/StepFour/StepFour.tsx
index 47452912..3a50c9a7 100644
--- a/src/components/CreateCampaign/StepFour/StepFour.tsx
+++ b/src/components/CreateCampaign/StepFour/StepFour.tsx
@@ -1,5 +1,5 @@
 import { Paper, Stack } from '@mantine/core'
-import CampaignDetailsRow from 'components/common/CampainDetailsRow/CampaignDetailsRow'
+import DetailsRow from 'components/common/DetailsRow/DetailsRow'
 import useCreateCampaignData from 'hooks/useCreateCampaignData/useCreateCampaignData'
 import { useMemo } from 'react'
 import { CreateCampaignOverview } from 'types'
@@ -68,7 +68,7 @@ const StepFour = () => {
         const fullTitle = `${item.title}`
 
         return (
-          <CampaignDetailsRow
+          <DetailsRow
             key={fullTitle}
             lighterColor
             title={fullTitle}
diff --git a/src/components/common/CampainDetailsRow/index.ts b/src/components/common/CampainDetailsRow/index.ts
deleted file mode 100644
index 61ca631e..00000000
--- a/src/components/common/CampainDetailsRow/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import CampaignDetailsRow from './CampaignDetailsRow'
-
-export default CampaignDetailsRow
diff --git a/src/components/common/CampainDetailsRow/CampaignDetailsRow.tsx b/src/components/common/DetailsRow/DetailsRow.tsx
similarity index 86%
rename from src/components/common/CampainDetailsRow/CampaignDetailsRow.tsx
rename to src/components/common/DetailsRow/DetailsRow.tsx
index e341c396..812394f8 100644
--- a/src/components/common/CampainDetailsRow/CampaignDetailsRow.tsx
+++ b/src/components/common/DetailsRow/DetailsRow.tsx
@@ -1,6 +1,6 @@
 import { Divider, Flex, Text, FlexProps, MantineFontSize } from '@mantine/core'
 
-export type CampaignDetailsRowProps = FlexProps & {
+export type DetailsRowProps = FlexProps & {
   title: string
   value: any | undefined
   lighterColor?: boolean | undefined
@@ -9,7 +9,7 @@ export type CampaignDetailsRowProps = FlexProps & {
   column?: boolean
 }
 
-const CampaignDetailsRow = ({
+const DetailsRow = ({
   title,
   value,
   lighterColor,
@@ -17,7 +17,7 @@ const CampaignDetailsRow = ({
   noBorder = false,
   column = false,
   ...flexProps
-}: CampaignDetailsRowProps) => {
+}: DetailsRowProps) => {
   return (
     <>
       <Flex
@@ -44,4 +44,4 @@ const CampaignDetailsRow = ({
   )
 }
 
-export default CampaignDetailsRow
+export default DetailsRow
diff --git a/src/components/common/DetailsRow/index.ts b/src/components/common/DetailsRow/index.ts
new file mode 100644
index 00000000..043de36c
--- /dev/null
+++ b/src/components/common/DetailsRow/index.ts
@@ -0,0 +1,3 @@
+import DetailsRow from './DetailsRow'
+
+export default DetailsRow

From dfaabb7460cdee7a7f93e2ced1c132f4d008ce6d Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 16 Dec 2024 12:02:38 +0200
Subject: [PATCH 03/14] update dsp info

---
 src/components/AdminPanel/AdminPanel.tsx      |  2 +-
 src/components/AdminPanel/DspStats.tsx        | 63 ++++++++++++++++++-
 .../CampaignDetails/CampaignDetails.tsx       | 34 +++++-----
 3 files changed, 79 insertions(+), 20 deletions(-)

diff --git a/src/components/AdminPanel/AdminPanel.tsx b/src/components/AdminPanel/AdminPanel.tsx
index b9f2c4fa..6e1b2683 100644
--- a/src/components/AdminPanel/AdminPanel.tsx
+++ b/src/components/AdminPanel/AdminPanel.tsx
@@ -29,7 +29,7 @@ const AdminPanel = () => {
           <Tabs.Tab value="invoices">Invoices</Tabs.Tab>
           <Tabs.Tab value="validatorAnalytics">Validator Analytics</Tabs.Tab>
           <Tabs.Tab value="sspAnalytics">SSPs Analytics</Tabs.Tab>
-          <Tabs.Tab value="dspStats">DSP stats</Tabs.Tab>
+          <Tabs.Tab value="dspStats">DSP info</Tabs.Tab>
           <Tabs.Tab value="accounts">Accounts</Tabs.Tab>
           <Tabs.Tab value="user-account" disabled>
             Account details
diff --git a/src/components/AdminPanel/DspStats.tsx b/src/components/AdminPanel/DspStats.tsx
index 695184aa..18072a1b 100644
--- a/src/components/AdminPanel/DspStats.tsx
+++ b/src/components/AdminPanel/DspStats.tsx
@@ -1,4 +1,5 @@
-import { Stack } from '@mantine/core'
+import { NumberFormatter, Stack, Divider, Space } from '@mantine/core'
+import DetailsRow from 'components/common/DetailsRow'
 import useAdmin from 'hooks/useAdmin'
 import { useEffect } from 'react'
 
@@ -9,7 +10,65 @@ const DspStats = () => {
     getDspStats()
   }, [])
 
-  return <Stack>{JSON.stringify(dspStats, null, 2)}</Stack>
+  return (
+    <Stack maw={420} gap="xs">
+      <DetailsRow
+        title="Total ORTB requests"
+        value={<NumberFormatter thousandSeparator value={dspStats.ortbRequests} />}
+      />
+      <DetailsRow
+        title="Bid requests with no bids"
+        value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsWithNoBids} />}
+      />
+      <DetailsRow
+        title="Bid requests in time"
+        value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsBidsInTime} />}
+      />
+      <DetailsRow
+        title="Bid requests with late bids"
+        value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsWithBidsLate} />}
+      />
+      <DetailsRow
+        title="Total Bid requests per second"
+        value={<NumberFormatter thousandSeparator value={dspStats.ortbRequestsPerSecond} />}
+      />
+      <DetailsRow
+        title="Total requests"
+        value={<NumberFormatter thousandSeparator value={dspStats.totalRequests} />}
+      />
+      <DetailsRow
+        title="Throttled requests"
+        value={<NumberFormatter thousandSeparator value={dspStats.throttledRequests} />}
+      />
+      <DetailsRow
+        title="Throttled requests per second"
+        value={<NumberFormatter thousandSeparator value={dspStats.throttledRequestsPerSecond} />}
+      />
+      <Space />
+      {dspStats.ssp.map((ssp) => (
+        <Stack gap={0}>
+          <DetailsRow id={ssp.name} title="ssp" value={ssp.name} />
+          <DetailsRow
+            id={ssp.name}
+            title="qps cfg"
+            value={<NumberFormatter thousandSeparator value={ssp.qpsConfig} />}
+          />
+          <DetailsRow
+            id={ssp.name}
+            title="qps current"
+            value={<NumberFormatter thousandSeparator value={ssp.qpsCurrent} />}
+          />
+          <DetailsRow
+            id={ssp.name}
+            title="qps dropped"
+            value={<NumberFormatter thousandSeparator value={ssp.qpsDropped} />}
+            noBorder
+          />
+          <Divider size="xl" />
+        </Stack>
+      ))}
+    </Stack>
+  )
 }
 
 export default DspStats
diff --git a/src/components/CampaignDetails/CampaignDetails.tsx b/src/components/CampaignDetails/CampaignDetails.tsx
index 663e5fcb..6aee34fb 100644
--- a/src/components/CampaignDetails/CampaignDetails.tsx
+++ b/src/components/CampaignDetails/CampaignDetails.tsx
@@ -8,7 +8,7 @@ import { AdUnit, CampaignStatus } from 'adex-common/dist/types'
 import MediaThumb from 'components/common/MediaThumb'
 import { formatDateTime } from 'helpers/formatters'
 import GoBack from 'components/common/GoBack'
-import CampaignDetailsRow from 'components/common/CampainDetailsRow/CampaignDetailsRow'
+import DetailsRow from 'components/common/DetailsRow/DetailsRow'
 import { useCampaignsData } from 'hooks/useCampaignsData'
 import ActiveIcon from 'resources/icons/Active'
 import StopIcon from 'resources/icons/Stop'
@@ -275,7 +275,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                 <Paper bg="lightBackground" p="md" withBorder>
                   <Stack gap="xs">
                     {isAdminPanel && (
-                      <CampaignDetailsRow
+                      <DetailsRow
                         textSize="sm"
                         title="Owner"
                         value={
@@ -290,9 +290,9 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         }
                       />
                     )}
-                    <CampaignDetailsRow textSize="sm" title="Title" value={campaign?.title} />
-                    <CampaignDetailsRow textSize="sm" title="Id" value={campaign?.id} />
-                    <CampaignDetailsRow
+                    <DetailsRow textSize="sm" title="Title" value={campaign?.title} />
+                    <DetailsRow textSize="sm" title="Id" value={campaign?.id} />
+                    <DetailsRow
                       textSize="sm"
                       title="Status"
                       value={
@@ -304,14 +304,14 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                       }
                     />
                     {/* TODO: Add data for it */}
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Served"
                       // value={campaignData?.share}
                       value=""
                     />
                     {/* TODO: Add data for it */}
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Budget"
                       value={
@@ -323,11 +323,11 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         />
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       title="Created"
                       value={formatDateTime(new Date(Number(campaign.created)))}
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Starts"
                       value={
@@ -336,7 +336,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                           : 'N/A'
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Ends"
                       value={
@@ -345,7 +345,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                           : 'N/A'
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       title="CPM min"
                       value={
                         campaign.pricingBounds.IMPRESSION?.min && (
@@ -359,7 +359,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         )
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       title="CPM max"
                       value={
                         campaign.pricingBounds.IMPRESSION?.max && (
@@ -373,7 +373,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         )
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Limit average daily spending"
                       value={
@@ -382,19 +382,19 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                           : 'No'
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Aggressive bidding"
                       value={
                         campaign.targetingInput.inputs.advanced.aggressiveBidding ? 'Yes' : 'No'
                       }
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Loose source bidding"
                       value={campaign.targetingInput.inputs.advanced.looseSourceCTR ? 'Yes' : 'No'}
                     />
-                    <CampaignDetailsRow
+                    <DetailsRow
                       textSize="sm"
                       title="Last modified by"
                       noBorder
@@ -443,7 +443,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         {campaign.adUnits.map((item: AdUnit, index: number) => {
                           const isLast = index === campaign.adUnits.length - 1
                           return (
-                            <CampaignDetailsRow
+                            <DetailsRow
                               key={item.id}
                               textSize="sm"
                               title={`${item.banner?.format.w}x${item.banner?.format.h}`}

From b9c33d53c230b1d91b1d566dd3b52fadd9ba9d02 Mon Sep 17 00:00:00 2001
From: Ivo Paunov <ivo.paunov@gmail.com>
Date: Mon, 16 Dec 2024 12:03:34 +0200
Subject: [PATCH 04/14] v0.69.72

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

diff --git a/package.json b/package.json
index 8a72b6de..af40bfb3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "adex-interface",
-  "version": "0.69.71",
+  "version": "0.69.72",
   "private": true,
   "dependencies": {
     "@ambire/login-sdk-core": "^0.0.21",

From 8405b0e27297b4adf0aabe9649fd75485415f32b Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 16 Dec 2024 15:46:12 +0200
Subject: [PATCH 05/14] update common pkg

---
 package.json | 2 +-
 yarn.lock    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index af40bfb3..f735457e 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@visx/scale": "^3.3.0",
     "@visx/xychart": "^3.3.0",
     "@visx/zoom": "^3.3.0",
-    "adex-common": "github:AmbireTech/adex-common#eb2d0bd0c10ef2baed38391d59dec5055646bce4",
+    "adex-common": "github:AmbireTech/adex-common#119affb121179d181a9e4dc219121dc7a68cac04",
     "blockies-ts": "^1.0.0",
     "d3-geo": "^3.1.0",
     "dayjs": "^1.11.10",
diff --git a/yarn.lock b/yarn.lock
index 73a5b16e..2f35705b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3190,9 +3190,9 @@ address@^1.0.1, address@^1.1.2:
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
   integrity sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==
 
-"adex-common@github:AmbireTech/adex-common#eb2d0bd0c10ef2baed38391d59dec5055646bce4":
+"adex-common@github:AmbireTech/adex-common#119affb121179d181a9e4dc219121dc7a68cac04":
   version "1.0.1"
-  resolved "https://codeload.github.com/AmbireTech/adex-common/tar.gz/eb2d0bd0c10ef2baed38391d59dec5055646bce4"
+  resolved "https://codeload.github.com/AmbireTech/adex-common/tar.gz/119affb121179d181a9e4dc219121dc7a68cac04"
   dependencies:
     i18n-iso-countries "^7.11.0"
 

From 69fdd00b882b146790a341065a8d3c77a516006b Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 16 Dec 2024 15:46:29 +0200
Subject: [PATCH 06/14] wip: filter by ssp for admins on create

---
 src/components/AdminPanel/DspStats.tsx        |  3 +-
 .../CreateCampaign/CampaignSummary.tsx        |  5 ++++
 .../CreateCampaign/StepFour/StepFour.tsx      | 13 +++++----
 .../CreateCampaign/StepTwo/StepTwo.tsx        | 28 +++++++++++++++++--
 src/constants/createCampaign.ts               |  5 ++++
 .../CreateCampaignContext.tsx                 | 12 ++++++++
 .../useCreateCampaignData.tsx                 |  9 +++++-
 7 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/components/AdminPanel/DspStats.tsx b/src/components/AdminPanel/DspStats.tsx
index 18072a1b..16ff301d 100644
--- a/src/components/AdminPanel/DspStats.tsx
+++ b/src/components/AdminPanel/DspStats.tsx
@@ -2,6 +2,7 @@ import { NumberFormatter, Stack, Divider, Space } from '@mantine/core'
 import DetailsRow from 'components/common/DetailsRow'
 import useAdmin from 'hooks/useAdmin'
 import { useEffect } from 'react'
+import { SSPQPSStats } from 'types/dspStats'
 
 const DspStats = () => {
   const { dspStats, getDspStats } = useAdmin()
@@ -45,7 +46,7 @@ const DspStats = () => {
         value={<NumberFormatter thousandSeparator value={dspStats.throttledRequestsPerSecond} />}
       />
       <Space />
-      {dspStats.ssp.map((ssp) => (
+      {dspStats.ssp.map((ssp: SSPQPSStats) => (
         <Stack gap={0}>
           <DetailsRow id={ssp.name} title="ssp" value={ssp.name} />
           <DetailsRow
diff --git a/src/components/CreateCampaign/CampaignSummary.tsx b/src/components/CreateCampaign/CampaignSummary.tsx
index 2fcec032..6e7ec687 100644
--- a/src/components/CreateCampaign/CampaignSummary.tsx
+++ b/src/components/CreateCampaign/CampaignSummary.tsx
@@ -4,6 +4,7 @@ import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import LeftArrowIcon from 'resources/icons/LeftArrow'
 import useCreateCampaignData from 'hooks/useCreateCampaignData/useCreateCampaignData'
 import DetailsRow from 'components/common/DetailsRow'
+import useAccount from 'hooks/useAccount'
 import { UtmInfo } from './CreateCampaignCommon'
 
 const CampaignSummary = ({ onLaunchClick }: { onLaunchClick: () => void }) => {
@@ -29,12 +30,15 @@ const CampaignSummary = ({ onLaunchClick }: { onLaunchClick: () => void }) => {
     priceBoundsFormatted,
     formattedCats,
     formattedLocs,
+    formattedSSPs,
     adFormats,
     campaignBudgetFormatted,
     advancedTargeInput,
     estimatedImpressions
   } = useCreateCampaignData()
 
+  const { isAdmin } = useAccount()
+
   const loading = useMemo(() => !allowedBannerSizes.length, [allowedBannerSizes.length])
 
   return (
@@ -53,6 +57,7 @@ const CampaignSummary = ({ onLaunchClick }: { onLaunchClick: () => void }) => {
       <DetailsRow lighterColor title="Ad Format" value={adFormats} textSize="sm" />
       <DetailsRow lighterColor title="Categories" value={formattedCats} textSize="sm" />
       <DetailsRow lighterColor title="Countries" value={formattedLocs} textSize="sm" />
+      {isAdmin && <DetailsRow lighterColor title="SSPss" value={formattedSSPs} textSize="sm" />}
       <DetailsRow
         lighterColor
         title="Limit average daily spending"
diff --git a/src/components/CreateCampaign/StepFour/StepFour.tsx b/src/components/CreateCampaign/StepFour/StepFour.tsx
index 3a50c9a7..1d862ae6 100644
--- a/src/components/CreateCampaign/StepFour/StepFour.tsx
+++ b/src/components/CreateCampaign/StepFour/StepFour.tsx
@@ -16,7 +16,8 @@ const StepFour = () => {
     campaignNameFormatted,
     adUnitsFormatted,
     campaignPeriodFormatted,
-    formattedSelectedPlacement
+    formattedSelectedPlacement,
+    formattedSSPs
   } = useCreateCampaignData()
 
   const campaignOverview: CreateCampaignOverview[] = useMemo(
@@ -42,12 +43,16 @@ const StepFour = () => {
       { title: 'Ad Format', value: adFormats },
       { title: 'Creatives', value: adUnitsFormatted, isColumn: true },
       { title: 'Selected Categories', value: formattedCats },
-      { title: 'Selected Countries', value: formattedLocs }
+      { title: 'Selected Countries', value: formattedLocs },
+      ...(formattedSSPs ? [{ title: 'Selected SSPs', value: formattedSSPs }] : [])
     ],
     [
       campaignNameFormatted,
       campaignBudgetFormatted,
       priceBoundsFormatted,
+      advancedTargeInput.limitDailyAverageSpending,
+      advancedTargeInput.aggressiveBidding,
+      advancedTargeInput.looseSourceCTR,
       campaignPeriodFormatted,
       formattedSelectedPlacement,
       formattedSelectedDevice,
@@ -55,9 +60,7 @@ const StepFour = () => {
       adUnitsFormatted,
       formattedCats,
       formattedLocs,
-      advancedTargeInput.limitDailyAverageSpending,
-      advancedTargeInput.aggressiveBidding,
-      advancedTargeInput.looseSourceCTR
+      formattedSSPs
     ]
   )
 
diff --git a/src/components/CreateCampaign/StepTwo/StepTwo.tsx b/src/components/CreateCampaign/StepTwo/StepTwo.tsx
index 89719164..df018cd7 100644
--- a/src/components/CreateCampaign/StepTwo/StepTwo.tsx
+++ b/src/components/CreateCampaign/StepTwo/StepTwo.tsx
@@ -1,12 +1,14 @@
 import { Divider, Stack, Text } from '@mantine/core'
-import { CATEGORIES, CAT_GROUPS, COUNTRIES, REGION_GROUPS } from 'constants/createCampaign'
+import { CATEGORIES, CAT_GROUPS, COUNTRIES, REGION_GROUPS, SSPs } from 'constants/createCampaign'
 import { useCallback } from 'react'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import { TargetingInputApplyProp } from 'adex-common/dist/types'
+import useAccount from 'hooks/useAccount'
 import MultiSelectAndRadioButtons from './MultiSelectAndRadioButtons'
 
 const CATEGORIES_PATH = 'targetingInput.inputs.categories'
 const LOCATION_PATH = 'targetingInput.inputs.location'
+const SSPS_PATH = 'targetingInput.inputs.ssp'
 
 const StepTwo = () => {
   const {
@@ -16,13 +18,16 @@ const StepTwo = () => {
           location,
           categories,
           categories: { apply: categoriesRadioValue },
-          location: { apply: locationRadioValue }
+          location: { apply: locationRadioValue },
+          ssp
         }
       }
     },
     form: { setFieldValue, errors }
   } = useCreateCampaignContext()
 
+  const { isAdmin } = useAccount()
+
   const handleSelect = useCallback(
     (selectedRadio: TargetingInputApplyProp, values: string[], path: string) => {
       setFieldValue(path, {
@@ -65,6 +70,25 @@ const StepTwo = () => {
         label="Countries"
         error={errors[LOCATION_PATH]?.toString()}
       />
+      {isAdmin && (
+        <div>
+          <Divider m="xl" variant="dashed" mt="xl" />
+          <Text c="secondaryText" size="sm" fw="bold">
+            3. SSPs
+          </Text>
+          <MultiSelectAndRadioButtons
+            onCategoriesChange={(selectedRadio, values) =>
+              handleSelect(selectedRadio, values, SSPS_PATH)
+            }
+            groups={{}}
+            defaultRadioValue={ssp?.apply}
+            defaultSelectValue={ssp?.apply !== 'all' ? ssp?.[ssp.apply] : []}
+            multiSelectData={SSPs}
+            label="SSPs"
+            error={errors[SSPS_PATH]?.toString()}
+          />
+        </div>
+      )}
     </Stack>
   )
 }
diff --git a/src/constants/createCampaign.ts b/src/constants/createCampaign.ts
index 7d288055..5a9f1022 100644
--- a/src/constants/createCampaign.ts
+++ b/src/constants/createCampaign.ts
@@ -101,6 +101,11 @@ export const CREATE_CAMPAIGN_DEFAULT_VALUE: CampaignUI = {
 
 export const CATEGORIES: SelectData[] = parseCats()
 export const COUNTRIES: SelectData[] = parseLocs()
+export const SSPs: SelectData[] = [
+  { value: 'Qortex', label: 'Qortex' },
+  { value: 'Eskimi', label: 'Eskimi' },
+  { value: 'Epom', label: 'Epom' }
+]
 
 export const CAT_GROUPS = {
   Finance: ['IAB13', 'IAB13-7'],
diff --git a/src/contexts/CreateCampaignContext/CreateCampaignContext.tsx b/src/contexts/CreateCampaignContext/CreateCampaignContext.tsx
index ad3ffe9b..04e214a6 100644
--- a/src/contexts/CreateCampaignContext/CreateCampaignContext.tsx
+++ b/src/contexts/CreateCampaignContext/CreateCampaignContext.tsx
@@ -180,6 +180,18 @@ const CreateCampaignContextProvider: FC<PropsWithChildren> = ({ children }) => {
               }
             }
           },
+          ssp: (rule) => {
+            if (!rule) return
+            if (!isAdmin) return 'Invalid filter - available only for admins'
+            if (step === 1) {
+              if (rule.apply === 'in' && !rule.in.length) {
+                return 'Ssp list cannot be empty'
+              }
+              if (rule.apply === 'nin' && !rule.nin.length) {
+                return 'Ssp list cannot be empty'
+              }
+            }
+          },
           advanced: {
             limitDailyAverageSpending: (value) =>
               step === 2 && typeof value !== 'boolean' ? 'Invalid value' : undefined
diff --git a/src/hooks/useCreateCampaignData/useCreateCampaignData.tsx b/src/hooks/useCreateCampaignData/useCreateCampaignData.tsx
index 66790772..910a709b 100644
--- a/src/hooks/useCreateCampaignData/useCreateCampaignData.tsx
+++ b/src/hooks/useCreateCampaignData/useCreateCampaignData.tsx
@@ -5,7 +5,7 @@ import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import DesktopIcon from 'resources/icons/Desktop'
 import MobileIcon from 'resources/icons/Mobile'
 import { AdUnit } from 'adex-common/dist/types'
-import { CATEGORIES, COUNTRIES } from 'constants/createCampaign'
+import { CATEGORIES, COUNTRIES, SSPs } from 'constants/createCampaign'
 import ImageUrlInput from 'components/CreateCampaign/StepOne/ImageUrlInput'
 import RangeText from 'components/common/RangeText'
 import dayjs from 'dayjs'
@@ -20,6 +20,7 @@ const useCreateCampaignData = () => {
           advanced,
           location,
           categories,
+          ssp,
           placements: {
             in: [placement]
           }
@@ -104,6 +105,11 @@ const useCreateCampaignData = () => {
     [location]
   )
 
+  const formattedSSPs = useMemo(
+    () => ssp && <CatsLocsFormatted inputValues={ssp} selectData={SSPs} align="end" />,
+    [ssp]
+  )
+
   const sizes = useMemo(
     () => adUnits.map((adUnit: AdUnit) => `${adUnit.banner?.format.w}x${adUnit.banner?.format.h}`),
     [adUnits]
@@ -157,6 +163,7 @@ const useCreateCampaignData = () => {
     priceBoundsFormatted,
     formattedCats,
     formattedLocs,
+    formattedSSPs,
     adFormats,
     advancedTargeInput: advanced,
     campaignBudgetFormatted,

From 127da05849e7170f10254ef4720eda8e7a342e11 Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Tue, 17 Dec 2024 12:17:28 +0200
Subject: [PATCH 07/14] wip: edit campaign ssp filter

---
 src/components/EditCampaign/EditCampaign.tsx | 62 ++++++++++++++++++--
 1 file changed, 58 insertions(+), 4 deletions(-)

diff --git a/src/components/EditCampaign/EditCampaign.tsx b/src/components/EditCampaign/EditCampaign.tsx
index 99141bc3..b38cbf18 100644
--- a/src/components/EditCampaign/EditCampaign.tsx
+++ b/src/components/EditCampaign/EditCampaign.tsx
@@ -20,7 +20,7 @@ import {
   TargetingInputSingle
 } from 'adex-common'
 import MultiSelectAndRadioButtons from 'components/CreateCampaign/StepTwo/MultiSelectAndRadioButtons'
-import { CAT_GROUPS, CATEGORIES, COUNTRIES, REGION_GROUPS } from 'constants/createCampaign'
+import { CAT_GROUPS, CATEGORIES, COUNTRIES, REGION_GROUPS, SSPs } from 'constants/createCampaign'
 import { parseBigNumTokenAmountToDecimal, parseToBigNumPrecision } from 'helpers'
 
 import {
@@ -45,6 +45,7 @@ type TargetingInputEdit = {
     location: TargetingInputSingle
     categories: TargetingInputSingle
     advanced: AdvancedInputSingle
+    ssp?: TargetingInputSingle
   }
 }
 
@@ -58,6 +59,7 @@ type FormProps = {
 
 const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boolean }) => {
   const {
+    isAdmin: isAdminEdit,
     adexAccount: { balanceToken }
   } = useAccount()
   const { tabValue = 'budget' } = useParams()
@@ -134,6 +136,16 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo
             }
             return null
           },
+          ssp: (sspVal) => {
+            if (!sspVal) return 'Invalid ssp value'
+            if (sspVal.apply === 'in' && !sspVal.in.length) {
+              return 'SSP list cannot be empty'
+            }
+            if (sspVal.apply === 'nin' && !sspVal.nin.length) {
+              return 'SSP list cannot be empty'
+            }
+            return null
+          },
           advanced: {
             includeIncentivized: (value) => (typeof value !== 'boolean' ? 'Invalid value' : null),
             disableFrequencyCapping: (value) =>
@@ -186,6 +198,14 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo
     [campaign]
   )
 
+  const sspSelectedRadioAndValuesArray = useMemo(
+    () =>
+      campaign && campaign.targetingInput.inputs.ssp
+        ? findArrayWithLengthInObjectAsValue(campaign.targetingInput.inputs.ssp)
+        : [],
+    [campaign]
+  )
+
   const handleCategories = useCallback(
     (selectedRadio: TargetingInputApplyProp, categoriesValue: string[]) => {
       form.setFieldValue('targetingInput.inputs.categories', {
@@ -208,6 +228,17 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo
     [form]
   )
 
+  const handleSSps = useCallback(
+    (selectedRadio: TargetingInputApplyProp, sspValue: string[]) => {
+      form.setFieldValue('targetingInput.inputs.ssp', {
+        apply: selectedRadio,
+        in: selectedRadio === 'in' ? sspValue : [],
+        nin: selectedRadio === 'nin' ? sspValue : []
+      })
+    },
+    [form]
+  )
+
   const handleEditCampaign = useCallback(
     async (values: FormProps) => {
       const impression = {
@@ -406,7 +437,7 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo
                   Countries
                 </Text>
                 <MultiSelectAndRadioButtons
-                  onCategoriesChange={handleCountries}
+                  onCategoriesChange={handleSSps}
                   defaultRadioValue={
                     locSelectedRadioAndValuesArray &&
                     (locSelectedRadioAndValuesArray[0] as TargetingInputApplyProp)
@@ -417,11 +448,34 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo
                   }
                   multiSelectData={COUNTRIES}
                   groups={REGION_GROUPS}
-                  label="Countries"
-                  error={form.errors['targetingInput.inputs.location']?.toString()}
+                  label="SSPs"
+                  error={form.errors['targetingInput.inputs.ssp']?.toString()}
                 />
               </Stack>
 
+              {isAdminEdit && (
+                <Stack gap="xs">
+                  <Text c="secondaryText" size="sm" fw="bold">
+                    SSPs
+                  </Text>
+                  <MultiSelectAndRadioButtons
+                    onCategoriesChange={handleCountries}
+                    groups={{}}
+                    defaultRadioValue={
+                      sspSelectedRadioAndValuesArray &&
+                      (sspSelectedRadioAndValuesArray[0] as TargetingInputApplyProp)
+                    }
+                    defaultSelectValue={
+                      sspSelectedRadioAndValuesArray &&
+                      (sspSelectedRadioAndValuesArray[1] as string[])
+                    }
+                    multiSelectData={SSPs}
+                    label="SSPs"
+                    error={form.errors['targetingInput.inputs.ssp']?.toString()}
+                  />
+                </Stack>
+              )}
+
               <Button disabled={!form.isDirty()} size="lg" type="submit" maw={200}>
                 Save Changes
               </Button>

From 0605b0a94ef1b3848bb309650a58150eb1d2d7b0 Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Wed, 18 Dec 2024 12:31:37 +0200
Subject: [PATCH 08/14] update dsp stats

---
 src/components/AdminPanel/DspStats.tsx      | 91 ++++++++++++---------
 src/components/AdminPanel/SSPsAnalytics.tsx |  2 +-
 src/contexts/AdminContext/AdminContext.tsx  | 10 ++-
 src/types/dspStats.ts                       | 10 ++-
 4 files changed, 69 insertions(+), 44 deletions(-)

diff --git a/src/components/AdminPanel/DspStats.tsx b/src/components/AdminPanel/DspStats.tsx
index 16ff301d..3ad6fe17 100644
--- a/src/components/AdminPanel/DspStats.tsx
+++ b/src/components/AdminPanel/DspStats.tsx
@@ -1,18 +1,13 @@
-import { NumberFormatter, Stack, Divider, Space } from '@mantine/core'
+import { NumberFormatter, Stack, SimpleGrid, Fieldset } from '@mantine/core'
+import CustomTable from 'components/common/CustomTable'
 import DetailsRow from 'components/common/DetailsRow'
 import useAdmin from 'hooks/useAdmin'
 import { useEffect } from 'react'
-import { SSPQPSStats } from 'types/dspStats'
-
-const DspStats = () => {
-  const { dspStats, getDspStats } = useAdmin()
-
-  useEffect(() => {
-    getDspStats()
-  }, [])
+import { BaseDSPStats, SSPQPSStats } from 'types/dspStats'
 
+const BaseStats = ({ dspStats }: { dspStats: BaseDSPStats }) => {
   return (
-    <Stack maw={420} gap="xs">
+    <Stack gap="xs">
       <DetailsRow
         title="Total ORTB requests"
         value={<NumberFormatter thousandSeparator value={dspStats.ortbRequests} />}
@@ -25,14 +20,7 @@ const DspStats = () => {
         title="Bid requests in time"
         value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsBidsInTime} />}
       />
-      <DetailsRow
-        title="Bid requests with late bids"
-        value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsWithBidsLate} />}
-      />
-      <DetailsRow
-        title="Total Bid requests per second"
-        value={<NumberFormatter thousandSeparator value={dspStats.ortbRequestsPerSecond} />}
-      />
+
       <DetailsRow
         title="Total requests"
         value={<NumberFormatter thousandSeparator value={dspStats.totalRequests} />}
@@ -42,33 +30,58 @@ const DspStats = () => {
         value={<NumberFormatter thousandSeparator value={dspStats.throttledRequests} />}
       />
       <DetailsRow
-        title="Throttled requests per second"
-        value={<NumberFormatter thousandSeparator value={dspStats.throttledRequestsPerSecond} />}
+        title="Bid requests with late bids"
+        value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsWithBidsLate} />}
       />
-      <Space />
-      {dspStats.ssp.map((ssp: SSPQPSStats) => (
-        <Stack gap={0}>
-          <DetailsRow id={ssp.name} title="ssp" value={ssp.name} />
-          <DetailsRow
-            id={ssp.name}
-            title="qps cfg"
-            value={<NumberFormatter thousandSeparator value={ssp.qpsConfig} />}
-          />
+    </Stack>
+  )
+}
+
+const DspStats = () => {
+  const { dspStats, getDspStats } = useAdmin()
+
+  useEffect(() => {
+    getDspStats()
+  }, [])
+
+  return (
+    <SimpleGrid cols={{ md: 1, xl: 2 }} spacing="xl">
+      <Fieldset p="lg" legend="Totals">
+        <BaseStats dspStats={dspStats} />
+      </Fieldset>
+
+      <Fieldset p="lg" legend="Past 24h">
+        {dspStats.last24h && <BaseStats dspStats={dspStats.last24h} />}
+      </Fieldset>
+      <Fieldset p="lg" legend="Current">
+        <Stack gap="xs">
           <DetailsRow
-            id={ssp.name}
-            title="qps current"
-            value={<NumberFormatter thousandSeparator value={ssp.qpsCurrent} />}
+            title="Total Bid requests per second"
+            value={<NumberFormatter thousandSeparator value={dspStats.ortbRequestsPerSecond} />}
           />
           <DetailsRow
-            id={ssp.name}
-            title="qps dropped"
-            value={<NumberFormatter thousandSeparator value={ssp.qpsDropped} />}
-            noBorder
+            title="Throttled requests per second"
+            value={
+              <NumberFormatter thousandSeparator value={dspStats.throttledRequestsPerSecond} />
+            }
           />
-          <Divider size="xl" />
         </Stack>
-      ))}
-    </Stack>
+      </Fieldset>
+      <Fieldset p="lg" legend="SSPs (per second)">
+        <CustomTable
+          headings={['SSP', 'cfg QPS', 'current QPS', 'current dropped']}
+          data={dspStats.ssp.map((ssp: SSPQPSStats) => ({
+            id: ssp.name,
+            columns: [
+              { value: ssp.name },
+              { value: ssp.qpsConfig },
+              { value: ssp.qpsCurrent },
+              { value: ssp.qpsDropped }
+            ]
+          }))}
+        />
+      </Fieldset>
+    </SimpleGrid>
   )
 }
 
diff --git a/src/components/AdminPanel/SSPsAnalytics.tsx b/src/components/AdminPanel/SSPsAnalytics.tsx
index 27b4bb15..c2a39f10 100644
--- a/src/components/AdminPanel/SSPsAnalytics.tsx
+++ b/src/components/AdminPanel/SSPsAnalytics.tsx
@@ -248,7 +248,7 @@ const SSPsAnalytics = ({
               size="sm"
             />
           </SimpleGrid>
-          <SimpleGrid cols={{ md: 1, xl: 2 }} spacing="xl" mt="xl">
+          <SimpleGrid cols={{ base: 1, xl: 2 }} spacing="xl" mt="xl">
             <Stack>
               <Divider
                 labelPosition="left"
diff --git a/src/contexts/AdminContext/AdminContext.tsx b/src/contexts/AdminContext/AdminContext.tsx
index b5c5f977..92bafb1e 100644
--- a/src/contexts/AdminContext/AdminContext.tsx
+++ b/src/contexts/AdminContext/AdminContext.tsx
@@ -23,7 +23,7 @@ interface IAdminContext {
   ) => Promise<void>
 }
 
-const dspStatsDefault = {
+const dspStatsDefault: DspStats = {
   totalRequests: 0,
   ortbRequests: 0,
   throttledRequests: 0,
@@ -32,6 +32,14 @@ const dspStatsDefault = {
   bidRequestsWithNoBids: 0,
   bidRequestsBidsInTime: 0,
   bidRequestsWithBidsLate: 0,
+  last24h: {
+    totalRequests: 0,
+    ortbRequests: 0,
+    throttledRequests: 0,
+    bidRequestsWithNoBids: 0,
+    bidRequestsBidsInTime: 0,
+    bidRequestsWithBidsLate: 0
+  },
   ssp: []
 }
 
diff --git a/src/types/dspStats.ts b/src/types/dspStats.ts
index 1a7bfa9e..f2be0fc5 100644
--- a/src/types/dspStats.ts
+++ b/src/types/dspStats.ts
@@ -4,14 +4,18 @@ export type SSPQPSStats = {
   qpsCurrent: number
   qpsDropped: number
 }
-export type DspStats = {
+
+export type BaseDSPStats = {
   totalRequests: number
   ortbRequests: number
   throttledRequests: number
-  ortbRequestsPerSecond: number
-  throttledRequestsPerSecond: number
   bidRequestsWithNoBids: number
   bidRequestsBidsInTime: number
   bidRequestsWithBidsLate: number
+}
+export type DspStats = BaseDSPStats & {
+  ortbRequestsPerSecond: number
+  throttledRequestsPerSecond: number
+  last24h: BaseDSPStats
   ssp: SSPQPSStats[]
 }

From 6b5e667caeebfca9dd337c420f29605c01621b65 Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Wed, 18 Dec 2024 16:20:11 +0200
Subject: [PATCH 09/14] update dsp info data

---
 src/components/AdminPanel/DspStats.tsx | 56 ++++++++++++++++++++------
 1 file changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/components/AdminPanel/DspStats.tsx b/src/components/AdminPanel/DspStats.tsx
index 3ad6fe17..3970cb94 100644
--- a/src/components/AdminPanel/DspStats.tsx
+++ b/src/components/AdminPanel/DspStats.tsx
@@ -5,33 +5,65 @@ import useAdmin from 'hooks/useAdmin'
 import { useEffect } from 'react'
 import { BaseDSPStats, SSPQPSStats } from 'types/dspStats'
 
+const getPercent = (total: number, part: number): string => {
+  return ` (${((part / total) * 100).toFixed(2)}%) `
+}
+
 const BaseStats = ({ dspStats }: { dspStats: BaseDSPStats }) => {
   return (
     <Stack gap="xs">
       <DetailsRow
-        title="Total ORTB requests"
-        value={<NumberFormatter thousandSeparator value={dspStats.ortbRequests} />}
+        title="Total requests (any kind)"
+        value={<NumberFormatter thousandSeparator value={dspStats.totalRequests} />}
       />
+
       <DetailsRow
-        title="Bid requests with no bids"
-        value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsWithNoBids} />}
+        title="Bid requests - total"
+        value={
+          <div>
+            {getPercent(dspStats.totalRequests, dspStats.ortbRequests)}
+            <NumberFormatter thousandSeparator value={dspStats.ortbRequests} />
+          </div>
+        }
       />
+
       <DetailsRow
-        title="Bid requests in time"
-        value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsBidsInTime} />}
+        title="Bid requests - throttled"
+        value={
+          <div>
+            {getPercent(dspStats.ortbRequests, dspStats.throttledRequests)}
+            <NumberFormatter thousandSeparator value={dspStats.throttledRequests} />
+          </div>
+        }
       />
 
       <DetailsRow
-        title="Total requests"
-        value={<NumberFormatter thousandSeparator value={dspStats.totalRequests} />}
+        title="Bid requests - no bids"
+        value={
+          <div>
+            {getPercent(dspStats.ortbRequests, dspStats.bidRequestsWithNoBids)}
+            <NumberFormatter thousandSeparator value={dspStats.bidRequestsWithNoBids} />
+          </div>
+        }
       />
       <DetailsRow
-        title="Throttled requests"
-        value={<NumberFormatter thousandSeparator value={dspStats.throttledRequests} />}
+        title="Bid requests - in time response"
+        value={
+          <div>
+            {getPercent(dspStats.ortbRequests, dspStats.bidRequestsBidsInTime)}
+            <NumberFormatter thousandSeparator value={dspStats.bidRequestsBidsInTime} />
+          </div>
+        }
       />
+
       <DetailsRow
-        title="Bid requests with late bids"
-        value={<NumberFormatter thousandSeparator value={dspStats.bidRequestsWithBidsLate} />}
+        title="Bid requests - NOT in time response"
+        value={
+          <div>
+            {getPercent(dspStats.ortbRequests, dspStats.bidRequestsWithBidsLate)}
+            <NumberFormatter thousandSeparator value={dspStats.bidRequestsWithBidsLate} />
+          </div>
+        }
       />
     </Stack>
   )

From 139bc463c70e71d028b06d61096ff33fadc90db4 Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Thu, 19 Dec 2024 15:46:32 +0200
Subject: [PATCH 10/14] fix editing campaigns ssp filter

---
 src/components/EditCampaign/EditCampaign.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/EditCampaign/EditCampaign.tsx b/src/components/EditCampaign/EditCampaign.tsx
index b38cbf18..4e088b8b 100644
--- a/src/components/EditCampaign/EditCampaign.tsx
+++ b/src/components/EditCampaign/EditCampaign.tsx
@@ -437,7 +437,7 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo
                   Countries
                 </Text>
                 <MultiSelectAndRadioButtons
-                  onCategoriesChange={handleSSps}
+                  onCategoriesChange={handleCountries}
                   defaultRadioValue={
                     locSelectedRadioAndValuesArray &&
                     (locSelectedRadioAndValuesArray[0] as TargetingInputApplyProp)
@@ -448,8 +448,8 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo
                   }
                   multiSelectData={COUNTRIES}
                   groups={REGION_GROUPS}
-                  label="SSPs"
-                  error={form.errors['targetingInput.inputs.ssp']?.toString()}
+                  label="Countries"
+                  error={form.errors['targetingInput.inputs.location']?.toString()}
                 />
               </Stack>
 
@@ -459,7 +459,7 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo
                     SSPs
                   </Text>
                   <MultiSelectAndRadioButtons
-                    onCategoriesChange={handleCountries}
+                    onCategoriesChange={handleSSps}
                     groups={{}}
                     defaultRadioValue={
                       sspSelectedRadioAndValuesArray &&

From fb5e4234547f8701fb06b47579ef88af3e5d37ef Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Fri, 27 Dec 2024 15:21:35 +0200
Subject: [PATCH 11/14] fix cmp ssp targeting edit

---
 src/components/EditCampaign/EditCampaign.tsx           | 1 +
 src/contexts/CampaignsContext/CampaignsDataContext.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/EditCampaign/EditCampaign.tsx b/src/components/EditCampaign/EditCampaign.tsx
index 4e088b8b..f2dc50e2 100644
--- a/src/components/EditCampaign/EditCampaign.tsx
+++ b/src/components/EditCampaign/EditCampaign.tsx
@@ -258,6 +258,7 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo
       const inputs: Partial<Campaign['targetingInput']['inputs']> = {
         categories: values.targetingInput.inputs.categories,
         location: values.targetingInput.inputs.location,
+        ssp: values.targetingInput.inputs.ssp,
         advanced: values.targetingInput.inputs.advanced
       }
 
diff --git a/src/contexts/CampaignsContext/CampaignsDataContext.tsx b/src/contexts/CampaignsContext/CampaignsDataContext.tsx
index 68c3de2b..9b706210 100644
--- a/src/contexts/CampaignsContext/CampaignsDataContext.tsx
+++ b/src/contexts/CampaignsContext/CampaignsDataContext.tsx
@@ -350,6 +350,7 @@ const CampaignsDataProvider: FC<PropsWithChildren & { type: 'user' | 'admin' }>
             ...(inputs?.categories && {
               categories: inputs.categories
             }),
+            ...(inputs?.ssp && { ssp: inputs.ssp }),
             ...(inputs?.publishers && {
               publishers: inputs.publishers
             }),

From aad563254a5e9825e51cbe5d485c85d7aa3b88c3 Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Fri, 27 Dec 2024 15:21:53 +0200
Subject: [PATCH 12/14] show ssp targeting n cmp details

---
 src/components/CampaignDetails/CampaignDetails.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/CampaignDetails/CampaignDetails.tsx b/src/components/CampaignDetails/CampaignDetails.tsx
index 6aee34fb..a161ca32 100644
--- a/src/components/CampaignDetails/CampaignDetails.tsx
+++ b/src/components/CampaignDetails/CampaignDetails.tsx
@@ -3,7 +3,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { Grid, Text, Button, Paper, Stack, Group, Divider, Box, Anchor } from '@mantine/core'
 import { modals } from '@mantine/modals'
 import BadgeStatusCampaign from 'components/Dashboard/BadgeStatusCampaign'
-import { CATEGORIES, COUNTRIES } from 'constants/createCampaign'
+import { CATEGORIES, COUNTRIES, SSPs } from 'constants/createCampaign'
 import { AdUnit, CampaignStatus } from 'adex-common/dist/types'
 import MediaThumb from 'components/common/MediaThumb'
 import { formatDateTime } from 'helpers/formatters'
@@ -430,6 +430,13 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                         inputValues={campaign.targetingInput.inputs.location}
                         selectData={COUNTRIES}
                       />
+                      {campaign.targetingInput.inputs.ssp && (
+                        <CatsLocsFormatted
+                          title="Selected SSPs"
+                          inputValues={campaign.targetingInput.inputs.ssp}
+                          selectData={SSPs}
+                        />
+                      )}
                     </Stack>
                   </Paper>
                 </Stack>

From f99db09df0abfe5248668c828197a588ca0a8578 Mon Sep 17 00:00:00 2001
From: Ivo Paunov <ivo.paunov@gmail.com>
Date: Fri, 27 Dec 2024 15:27:13 +0200
Subject: [PATCH 13/14] v0.69.73

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

diff --git a/package.json b/package.json
index f735457e..a7c54108 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "adex-interface",
-  "version": "0.69.72",
+  "version": "0.69.73",
   "private": true,
   "dependencies": {
     "@ambire/login-sdk-core": "^0.0.21",

From 2b52e388c87166b2ff1c44e1a1c2db24657f131a Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Fri, 27 Dec 2024 15:36:40 +0200
Subject: [PATCH 14/14] fix dsp stats

---
 src/components/AdminPanel/DspStats.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AdminPanel/DspStats.tsx b/src/components/AdminPanel/DspStats.tsx
index 3970cb94..89453014 100644
--- a/src/components/AdminPanel/DspStats.tsx
+++ b/src/components/AdminPanel/DspStats.tsx
@@ -74,7 +74,7 @@ const DspStats = () => {
 
   useEffect(() => {
     getDspStats()
-  }, [])
+  }, [getDspStats])
 
   return (
     <SimpleGrid cols={{ md: 1, xl: 2 }} spacing="xl">