availsync 0.1.0

package/frontend/components/pricing/PricingCards.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { Check } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { billingUpgradesEnabled } from '@/lib/billing';
+import { plans } from '@/lib/plans';
+import { WaitlistDialog } from '@/components/waitlist/WaitlistDialog';
+
+export function PricingCards() {
+  const upgradesEnabled = billingUpgradesEnabled();
+  const [waitlistPlan, setWaitlistPlan] = useState<'individual' | 'team' | null>(null);
+  return (
+    <>
+    <div id="waitlist" className="grid gap-4 md:grid-cols-3">
+      {plans.map((plan) => {
+        const paidWaitlist = plan.id !== 'free' && !upgradesEnabled;
+        return (
+          <Card className={plan.id === 'individual' ? 'border-accent bg-surface-raised' : ''} key={plan.id}>
+            <div className="flex items-center justify-between gap-3">
+              <p className="text-label font-semibold uppercase text-text-tertiary">{plan.name}</p>
+              {paidWaitlist && (
+                <span className="rounded border border-border bg-bg px-2 py-1 text-label text-text-tertiary">
+                  Waitlist
+                </span>
+              )}
+            </div>
+            <p className="mt-4 text-4xl font-semibold text-text-primary">
+              {paidWaitlist ? 'Waitlist' : plan.price}
+              {!paidWaitlist && <span className="text-base text-text-tertiary">{plan.period}</span>}
+            </p>
+            <p className="mt-3 min-h-14 text-body leading-6 text-text-secondary">
+              {paidWaitlist ? `${plan.description} Paid upgrades are in private pilot.` : plan.description}
+            </p>
+            <Button
+              className="mt-6 w-full"
+              href={paidWaitlist ? undefined : plan.href}
+              onClick={paidWaitlist ? () => setWaitlistPlan(plan.id as 'individual' | 'team') : undefined}
+            >
+              {paidWaitlist ? 'Join waitlist' : plan.cta}
+            </Button>
+            <div className="mt-6 space-y-3">
+              {plan.features.map((feature) => (
+                <p className="flex gap-2 text-body text-text-secondary" key={feature}>
+                  <Check className="h-4 w-4 text-success" />
+                  {feature}
+                </p>
+              ))}
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+    {waitlistPlan && (
+      <WaitlistDialog
+        open
+        plan={waitlistPlan}
+        source="pricing"
+        onClose={() => setWaitlistPlan(null)}
+      />
+    )}
+    </>
+  );
+}

package/frontend/components/privacy/CookieConsent.tsx

@@ -0,0 +1,230 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { X } from 'lucide-react';
+import {
+  getCookieConsent,
+  OPEN_COOKIE_SETTINGS_EVENT,
+  setCookieConsent,
+  type CookieConsent as StoredCookieConsent,
+} from '@/lib/cookieConsent';
+
+type PreferenceState = {
+  analytics: boolean;
+  marketing: boolean;
+};
+
+const defaultPreferences: PreferenceState = {
+  analytics: false,
+  marketing: false,
+};
+
+function preferencesFromConsent(consent: StoredCookieConsent | null): PreferenceState {
+  return {
+    analytics: consent?.categories.analytics ?? false,
+    marketing: consent?.categories.marketing ?? false,
+  };
+}
+
+export function CookieConsent() {
+  const [loaded, setLoaded] = useState(false);
+  const [showBanner, setShowBanner] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [preferences, setPreferences] = useState<PreferenceState>(defaultPreferences);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const existing = getCookieConsent();
+    setPreferences(preferencesFromConsent(existing));
+    setShowBanner(!existing);
+    setLoaded(true);
+
+    const openSettings = () => {
+      const latest = getCookieConsent();
+      setPreferences(preferencesFromConsent(latest));
+      setShowBanner(false);
+      setShowModal(true);
+    };
+
+    window.addEventListener(OPEN_COOKIE_SETTINGS_EVENT, openSettings);
+    return () => window.removeEventListener(OPEN_COOKIE_SETTINGS_EVENT, openSettings);
+  }, []);
+
+  useEffect(() => {
+    if (!showModal) return;
+
+    modalRef.current?.focus();
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setShowModal(false);
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [showModal]);
+
+  function save(nextPreferences: PreferenceState) {
+    setCookieConsent(nextPreferences);
+    setPreferences(nextPreferences);
+    setShowBanner(false);
+    setShowModal(false);
+  }
+
+  if (!loaded) return null;
+
+  return (
+    <>
+      {showBanner && (
+        <section
+          aria-label="Cookie notice"
+          className="fixed inset-x-0 bottom-0 z-[80] border-t border-border bg-bg/96 px-4 py-4 text-text-primary shadow-[0_-18px_60px_rgba(0,0,0,0.45)] backdrop-blur"
+        >
+          <div className="mx-auto flex max-w-6xl flex-col gap-4 md:flex-row md:items-center md:justify-between">
+            <div className="max-w-2xl">
+              <p className="text-heading font-semibold">Cookies on Availsync</p>
+              <p className="mt-1 text-body leading-6 text-text-secondary">
+                We use necessary cookies for login and security. Optional analytics and marketing
+                cookies stay off unless you allow them.
+              </p>
+            </div>
+            <div className="grid gap-2 sm:grid-cols-3 md:flex md:shrink-0">
+              <button
+                className="min-h-11 rounded border border-border px-4 text-body font-medium text-text-secondary transition hover:border-border-focus hover:text-text-primary"
+                onClick={() => setShowModal(true)}
+              >
+                Manage preferences
+              </button>
+              <button
+                className="min-h-11 rounded border border-border px-4 text-body font-medium text-text-secondary transition hover:border-border-focus hover:text-text-primary"
+                onClick={() => save({ analytics: false, marketing: false })}
+              >
+                Reject optional
+              </button>
+              <button
+                className="min-h-11 rounded bg-accent px-4 text-body font-medium text-white transition hover:bg-accent-hover"
+                onClick={() => save({ analytics: true, marketing: true })}
+              >
+                Accept all
+              </button>
+            </div>
+          </div>
+        </section>
+      )}
+
+      {showModal && (
+        <div className="fixed inset-0 z-[90] flex items-end justify-center bg-black/60 p-3 sm:items-center sm:p-6">
+          <div
+            aria-labelledby="cookie-preferences-title"
+            aria-modal="true"
+            className="max-h-[calc(100dvh-24px)] w-full max-w-xl overflow-y-auto rounded border border-border bg-surface p-5 text-text-primary shadow-2xl outline-none"
+            ref={modalRef}
+            role="dialog"
+            tabIndex={-1}
+          >
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <p className="text-label uppercase text-text-tertiary">Privacy controls</p>
+                <h2 className="mt-1 text-title font-semibold" id="cookie-preferences-title">
+                  Cookie preferences
+                </h2>
+              </div>
+              <button
+                aria-label="Close cookie preferences"
+                className="flex min-h-10 min-w-10 items-center justify-center rounded border border-border text-text-secondary transition hover:border-border-focus hover:text-text-primary"
+                onClick={() => setShowModal(false)}
+              >
+                <X aria-hidden="true" className="h-4 w-4" />
+              </button>
+            </div>
+
+            <p className="mt-4 text-body leading-6 text-text-secondary">
+              Necessary cookies keep login and security working. Optional categories are prepared
+              for future analytics and marketing, but no third-party tracking is loaded in this
+              slice.
+            </p>
+
+            <div className="mt-5 space-y-3">
+              <div className="rounded border border-border bg-bg p-4">
+                <div className="flex items-start justify-between gap-4">
+                  <div>
+                    <h3 className="text-heading font-semibold">Necessary</h3>
+                    <p className="mt-1 text-body leading-6 text-text-secondary">
+                      Required for dashboard sessions, security, and saving this preference.
+                    </p>
+                  </div>
+                  <span className="rounded bg-success/15 px-2 py-1 text-label font-medium uppercase text-success">
+                    Always on
+                  </span>
+                </div>
+              </div>
+
+              <label className="block rounded border border-border bg-bg p-4">
+                <span className="flex items-start justify-between gap-4">
+                  <span>
+                    <span className="block text-heading font-semibold">Analytics</span>
+                    <span className="mt-1 block text-body leading-6 text-text-secondary">
+                      Helps measure product usage if analytics is added later.
+                    </span>
+                  </span>
+                  <input
+                    checked={preferences.analytics}
+                    className="mt-1 h-5 w-5 accent-accent"
+                    onChange={(event) =>
+                      setPreferences((current) => ({
+                        ...current,
+                        analytics: event.target.checked,
+                      }))
+                    }
+                    type="checkbox"
+                  />
+                </span>
+              </label>
+
+              <label className="block rounded border border-border bg-bg p-4">
+                <span className="flex items-start justify-between gap-4">
+                  <span>
+                    <span className="block text-heading font-semibold">Marketing</span>
+                    <span className="mt-1 block text-body leading-6 text-text-secondary">
+                      Allows campaign attribution or ad pixels if they are added later.
+                    </span>
+                  </span>
+                  <input
+                    checked={preferences.marketing}
+                    className="mt-1 h-5 w-5 accent-accent"
+                    onChange={(event) =>
+                      setPreferences((current) => ({
+                        ...current,
+                        marketing: event.target.checked,
+                      }))
+                    }
+                    type="checkbox"
+                  />
+                </span>
+              </label>
+            </div>
+
+            <div className="mt-5 grid gap-2 sm:grid-cols-3">
+              <button
+                className="min-h-11 rounded border border-border px-4 text-body font-medium text-text-secondary transition hover:border-border-focus hover:text-text-primary"
+                onClick={() => save({ analytics: false, marketing: false })}
+              >
+                Reject optional
+              </button>
+              <button
+                className="min-h-11 rounded border border-border px-4 text-body font-medium text-text-secondary transition hover:border-border-focus hover:text-text-primary"
+                onClick={() => save(preferences)}
+              >
+                Save choices
+              </button>
+              <button
+                className="min-h-11 rounded bg-accent px-4 text-body font-medium text-white transition hover:bg-accent-hover"
+                onClick={() => save({ analytics: true, marketing: true })}
+              >
+                Accept all
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/frontend/components/privacy/CookieSettingsButton.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { OPEN_COOKIE_SETTINGS_EVENT } from '@/lib/cookieConsent';
+
+export function CookieSettingsButton({ className }: { className?: string }) {
+  return (
+    <button
+      className={className}
+      onClick={() => window.dispatchEvent(new Event(OPEN_COOKIE_SETTINGS_EVENT))}
+      type="button"
+    >
+      Cookie settings
+    </button>
+  );
+}

package/frontend/components/seo/JsonLd.tsx

@@ -0,0 +1,10 @@
+export function JsonLd({ data }: { data: Record<string, unknown> }) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(data).replace(/</g, '\\u003c'),
+      }}
+    />
+  );
+}

package/frontend/components/signup/SignupForm.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { createOrg } from '@/lib/api';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+
+export function SignupForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      const org = await createOrg(name);
+      router.push(`/app/onboarding?orgId=${org.id}&plan=${searchParams.get('plan') || 'free'}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not create organization');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="mt-8 grid gap-4">
+      <form className="rounded border border-border bg-surface p-5" onSubmit={onSubmit}>
+        <label className="text-label uppercase text-text-tertiary" htmlFor="org-name">
+          Organization name
+        </label>
+        <Input
+          id="org-name"
+          required
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+        {error && <p className="mt-3 text-body text-error">{error}</p>}
+        <Button className="mt-5 w-full" disabled={loading} type="submit">
+          {loading ? 'Creating...' : 'Create organization'}
+        </Button>
+      </form>
+      <p className="text-body text-text-secondary">
+        Already have a workspace?{' '}
+        <a className="font-semibold text-accent" href="/login">
+          Sign in
+        </a>
+      </p>
+    </div>
+  );
+}

package/frontend/components/ui/Badge.tsx

@@ -0,0 +1,23 @@
+const variants = {
+  success: 'bg-success/15 text-success',
+  warning: 'bg-warning/15 text-warning',
+  error: 'bg-error/15 text-error',
+  neutral: 'bg-border text-text-secondary',
+  accent: 'bg-accent/15 text-accent',
+} as const;
+
+export function Badge({
+  variant = 'neutral',
+  children,
+}: {
+  variant?: keyof typeof variants;
+  children: React.ReactNode;
+}) {
+  return (
+    <span
+      className={`inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium leading-4 ${variants[variant]}`}
+    >
+      {children}
+    </span>
+  );
+}

package/frontend/components/ui/Button.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: 'primary' | 'secondary' | 'ghost';
+  href?: string;
+  children: ReactNode;
+};
+
+const variants = {
+  primary: 'bg-accent text-white hover:bg-accent-hover',
+  secondary: 'bg-surface-raised text-text-primary border border-border hover:border-border-focus',
+  ghost: 'bg-transparent text-text-secondary hover:bg-surface-raised hover:text-text-primary',
+};
+
+export function Button({ variant = 'primary', href, className, children, ...props }: ButtonProps) {
+  const classes = twMerge(
+    'inline-flex min-h-10 items-center justify-center gap-2 rounded px-4 text-body font-medium transition duration-150 disabled:cursor-not-allowed disabled:opacity-60 active:scale-[0.98]',
+    variants[variant],
+    className,
+  );
+
+  if (href) {
+    return (
+      <Link className={classes} href={href}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button className={classes} {...props}>
+      {children}
+    </button>
+  );
+}

package/frontend/components/ui/Card.tsx

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={twMerge('rounded border border-border bg-surface p-5', className)}
+      {...props}
+    />
+  );
+}

package/frontend/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useState } from 'react';
+import { X } from 'lucide-react';
+
+export function ConfirmDialog({
+  title,
+  description,
+  confirmText,
+  confirmLabel = 'Confirm',
+  onConfirm,
+  onCancel,
+  destructive = false,
+}: {
+  title: string;
+  description: string;
+  confirmText?: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  destructive?: boolean;
+}) {
+  const [input, setInput] = useState('');
+  const canConfirm = confirmText ? input === confirmText : true;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/60" onClick={onCancel} />
+      <div className="relative w-full max-w-md rounded-lg bg-surface border border-border p-5">
+        <button
+          onClick={onCancel}
+          className="absolute top-3 right-3 text-text-tertiary hover:text-text-secondary"
+        >
+          <X className="h-4 w-4" />
+        </button>
+
+        <h3 className="text-heading font-medium text-text-primary mb-2">{title}</h3>
+        <p className="text-body text-text-secondary mb-4">{description}</p>
+
+        {confirmText && (
+          <div className="mb-4">
+            <p className="text-body text-text-secondary mb-2">
+              Type <span className="font-mono text-text-primary">{confirmText}</span> to
+              confirm:
+            </p>
+            <input
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              className="w-full rounded bg-bg border border-border px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+              autoFocus
+            />
+          </div>
+        )}
+
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={onCancel}
+            className="rounded px-3 py-1.5 text-body text-text-secondary hover:bg-surface-raised transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={!canConfirm}
+            className={`rounded px-3 py-1.5 text-body font-medium transition-colors disabled:opacity-40 ${
+              destructive
+                ? 'bg-error/15 text-error hover:bg-error/25'
+                : 'bg-accent text-white hover:bg-accent-hover'
+            }`}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/components/ui/EmptyState.tsx

@@ -0,0 +1,24 @@
+import type { LucideIcon } from 'lucide-react';
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+}: {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  action?: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 text-center">
+      <div className="rounded-lg bg-surface p-3 mb-4">
+        <Icon className="h-6 w-6 text-text-tertiary" />
+      </div>
+      <h3 className="text-heading font-medium text-text-primary mb-1">{title}</h3>
+      <p className="text-body text-text-secondary max-w-sm mb-4">{description}</p>
+      {action}
+    </div>
+  );
+}

package/frontend/components/ui/Input.tsx

@@ -0,0 +1,14 @@
+import { type InputHTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      className={twMerge(
+        'min-h-10 w-full rounded border border-border bg-surface px-3 text-body text-text-primary outline-none transition focus:border-border-focus',
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/frontend/components/ui/KeyDisplay.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Copy, Eye, EyeOff } from 'lucide-react';
+
+export function KeyDisplay({ apiKey, masked = true }: { apiKey: string; masked?: boolean }) {
+  const [revealed, setRevealed] = useState(!masked);
+  const [copied, setCopied] = useState(false);
+
+  const maskedKey = apiKey.length > 8
+    ? `${apiKey.slice(0, 4)}${'•'.repeat(8)}${apiKey.slice(-4)}`
+    : '•'.repeat(apiKey.length);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(apiKey);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [apiKey]);
+
+  const handleReveal = useCallback(() => {
+    setRevealed(true);
+    setTimeout(() => setRevealed(false), 5000);
+  }, []);
+
+  return (
+    <div className="flex items-center gap-2 rounded bg-surface border border-border px-3 py-1.5 font-mono text-body">
+      <span className="flex-1 truncate text-text-secondary select-all">
+        {revealed ? apiKey : maskedKey}
+      </span>
+      {masked && (
+        <button
+          onClick={revealed ? () => setRevealed(false) : handleReveal}
+          className="text-text-tertiary hover:text-text-secondary transition-colors"
+          title={revealed ? 'Hide' : 'Reveal for 5 seconds'}
+        >
+          {revealed ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+        </button>
+      )}
+      <button
+        onClick={handleCopy}
+        className="text-text-tertiary hover:text-text-secondary transition-colors"
+        title="Copy"
+      >
+        <Copy className="h-3.5 w-3.5" />
+      </button>
+      {copied && <span className="text-[11px] text-success">Copied</span>}
+    </div>
+  );
+}

package/frontend/components/ui/Select.tsx

@@ -0,0 +1,14 @@
+import { type SelectHTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function Select({ className, ...props }: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select
+      className={twMerge(
+        'min-h-10 w-full rounded border border-border bg-surface px-3 text-body text-text-primary outline-none transition focus:border-border-focus',
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/frontend/components/ui/Skeleton.tsx

@@ -0,0 +1,24 @@
+export function Skeleton({ className = '' }: { className?: string }) {
+  return <div className={`skeleton ${className}`} />;
+}
+
+export function SkeletonRow() {
+  return (
+    <div className="flex items-center gap-4 px-4 h-9">
+      <Skeleton className="h-3 w-24" />
+      <Skeleton className="h-3 w-32" />
+      <Skeleton className="h-3 w-16" />
+      <Skeleton className="h-3 w-20" />
+    </div>
+  );
+}
+
+export function SkeletonMetric() {
+  return (
+    <div className="rounded border border-border bg-surface p-4">
+      <Skeleton className="h-3 w-20 mb-3" />
+      <Skeleton className="h-6 w-12 mb-1" />
+      <Skeleton className="h-3 w-16" />
+    </div>
+  );
+}