@startsimpli/ui 0.4.6 → 0.4.8

package/src/components/dashboard/PipelineFunnel.tsx

@@ -0,0 +1,126 @@
+import { Card } from '../ui/card';
+import { TrendingDown } from 'lucide-react';
+
+export interface FunnelStage {
+  stage: string;
+  count: number;
+  color?: string;
+}
+
+export interface PipelineFunnelProps {
+  stages: FunnelStage[];
+  title?: string;
+  onStageClick?: (stage: string) => void;
+}
+
+export function PipelineFunnel({
+  stages,
+  title = 'Pipeline Funnel',
+  onStageClick,
+}: PipelineFunnelProps) {
+  if (!stages || stages.length === 0) {
+    return (
+      <Card className="p-6">
+        <h2 className="text-xl font-bold text-gray-900 mb-6">{title}</h2>
+        <div className="text-center py-8 text-gray-500">
+          <TrendingDown className="w-12 h-12 mx-auto mb-3 opacity-50" />
+          <p className="text-sm">No pipeline data available</p>
+        </div>
+      </Card>
+    );
+  }
+
+  const maxCount = Math.max(...stages.map(s => s.count));
+
+  return (
+    <Card className="p-6">
+      <h2 className="text-xl font-bold text-gray-900 mb-6">{title}</h2>
+
+      <div className="space-y-4" role="list" aria-label="Pipeline stages">
+        {stages.map((stage, index) => {
+          const percentage = maxCount > 0 ? (stage.count / maxCount) * 100 : 0;
+          const stagePercentage = stages[0]?.count > 0
+            ? Math.round((stage.count / stages[0].count) * 100)
+            : 0;
+
+          const defaultColors = [
+            'from-accent-400 to-accent-500',
+            'from-primary-400 to-primary-500',
+            'from-primary-500 to-primary-600',
+            'from-primary-600 to-primary-700',
+          ];
+
+          const gradientColor = stage.color || defaultColors[index % defaultColors.length];
+
+          const nextStage = stages[index + 1];
+          const conversionRate = nextStage
+            ? Math.round((nextStage.count / stage.count) * 100)
+            : null;
+
+          return (
+            <div
+              key={stage.stage}
+              role="listitem"
+              className="group"
+              onClick={() => onStageClick?.(stage.stage)}
+            >
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-sm font-medium text-gray-700">
+                  {stage.stage}
+                </span>
+                <div className="flex items-center gap-3">
+                  <span className="text-xs text-gray-500">
+                    {stagePercentage}% of total
+                  </span>
+                  <span className="text-sm font-bold text-gray-900">
+                    {stage.count.toLocaleString()}
+                  </span>
+                </div>
+              </div>
+
+              <div className="relative h-8 bg-gray-100 rounded-md overflow-hidden">
+                <button
+                  className={`
+                    absolute inset-y-0 left-0 bg-gradient-to-r ${gradientColor}
+                    transition-all duration-300 group-hover:opacity-90
+                    ${onStageClick ? 'cursor-pointer' : 'cursor-default'}
+                    focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
+                  `}
+                  style={{ width: `${percentage}%` }}
+                  aria-label={`${stage.stage}: ${stage.count} prospects, ${stagePercentage}% of total`}
+                  disabled={!onStageClick}
+                >
+                  <span className="sr-only">
+                    {stage.stage}: {stage.count} prospects
+                  </span>
+                </button>
+
+                {conversionRate !== null && (
+                  <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                    <span className="text-xs font-medium text-white bg-gray-900 bg-opacity-75 px-2 py-1 rounded">
+                      {conversionRate}% convert to next stage
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {stages.length >= 2 && (
+        <div className="mt-6 pt-6 border-t border-gray-200">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-gray-600">Overall Conversion</span>
+            <span className="font-bold text-gray-900">
+              {Math.round((stages[stages.length - 1].count / stages[0].count) * 100)}%
+              <span className="text-xs text-gray-500 ml-1">
+                ({stages[0].stage} → {stages[stages.length - 1].stage})
+              </span>
+            </span>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}

package/src/components/dashboard/SparklineTrend.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+
+export interface SparklineTrendProps {
+  data: number[]
+  color?: string
+  height?: number
+  className?: string
+}
+
+// Map common Tailwind color class suffixes to hex values
+const COLOR_MAP: Record<string, string> = {
+  'blue-500': '#3B82F6',
+  'green-500': '#10B981',
+  'purple-500': '#A855F7',
+  'emerald-500': '#10B981',
+  'red-500': '#EF4444',
+  'orange-500': '#F97316',
+  'yellow-500': '#EAB308',
+  'indigo-500': '#6366F1',
+  'pink-500': '#EC4899',
+  'primary-500': '#3B82F6',
+  'primary-600': '#2563EB',
+  'accent-500': '#A855F7',
+  'success-500': '#10B981',
+}
+
+function resolveColor(color: string): string {
+  // If it looks like a hex/rgb value already, use it directly
+  if (color.startsWith('#') || color.startsWith('rgb')) return color
+
+  // Strip common Tailwind prefixes like "text-"
+  const key = color.replace(/^text-/, '')
+  return COLOR_MAP[key] || COLOR_MAP['blue-500']
+}
+
+export function SparklineTrend({
+  data,
+  color = 'blue-500',
+  height = 40,
+  className,
+}: SparklineTrendProps) {
+  if (data.length < 2) return null
+
+  const width = 100
+  const padding = 2
+
+  const min = Math.min(...data)
+  const max = Math.max(...data)
+  const range = max - min || 1
+
+  const points = data.map((value, index) => {
+    const x = (index / (data.length - 1)) * width
+    const y = height - ((value - min) / range) * (height - padding * 2) - padding
+    return `${x},${y}`
+  })
+
+  const pathData = `M ${points.join(' L ')}`
+  const areaData = `${pathData} L ${width},${height} L 0,${height} Z`
+
+  const hexColor = resolveColor(color)
+  const gradientId = `sparkline-gradient-${React.useId().replace(/:/g, '')}`
+
+  const trend =
+    data[data.length - 1] > data[0]
+      ? 'increasing'
+      : data[data.length - 1] < data[0]
+        ? 'decreasing'
+        : 'stable'
+
+  return (
+    <svg
+      width="100%"
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      preserveAspectRatio="none"
+      className={className ?? 'w-full'}
+      role="img"
+      aria-label={`Trend chart showing ${trend} pattern`}
+    >
+      <defs>
+        <linearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stopColor={hexColor} stopOpacity="0.3" />
+          <stop offset="100%" stopColor={hexColor} stopOpacity="0.05" />
+        </linearGradient>
+      </defs>
+      <path
+        d={areaData}
+        fill={`url(#${gradientId})`}
+        className="transition-all duration-300"
+      />
+      <path
+        d={pathData}
+        fill="none"
+        stroke={hexColor}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="transition-all duration-300"
+      />
+    </svg>
+  )
+}

package/src/components/dashboard/TopCampaigns.tsx

@@ -0,0 +1,132 @@
+import { Card } from '../ui/card';
+import { EmptyState } from '../states';
+import { ArrowRight } from 'lucide-react';
+
+export interface TopCampaign {
+  id: string;
+  name: string;
+  engagementRate: number;
+  status?: 'active' | 'paused' | 'completed';
+}
+
+export interface TopCampaignsProps {
+  campaigns: TopCampaign[];
+  title?: string;
+  maxItems?: number;
+  onViewAll?: () => void;
+}
+
+export function TopCampaigns({
+  campaigns,
+  title = 'Top Performing Campaigns',
+  maxItems = 5,
+  onViewAll,
+}: TopCampaignsProps) {
+  const displayCampaigns = campaigns.slice(0, maxItems);
+
+  if (campaigns.length === 0) {
+    return (
+      <Card className="p-6">
+        <h2 className="text-xl font-bold text-gray-900 mb-6">{title}</h2>
+        <EmptyState
+          title="No campaigns yet"
+          description="Launch your first campaign to see performance metrics"
+        />
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-bold text-gray-900">{title}</h2>
+        {onViewAll && campaigns.length > maxItems && (
+          <button
+            onClick={onViewAll}
+            className="text-sm text-primary-600 hover:text-primary-700 font-medium flex items-center gap-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded"
+          >
+            View all
+            <ArrowRight className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+
+      <div className="space-y-4" role="list" aria-label="Top campaigns by engagement">
+        {displayCampaigns.map((campaign, index) => {
+          const getProgressColor = (rate: number) => {
+            if (rate >= 75) return 'bg-success-500';
+            if (rate >= 50) return 'bg-primary-500';
+            if (rate >= 25) return 'bg-warning-500';
+            return 'bg-gray-400';
+          };
+
+          const progressColor = getProgressColor(campaign.engagementRate);
+
+          return (
+            <div
+              key={campaign.id}
+              role="listitem"
+              className="group space-y-2"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex items-start gap-2 min-w-0 flex-1">
+                  <span className={`
+                    flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold
+                    ${index === 0 ? 'bg-accent-100 text-accent-700 border border-accent-200' : 'bg-gray-100 text-gray-600'}
+                  `}>
+                    {index + 1}
+                  </span>
+
+                  <div className="min-w-0 flex-1">
+                    <h3 className="text-sm font-medium text-gray-900 truncate group-hover:text-primary-600 transition-colors">
+                      {campaign.name}
+                    </h3>
+                    {campaign.status && (
+                      <span className={`
+                        inline-block text-xs px-2 py-0.5 rounded-full mt-1 border
+                        ${campaign.status === 'active' ? 'bg-primary-50 text-primary-700 border-primary-200' : ''}
+                        ${campaign.status === 'paused' ? 'bg-warning-50 text-warning-700 border-warning-200' : ''}
+                        ${campaign.status === 'completed' ? 'bg-accent-50 text-accent-700 border-accent-200' : ''}
+                      `}>
+                        {campaign.status}
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <span className="flex-shrink-0 text-sm font-bold text-gray-900">
+                  {campaign.engagementRate}%
+                </span>
+              </div>
+
+              <div className="relative h-2 bg-gray-100 rounded-full overflow-hidden">
+                <div
+                  className={`absolute inset-y-0 left-0 ${progressColor} transition-all duration-500 rounded-full`}
+                  style={{ width: `${campaign.engagementRate}%` }}
+                  role="progressbar"
+                  aria-valuenow={campaign.engagementRate}
+                  aria-valuemin={0}
+                  aria-valuemax={100}
+                  aria-label={`${campaign.name} engagement rate: ${campaign.engagementRate}%`}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {campaigns.length > 0 && (
+        <div className="mt-6 pt-6 border-t border-gray-200">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-gray-600">Average Engagement</span>
+            <span className="font-bold text-gray-900">
+              {Math.round(
+                campaigns.reduce((sum, c) => sum + c.engagementRate, 0) / campaigns.length
+              )}%
+            </span>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}