initial wcag-ada

apps/wcag-ada/dashboard/src/pages/auth/login.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { apiClient } from '@/lib/api-client';
+import { useAuthStore } from '@/store/auth-store';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
+
+const loginSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+});
+
+type LoginForm = z.infer<typeof loginSchema>;
+
+export function LoginPage() {
+  const navigate = useNavigate();
+  const { setAuth } = useAuthStore();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginForm>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (data: LoginForm) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await apiClient.login(data.email, data.password);
+      setAuth(response.user, response.token);
+      navigate('/dashboard');
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Login failed. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
+      <div className="rounded-md shadow-sm -space-y-px">
+        <div>
+          <label htmlFor="email" className="sr-only">
+            Email address
+          </label>
+          <input
+            {...register('email')}
+            type="email"
+            autoComplete="email"
+            className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            placeholder="Email address"
+          />
+          {errors.email && (
+            <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
+          )}
+        </div>
+        <div>
+          <label htmlFor="password" className="sr-only">
+            Password
+          </label>
+          <input
+            {...register('password')}
+            type="password"
+            autoComplete="current-password"
+            className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            placeholder="Password"
+          />
+          {errors.password && (
+            <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
+          )}
+        </div>
+      </div>
+
+      {error && (
+        <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+          <p className="text-sm text-red-800 dark:text-red-400">{error}</p>
+        </div>
+      )}
+
+      <div>
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={isLoading}
+        >
+          {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Sign in
+        </Button>
+      </div>
+
+      <div className="text-center">
+        <span className="text-sm text-gray-600 dark:text-gray-400">
+          Don't have an account?{' '}
+          <Link
+            to="/register"
+            className="font-medium text-primary hover:text-primary/80"
+          >
+            Sign up
+          </Link>
+        </span>
+      </div>
+    </form>
+  );
+}

apps/wcag-ada/dashboard/src/pages/auth/register.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { apiClient } from '@/lib/api-client';
+import { useAuthStore } from '@/store/auth-store';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
+
+const registerSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+  name: z.string().optional(),
+  company: z.string().optional(),
+});
+
+type RegisterForm = z.infer<typeof registerSchema>;
+
+export function RegisterPage() {
+  const navigate = useNavigate();
+  const { setAuth } = useAuthStore();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<RegisterForm>({
+    resolver: zodResolver(registerSchema),
+  });
+
+  const onSubmit = async (data: RegisterForm) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await apiClient.register(data);
+      setAuth(response.user, response.token);
+      navigate('/dashboard');
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Registration failed. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
+      <div className="space-y-4">
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+            Email address
+          </label>
+          <input
+            {...register('email')}
+            type="email"
+            autoComplete="email"
+            className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            placeholder="Email address"
+          />
+          {errors.email && (
+            <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+            Password
+          </label>
+          <input
+            {...register('password')}
+            type="password"
+            autoComplete="new-password"
+            className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            placeholder="Password"
+          />
+          {errors.password && (
+            <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+            Name (optional)
+          </label>
+          <input
+            {...register('name')}
+            type="text"
+            autoComplete="name"
+            className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            placeholder="Your name"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="company" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+            Company (optional)
+          </label>
+          <input
+            {...register('company')}
+            type="text"
+            autoComplete="organization"
+            className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            placeholder="Your company"
+          />
+        </div>
+      </div>
+
+      {error && (
+        <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+          <p className="text-sm text-red-800 dark:text-red-400">{error}</p>
+        </div>
+      )}
+
+      <div>
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={isLoading}
+        >
+          {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Create account
+        </Button>
+      </div>
+
+      <div className="text-center">
+        <span className="text-sm text-gray-600 dark:text-gray-400">
+          Already have an account?{' '}
+          <Link
+            to="/login"
+            className="font-medium text-primary hover:text-primary/80"
+          >
+            Sign in
+          </Link>
+        </span>
+      </div>
+    </form>
+  );
+}

apps/wcag-ada/dashboard/src/pages/dashboard/index.tsx

@@ -0,0 +1,243 @@
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api-client';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Loader2, Globe, Scan, AlertCircle, CheckCircle2, TrendingUp, TrendingDown } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { LineChart, Line, AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import { format } from 'date-fns';
+
+export function DashboardPage() {
+  const { data: stats, isLoading: statsLoading } = useQuery({
+    queryKey: ['stats'],
+    queryFn: () => apiClient.getStats(),
+  });
+
+  const { data: recentScans } = useQuery({
+    queryKey: ['recent-scans'],
+    queryFn: () => apiClient.getScans({ limit: 5 }),
+  });
+
+  const { data: websites } = useQuery({
+    queryKey: ['websites-summary'],
+    queryFn: () => apiClient.getWebsites({ limit: 5 }),
+  });
+
+  if (statsLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Stats Grid */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Websites</CardTitle>
+            <Globe className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats?.database?.websites || 0}</div>
+            <p className="text-xs text-muted-foreground">
+              Active websites being monitored
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Scans</CardTitle>
+            <Scan className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats?.database?.scanResults || 0}</div>
+            <p className="text-xs text-muted-foreground">
+              Accessibility scans performed
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Queue Status</CardTitle>
+            <AlertCircle className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats?.queue?.active || 0}</div>
+            <p className="text-xs text-muted-foreground">
+              Active scans in progress
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Success Rate</CardTitle>
+            <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {stats?.queue?.completed && stats?.queue?.failed
+                ? Math.round((stats.queue.completed / (stats.queue.completed + stats.queue.failed)) * 100)
+                : 100}%
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Scan completion rate
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Charts Row */}
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Compliance Trends</CardTitle>
+            <CardDescription>Average compliance scores over time</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[300px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart
+                  data={[
+                    { date: 'Mon', score: 85 },
+                    { date: 'Tue', score: 87 },
+                    { date: 'Wed', score: 86 },
+                    { date: 'Thu', score: 89 },
+                    { date: 'Fri', score: 91 },
+                    { date: 'Sat', score: 90 },
+                    { date: 'Sun', score: 92 },
+                  ]}
+                >
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="date" />
+                  <YAxis domain={[0, 100]} />
+                  <Tooltip />
+                  <Line
+                    type="monotone"
+                    dataKey="score"
+                    stroke="hsl(var(--primary))"
+                    strokeWidth={2}
+                  />
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Issue Distribution</CardTitle>
+            <CardDescription>Violations by severity level</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[300px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                  data={[
+                    { severity: 'Critical', count: 5, fill: 'hsl(var(--destructive))' },
+                    { severity: 'Serious', count: 12, fill: 'hsl(var(--warning))' },
+                    { severity: 'Moderate', count: 25, fill: 'hsl(var(--primary))' },
+                    { severity: 'Minor', count: 45, fill: 'hsl(var(--muted))' },
+                  ]}
+                >
+                  <CartesianGrid strokeDasharray="3 3" />
+                  <XAxis dataKey="severity" />
+                  <YAxis />
+                  <Tooltip />
+                  <Bar dataKey="count" />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Recent Activity */}
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <div>
+              <CardTitle>Recent Scans</CardTitle>
+              <CardDescription>Latest accessibility scan results</CardDescription>
+            </div>
+            <Button variant="outline" size="sm" asChild>
+              <Link to="/scans">View all</Link>
+            </Button>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {recentScans?.scans?.map((scan: any) => (
+                <div key={scan.id} className="flex items-center justify-between">
+                  <div className="flex-1">
+                    <p className="text-sm font-medium">{scan.website?.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {format(new Date(scan.createdAt), 'MMM d, h:mm a')}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {scan.status === 'COMPLETED' ? (
+                      <div className="flex items-center gap-1">
+                        <span className="text-sm font-medium">
+                          {scan.result?.summary?.score || 0}%
+                        </span>
+                        {scan.result?.summary?.score > 90 ? (
+                          <TrendingUp className="h-4 w-4 text-success" />
+                        ) : (
+                          <TrendingDown className="h-4 w-4 text-destructive" />
+                        )}
+                      </div>
+                    ) : (
+                      <span className="text-xs text-muted-foreground">
+                        {scan.status}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <div>
+              <CardTitle>Websites</CardTitle>
+              <CardDescription>Your monitored websites</CardDescription>
+            </div>
+            <Button variant="outline" size="sm" asChild>
+              <Link to="/websites">Manage</Link>
+            </Button>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {websites?.websites?.map((website: any) => (
+                <div key={website.id} className="flex items-center justify-between">
+                  <div className="flex-1">
+                    <p className="text-sm font-medium">{website.name}</p>
+                    <p className="text-xs text-muted-foreground">{website.url}</p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {website.complianceScore !== null ? (
+                      <span className="text-sm font-medium">
+                        {Math.round(website.complianceScore)}%
+                      </span>
+                    ) : (
+                      <span className="text-xs text-muted-foreground">
+                        No scans yet
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

apps/wcag-ada/dashboard/src/pages/reports/index.tsx

@@ -0,0 +1,8 @@
+export function ReportsPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold">Reports</h1>
+      <p className="text-muted-foreground">Compliance reports and analytics coming soon...</p>
+    </div>
+  );
+}

apps/wcag-ada/dashboard/src/pages/scans/[id].tsx

@@ -0,0 +1,8 @@
+export function ScanDetailPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold">Scan Results</h1>
+      <p className="text-muted-foreground">Scan detail page coming soon...</p>
+    </div>
+  );
+}

apps/wcag-ada/dashboard/src/pages/scans/index.tsx

@@ -0,0 +1,8 @@
+export function ScansPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold">Scans</h1>
+      <p className="text-muted-foreground">Scan history and management coming soon...</p>
+    </div>
+  );
+}

apps/wcag-ada/dashboard/src/pages/settings/index.tsx

@@ -0,0 +1,8 @@
+export function SettingsPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold">Settings</h1>
+      <p className="text-muted-foreground">Account settings and preferences coming soon...</p>
+    </div>
+  );
+}

apps/wcag-ada/dashboard/src/pages/websites/[id].tsx

@@ -0,0 +1,8 @@
+export function WebsiteDetailPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold">Website Details</h1>
+      <p className="text-muted-foreground">Website detail page coming soon...</p>
+    </div>
+  );
+}

apps/wcag-ada/dashboard/src/pages/websites/index.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api-client';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Plus, Globe, ExternalLink, MoreVertical } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { format } from 'date-fns';
+
+export function WebsitesPage() {
+  const [page, setPage] = useState(1);
+  const { data, isLoading } = useQuery({
+    queryKey: ['websites', page],
+    queryFn: () => apiClient.getWebsites({ page, limit: 12 }),
+  });
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Websites</h1>
+          <p className="text-muted-foreground">
+            Manage your monitored websites and their scan schedules
+          </p>
+        </div>
+        <Button>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Website
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {[...Array(6)].map((_, i) => (
+            <Card key={i} className="h-48 animate-pulse bg-muted" />
+          ))}
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {data?.websites?.map((website: any) => (
+            <Card key={website.id} className="p-6">
+              <div className="flex items-start justify-between">
+                <Globe className="h-5 w-5 text-muted-foreground" />
+                <Button variant="ghost" size="icon">
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </div>
+              <div className="mt-4">
+                <h3 className="font-semibold">{website.name}</h3>
+                <a
+                  href={website.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1 mt-1"
+                >
+                  {website.url}
+                  <ExternalLink className="h-3 w-3" />
+                </a>
+              </div>
+              <div className="mt-4 flex items-center justify-between">
+                <div>
+                  {website.complianceScore !== null ? (
+                    <div>
+                      <span className="text-2xl font-bold">
+                        {Math.round(website.complianceScore)}%
+                      </span>
+                      <p className="text-xs text-muted-foreground">Compliance</p>
+                    </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">No scans yet</p>
+                  )}
+                </div>
+                <Button variant="outline" size="sm" asChild>
+                  <Link to={`/websites/${website.id}`}>View Details</Link>
+                </Button>
+              </div>
+              {website.lastScanAt && (
+                <p className="text-xs text-muted-foreground mt-2">
+                  Last scan: {format(new Date(website.lastScanAt), 'MMM d, h:mm a')}
+                </p>
+              )}
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}