From 645e3e78efe991aebedfa6d723ca6618bbe3808d Mon Sep 17 00:00:00 2001 From: Usman Baig Date: Mon, 23 Mar 2026 15:23:26 +0100 Subject: [PATCH] feat(empty-states): add undraw illustrations to empty state screens Add brand-orange recolored SVG illustrations from undraw to five empty states: sites list, dashboard chart, funnels, journeys, and behavior. --- app/sites/[id]/funnels/page.tsx | 14 ++++-- components/behavior/FrustrationTable.tsx | 8 ++-- components/dashboard/Chart.tsx | 7 ++- components/journeys/ColumnJourney.tsx | 8 ++-- components/sites/SiteList.tsx | 10 ++++- public/illustrations/blank-canvas.svg | 30 +++++++++++++ public/illustrations/data-trends.svg | 56 ++++++++++++++++++++++++ public/illustrations/journey.svg | 41 +++++++++++++++++ public/illustrations/no-data.svg | 12 +++++ public/illustrations/setup-analytics.svg | 35 +++++++++++++++ 10 files changed, 209 insertions(+), 12 deletions(-) create mode 100644 public/illustrations/blank-canvas.svg create mode 100644 public/illustrations/data-trends.svg create mode 100644 public/illustrations/journey.svg create mode 100644 public/illustrations/no-data.svg create mode 100644 public/illustrations/setup-analytics.svg diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx index 2b40d16..cec7b5b 100644 --- a/app/sites/[id]/funnels/page.tsx +++ b/app/sites/[id]/funnels/page.tsx @@ -6,6 +6,7 @@ import { useFunnels } from '@/lib/swr/dashboard' import { toast, PlusIcon, ArrowRightIcon, ChevronLeftIcon, TrashIcon, Button } from '@ciphera-net/ui' import { FunnelsListSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons' import Link from 'next/link' +import Image from 'next/image' export default function FunnelsPage() { const params = useParams() @@ -55,10 +56,15 @@ export default function FunnelsPage() { {funnels.length === 0 ? ( -
-
- -
+
+ Create your first funnel

No funnels yet

diff --git a/components/behavior/FrustrationTable.tsx b/components/behavior/FrustrationTable.tsx index 916b749..d362b14 100644 --- a/components/behavior/FrustrationTable.tsx +++ b/components/behavior/FrustrationTable.tsx @@ -177,9 +177,11 @@ export default function FrustrationTable({ ) : (
-
- -
+ No frustration signals

No {title.toLowerCase()} detected

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx index 4b47fc0..633dbff 100644 --- a/components/dashboard/Chart.tsx +++ b/components/dashboard/Chart.tsx @@ -414,7 +414,12 @@ export default function Chart({
{!hasData || !hasAnyNonZero ? ( -
+
+ No data available

{!hasData ? 'No data for this period' : `No ${METRIC_CONFIGS.find((m) => m.key === metric)?.label.toLowerCase()} recorded`}

diff --git a/components/journeys/ColumnJourney.tsx b/components/journeys/ColumnJourney.tsx index fe6e706..eed557d 100644 --- a/components/journeys/ColumnJourney.tsx +++ b/components/journeys/ColumnJourney.tsx @@ -556,9 +556,11 @@ export default function ColumnJourney({ if (!transitions.length) { return (
-
- -
+ No journey data

No journey data yet

diff --git a/components/sites/SiteList.tsx b/components/sites/SiteList.tsx index 7480442..2168e16 100644 --- a/components/sites/SiteList.tsx +++ b/components/sites/SiteList.tsx @@ -135,7 +135,15 @@ export default function SiteList({ sites, siteStats, loading, onDelete }: SiteLi if (sites.length === 0) { return ( -
+
+ Set up your first site

No sites yet

Create your first site to get started.

diff --git a/public/illustrations/blank-canvas.svg b/public/illustrations/blank-canvas.svg new file mode 100644 index 0000000..efd66c3 --- /dev/null +++ b/public/illustrations/blank-canvas.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/illustrations/data-trends.svg b/public/illustrations/data-trends.svg new file mode 100644 index 0000000..927edfe --- /dev/null +++ b/public/illustrations/data-trends.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/illustrations/journey.svg b/public/illustrations/journey.svg new file mode 100644 index 0000000..ecddddd --- /dev/null +++ b/public/illustrations/journey.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/illustrations/no-data.svg b/public/illustrations/no-data.svg new file mode 100644 index 0000000..1343b9c --- /dev/null +++ b/public/illustrations/no-data.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/illustrations/setup-analytics.svg b/public/illustrations/setup-analytics.svg new file mode 100644 index 0000000..349ced2 --- /dev/null +++ b/public/illustrations/setup-analytics.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +