amliq-dashboard 2.0.0

package/src/pages/marketing/ProductTabs.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Zap, LayoutDashboard, Code, Code2, FileText } from 'lucide-react'
+import clsx from 'clsx'
+import { ProductType } from '../../types/billing'
+
+interface ProductTabsProps {
+  activeProduct: ProductType
+  onChange: (product: ProductType) => void
+}
+
+const productIcons: Record<ProductType, React.ReactNode> = {
+  api: <Zap className="w-4 h-4" />,
+  dashboard: <LayoutDashboard className="w-4 h-4" />,
+  sdk: <Code className="w-4 h-4" />,
+  iframe: <Code2 className="w-4 h-4" />,
+  dataset: <FileText className="w-4 h-4" />,
+}
+
+const productIds: ProductType[] = ['api', 'dashboard', 'sdk', 'iframe', 'dataset']
+
+export function ProductTabs({ activeProduct, onChange }: ProductTabsProps) {
+  const { t } = useTranslation('marketing')
+
+  return (
+    <div className="flex overflow-x-auto gap-xs px-lg py-md bg-apple-bg/50 rounded-apple-lg border border-white/10">
+      {productIds.map(id => (
+        <button
+          type="button"
+          key={id}
+          onClick={() => onChange(id)}
+          className={clsx(
+            'flex items-center gap-xs px-md py-sm rounded-apple-md whitespace-nowrap transition-all sf-body',
+            activeProduct === id
+              ? 'bg-apple-blue text-white'
+              : 'text-apple-label-secondary hover:bg-white/5'
+          )}
+        >
+          {productIcons[id]}
+          <span className="hidden sm:inline">{t(`products.${id}`)}</span>
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/pages/marketing/QuoteRotator.tsx

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { FadeUp } from './animations'
+
+const quotes = [
+  "Other platforms give you 200 alerts. AMLIQ gives you 3. And they actually matter.",
+  "Less noise. More signal. Finally.",
+  "The real luxury isn't automation — it's confidence.",
+  "False positives aren't just annoying — they're expensive.",
+  "Fewer alerts. Better decisions.",
+  "Everyone's building dashboards. AMLIQ is building decisions.",
+]
+
+export default function QuoteRotator() {
+  const [idx, setIdx] = useState(0)
+
+  useEffect(() => {
+    const timer = setInterval(() => setIdx(i => (i + 1) % quotes.length), 5000)
+    return () => clearInterval(timer)
+  }, [])
+
+  return (
+    <section className="py-24 px-4">
+      <div className="max-w-3xl mx-auto text-center">
+        <FadeUp>
+          <p className="text-xs uppercase tracking-[0.2em] text-[#94A3B8] font-semibold mb-10">
+            What compliance teams are saying
+          </p>
+          <div className="h-[120px] sm:h-[100px] flex items-center justify-center">
+            <AnimatePresence mode="wait">
+              <motion.blockquote key={idx}
+                className="text-2xl sm:text-3xl font-semibold text-[#0F172A] leading-snug"
+                style={{ letterSpacing: '-0.01em' }}
+                initial={{ opacity: 0, y: 16, filter: 'blur(4px)' }}
+                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+                exit={{ opacity: 0, y: -16, filter: 'blur(4px)' }}
+                transition={{ duration: 0.5 }}>
+                &ldquo;{quotes[idx]}&rdquo;
+              </motion.blockquote>
+            </AnimatePresence>
+          </div>
+          <div className="flex justify-center gap-2 mt-10">
+            {quotes.map((_, i) => (
+              <motion.button key={i} type="button" onClick={() => setIdx(i)}
+                className="w-2 h-2 rounded-full cursor-pointer"
+                style={{ background: i === idx ? '#00B894' : '#CBD5E1' }}
+                whileHover={{ scale: 1.5 }}
+                animate={{ scale: i === idx ? 1.3 : 1 }}
+                transition={{ type: 'spring', stiffness: 300 }} />
+            ))}
+          </div>
+        </FadeUp>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/StatsBar.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from 'react'
+import { motion } from 'framer-motion'
+import { FadeUp } from './animations'
+
+const stats = [
+  { value: 3000000, suffix: '+', label: 'Entities in Database', format: true },
+  { value: 6, suffix: '', label: 'AI Matching Layers', format: false },
+  { value: 1, suffix: 'ms', label: 'Screening Latency', format: false, prefix: '<' },
+  { value: 86, suffix: '', label: 'Sanctions Lists', format: false },
+]
+
+function AnimatedNumber({ value, suffix, prefix, format }: {
+  value: number; suffix: string; prefix?: string; format: boolean
+}) {
+  const [current, setCurrent] = useState(0)
+  const ref = useRef<HTMLDivElement>(null)
+  const started = useRef(false)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const obs = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting && !started.current) {
+        started.current = true
+        const steps = 50
+        let step = 0
+        const timer = setInterval(() => {
+          step++
+          const progress = step / steps
+          const eased = 1 - Math.pow(1 - progress, 3)
+          setCurrent(value * eased)
+          if (step >= steps) clearInterval(timer)
+        }, 25)
+      }
+    }, { threshold: 0.5 })
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [value])
+
+  const display = format
+    ? Math.floor(current).toLocaleString()
+    : Math.floor(current).toString()
+
+  return (
+    <div ref={ref} className="text-center px-6">
+      <motion.p
+        className="text-4xl sm:text-5xl font-extrabold tracking-tight mb-2"
+        style={{
+          background: 'linear-gradient(135deg, #0F172A 0%, #334155 100%)',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+        }}>
+        {prefix}{display}{suffix}
+      </motion.p>
+      <div className="h-0.5 w-10 mx-auto rounded-full bg-gradient-to-r from-[#00B894] to-[#6366F1] mb-2" />
+    </div>
+  )
+}
+
+export default function StatsBar() {
+  return (
+    <section className="py-20 px-4" style={{
+      background: 'linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%)',
+      borderTop: '1px solid rgba(0,0,0,0.04)',
+      borderBottom: '1px solid rgba(0,0,0,0.04)',
+    }}>
+      <div className="max-w-5xl mx-auto">
+        <FadeUp>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-10 md:gap-0 md:divide-x md:divide-[#E2E8F0]">
+            {stats.map(s => (
+              <div key={s.label} className="text-center px-6">
+                <AnimatedNumber value={s.value} suffix={s.suffix} prefix={s.prefix} format={s.format} />
+                <p className="text-sm text-[#94A3B8] font-medium mt-1">{s.label}</p>
+              </div>
+            ))}
+          </div>
+        </FadeUp>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/StatsSection.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Layers, Globe, Zap, ShieldCheck } from 'lucide-react'
+
+const statIcons = [
+  <Layers size={20} />,
+  <Globe size={20} />,
+  <Zap size={20} />,
+  <ShieldCheck size={20} />,
+]
+
+export default function StatsSection() {
+  const { t } = useTranslation('marketing')
+
+  const stats = [
+    { label: t('stats.screened_daily'), value: t('stats.screened_value') },
+    { label: t('stats.uptime'), value: t('stats.uptime_value') },
+    { label: t('stats.fewer_fp'), value: t('stats.fewer_fp_value') },
+    { label: t('stats.latency'), value: t('stats.latency_value') },
+  ]
+
+  return (
+    <section className="py-20 px-4">
+      <div className="max-w-6xl mx-auto">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          {stats.map((stat, i) => (
+            <div
+              key={i}
+              className="card-vibrancy p-lg text-center group hover:border-apple-blue/40 transition-all cursor-default"
+            >
+              <div className="flex justify-center mb-md text-apple-blue">
+                {statIcons[i]}
+              </div>
+              <p className="text-3xl sm:text-4xl font-bold text-white mb-xs tracking-tight">
+                {stat.value}
+              </p>
+              <p className="sf-caption text-apple-label-secondary">{stat.label}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/TestimonialCard.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Quote } from 'lucide-react'
+
+interface TestimonialCardProps {
+  quote: string
+  author: string
+  title: string
+  company: string
+}
+
+function Initials({ name }: { name: string }) {
+  const initials = name.split(' ').map(n => n[0]).join('').slice(0, 2)
+  return (
+    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-apple-blue to-apple-green flex items-center justify-center text-white text-sm font-bold shrink-0">
+      {initials}
+    </div>
+  )
+}
+
+export default function TestimonialCard({ quote, author, title, company }: TestimonialCardProps) {
+  return (
+    <div className="card-vibrancy p-lg h-full flex flex-col">
+      <Quote size={20} className="text-apple-blue/40 mb-md shrink-0" />
+
+      <p className="sf-body text-apple-label-secondary leading-relaxed flex-1 mb-lg">
+        {quote}
+      </p>
+
+      <div className="flex items-center gap-md">
+        <Initials name={author} />
+        <div>
+          <p className="sf-headline text-white">{author}</p>
+          <p className="sf-caption text-apple-label-tertiary">{title}, {company}</p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/marketing/TestimonialsSection.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import TestimonialCard from './TestimonialCard'
+
+export default function TestimonialsSection() {
+  const { t } = useTranslation('marketing')
+  const items = t('testimonials.items', { returnObjects: true }) as Array<{
+    quote: string; author: string; title: string; company: string
+  }>
+
+  return (
+    <section className="py-20 px-4">
+      <div className="max-w-6xl mx-auto">
+        <h2 className="text-sf-title font-bold text-white text-center mb-12">
+          {t('testimonials.heading')}
+        </h2>
+        <div className="flex md:grid md:grid-cols-3 gap-6 overflow-x-auto snap-x snap-mandatory pb-4 -mx-4 px-4 md:mx-0 md:px-0 md:overflow-visible">
+          {items.map((item, i) => (
+            <div key={i} className="min-w-[300px] md:min-w-0 snap-center">
+              <TestimonialCard
+                quote={item.quote}
+                author={item.author}
+                title={item.title}
+                company={item.company}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/pages/marketing/animations.tsx

@@ -0,0 +1,56 @@
+import { useRef } from 'react'
+import { motion, useScroll, useTransform, useInView } from 'framer-motion'
+import type { ReactNode } from 'react'
+
+export function FadeUp({ children, delay = 0 }: { children: ReactNode; delay?: number }) {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, margin: '-60px' })
+  return (
+    <motion.div ref={ref}
+      initial={{ opacity: 0, y: 32 }}
+      animate={isInView ? { opacity: 1, y: 0 } : {}}
+      transition={{ duration: 0.7, delay, ease: [0.25, 0.4, 0, 1] }}>
+      {children}
+    </motion.div>
+  )
+}
+
+export function ScaleIn({ children, delay = 0 }: { children: ReactNode; delay?: number }) {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, margin: '-40px' })
+  return (
+    <motion.div ref={ref}
+      initial={{ opacity: 0, scale: 0.92 }}
+      animate={isInView ? { opacity: 1, scale: 1 } : {}}
+      transition={{ duration: 0.6, delay, ease: [0.25, 0.4, 0, 1] }}>
+      {children}
+    </motion.div>
+  )
+}
+
+export function SlideIn({ children, from = 'left', delay = 0 }: {
+  children: ReactNode; from?: 'left' | 'right'; delay?: number
+}) {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, margin: '-40px' })
+  const x = from === 'left' ? -48 : 48
+  return (
+    <motion.div ref={ref}
+      initial={{ opacity: 0, x }}
+      animate={isInView ? { opacity: 1, x: 0 } : {}}
+      transition={{ duration: 0.7, delay, ease: [0.25, 0.4, 0, 1] }}>
+      {children}
+    </motion.div>
+  )
+}
+
+export function Parallax({ children, speed = 0.3 }: { children: ReactNode; speed?: number }) {
+  const ref = useRef(null)
+  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] })
+  const y = useTransform(scrollYProgress, [0, 1], [0, -80 * speed])
+  return (
+    <motion.div ref={ref} style={{ y }}>
+      {children}
+    </motion.div>
+  )
+}

package/src/pages/onboarding/CountryStep.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Country { code: string; label: string }
+interface Props {
+  countries: Country[]
+  value: string
+  onChange: (code: string) => void
+}
+
+export function CountryStep({ countries, value, onChange }: Props) {
+  const { t } = useTranslation('onboarding')
+
+  return (
+    <div className="rounded-apple-lg border border-white/10 bg-white/5 p-lg space-y-md">
+      <h2 className="sf-body font-medium text-white">{t('country.title')}</h2>
+      <p className="sf-caption text-apple-label-secondary">
+        {t('country.description')}
+      </p>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-sm">
+        {countries.map(c => (
+          <button
+            key={c.code}
+            onClick={() => onChange(c.code)}
+            className={`p-md rounded-apple-md border text-left transition-colors ${
+              value === c.code
+                ? 'border-apple-blue bg-apple-blue/10 text-white'
+                : 'border-white/10 bg-white/5 text-apple-label-secondary hover:border-white/20'
+            }`}
+          >
+            <span className="sf-body font-medium">{c.label}</span>
+            <span className="sf-caption block mt-xs">{c.code}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/pages/onboarding/ListsStep.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { CheckCircle2 } from 'lucide-react'
+
+interface ListSuggestion { list_id: string; threshold: number; sync_enabled: boolean }
+interface Props { lists: ListSuggestion[]; onNext: () => void }
+
+export function ListsStep({ lists, onNext }: Props) {
+  const { t } = useTranslation('onboarding')
+
+  return (
+    <div className="rounded-apple-lg border border-white/10 bg-white/5 p-lg space-y-md">
+      <h2 className="sf-body font-medium text-white">{t('lists.title')}</h2>
+      <p className="sf-caption text-apple-label-secondary">
+        {t('lists.description')}
+      </p>
+      <div className="space-y-sm">
+        {lists.map(l => (
+          <div key={l.list_id} className="flex items-center gap-sm p-md rounded-apple-md border border-white/10 bg-white/5">
+            <CheckCircle2 className="w-5 h-5 text-green-400 shrink-0" />
+            <div className="flex-1">
+              <span className="sf-body text-white uppercase">{l.list_id}</span>
+              <span className="sf-caption text-apple-label-secondary block">
+                {t('lists.threshold')} {(l.threshold * 100).toFixed(0)}%
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+      {lists.length === 0 && (
+        <p className="sf-caption text-apple-label-secondary text-center py-md">
+          {t('lists.loading')}
+        </p>
+      )}
+      <button
+        onClick={onNext}
+        disabled={lists.length === 0}
+        className="w-full py-md bg-apple-blue hover:bg-apple-blue/80 text-white rounded-apple-md sf-body font-medium transition-colors disabled:opacity-50"
+      >
+        {t('continue')}
+      </button>
+    </div>
+  )
+}

package/src/pages/onboarding/StepIndicator.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props { current: number }
+
+const STEP_KEYS = ['country', 'lists', 'threshold'] as const
+
+export function StepIndicator({ current }: Props) {
+  const { t } = useTranslation('onboarding')
+
+  return (
+    <div className="flex items-center justify-center gap-sm">
+      {STEP_KEYS.map((key, i) => {
+        const stepNum = i + 1
+        const active = stepNum <= current
+        return (
+          <div key={key} className="flex items-center gap-xs">
+            <div className={`w-8 h-8 rounded-full flex items-center justify-center sf-caption font-medium ${
+              active ? 'bg-apple-blue text-white' : 'bg-white/10 text-apple-label-secondary'
+            }`}>
+              {stepNum}
+            </div>
+            <span className={`sf-caption ${active ? 'text-white' : 'text-apple-label-secondary'}`}>
+              {t(`steps.${key}`)}
+            </span>
+            {i < STEP_KEYS.length - 1 && (
+              <div className={`w-12 h-px ${active ? 'bg-apple-blue' : 'bg-white/10'}`} />
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/pages/onboarding/ThresholdStep.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  value: number
+  onChange: (v: number) => void
+  onFinish: () => void
+  saving: boolean
+}
+
+export function ThresholdStep({ value, onChange, onFinish, saving }: Props) {
+  const { t } = useTranslation('onboarding')
+
+  return (
+    <div className="rounded-apple-lg border border-white/10 bg-white/5 p-lg space-y-md">
+      <h2 className="sf-body font-medium text-white">{t('threshold.title')}</h2>
+      <p className="sf-caption text-apple-label-secondary">
+        {t('threshold.description')}
+      </p>
+      <div className="space-y-sm">
+        <div className="flex justify-between sf-caption text-apple-label-secondary">
+          <span>{t('threshold.low')}</span>
+          <span>{t('threshold.current')} {value}%</span>
+          <span>{t('threshold.high')}</span>
+        </div>
+        <input
+          type="range"
+          min={50} max={95} step={5} value={value}
+          aria-valuetext={`${value}%`}
+          aria-label={t('threshold.title')}
+          onChange={e => onChange(Number(e.target.value))}
+          className="w-full accent-apple-blue"
+        />
+        <p className="sf-caption text-apple-label-secondary text-center">
+          {value < 65 ? t('threshold.hint_more') :
+           value > 85 ? t('threshold.hint_fewer') :
+           t('threshold.hint_balanced')}
+        </p>
+      </div>
+      <button
+        onClick={onFinish}
+        disabled={saving}
+        className="w-full py-md bg-apple-blue hover:bg-apple-blue/80 text-white rounded-apple-md sf-body font-medium transition-colors disabled:opacity-50"
+      >
+        {saving ? t('threshold.starting') : t('threshold.start')}
+      </button>
+    </div>
+  )
+}

package/src/pages/platform/APIKeys.tsx

@@ -0,0 +1,102 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Key, Trash2 } from 'lucide-react'
+import { PageHeader } from '../../components/layout/PageHeader'
+import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
+import { Badge } from '../../components/ui/Badge'
+import { api } from '../../api/client'
+
+interface APIKey {
+  id: string
+  tenant_id: string
+  product: string
+  key_prefix: string
+  rate_limit: number
+  created_at: string
+}
+
+export default function PlatformAPIKeys() {
+  const { t } = useTranslation('platform')
+  const [keys, setKeys] = useState<APIKey[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    api.get<{ api_keys: APIKey[] }>('/platform/keys')
+      .then(d => setKeys(d?.api_keys ?? []))
+      .catch(() => setKeys([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const handleRevoke = async (keyId: string) => {
+    await api.put(`/platform/keys/${keyId}/revoke`, {})
+    setKeys(prev => prev.filter(k => k.id !== keyId))
+  }
+
+  if (loading) return <div className="flex items-center justify-center h-96"><LoadingSpinner /></div>
+
+  return (
+    <div>
+      <PageHeader title={t('api_keys.title')} description={`${keys.length} API keys`} />
+
+      {/* Desktop table */}
+      <div className="hidden md:block glass-panel rounded-apple-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="text-left text-apple-label-secondary border-b border-white/10">
+              <th className="px-lg py-md">{t('api_keys.prefix')}</th>
+              <th className="px-lg py-md">{t('api_keys.tenant')}</th>
+              <th className="px-lg py-md">{t('api_keys.product')}</th>
+              <th className="px-lg py-md">{t('api_keys.rate_limit')}</th>
+              <th className="px-lg py-md">{t('api_keys.actions')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {keys.map(k => (
+              <tr key={k.id} className="border-b border-white/5 hover:bg-white/5">
+                <td className="px-lg py-md font-mono text-xs">{k.key_prefix}...</td>
+                <td className="px-lg py-md font-mono text-xs">{k.tenant_id}</td>
+                <td className="px-lg py-md"><Badge size="sm" color="blue">{k.product}</Badge></td>
+                <td className="px-lg py-md">{k.rate_limit || t('api_keys.unlimited')}</td>
+                <td className="px-lg py-md">
+                  <button onClick={() => handleRevoke(k.id)}
+                    className="text-apple-red text-xs hover:underline cursor-pointer">
+                    {t('api_keys.revoke')}
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Mobile cards */}
+      <div className="md:hidden space-y-sm">
+        {keys.map(k => (
+          <div key={k.id} className="glass-panel rounded-apple-lg p-lg">
+            <div className="flex items-start justify-between mb-sm">
+              <div className="flex items-center gap-sm">
+                <Key className="w-4 h-4 text-apple-blue flex-shrink-0" />
+                <code className="text-xs font-mono text-white">{k.key_prefix}...</code>
+              </div>
+              <button onClick={() => handleRevoke(k.id)}
+                className="p-xs text-apple-red hover:bg-apple-red/10 rounded-apple-md cursor-pointer">
+                <Trash2 className="w-4 h-4" />
+              </button>
+            </div>
+            <div className="flex flex-wrap gap-sm">
+              <Badge size="sm" color="blue">{k.product}</Badge>
+              <span className="sf-caption text-apple-label-secondary">
+                {k.rate_limit ? `${k.rate_limit} req/min` : t('api_keys.unlimited')}
+              </span>
+            </div>
+            <p className="sf-caption text-apple-label-tertiary mt-xs truncate">{k.tenant_id}</p>
+          </div>
+        ))}
+      </div>
+
+      {keys.length === 0 && (
+        <p className="text-center py-xl text-apple-label-tertiary sf-body">No API keys found</p>
+      )}
+    </div>
+  )
+}