feat(integrations-page): Integrations-Page mit Slack/Discord/Webhook-Cards [tsc:fail]

.phase9-state.json

@@ -1,9 +1,10 @@
 {
   "completed_features": [],
-  "current_feature": "billing-stub",
+  "current_feature": "integrations-page",
   "started_at": "2026-05-23T06:02:21.166704",
   "attempted_features": [
     "webhooks-config",
-    "two-factor-auth-stub"
+    "two-factor-auth-stub",
+    "billing-stub"
   ]
 }

GENERATION_LOG.md

@@ -1073,3 +1073,20 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
+- `06:05:31` **INFO**   Committed feature billing-stub
+- `06:05:31` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: integrations-page (2026-05-23 06:05:31)
+
+- `06:05:31` **INFO** Description: Integrations-Page mit Slack/Discord/Webhook-Cards
+- `06:05:31` **INFO**   Generating apps/web/src/pages/Integrations.tsx (Integrations-Page. Grid mit Karten für: Slack, Discord, Webhooks, Cale…)
+- `06:06:06` **INFO**     wrote 4009 chars in 34.4s (attempt 1)
+- `06:06:06` **INFO** Running tsc --noEmit on api…
+- `06:06:07` **WARN**   tsc errors:
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTypeProvider>, opts: { ...; }, done: (err?: Error | undefined) => void): void'.
+  Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy

apps/web/src/pages/Integrations.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Link } from '@tanstack/react-router';
+import { 
+  Slack, 
+  Discord, 
+  Webhook, 
+  Calendar, 
+  Mail, 
+  ArrowRight, 
+  Lock 
+} from 'lucide-react';
+
+interface Integration {
+  id: string;
+  name: string;
+  description: string;
+  icon: React.ElementType;
+  status: 'available' | 'coming-soon';
+  link?: string;
+}
+
+const INTEGRATIONS: Integration[] = [
+  {
+    id: 'slack',
+    name: 'Slack',
+    description: 'Get notifications and updates directly in your Slack channels.',
+    icon: Slack,
+    status: 'coming-soon',
+  },
+  {
+    id: 'discord',
+    name: 'Discord',
+    description: 'Connect your workspace to Discord for community alerts.',
+    icon: Discord,
+    status: 'coming-soon',
+  },
+  {
+    id: 'webhooks',
+    name: 'Webhooks',
+    description: 'Send real-time data to any external URL via HTTP POST.',
+    icon: Webhook,
+    status: 'available',
+    link: '/webhooks',
+  },
+  {
+    id: 'calendar',
+    name: 'Google Calendar',
+    description: 'Sync your project deadlines and meetings with Google.',
+    icon: Calendar,
+    status: 'coming-soon',
+  },
+  {
+    id: 'email',
+    name: 'Email Notifications',
+    description: 'Configure how and when you receive email alerts.',
+    icon: Mail,
+    status: 'available',
+    link: '/settings',
+  },
+];
+
+export default function IntegrationsPage() {
+  return (
+    <div className="max-w-6xl mx-auto p-6">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Integrations</h1>
+        <p className="text-slate-500 dark:text-slate-400 mt-2">
+          Connect EmberClone with your favorite tools to automate your workflow.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {INTEGRATIONS.map((integration) => {
+          const Icon = integration.icon;
+          const isComingSoon = integration.status === 'coming-soon';
+
+          return (
+            <div 
+              key={integration.id}
+              className="group relative p-6 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl transition-all duration-200 hover:shadow-lg hover:border-indigo-500 dark:hover:border-indigo-400"
+            >
+              <div className="flex items-start justify-between mb-4">
+                <div className="p-3 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 rounded-lg">
+                  <Icon size={24} />
+                </div>
+                {isComingSoon && (
+                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">
+                    <Lock size={12} className="mr-1" />
+                    Coming Soon
+                  </span>
+                )}
+              </div>
+
+              <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
+                {integration.name}
+              </h3>
+              <p className="text-sm text-slate-500 dark:text-slate-400 mb-6 min-h-[40px]">
+                {integration.description}
+              </p>
+
+              {isComingSoon ? (
+                <button 
+                  disabled 
+                  className="w-full py-2 px-4 bg-slate-100 dark:bg-slate-700 text-slate-400 dark:text-slate-500 rounded-lg text-sm font-medium cursor-not-allowed"
+                >
+                  Configure
+                </button>
+              ) : (
+                <Link 
+                  to={integration.link || '/'} 
+                  className="flex items-center justify-center w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium transition-colors group"
+                >
+                  Configure
+                  <ArrowRight size={16} className="ml-2 transition-transform group-hover:translate-x-1" />
+                </Link>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}