feat(slack-integration-stub): Slack-Integration-Stub Card auf Integrations-Page [tsc:fail]

.phase20-state.json

@@ -1,8 +1,9 @@
 {
   "completed_features": [],
-  "current_feature": "recurring-time-entries",
+  "current_feature": "slack-integration-stub",
   "started_at": "2026-05-23T07:57:43.412201",
   "attempted_features": [
-    "time-budget-per-project"
+    "time-budget-per-project",
+    "recurring-time-entries"
   ]
 }

GENERATION_LOG.md

@@ -2405,3 +2405,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
+- `08:02:18` **INFO**   Committed feature recurring-time-entries
+- `08:02:18` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: slack-integration-stub (2026-05-23 08:02:18)
+
+- `08:02:18` **INFO** Description: Slack-Integration-Stub Card auf Integrations-Page
+- `08:02:18` **INFO**   Generating apps/web/src/pages/Integrations.tsx (ERWEITERT — die bestehende Slack-Karte bekommt jetzt 'Configure'-Butto…)
+- `08:03:38` **INFO**     wrote 9473 chars in 80.3s (attempt 1)
+- `08:03:38` **INFO** Running tsc --noEmit on api…
+- `08:03:40` **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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from '@tanstack/react-router';
 import { 
   Slack, 
@@ -7,7 +7,11 @@ import {
   Calendar, 
   Mail, 
   ArrowRight, 
-  Lock 
+  Lock,
+  X,
+  Send,
+  Loader2,
+  CheckCircle2
 } from 'lucide-react';
 
 interface Integration {
@@ -25,7 +29,7 @@ const INTEGRATIONS: Integration[] = [
     name: 'Slack',
     description: 'Get notifications and updates directly in your Slack channels.',
     icon: Slack,
-    status: 'coming-soon',
+    status: 'available',
   },
   {
     id: 'discord',
@@ -60,6 +64,40 @@ const INTEGRATIONS: Integration[] = [
 ];
 
 export default function IntegrationsPage() {
+  const [isSlackModalOpen, setIsSlackModalOpen] = useState(false);
+  const [webhookUrl, setWebhookUrl] = useState('');
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+  const handleSaveSlack = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus('loading');
+    // Simulate API call to save settings
+    await new Promise(resolve => setTimeout(resolve, 800));
+    setStatus('success');
+    setTimeout(() => setStatus('idle'), 2000);
+  };
+
+  const handleTestSlack = async () => {
+    if (!webhookUrl) return;
+    setStatus('loading');
+    try {
+      const response = await fetch(webhookUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text: 'Hello from EmberClone! 🚀' }),
+      });
+      if (response.ok) {
+        setStatus('success');
+      } else {
+        setStatus('error');
+      }
+    } catch (err) {
+      setStatus('error');
+    } finally {
+      setTimeout(() => setStatus('idle'), 2000);
+    }
+  };
+
   return (
     <div className="max-w-6xl mx-auto p-6">
       <div className="mb-8">
@@ -105,6 +143,14 @@ export default function IntegrationsPage() {
                 >
                   Configure
                 </button>
+              ) : integration.id === 'slack' ? (
+                <button 
+                  onClick={() => setIsSlackModalOpen(true)}
+                  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" />
+                </button>
               ) : (
                 <Link 
                   to={integration.link || '/'} 
@@ -118,6 +164,78 @@ export default function IntegrationsPage() {
           );
         })}
       </div>
+
+      {isSlackModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm">
+          <div className="bg-white dark:bg-slate-800 w-full max-w-md rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">
+            <div className="flex items-center justify-between p-6 border-b border-slate-200 dark:border-slate-700">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400 rounded-lg">
+                  <Slack size={20} />
+                </div>
+                <h2 className="text-xl font-bold text-slate-900 dark:text-white">Slack Integration</h2>
+              </div>
+              <button 
+                onClick={() => setIsSlackModalOpen(false)}
+                className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <form onSubmit={handleSaveSlack} className="p-6 space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                  Incoming Webhook URL
+                </label>
+                <input 
+                  type="url" 
+                  required
+                  placeholder="https://hooks.slack.com/services/..."
+                  className="w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none transition-all"
+                  value={webhookUrl}
+                  onChange={(e) => setWebhookUrl(e.target.value)}
+                />
+                <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+                  Create an Incoming Webhook in your Slack App settings to get this URL.
+                </p>
+              </div>
+
+              <div className="flex gap-3">
+                <button 
+                  type="button"
+                  onClick={handleTestSlack}
+                  disabled={!webhookUrl || status === 'loading'}
+                  className="flex-1 flex items-center justify-center gap-2 py-2 px-4 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+                >
+                  {status === 'loading' ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
+                  Test Connection
+                </button>
+                <button 
+                  type="submit"
+                  disabled={status === 'loading'}
+                  className="flex-1 py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+                >
+                  {status === 'loading' ? <Loader2 size={16} className="animate-spin mx-auto" /> : 'Save Settings'}
+                </button>
+              </div>
+
+              {status === 'success' && (
+                <div className="flex items-center gap-2 p-3 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400 rounded-lg text-sm font-medium">
+                  <CheckCircle2 size={16} />
+                  Successfully updated and tested!
+                </div>
+              )}
+              {status === 'error' && (
+                <div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm font-medium">
+                  <X size={16} />
+                  Failed to connect. Please check your URL.
+                </div>
+              )}
+            </form>
+          </div>
+        </div>
+      )}
     </div>
   );
 }