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

[PULSE-36] Funnels UI - builder and report #8

Merged
uz1mani merged 12 commits from staging into main 2026-02-04 23:16:04 +00:00
Conversation 27 Commits 12 Files Changed 7 +714 -5
7 changed files with 714 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5a8fe883dd - Show all commits

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 { 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

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 { 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

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 { 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>

8
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",