ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: upgrade @ciphera-net/ui to version 0.0.45 and refactor Funnel components to replace Card with div for improved styling consistency

Browse Source
This commit is contained in:
Usman Baig
2026-02-04 22:01:32 +01:00
parent 3f99bc81cc
commit 5a8fe883dd
5 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/sites/[id]/funnels/[funnelId]/page.tsx
View File

@@ -4,9 +4,8 @@ import { useAuth } from '@/lib/auth/context'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation' import { useParams, useRouter } from 'next/navigation'
import { getFunnel, getFunnelStats, deleteFunnel, type Funnel, type FunnelStats } from '@/lib/api/funnels' 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 Link from 'next/link'
import { LuChevronLeft as ChevronLeftIcon, LuTrash as TrashIcon, LuEdit as EditIcon, LuArrowRight as ArrowRightIcon } from 'react-icons/lu'
import { import {
BarChart, BarChart,
Bar, Bar,
@@ -136,7 +135,7 @@ export default function FunnelReportPage() {
</div> </div>
{/* Chart */} {/* 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"> <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-6">
Funnel Visualization Funnel Visualization
</h3> </h3>
@@ -192,10 +191,10 @@ export default function FunnelReportPage() {
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
</Card> </div>
{/* Detailed Stats Table */} {/* 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"> <div className="overflow-x-auto">
<table className="w-full text-left text-sm"> <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"> <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> </tbody>
</table> </table>
</div> </div>
</Card> </div>
</div> </div>
<DatePicker <DatePicker

11
app/sites/[id]/funnels/new/page.tsx
View File

@@ -4,9 +4,8 @@ import { useAuth } from '@/lib/auth/context'
import { useState } from 'react' import { useState } from 'react'
import { useParams, useRouter } from 'next/navigation' import { useParams, useRouter } from 'next/navigation'
import { createFunnel, type CreateFunnelRequest, type FunnelStep } from '@/lib/api/funnels' 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 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() { export default function CreateFunnelPage() {
const params = useParams() const params = useParams()
@@ -92,7 +91,7 @@ export default function CreateFunnelPage() {
</div> </div>
<form onSubmit={handleSubmit}> <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 className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1"> <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>
</div> </div>
</Card> </div>
<div className="space-y-4 mb-8"> <div className="space-y-4 mb-8">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -126,7 +125,7 @@ export default function CreateFunnelPage() {
</div> </div>
{steps.map((step, index) => ( {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="flex items-start gap-4">
<div className="mt-3 text-neutral-400"> <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"> <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" /> <TrashIcon className="w-5 h-5" />
</button> </button>
</div> </div>
</Card> </div>
))} ))}
<button <button

11
app/sites/[id]/funnels/page.tsx
View File

@@ -4,9 +4,8 @@ import { useAuth } from '@/lib/auth/context'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation' import { useParams, useRouter } from 'next/navigation'
import { listFunnels, deleteFunnel, type Funnel } from '@/lib/api/funnels' 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 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() { export default function FunnelsPage() {
const { user } = useAuth() const { user } = useAuth()
@@ -80,7 +79,7 @@ export default function FunnelsPage() {
</div> </div>
{funnels.length === 0 ? ( {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"> <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" /> <ArrowRightIcon className="w-8 h-8 text-neutral-400" />
</div> </div>
@@ -97,7 +96,7 @@ export default function FunnelsPage() {
<PlusIcon className="w-4 h-4" /> <PlusIcon className="w-4 h-4" />
<span>Create Funnel</span> <span>Create Funnel</span>
</Link> </Link>
</Card> </div>
) : ( ) : (
<div className="grid gap-4"> <div className="grid gap-4">
{funnels.map((funnel) => ( {funnels.map((funnel) => (
@@ -106,7 +105,7 @@ export default function FunnelsPage() {
href={`/sites/${siteId}/funnels/${funnel.id}`} href={`/sites/${siteId}/funnels/${funnel.id}`}
className="block group" 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 className="flex items-center justify-between">
<div> <div>
<h3 className="text-lg font-medium text-neutral-900 dark:text-white group-hover:text-brand-orange transition-colors"> <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" /> <ChevronLeftIcon className="w-5 h-5 text-neutral-300 rotate-180" />
</div> </div>
</div> </div>
</Card> </div>
</Link> </Link>
))} ))}
</div> </div>

8
package-lock.json generated
View File

@@ -8,7 +8,7 @@
"name": "pulse-frontend", "name": "pulse-frontend",
"version": "0.1.2", "version": "0.1.2",
"dependencies": { "dependencies": {
"@ciphera-net/ui": "^0.0.44", "@ciphera-net/ui": "^0.0.45",
"@ducanh2912/next-pwa": "^10.2.9", "@ducanh2912/next-pwa": "^10.2.9",
"axios": "^1.13.2", "axios": "^1.13.2",
"country-flag-icons": "^1.6.4", "country-flag-icons": "^1.6.4",
@@ -1467,9 +1467,9 @@
} }
}, },
"node_modules/@ciphera-net/ui": { "node_modules/@ciphera-net/ui": {
"version": "0.0.44", "version": "0.0.45",
"resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.44/a36bb829498560c7dc49e105e048fdc02e6735d9", "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.45/de60e0da8e1c78ea906d49fdc85cd7d7dd163348",
"integrity": "sha512-3dgHoVwnYqbKVKC7Dzjzm3sbPHoL+t3J58TC0XvH6S9OYBW1vC+nkF3Jxqq6pVoHOblpZ1/ZokL7hA6xZFeSIQ==", "integrity": "sha512-KvrNKb9NzLMztB75h94opaaUp9RG43QW7GCRcVX+xGT8EFmrXi/N2h2kpjHZV652H/Cz1EXfcDA0hzoq/+wJXA==",
"dependencies": { "dependencies": {
"@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-icons": "^1.3.0",
"clsx": "^2.1.0", "clsx": "^2.1.0",

2
package.json
View File

@@ -10,7 +10,7 @@
"type-check": "tsc --noEmit" "type-check": "tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"@ciphera-net/ui": "^0.0.44", "@ciphera-net/ui": "^0.0.45",
"@ducanh2912/next-pwa": "^10.2.9", "@ducanh2912/next-pwa": "^10.2.9",
"axios": "^1.13.2", "axios": "^1.13.2",
"country-flag-icons": "^1.6.4", "country-flag-icons": "^1.6.4",