feat(sprint-5): Phase 2 — React Query API client layer

- @tanstack/react-query with QueryClientProvider in providers/index.tsx
- Typed api-client.ts fetch wrapper with ApiError class + apiDownload
- Service modules: members, distributions, stock, reports, dashboard, portal, staff
- Offline banner component (onlineManager subscription)
- API error boundary with retry button
- Loading skeleton components (card, table, chart, form, dashboard)
- i18n for error/loading states (de/en)

cannamanage-frontend/src/components/api-error-boundary.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { Component } from "react"
+import { AlertCircle, RefreshCw } from "lucide-react"
+
+import type { ErrorInfo, ReactNode } from "react"
+
+import { ApiError } from "@/lib/api-client"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+
+interface ApiErrorBoundaryProps {
+  children: ReactNode
+  fallbackMessage?: string
+}
+
+interface ApiErrorBoundaryState {
+  hasError: boolean
+  error: Error | null
+}
+
+export class ApiErrorBoundary extends Component<
+  ApiErrorBoundaryProps,
+  ApiErrorBoundaryState
+> {
+  constructor(props: ApiErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): ApiErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("[ApiErrorBoundary]", error, errorInfo)
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      const error = this.state.error
+      const isApiError = error instanceof ApiError
+      const message = isApiError
+        ? error.message
+        : this.props.fallbackMessage || "An unexpected error occurred."
+
+      return (
+        <Card className="mx-auto mt-8 max-w-md">
+          <CardContent className="flex flex-col items-center gap-4 p-6 text-center">
+            <AlertCircle className="text-destructive h-10 w-10" />
+            <div className="space-y-1">
+              <p className="text-sm font-medium">{message}</p>
+              {isApiError && error.code !== "NETWORK_ERROR" && (
+                <p className="text-muted-foreground text-xs">
+                  Code: {error.code} (HTTP {error.status})
+                </p>
+              )}
+            </div>
+            <Button variant="outline" size="sm" onClick={this.handleRetry}>
+              <RefreshCw className="mr-2 h-4 w-4" />
+              Retry
+            </Button>
+          </CardContent>
+        </Card>
+      )
+    }
+
+    return this.props.children
+  }
+}

cannamanage-frontend/src/components/offline-banner.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { onlineManager } from "@tanstack/react-query"
+import { useTranslations } from "next-intl"
+import { WifiOff } from "lucide-react"
+
+import type { ReactNode } from "react"
+
+export function OfflineBanner() {
+  const t = useTranslations("api")
+  const [isOnline, setIsOnline] = useState(true)
+
+  useEffect(() => {
+    // Subscribe to online manager state changes
+    const unsubscribe = onlineManager.subscribe((online) => {
+      setIsOnline(online)
+    })
+    // Set initial state
+    setIsOnline(onlineManager.isOnline())
+    return () => unsubscribe()
+  }, [])
+
+  if (isOnline) return null
+
+  return (
+    <div
+      role="alert"
+      aria-live="polite"
+      className="bg-destructive/10 border-destructive/30 text-destructive flex items-center gap-2 border-b px-4 py-2 text-sm"
+    >
+      <WifiOff className="h-4 w-4 shrink-0" />
+      <span>{t("offline")}</span>
+    </div>
+  )
+}
+
+/**
+ * Wrapper that prevents hydration mismatch for online/offline state.
+ */
+export function OfflineBannerWrapper({ children }: { children: ReactNode }) {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return null
+  return <>{children}</>
+}

cannamanage-frontend/src/components/ui/data-skeleton.tsx

@@ -0,0 +1,82 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+/**
+ * Skeleton for KPI stat cards on the dashboard.
+ */
+export function CardSkeleton() {
+  return (
+    <div className="space-y-3 rounded-lg border p-6">
+      <Skeleton className="h-4 w-24" />
+      <Skeleton className="h-8 w-16" />
+      <Skeleton className="h-3 w-32" />
+    </div>
+  )
+}
+
+/**
+ * Skeleton for a data table (header + rows).
+ */
+export function TableSkeleton({
+  rows = 5,
+  columns = 4,
+}: {
+  rows?: number
+  columns?: number
+}) {
+  return (
+    <div className="w-full space-y-2">
+      {/* Header */}
+      <div className="flex gap-4 border-b pb-2">
+        {Array.from({ length: columns }).map((_, i) => (
+          <Skeleton key={`header-${i}`} className="h-4 flex-1" />
+        ))}
+      </div>
+      {/* Rows */}
+      {Array.from({ length: rows }).map((_, rowIdx) => (
+        <div key={`row-${rowIdx}`} className="flex gap-4 py-2">
+          {Array.from({ length: columns }).map((_, colIdx) => (
+            <Skeleton key={`cell-${rowIdx}-${colIdx}`} className="h-4 flex-1" />
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+/**
+ * Skeleton for chart / Recharts areas.
+ */
+export function ChartSkeleton() {
+  return (
+    <div className="space-y-4 rounded-lg border p-6">
+      <Skeleton className="h-5 w-40" />
+      <Skeleton className="h-48 w-full" />
+    </div>
+  )
+}
+
+/**
+ * Skeleton for a single form field.
+ */
+export function FormFieldSkeleton() {
+  return (
+    <div className="space-y-2">
+      <Skeleton className="h-4 w-20" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+  )
+}
+
+/**
+ * Grid of card skeletons for the dashboard.
+ */
+export function DashboardSkeleton() {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <CardSkeleton />
+      <CardSkeleton />
+      <CardSkeleton />
+      <CardSkeleton />
+    </div>
+  )
+}