feat: implement latest news section with loading and error handling

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>

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">
+              <div className="flex items-center justify-between mb-4">
-                Latest News
+                <h2 className="text-sm sm:text-base font-semibold text-gray-900">
-              </h2>
+                  Latest News
-              <ul className="list-disc pl-5 space-y-2 text-sm text-gray-700">
+                </h2>
-                <li>
+                <Link href="/news" className="text-xs sm:text-sm font-medium text-blue-900 hover:text-blue-700">
-                  <span className="font-medium text-[#8D6B1D]">New:</span> Referral system
+                  View all
-                  launch – invite friends and earn rewards.
+                </Link>
-                </li>
+              </div>
-                <li>
+
-                  Profile completion unlocks more features. Keep progressing!
+              {newsLoading && (
-                </li>
+                <div className="space-y-3">
-              </ul>
+                  {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>