From 5a8fe883dd9419b9c965879cd55eb90234ac59f4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 22:01:32 +0100
Subject: [PATCH] feat: upgrade @ciphera-net/ui to version 0.0.45 and refactor
 Funnel components to replace Card with div for improved styling consistency

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 11 +++++------
 app/sites/[id]/funnels/new/page.tsx        | 11 +++++------
 app/sites/[id]/funnels/page.tsx            | 11 +++++------
 package-lock.json                          |  8 ++++----
 package.json                               |  2 +-
 5 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index ba8da73..d3c2415 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -4,9 +4,8 @@ import { useAuth } from '@/lib/auth/context'
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { getFunnel, getFunnelStats, deleteFunnel, type Funnel, type FunnelStats } from '@/lib/api/funnels'
-import { toast, LoadingOverlay, Card, Select, DatePicker } from '@ciphera-net/ui'
+import { toast, LoadingOverlay, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon } from '@ciphera-net/ui'
 import Link from 'next/link'
-import { LuChevronLeft as ChevronLeftIcon, LuTrash as TrashIcon, LuEdit as EditIcon, LuArrowRight as ArrowRightIcon } from 'react-icons/lu'
 import {
   BarChart,
   Bar,
@@ -136,7 +135,7 @@ export default function FunnelReportPage() {
         </div>
 
         {/* Chart */}
-        <Card className="p-6 mb-8">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 mb-8">
           <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-6">
             Funnel Visualization
           </h3>
@@ -192,10 +191,10 @@ export default function FunnelReportPage() {
               </BarChart>
             </ResponsiveContainer>
           </div>
-        </Card>
+        </div>
 
         {/* Detailed Stats Table */}
-        <Card className="overflow-hidden">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden">
           <div className="overflow-x-auto">
             <table className="w-full text-left text-sm">
               <thead className="bg-neutral-50 dark:bg-neutral-800/50 border-b border-neutral-200 dark:border-neutral-800">
@@ -248,7 +247,7 @@ export default function FunnelReportPage() {
               </tbody>
             </table>
           </div>
-        </Card>
+        </div>
       </div>
 
       <DatePicker
diff --git a/app/sites/[id]/funnels/new/page.tsx b/app/sites/[id]/funnels/new/page.tsx
index e2c80c8..6b4991d 100644
--- a/app/sites/[id]/funnels/new/page.tsx
+++ b/app/sites/[id]/funnels/new/page.tsx
@@ -4,9 +4,8 @@ import { useAuth } from '@/lib/auth/context'
 import { useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { createFunnel, type CreateFunnelRequest, type FunnelStep } from '@/lib/api/funnels'
-import { toast, Card, Input, Button } from '@ciphera-net/ui'
+import { toast, Input, Button, ChevronLeftIcon, PlusIcon, TrashIcon } from '@ciphera-net/ui'
 import Link from 'next/link'
-import { LuChevronLeft as ChevronLeftIcon, LuPlus as PlusIcon, LuTrash as TrashIcon, LuGripVertical as GripVerticalIcon } from 'react-icons/lu'
 
 export default function CreateFunnelPage() {
   const params = useParams()
@@ -92,7 +91,7 @@ export default function CreateFunnelPage() {
       </div>
 
       <form onSubmit={handleSubmit}>
-        <Card className="p-6 mb-6">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 mb-6">
           <div className="space-y-4">
             <div>
               <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
@@ -116,7 +115,7 @@ export default function CreateFunnelPage() {
               />
             </div>
           </div>
-        </Card>
+        </div>
 
         <div className="space-y-4 mb-8">
           <div className="flex items-center justify-between">
@@ -126,7 +125,7 @@ export default function CreateFunnelPage() {
           </div>
 
           {steps.map((step, index) => (
-            <Card key={index} className="p-4">
+            <div key={index} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-4">
               <div className="flex items-start gap-4">
                 <div className="mt-3 text-neutral-400">
                   <div className="w-6 h-6 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-sm font-medium text-neutral-600 dark:text-neutral-400">
@@ -182,7 +181,7 @@ export default function CreateFunnelPage() {
                   <TrashIcon className="w-5 h-5" />
                 </button>
               </div>
-            </Card>
+            </div>
           ))}
 
           <button
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index d47dd50..a0681b1 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -4,9 +4,8 @@ import { useAuth } from '@/lib/auth/context'
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { listFunnels, deleteFunnel, type Funnel } from '@/lib/api/funnels'
-import { toast, LoadingOverlay, Card } from '@ciphera-net/ui'
+import { toast, LoadingOverlay, PlusIcon, ArrowRightIcon, ChevronLeftIcon, TrashIcon } from '@ciphera-net/ui'
 import Link from 'next/link'
-import { LuPlus as PlusIcon, LuTrash as TrashIcon, LuArrowRight as ArrowRightIcon, LuChevronLeft as ChevronLeftIcon } from 'react-icons/lu'
 
 export default function FunnelsPage() {
   const { user } = useAuth()
@@ -80,7 +79,7 @@ export default function FunnelsPage() {
         </div>
 
         {funnels.length === 0 ? (
-          <Card className="p-12 text-center">
+          <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-12 text-center">
             <div className="w-16 h-16 mx-auto mb-4 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center">
               <ArrowRightIcon className="w-8 h-8 text-neutral-400" />
             </div>
@@ -97,7 +96,7 @@ export default function FunnelsPage() {
               <PlusIcon className="w-4 h-4" />
               <span>Create Funnel</span>
             </Link>
-          </Card>
+          </div>
         ) : (
           <div className="grid gap-4">
             {funnels.map((funnel) => (
@@ -106,7 +105,7 @@ export default function FunnelsPage() {
                 href={`/sites/${siteId}/funnels/${funnel.id}`}
                 className="block group"
               >
-                <Card className="p-6 hover:border-brand-orange/50 transition-colors">
+                <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 hover:border-brand-orange/50 transition-colors">
                   <div className="flex items-center justify-between">
                     <div>
                       <h3 className="text-lg font-medium text-neutral-900 dark:text-white group-hover:text-brand-orange transition-colors">
@@ -140,7 +139,7 @@ export default function FunnelsPage() {
                       <ChevronLeftIcon className="w-5 h-5 text-neutral-300 rotate-180" />
                     </div>
                   </div>
-                </Card>
+                </div>
               </Link>
             ))}
           </div>
diff --git a/package-lock.json b/package-lock.json
index 8c5e6f9..cbca395 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.1.2",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.44",
+        "@ciphera-net/ui": "^0.0.45",
         "@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.44",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.44/a36bb829498560c7dc49e105e048fdc02e6735d9",
-      "integrity": "sha512-3dgHoVwnYqbKVKC7Dzjzm3sbPHoL+t3J58TC0XvH6S9OYBW1vC+nkF3Jxqq6pVoHOblpZ1/ZokL7hA6xZFeSIQ==",
+      "version": "0.0.45",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.45/de60e0da8e1c78ea906d49fdc85cd7d7dd163348",
+      "integrity": "sha512-KvrNKb9NzLMztB75h94opaaUp9RG43QW7GCRcVX+xGT8EFmrXi/N2h2kpjHZV652H/Cz1EXfcDA0hzoq/+wJXA==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index 73c0538..ff9b34f 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.44",
+    "@ciphera-net/ui": "^0.0.45",
     "@ducanh2912/next-pwa": "^10.2.9",
     "axios": "^1.13.2",
     "country-flag-icons": "^1.6.4",