Merge branch 'dev'

2026-01-30 15:41:12 +01:00 · 2026-01-30 15:41:12 +01:00 · 2313a8e9ae
commit 2313a8e9ae
parent 40e9f0e7b6 87dcc41a5b
16 changed files with 548 additions and 90 deletions
--- a/ToDo.txt
+++ b/ToDo.txt
@ -25,14 +25,20 @@ Last updated: 2026-01-20
 • [x] Compromised User Fix                                                  (SAT)
 • [x] Pools Complete Setup check and refactor -- Implementing Logging Layout from Alex -- Talk with him (SAT)
 • [x] Adjust and add Functionality for Download Acc Data and Delete Acc     (SAT)
-• [ ] News Management (own pages for news) + Adjust the Dashboard to Display Latest news
+• [X] News Management (own pages for news) + Adjust the Dashboard to Display Latest news
 • [ ] Unified Modal Design                                                  
 • [ ] Autorefresh of Site??                                                 
 • [ ] UserMgmt table refactor with actions and filter options               (SAT?)
-• [ ] Remove irrelevant statuses in userverify filter
+• [x] Remove irrelevant statuses in userverify filter
 • [ ] User Status 1 Feld das wir nicht benutzen
 • [ ] Pool mulit user actions (select 5 -> add to pool)
-• [ ] reset edit templates
+• [x] reset edit templates
+• [] "Suspended" status should actually do something
+• [] Matrix shit
+• [x] Git
+• [] mobile scroll bug with double page on top
+
+


 ================================================================================
--- a/package-lock.json
+++ b/package-lock.json
@ -10264,11 +10264,10 @@
      }
    },
    "node_modules/tar": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.2.tgz",
-      "integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==",
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.3.tgz",
+      "integrity": "sha512-ENg5JUHUm2rDD7IvKNFGzyElLXNjachNLp6RaGf4+JOgxXHkqA+gq81ZAMCUmtMtqBsoU62lcp6S27g1LCYGGQ==",
      "dev": true,
-      "license": "BlueOak-1.0.0",
      "dependencies": {
        "@isaacs/fs-minipass": "^4.0.0",
        "chownr": "^3.0.0",
--- a/src/app/admin/contract-management/page.tsx
+++ b/src/app/admin/contract-management/page.tsx
@ -21,6 +21,7 @@ export default function ContractManagementPage() {
  const router = useRouter();
  const [section, setSection] = useState('templates');
  const [editingTemplateId, setEditingTemplateId] = useState<string | null>(null);
+  const [editorKey, setEditorKey] = useState(0);

  useEffect(() => { setMounted(true); }, []);

@ -56,7 +57,17 @@ export default function ContractManagementPage() {
              {NAV.map((item) => (
                <button
                  key={item.key}
-                  onClick={() => setSection(item.key)}
+                  onClick={() => {
+                    if (section === 'editor' && item.key !== 'editor') {
+                      setEditingTemplateId(null);
+                      setEditorKey((k) => k + 1);
+                    }
+                    if (item.key === 'editor') {
+                      setEditingTemplateId(null);
+                      setEditorKey((k) => k + 1);
+                    }
+                    setSection(item.key);
+                  }}
                  className={`flex flex-shrink-0 items-center gap-2 px-4 py-2 rounded-lg font-medium transition whitespace-nowrap text-sm md:text-base
                    ${section === item.key
                      ? 'bg-blue-900 text-blue-50 shadow'
@ -99,6 +110,7 @@ export default function ContractManagementPage() {
                  refreshKey={refreshKey}
                  onEdit={(id) => {
                    setEditingTemplateId(id);
+                    setEditorKey((k) => k + 1);
                    setSection('editor');
                  }}
                />
@ -111,15 +123,18 @@ export default function ContractManagementPage() {
                  Create Template
                </h2>
                <ContractEditor
+                  key={`${editorKey}-${editingTemplateId ?? 'new'}`}
                  editingTemplateId={editingTemplateId}
                  onCancelEdit={() => {
                    setEditingTemplateId(null);
+                    setEditorKey((k) => k + 1);
                    setSection('templates');
                  }}
                  onSaved={(info) => {
                    bumpRefresh();
                    if (info?.action === 'revised') {
                      setEditingTemplateId(null);
+                      setEditorKey((k) => k + 1);
                      setSection('templates');
                    }
                  }}
--- a/src/app/admin/news-management/page.tsx
+++ b/src/app/admin/news-management/page.tsx
@ -16,6 +16,8 @@ export default function NewsManagementPage() {
  const [showCreate, setShowCreate] = React.useState(false)
  const [selected, setSelected] = React.useState<any | null>(null)
  const [deleteTarget, setDeleteTarget] = React.useState<any | null>(null)
+  const [createError, setCreateError] = React.useState<string | null>(null)
+  const [creating, setCreating] = React.useState(false)

  return (
    <PageTransitionEffect>
@ -71,7 +73,24 @@ export default function NewsManagementPage() {
      <Footer />

      {showCreate && (
-        <CreateNewsModal onClose={() => setShowCreate(false)} onCreate={async (payload) => { await addNews(payload); setShowCreate(false); await refresh() }} />
+        <CreateNewsModal
+          onClose={() => { setShowCreate(false); setCreateError(null) }}
+          creating={creating}
+          error={createError}
+          onCreate={async (payload) => {
+            setCreateError(null)
+            setCreating(true)
+            try {
+              await addNews(payload)
+              setShowCreate(false)
+              await refresh()
+            } catch (e: any) {
+              setCreateError(e?.message || 'Failed to create news')
+            } finally {
+              setCreating(false)
+            }
+          }}
+        />
      )}
      {selected && (
        <EditNewsModal item={selected} onClose={() => setSelected(null)} onUpdate={async (id, payload) => { await updateNews(id, payload); setSelected(null); await refresh() }} />
@ -107,11 +126,22 @@ export default function NewsManagementPage() {
  )
 }

-function CreateNewsModal({ onClose, onCreate }: { onClose: () => void; onCreate: (payload: { title: string; summary?: string; content?: string; slug: string; category?: string; isActive: boolean; publishedAt?: string | null; imageFile?: File }) => void }) {
+function CreateNewsModal({
+  onClose,
+  onCreate,
+  creating,
+  error,
+}: {
+  onClose: () => void
+  onCreate: (payload: { title: string; summary?: string; content?: string; slug: string; category?: string; isActive: boolean; publishedAt?: string | null; imageFile?: File }) => void
+  creating: boolean
+  error: string | null
+}) {
  const [title, setTitle] = React.useState('')
  const [summary, setSummary] = React.useState('')
  const [content, setContent] = React.useState('')
  const [slug, setSlug] = React.useState('')
+  const [slugTouched, setSlugTouched] = React.useState(false)
  const [category, setCategory] = React.useState('')
  const [isActive, setIsActive] = React.useState(true)
  const [publishedAt, setPublishedAt] = React.useState<string>('')
@ -143,9 +173,24 @@ function CreateNewsModal({ onClose, onCreate }: { onClose: () => void; onCreate:
    setRawUrl(null)
  }

+  const slugify = (value: string) => value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+
+  React.useEffect(() => {
+    if (!slugTouched) {
+      setSlug(slugify(title))
+    }
+  }, [title, slugTouched])
+
  const submit = (e: React.FormEvent) => {
    e.preventDefault()
-    onCreate({ title, summary: summary || undefined, content: content || undefined, slug, category: category || undefined, isActive, publishedAt: publishedAt || undefined, imageFile })
+    const safeSlug = slug.trim() || slugify(title)
+    onCreate({ title: title.trim(), summary: summary || undefined, content: content || undefined, slug: safeSlug, category: category || undefined, isActive, publishedAt: publishedAt || undefined, imageFile })
  }

  return (
@ -158,8 +203,22 @@ function CreateNewsModal({ onClose, onCreate }: { onClose: () => void; onCreate:
            <button onClick={onClose} className="text-gray-500 hover:text-gray-700"><XMarkIcon className="h-6 w-6"/></button>
          </div>
          <form onSubmit={submit} className="p-6 space-y-4">
+            {error && (
+              <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                {error}
+              </div>
+            )}
            <input className="w-full border rounded px-4 py-2 text-gray-900" placeholder="Title" value={title} onChange={e=>setTitle(e.target.value)} required />
-            <input className="w-full border rounded px-4 py-2 text-gray-900" placeholder="Slug" value={slug} onChange={e=>setSlug(e.target.value)} required />
+            <div>
+              <input
+                className="w-full border rounded px-4 py-2 text-gray-900"
+                placeholder="Slug"
+                value={slug}
+                onChange={e=>{ setSlugTouched(true); setSlug(e.target.value) }}
+                required
+              />
+              <p className="mt-1 text-xs text-gray-500">Used in the URL. Auto-generated from title unless edited.</p>
+            </div>
            <input className="w-full border rounded px-4 py-2 text-gray-900" placeholder="Category" value={category} onChange={e=>setCategory(e.target.value)} />
            <textarea className="w-full border rounded px-4 py-2 text-gray-900" placeholder="Summary" value={summary} onChange={e=>setSummary(e.target.value)} rows={3} />
            <textarea className="w-full border rounded px-4 py-2 text-gray-900" placeholder="Content (markdown/html)" value={content} onChange={e=>setContent(e.target.value)} rows={6} />
@ -188,7 +247,13 @@ function CreateNewsModal({ onClose, onCreate }: { onClose: () => void; onCreate:
            </div>
            <div className="flex items-center justify-end gap-2 pt-4 border-t">
              <button type="button" onClick={onClose} className="px-5 py-2.5 text-sm bg-red-50 text-red-700 rounded-lg hover:bg-red-100">Cancel</button>
-              <button type="submit" className="px-5 py-2.5 text-sm text-white bg-blue-900 rounded-lg">Add News</button>
+              <button
+                type="submit"
+                disabled={creating || !title.trim()}
+                className="px-5 py-2.5 text-sm text-white bg-blue-900 rounded-lg disabled:opacity-60 disabled:cursor-not-allowed"
+              >
+                {creating ? 'Creating…' : 'Add News'}
+              </button>
            </div>
          </form>
        </div>
--- a/src/app/admin/pool-management/manage/page.tsx
+++ b/src/app/admin/pool-management/manage/page.tsx
@ -73,6 +73,8 @@ function PoolManagePageInner() {
  const [hasSearched, setHasSearched] = React.useState(false)
  const [selectedCandidates, setSelectedCandidates] = React.useState<Set<string>>(new Set())
  const [savingMembers, setSavingMembers] = React.useState(false)
+  const [removingMemberId, setRemovingMemberId] = React.useState<string | null>(null)
+  const [removeError, setRemoveError] = React.useState<string>('')

  async function fetchMembers() {
    if (!token || !poolId || poolId === 'pool-unknown') return
@ -211,6 +213,23 @@ function PoolManagePageInner() {
    }
  }

+  async function removeMember(userId: string) {
+    if (!token || !poolId || poolId === 'pool-unknown') return
+    const user = users.find(u => u.id === userId)
+    const label = user?.name || user?.email || 'this user'
+    if (!window.confirm(`Remove ${label} from this pool?`)) return
+    setRemoveError('')
+    setRemovingMemberId(userId)
+    try {
+      await AdminAPI.removePoolMembers(token, poolId, [userId])
+      await fetchMembers()
+    } catch (e: any) {
+      setRemoveError(e?.message || 'Failed to remove user from pool.')
+    } finally {
+      setRemovingMemberId(null)
+    }
+  }
+
  return (
    <PageTransitionEffect>
      <div className="min-h-screen flex flex-col bg-gradient-to-tr from-blue-50 via-white to-blue-100">
@ -302,6 +321,11 @@ function PoolManagePageInner() {
                  Add User
                </button>
              </div>
+              {removeError && (
+                <div className="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+                  {removeError}
+                </div>
+              )}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {users.map(u => (
                  <article key={u.id} className="rounded-2xl bg-white border border-gray-100 shadow p-5 flex flex-col">
@ -325,6 +349,15 @@ function PoolManagePageInner() {
                        {new Date(u.joinedAt).toLocaleDateString('de-DE', { year: 'numeric', month: 'short', day: '2-digit' })}
                      </span>
                    </div>
+                    <div className="mt-4 flex justify-end">
+                      <button
+                        onClick={() => removeMember(u.id)}
+                        disabled={removingMemberId === u.id}
+                        className="px-3 py-2 text-xs font-medium rounded-lg border border-red-200 bg-red-50 text-red-700 hover:bg-red-100 transition disabled:opacity-60 disabled:cursor-not-allowed"
+                      >
+                        {removingMemberId === u.id ? 'Removing…' : 'Remove'}
+                      </button>
+                    </div>
                  </article>
                ))}
                {membersLoading && (
@ -392,7 +425,7 @@ function PoolManagePageInner() {
                    </button>
                    <button
                      type="button"
-                      onClick={() => { setQuery(''); setCandidates([]); setHasSearched(false); setError(''); }}
+                      onClick={() => { setQuery(''); setError(''); }}
                      className="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 transition"
                    >
                      Clear
--- a/src/app/admin/pool-management/page.tsx
+++ b/src/app/admin/pool-management/page.tsx
@ -81,6 +81,8 @@ export default function PoolManagementPage() {
  }

  async function handleArchive(poolId: string) {
+    const confirmed = window.confirm('Archive this pool? Users will no longer be able to join or use it.')
+    if (!confirmed) return
    setArchiveError('')
    const res = await setPoolInactive(poolId)
    if (res.ok) {
@ -91,6 +93,8 @@ export default function PoolManagementPage() {
  }

  async function handleSetActive(poolId: string) {
+    const confirmed = window.confirm('Unarchive this pool and make it active again?')
+    if (!confirmed) return
    setArchiveError('')
    const res = await setPoolActive(poolId)
    if (res.ok) {
--- a/src/app/admin/user-verify/page.tsx
+++ b/src/app/admin/user-verify/page.tsx
@ -14,7 +14,7 @@ import { PendingUser } from '../../utils/api'
 type UserType = 'personal' | 'company'
 type UserRole = 'user' | 'admin'
 type VerificationReadyFilter = 'all' | 'ready' | 'not_ready'
-type StatusFilter = 'all' | 'pending' | 'verifying' | 'active'
+type StatusFilter = 'all' | 'pending' | 'active'

 export default function AdminUserVerifyPage() {
  const { 
@ -95,7 +95,6 @@ export default function AdminUserVerifyPage() {

  const statusBadge = (s: PendingUser['status']) => {
    if (s === 'pending') return badge('Pending', 'bg-amber-100 text-amber-700')
-    if (s === 'verifying') return badge('Verifying', 'bg-blue-100 text-blue-700')
    return badge('Active', 'bg-green-100 text-green-700')
  }

@ -245,7 +244,6 @@ export default function AdminUserVerifyPage() {
                >
                  <option value="all">All Statuses</option>
                  <option value="pending">Pending</option>
-                  <option value="verifying">Verifying</option>
                  <option value="active">Active</option>
                </select>
              </div>
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@ -1,6 +1,7 @@
 'use client'

 import { useEffect, useState, useCallback, useRef } from 'react'
+import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import useAuthStore from '../store/authStore'
 import PageLayout from '../components/PageLayout'
@ -21,6 +22,9 @@ export default function DashboardPage() {
  const isAuthReady = useAuthStore(state => state.isAuthReady)
  const isShopEnabled = process.env.NEXT_PUBLIC_SHOW_SHOP !== 'false'
  const [isMobile, setIsMobile] = useState(false)
+  const [latestNews, setLatestNews] = useState<Array<{ id: number; title: string; summary?: string; slug: string; published_at?: string | null }>>([])
+  const [newsLoading, setNewsLoading] = useState(false)
+  const [newsError, setNewsError] = useState<string | null>(null)

  const { userStatus, loading: statusLoading } = useUserStatus()

@ -46,6 +50,27 @@ export default function DashboardPage() {
    }
  }, [])

+  useEffect(() => {
+    let active = true
+    ;(async () => {
+      setNewsLoading(true)
+      setNewsError(null)
+      try {
+        const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001'
+        const res = await fetch(`${BASE_URL}/api/news/active`)
+        if (!res.ok) throw new Error('Failed to fetch news')
+        const json = await res.json()
+        const data = Array.isArray(json.data) ? json.data : []
+        if (active) setLatestNews(data.slice(0, 3))
+      } catch (e: any) {
+        if (active) setNewsError(e?.message || 'Failed to load news')
+      } finally {
+        if (active) setNewsLoading(false)
+      }
+    })()
+    return () => { active = false }
+  }, [])
+
  // Redirect if not logged in (only after auth is ready)
  useEffect(() => {
    if (isAuthReady && !user) {
@ -231,6 +256,57 @@ export default function DashboardPage() {
                  </div>
                </div>
              </div>
+
+              {/* Latest News */}
+              <div className="rounded-2xl bg-white border border-gray-200 shadow-sm p-6">
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="text-lg font-semibold text-gray-900">Latest News</h2>
+                  <Link href="/news" className="text-sm font-medium text-blue-900 hover:text-blue-700">
+                    View all
+                  </Link>
+                </div>
+
+                {newsLoading && (
+                  <div className="space-y-3">
+                    {Array.from({ length: 3 }).map((_, i) => (
+                      <div key={i} className="animate-pulse space-y-2">
+                        <div className="h-4 w-2/3 bg-gray-200 rounded" />
+                        <div className="h-3 w-1/2 bg-gray-100 rounded" />
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {newsError && !newsLoading && (
+                  <div className="text-sm text-red-600">{newsError}</div>
+                )}
+
+                {!newsLoading && !newsError && latestNews.length === 0 && (
+                  <div className="text-sm text-gray-600">No news yet.</div>
+                )}
+
+                {!newsLoading && !newsError && latestNews.length > 0 && (
+                  <ul className="space-y-4">
+                    {latestNews.map(item => (
+                      <li key={item.id} className="group">
+                        <Link href={`/news/${item.slug}`} className="block">
+                          <div className="text-xs text-gray-500">
+                            {item.published_at ? new Date(item.published_at).toLocaleDateString('de-DE') : 'Recent'}
+                          </div>
+                          <div className="text-sm font-semibold text-gray-900 group-hover:text-blue-700 line-clamp-2">
+                            {item.title}
+                          </div>
+                          {item.summary && (
+                            <div className="text-xs text-gray-600 line-clamp-2 mt-1">
+                              {item.summary}
+                            </div>
+                          )}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
            </div>
          </div>
        </main>
--- a/src/app/hooks/useUserStatus.ts
+++ b/src/app/hooks/useUserStatus.ts
@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
 import useAuthStore from '../store/authStore'

 export interface UserStatus {
@ -20,6 +21,7 @@ export interface UserStatusResponse {
 }

 export const useUserStatus = () => {
+  const router = useRouter()
  const [userStatus, setUserStatus] = useState<UserStatus | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
@ -86,6 +88,14 @@ export const useUserStatus = () => {
        }
      })

+      if (response.status === 403) {
+        useAuthStore.getState().clearAuth()
+        setUserStatus(null)
+        setError(null)
+        router.push('/suspended')
+        return
+      }
+
      // If 401, try token refresh once
      if (response.status === 401) {
        console.log('Got 401, attempting token refresh...')
@ -104,6 +114,14 @@ export const useUserStatus = () => {
              }
            })
            
+            if (retryResponse.status === 403) {
+              useAuthStore.getState().clearAuth()
+              setUserStatus(null)
+              setError(null)
+              router.push('/suspended')
+              return
+            }
+
            if (!retryResponse.ok) {
              throw new Error(`Failed to fetch user status: ${retryResponse.status}`)
            }
@ -138,7 +156,7 @@ export const useUserStatus = () => {
    } finally {
      setLoading(false)
    }
-  }, [isClient, accessToken, user])
+  }, [isClient, accessToken, user, router])

  // Fetch status on mount and when auth changes
  useEffect(() => {
--- a/src/app/login/components/LoginForm.tsx
+++ b/src/app/login/components/LoginForm.tsx
@ -81,6 +81,9 @@ export default function LoginForm() {
      const redirectPath = (result as any).redirectPath || '/dashboard'
      // instant redirect; toast persists via global store
      router.push(redirectPath)
+    } else if ((result as any)?.redirectPath) {
+      router.push((result as any).redirectPath)
+      return
    } else {
      showToast({
        variant: 'error',
--- a/src/app/login/hooks/useLogin.ts
+++ b/src/app/login/hooks/useLogin.ts
@ -46,8 +46,13 @@ export function useLogin() {
      
      console.log('Login response status:', response.status)

+      const data = await response.json().catch(() => null)
+
      if (!response.ok) {
        // Handle HTTP errors
+        if (response.status === 403) {
+          return { success: false, error: 'Account suspended', redirectPath: '/suspended' }
+        }
        if (response.status === 401) {
          throw new Error('Invalid credentials')
        } else if (response.status === 404) {
@ -58,8 +63,6 @@ export function useLogin() {
          throw new Error('Login failed. Please try again.')
        }
      }
-      
-      const data = await response.json()
      console.log('Login response data:', data)
      
      if (data.success && data.accessToken && data.user) {
--- a/src/app/news/[slug]/page.tsx
+++ b/src/app/news/[slug]/page.tsx
@ -0,0 +1,151 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+import Header from '../../components/nav/Header'
+import Footer from '../../components/Footer'
+import PageTransitionEffect from '../../components/animation/pageTransitionEffect'
+
+type PublicNewsItem = {
+  id: number
+  title: string
+  summary?: string
+  content?: string
+  slug: string
+  category?: string
+  imageUrl?: string
+  published_at?: string | null
+}
+
+function estimateReadingTime(text: string) {
+  const words = text.trim().split(/\s+/).filter(Boolean).length
+  const minutes = Math.max(1, Math.ceil(words / 200))
+  return `${minutes} min read`
+}
+
+export default function NewsDetailPage() {
+  const params = useParams()
+  const slug = typeof params?.slug === 'string' ? params.slug : Array.isArray(params?.slug) ? params.slug[0] : ''
+
+  const [item, setItem] = React.useState<PublicNewsItem | null>(null)
+  const [loading, setLoading] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (!slug) return
+    let active = true
+    ;(async () => {
+      setLoading(true)
+      setError(null)
+      try {
+        const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001'
+        const res = await fetch(`${BASE_URL}/api/news/${encodeURIComponent(slug)}`)
+        if (!res.ok) {
+          if (res.status === 404) throw new Error('News article not found.')
+          throw new Error('Failed to load news article.')
+        }
+        const json = await res.json()
+        if (active) setItem(json.data || null)
+      } catch (e: any) {
+        if (active) setError(e?.message || 'Failed to load news article.')
+      } finally {
+        if (active) setLoading(false)
+      }
+    })()
+    return () => { active = false }
+  }, [slug])
+
+  const readingTime = item?.content ? estimateReadingTime(item.content) : null
+
+  return (
+    <PageTransitionEffect>
+      <Header />
+      <main className="bg-gradient-to-b from-blue-50 to-white min-h-screen">
+        <div className="mx-auto max-w-6xl px-6 py-10">
+          <nav className="text-sm text-gray-500 mb-6">
+            <Link href="/" className="hover:text-blue-900">Home</Link>
+            <span className="mx-2">/</span>
+            <Link href="/news" className="hover:text-blue-900">News</Link>
+            {item?.title && (
+              <>
+                <span className="mx-2">/</span>
+                <span className="text-gray-700 line-clamp-1">{item.title}</span>
+              </>
+            )}
+          </nav>
+
+          {loading && (
+            <div className="rounded-2xl bg-white shadow-lg border border-gray-100 p-8">
+              <div className="animate-pulse space-y-4">
+                <div className="h-6 w-2/3 bg-gray-200 rounded" />
+                <div className="h-4 w-1/3 bg-gray-100 rounded" />
+                <div className="h-64 w-full bg-gray-100 rounded" />
+                <div className="h-4 w-3/4 bg-gray-100 rounded" />
+                <div className="h-4 w-5/6 bg-gray-100 rounded" />
+              </div>
+            </div>
+          )}
+
+          {error && !loading && (
+            <div className="rounded-2xl bg-white shadow-lg border border-red-100 p-8">
+              <div className="text-red-700 font-medium mb-2">{error}</div>
+              <Link href="/news" className="text-blue-900 hover:text-blue-700 font-semibold">
+                Back to News
+              </Link>
+            </div>
+          )}
+
+          {!loading && !error && item && (
+            <article className="rounded-2xl bg-white shadow-lg border border-gray-100 overflow-hidden">
+              <header className="p-6 sm:p-10">
+                <div className="flex flex-wrap items-center gap-2 text-xs text-blue-700">
+                  {item.category && (
+                    <span className="inline-flex items-center rounded-full bg-blue-50 border border-blue-100 px-2.5 py-1 font-medium">
+                      {item.category}
+                    </span>
+                  )}
+                  {item.published_at && (
+                    <span className="text-gray-500">
+                      {new Date(item.published_at).toLocaleDateString('de-DE')}
+                    </span>
+                  )}
+                  {readingTime && (
+                    <span className="text-gray-500">• {readingTime}</span>
+                  )}
+                </div>
+                <h1 className="mt-4 text-3xl sm:text-4xl font-extrabold text-blue-900 tracking-tight">
+                  {item.title}
+                </h1>
+                {item.summary && (
+                  <p className="mt-4 text-lg text-gray-700">
+                    {item.summary}
+                  </p>
+                )}
+              </header>
+
+              <div className="px-6 sm:px-10 pb-10">
+                <div className="mx-auto max-w-[104ch]">
+                  {item.imageUrl ? (
+                    <div className="mb-6 lg:-mt-24 lg:mb-2 lg:ml-16 lg:float-right lg:w-[60%] rounded-2xl overflow-hidden shadow bg-gray-50 border border-gray-100">
+                      <img
+                        src={item.imageUrl}
+                        alt={item.title}
+                        className="w-full h-72 sm:h-80 lg:h-96 object-cover"
+                      />
+                    </div>
+                  ) : null}
+                  <div className="prose prose-lg max-w-none text-gray-800 whitespace-pre-wrap break-words overflow-wrap-anywhere">
+                    {item.content || 'No content available.'}
+                  </div>
+                  <div className="clear-both" />
+                </div>
+              </div>
+            </article>
+          )}
+        </div>
+      </main>
+      <Footer />
+    </PageTransitionEffect>
+  )
+}
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@ -1,10 +1,10 @@
 'use client'

 import React from 'react'
+import Link from 'next/link'
 import Header from '../components/nav/Header'
 import Footer from '../components/Footer'
 import PageTransitionEffect from '../components/animation/pageTransitionEffect'
-import { XMarkIcon } from '@heroicons/react/24/outline'

 type PublicNewsItem = {
  id: number
@ -17,47 +17,10 @@ type PublicNewsItem = {
  published_at?: string | null
 }

-function NewsDetailModal({ item, onClose }: { item: PublicNewsItem; onClose: () => void }) {
-  return (
-    <div className="fixed inset-0 z-50">
-      <div className="absolute inset-0 bg-black/60" onClick={onClose} />
-      <div className="absolute inset-0 flex items-center justify-center p-4">
-        <div className="relative w-full max-w-4xl bg-white rounded-2xl shadow-2xl max-h-[90vh] flex flex-col">
-          <div className="flex-shrink-0 bg-white border-b px-6 py-4 flex items-center justify-between rounded-t-2xl">
-            <h2 className="text-2xl font-bold text-blue-900 pr-4">{item.title}</h2>
-            <button onClick={onClose} className="text-gray-500 hover:text-gray-700 flex-shrink-0">
-              <XMarkIcon className="h-6 w-6" />
-            </button>
-          </div>
-          <div className="p-6 overflow-y-auto">
-            {item.imageUrl && (
-              <div className="rounded-xl overflow-hidden mb-6 max-h-80 flex items-center justify-center bg-gray-50">
-                <img src={item.imageUrl} alt={item.title} className="w-full h-full object-contain" />
-              </div>
-            )}
-            {item.published_at && (
-              <div className="text-sm text-gray-500 mb-4">
-                Published: {new Date(item.published_at).toLocaleDateString('de-DE')}
-              </div>
-            )}
-            {item.summary && (
-              <div className="text-lg text-gray-700 mb-6 font-medium">{item.summary}</div>
-            )}
-            <div className="prose prose-lg max-w-none text-gray-800 whitespace-pre-wrap break-words overflow-wrap-anywhere">
-              {item.content || 'No content available.'}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
 export default function NewsPage() {
  const [items, setItems] = React.useState<PublicNewsItem[]>([])
  const [loading, setLoading] = React.useState(false)
  const [error, setError] = React.useState<string | null>(null)
-  const [selectedItem, setSelectedItem] = React.useState<PublicNewsItem | null>(null)

  React.useEffect(() => {
    (async () => {
@ -110,10 +73,10 @@ export default function NewsPage() {
          {!loading && items.length > 0 && (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {items.map(item => (
-                <article
+                <Link
                  key={item.id}
-                  onClick={() => setSelectedItem(item)}
-                  className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 cursor-pointer transform hover:-translate-y-1"
+                  href={`/news/${item.slug}`}
+                  className="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1"
                >
                  <div className="aspect-[3/2] bg-gradient-to-br from-blue-100 to-blue-50">
                    {item.imageUrl ? (
@ -125,35 +88,38 @@ export default function NewsPage() {
                    )}
                  </div>
                  <div className="p-6">
-                    <h2 className="text-xl font-bold text-blue-900 mb-3 line-clamp-2 hover:text-blue-700">
+                    <div className="flex items-center gap-2 text-xs text-blue-700">
+                      {item.category && (
+                        <span className="inline-flex items-center rounded-full bg-blue-50 border border-blue-100 px-2 py-0.5 font-medium">
+                          {item.category}
+                        </span>
+                      )}
+                      {item.published_at && (
+                        <span className="text-gray-500">
+                          {new Date(item.published_at).toLocaleDateString('de-DE')}
+                        </span>
+                      )}
+                    </div>
+                    <h2 className="mt-3 text-xl font-bold text-blue-900 line-clamp-2 group-hover:text-blue-700">
                      {item.title}
                    </h2>
                    {item.summary && (
-                      <p className="text-gray-700 mb-4 line-clamp-3">{item.summary}</p>
+                      <p className="mt-3 text-gray-700 line-clamp-3">{item.summary}</p>
                    )}
-                    {item.published_at && (
-                      <div className="text-sm text-gray-500 mb-4">
-                        {new Date(item.published_at).toLocaleDateString('de-DE')}
-                      </div>
-                    )}
-                    <button className="inline-flex items-center text-blue-900 font-semibold hover:text-blue-700">
+                    <div className="mt-4 inline-flex items-center text-blue-900 font-semibold group-hover:text-blue-700">
                      Read More
                      <svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                      </svg>
-                    </button>
+                    </div>
                  </div>
-                </article>
+                </Link>
              ))}
            </div>
          )}
        </div>
      </main>
      <Footer />
-
-      {selectedItem && (
-        <NewsDetailModal item={selectedItem} onClose={() => setSelectedItem(null)} />
-      )}
    </PageTransitionEffect>
  )
 }
--- a/src/app/quickaction-dashboard/page.tsx
+++ b/src/app/quickaction-dashboard/page.tsx
@ -1,6 +1,7 @@
 'use client'

 import { useState, useCallback, useEffect, useRef } from 'react'
+import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import PageLayout from '../components/PageLayout'
 import TutorialModal, { createTutorialSteps } from '../components/TutorialModal'
@ -28,6 +29,16 @@ interface StatusItem {
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
 }

+type LatestNewsItem = {
+  id: number
+  title: string
+  summary?: string
+  slug: string
+  category?: string
+  imageUrl?: string
+  published_at?: string | null
+}
+
 export default function QuickActionDashboardPage() {
  const router = useRouter()
  const user = useAuthStore(s => s.user)
@ -35,6 +46,9 @@ export default function QuickActionDashboardPage() {
  const accessToken = useAuthStore(s => s.accessToken) // NEW
  const { userStatus, loading, error, refreshStatus } = useUserStatus()
  const [isClient, setIsClient] = useState(false)
+  const [latestNews, setLatestNews] = useState<LatestNewsItem[]>([])
+  const [newsLoading, setNewsLoading] = useState(false)
+  const [newsError, setNewsError] = useState<string | null>(null)

  // Tutorial state
  const [isTutorialOpen, setIsTutorialOpen] = useState(false)
@ -49,6 +63,27 @@ export default function QuickActionDashboardPage() {
    setHasSeenTutorial(!!tutorialSeen)
  }, [])

+  useEffect(() => {
+    let active = true
+    ;(async () => {
+      setNewsLoading(true)
+      setNewsError(null)
+      try {
+        const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001'
+        const res = await fetch(`${BASE_URL}/api/news/active`)
+        if (!res.ok) throw new Error('Failed to fetch news')
+        const json = await res.json()
+        const data = Array.isArray(json.data) ? json.data : []
+        if (active) setLatestNews(data.slice(0, 3))
+      } catch (e: any) {
+        if (active) setNewsError(e?.message || 'Failed to load news')
+      } finally {
+        if (active) setNewsLoading(false)
+      }
+    })()
+    return () => { active = false }
+  }, [])
+
  // Derive status from real backend data
  const emailVerified = userStatus?.email_verified || false
  const idUploaded = userStatus?.documents_uploaded || false
@ -458,18 +493,55 @@ export default function QuickActionDashboardPage() {

            {/* Latest News */}
            <div className="bg-white rounded-xl shadow-sm ring-1 ring-gray-200 p-5 sm:p-8">
-              <h2 className="text-sm sm:text-base font-semibold text-gray-900 mb-4">
-                Latest News
-              </h2>
-              <ul className="list-disc pl-5 space-y-2 text-sm text-gray-700">
-                <li>
-                  <span className="font-medium text-[#8D6B1D]">New:</span> Referral system
-                  launch – invite friends and earn rewards.
-                </li>
-                <li>
-                  Profile completion unlocks more features. Keep progressing!
-                </li>
-              </ul>
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-sm sm:text-base font-semibold text-gray-900">
+                  Latest News
+                </h2>
+                <Link href="/news" className="text-xs sm:text-sm font-medium text-blue-900 hover:text-blue-700">
+                  View all
+                </Link>
+              </div>
+
+              {newsLoading && (
+                <div className="space-y-3">
+                  {Array.from({ length: 3 }).map((_, i) => (
+                    <div key={i} className="animate-pulse space-y-2">
+                      <div className="h-3 w-2/3 bg-gray-200 rounded" />
+                      <div className="h-3 w-1/2 bg-gray-100 rounded" />
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {newsError && !newsLoading && (
+                <div className="text-sm text-red-600">{newsError}</div>
+              )}
+
+              {!newsLoading && !newsError && latestNews.length === 0 && (
+                <div className="text-sm text-gray-600">No news yet.</div>
+              )}
+
+              {!newsLoading && !newsError && latestNews.length > 0 && (
+                <ul className="space-y-4">
+                  {latestNews.map(item => (
+                    <li key={item.id} className="group">
+                      <Link href={`/news/${item.slug}`} className="block">
+                        <div className="text-xs text-gray-500">
+                          {item.published_at ? new Date(item.published_at).toLocaleDateString('de-DE') : 'Recent'}
+                        </div>
+                        <div className="text-sm font-semibold text-blue-900 group-hover:text-blue-700 line-clamp-2">
+                          {item.title}
+                        </div>
+                        {item.summary && (
+                          <div className="text-xs text-gray-600 line-clamp-2 mt-1">
+                            {item.summary}
+                          </div>
+                        )}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              )}
            </div>
          </div>
        </main>
--- a/src/app/suspended/page.tsx
+++ b/src/app/suspended/page.tsx
@ -0,0 +1,32 @@
+'use client'
+
+import Link from 'next/link'
+import PageLayout from '../components/PageLayout'
+import PageTransitionEffect from '../components/animation/pageTransitionEffect'
+
+export default function SuspendedPage() {
+  return (
+    <PageTransitionEffect>
+      <PageLayout showFooter={true} className="bg-[#F5F5F0] text-slate-900">
+        <div className="min-h-[70vh] flex items-center justify-center px-6">
+          <div className="max-w-xl w-full rounded-3xl border border-slate-200 bg-white/80 shadow-xl p-8 text-center">
+            <div className="mx-auto mb-4 h-12 w-12 rounded-full bg-rose-100 text-rose-700 flex items-center justify-center text-2xl">!</div>
+            <h1 className="text-2xl md:text-3xl font-bold text-slate-900">Account suspended</h1>
+            <p className="mt-3 text-slate-700">
+              Your account has been suspended. For more information, contact
+              {' '}<a className="text-[#8D6B1D] font-semibold" href="mailto:office@profit-planet.com">office@profit-planet.com</a>.
+            </p>
+            <div className="mt-6">
+              <Link
+                href="/login"
+                className="inline-flex items-center justify-center rounded-xl border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-800 hover:bg-slate-50"
+              >
+                Back to login
+              </Link>
+            </div>
+          </div>
+        </div>
+      </PageLayout>
+    </PageTransitionEffect>
+  )
+}
--- a/src/app/utils/api.ts
+++ b/src/app/utils/api.ts
@ -154,8 +154,15 @@ export class ApiClient {
    )
  }
  
-  static async delete(endpoint: string, token?: string): Promise<Response> {
-    return this.makeRequest(endpoint, { method: 'DELETE' }, token)
+  static async delete(endpoint: string, token?: string, data?: any): Promise<Response> {
+    return this.makeRequest(
+      endpoint,
+      {
+        method: 'DELETE',
+        body: data ? JSON.stringify(data) : undefined,
+      },
+      token
+    )
  }
 }

@ -365,6 +372,16 @@ export class AdminAPI {
    return response.json()
  }

+  static async removePoolMembers(token: string, poolId: string | number, userIds: Array<string | number>) {
+    const endpoint = API_ENDPOINTS.ADMIN_POOL_MEMBERS.replace(':id', String(poolId))
+    const response = await ApiClient.delete(endpoint, token, { userIds })
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ message: 'Failed to remove pool members' }))
+      throw new Error(error.message || 'Failed to remove pool members')
+    }
+    return response.json()
+  }
+
  static async updateUserStatus(token: string, userId: string, status: string) {
    const endpoint = API_ENDPOINTS.ADMIN_UPDATE_USER_STATUS.replace(':id', userId)
    const response = await ApiClient.patch(endpoint, { status }, token)