From f2927098ac942c186fa1bb51942a1277623dea83 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 20:18:58 +0100
Subject: [PATCH 1/5] feat: update version to 0.1.1, upgrade @ciphera-net/ui to
 0.0.43, and enhance Campaigns component with URL builder modal

---
 app/layout-content.tsx             |  11 +-
 app/tools/page.tsx                 |  15 +++
 components/dashboard/Campaigns.tsx |  32 +++++-
 components/tools/UtmBuilder.tsx    | 170 +++++++++++++++++++++++++++++
 package-lock.json                  |  12 +-
 package.json                       |   4 +-
 6 files changed, 230 insertions(+), 14 deletions(-)
 create mode 100644 app/tools/page.tsx
 create mode 100644 components/tools/UtmBuilder.tsx

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index f279464..625d159 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { OfflineBanner } from '@/components/OfflineBanner'
-import { Header, Footer } from '@ciphera-net/ui'
+import { Header, Footer, GridIcon } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { useOnlineStatus } from '@/lib/hooks/useOnlineStatus'
 import Link from 'next/link'
@@ -62,6 +62,15 @@ export default function LayoutContent({ children }: { children: React.ReactNode
         showSecurity={false}
         showPricing={true}
         topOffset={showOfflineBar ? `${barHeightRem}rem` : undefined}
+        userMenuCustomItems={
+          <Link
+            href="/tools"
+            className="group flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
+          >
+            <GridIcon className="h-4 w-4 text-neutral-500 group-hover:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-white" />
+            Tools
+          </Link>
+        }
       />
       <main
         className={`flex-1 pb-8 ${showOfflineBar ? '' : 'pt-24'}`}
diff --git a/app/tools/page.tsx b/app/tools/page.tsx
new file mode 100644
index 0000000..ddb51fa
--- /dev/null
+++ b/app/tools/page.tsx
@@ -0,0 +1,15 @@
+'use client'
+
+import UtmBuilder from '@/components/tools/UtmBuilder'
+
+export default function ToolsPage() {
+  return (
+    <div className="max-w-2xl mx-auto py-10 px-4">
+      <h1 className="text-2xl font-bold mb-6 text-neutral-900 dark:text-white">Tools</h1>
+      <div className="bg-white dark:bg-neutral-900 p-6 rounded-xl border border-neutral-200 dark:border-neutral-800">
+        <h2 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">UTM Campaign Builder</h2>
+        <UtmBuilder />
+      </div>
+    </div>
+  )
+}
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 580466f..97dd753 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -6,6 +6,8 @@ import { formatNumber } from '@/lib/utils/format'
 import { Modal, ArrowRightIcon } from '@ciphera-net/ui'
 import { getCampaigns, CampaignStat } from '@/lib/api/stats'
 import { FaBullhorn } from 'react-icons/fa'
+import { PlusIcon } from '@radix-ui/react-icons'
+import UtmBuilder from '@/components/tools/UtmBuilder'
 
 interface CampaignsProps {
   siteId: string
@@ -18,6 +20,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
   const [data, setData] = useState<CampaignStat[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isBuilderOpen, setIsBuilderOpen] = useState(false)
   const [fullData, setFullData] = useState<CampaignStat[]>([])
   const [isLoadingFull, setIsLoadingFull] = useState(false)
 
@@ -67,14 +70,23 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
           <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
             Campaigns
           </h3>
-          {showViewAll && (
+          <div className="flex items-center gap-3">
             <button
-              onClick={() => setIsModalOpen(true)}
-              className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
+              onClick={() => setIsBuilderOpen(true)}
+              className="flex items-center gap-1.5 text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
             >
-              View All
+              <PlusIcon className="w-3.5 h-3.5" />
+              Build URL
             </button>
-          )}
+            {showViewAll && (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
+              >
+                View All
+              </button>
+            )}
+          </div>
         </div>
 
         {isLoading ? (
@@ -167,6 +179,16 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
           )}
         </div>
       </Modal>
+
+      <Modal
+        isOpen={isBuilderOpen}
+        onClose={() => setIsBuilderOpen(false)}
+        title="Campaign URL Builder"
+      >
+        <div className="p-1">
+          <UtmBuilder initialSiteId={siteId} />
+        </div>
+      </Modal>
     </>
   )
 }
diff --git a/components/tools/UtmBuilder.tsx b/components/tools/UtmBuilder.tsx
new file mode 100644
index 0000000..ea13381
--- /dev/null
+++ b/components/tools/UtmBuilder.tsx
@@ -0,0 +1,170 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { CopyIcon, CheckIcon } from '@radix-ui/react-icons'
+import { listSites, Site } from '@/lib/api/sites'
+import { Select } from '@ciphera-net/ui'
+
+interface UtmBuilderProps {
+  initialSiteId?: string
+}
+
+export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
+  const [sites, setSites] = useState<Site[]>([])
+  const [selectedSiteId, setSelectedSiteId] = useState<string>(initialSiteId || '')
+  
+  const [values, setValues] = useState({
+    url: '',
+    source: '',
+    medium: '',
+    campaign: '',
+    term: '',
+    content: ''
+  })
+  const [copied, setCopied] = useState(false)
+
+  // 1. Fetch sites on mount
+  useEffect(() => {
+    async function fetchSites() {
+      try {
+        const data = await listSites()
+        setSites(data)
+        
+        // If we have an initialSiteId, try to find it and set the URL
+        if (initialSiteId) {
+          const site = data.find(s => s.id === initialSiteId)
+          if (site) {
+            setValues(v => ({ ...v, url: `https://${site.domain}` }))
+          }
+        } else if (data.length > 0 && !values.url) {
+          // Optional: Default to first site if no initial ID provided
+          setSelectedSiteId(data[0].id)
+          setValues(v => ({ ...v, url: `https://${data[0].domain}` }))
+        }
+      } catch (e) {
+        console.error('Failed to load sites for UTM builder', e)
+      }
+    }
+    fetchSites()
+  }, [initialSiteId])
+
+  // 2. Handle Site Selection
+  const handleSiteChange = (siteId: string) => {
+    setSelectedSiteId(siteId)
+    const site = sites.find(s => s.id === siteId)
+    if (site) {
+      setValues(prev => ({
+        ...prev,
+        url: `https://${site.domain}` // Reset URL to base domain of selected site
+      }))
+    }
+  }
+
+  const generatedUrl = (() => {
+    if (!values.url || !values.source || !values.medium || !values.campaign) return ''
+    try {
+      const url = new URL(values.url)
+      url.searchParams.set('utm_source', values.source.toLowerCase())
+      url.searchParams.set('utm_medium', values.medium.toLowerCase())
+      url.searchParams.set('utm_campaign', values.campaign.toLowerCase())
+      if (values.term) url.searchParams.set('utm_term', values.term)
+      if (values.content) url.searchParams.set('utm_content', values.content)
+      return url.toString()
+    } catch (e) {
+      return ''
+    }
+  })()
+
+  const copyToClipboard = () => {
+    if (!generatedUrl) return
+    navigator.clipboard.writeText(generatedUrl)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValues({ ...values, [e.target.name]: e.target.value })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4">
+        
+        {/* Site Selector */}
+        {sites.length > 0 && (
+          <div>
+            <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Select Site</label>
+            <Select
+              value={selectedSiteId}
+              onChange={handleSiteChange}
+              options={sites.map(s => ({ value: s.id, label: s.domain }))}
+              variant="input"
+              fullWidth
+              placeholder="Choose a website..."
+            />
+          </div>
+        )}
+
+        <div>
+          <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Website URL *</label>
+          <input
+            name="url"
+            placeholder="https://example.com/landing-page"
+            className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
+            value={values.url}
+            onChange={handleChange}
+          />
+          <p className="text-xs text-neutral-500 mt-1">
+            You can add specific paths (e.g., /blog/post-1) to the URL above.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Source *</label>
+            <input
+              name="source"
+              placeholder="google, newsletter"
+              className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
+              value={values.source}
+              onChange={handleChange}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Medium *</label>
+            <input
+              name="medium"
+              placeholder="cpc, email"
+              className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
+              value={values.medium}
+              onChange={handleChange}
+            />
+          </div>
+        </div>
+        <div>
+          <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Campaign Name *</label>
+          <input
+            name="campaign"
+            placeholder="spring_sale"
+            className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
+            value={values.campaign}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+
+      {generatedUrl && (
+        <div className="mt-6 p-4 bg-neutral-50 dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 flex items-center justify-between group">
+          <code className="text-sm break-all text-brand-orange font-mono">{generatedUrl}</code>
+          <button
+            onClick={copyToClipboard}
+            className="ml-2 p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800 rounded-lg transition-colors text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
+            title="Copy to clipboard"
+          >
+            {copied ? <CheckIcon className="w-5 h-5 text-green-500" /> : <CopyIcon className="w-5 h-5" />}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/package-lock.json b/package-lock.json
index 1574eb3..7989bb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,14 @@
 {
   "name": "pulse-frontend",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-frontend",
-      "version": "0.1.0",
+      "version": "0.1.1",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.42",
+        "@ciphera-net/ui": "^0.0.43",
         "@ducanh2912/next-pwa": "^10.2.9",
         "axios": "^1.13.2",
         "country-flag-icons": "^1.6.4",
@@ -1467,9 +1467,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.42",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.42/f3476f7f1e6e2210b4c7b1ae84964777e1b2b718",
-      "integrity": "sha512-PuzwXKR2DrtTWXELDFH5GhQxnz0qPHTNGtMbTdhslWEp/taEy+n3UsoBp+NFw0uQEvz7mHQ9PgDpDVztQncMfw==",
+      "version": "0.0.43",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.43/d3b37aacb407bf0343d66a4ad5a84de1b5edd712",
+      "integrity": "sha512-q1giUPWB5+/CIVAAf1H+3bROCBowNy43bCzq1pycIUsm30lF9NkIqnikCAmvfVJLbtt5qJw7GdIgD39gj6awog==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index 02bf60a..743f43f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pulse-frontend",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.42",
+    "@ciphera-net/ui": "^0.0.43",
     "@ducanh2912/next-pwa": "^10.2.9",
     "axios": "^1.13.2",
     "country-flag-icons": "^1.6.4",

From 87fdde18e53fa2078026ea56a47c9346a904e7ac Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 20:25:54 +0100
Subject: [PATCH 2/5] feat: enhance UtmBuilder component with path handling for
 selected sites and improve URL input experience

---
 components/tools/UtmBuilder.tsx | 55 ++++++++++++++++++++++++++++-----
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/components/tools/UtmBuilder.tsx b/components/tools/UtmBuilder.tsx
index ea13381..37c3710 100644
--- a/components/tools/UtmBuilder.tsx
+++ b/components/tools/UtmBuilder.tsx
@@ -86,6 +86,32 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
     setValues({ ...values, [e.target.name]: e.target.value })
   }
 
+  // Helper to handle path changes when a site is selected
+  const handlePathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const site = sites.find(s => s.id === selectedSiteId)
+    if (!site) return
+
+    const path = e.target.value
+    // Ensure path starts with / if not empty
+    const safePath = path.startsWith('/') || path === '' ? path : `/${path}`
+    setValues(v => ({ ...v, url: `https://${site.domain}${safePath}` }))
+  }
+
+  // Extract path from current URL if site is selected
+  const getCurrentPath = () => {
+    const site = sites.find(s => s.id === selectedSiteId)
+    if (!site || !values.url) return ''
+    
+    try {
+      const urlObj = new URL(values.url)
+      return urlObj.pathname === '/' ? '' : urlObj.pathname
+    } catch {
+      return ''
+    }
+  }
+
+  const selectedSite = sites.find(s => s.id === selectedSiteId)
+
   return (
     <div className="space-y-4">
       <div className="grid gap-4">
@@ -107,13 +133,28 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
 
         <div>
           <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Website URL *</label>
-          <input
-            name="url"
-            placeholder="https://example.com/landing-page"
-            className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
-            value={values.url}
-            onChange={handleChange}
-          />
+          {selectedSite ? (
+            <div className="flex rounded-xl shadow-sm">
+              <span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800 text-neutral-500 text-sm">
+                https://{selectedSite.domain}
+              </span>
+              <input
+                type="text"
+                className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white sm:text-sm"
+                placeholder="/blog/post-1"
+                value={getCurrentPath()}
+                onChange={handlePathChange}
+              />
+            </div>
+          ) : (
+            <input
+              name="url"
+              placeholder="https://example.com/landing-page"
+              className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
+              value={values.url}
+              onChange={handleChange}
+            />
+          )}
           <p className="text-xs text-neutral-500 mt-1">
             You can add specific paths (e.g., /blog/post-1) to the URL above.
           </p>

From 210ea7b754f7be7f9f8a93d66a9744c1022afc1a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 20:34:30 +0100
Subject: [PATCH 3/5] feat: update version to 0.1.2 and upgrade @ciphera-net/ui
 to 0.0.44; refactor layout-content for improved navigation handling

---
 app/layout-content.tsx | 17 +++++++++--------
 package-lock.json      | 12 ++++++------
 package.json           |  4 ++--
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 625d159..b037f67 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -62,14 +62,15 @@ export default function LayoutContent({ children }: { children: React.ReactNode
         showSecurity={false}
         showPricing={true}
         topOffset={showOfflineBar ? `${barHeightRem}rem` : undefined}
-        userMenuCustomItems={
-          <Link
-            href="/tools"
-            className="group flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
-          >
-            <GridIcon className="h-4 w-4 text-neutral-500 group-hover:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-white" />
-            Tools
-          </Link>
+        customNavItems={
+          auth.user ? (
+            <Link
+              href="/tools"
+              className="px-4 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 transition-all duration-200"
+            >
+              Tools
+            </Link>
+          ) : null
         }
       />
       <main
diff --git a/package-lock.json b/package-lock.json
index 7989bb9..8c5e6f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,14 @@
 {
   "name": "pulse-frontend",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-frontend",
-      "version": "0.1.1",
+      "version": "0.1.2",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.43",
+        "@ciphera-net/ui": "^0.0.44",
         "@ducanh2912/next-pwa": "^10.2.9",
         "axios": "^1.13.2",
         "country-flag-icons": "^1.6.4",
@@ -1467,9 +1467,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.43",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.43/d3b37aacb407bf0343d66a4ad5a84de1b5edd712",
-      "integrity": "sha512-q1giUPWB5+/CIVAAf1H+3bROCBowNy43bCzq1pycIUsm30lF9NkIqnikCAmvfVJLbtt5qJw7GdIgD39gj6awog==",
+      "version": "0.0.44",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.44/a36bb829498560c7dc49e105e048fdc02e6735d9",
+      "integrity": "sha512-3dgHoVwnYqbKVKC7Dzjzm3sbPHoL+t3J58TC0XvH6S9OYBW1vC+nkF3Jxqq6pVoHOblpZ1/ZokL7hA6xZFeSIQ==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index 743f43f..73c0538 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pulse-frontend",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.43",
+    "@ciphera-net/ui": "^0.0.44",
     "@ducanh2912/next-pwa": "^10.2.9",
     "axios": "^1.13.2",
     "country-flag-icons": "^1.6.4",

From 159f514b711f0dc944379c2004f3c9d277eb0be6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 20:40:16 +0100
Subject: [PATCH 4/5] feat: enhance UI components by updating button styles and
 improving layout in ToolsPage and Campaigns; refactor UtmBuilder for better
 input handling and user experience

---
 app/tools/page.tsx                 |  2 +-
 components/dashboard/Campaigns.tsx | 18 ++++++++------
 components/tools/UtmBuilder.tsx    | 39 ++++++++++++++----------------
 3 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/app/tools/page.tsx b/app/tools/page.tsx
index ddb51fa..5904741 100644
--- a/app/tools/page.tsx
+++ b/app/tools/page.tsx
@@ -6,7 +6,7 @@ export default function ToolsPage() {
   return (
     <div className="max-w-2xl mx-auto py-10 px-4">
       <h1 className="text-2xl font-bold mb-6 text-neutral-900 dark:text-white">Tools</h1>
-      <div className="bg-white dark:bg-neutral-900 p-6 rounded-xl border border-neutral-200 dark:border-neutral-800">
+      <div className="bg-white dark:bg-neutral-900 p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800">
         <h2 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">UTM Campaign Builder</h2>
         <UtmBuilder />
       </div>
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 97dd753..5bee4ee 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { formatNumber } from '@/lib/utils/format'
-import { Modal, ArrowRightIcon } from '@ciphera-net/ui'
+import { Modal, ArrowRightIcon, Button } from '@ciphera-net/ui'
 import { getCampaigns, CampaignStat } from '@/lib/api/stats'
 import { FaBullhorn } from 'react-icons/fa'
 import { PlusIcon } from '@radix-ui/react-icons'
@@ -70,21 +70,23 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
           <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
             Campaigns
           </h3>
-          <div className="flex items-center gap-3">
-            <button
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
               onClick={() => setIsBuilderOpen(true)}
-              className="flex items-center gap-1.5 text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
+              className="h-8 px-3 text-xs gap-1.5"
             >
               <PlusIcon className="w-3.5 h-3.5" />
               Build URL
-            </button>
+            </Button>
             {showViewAll && (
-              <button
+              <Button
+                variant="ghost"
                 onClick={() => setIsModalOpen(true)}
-                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
+                className="h-8 px-3 text-xs"
               >
                 View All
-              </button>
+              </Button>
             )}
           </div>
         </div>
diff --git a/components/tools/UtmBuilder.tsx b/components/tools/UtmBuilder.tsx
index 37c3710..f4b1593 100644
--- a/components/tools/UtmBuilder.tsx
+++ b/components/tools/UtmBuilder.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react'
 import { CopyIcon, CheckIcon } from '@radix-ui/react-icons'
 import { listSites, Site } from '@/lib/api/sites'
-import { Select } from '@ciphera-net/ui'
+import { Select, Input, Button } from '@ciphera-net/ui'
 
 interface UtmBuilderProps {
   initialSiteId?: string
@@ -132,62 +132,58 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
         )}
 
         <div>
-          <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Website URL *</label>
+          <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Website URL *</label>
           {selectedSite ? (
-            <div className="flex rounded-xl shadow-sm">
-              <span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800 text-neutral-500 text-sm">
+            <div className="flex rounded-xl shadow-sm transition-all duration-200 focus-within:ring-4 focus-within:ring-brand-orange/10 focus-within:border-brand-orange hover:border-brand-orange/50 border border-neutral-200 dark:border-neutral-800">
+              <span className="inline-flex items-center px-4 rounded-l-xl border-r border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 text-neutral-500 text-sm select-none">
                 https://{selectedSite.domain}
               </span>
               <input
                 type="text"
-                className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white sm:text-sm"
+                className="flex-1 min-w-0 block w-full px-4 py-3 rounded-none rounded-r-xl bg-neutral-50/50 dark:bg-neutral-900/50 outline-none transition-all text-neutral-900 dark:text-white text-sm placeholder:text-neutral-400"
                 placeholder="/blog/post-1"
                 value={getCurrentPath()}
                 onChange={handlePathChange}
               />
             </div>
           ) : (
-            <input
+            <Input
               name="url"
               placeholder="https://example.com/landing-page"
-              className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
               value={values.url}
               onChange={handleChange}
             />
           )}
-          <p className="text-xs text-neutral-500 mt-1">
+          <p className="text-xs text-neutral-500 mt-1.5">
             You can add specific paths (e.g., /blog/post-1) to the URL above.
           </p>
         </div>
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Source *</label>
-            <input
+            <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Source *</label>
+            <Input
               name="source"
               placeholder="google, newsletter"
-              className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
               value={values.source}
               onChange={handleChange}
             />
           </div>
           <div>
-            <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Medium *</label>
-            <input
+            <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Medium *</label>
+            <Input
               name="medium"
               placeholder="cpc, email"
-              className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
               value={values.medium}
               onChange={handleChange}
             />
           </div>
         </div>
         <div>
-          <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Campaign Name *</label>
-          <input
+          <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Campaign Name *</label>
+          <Input
             name="campaign"
             placeholder="spring_sale"
-            className="w-full p-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50 focus:ring-2 focus:ring-brand-orange/20 outline-none transition-all text-neutral-900 dark:text-white"
             value={values.campaign}
             onChange={handleChange}
           />
@@ -197,13 +193,14 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
       {generatedUrl && (
         <div className="mt-6 p-4 bg-neutral-50 dark:bg-neutral-900 rounded-xl border border-neutral-200 dark:border-neutral-800 flex items-center justify-between group">
           <code className="text-sm break-all text-brand-orange font-mono">{generatedUrl}</code>
-          <button
+          <Button
+            variant="secondary"
             onClick={copyToClipboard}
-            className="ml-2 p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800 rounded-lg transition-colors text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
+            className="ml-4 shrink-0 h-9 w-9 p-0 rounded-lg"
             title="Copy to clipboard"
           >
-            {copied ? <CheckIcon className="w-5 h-5 text-green-500" /> : <CopyIcon className="w-5 h-5" />}
-          </button>
+            {copied ? <CheckIcon className="w-4 h-4 text-green-500" /> : <CopyIcon className="w-4 h-4" />}
+          </Button>
         </div>
       )}
     </div>

From e824b270afaebb4b40b363f161c2228071ba2b8d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 20:56:08 +0100
Subject: [PATCH 5/5] feat: refactor UtmBuilder to improve site selection logic
 and URL initialization based on initialSiteId; enhance user experience by
 ensuring proper state updates

---
 components/tools/UtmBuilder.tsx | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/components/tools/UtmBuilder.tsx b/components/tools/UtmBuilder.tsx
index f4b1593..2c7a67c 100644
--- a/components/tools/UtmBuilder.tsx
+++ b/components/tools/UtmBuilder.tsx
@@ -29,24 +29,29 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
       try {
         const data = await listSites()
         setSites(data)
-        
-        // If we have an initialSiteId, try to find it and set the URL
-        if (initialSiteId) {
-          const site = data.find(s => s.id === initialSiteId)
-          if (site) {
-            setValues(v => ({ ...v, url: `https://${site.domain}` }))
-          }
-        } else if (data.length > 0 && !values.url) {
-          // Optional: Default to first site if no initial ID provided
-          setSelectedSiteId(data[0].id)
-          setValues(v => ({ ...v, url: `https://${data[0].domain}` }))
-        }
       } catch (e) {
         console.error('Failed to load sites for UTM builder', e)
       }
     }
     fetchSites()
-  }, [initialSiteId])
+  }, [])
+
+  // 2. Initialize default selection
+  useEffect(() => {
+    if (sites.length === 0) return
+
+    if (initialSiteId) {
+      const site = sites.find(s => s.id === initialSiteId)
+      if (site && selectedSiteId !== site.id) {
+        setSelectedSiteId(site.id)
+        setValues(v => ({ ...v, url: `https://${site.domain}` }))
+      }
+    } else if (!selectedSiteId && !values.url) {
+      const firstSite = sites[0]
+      setSelectedSiteId(firstSite.id)
+      setValues(v => ({ ...v, url: `https://${firstSite.domain}` }))
+    }
+  }, [sites, initialSiteId, selectedSiteId, values.url])
 
   // 2. Handle Site Selection
   const handleSiteChange = (siteId: string) => {