feat(L+M): configurable dashboard widget system + test framework
Phase L: Dashboard widget system - Migration 046: dashboard_configs table (user/tenant/role fallback cascade) - DashboardConfig model + dashboard_service with get/upsert per-user and tenant-default - API router: GET/PUT /api/dashboard/config, GET/PUT /api/dashboard/tenant-default - Frontend: 5 widget components (ProductionStats, QueueStatus, RecentRenders, CostOverview, WorkerStatus) - DashboardGrid with API-backed config, DashboardCustomizeModal (checkbox selection, save/cancel) - Dashboard.tsx: widget grid + analytics section (privileged users) - Admin.tsx: restructured with new section order and Maintenance 2-col grid Phase M: Test framework - Backend: pytest-asyncio + pytest-cov + factory-boy in pyproject.toml - conftest.py: excel_dir fixtures + async DB fixtures + mock storage/celery stubs - Domain tests: billing_service, cache_service, notifications_service, imports_sanity - Integration: test_api_health.py smoke test (requires running backend) - Frontend: vitest + @testing-library/react + msw added to package.json - vite.config.ts: test block (jsdom + globals + setupFiles) - tsconfig.json: exclude src/__tests__ from main tsc (test runner handles its own types) - MSW handlers for /api/auth/me, Billing.test.tsx, formatters.test.ts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
"""Add dashboard_configs table.
|
||||
|
||||
Revision ID: 046
|
||||
Revises: 045
|
||||
"""
|
||||
import sqlalchemy as sa
|
||||
from alembic import op
|
||||
from sqlalchemy.dialects.postgresql import UUID, JSONB
|
||||
|
||||
revision = '046'
|
||||
down_revision = '045'
|
||||
branch_labels = None
|
||||
depends_on = None
|
||||
|
||||
|
||||
def upgrade():
|
||||
op.create_table(
|
||||
'dashboard_configs',
|
||||
sa.Column('id', UUID(as_uuid=True), primary_key=True, server_default=sa.text('gen_random_uuid()')),
|
||||
sa.Column('tenant_id', UUID(as_uuid=True), sa.ForeignKey('tenants.id', ondelete='CASCADE'), nullable=True),
|
||||
sa.Column('user_id', UUID(as_uuid=True), sa.ForeignKey('users.id', ondelete='CASCADE'), nullable=True),
|
||||
sa.Column('widgets', JSONB, nullable=False, server_default=sa.text("'[]'::jsonb")),
|
||||
sa.Column('is_tenant_default', sa.Boolean, nullable=False, server_default='false'),
|
||||
sa.Column('created_at', sa.DateTime, nullable=False, server_default=sa.text('NOW()')),
|
||||
sa.Column('updated_at', sa.DateTime, nullable=False, server_default=sa.text('NOW()')),
|
||||
)
|
||||
# Unique: one config per user
|
||||
op.create_index(
|
||||
'uq_dashboard_config_user',
|
||||
'dashboard_configs',
|
||||
['user_id'],
|
||||
unique=True,
|
||||
postgresql_where=sa.text('user_id IS NOT NULL'),
|
||||
)
|
||||
# Unique: one tenant-default per tenant
|
||||
op.create_index(
|
||||
'uq_dashboard_config_tenant_default',
|
||||
'dashboard_configs',
|
||||
['tenant_id'],
|
||||
unique=True,
|
||||
postgresql_where=sa.text('is_tenant_default = true'),
|
||||
)
|
||||
|
||||
|
||||
def downgrade():
|
||||
op.drop_index('uq_dashboard_config_tenant_default', table_name='dashboard_configs')
|
||||
op.drop_index('uq_dashboard_config_user', table_name='dashboard_configs')
|
||||
op.drop_table('dashboard_configs')
|
||||
@@ -0,0 +1,152 @@
|
||||
"""Dashboard widget configuration endpoints."""
|
||||
import logging
|
||||
import uuid
|
||||
from typing import Any
|
||||
|
||||
from fastapi import APIRouter, Depends
|
||||
from pydantic import BaseModel
|
||||
from sqlalchemy.ext.asyncio import AsyncSession
|
||||
|
||||
from app.database import get_db
|
||||
from app.domains.admin.dashboard_service import (
|
||||
get_user_dashboard_config,
|
||||
upsert_user_dashboard_config,
|
||||
upsert_tenant_default,
|
||||
)
|
||||
from app.utils.auth import get_current_user, require_admin
|
||||
from app.models.user import User
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
router = APIRouter(prefix="/dashboard", tags=["dashboard"])
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Schemas
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
class WidgetPosition(BaseModel):
|
||||
col: int
|
||||
row: int
|
||||
w: int
|
||||
h: int
|
||||
|
||||
|
||||
class WidgetConfig(BaseModel):
|
||||
widget_type: str
|
||||
position: WidgetPosition
|
||||
config: dict[str, Any] | None = None
|
||||
|
||||
|
||||
class DashboardConfigPayload(BaseModel):
|
||||
widgets: list[WidgetConfig]
|
||||
|
||||
|
||||
class DashboardConfigResponse(BaseModel):
|
||||
widgets: list[WidgetConfig]
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Helpers
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
def _to_response(widgets: list[dict]) -> DashboardConfigResponse:
|
||||
parsed = []
|
||||
for w in widgets:
|
||||
pos = w.get("position", {})
|
||||
parsed.append(
|
||||
WidgetConfig(
|
||||
widget_type=w.get("widget_type", ""),
|
||||
position=WidgetPosition(
|
||||
col=pos.get("col", 0),
|
||||
row=pos.get("row", 0),
|
||||
w=pos.get("w", 1),
|
||||
h=pos.get("h", 1),
|
||||
),
|
||||
config=w.get("config"),
|
||||
)
|
||||
)
|
||||
return DashboardConfigResponse(widgets=parsed)
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Endpoints
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
@router.get("/config", response_model=DashboardConfigResponse)
|
||||
async def get_config(
|
||||
current_user: User = Depends(get_current_user),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
) -> DashboardConfigResponse:
|
||||
"""Load the current user's dashboard widget config (with fallback cascade)."""
|
||||
widgets = await get_user_dashboard_config(
|
||||
db=db,
|
||||
user_id=current_user.id,
|
||||
tenant_id=current_user.tenant_id,
|
||||
role=current_user.role.value,
|
||||
)
|
||||
return _to_response(widgets)
|
||||
|
||||
|
||||
@router.put("/config", response_model=DashboardConfigResponse)
|
||||
async def update_config(
|
||||
payload: DashboardConfigPayload,
|
||||
current_user: User = Depends(get_current_user),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
) -> DashboardConfigResponse:
|
||||
"""Save or update the current user's dashboard widget config."""
|
||||
widgets_raw = [w.model_dump() for w in payload.widgets]
|
||||
config = await upsert_user_dashboard_config(
|
||||
db=db,
|
||||
user_id=current_user.id,
|
||||
tenant_id=current_user.tenant_id,
|
||||
widgets=widgets_raw,
|
||||
)
|
||||
return _to_response(list(config.widgets))
|
||||
|
||||
|
||||
@router.get("/tenant-default", response_model=DashboardConfigResponse)
|
||||
async def get_tenant_default(
|
||||
current_user: User = Depends(require_admin),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
) -> DashboardConfigResponse:
|
||||
"""Load the tenant-default dashboard widget config (admin only)."""
|
||||
from sqlalchemy import select
|
||||
from app.domains.admin.models import DashboardConfig
|
||||
|
||||
if current_user.tenant_id is None:
|
||||
return DashboardConfigResponse(widgets=[])
|
||||
|
||||
result = await db.execute(
|
||||
select(DashboardConfig).where(
|
||||
DashboardConfig.tenant_id == current_user.tenant_id,
|
||||
DashboardConfig.is_tenant_default.is_(True),
|
||||
)
|
||||
)
|
||||
config = result.scalar_one_or_none()
|
||||
if config is None:
|
||||
return DashboardConfigResponse(widgets=[])
|
||||
return _to_response(list(config.widgets))
|
||||
|
||||
|
||||
@router.put("/tenant-default", response_model=DashboardConfigResponse)
|
||||
async def update_tenant_default(
|
||||
payload: DashboardConfigPayload,
|
||||
current_user: User = Depends(require_admin),
|
||||
db: AsyncSession = Depends(get_db),
|
||||
) -> DashboardConfigResponse:
|
||||
"""Set the tenant-default widget config (admin only)."""
|
||||
if current_user.tenant_id is None:
|
||||
from fastapi import HTTPException, status
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail="Admin user has no tenant_id assigned.",
|
||||
)
|
||||
|
||||
widgets_raw = [w.model_dump() for w in payload.widgets]
|
||||
config = await upsert_tenant_default(
|
||||
db=db,
|
||||
tenant_id=current_user.tenant_id,
|
||||
widgets=widgets_raw,
|
||||
)
|
||||
return _to_response(list(config.widgets))
|
||||
@@ -0,0 +1,148 @@
|
||||
"""Dashboard widget configuration service.
|
||||
|
||||
Provides async functions for loading and persisting per-user and
|
||||
tenant-default dashboard widget layouts.
|
||||
"""
|
||||
import logging
|
||||
import uuid
|
||||
from datetime import datetime
|
||||
|
||||
from sqlalchemy import select
|
||||
from sqlalchemy.ext.asyncio import AsyncSession
|
||||
|
||||
from app.domains.admin.models import DashboardConfig
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Widget type literals
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
WIDGET_TYPES = (
|
||||
"ProductionStats",
|
||||
"QueueStatus",
|
||||
"RecentRenders",
|
||||
"CostOverview",
|
||||
"WorkerStatus",
|
||||
)
|
||||
|
||||
# Default layouts per role
|
||||
_DEFAULT_ADMIN_WIDGETS: list[dict] = [
|
||||
{"widget_type": "ProductionStats", "position": {"col": 0, "row": 0, "w": 1, "h": 1}},
|
||||
{"widget_type": "QueueStatus", "position": {"col": 1, "row": 0, "w": 1, "h": 1}},
|
||||
{"widget_type": "WorkerStatus", "position": {"col": 2, "row": 0, "w": 1, "h": 1}},
|
||||
{"widget_type": "RecentRenders", "position": {"col": 0, "row": 1, "w": 2, "h": 1}},
|
||||
{"widget_type": "CostOverview", "position": {"col": 2, "row": 1, "w": 1, "h": 1}},
|
||||
]
|
||||
|
||||
_DEFAULT_CLIENT_WIDGETS: list[dict] = [
|
||||
{"widget_type": "RecentRenders", "position": {"col": 0, "row": 0, "w": 2, "h": 1}},
|
||||
{"widget_type": "ProductionStats", "position": {"col": 2, "row": 0, "w": 1, "h": 1}},
|
||||
]
|
||||
|
||||
|
||||
def get_default_widgets_for_role(role: str) -> list[dict]:
|
||||
"""Return systemwide default widget layout for a given role.
|
||||
|
||||
admin / project_manager: all 5 widget types.
|
||||
client: RecentRenders + ProductionStats only.
|
||||
"""
|
||||
if role in ("admin", "project_manager"):
|
||||
return [w.copy() for w in _DEFAULT_ADMIN_WIDGETS]
|
||||
return [w.copy() for w in _DEFAULT_CLIENT_WIDGETS]
|
||||
|
||||
|
||||
async def get_user_dashboard_config(
|
||||
db: AsyncSession,
|
||||
user_id: uuid.UUID,
|
||||
tenant_id: uuid.UUID | None,
|
||||
role: str,
|
||||
) -> list[dict]:
|
||||
"""Load widget config with fallback cascade.
|
||||
|
||||
1. User-specific config (user_id match).
|
||||
2. Tenant-default config (is_tenant_default=True for the tenant).
|
||||
3. System default based on role.
|
||||
"""
|
||||
# 1. User-specific
|
||||
result = await db.execute(
|
||||
select(DashboardConfig).where(DashboardConfig.user_id == user_id)
|
||||
)
|
||||
config = result.scalar_one_or_none()
|
||||
if config is not None:
|
||||
return list(config.widgets) if config.widgets else []
|
||||
|
||||
# 2. Tenant default
|
||||
if tenant_id is not None:
|
||||
result = await db.execute(
|
||||
select(DashboardConfig).where(
|
||||
DashboardConfig.tenant_id == tenant_id,
|
||||
DashboardConfig.is_tenant_default.is_(True),
|
||||
)
|
||||
)
|
||||
tenant_config = result.scalar_one_or_none()
|
||||
if tenant_config is not None:
|
||||
return list(tenant_config.widgets) if tenant_config.widgets else []
|
||||
|
||||
# 3. System default
|
||||
return get_default_widgets_for_role(role)
|
||||
|
||||
|
||||
async def upsert_user_dashboard_config(
|
||||
db: AsyncSession,
|
||||
user_id: uuid.UUID,
|
||||
tenant_id: uuid.UUID | None,
|
||||
widgets: list[dict],
|
||||
) -> DashboardConfig:
|
||||
"""Save or update the user-specific widget config."""
|
||||
result = await db.execute(
|
||||
select(DashboardConfig).where(DashboardConfig.user_id == user_id)
|
||||
)
|
||||
config = result.scalar_one_or_none()
|
||||
|
||||
if config is None:
|
||||
config = DashboardConfig(
|
||||
user_id=user_id,
|
||||
tenant_id=tenant_id,
|
||||
widgets=widgets,
|
||||
is_tenant_default=False,
|
||||
)
|
||||
db.add(config)
|
||||
else:
|
||||
config.widgets = widgets
|
||||
config.updated_at = datetime.utcnow()
|
||||
|
||||
await db.commit()
|
||||
await db.refresh(config)
|
||||
return config
|
||||
|
||||
|
||||
async def upsert_tenant_default(
|
||||
db: AsyncSession,
|
||||
tenant_id: uuid.UUID,
|
||||
widgets: list[dict],
|
||||
) -> DashboardConfig:
|
||||
"""Set the tenant-default widget config (admin only)."""
|
||||
result = await db.execute(
|
||||
select(DashboardConfig).where(
|
||||
DashboardConfig.tenant_id == tenant_id,
|
||||
DashboardConfig.is_tenant_default.is_(True),
|
||||
)
|
||||
)
|
||||
config = result.scalar_one_or_none()
|
||||
|
||||
if config is None:
|
||||
config = DashboardConfig(
|
||||
tenant_id=tenant_id,
|
||||
user_id=None,
|
||||
widgets=widgets,
|
||||
is_tenant_default=True,
|
||||
)
|
||||
db.add(config)
|
||||
else:
|
||||
config.widgets = widgets
|
||||
config.updated_at = datetime.utcnow()
|
||||
|
||||
await db.commit()
|
||||
await db.refresh(config)
|
||||
return config
|
||||
@@ -0,0 +1,42 @@
|
||||
import uuid
|
||||
from datetime import datetime
|
||||
from typing import TYPE_CHECKING
|
||||
|
||||
from sqlalchemy import Boolean, DateTime, ForeignKey
|
||||
from sqlalchemy.orm import Mapped, mapped_column
|
||||
from sqlalchemy.dialects.postgresql import UUID, JSONB
|
||||
|
||||
from app.database import Base
|
||||
|
||||
if TYPE_CHECKING:
|
||||
pass
|
||||
|
||||
|
||||
class DashboardConfig(Base):
|
||||
__tablename__ = "dashboard_configs"
|
||||
|
||||
id: Mapped[uuid.UUID] = mapped_column(
|
||||
UUID(as_uuid=True), primary_key=True, default=uuid.uuid4
|
||||
)
|
||||
tenant_id: Mapped[uuid.UUID | None] = mapped_column(
|
||||
UUID(as_uuid=True),
|
||||
ForeignKey("tenants.id", ondelete="CASCADE"),
|
||||
nullable=True,
|
||||
index=True,
|
||||
)
|
||||
user_id: Mapped[uuid.UUID | None] = mapped_column(
|
||||
UUID(as_uuid=True),
|
||||
ForeignKey("users.id", ondelete="CASCADE"),
|
||||
nullable=True,
|
||||
index=True,
|
||||
)
|
||||
widgets: Mapped[list] = mapped_column(JSONB, nullable=False, default=list)
|
||||
is_tenant_default: Mapped[bool] = mapped_column(
|
||||
Boolean, nullable=False, default=False
|
||||
)
|
||||
created_at: Mapped[datetime] = mapped_column(
|
||||
DateTime, nullable=False, default=datetime.utcnow
|
||||
)
|
||||
updated_at: Mapped[datetime] = mapped_column(
|
||||
DateTime, nullable=False, default=datetime.utcnow, onupdate=datetime.utcnow
|
||||
)
|
||||
@@ -23,6 +23,7 @@ from app.domains.tenants.router import router as tenants_router
|
||||
from app.domains.rendering.workflow_router import router as workflows_router
|
||||
from app.domains.media.router import router as media_router
|
||||
from app.api.routers.asset_libraries import router as asset_libraries_router
|
||||
from app.domains.admin.dashboard_router import router as dashboard_router
|
||||
|
||||
|
||||
@asynccontextmanager
|
||||
@@ -88,6 +89,7 @@ app.include_router(tenants_router, prefix="/api")
|
||||
app.include_router(workflows_router)
|
||||
app.include_router(media_router)
|
||||
app.include_router(asset_libraries_router, prefix="/api")
|
||||
app.include_router(dashboard_router, prefix="/api")
|
||||
|
||||
|
||||
@app.get("/health")
|
||||
|
||||
@@ -13,6 +13,7 @@ from app.domains.billing.models import PricingTier
|
||||
from app.domains.rendering.models import OutputType, RenderTemplate, ProductRenderPosition, WorkflowDefinition, WorkflowRun, WorkflowNodeResult
|
||||
from app.domains.materials.models import Material, MaterialAlias, AssetLibrary
|
||||
from app.domains.media.models import MediaAsset, MediaAssetType
|
||||
from app.domains.admin.models import DashboardConfig
|
||||
|
||||
# Also re-export SystemSetting (no domain assigned — stays as-is)
|
||||
from app.models.system_setting import SystemSetting
|
||||
@@ -22,4 +23,5 @@ __all__ = [
|
||||
"AuditLog", "PricingTier", "OutputType", "RenderTemplate", "ProductRenderPosition",
|
||||
"WorkflowDefinition", "WorkflowRun", "WorkflowNodeResult",
|
||||
"Material", "MaterialAlias", "AssetLibrary", "MediaAsset", "MediaAssetType", "SystemSetting",
|
||||
"DashboardConfig",
|
||||
]
|
||||
|
||||
@@ -39,6 +39,8 @@ dev = [
|
||||
"pytest>=8.0.0",
|
||||
"pytest-asyncio>=0.23.5",
|
||||
"httpx>=0.27.0",
|
||||
"pytest-cov>=5.0.0",
|
||||
"factory-boy>=3.3.0",
|
||||
]
|
||||
cad = [
|
||||
"trimesh>=4.2.0",
|
||||
@@ -46,4 +48,9 @@ cad = [
|
||||
]
|
||||
|
||||
[tool.pytest.ini_options]
|
||||
asyncio_mode = "auto"
|
||||
testpaths = ["tests"]
|
||||
markers = [
|
||||
"integration: marks tests requiring running services",
|
||||
"unit: marks offline tests",
|
||||
]
|
||||
|
||||
@@ -109,3 +109,140 @@ def parsed_linear_schiene(parsed_excel_all):
|
||||
@pytest.fixture(scope="session")
|
||||
def parsed_anschlagplatten(parsed_excel_all):
|
||||
return parsed_excel_all["Anschlagplatten"]
|
||||
|
||||
|
||||
# ── Test-DB (nutzt separate Test-Datenbank) ──────────────────────────────────
|
||||
|
||||
import os
|
||||
import uuid
|
||||
import pytest_asyncio
|
||||
from typing import AsyncGenerator
|
||||
from httpx import AsyncClient, ASGITransport
|
||||
from sqlalchemy.ext.asyncio import create_async_engine, AsyncSession, async_sessionmaker
|
||||
|
||||
TEST_DB_URL = os.environ.get(
|
||||
"TEST_DATABASE_URL",
|
||||
"postgresql+asyncpg://schaeffler:schaeffler@localhost:5432/schaeffler_test"
|
||||
)
|
||||
|
||||
|
||||
@pytest_asyncio.fixture
|
||||
async def test_engine():
|
||||
from app.database import Base
|
||||
from sqlalchemy import text
|
||||
import app.models # noqa - register all models
|
||||
engine = create_async_engine(TEST_DB_URL, echo=False)
|
||||
async with engine.begin() as conn:
|
||||
await conn.run_sync(Base.metadata.create_all)
|
||||
yield engine
|
||||
# Use CASCADE to handle circular FK dependencies in drop
|
||||
async with engine.begin() as conn:
|
||||
await conn.execute(text("DROP SCHEMA public CASCADE"))
|
||||
await conn.execute(text("CREATE SCHEMA public"))
|
||||
await engine.dispose()
|
||||
|
||||
|
||||
@pytest_asyncio.fixture
|
||||
async def db(test_engine) -> AsyncGenerator[AsyncSession, None]:
|
||||
session_factory = async_sessionmaker(test_engine, expire_on_commit=False)
|
||||
async with session_factory() as session:
|
||||
yield session
|
||||
await session.rollback()
|
||||
|
||||
|
||||
# ── Mock-Storage (LocalStorage in tmpdir) ───────────────────────────────────
|
||||
|
||||
@pytest.fixture
|
||||
def mock_storage(tmp_path, monkeypatch):
|
||||
"""Ersetzt MinIO-Storage durch lokalen tmpdir."""
|
||||
import app.core.storage as storage_module
|
||||
from unittest.mock import MagicMock
|
||||
mock = MagicMock()
|
||||
mock.exists.return_value = False
|
||||
mock.upload.return_value = "test/key"
|
||||
mock.download_bytes.return_value = b"fake-stl-data"
|
||||
mock.get_presigned_url.return_value = "http://localhost/presigned"
|
||||
monkeypatch.setattr(storage_module, "_storage_instance", mock)
|
||||
return mock
|
||||
|
||||
|
||||
# ── FastAPI Test-Client ──────────────────────────────────────────────────────
|
||||
|
||||
@pytest_asyncio.fixture
|
||||
async def client(db) -> AsyncGenerator[AsyncClient, None]:
|
||||
"""HTTP-Client mit überschriebener DB-Dependency."""
|
||||
from app.main import app
|
||||
from app.database import get_db
|
||||
|
||||
async def override_get_db():
|
||||
yield db
|
||||
|
||||
app.dependency_overrides[get_db] = override_get_db
|
||||
async with AsyncClient(transport=ASGITransport(app=app), base_url="http://test") as ac:
|
||||
yield ac
|
||||
app.dependency_overrides.clear()
|
||||
|
||||
|
||||
# ── Test-User + Auth-Token ───────────────────────────────────────────────────
|
||||
|
||||
@pytest_asyncio.fixture
|
||||
async def admin_user(db):
|
||||
from app.domains.auth.models import User, UserRole
|
||||
from app.utils.auth import hash_password
|
||||
user = User(
|
||||
id=uuid.uuid4(),
|
||||
email=f"test-admin-{uuid.uuid4().hex[:8]}@test.com",
|
||||
password_hash=hash_password("TestPass123!"),
|
||||
full_name="Test Admin",
|
||||
role=UserRole.admin,
|
||||
is_active=True,
|
||||
)
|
||||
db.add(user)
|
||||
await db.commit()
|
||||
await db.refresh(user)
|
||||
return user
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def admin_token(admin_user):
|
||||
from app.utils.auth import create_access_token
|
||||
return create_access_token(str(admin_user.id), admin_user.role.value)
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def auth_headers(admin_token):
|
||||
return {"Authorization": f"Bearer {admin_token}"}
|
||||
|
||||
|
||||
# ── Celery-Mock ──────────────────────────────────────────────────────────────
|
||||
|
||||
@pytest.fixture(autouse=True)
|
||||
def mock_celery_tasks(monkeypatch):
|
||||
"""Verhindert echte Celery-Task-Dispatching in Tests."""
|
||||
from unittest.mock import MagicMock
|
||||
mock_result = MagicMock()
|
||||
mock_result.id = "test-task-" + str(uuid.uuid4())[:8]
|
||||
|
||||
def mock_delay(*args, **kwargs):
|
||||
return mock_result
|
||||
|
||||
task_paths = [
|
||||
"app.domains.materials.tasks.refresh_asset_library_catalog",
|
||||
"app.tasks.step_tasks.process_step_file",
|
||||
"app.tasks.step_tasks.render_step_thumbnail",
|
||||
"app.tasks.step_tasks.generate_stl_cache",
|
||||
"app.domains.imports.tasks.validate_excel_import",
|
||||
"app.domains.rendering.tasks.render_still_task",
|
||||
"app.domains.rendering.tasks.render_turntable_task",
|
||||
]
|
||||
for path in task_paths:
|
||||
try:
|
||||
parts = path.rsplit(".", 1)
|
||||
module_path, attr = parts
|
||||
import importlib
|
||||
module = importlib.import_module(module_path)
|
||||
task = getattr(module, attr, None)
|
||||
if task and hasattr(task, "delay"):
|
||||
monkeypatch.setattr(task, "delay", mock_delay)
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
"""Tests for billing service."""
|
||||
import pytest
|
||||
from app.domains.billing.service import create_invoice, get_invoices
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_create_invoice_minimal(db, admin_user):
|
||||
"""Invoice kann mit Mindestdaten erstellt werden."""
|
||||
invoice = await create_invoice(
|
||||
db,
|
||||
tenant_id=None,
|
||||
order_line_ids=[],
|
||||
notes="Test invoice",
|
||||
)
|
||||
assert invoice.id is not None
|
||||
assert invoice.invoice_number.startswith("INV-")
|
||||
assert invoice.status == "draft"
|
||||
assert invoice.currency == "EUR"
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_invoice_number_sequential(db, admin_user):
|
||||
"""Invoice-Nummern sind sequenziell und eindeutig."""
|
||||
inv1 = await create_invoice(db, tenant_id=None, order_line_ids=[], notes="First")
|
||||
inv2 = await create_invoice(db, tenant_id=None, order_line_ids=[], notes="Second")
|
||||
assert inv1.invoice_number != inv2.invoice_number
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_get_invoices_returns_list(db):
|
||||
"""get_invoices gibt eine Liste zurück."""
|
||||
invoices = await get_invoices(db, tenant_id=None)
|
||||
assert isinstance(invoices, list)
|
||||
@@ -0,0 +1,41 @@
|
||||
"""Tests for STL conversion cache service (pure/unit — no DB needed)."""
|
||||
import pytest
|
||||
from pathlib import Path
|
||||
from app.domains.products.cache_service import compute_step_hash, _cache_key
|
||||
|
||||
|
||||
def test_compute_step_hash_stable(tmp_path):
|
||||
"""Gleiche Datei → gleicher Hash."""
|
||||
f = tmp_path / "test.stp"
|
||||
f.write_bytes(b"STEP data content")
|
||||
h1 = compute_step_hash(str(f))
|
||||
h2 = compute_step_hash(str(f))
|
||||
assert h1 == h2
|
||||
assert len(h1) == 64 # SHA256 hex
|
||||
|
||||
|
||||
def test_compute_step_hash_differs(tmp_path):
|
||||
"""Andere Datei → anderer Hash."""
|
||||
f1 = tmp_path / "a.stp"
|
||||
f1.write_bytes(b"content A")
|
||||
f2 = tmp_path / "b.stp"
|
||||
f2.write_bytes(b"content B")
|
||||
assert compute_step_hash(str(f1)) != compute_step_hash(str(f2))
|
||||
|
||||
|
||||
def test_cache_key_format():
|
||||
"""Cache-Key hat korrektes Format."""
|
||||
key = _cache_key("abc123", "low")
|
||||
assert key == "conversion-cache/abc123_low.stl"
|
||||
|
||||
|
||||
def test_store_stl_cache_uses_path(tmp_path, mock_storage):
|
||||
"""store_stl_cache übergibt Path-Objekt an storage.upload."""
|
||||
from app.domains.products.cache_service import store_stl_cache
|
||||
stl = tmp_path / "test.stl"
|
||||
stl.write_bytes(b"fake stl")
|
||||
store_stl_cache("abc123", "low", str(stl))
|
||||
call_args = mock_storage.upload.call_args
|
||||
assert call_args is not None
|
||||
first_arg = call_args[0][0]
|
||||
assert isinstance(first_arg, Path), f"Expected Path, got {type(first_arg)}"
|
||||
@@ -0,0 +1,28 @@
|
||||
"""Tests for Excel sanity check service (sync Celery service).
|
||||
|
||||
Note: run_sanity_check opens a real synchronous DB connection, so the
|
||||
meaningful tests are integration-only (marked accordingly). The unit-level
|
||||
test only verifies the import and signature.
|
||||
"""
|
||||
import pytest
|
||||
|
||||
|
||||
def test_run_sanity_check_importable():
|
||||
"""run_sanity_check can be imported without errors."""
|
||||
from app.domains.imports.service import run_sanity_check
|
||||
assert callable(run_sanity_check)
|
||||
|
||||
|
||||
@pytest.mark.integration
|
||||
def test_run_sanity_check_missing_file_does_not_crash():
|
||||
"""Sanity-check-Service gibt leeres Dict zurück bei nicht existierendem File (integration)."""
|
||||
from app.domains.imports.service import run_sanity_check
|
||||
import uuid
|
||||
import app.models # noqa - register all models so SQLAlchemy relationships resolve
|
||||
result = run_sanity_check(
|
||||
validation_id=str(uuid.uuid4()),
|
||||
excel_path="/nonexistent/test.xlsx",
|
||||
tenant_id=None,
|
||||
)
|
||||
# Service returns {} when validation not found
|
||||
assert isinstance(result, dict)
|
||||
@@ -0,0 +1,27 @@
|
||||
"""Tests for notification config service."""
|
||||
import pytest
|
||||
from app.domains.notifications.service import (
|
||||
upsert_notification_config,
|
||||
get_notification_configs,
|
||||
)
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_upsert_creates_config(db, admin_user):
|
||||
"""Kann Notification-Config anlegen."""
|
||||
await upsert_notification_config(db, admin_user.id, "render_complete", "in_app", True)
|
||||
configs = await get_notification_configs(db, admin_user.id)
|
||||
assert len(configs) >= 1
|
||||
render_cfg = next((c for c in configs if c.event_type == "render_complete"), None)
|
||||
assert render_cfg is not None
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_upsert_updates_existing(db, admin_user):
|
||||
"""Update überschreibt bestehende Config."""
|
||||
await upsert_notification_config(db, admin_user.id, "order_submitted", "in_app", True)
|
||||
await upsert_notification_config(db, admin_user.id, "order_submitted", "in_app", False)
|
||||
configs = await get_notification_configs(db, admin_user.id)
|
||||
cfg = next((c for c in configs if c.event_type == "order_submitted"), None)
|
||||
assert cfg is not None
|
||||
assert cfg.enabled is False
|
||||
@@ -0,0 +1,25 @@
|
||||
"""Basic API smoke tests."""
|
||||
import pytest
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_health_endpoint(client):
|
||||
resp = await client.get("/health")
|
||||
assert resp.status_code == 200
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_settings_requires_auth(client):
|
||||
"""Settings endpoint ohne Auth → 401/403."""
|
||||
resp = await client.get("/api/admin/settings")
|
||||
assert resp.status_code in (401, 403)
|
||||
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_admin_settings_with_auth(client, auth_headers):
|
||||
"""Settings endpoint mit Admin-Token → 200."""
|
||||
resp = await client.get("/api/admin/settings", headers=auth_headers)
|
||||
assert resp.status_code == 200
|
||||
data = resp.json()
|
||||
assert "blender_engine" in data
|
||||
assert "thumbnail_format" in data
|
||||
Generated
+2509
-1
File diff suppressed because it is too large
Load Diff
+14
-3
@@ -6,16 +6,20 @@
|
||||
"scripts": {
|
||||
"dev": "vite --host 0.0.0.0 --port 5173",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest",
|
||||
"test:coverage": "vitest run --coverage"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/drei": "^9.102.3",
|
||||
"@xyflow/react": "^12.0.0",
|
||||
"@react-three/fiber": "^8.16.2",
|
||||
"@tanstack/react-query": "^5.28.4",
|
||||
"@tanstack/react-table": "^8.14.0",
|
||||
"@xyflow/react": "^12.0.0",
|
||||
"axios": "^1.6.8",
|
||||
"clsx": "^2.1.0",
|
||||
"get-stream": "^9.0.1",
|
||||
"lucide-react": "^0.363.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
@@ -28,14 +32,21 @@
|
||||
"zustand": "^4.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/react": "^18.2.74",
|
||||
"@types/react-dom": "^18.2.23",
|
||||
"@types/three": "^0.163.0",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"@vitest/coverage-v8": "^1.6.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"jsdom": "^24.1.3",
|
||||
"msw": "^2.12.10",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"typescript": "^5.4.3",
|
||||
"vite": "^5.2.6"
|
||||
"vite": "^5.2.6",
|
||||
"vitest": "^1.6.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import { http, HttpResponse } from 'msw'
|
||||
|
||||
export const handlers = [
|
||||
http.get('/api/admin/settings', () => {
|
||||
return HttpResponse.json({
|
||||
blender_engine: 'cycles',
|
||||
blender_cycles_samples: 256,
|
||||
blender_eevee_samples: 64,
|
||||
thumbnail_format: 'jpg',
|
||||
stl_quality: 'low',
|
||||
blender_smooth_angle: 30,
|
||||
cycles_device: 'auto',
|
||||
blender_max_concurrent_renders: 3,
|
||||
render_stall_timeout_minutes: 120,
|
||||
render_backend: 'celery',
|
||||
product_thumbnail_priority: '["latest_render","cad_thumbnail"]',
|
||||
smtp_enabled: false,
|
||||
smtp_host: '',
|
||||
smtp_port: 587,
|
||||
smtp_user: '',
|
||||
smtp_password: '',
|
||||
smtp_from_address: '',
|
||||
})
|
||||
}),
|
||||
http.get('/api/billing/invoices', () => {
|
||||
return HttpResponse.json([])
|
||||
}),
|
||||
http.get('/api/notifications/config', () => {
|
||||
return HttpResponse.json([])
|
||||
}),
|
||||
http.get('/api/dashboard/config', () => {
|
||||
return HttpResponse.json([
|
||||
{ widget_type: 'ProductionStats', position: { col: 0, row: 0, w: 2, h: 1 } },
|
||||
{ widget_type: 'QueueStatus', position: { col: 2, row: 0, w: 1, h: 1 } },
|
||||
])
|
||||
}),
|
||||
]
|
||||
@@ -0,0 +1,3 @@
|
||||
import { setupServer } from 'msw/node'
|
||||
import { handlers } from './handlers'
|
||||
export const server = setupServer(...handlers)
|
||||
@@ -0,0 +1,9 @@
|
||||
import { describe, test, expect } from 'vitest'
|
||||
|
||||
// Minimaler Test: Billing-Seite kann importiert werden ohne Crash
|
||||
describe('Billing Page', () => {
|
||||
test('renders without crashing', async () => {
|
||||
const module = await import('../../pages/Billing')
|
||||
expect(module.default).toBeDefined()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1 @@
|
||||
import '@testing-library/jest-dom'
|
||||
@@ -0,0 +1,16 @@
|
||||
import { describe, test, expect } from 'vitest'
|
||||
|
||||
// Teste pure utility-Funktionen
|
||||
describe('Formatter utilities', () => {
|
||||
test('EUR formatting', () => {
|
||||
const amount = 1234.56
|
||||
const formatted = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(amount)
|
||||
expect(formatted).toContain('1.234,56')
|
||||
})
|
||||
|
||||
test('date formatting', () => {
|
||||
const d = new Date('2026-03-06T00:00:00Z')
|
||||
const iso = d.toISOString().slice(0, 10)
|
||||
expect(iso).toBe('2026-03-06')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,56 @@
|
||||
import api from './client'
|
||||
|
||||
export type WidgetType =
|
||||
| 'ProductionStats'
|
||||
| 'QueueStatus'
|
||||
| 'RecentRenders'
|
||||
| 'CostOverview'
|
||||
| 'WorkerStatus'
|
||||
|
||||
export interface WidgetPosition {
|
||||
col: number
|
||||
row: number
|
||||
w: number
|
||||
h: number
|
||||
}
|
||||
|
||||
export interface WidgetConfig {
|
||||
widget_type: WidgetType
|
||||
position: WidgetPosition
|
||||
config?: Record<string, unknown>
|
||||
}
|
||||
|
||||
interface DashboardConfigResponse {
|
||||
widgets: WidgetConfig[]
|
||||
}
|
||||
|
||||
export async function getDashboardConfig(): Promise<WidgetConfig[]> {
|
||||
const { data } = await api.get<DashboardConfigResponse>('/dashboard/config')
|
||||
return data.widgets
|
||||
}
|
||||
|
||||
export async function updateDashboardConfig(
|
||||
widgets: WidgetConfig[]
|
||||
): Promise<WidgetConfig[]> {
|
||||
const { data } = await api.put<DashboardConfigResponse>('/dashboard/config', {
|
||||
widgets,
|
||||
})
|
||||
return data.widgets
|
||||
}
|
||||
|
||||
export async function getTenantDefaultDashboard(): Promise<WidgetConfig[]> {
|
||||
const { data } = await api.get<DashboardConfigResponse>(
|
||||
'/dashboard/tenant-default'
|
||||
)
|
||||
return data.widgets
|
||||
}
|
||||
|
||||
export async function updateTenantDefaultDashboard(
|
||||
widgets: WidgetConfig[]
|
||||
): Promise<WidgetConfig[]> {
|
||||
const { data } = await api.put<DashboardConfigResponse>(
|
||||
'/dashboard/tenant-default',
|
||||
{ widgets }
|
||||
)
|
||||
return data.widgets
|
||||
}
|
||||
@@ -101,7 +101,7 @@ function LogPanel({
|
||||
}: {
|
||||
entries: RenderLogEntry[]
|
||||
isActive: boolean
|
||||
scrollRef: React.RefObject<HTMLDivElement | null>
|
||||
scrollRef: React.RefObject<HTMLDivElement>
|
||||
maxHeight: string
|
||||
}) {
|
||||
return (
|
||||
|
||||
@@ -305,10 +305,10 @@ export default function AdminDashboard() {
|
||||
<YAxis type="category" dataKey="output_type" tick={{ fill: 'var(--color-text-muted)', fontSize: 10 }} width={130} />
|
||||
<Tooltip
|
||||
contentStyle={CHART_TOOLTIP_STYLE}
|
||||
formatter={(v: number | null | undefined, name: string) => [
|
||||
v != null ? (v >= 60 ? `${(v / 60).toFixed(1)} min` : `${v.toFixed(0)} s`) : '—',
|
||||
name,
|
||||
]}
|
||||
formatter={(v: unknown, name?: string) => {
|
||||
const n = typeof v === 'number' ? v : null
|
||||
return [n != null ? (n >= 60 ? `${(n / 60).toFixed(1)} min` : `${n.toFixed(0)} s`) : '—', name ?? '']
|
||||
}}
|
||||
/>
|
||||
<Legend wrapperStyle={{ fontSize: 11 }} />
|
||||
<Bar dataKey="avg_render_s" name="Ø Renderzeit" fill={INDIGO} radius={[0, 3, 3, 0]} />
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
import { useState } from 'react'
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { X, Save } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { updateDashboardConfig, updateTenantDefaultDashboard } from '../../api/dashboard'
|
||||
import type { WidgetConfig, WidgetType } from '../../api/dashboard'
|
||||
|
||||
const WIDGET_LABELS: Record<WidgetType, string> = {
|
||||
ProductionStats: 'Production Stats',
|
||||
QueueStatus: 'Queue Status',
|
||||
RecentRenders: 'Recent Renders',
|
||||
CostOverview: 'Cost Overview',
|
||||
WorkerStatus: 'Worker Status',
|
||||
}
|
||||
|
||||
const ALL_WIDGET_TYPES: WidgetType[] = [
|
||||
'ProductionStats',
|
||||
'QueueStatus',
|
||||
'RecentRenders',
|
||||
'CostOverview',
|
||||
'WorkerStatus',
|
||||
]
|
||||
|
||||
function recalculatePositions(widgets: WidgetConfig[]): WidgetConfig[] {
|
||||
// Re-layout: 3 columns, each widget w=1 h=1, fill left-to-right top-to-bottom
|
||||
return widgets.map((w, i) => ({
|
||||
...w,
|
||||
position: {
|
||||
col: i % 3,
|
||||
row: Math.floor(i / 3),
|
||||
w: 1,
|
||||
h: 1,
|
||||
},
|
||||
}))
|
||||
}
|
||||
|
||||
interface Props {
|
||||
currentWidgets: WidgetConfig[]
|
||||
onClose: () => void
|
||||
/** When true, saves to tenant-default instead of user config */
|
||||
tenantMode?: boolean
|
||||
}
|
||||
|
||||
export default function DashboardCustomizeModal({
|
||||
currentWidgets,
|
||||
onClose,
|
||||
tenantMode = false,
|
||||
}: Props) {
|
||||
const qc = useQueryClient()
|
||||
|
||||
// Track which widget types are enabled
|
||||
const [enabled, setEnabled] = useState<Set<WidgetType>>(
|
||||
new Set(currentWidgets.map((w) => w.widget_type as WidgetType))
|
||||
)
|
||||
|
||||
const saveMut = useMutation({
|
||||
mutationFn: async () => {
|
||||
// Build widget list from enabled set, preserving existing configs
|
||||
const selected = ALL_WIDGET_TYPES.filter((t) => enabled.has(t))
|
||||
const configMap = new Map(
|
||||
currentWidgets.map((w) => [w.widget_type, w.config])
|
||||
)
|
||||
const newWidgets: WidgetConfig[] = selected.map((t) => ({
|
||||
widget_type: t,
|
||||
position: { col: 0, row: 0, w: 1, h: 1 }, // recalculated below
|
||||
config: configMap.get(t),
|
||||
}))
|
||||
const layouted = recalculatePositions(newWidgets)
|
||||
if (tenantMode) {
|
||||
return updateTenantDefaultDashboard(layouted)
|
||||
}
|
||||
return updateDashboardConfig(layouted)
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success('Dashboard layout saved')
|
||||
qc.invalidateQueries({ queryKey: ['dashboard-config'] })
|
||||
onClose()
|
||||
},
|
||||
onError: (e: unknown) => {
|
||||
const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail
|
||||
toast.error(msg ?? 'Failed to save')
|
||||
},
|
||||
})
|
||||
|
||||
function toggle(type: WidgetType) {
|
||||
setEnabled((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(type)) {
|
||||
next.delete(type)
|
||||
} else {
|
||||
next.add(type)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
>
|
||||
<div
|
||||
className="rounded-xl shadow-xl w-full max-w-md mx-4"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-border-default">
|
||||
<h2 className="font-semibold text-content">
|
||||
{tenantMode ? 'Edit Tenant Default Dashboard' : 'Customize Dashboard'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-content-muted hover:text-content transition-colors"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Widget list */}
|
||||
<div className="px-5 py-4 space-y-2">
|
||||
<p className="text-xs text-content-muted mb-3">
|
||||
Select which widgets are visible on the dashboard.
|
||||
</p>
|
||||
{ALL_WIDGET_TYPES.map((type) => (
|
||||
<label
|
||||
key={type}
|
||||
className="flex items-center gap-3 cursor-pointer rounded-lg border border-border-default px-4 py-3 hover:border-accent transition-colors"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={enabled.has(type)}
|
||||
onChange={() => toggle(type)}
|
||||
className="w-4 h-4 rounded accent-accent"
|
||||
/>
|
||||
<span className="text-sm font-medium text-content">
|
||||
{WIDGET_LABELS[type]}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-end gap-3 px-5 py-4 border-t border-border-default">
|
||||
<button onClick={onClose} className="btn-secondary text-sm">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => saveMut.mutate()}
|
||||
disabled={saveMut.isPending}
|
||||
className="btn-primary text-sm flex items-center gap-2"
|
||||
>
|
||||
<Save size={14} />
|
||||
{saveMut.isPending ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Settings2, BarChart2, Activity, ImageIcon, DollarSign, Cpu } from 'lucide-react'
|
||||
import { getDashboardConfig } from '../../api/dashboard'
|
||||
import type { WidgetType } from '../../api/dashboard'
|
||||
import WidgetContainer from './WidgetContainer'
|
||||
import DashboardCustomizeModal from './DashboardCustomizeModal'
|
||||
import ProductionStatsWidget from './widgets/ProductionStatsWidget'
|
||||
import QueueStatusWidget from './widgets/QueueStatusWidget'
|
||||
import RecentRendersWidget from './widgets/RecentRendersWidget'
|
||||
import CostOverviewWidget from './widgets/CostOverviewWidget'
|
||||
import WorkerStatusWidget from './widgets/WorkerStatusWidget'
|
||||
|
||||
const WIDGET_META: Record<WidgetType, { title: string; icon: React.ReactNode }> = {
|
||||
ProductionStats: { title: 'Production Stats', icon: <BarChart2 size={15} /> },
|
||||
QueueStatus: { title: 'Queue Status', icon: <Activity size={15} /> },
|
||||
RecentRenders: { title: 'Recent Renders', icon: <ImageIcon size={15} /> },
|
||||
CostOverview: { title: 'Cost Overview', icon: <DollarSign size={15} /> },
|
||||
WorkerStatus: { title: 'Worker Status', icon: <Cpu size={15} /> },
|
||||
}
|
||||
|
||||
function WidgetBody({ type }: { type: WidgetType }) {
|
||||
switch (type) {
|
||||
case 'ProductionStats': return <ProductionStatsWidget />
|
||||
case 'QueueStatus': return <QueueStatusWidget />
|
||||
case 'RecentRenders': return <RecentRendersWidget />
|
||||
case 'CostOverview': return <CostOverviewWidget />
|
||||
case 'WorkerStatus': return <WorkerStatusWidget />
|
||||
default: return <p className="text-xs text-content-muted">Unknown widget</p>
|
||||
}
|
||||
}
|
||||
|
||||
export default function DashboardGrid() {
|
||||
const [showCustomize, setShowCustomize] = useState(false)
|
||||
|
||||
const { data: widgets, isLoading } = useQuery({
|
||||
queryKey: ['dashboard-config'],
|
||||
queryFn: getDashboardConfig,
|
||||
staleTime: 300_000,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-end">
|
||||
<button
|
||||
onClick={() => setShowCustomize(true)}
|
||||
className="btn-secondary text-sm flex items-center gap-1.5"
|
||||
>
|
||||
<Settings2 size={14} />
|
||||
Anpassen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i} className="h-40 rounded-xl animate-pulse bg-surface-muted" />
|
||||
))}
|
||||
</div>
|
||||
) : (widgets ?? []).length === 0 ? (
|
||||
<div className="rounded-xl border border-border-default p-8 text-center text-content-muted text-sm">
|
||||
No widgets configured. Click <strong>Anpassen</strong> to add widgets.
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="grid gap-4"
|
||||
style={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}
|
||||
>
|
||||
{(widgets ?? []).map((w, i) => {
|
||||
const pos = w.position
|
||||
const meta = WIDGET_META[w.widget_type as WidgetType] ?? {
|
||||
title: w.widget_type,
|
||||
icon: null,
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={`${w.widget_type}-${i}`}
|
||||
style={{
|
||||
gridColumnStart: pos.col + 1,
|
||||
gridColumnEnd: `span ${pos.w}`,
|
||||
gridRowStart: pos.row + 1,
|
||||
gridRowEnd: `span ${pos.h}`,
|
||||
}}
|
||||
>
|
||||
<WidgetContainer title={meta.title} icon={meta.icon}>
|
||||
<WidgetBody type={w.widget_type as WidgetType} />
|
||||
</WidgetContainer>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Customize modal */}
|
||||
{showCustomize && (
|
||||
<DashboardCustomizeModal
|
||||
currentWidgets={widgets ?? []}
|
||||
onClose={() => setShowCustomize(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { AlertCircle } from 'lucide-react'
|
||||
|
||||
interface WidgetContainerProps {
|
||||
title: string
|
||||
icon?: React.ReactNode
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
isLoading?: boolean
|
||||
error?: string | null
|
||||
}
|
||||
|
||||
export default function WidgetContainer({
|
||||
title,
|
||||
icon,
|
||||
children,
|
||||
className = '',
|
||||
isLoading,
|
||||
error,
|
||||
}: WidgetContainerProps) {
|
||||
return (
|
||||
<div
|
||||
className={`card flex flex-col overflow-hidden ${className}`}
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b border-border-default shrink-0">
|
||||
{icon && <span className="text-content-muted">{icon}</span>}
|
||||
<h3 className="text-sm font-semibold text-content">{title}</h3>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 p-4 overflow-auto">
|
||||
{isLoading ? (
|
||||
<div className="animate-pulse space-y-2">
|
||||
<div className="h-8 rounded bg-surface-muted" />
|
||||
<div className="h-8 rounded bg-surface-muted" />
|
||||
<div className="h-8 rounded bg-surface-muted" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex items-center gap-2 text-red-500 text-xs">
|
||||
<AlertCircle size={14} />
|
||||
{error}
|
||||
</div>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { DollarSign, FileText } from 'lucide-react'
|
||||
import api from '../../../api/client'
|
||||
import { useAuthStore } from '../../../store/auth'
|
||||
|
||||
interface Invoice {
|
||||
id: string
|
||||
amount: number
|
||||
status: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface InvoiceListResponse {
|
||||
items: Invoice[]
|
||||
total: number
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="animate-pulse space-y-3">
|
||||
<div className="h-12 rounded-lg bg-surface-muted" />
|
||||
<div className="h-8 rounded bg-surface-muted" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CostOverviewWidget() {
|
||||
const user = useAuthStore((s) => s.user)
|
||||
const isPrivileged =
|
||||
user?.role === 'admin' || user?.role === 'project_manager'
|
||||
|
||||
const { data, isLoading, error } = useQuery<Invoice[]>({
|
||||
queryKey: ['invoices-widget'],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const res = await api.get<InvoiceListResponse>('/billing/invoices', {
|
||||
params: { limit: 50 },
|
||||
})
|
||||
return res.data?.items ?? []
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
},
|
||||
enabled: isPrivileged,
|
||||
staleTime: 120_000,
|
||||
retry: 1,
|
||||
})
|
||||
|
||||
if (!isPrivileged) {
|
||||
return (
|
||||
<p className="text-xs text-content-muted text-center py-4">
|
||||
Available for admin and project managers only.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
if (isLoading) return <Skeleton />
|
||||
if (error) {
|
||||
return <p className="text-xs text-red-500">Failed to load invoices</p>
|
||||
}
|
||||
|
||||
const invoices = data ?? []
|
||||
|
||||
const now = new Date()
|
||||
const monthStart = new Date(now.getFullYear(), now.getMonth(), 1)
|
||||
const thisMonthTotal = invoices
|
||||
.filter((inv) => new Date(inv.created_at) >= monthStart)
|
||||
.reduce((sum, inv) => sum + (inv.amount ?? 0), 0)
|
||||
|
||||
const openCount = invoices.filter(
|
||||
(inv) => inv.status === 'open' || inv.status === 'pending'
|
||||
).length
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* This month */}
|
||||
<div
|
||||
className="flex items-center gap-3 rounded-lg border border-border-default p-3"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<DollarSign size={18} className="text-green-500 shrink-0" />
|
||||
<div>
|
||||
<p className="text-xs text-content-muted">This month</p>
|
||||
<p className="text-xl font-bold text-content">
|
||||
€ {thisMonthTotal.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Open invoices */}
|
||||
<div
|
||||
className="flex items-center gap-3 rounded-lg border border-border-default p-3"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<FileText
|
||||
size={16}
|
||||
className={openCount > 0 ? 'text-amber-500' : 'text-content-muted'}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-xs text-content-muted">Open invoices</p>
|
||||
<p className="text-base font-semibold text-content">{openCount}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { PackageCheck, Clock, CheckCircle2 } from 'lucide-react'
|
||||
import api from '../../../api/client'
|
||||
|
||||
interface OrderStats {
|
||||
total_orders: number
|
||||
completed_orders: number
|
||||
total_rendering_items: number
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="animate-pulse space-y-3">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i} className="h-10 rounded-lg bg-surface-muted" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ProductionStatsWidget() {
|
||||
const { data, isLoading, error } = useQuery<OrderStats>({
|
||||
queryKey: ['production-stats-widget'],
|
||||
queryFn: async () => {
|
||||
const today = new Date().toISOString().slice(0, 10)
|
||||
const res = await api.get('/analytics/kpis', {
|
||||
params: { date_from: today, date_to: today },
|
||||
})
|
||||
const s = res.data?.summary ?? {}
|
||||
return {
|
||||
total_orders: s.total_orders ?? 0,
|
||||
completed_orders: s.completed_orders ?? 0,
|
||||
total_rendering_items: s.total_rendering_items ?? 0,
|
||||
}
|
||||
},
|
||||
staleTime: 60_000,
|
||||
retry: 1,
|
||||
})
|
||||
|
||||
if (isLoading) return <Skeleton />
|
||||
if (error) {
|
||||
return (
|
||||
<p className="text-xs text-red-500">Failed to load production stats</p>
|
||||
)
|
||||
}
|
||||
|
||||
const stats = [
|
||||
{ label: 'Open Orders', value: (data?.total_orders ?? 0) - (data?.completed_orders ?? 0), icon: <Clock size={16} className="text-amber-500" /> },
|
||||
{ label: 'Completed Orders', value: data?.completed_orders ?? 0, icon: <CheckCircle2 size={16} className="text-green-500" /> },
|
||||
{ label: 'Rendering Items', value: data?.total_rendering_items ?? 0, icon: <PackageCheck size={16} className="text-blue-500" /> },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{stats.map(({ label, value, icon }) => (
|
||||
<div
|
||||
key={label}
|
||||
className="flex items-center justify-between rounded-lg border border-border-default p-3"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{icon}
|
||||
<span className="text-sm text-content-secondary">{label}</span>
|
||||
</div>
|
||||
<span className="text-lg font-bold text-content">{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Activity } from 'lucide-react'
|
||||
import api from '../../../api/client'
|
||||
|
||||
interface ActivityEntry {
|
||||
id: string
|
||||
filename: string
|
||||
status: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="animate-pulse space-y-2">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i} className="h-8 rounded bg-surface-muted" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function QueueStatusWidget() {
|
||||
const { data, isLoading, error } = useQuery<ActivityEntry[]>({
|
||||
queryKey: ['worker-activity-widget'],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/worker/activity')
|
||||
return res.data as ActivityEntry[]
|
||||
},
|
||||
refetchInterval: 15_000,
|
||||
staleTime: 10_000,
|
||||
retry: 1,
|
||||
})
|
||||
|
||||
if (isLoading) return <Skeleton />
|
||||
if (error) {
|
||||
return <p className="text-xs text-red-500">Failed to load queue status</p>
|
||||
}
|
||||
|
||||
const entries = data ?? []
|
||||
const processing = entries.filter((e) => e.status === 'processing').length
|
||||
const failed = entries.filter((e) => e.status === 'failed').length
|
||||
const recent = entries.slice(0, 5)
|
||||
|
||||
const statusDot = processing > 0
|
||||
? 'bg-blue-500'
|
||||
: failed > 0
|
||||
? 'bg-red-500'
|
||||
: 'bg-green-500'
|
||||
|
||||
const statusLabel = processing > 0
|
||||
? `${processing} processing`
|
||||
: failed > 0
|
||||
? `${failed} failed`
|
||||
: 'Idle'
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Summary row */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`inline-block w-2.5 h-2.5 rounded-full ${statusDot}`} />
|
||||
<span className="text-sm font-medium text-content">{statusLabel}</span>
|
||||
<span className="text-xs text-content-muted ml-auto">
|
||||
{entries.length} recent tasks
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Recent activity */}
|
||||
<div className="space-y-1">
|
||||
{recent.length === 0 && (
|
||||
<p className="text-xs text-content-muted text-center py-2">No recent activity</p>
|
||||
)}
|
||||
{recent.map((entry) => (
|
||||
<div
|
||||
key={entry.id}
|
||||
className="flex items-center gap-2 rounded px-2 py-1.5 text-xs"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<Activity size={12} className="text-content-muted shrink-0" />
|
||||
<span className="flex-1 truncate text-content-secondary" title={entry.filename}>
|
||||
{entry.filename}
|
||||
</span>
|
||||
<span
|
||||
className={`font-medium shrink-0 ${
|
||||
entry.status === 'completed'
|
||||
? 'text-green-600'
|
||||
: entry.status === 'failed'
|
||||
? 'text-red-500'
|
||||
: entry.status === 'processing'
|
||||
? 'text-blue-500'
|
||||
: 'text-content-muted'
|
||||
}`}
|
||||
>
|
||||
{entry.status}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import api from '../../../api/client'
|
||||
|
||||
interface MediaItem {
|
||||
id: string
|
||||
filename: string
|
||||
thumbnail_url: string | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface MediaListResponse {
|
||||
items: MediaItem[]
|
||||
total: number
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="grid grid-cols-4 gap-2 animate-pulse">
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div key={i} className="aspect-square rounded bg-surface-muted" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function RecentRendersWidget() {
|
||||
const { data, isLoading, error } = useQuery<MediaItem[]>({
|
||||
queryKey: ['recent-renders-widget'],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const res = await api.get<MediaListResponse>('/media', {
|
||||
params: { limit: 8, sort: '-created_at' },
|
||||
})
|
||||
return res.data?.items ?? []
|
||||
} catch {
|
||||
// media endpoint may not be available in all deployments
|
||||
return []
|
||||
}
|
||||
},
|
||||
staleTime: 60_000,
|
||||
retry: 1,
|
||||
})
|
||||
|
||||
if (isLoading) return <Skeleton />
|
||||
if (error) {
|
||||
return <p className="text-xs text-red-500">Failed to load recent renders</p>
|
||||
}
|
||||
|
||||
const items = data ?? []
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<p className="text-xs text-content-muted text-center py-4">
|
||||
No renders yet
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{items.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="aspect-square rounded overflow-hidden border border-border-default bg-surface-muted"
|
||||
title={item.filename}
|
||||
>
|
||||
{item.thumbnail_url ? (
|
||||
<img
|
||||
src={item.thumbnail_url}
|
||||
alt={item.filename}
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<span className="text-xs text-content-muted text-center px-1 truncate">
|
||||
{item.filename}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Cpu } from 'lucide-react'
|
||||
import api from '../../../api/client'
|
||||
|
||||
interface ActivityEntry {
|
||||
id: string
|
||||
filename: string
|
||||
status: string
|
||||
created_at: string
|
||||
updated_at?: string
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="animate-pulse space-y-2">
|
||||
<div className="h-8 rounded-lg bg-surface-muted" />
|
||||
<div className="h-24 rounded bg-surface-muted" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function WorkerStatusWidget() {
|
||||
const { data, isLoading, error } = useQuery<ActivityEntry[]>({
|
||||
queryKey: ['worker-status-widget'],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/worker/activity')
|
||||
return res.data as ActivityEntry[]
|
||||
},
|
||||
refetchInterval: 15_000,
|
||||
staleTime: 10_000,
|
||||
retry: 1,
|
||||
})
|
||||
|
||||
if (isLoading) return <Skeleton />
|
||||
if (error) {
|
||||
return <p className="text-xs text-red-500">Failed to load worker status</p>
|
||||
}
|
||||
|
||||
const entries = data ?? []
|
||||
const processing = entries.filter((e) => e.status === 'processing')
|
||||
const failed = entries.filter((e) => e.status === 'failed')
|
||||
const completed = entries.filter((e) => e.status === 'completed')
|
||||
|
||||
const overallStatus =
|
||||
processing.length > 0
|
||||
? 'active'
|
||||
: failed.length > 0
|
||||
? 'degraded'
|
||||
: 'idle'
|
||||
|
||||
const statusColor = {
|
||||
active: 'text-blue-600',
|
||||
degraded: 'text-red-500',
|
||||
idle: 'text-green-600',
|
||||
}[overallStatus]
|
||||
|
||||
const dotColor = {
|
||||
active: 'bg-blue-500 animate-pulse',
|
||||
degraded: 'bg-red-500',
|
||||
idle: 'bg-green-500',
|
||||
}[overallStatus]
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Status header */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`inline-block w-2.5 h-2.5 rounded-full ${dotColor}`} />
|
||||
<Cpu size={14} className="text-content-muted" />
|
||||
<span className={`text-sm font-semibold capitalize ${statusColor}`}>
|
||||
{overallStatus}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Counters */}
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div
|
||||
className="rounded-lg border border-border-default py-2"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<p className="text-lg font-bold text-blue-500">{processing.length}</p>
|
||||
<p className="text-xs text-content-muted">Active</p>
|
||||
</div>
|
||||
<div
|
||||
className="rounded-lg border border-border-default py-2"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<p className="text-lg font-bold text-green-500">{completed.length}</p>
|
||||
<p className="text-xs text-content-muted">Done</p>
|
||||
</div>
|
||||
<div
|
||||
className="rounded-lg border border-border-default py-2"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<p className={`text-lg font-bold ${failed.length > 0 ? 'text-red-500' : 'text-content-muted'}`}>
|
||||
{failed.length}
|
||||
</p>
|
||||
<p className="text-xs text-content-muted">Failed</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Last activity timestamp */}
|
||||
{entries.length > 0 && (
|
||||
<p className="text-xs text-content-muted">
|
||||
Last activity:{' '}
|
||||
{new Date(entries[0].created_at).toLocaleString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { UserPlus, Trash2, Pencil, ChevronDown, ChevronUp, ChevronRight, Settings, RefreshCw, CheckCircle2, XCircle, Clock, DollarSign, Layers, AlertTriangle, Upload, FileBox, Plus, X } from 'lucide-react'
|
||||
import { UserPlus, Trash2, Pencil, ChevronDown, ChevronUp, ChevronRight, Settings, RefreshCw, CheckCircle2, XCircle, Clock, DollarSign, Layers, AlertTriangle, Upload, FileBox, Plus, X, LayoutDashboard } from 'lucide-react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import api from '../api/client'
|
||||
import TemplateEditor from '../components/admin/TemplateEditor'
|
||||
@@ -17,6 +17,9 @@ import {
|
||||
listAssetLibraries, createAssetLibrary, deleteAssetLibrary, refreshAssetLibraryCatalog,
|
||||
type AssetLibrary,
|
||||
} from '../api/assetLibraries'
|
||||
import { getTenantDefaultDashboard } from '../api/dashboard'
|
||||
import type { WidgetConfig } from '../api/dashboard'
|
||||
import DashboardCustomizeModal from '../components/dashboard/DashboardCustomizeModal'
|
||||
|
||||
export default function AdminPage() {
|
||||
const qc = useQueryClient()
|
||||
@@ -158,6 +161,14 @@ export default function AdminPage() {
|
||||
const [smtpDraft, setSmtpDraft] = useState<Partial<Settings>>({})
|
||||
const smtp = { ...settings, ...smtpDraft } as Settings
|
||||
|
||||
const [showTenantDashboardModal, setShowTenantDashboardModal] = useState(false)
|
||||
const { data: tenantDefaultWidgets } = useQuery<WidgetConfig[]>({
|
||||
queryKey: ['tenant-default-dashboard'],
|
||||
queryFn: getTenantDefaultDashboard,
|
||||
enabled: isAdmin,
|
||||
staleTime: 300_000,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="p-8 space-y-8">
|
||||
<h1 className="text-2xl font-bold text-content">Admin</h1>
|
||||
@@ -886,6 +897,50 @@ export default function AdminPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* Dashboard Widget Configuration (admin only) */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{isAdmin && (
|
||||
<div className="card">
|
||||
<div className="p-4 border-b border-border-default flex items-center gap-2">
|
||||
<LayoutDashboard size={16} className="text-content-muted" />
|
||||
<div>
|
||||
<h2 className="font-semibold text-content">Dashboard Widget-Konfiguration</h2>
|
||||
<p className="text-xs text-content-muted mt-0.5">
|
||||
Legt das Standard-Widget-Layout für alle Nutzer dieses Tenants fest. Nutzer können ihr eigenes Layout individuell anpassen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 flex items-center gap-4">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-content-secondary">
|
||||
Tenant-Standard:{' '}
|
||||
<span className="font-medium text-content">
|
||||
{tenantDefaultWidgets && tenantDefaultWidgets.length > 0
|
||||
? `${tenantDefaultWidgets.length} Widget${tenantDefaultWidgets.length !== 1 ? 's' : ''} konfiguriert`
|
||||
: 'Noch kein Standard festgelegt (Systemvorgabe aktiv)'}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowTenantDashboardModal(true)}
|
||||
className="btn-secondary text-sm flex items-center gap-2"
|
||||
>
|
||||
<LayoutDashboard size={14} />
|
||||
Tenant-Standard-Dashboard bearbeiten
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showTenantDashboardModal && (
|
||||
<DashboardCustomizeModal
|
||||
currentWidgets={tenantDefaultWidgets ?? []}
|
||||
onClose={() => setShowTenantDashboardModal(false)}
|
||||
tenantMode={true}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* Material Library link */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
import { useAuthStore } from '../store/auth'
|
||||
import DashboardGrid from '../components/dashboard/DashboardGrid'
|
||||
import AdminDashboard from '../components/dashboard/AdminDashboard'
|
||||
import ClientDashboard from '../components/dashboard/ClientDashboard'
|
||||
|
||||
export default function DashboardPage() {
|
||||
const user = useAuthStore((s) => s.user)
|
||||
const isPrivileged = user?.role === 'admin' || user?.role === 'project_manager'
|
||||
return isPrivileged ? <AdminDashboard /> : <ClientDashboard />
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Configurable widget grid — visible to all roles */}
|
||||
<div className="p-8 pb-0">
|
||||
<h1 className="text-2xl font-bold text-content mb-6">Dashboard</h1>
|
||||
<DashboardGrid />
|
||||
</div>
|
||||
|
||||
{/* Role-based analytics section */}
|
||||
{isPrivileged ? <AdminDashboard /> : <ClientDashboard />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -143,14 +143,14 @@ export default function NotificationsPage() {
|
||||
{cfg.label(n.details)}
|
||||
</p>
|
||||
<p className="text-xs text-content-muted mt-1">{formatTime(n.timestamp)}</p>
|
||||
{n.action === 'excel.import_warnings' && n.details?.warnings && (
|
||||
{n.action === 'excel.import_warnings' && !!n.details?.warnings && (
|
||||
<ul className="mt-1.5 text-xs text-content-secondary list-disc list-inside space-y-0.5">
|
||||
{(n.details.warnings as string[]).slice(0, 3).map((w, i) => (
|
||||
<li key={i}>{w}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{n.details?.error && (
|
||||
{!!n.details?.error && (
|
||||
<p className="mt-1.5 text-xs text-red-600 font-mono bg-red-50 rounded px-2 py-1 whitespace-pre-wrap break-all">
|
||||
{String(n.details.error)}
|
||||
</p>
|
||||
|
||||
@@ -21,5 +21,6 @@
|
||||
}
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["src/__tests__"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
||||
@@ -21,4 +21,9 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
},
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
globals: true,
|
||||
setupFiles: ['./src/__tests__/setup.ts'],
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user