Compare commits

...

8 Commits

Author SHA1 Message Date
m
785df2ced4 feat: add CalDAV bidirectional sync service (Phase 3O)
Implements CalDAV sync using github.com/emersion/go-webdav:

- CalDAVService with background polling (configurable per-tenant interval)
- Push: deadlines -> VTODO, appointments -> VEVENT on create/update/delete
- Pull: periodic fetch from CalDAV, reconcile with local DB
- Conflict resolution: KanzlAI wins dates/status, CalDAV wins notes/description
- Conflicts logged as case_events with caldav_conflict type
- UID pattern: kanzlai-{deadline|appointment}-{uuid}@kanzlai.msbls.de
- CalDAV config per tenant in tenants.settings JSONB

Endpoints:
- POST /api/caldav/sync — trigger full sync for current tenant
- GET /api/caldav/status — last sync time, item counts, errors

8 unit tests for UID generation, parsing, path construction, config parsing.
2026-03-25 14:01:30 +01:00
m
2cf01073a3 feat: add AI extraction frontend page (Phase 2M) 2026-03-25 13:54:49 +01:00
m
ed83d23d06 feat: add deadline management frontend (Phase 1G) 2026-03-25 13:54:35 +01:00
m
97ebeafcf7 feat: add case list, detail, and creation pages (Phase 1F) 2026-03-25 13:54:23 +01:00
m
26887248e1 feat: add dashboard with traffic lights, timeline, AI summary (Phase 2L) 2026-03-25 13:54:13 +01:00
m
1fa7d90050 feat: add deadline management frontend (Phase 1G)
- Fristen page with list view (sortable, filterable by status/case)
- Calendar view with month navigation and deadline dots
- Deadline calculator page (proceeding type + trigger date = timeline)
- Traffic light urgency: red (overdue), amber (this week), green (OK)
- Backend: GET /api/deadlines (all tenant deadlines), GET /api/proceeding-types
- API client: added patch() method
- Types: DeadlineRule, ProceedingType, CalculatedDeadline, RuleTreeNode
2026-03-25 13:53:12 +01:00
m
3a56d4cf11 feat: add frontend case list, detail, and creation pages (Phase 1F)
- Case list page (/cases) with search, status/type filters, status badges
- Case creation page (/cases/new) with reusable CaseForm component
- Case detail page (/cases/[id]) with tabs: Timeline, Deadlines, Documents, Parties
- CaseTimeline component for chronological case_events display
- PartyList component with inline party CRUD (add/delete)
- Updated sidebar navigation to route to /cases
2026-03-25 13:50:20 +01:00
m
45188ff5cb feat: add frontend dashboard with traffic lights, timeline, and AI summary (Phase 2L)
Dashboard page at /dashboard with 5 components:
- DeadlineTrafficLights: RED/AMBER/GREEN cards with animated counts and pulse for overdue
- CaseOverviewGrid: active/new/closed case counts
- UpcomingTimeline: merged deadlines + appointments for next 7 days, grouped by day
- AISummaryCard: natural language summary generated from dashboard data
- QuickActions: shortcuts to create cases, deadlines, AI analysis, CalDAV sync

3-column responsive grid layout. Root / redirects to /dashboard.
Fetches from GET /api/dashboard with 60s auto-refresh via react-query.
2026-03-25 13:49:24 +01:00
32 changed files with 3115 additions and 32 deletions

View File

@@ -8,6 +8,7 @@ import (
"mgit.msbls.de/m/KanzlAI-mGMT/internal/config"
"mgit.msbls.de/m/KanzlAI-mGMT/internal/db"
"mgit.msbls.de/m/KanzlAI-mGMT/internal/router"
"mgit.msbls.de/m/KanzlAI-mGMT/internal/services"
)
func main() {
@@ -23,7 +24,13 @@ func main() {
defer database.Close()
authMW := auth.NewMiddleware(cfg.SupabaseJWTSecret, database)
handler := router.New(database, authMW, cfg)
// Start CalDAV sync service
calDAVSvc := services.NewCalDAVService(database)
calDAVSvc.Start()
defer calDAVSvc.Stop()
handler := router.New(database, authMW, cfg, calDAVSvc)
log.Printf("Starting KanzlAI API server on :%s", cfg.Port)
if err := http.ListenAndServe(":"+cfg.Port, handler); err != nil {

View File

@@ -3,11 +3,17 @@ module mgit.msbls.de/m/KanzlAI-mGMT
go 1.25.5
require (
github.com/anthropics/anthropic-sdk-go v1.27.1 // indirect
github.com/golang-jwt/jwt/v5 v5.3.1 // indirect
github.com/google/uuid v1.6.0 // indirect
github.com/jmoiron/sqlx v1.4.0 // indirect
github.com/lib/pq v1.12.0 // indirect
github.com/anthropics/anthropic-sdk-go v1.27.1
github.com/emersion/go-ical v0.0.0-20250609112844-439c63cef608
github.com/emersion/go-webdav v0.7.0
github.com/golang-jwt/jwt/v5 v5.3.1
github.com/google/uuid v1.6.0
github.com/jmoiron/sqlx v1.4.0
github.com/lib/pq v1.12.0
)
require (
github.com/teambition/rrule-go v1.8.2 // indirect
github.com/tidwall/gjson v1.18.0 // indirect
github.com/tidwall/match v1.1.1 // indirect
github.com/tidwall/pretty v1.2.1 // indirect

View File

@@ -1,6 +1,18 @@
filippo.io/edwards25519 v1.1.0 h1:FNf4tywRC1HmFuKW5xopWpigGjJKiJSV0Cqo0cJWDaA=
filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4VDT4=
github.com/anthropics/anthropic-sdk-go v1.27.1 h1:7DgMZ2Ng3C2mPzJGHA30NXQTZolcF07mHd0tGaLwfzk=
github.com/anthropics/anthropic-sdk-go v1.27.1/go.mod h1:qUKmaW+uuPB64iy1l+4kOSvaLqPXnHTTBKH6RVZ7q5Q=
github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/dnaeon/go-vcr v1.2.0 h1:zHCHvJYTMh1N7xnV7zf1m1GPBF9Ad0Jk/whtQ1663qI=
github.com/dnaeon/go-vcr v1.2.0/go.mod h1:R4UdLID7HZT3taECzJs4YgbbH6PIGXB6W/sc5OLb6RQ=
github.com/emersion/go-ical v0.0.0-20240127095438-fc1c9d8fb2b6/go.mod h1:BEksegNspIkjCQfmzWgsgbu6KdeJ/4LwUZs7DMBzjzw=
github.com/emersion/go-ical v0.0.0-20250609112844-439c63cef608 h1:5XWaET4YAcppq3l1/Yh2ay5VmQjUdq6qhJuucdGbmOY=
github.com/emersion/go-ical v0.0.0-20250609112844-439c63cef608/go.mod h1:BEksegNspIkjCQfmzWgsgbu6KdeJ/4LwUZs7DMBzjzw=
github.com/emersion/go-vcard v0.0.0-20230815062825-8fda7d206ec9/go.mod h1:HMJKR5wlh/ziNp+sHEDV2ltblO4JD2+IdDOWtGcQBTM=
github.com/emersion/go-webdav v0.7.0 h1:cp6aBWXBf8Sjzguka9VJarr4XTkGc2IHxXI1Gq3TKpA=
github.com/emersion/go-webdav v0.7.0/go.mod h1:mI8iBx3RAODwX7PJJ7qzsKAKs/vY429YfS2/9wKnDbQ=
github.com/go-sql-driver/mysql v1.8.1 h1:LedoTUt/eveggdHS9qUFC1EFSa8bU2+1pZjSRpvNJ1Y=
github.com/go-sql-driver/mysql v1.8.1/go.mod h1:wEBSXgmK//2ZFJyE+qWnIsVGmvmEKlqwuVSjsCm7DZg=
github.com/golang-jwt/jwt/v5 v5.3.1 h1:kYf81DTWFe7t+1VvL7eS+jKFVWaUnK9cB1qbwn63YCY=
github.com/golang-jwt/jwt/v5 v5.3.1/go.mod h1:fxCRLWMO43lRc8nhHWY6LGqRcf+1gQWArsqaEUEa5bE=
@@ -11,7 +23,14 @@ github.com/jmoiron/sqlx v1.4.0/go.mod h1:ZrZ7UsYB/weZdl2Bxg6jCRO9c3YHl8r3ahlKmRT
github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
github.com/lib/pq v1.12.0 h1:mC1zeiNamwKBecjHarAr26c/+d8V5w/u4J0I/yASbJo=
github.com/lib/pq v1.12.0/go.mod h1:/p+8NSbOcwzAEI7wiMXFlgydTwcgTr3OSKMsD2BitpA=
github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
github.com/teambition/rrule-go v1.8.2 h1:lIjpjvWTj9fFUZCmuoVDrKVOtdiyzbzc93qTmRVe/J8=
github.com/teambition/rrule-go v1.8.2/go.mod h1:Ieq5AbrKGciP1V//Wq8ktsTXwSwJHDD5mD/wLBGl3p4=
github.com/tidwall/gjson v1.14.2/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
github.com/tidwall/gjson v1.18.0 h1:FIDeeyB800efLX89e5a8Y0BNH+LOngJyGrIWxG2FKQY=
github.com/tidwall/gjson v1.18.0/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
@@ -24,3 +43,7 @@ github.com/tidwall/sjson v1.2.5 h1:kLy8mja+1c9jlljvWTlSazM7cKDRfJuR/bOJhcY5NcY=
github.com/tidwall/sjson v1.2.5/go.mod h1:Fvgq9kS/6ociJEDnK0Fk1cpYF4FIW6ZF7LAe+6jwd28=
golang.org/x/sync v0.16.0 h1:ycBJEhp9p4vXvUZNszeOq0kGTPghopOL8q0fq3vstxw=
golang.org/x/sync v0.16.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
gopkg.in/yaml.v2 v2.2.8 h1:obN1ZagJSUGI0Ek/LBmuj4SNLPfIny3KsKFopxRdj10=
gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

View File

@@ -0,0 +1,68 @@
package handlers
import (
"net/http"
"mgit.msbls.de/m/KanzlAI-mGMT/internal/auth"
"mgit.msbls.de/m/KanzlAI-mGMT/internal/services"
)
// CalDAVHandler handles CalDAV sync HTTP endpoints.
type CalDAVHandler struct {
svc *services.CalDAVService
}
// NewCalDAVHandler creates a new CalDAV handler.
func NewCalDAVHandler(svc *services.CalDAVService) *CalDAVHandler {
return &CalDAVHandler{svc: svc}
}
// TriggerSync handles POST /api/caldav/sync — triggers a full sync for the current tenant.
func (h *CalDAVHandler) TriggerSync(w http.ResponseWriter, r *http.Request) {
tenantID, ok := auth.TenantFromContext(r.Context())
if !ok {
writeError(w, http.StatusUnauthorized, "no tenant context")
return
}
cfg, err := h.svc.LoadTenantConfig(tenantID)
if err != nil {
writeError(w, http.StatusBadRequest, err.Error())
return
}
status, err := h.svc.SyncTenant(r.Context(), tenantID, *cfg)
if err != nil {
// Still return the status — it contains partial results + error info
writeJSON(w, http.StatusOK, map[string]any{
"status": "completed_with_errors",
"sync": status,
})
return
}
writeJSON(w, http.StatusOK, map[string]any{
"status": "ok",
"sync": status,
})
}
// GetStatus handles GET /api/caldav/status — returns last sync status.
func (h *CalDAVHandler) GetStatus(w http.ResponseWriter, r *http.Request) {
tenantID, ok := auth.TenantFromContext(r.Context())
if !ok {
writeError(w, http.StatusUnauthorized, "no tenant context")
return
}
status := h.svc.GetStatus(tenantID)
if status == nil {
writeJSON(w, http.StatusOK, map[string]any{
"status": "no_sync_yet",
"last_sync_at": nil,
})
return
}
writeJSON(w, http.StatusOK, status)
}

View File

@@ -39,6 +39,17 @@ func (h *DeadlineRuleHandlers) List(w http.ResponseWriter, r *http.Request) {
writeJSON(w, http.StatusOK, rules)
}
// ListProceedingTypes handles GET /api/proceeding-types
func (h *DeadlineRuleHandlers) ListProceedingTypes(w http.ResponseWriter, r *http.Request) {
types, err := h.rules.ListProceedingTypes()
if err != nil {
writeError(w, http.StatusInternalServerError, "failed to list proceeding types")
return
}
writeJSON(w, http.StatusOK, types)
}
// GetRuleTree handles GET /api/deadline-rules/{type}
// {type} is the proceeding type code (e.g., "INF", "REV")
func (h *DeadlineRuleHandlers) GetRuleTree(w http.ResponseWriter, r *http.Request) {

View File

@@ -20,6 +20,23 @@ func NewDeadlineHandlers(ds *services.DeadlineService, db *sqlx.DB) *DeadlineHan
return &DeadlineHandlers{deadlines: ds, db: db}
}
// ListAll handles GET /api/deadlines
func (h *DeadlineHandlers) ListAll(w http.ResponseWriter, r *http.Request) {
tenantID, err := resolveTenant(r, h.db)
if err != nil {
handleTenantError(w, err)
return
}
deadlines, err := h.deadlines.ListAll(tenantID)
if err != nil {
writeError(w, http.StatusInternalServerError, "failed to list deadlines")
return
}
writeJSON(w, http.StatusOK, deadlines)
}
// ListForCase handles GET /api/cases/{caseID}/deadlines
func (h *DeadlineHandlers) ListForCase(w http.ResponseWriter, r *http.Request) {
tenantID, err := resolveTenant(r, h.db)

View File

@@ -12,7 +12,7 @@ import (
"mgit.msbls.de/m/KanzlAI-mGMT/internal/services"
)
func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config) http.Handler {
func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config, calDAVSvc *services.CalDAVService) http.Handler {
mux := http.NewServeMux()
// Services
@@ -81,6 +81,7 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config) http.Handler
scoped.HandleFunc("DELETE /api/parties/{partyId}", partyH.Delete)
// Deadlines
scoped.HandleFunc("GET /api/deadlines", deadlineH.ListAll)
scoped.HandleFunc("GET /api/cases/{caseID}/deadlines", deadlineH.ListForCase)
scoped.HandleFunc("POST /api/cases/{caseID}/deadlines", deadlineH.Create)
scoped.HandleFunc("PUT /api/deadlines/{deadlineID}", deadlineH.Update)
@@ -90,6 +91,7 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config) http.Handler
// Deadline rules (reference data)
scoped.HandleFunc("GET /api/deadline-rules", ruleH.List)
scoped.HandleFunc("GET /api/deadline-rules/{type}", ruleH.GetRuleTree)
scoped.HandleFunc("GET /api/proceeding-types", ruleH.ListProceedingTypes)
// Deadline calculator
scoped.HandleFunc("POST /api/deadlines/calculate", calcH.Calculate)
@@ -116,6 +118,13 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config) http.Handler
scoped.HandleFunc("POST /api/ai/summarize-case", aiH.SummarizeCase)
}
// CalDAV sync endpoints
if calDAVSvc != nil {
calDAVH := handlers.NewCalDAVHandler(calDAVSvc)
scoped.HandleFunc("POST /api/caldav/sync", calDAVH.TriggerSync)
scoped.HandleFunc("GET /api/caldav/status", calDAVH.GetStatus)
}
// Wire: auth -> tenant routes go directly, scoped routes get tenant resolver
api.Handle("/api/", tenantResolver.Resolve(scoped))

View File

@@ -0,0 +1,687 @@
package services
import (
"context"
"encoding/json"
"fmt"
"log"
"strings"
"sync"
"time"
"github.com/emersion/go-ical"
"github.com/emersion/go-webdav"
"github.com/emersion/go-webdav/caldav"
"github.com/google/uuid"
"github.com/jmoiron/sqlx"
"mgit.msbls.de/m/KanzlAI-mGMT/internal/models"
)
const (
calDAVDomain = "kanzlai.msbls.de"
calDAVProdID = "-//KanzlAI//KanzlAI-mGMT//EN"
defaultSyncMin = 15
)
// CalDAVConfig holds per-tenant CalDAV configuration from tenants.settings.
type CalDAVConfig struct {
URL string `json:"url"`
Username string `json:"username"`
Password string `json:"password"`
CalendarPath string `json:"calendar_path"`
SyncEnabled bool `json:"sync_enabled"`
SyncIntervalMinutes int `json:"sync_interval_minutes"`
}
// SyncStatus holds the last sync result for a tenant.
type SyncStatus struct {
TenantID uuid.UUID `json:"tenant_id"`
LastSyncAt time.Time `json:"last_sync_at"`
ItemsPushed int `json:"items_pushed"`
ItemsPulled int `json:"items_pulled"`
Errors []string `json:"errors,omitempty"`
SyncDuration string `json:"sync_duration"`
}
// CalDAVService handles bidirectional CalDAV synchronization.
type CalDAVService struct {
db *sqlx.DB
mu sync.RWMutex
statuses map[uuid.UUID]*SyncStatus // per-tenant sync status
stopCh chan struct{}
wg sync.WaitGroup
}
// NewCalDAVService creates a new CalDAV sync service.
func NewCalDAVService(db *sqlx.DB) *CalDAVService {
return &CalDAVService{
db: db,
statuses: make(map[uuid.UUID]*SyncStatus),
stopCh: make(chan struct{}),
}
}
// GetStatus returns the last sync status for a tenant.
func (s *CalDAVService) GetStatus(tenantID uuid.UUID) *SyncStatus {
s.mu.RLock()
defer s.mu.RUnlock()
return s.statuses[tenantID]
}
// setStatus stores the sync status for a tenant.
func (s *CalDAVService) setStatus(status *SyncStatus) {
s.mu.Lock()
defer s.mu.Unlock()
s.statuses[status.TenantID] = status
}
// Start begins the background sync goroutine that polls per-tenant.
func (s *CalDAVService) Start() {
s.wg.Go(func() {
s.backgroundLoop()
})
log.Println("CalDAV sync service started")
}
// Stop gracefully stops the background sync.
func (s *CalDAVService) Stop() {
close(s.stopCh)
s.wg.Wait()
log.Println("CalDAV sync service stopped")
}
// backgroundLoop polls tenants at their configured interval.
func (s *CalDAVService) backgroundLoop() {
// Check every minute, but only sync tenants whose interval has elapsed.
ticker := time.NewTicker(1 * time.Minute)
defer ticker.Stop()
for {
select {
case <-s.stopCh:
return
case <-ticker.C:
s.syncAllTenants()
}
}
}
// syncAllTenants checks all tenants and syncs those due for a sync.
func (s *CalDAVService) syncAllTenants() {
configs, err := s.loadAllTenantConfigs()
if err != nil {
log.Printf("CalDAV: failed to load tenant configs: %v", err)
return
}
for tenantID, cfg := range configs {
if !cfg.SyncEnabled {
continue
}
interval := cfg.SyncIntervalMinutes
if interval <= 0 {
interval = defaultSyncMin
}
// Check if enough time has passed since last sync
status := s.GetStatus(tenantID)
if status != nil && time.Since(status.LastSyncAt) < time.Duration(interval)*time.Minute {
continue
}
go func(tid uuid.UUID, c CalDAVConfig) {
ctx, cancel := context.WithTimeout(context.Background(), 2*time.Minute)
defer cancel()
if _, err := s.SyncTenant(ctx, tid, c); err != nil {
log.Printf("CalDAV: sync failed for tenant %s: %v", tid, err)
}
}(tenantID, cfg)
}
}
// loadAllTenantConfigs reads CalDAV configs from all tenants.
func (s *CalDAVService) loadAllTenantConfigs() (map[uuid.UUID]CalDAVConfig, error) {
type row struct {
ID uuid.UUID `db:"id"`
Settings json.RawMessage `db:"settings"`
}
var rows []row
if err := s.db.Select(&rows, "SELECT id, settings FROM tenants"); err != nil {
return nil, fmt.Errorf("querying tenants: %w", err)
}
result := make(map[uuid.UUID]CalDAVConfig)
for _, r := range rows {
cfg, err := parseCalDAVConfig(r.Settings)
if err != nil || cfg.URL == "" {
continue
}
result[r.ID] = cfg
}
return result, nil
}
// LoadTenantConfig reads CalDAV config for a single tenant.
func (s *CalDAVService) LoadTenantConfig(tenantID uuid.UUID) (*CalDAVConfig, error) {
var settings json.RawMessage
if err := s.db.Get(&settings, "SELECT settings FROM tenants WHERE id = $1", tenantID); err != nil {
return nil, fmt.Errorf("loading tenant settings: %w", err)
}
cfg, err := parseCalDAVConfig(settings)
if err != nil {
return nil, err
}
if cfg.URL == "" {
return nil, fmt.Errorf("no CalDAV configuration for tenant")
}
return &cfg, nil
}
func parseCalDAVConfig(settings json.RawMessage) (CalDAVConfig, error) {
if len(settings) == 0 {
return CalDAVConfig{}, nil
}
var wrapper struct {
CalDAV CalDAVConfig `json:"caldav"`
}
if err := json.Unmarshal(settings, &wrapper); err != nil {
return CalDAVConfig{}, fmt.Errorf("parsing CalDAV settings: %w", err)
}
return wrapper.CalDAV, nil
}
// newCalDAVClient creates a caldav.Client from config.
func newCalDAVClient(cfg CalDAVConfig) (*caldav.Client, error) {
httpClient := webdav.HTTPClientWithBasicAuth(nil, cfg.Username, cfg.Password)
return caldav.NewClient(httpClient, cfg.URL)
}
// SyncTenant performs a full bidirectional sync for a tenant.
func (s *CalDAVService) SyncTenant(ctx context.Context, tenantID uuid.UUID, cfg CalDAVConfig) (*SyncStatus, error) {
start := time.Now()
status := &SyncStatus{
TenantID: tenantID,
}
client, err := newCalDAVClient(cfg)
if err != nil {
status.Errors = append(status.Errors, fmt.Sprintf("creating client: %v", err))
status.LastSyncAt = time.Now()
s.setStatus(status)
return status, err
}
// Push local changes to CalDAV
pushed, pushErrs := s.pushAll(ctx, client, tenantID, cfg)
status.ItemsPushed = pushed
status.Errors = append(status.Errors, pushErrs...)
// Pull remote changes from CalDAV
pulled, pullErrs := s.pullAll(ctx, client, tenantID, cfg)
status.ItemsPulled = pulled
status.Errors = append(status.Errors, pullErrs...)
status.LastSyncAt = time.Now()
status.SyncDuration = time.Since(start).String()
s.setStatus(status)
if len(status.Errors) > 0 {
return status, fmt.Errorf("sync completed with %d errors", len(status.Errors))
}
return status, nil
}
// --- Push: Local -> CalDAV ---
// pushAll pushes all deadlines and appointments to CalDAV.
func (s *CalDAVService) pushAll(ctx context.Context, client *caldav.Client, tenantID uuid.UUID, cfg CalDAVConfig) (int, []string) {
var pushed int
var errs []string
// Push deadlines as VTODO
deadlines, err := s.loadDeadlines(tenantID)
if err != nil {
return 0, []string{fmt.Sprintf("loading deadlines: %v", err)}
}
for _, d := range deadlines {
if err := s.pushDeadline(ctx, client, cfg, &d); err != nil {
errs = append(errs, fmt.Sprintf("push deadline %s: %v", d.ID, err))
} else {
pushed++
}
}
// Push appointments as VEVENT
appointments, err := s.loadAppointments(ctx, tenantID)
if err != nil {
errs = append(errs, fmt.Sprintf("loading appointments: %v", err))
return pushed, errs
}
for _, a := range appointments {
if err := s.pushAppointment(ctx, client, cfg, &a); err != nil {
errs = append(errs, fmt.Sprintf("push appointment %s: %v", a.ID, err))
} else {
pushed++
}
}
return pushed, errs
}
// PushDeadline pushes a single deadline to CalDAV (called on create/update).
func (s *CalDAVService) PushDeadline(ctx context.Context, tenantID uuid.UUID, deadline *models.Deadline) error {
cfg, err := s.LoadTenantConfig(tenantID)
if err != nil || !cfg.SyncEnabled {
return nil // CalDAV not configured or disabled — silently skip
}
client, err := newCalDAVClient(*cfg)
if err != nil {
return fmt.Errorf("creating CalDAV client: %w", err)
}
return s.pushDeadline(ctx, client, *cfg, deadline)
}
func (s *CalDAVService) pushDeadline(ctx context.Context, client *caldav.Client, cfg CalDAVConfig, d *models.Deadline) error {
uid := deadlineUID(d.ID)
cal := ical.NewCalendar()
cal.Props.SetText(ical.PropProductID, calDAVProdID)
cal.Props.SetText(ical.PropVersion, "2.0")
todo := ical.NewComponent(ical.CompToDo)
todo.Props.SetText(ical.PropUID, uid)
todo.Props.SetText(ical.PropSummary, d.Title)
todo.Props.SetDateTime(ical.PropDateTimeStamp, time.Now().UTC())
if d.Description != nil {
todo.Props.SetText(ical.PropDescription, *d.Description)
}
if d.Notes != nil {
desc := ""
if d.Description != nil {
desc = *d.Description + "\n\n"
}
todo.Props.SetText(ical.PropDescription, desc+*d.Notes)
}
// Parse due_date (stored as string "YYYY-MM-DD")
if due, err := time.Parse("2006-01-02", d.DueDate); err == nil {
todo.Props.SetDate(ical.PropDue, due)
}
// Map status
switch d.Status {
case "completed":
todo.Props.SetText(ical.PropStatus, "COMPLETED")
if d.CompletedAt != nil {
todo.Props.SetDateTime(ical.PropCompleted, d.CompletedAt.UTC())
}
case "pending":
todo.Props.SetText(ical.PropStatus, "NEEDS-ACTION")
default:
todo.Props.SetText(ical.PropStatus, "IN-PROCESS")
}
cal.Children = append(cal.Children, todo)
path := calendarObjectPath(cfg.CalendarPath, uid)
obj, err := client.PutCalendarObject(ctx, path, cal)
if err != nil {
return fmt.Errorf("putting VTODO: %w", err)
}
// Update caldav_uid and etag in DB
return s.updateDeadlineCalDAV(d.ID, uid, obj.ETag)
}
// PushAppointment pushes a single appointment to CalDAV (called on create/update).
func (s *CalDAVService) PushAppointment(ctx context.Context, tenantID uuid.UUID, appointment *models.Appointment) error {
cfg, err := s.LoadTenantConfig(tenantID)
if err != nil || !cfg.SyncEnabled {
return nil
}
client, err := newCalDAVClient(*cfg)
if err != nil {
return fmt.Errorf("creating CalDAV client: %w", err)
}
return s.pushAppointment(ctx, client, *cfg, appointment)
}
func (s *CalDAVService) pushAppointment(ctx context.Context, client *caldav.Client, cfg CalDAVConfig, a *models.Appointment) error {
uid := appointmentUID(a.ID)
cal := ical.NewCalendar()
cal.Props.SetText(ical.PropProductID, calDAVProdID)
cal.Props.SetText(ical.PropVersion, "2.0")
event := ical.NewEvent()
event.Props.SetText(ical.PropUID, uid)
event.Props.SetText(ical.PropSummary, a.Title)
event.Props.SetDateTime(ical.PropDateTimeStamp, time.Now().UTC())
event.Props.SetDateTime(ical.PropDateTimeStart, a.StartAt.UTC())
if a.EndAt != nil {
event.Props.SetDateTime(ical.PropDateTimeEnd, a.EndAt.UTC())
}
if a.Description != nil {
event.Props.SetText(ical.PropDescription, *a.Description)
}
if a.Location != nil {
event.Props.SetText(ical.PropLocation, *a.Location)
}
cal.Children = append(cal.Children, event.Component)
path := calendarObjectPath(cfg.CalendarPath, uid)
obj, err := client.PutCalendarObject(ctx, path, cal)
if err != nil {
return fmt.Errorf("putting VEVENT: %w", err)
}
return s.updateAppointmentCalDAV(a.ID, uid, obj.ETag)
}
// DeleteDeadlineCalDAV removes a deadline's VTODO from CalDAV.
func (s *CalDAVService) DeleteDeadlineCalDAV(ctx context.Context, tenantID uuid.UUID, deadline *models.Deadline) error {
if deadline.CalDAVUID == nil || *deadline.CalDAVUID == "" {
return nil
}
cfg, err := s.LoadTenantConfig(tenantID)
if err != nil || !cfg.SyncEnabled {
return nil
}
client, err := newCalDAVClient(*cfg)
if err != nil {
return fmt.Errorf("creating CalDAV client: %w", err)
}
path := calendarObjectPath(cfg.CalendarPath, *deadline.CalDAVUID)
return client.RemoveAll(ctx, path)
}
// DeleteAppointmentCalDAV removes an appointment's VEVENT from CalDAV.
func (s *CalDAVService) DeleteAppointmentCalDAV(ctx context.Context, tenantID uuid.UUID, appointment *models.Appointment) error {
if appointment.CalDAVUID == nil || *appointment.CalDAVUID == "" {
return nil
}
cfg, err := s.LoadTenantConfig(tenantID)
if err != nil || !cfg.SyncEnabled {
return nil
}
client, err := newCalDAVClient(*cfg)
if err != nil {
return fmt.Errorf("creating CalDAV client: %w", err)
}
path := calendarObjectPath(cfg.CalendarPath, *appointment.CalDAVUID)
return client.RemoveAll(ctx, path)
}
// --- Pull: CalDAV -> Local ---
// pullAll fetches all calendar objects from CalDAV and reconciles with local DB.
func (s *CalDAVService) pullAll(ctx context.Context, client *caldav.Client, tenantID uuid.UUID, cfg CalDAVConfig) (int, []string) {
var pulled int
var errs []string
query := &caldav.CalendarQuery{
CompFilter: caldav.CompFilter{
Name: ical.CompCalendar,
},
}
objects, err := client.QueryCalendar(ctx, cfg.CalendarPath, query)
if err != nil {
return 0, []string{fmt.Sprintf("querying calendar: %v", err)}
}
for _, obj := range objects {
if obj.Data == nil {
continue
}
for _, child := range obj.Data.Children {
switch child.Name {
case ical.CompToDo:
uid, _ := child.Props.Text(ical.PropUID)
if uid == "" || !isKanzlAIUID(uid, "deadline") {
continue
}
if err := s.reconcileDeadline(ctx, tenantID, child, obj.ETag); err != nil {
errs = append(errs, fmt.Sprintf("reconcile deadline %s: %v", uid, err))
} else {
pulled++
}
case ical.CompEvent:
uid, _ := child.Props.Text(ical.PropUID)
if uid == "" || !isKanzlAIUID(uid, "appointment") {
continue
}
if err := s.reconcileAppointment(ctx, tenantID, child, obj.ETag); err != nil {
errs = append(errs, fmt.Sprintf("reconcile appointment %s: %v", uid, err))
} else {
pulled++
}
}
}
}
return pulled, errs
}
// reconcileDeadline handles conflict resolution for a pulled VTODO.
// KanzlAI wins for dates/status, CalDAV wins for notes/description.
func (s *CalDAVService) reconcileDeadline(ctx context.Context, tenantID uuid.UUID, comp *ical.Component, remoteEtag string) error {
uid, _ := comp.Props.Text(ical.PropUID)
deadlineID := extractIDFromUID(uid, "deadline")
if deadlineID == uuid.Nil {
return fmt.Errorf("invalid UID: %s", uid)
}
// Load existing deadline
var d models.Deadline
err := s.db.Get(&d, `SELECT id, tenant_id, case_id, title, description, due_date, original_due_date,
warning_date, source, rule_id, status, completed_at,
caldav_uid, caldav_etag, notes, created_at, updated_at
FROM deadlines WHERE id = $1 AND tenant_id = $2`, deadlineID, tenantID)
if err != nil {
return fmt.Errorf("loading deadline: %w", err)
}
// Check if remote changed (etag mismatch)
if d.CalDAVEtag != nil && *d.CalDAVEtag == remoteEtag {
return nil // No change
}
// CalDAV wins for description/notes
description, _ := comp.Props.Text(ical.PropDescription)
hasConflict := false
if description != "" {
existingDesc := ""
if d.Description != nil {
existingDesc = *d.Description
}
existingNotes := ""
if d.Notes != nil {
existingNotes = *d.Notes
}
// CalDAV wins for notes/description
if description != existingDesc && description != existingNotes {
hasConflict = true
_, err = s.db.Exec(`UPDATE deadlines SET notes = $1, caldav_etag = $2, updated_at = NOW()
WHERE id = $3 AND tenant_id = $4`, description, remoteEtag, deadlineID, tenantID)
if err != nil {
return fmt.Errorf("updating deadline notes: %w", err)
}
}
}
if !hasConflict {
// Just update etag
_, err = s.db.Exec(`UPDATE deadlines SET caldav_etag = $1, updated_at = NOW()
WHERE id = $2 AND tenant_id = $3`, remoteEtag, deadlineID, tenantID)
if err != nil {
return fmt.Errorf("updating deadline etag: %w", err)
}
}
// Log conflict in case_events if detected
if hasConflict {
s.logConflictEvent(ctx, tenantID, d.CaseID, "deadline", deadlineID, "CalDAV description updated from remote")
}
return nil
}
// reconcileAppointment handles conflict resolution for a pulled VEVENT.
func (s *CalDAVService) reconcileAppointment(ctx context.Context, tenantID uuid.UUID, comp *ical.Component, remoteEtag string) error {
uid, _ := comp.Props.Text(ical.PropUID)
appointmentID := extractIDFromUID(uid, "appointment")
if appointmentID == uuid.Nil {
return fmt.Errorf("invalid UID: %s", uid)
}
var a models.Appointment
err := s.db.GetContext(ctx, &a, `SELECT * FROM appointments WHERE id = $1 AND tenant_id = $2`, appointmentID, tenantID)
if err != nil {
return fmt.Errorf("loading appointment: %w", err)
}
if a.CalDAVEtag != nil && *a.CalDAVEtag == remoteEtag {
return nil
}
// CalDAV wins for description
description, _ := comp.Props.Text(ical.PropDescription)
location, _ := comp.Props.Text(ical.PropLocation)
hasConflict := false
updates := []string{"caldav_etag = $1", "updated_at = NOW()"}
args := []any{remoteEtag}
argN := 2
if description != "" {
existingDesc := ""
if a.Description != nil {
existingDesc = *a.Description
}
if description != existingDesc {
hasConflict = true
updates = append(updates, fmt.Sprintf("description = $%d", argN))
args = append(args, description)
argN++
}
}
if location != "" {
existingLoc := ""
if a.Location != nil {
existingLoc = *a.Location
}
if location != existingLoc {
hasConflict = true
updates = append(updates, fmt.Sprintf("location = $%d", argN))
args = append(args, location)
argN++
}
}
args = append(args, appointmentID, tenantID)
query := fmt.Sprintf("UPDATE appointments SET %s WHERE id = $%d AND tenant_id = $%d",
strings.Join(updates, ", "), argN, argN+1)
if _, err := s.db.ExecContext(ctx, query, args...); err != nil {
return fmt.Errorf("updating appointment: %w", err)
}
if hasConflict {
caseID := uuid.Nil
if a.CaseID != nil {
caseID = *a.CaseID
}
s.logConflictEvent(ctx, tenantID, caseID, "appointment", appointmentID, "CalDAV description/location updated from remote")
}
return nil
}
// --- DB helpers ---
func (s *CalDAVService) loadDeadlines(tenantID uuid.UUID) ([]models.Deadline, error) {
var deadlines []models.Deadline
err := s.db.Select(&deadlines, `SELECT id, tenant_id, case_id, title, description, due_date,
original_due_date, warning_date, source, rule_id, status, completed_at,
caldav_uid, caldav_etag, notes, created_at, updated_at
FROM deadlines WHERE tenant_id = $1`, tenantID)
return deadlines, err
}
func (s *CalDAVService) loadAppointments(ctx context.Context, tenantID uuid.UUID) ([]models.Appointment, error) {
var appointments []models.Appointment
err := s.db.SelectContext(ctx, &appointments, "SELECT * FROM appointments WHERE tenant_id = $1", tenantID)
return appointments, err
}
func (s *CalDAVService) updateDeadlineCalDAV(id uuid.UUID, calDAVUID, etag string) error {
_, err := s.db.Exec(`UPDATE deadlines SET caldav_uid = $1, caldav_etag = $2, updated_at = NOW()
WHERE id = $3`, calDAVUID, etag, id)
return err
}
func (s *CalDAVService) updateAppointmentCalDAV(id uuid.UUID, calDAVUID, etag string) error {
_, err := s.db.Exec(`UPDATE appointments SET caldav_uid = $1, caldav_etag = $2, updated_at = NOW()
WHERE id = $3`, calDAVUID, etag, id)
return err
}
func (s *CalDAVService) logConflictEvent(ctx context.Context, tenantID, caseID uuid.UUID, objectType string, objectID uuid.UUID, msg string) {
if caseID == uuid.Nil {
return
}
metadata, _ := json.Marshal(map[string]string{
"object_type": objectType,
"object_id": objectID.String(),
"source": "caldav_sync",
})
_, err := s.db.ExecContext(ctx, `INSERT INTO case_events (id, tenant_id, case_id, event_type, title, description, metadata, created_at, updated_at)
VALUES ($1, $2, $3, 'caldav_conflict', $4, $5, $6, NOW(), NOW())`,
uuid.New(), tenantID, caseID, "CalDAV sync conflict", msg, metadata)
if err != nil {
log.Printf("CalDAV: failed to log conflict event: %v", err)
}
}
// --- UID helpers ---
func deadlineUID(id uuid.UUID) string {
return fmt.Sprintf("kanzlai-deadline-%s@%s", id, calDAVDomain)
}
func appointmentUID(id uuid.UUID) string {
return fmt.Sprintf("kanzlai-appointment-%s@%s", id, calDAVDomain)
}
func isKanzlAIUID(uid, objectType string) bool {
return strings.HasPrefix(uid, "kanzlai-"+objectType+"-") && strings.HasSuffix(uid, "@"+calDAVDomain)
}
func extractIDFromUID(uid, objectType string) uuid.UUID {
prefix := "kanzlai-" + objectType + "-"
suffix := "@" + calDAVDomain
if !strings.HasPrefix(uid, prefix) || !strings.HasSuffix(uid, suffix) {
return uuid.Nil
}
idStr := uid[len(prefix) : len(uid)-len(suffix)]
id, err := uuid.Parse(idStr)
if err != nil {
return uuid.Nil
}
return id
}
func calendarObjectPath(calendarPath, uid string) string {
path := strings.TrimSuffix(calendarPath, "/")
return path + "/" + uid + ".ics"
}

View File

@@ -0,0 +1,124 @@
package services
import (
"testing"
"github.com/google/uuid"
)
func TestDeadlineUID(t *testing.T) {
id := uuid.MustParse("550e8400-e29b-41d4-a716-446655440000")
uid := deadlineUID(id)
want := "kanzlai-deadline-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de"
if uid != want {
t.Errorf("deadlineUID = %q, want %q", uid, want)
}
}
func TestAppointmentUID(t *testing.T) {
id := uuid.MustParse("550e8400-e29b-41d4-a716-446655440000")
uid := appointmentUID(id)
want := "kanzlai-appointment-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de"
if uid != want {
t.Errorf("appointmentUID = %q, want %q", uid, want)
}
}
func TestIsKanzlAIUID(t *testing.T) {
tests := []struct {
uid string
objectType string
want bool
}{
{"kanzlai-deadline-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de", "deadline", true},
{"kanzlai-appointment-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de", "appointment", true},
{"kanzlai-deadline-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de", "appointment", false},
{"random-uid@other.com", "deadline", false},
{"", "deadline", false},
}
for _, tt := range tests {
got := isKanzlAIUID(tt.uid, tt.objectType)
if got != tt.want {
t.Errorf("isKanzlAIUID(%q, %q) = %v, want %v", tt.uid, tt.objectType, got, tt.want)
}
}
}
func TestExtractIDFromUID(t *testing.T) {
id := uuid.MustParse("550e8400-e29b-41d4-a716-446655440000")
tests := []struct {
uid string
objectType string
want uuid.UUID
}{
{"kanzlai-deadline-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de", "deadline", id},
{"kanzlai-appointment-550e8400-e29b-41d4-a716-446655440000@kanzlai.msbls.de", "appointment", id},
{"invalid-uid", "deadline", uuid.Nil},
{"kanzlai-deadline-not-a-uuid@kanzlai.msbls.de", "deadline", uuid.Nil},
}
for _, tt := range tests {
got := extractIDFromUID(tt.uid, tt.objectType)
if got != tt.want {
t.Errorf("extractIDFromUID(%q, %q) = %v, want %v", tt.uid, tt.objectType, got, tt.want)
}
}
}
func TestCalendarObjectPath(t *testing.T) {
tests := []struct {
calendarPath string
uid string
want string
}{
{"/dav/calendars/user/cal", "kanzlai-deadline-abc@kanzlai.msbls.de", "/dav/calendars/user/cal/kanzlai-deadline-abc@kanzlai.msbls.de.ics"},
{"/dav/calendars/user/cal/", "kanzlai-deadline-abc@kanzlai.msbls.de", "/dav/calendars/user/cal/kanzlai-deadline-abc@kanzlai.msbls.de.ics"},
}
for _, tt := range tests {
got := calendarObjectPath(tt.calendarPath, tt.uid)
if got != tt.want {
t.Errorf("calendarObjectPath(%q, %q) = %q, want %q", tt.calendarPath, tt.uid, got, tt.want)
}
}
}
func TestParseCalDAVConfig(t *testing.T) {
settings := []byte(`{"caldav": {"url": "https://dav.example.com", "username": "user", "password": "pass", "calendar_path": "/cal", "sync_enabled": true, "sync_interval_minutes": 30}}`)
cfg, err := parseCalDAVConfig(settings)
if err != nil {
t.Fatalf("parseCalDAVConfig: %v", err)
}
if cfg.URL != "https://dav.example.com" {
t.Errorf("URL = %q, want %q", cfg.URL, "https://dav.example.com")
}
if cfg.Username != "user" {
t.Errorf("Username = %q, want %q", cfg.Username, "user")
}
if cfg.SyncIntervalMinutes != 30 {
t.Errorf("SyncIntervalMinutes = %d, want 30", cfg.SyncIntervalMinutes)
}
if !cfg.SyncEnabled {
t.Error("SyncEnabled = false, want true")
}
}
func TestParseCalDAVConfig_Empty(t *testing.T) {
cfg, err := parseCalDAVConfig(nil)
if err != nil {
t.Fatalf("parseCalDAVConfig(nil): %v", err)
}
if cfg.URL != "" {
t.Errorf("expected empty config, got URL=%q", cfg.URL)
}
}
func TestParseCalDAVConfig_NoCalDAV(t *testing.T) {
settings := []byte(`{"other_setting": true}`)
cfg, err := parseCalDAVConfig(settings)
if err != nil {
t.Fatalf("parseCalDAVConfig: %v", err)
}
if cfg.URL != "" {
t.Errorf("expected empty caldav config, got URL=%q", cfg.URL)
}
}

View File

@@ -21,6 +21,23 @@ func NewDeadlineService(db *sqlx.DB) *DeadlineService {
return &DeadlineService{db: db}
}
// ListAll returns all deadlines for a tenant, ordered by due_date
func (s *DeadlineService) ListAll(tenantID uuid.UUID) ([]models.Deadline, error) {
query := `SELECT id, tenant_id, case_id, title, description, due_date, original_due_date,
warning_date, source, rule_id, status, completed_at,
caldav_uid, caldav_etag, notes, created_at, updated_at
FROM deadlines
WHERE tenant_id = $1
ORDER BY due_date ASC`
var deadlines []models.Deadline
err := s.db.Select(&deadlines, query, tenantID)
if err != nil {
return nil, fmt.Errorf("listing all deadlines: %w", err)
}
return deadlines, nil
}
// ListForCase returns all deadlines for a case, scoped to tenant
func (s *DeadlineService) ListForCase(tenantID, caseID uuid.UUID) ([]models.Deadline, error) {
query := `SELECT id, tenant_id, case_id, title, description, due_date, original_due_date,

View File

@@ -0,0 +1,267 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import { api } from "@/lib/api";
import type { Case, CaseEvent, Party, Deadline, Document } from "@/lib/types";
import { CaseTimeline } from "@/components/cases/CaseTimeline";
import { PartyList } from "@/components/cases/PartyList";
import { ArrowLeft, Clock, FileText, Users, Activity } from "lucide-react";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import Link from "next/link";
import { useState } from "react";
interface CaseDetail extends Case {
parties: Party[];
recent_events: CaseEvent[];
deadlines_count: number;
}
const STATUS_BADGE: Record<string, string> = {
active: "bg-emerald-50 text-emerald-700",
pending: "bg-amber-50 text-amber-700",
closed: "bg-neutral-100 text-neutral-600",
archived: "bg-neutral-100 text-neutral-400",
};
const TABS = [
{ key: "timeline", label: "Verlauf", icon: Activity },
{ key: "deadlines", label: "Fristen", icon: Clock },
{ key: "documents", label: "Dokumente", icon: FileText },
{ key: "parties", label: "Parteien", icon: Users },
] as const;
type TabKey = (typeof TABS)[number]["key"];
export default function CaseDetailPage() {
const { id } = useParams<{ id: string }>();
const [activeTab, setActiveTab] = useState<TabKey>("timeline");
const { data: caseDetail, isLoading } = useQuery({
queryKey: ["case", id],
queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
});
const { data: deadlinesData } = useQuery({
queryKey: ["case-deadlines", id],
queryFn: () =>
api.get<{ deadlines: Deadline[]; total: number }>(
`/deadlines?case_id=${id}`,
),
enabled: activeTab === "deadlines",
});
const { data: documentsData } = useQuery({
queryKey: ["case-documents", id],
queryFn: () => api.get<Document[]>(`/cases/${id}/documents`),
enabled: activeTab === "documents",
});
if (isLoading) {
return (
<div className="py-12 text-center text-sm text-neutral-400">
Laden...
</div>
);
}
if (!caseDetail) {
return (
<div className="py-12 text-center text-sm text-neutral-400">
Akte nicht gefunden.
</div>
);
}
const deadlines = deadlinesData?.deadlines ?? [];
const documents = documentsData ?? [];
return (
<div>
<Link
href="/cases"
className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
>
<ArrowLeft className="h-3.5 w-3.5" />
Zuruck zu Akten
</Link>
<div className="flex items-start justify-between">
<div>
<div className="flex items-center gap-3">
<h1 className="text-lg font-semibold text-neutral-900">
{caseDetail.title}
</h1>
<span
className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[caseDetail.status] ?? "bg-neutral-100 text-neutral-500"}`}
>
{caseDetail.status}
</span>
</div>
<div className="mt-1 flex gap-4 text-sm text-neutral-500">
<span>Az. {caseDetail.case_number}</span>
{caseDetail.case_type && <span>{caseDetail.case_type}</span>}
{caseDetail.court && <span>{caseDetail.court}</span>}
{caseDetail.court_ref && <span>({caseDetail.court_ref})</span>}
</div>
</div>
<div className="text-right text-xs text-neutral-400">
<p>
Erstellt:{" "}
{format(new Date(caseDetail.created_at), "d. MMM yyyy", {
locale: de,
})}
</p>
<p>
Aktualisiert:{" "}
{format(new Date(caseDetail.updated_at), "d. MMM yyyy", {
locale: de,
})}
</p>
</div>
</div>
{caseDetail.ai_summary && (
<div className="mt-4 rounded-md border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-blue-800">
{caseDetail.ai_summary}
</div>
)}
<div className="mt-6 border-b border-neutral-200">
<nav className="-mb-px flex gap-4">
{TABS.map((tab) => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`inline-flex items-center gap-1.5 border-b-2 px-1 pb-2.5 text-sm font-medium transition-colors ${
activeTab === tab.key
? "border-neutral-900 text-neutral-900"
: "border-transparent text-neutral-400 hover:text-neutral-600"
}`}
>
<tab.icon className="h-4 w-4" />
{tab.label}
{tab.key === "deadlines" && caseDetail.deadlines_count > 0 && (
<span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
{caseDetail.deadlines_count}
</span>
)}
{tab.key === "parties" && caseDetail.parties.length > 0 && (
<span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
{caseDetail.parties.length}
</span>
)}
</button>
))}
</nav>
</div>
<div className="mt-6">
{activeTab === "timeline" && (
<CaseTimeline events={caseDetail.recent_events ?? []} />
)}
{activeTab === "deadlines" && (
<DeadlinesList deadlines={deadlines} />
)}
{activeTab === "documents" && (
<DocumentsList documents={documents} />
)}
{activeTab === "parties" && (
<PartyList caseId={id} parties={caseDetail.parties ?? []} />
)}
</div>
</div>
);
}
function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
if (deadlines.length === 0) {
return (
<p className="py-8 text-center text-sm text-neutral-400">
Keine Fristen vorhanden.
</p>
);
}
const DEADLINE_STATUS: Record<string, string> = {
pending: "bg-amber-50 text-amber-700",
completed: "bg-emerald-50 text-emerald-700",
overdue: "bg-red-50 text-red-700",
};
return (
<div className="space-y-2">
{deadlines.map((d) => (
<div
key={d.id}
className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-3"
>
<div>
<p className="text-sm font-medium text-neutral-900">{d.title}</p>
{d.description && (
<p className="mt-0.5 text-sm text-neutral-500">
{d.description}
</p>
)}
</div>
<div className="flex items-center gap-3">
<span
className={`rounded-full px-2 py-0.5 text-xs font-medium ${DEADLINE_STATUS[d.status] ?? "bg-neutral-100 text-neutral-500"}`}
>
{d.status}
</span>
<span className="text-sm text-neutral-500">
{format(new Date(d.due_date), "d. MMM yyyy", { locale: de })}
</span>
</div>
</div>
))}
</div>
);
}
function DocumentsList({ documents }: { documents: Document[] }) {
if (documents.length === 0) {
return (
<p className="py-8 text-center text-sm text-neutral-400">
Keine Dokumente vorhanden.
</p>
);
}
return (
<div className="space-y-2">
{documents.map((doc) => (
<div
key={doc.id}
className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-3"
>
<div className="flex items-center gap-3">
<FileText className="h-4 w-4 text-neutral-400" />
<div>
<p className="text-sm font-medium text-neutral-900">
{doc.title}
</p>
<div className="flex gap-2 text-xs text-neutral-400">
{doc.doc_type && <span>{doc.doc_type}</span>}
{doc.file_size && (
<span>{(doc.file_size / 1024).toFixed(0)} KB</span>
)}
</div>
</div>
</div>
<a
href={`/api/documents/${doc.id}`}
className="text-sm text-neutral-500 hover:text-neutral-700"
>
Herunterladen
</a>
</div>
))}
</div>
);
}

View File

@@ -0,0 +1,49 @@
"use client";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { api } from "@/lib/api";
import type { Case } from "@/lib/types";
import { CaseForm, type CaseFormData } from "@/components/cases/CaseForm";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";
export default function NewCasePage() {
const router = useRouter();
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: (data: CaseFormData) => api.post<Case>("/cases", data),
onSuccess: (created) => {
queryClient.invalidateQueries({ queryKey: ["cases"] });
toast.success("Akte angelegt");
router.push(`/cases/${created.id}`);
},
onError: () => {
toast.error("Fehler beim Anlegen der Akte");
},
});
return (
<div className="mx-auto max-w-2xl">
<Link
href="/cases"
className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
>
<ArrowLeft className="h-3.5 w-3.5" />
Zuruck zu Akten
</Link>
<h1 className="text-lg font-semibold text-neutral-900">Neue Akte</h1>
<p className="mt-0.5 text-sm text-neutral-500">
Neue Akte im System anlegen
</p>
<div className="mt-6 rounded-md border border-neutral-200 bg-white p-6">
<CaseForm
onSubmit={(data) => mutation.mutate(data)}
isSubmitting={mutation.isPending}
/>
</div>
</div>
);
}

View File

@@ -0,0 +1,172 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/lib/api";
import type { Case } from "@/lib/types";
import Link from "next/link";
import { useSearchParams, useRouter } from "next/navigation";
import { Plus, Search } from "lucide-react";
import { useState } from "react";
const STATUS_OPTIONS = [
{ value: "", label: "Alle Status" },
{ value: "active", label: "Aktiv" },
{ value: "pending", label: "Anhangig" },
{ value: "closed", label: "Geschlossen" },
{ value: "archived", label: "Archiviert" },
];
const TYPE_OPTIONS = [
{ value: "", label: "Alle Typen" },
{ value: "INF", label: "Verletzungsklage" },
{ value: "REV", label: "Widerruf" },
{ value: "CCR", label: "Einstweilige Verfugung" },
{ value: "APP", label: "Berufung" },
{ value: "PI", label: "Vorlaufiger Rechtsschutz" },
{ value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
];
const STATUS_BADGE: Record<string, string> = {
active: "bg-emerald-50 text-emerald-700",
pending: "bg-amber-50 text-amber-700",
closed: "bg-neutral-100 text-neutral-600",
archived: "bg-neutral-100 text-neutral-400",
};
export default function CasesPage() {
const router = useRouter();
const searchParams = useSearchParams();
const [search, setSearch] = useState(searchParams.get("search") ?? "");
const [status, setStatus] = useState(searchParams.get("status") ?? "");
const [type, setType] = useState(searchParams.get("type") ?? "");
const { data, isLoading } = useQuery({
queryKey: ["cases", { search, status, type }],
queryFn: () => {
const params = new URLSearchParams();
if (search) params.set("search", search);
if (status) params.set("status", status);
if (type) params.set("type", type);
params.set("limit", "50");
const qs = params.toString();
return api.get<{ cases: Case[]; total: number }>(
`/cases${qs ? `?${qs}` : ""}`,
);
},
});
const cases = data?.cases ?? [];
return (
<div>
<div className="flex items-center justify-between">
<div>
<h1 className="text-lg font-semibold text-neutral-900">Akten</h1>
<p className="mt-0.5 text-sm text-neutral-500">
{data ? `${data.total} Akten` : "Laden..."}
</p>
</div>
<Link
href="/cases/new"
className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800"
>
<Plus className="h-4 w-4" />
Neue Akte
</Link>
</div>
<div className="mt-4 flex items-center gap-3">
<div className="relative flex-1">
<Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-400" />
<input
type="text"
placeholder="Suchen nach Aktenzeichen, Titel..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full rounded-md border border-neutral-200 bg-white py-1.5 pl-9 pr-3 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
/>
</div>
<select
value={status}
onChange={(e) => setStatus(e.target.value)}
className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-neutral-400"
>
{STATUS_OPTIONS.map((o) => (
<option key={o.value} value={o.value}>
{o.label}
</option>
))}
</select>
<select
value={type}
onChange={(e) => setType(e.target.value)}
className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-neutral-400"
>
{TYPE_OPTIONS.map((o) => (
<option key={o.value} value={o.value}>
{o.label}
</option>
))}
</select>
</div>
<div className="mt-4">
{isLoading ? (
<div className="py-12 text-center text-sm text-neutral-400">
Laden...
</div>
) : cases.length === 0 ? (
<div className="py-12 text-center text-sm text-neutral-400">
Keine Akten gefunden.
</div>
) : (
<div className="overflow-hidden rounded-md border border-neutral-200 bg-white">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-neutral-100 text-left text-xs font-medium uppercase tracking-wider text-neutral-400">
<th className="px-4 py-2.5">Aktenzeichen</th>
<th className="px-4 py-2.5">Titel</th>
<th className="px-4 py-2.5">Typ</th>
<th className="px-4 py-2.5">Gericht</th>
<th className="px-4 py-2.5">Status</th>
<th className="px-4 py-2.5">Erstellt</th>
</tr>
</thead>
<tbody className="divide-y divide-neutral-100">
{cases.map((c) => (
<tr
key={c.id}
onClick={() => router.push(`/cases/${c.id}`)}
className="cursor-pointer hover:bg-neutral-50"
>
<td className="px-4 py-2.5 font-medium text-neutral-900">
{c.case_number}
</td>
<td className="px-4 py-2.5 text-neutral-700">{c.title}</td>
<td className="px-4 py-2.5 text-neutral-500">
{c.case_type ?? "-"}
</td>
<td className="px-4 py-2.5 text-neutral-500">
{c.court ?? "-"}
</td>
<td className="px-4 py-2.5">
<span
className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[c.status] ?? "bg-neutral-100 text-neutral-500"}`}
>
{c.status}
</span>
</td>
<td className="px-4 py-2.5 text-neutral-400">
{new Date(c.created_at).toLocaleDateString("de-DE")}
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</div>
);
}

View File

@@ -0,0 +1,69 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/lib/api";
import type { DashboardData } from "@/lib/types";
import { DeadlineTrafficLights } from "@/components/dashboard/DeadlineTrafficLights";
import { CaseOverviewGrid } from "@/components/dashboard/CaseOverviewGrid";
import { UpcomingTimeline } from "@/components/dashboard/UpcomingTimeline";
import { AISummaryCard } from "@/components/dashboard/AISummaryCard";
import { QuickActions } from "@/components/dashboard/QuickActions";
import { Loader2 } from "lucide-react";
export default function DashboardPage() {
const { data, isLoading, error } = useQuery({
queryKey: ["dashboard"],
queryFn: () => api.get<DashboardData>("/dashboard"),
refetchInterval: 60_000,
});
if (isLoading) {
return (
<div className="flex h-full items-center justify-center">
<Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
</div>
);
}
if (error || !data) {
return (
<div className="flex h-full items-center justify-center">
<p className="text-sm text-neutral-500">
Dashboard konnte nicht geladen werden.
</p>
</div>
);
}
return (
<div className="mx-auto max-w-6xl space-y-6">
<div>
<h1 className="text-lg font-semibold text-neutral-900">Dashboard</h1>
<p className="mt-0.5 text-sm text-neutral-500">
Fristenübersicht und Kanzlei-Status
</p>
</div>
{/* Traffic Lights — the hero section */}
<DeadlineTrafficLights data={data.deadline_summary} />
{/* Main content grid */}
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* Left column: Timeline (takes 2 cols) */}
<div className="lg:col-span-2">
<UpcomingTimeline
deadlines={data.upcoming_deadlines}
appointments={data.upcoming_appointments}
/>
</div>
{/* Right column: Case overview, AI summary, Quick actions */}
<div className="space-y-6">
<CaseOverviewGrid data={data.case_summary} />
<AISummaryCard data={data} />
<QuickActions />
</div>
</div>
</div>
);
}

View File

@@ -0,0 +1,73 @@
"use client";
import { DeadlineList } from "@/components/deadlines/DeadlineList";
import { DeadlineCalendarView } from "@/components/deadlines/DeadlineCalendarView";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/lib/api";
import type { Deadline } from "@/lib/types";
import { Calendar, List, Calculator } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
type ViewMode = "list" | "calendar";
export default function FristenPage() {
const [view, setView] = useState<ViewMode>("list");
const { data: deadlines } = useQuery({
queryKey: ["deadlines"],
queryFn: () => api.get<Deadline[]>("/api/deadlines"),
});
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h1 className="text-lg font-semibold text-neutral-900">Fristen</h1>
<p className="mt-0.5 text-sm text-neutral-500">
Alle Fristen im Uberblick
</p>
</div>
<div className="flex items-center gap-2">
<Link
href="/fristen/rechner"
className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 transition-colors hover:bg-neutral-50"
>
<Calculator className="h-3.5 w-3.5" />
Fristenrechner
</Link>
<div className="flex rounded-md border border-neutral-200 bg-white">
<button
onClick={() => setView("list")}
className={`flex items-center gap-1 rounded-l-md px-2.5 py-1.5 text-sm transition-colors ${
view === "list"
? "bg-neutral-100 font-medium text-neutral-900"
: "text-neutral-500 hover:text-neutral-700"
}`}
>
<List className="h-3.5 w-3.5" />
Liste
</button>
<button
onClick={() => setView("calendar")}
className={`flex items-center gap-1 rounded-r-md px-2.5 py-1.5 text-sm transition-colors ${
view === "calendar"
? "bg-neutral-100 font-medium text-neutral-900"
: "text-neutral-500 hover:text-neutral-700"
}`}
>
<Calendar className="h-3.5 w-3.5" />
Kalender
</button>
</div>
</div>
</div>
{view === "list" ? (
<DeadlineList />
) : (
<DeadlineCalendarView deadlines={deadlines || []} />
)}
</div>
);
}

View File

@@ -0,0 +1,26 @@
"use client";
import { DeadlineCalculator } from "@/components/deadlines/DeadlineCalculator";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";
export default function FristenrechnerPage() {
return (
<div className="space-y-4">
<div>
<Link
href="/fristen"
className="mb-2 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
>
<ArrowLeft className="h-3.5 w-3.5" />
Zuruck zu Fristen
</Link>
<h1 className="text-lg font-semibold text-neutral-900">Fristenrechner</h1>
<p className="mt-0.5 text-sm text-neutral-500">
Berechnen Sie Fristen basierend auf Verfahrensart und Auslosedatum
</p>
</div>
<DeadlineCalculator />
</div>
);
}

View File

@@ -1,10 +1,5 @@
export default function DashboardPage() {
return (
<div>
<h1 className="text-lg font-semibold text-neutral-900">Dashboard</h1>
<p className="mt-1 text-sm text-neutral-500">
Willkommen bei KanzlAI
</p>
</div>
);
import { redirect } from "next/navigation";
export default function RootPage() {
redirect("/dashboard");
}

View File

@@ -9,3 +9,18 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@keyframes count-up {
0% {
transform: translateY(8px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.animate-count-up {
animation: count-up 0.3s ease-out;
}

View File

@@ -0,0 +1,165 @@
"use client";
import { useState } from "react";
const TYPE_OPTIONS = [
{ value: "", label: "-- Typ wahlen --" },
{ value: "INF", label: "Verletzungsklage (INF)" },
{ value: "REV", label: "Widerruf (REV)" },
{ value: "CCR", label: "Einstweilige Verfugung (CCR)" },
{ value: "APP", label: "Berufung (APP)" },
{ value: "PI", label: "Vorlaufiger Rechtsschutz (PI)" },
{ value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
];
export interface CaseFormData {
case_number: string;
title: string;
case_type?: string;
court?: string;
court_ref?: string;
status: string;
}
interface CaseFormProps {
initialData?: Partial<CaseFormData>;
onSubmit: (data: CaseFormData) => void;
isSubmitting?: boolean;
submitLabel?: string;
}
export function CaseForm({
initialData,
onSubmit,
isSubmitting,
submitLabel = "Akte anlegen",
}: CaseFormProps) {
const [form, setForm] = useState<CaseFormData>({
case_number: initialData?.case_number ?? "",
title: initialData?.title ?? "",
case_type: initialData?.case_type ?? "",
court: initialData?.court ?? "",
court_ref: initialData?.court_ref ?? "",
status: initialData?.status ?? "active",
});
function handleSubmit(e: React.FormEvent) {
e.preventDefault();
const data: CaseFormData = {
...form,
case_type: form.case_type || undefined,
court: form.court || undefined,
court_ref: form.court_ref || undefined,
};
onSubmit(data);
}
function update(field: keyof CaseFormData, value: string) {
setForm((prev) => ({ ...prev, [field]: value }));
}
const inputClass =
"w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
return (
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<label className="mb-1 block text-sm font-medium text-neutral-700">
Aktenzeichen *
</label>
<input
type="text"
required
value={form.case_number}
onChange={(e) => update("case_number", e.target.value)}
placeholder="z.B. 2026/001"
className={inputClass}
/>
</div>
<div>
<label className="mb-1 block text-sm font-medium text-neutral-700">
Status
</label>
<select
value={form.status}
onChange={(e) => update("status", e.target.value)}
className={inputClass}
>
<option value="active">Aktiv</option>
<option value="pending">Anhangig</option>
<option value="closed">Geschlossen</option>
</select>
</div>
</div>
<div>
<label className="mb-1 block text-sm font-medium text-neutral-700">
Titel *
</label>
<input
type="text"
required
value={form.title}
onChange={(e) => update("title", e.target.value)}
placeholder="Bezeichnung der Akte"
className={inputClass}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="mb-1 block text-sm font-medium text-neutral-700">
Verfahrensart
</label>
<select
value={form.case_type}
onChange={(e) => update("case_type", e.target.value)}
className={inputClass}
>
{TYPE_OPTIONS.map((o) => (
<option key={o.value} value={o.value}>
{o.label}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-sm font-medium text-neutral-700">
Gericht
</label>
<input
type="text"
value={form.court}
onChange={(e) => update("court", e.target.value)}
placeholder="z.B. UPC Munich Central Division"
className={inputClass}
/>
</div>
</div>
<div>
<label className="mb-1 block text-sm font-medium text-neutral-700">
Gerichtliches Aktenzeichen
</label>
<input
type="text"
value={form.court_ref}
onChange={(e) => update("court_ref", e.target.value)}
placeholder="z.B. UPC_CFI_123/2026"
className={inputClass}
/>
</div>
<div className="flex justify-end pt-2">
<button
type="submit"
disabled={isSubmitting}
className="rounded-md bg-neutral-900 px-4 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
>
{isSubmitting ? "Speichern..." : submitLabel}
</button>
</div>
</form>
);
}

View File

@@ -0,0 +1,60 @@
"use client";
import type { CaseEvent } from "@/lib/types";
import { format } from "date-fns";
import { de } from "date-fns/locale";
const EVENT_ICONS: Record<string, string> = {
case_created: "bg-emerald-500",
status_changed: "bg-amber-500",
party_added: "bg-blue-500",
case_archived: "bg-neutral-400",
document_uploaded: "bg-violet-500",
deadline_created: "bg-red-500",
};
interface CaseTimelineProps {
events: CaseEvent[];
}
export function CaseTimeline({ events }: CaseTimelineProps) {
if (events.length === 0) {
return (
<p className="py-8 text-center text-sm text-neutral-400">
Keine Ereignisse vorhanden.
</p>
);
}
return (
<div className="relative space-y-0">
{events.map((event, i) => (
<div key={event.id} className="relative flex gap-3 pb-6">
{i < events.length - 1 && (
<div className="absolute left-[7px] top-4 h-full w-px bg-neutral-200" />
)}
<div
className={`mt-1 h-[15px] w-[15px] shrink-0 rounded-full border-2 border-white ${EVENT_ICONS[event.event_type ?? ""] ?? "bg-neutral-300"}`}
/>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-neutral-900">
{event.title}
</p>
{event.description && (
<p className="mt-0.5 text-sm text-neutral-500">
{event.description}
</p>
)}
<p className="mt-1 text-xs text-neutral-400">
{format(
new Date(event.event_date ?? event.created_at),
"d. MMM yyyy, HH:mm",
{ locale: de },
)}
</p>
</div>
</div>
))}
</div>
);
}

View File

@@ -0,0 +1,182 @@
"use client";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import { api } from "@/lib/api";
import type { Party } from "@/lib/types";
import { Plus, Trash2, X } from "lucide-react";
interface PartyListProps {
caseId: string;
parties: Party[];
}
interface PartyFormData {
name: string;
role: string;
representative: string;
}
const ROLE_OPTIONS = [
"Klager",
"Beklagter",
"Nebenintervenient",
"Patentinhaber",
"Streithelfer",
];
export function PartyList({ caseId, parties }: PartyListProps) {
const queryClient = useQueryClient();
const [showForm, setShowForm] = useState(false);
const [form, setForm] = useState<PartyFormData>({
name: "",
role: "",
representative: "",
});
const addMutation = useMutation({
mutationFn: (data: PartyFormData) =>
api.post<Party>(`/cases/${caseId}/parties`, {
name: data.name,
role: data.role || undefined,
representative: data.representative || undefined,
}),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["case", caseId] });
toast.success("Partei hinzugefugt");
setShowForm(false);
setForm({ name: "", role: "", representative: "" });
},
onError: () => toast.error("Fehler beim Hinzufugen"),
});
const deleteMutation = useMutation({
mutationFn: (partyId: string) => api.delete(`/parties/${partyId}`),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["case", caseId] });
toast.success("Partei entfernt");
},
onError: () => toast.error("Fehler beim Entfernen"),
});
const inputClass =
"w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
return (
<div>
<div className="flex items-center justify-between">
<h3 className="text-sm font-medium text-neutral-700">
Parteien ({parties.length})
</h3>
{!showForm && (
<button
onClick={() => setShowForm(true)}
className="inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
>
<Plus className="h-3.5 w-3.5" />
Hinzufugen
</button>
)}
</div>
{parties.length === 0 && !showForm && (
<p className="mt-4 py-4 text-center text-sm text-neutral-400">
Keine Parteien vorhanden.
</p>
)}
<div className="mt-3 space-y-2">
{parties.map((party) => (
<div
key={party.id}
className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-2.5"
>
<div>
<p className="text-sm font-medium text-neutral-900">
{party.name}
</p>
<div className="mt-0.5 flex gap-3 text-xs text-neutral-500">
{party.role && <span>{party.role}</span>}
{party.representative && (
<span>Vertreter: {party.representative}</span>
)}
</div>
</div>
<button
onClick={() => deleteMutation.mutate(party.id)}
className="rounded p-1 text-neutral-300 hover:bg-neutral-100 hover:text-red-500"
title="Partei entfernen"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</div>
))}
</div>
{showForm && (
<div className="mt-3 rounded-md border border-neutral-200 bg-neutral-50 p-4">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-neutral-700">
Neue Partei
</span>
<button
onClick={() => setShowForm(false)}
className="text-neutral-400 hover:text-neutral-600"
>
<X className="h-4 w-4" />
</button>
</div>
<form
onSubmit={(e) => {
e.preventDefault();
addMutation.mutate(form);
}}
className="mt-3 space-y-3"
>
<input
type="text"
required
placeholder="Name der Partei"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
className={inputClass}
/>
<div className="grid grid-cols-2 gap-3">
<select
value={form.role}
onChange={(e) => setForm({ ...form, role: e.target.value })}
className={inputClass}
>
<option value="">-- Rolle --</option>
{ROLE_OPTIONS.map((r) => (
<option key={r} value={r}>
{r}
</option>
))}
</select>
<input
type="text"
placeholder="Vertreter / Anwalt"
value={form.representative}
onChange={(e) =>
setForm({ ...form, representative: e.target.value })
}
className={inputClass}
/>
</div>
<div className="flex justify-end">
<button
type="submit"
disabled={addMutation.isPending}
className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
>
{addMutation.isPending ? "..." : "Hinzufugen"}
</button>
</div>
</form>
</div>
)}
</div>
);
}

View File

@@ -0,0 +1,70 @@
"use client";
import { Sparkles } from "lucide-react";
import type { DashboardData } from "@/lib/types";
interface Props {
data: DashboardData;
}
function generateSummary(data: DashboardData): string {
const parts: string[] = [];
const { deadline_summary: ds, case_summary: cs, upcoming_deadlines: ud } = data;
// Deadline urgency
if (ds.overdue_count > 0) {
parts.push(
`${ds.overdue_count} Frist${ds.overdue_count > 1 ? "en" : ""} ${ds.overdue_count > 1 ? "sind" : "ist"} überfällig und ${ds.overdue_count > 1 ? "erfordern" : "erfordert"} sofortige Aufmerksamkeit.`,
);
}
if (ds.due_this_week > 0) {
parts.push(
`${ds.due_this_week} Frist${ds.due_this_week > 1 ? "en laufen" : " läuft"} diese Woche ab.`,
);
}
// Highlight most critical upcoming deadline
if (ud.length > 0) {
const next = ud[0];
parts.push(
`Die nächste Frist ist "${next.title}" in Akte ${next.case_number}.`,
);
}
// Case activity
if (cs.new_this_month > 0) {
parts.push(
`${cs.new_this_month} neue Akte${cs.new_this_month > 1 ? "n" : ""} diesen Monat bei ${cs.active_count} aktiven Verfahren.`,
);
} else {
parts.push(`${cs.active_count} aktive Verfahren.`);
}
// All good
if (ds.overdue_count === 0 && ds.due_this_week === 0) {
parts.unshift("Alle Fristen sind im Zeitplan.");
}
return parts.join(" ");
}
export function AISummaryCard({ data }: Props) {
const summary = generateSummary(data);
return (
<div className="rounded-xl border border-neutral-200 bg-white p-5">
<div className="flex items-center gap-2">
<div className="rounded-md bg-violet-50 p-1.5">
<Sparkles className="h-4 w-4 text-violet-500" />
</div>
<h2 className="text-sm font-semibold text-neutral-900">
KI-Zusammenfassung
</h2>
</div>
<p className="mt-3 text-sm leading-relaxed text-neutral-700">
{summary}
</p>
</div>
);
}

View File

@@ -0,0 +1,55 @@
"use client";
import { FolderOpen, FolderPlus, Archive } from "lucide-react";
import type { CaseSummary } from "@/lib/types";
interface Props {
data: CaseSummary;
}
export function CaseOverviewGrid({ data }: Props) {
const items = [
{
label: "Aktive Akten",
value: data.active_count,
icon: FolderOpen,
color: "text-blue-600",
bg: "bg-blue-50",
},
{
label: "Neu (Monat)",
value: data.new_this_month,
icon: FolderPlus,
color: "text-violet-600",
bg: "bg-violet-50",
},
{
label: "Abgeschlossen",
value: data.closed_count,
icon: Archive,
color: "text-neutral-500",
bg: "bg-neutral-50",
},
];
return (
<div className="rounded-xl border border-neutral-200 bg-white p-5">
<h2 className="text-sm font-semibold text-neutral-900">Aktenübersicht</h2>
<div className="mt-4 space-y-3">
{items.map((item) => (
<div key={item.label} className="flex items-center justify-between">
<div className="flex items-center gap-2.5">
<div className={`rounded-md p-1.5 ${item.bg}`}>
<item.icon className={`h-4 w-4 ${item.color}`} />
</div>
<span className="text-sm text-neutral-600">{item.label}</span>
</div>
<span className="text-lg font-semibold tabular-nums text-neutral-900">
{item.value}
</span>
</div>
))}
</div>
</div>
);
}

View File

@@ -0,0 +1,105 @@
"use client";
import { useEffect, useRef } from "react";
import { AlertTriangle, Clock, CheckCircle } from "lucide-react";
import type { DeadlineSummary } from "@/lib/types";
function AnimatedCount({ value }: { value: number }) {
const ref = useRef<HTMLSpanElement>(null);
const prevValue = useRef(value);
useEffect(() => {
const el = ref.current;
if (!el || prevValue.current === value) return;
el.classList.remove("animate-count-up");
void el.offsetWidth;
el.classList.add("animate-count-up");
prevValue.current = value;
}, [value]);
return (
<span ref={ref} className="inline-block tabular-nums">
{value}
</span>
);
}
interface Props {
data: DeadlineSummary;
onFilter?: (filter: "overdue" | "this_week" | "ok") => void;
}
export function DeadlineTrafficLights({ data, onFilter }: Props) {
const cards = [
{
key: "overdue" as const,
label: "Überfällig",
count: data.overdue_count,
icon: AlertTriangle,
bg: "bg-red-50",
border: "border-red-200",
iconColor: "text-red-500",
countColor: "text-red-700",
labelColor: "text-red-600",
ring: data.overdue_count > 0 ? "ring-2 ring-red-300 ring-offset-1" : "",
pulse: data.overdue_count > 0,
},
{
key: "this_week" as const,
label: "Diese Woche",
count: data.due_this_week,
icon: Clock,
bg: "bg-amber-50",
border: "border-amber-200",
iconColor: "text-amber-500",
countColor: "text-amber-700",
labelColor: "text-amber-600",
ring: "",
pulse: false,
},
{
key: "ok" as const,
label: "Im Zeitplan",
count: data.ok_count + data.due_next_week,
icon: CheckCircle,
bg: "bg-emerald-50",
border: "border-emerald-200",
iconColor: "text-emerald-500",
countColor: "text-emerald-700",
labelColor: "text-emerald-600",
ring: "",
pulse: false,
},
];
return (
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
{cards.map((card) => (
<button
key={card.key}
onClick={() => onFilter?.(card.key)}
className={`group relative overflow-hidden rounded-xl border ${card.border} ${card.bg} ${card.ring} p-6 text-left transition-all hover:shadow-md active:scale-[0.98]`}
>
{card.pulse && (
<span className="absolute right-4 top-4 flex h-3 w-3">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75" />
<span className="relative inline-flex h-3 w-3 rounded-full bg-red-500" />
</span>
)}
<div className="flex items-center gap-3">
<div className={`rounded-lg p-2 ${card.bg}`}>
<card.icon className={`h-5 w-5 ${card.iconColor}`} />
</div>
<span className={`text-sm font-medium ${card.labelColor}`}>
{card.label}
</span>
</div>
<div className={`mt-4 text-4xl font-bold tracking-tight ${card.countColor}`}>
<AnimatedCount value={card.count} />
</div>
</button>
))}
</div>
);
}

View File

@@ -0,0 +1,53 @@
"use client";
import Link from "next/link";
import { FolderPlus, Clock, Sparkles, CalendarSync } from "lucide-react";
const actions = [
{
label: "Neue Akte",
href: "/akten?new=1",
icon: FolderPlus,
color: "text-blue-600 bg-blue-50 hover:bg-blue-100",
},
{
label: "Frist eintragen",
href: "/fristen?new=1",
icon: Clock,
color: "text-amber-600 bg-amber-50 hover:bg-amber-100",
},
{
label: "AI Analyse",
href: "/ai",
icon: Sparkles,
color: "text-violet-600 bg-violet-50 hover:bg-violet-100",
},
{
label: "CalDAV Sync",
href: "/einstellungen",
icon: CalendarSync,
color: "text-emerald-600 bg-emerald-50 hover:bg-emerald-100",
},
];
export function QuickActions() {
return (
<div className="rounded-xl border border-neutral-200 bg-white p-5">
<h2 className="text-sm font-semibold text-neutral-900">
Schnellzugriff
</h2>
<div className="mt-3 grid grid-cols-2 gap-2">
{actions.map((action) => (
<Link
key={action.label}
href={action.href}
className={`flex items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${action.color}`}
>
<action.icon className="h-4 w-4" />
{action.label}
</Link>
))}
</div>
</div>
);
}

View File

@@ -0,0 +1,134 @@
"use client";
import { format, parseISO, isToday, isTomorrow } from "date-fns";
import { de } from "date-fns/locale";
import { Clock, Calendar, MapPin } from "lucide-react";
import type { UpcomingDeadline, UpcomingAppointment } from "@/lib/types";
interface Props {
deadlines: UpcomingDeadline[];
appointments: UpcomingAppointment[];
}
type TimelineItem =
| { type: "deadline"; date: Date; data: UpcomingDeadline }
| { type: "appointment"; date: Date; data: UpcomingAppointment };
function formatDayLabel(date: Date): string {
if (isToday(date)) return "Heute";
if (isTomorrow(date)) return "Morgen";
return format(date, "EEEE, d. MMM", { locale: de });
}
export function UpcomingTimeline({ deadlines, appointments }: Props) {
const items: TimelineItem[] = [
...deadlines.map((d) => ({
type: "deadline" as const,
date: parseISO(d.due_date),
data: d,
})),
...appointments.map((a) => ({
type: "appointment" as const,
date: parseISO(a.start_at),
data: a,
})),
].sort((a, b) => a.date.getTime() - b.date.getTime());
// Group by day
const grouped = new Map<string, TimelineItem[]>();
for (const item of items) {
const key = format(item.date, "yyyy-MM-dd");
const group = grouped.get(key) ?? [];
group.push(item);
grouped.set(key, group);
}
const empty = items.length === 0;
return (
<div className="rounded-xl border border-neutral-200 bg-white p-5">
<h2 className="text-sm font-semibold text-neutral-900">
Nächste 7 Tage
</h2>
{empty ? (
<p className="mt-6 text-center text-sm text-neutral-400">
Keine anstehenden Termine oder Fristen
</p>
) : (
<div className="mt-4 space-y-5">
{Array.from(grouped.entries()).map(([dateKey, dayItems]) => (
<div key={dateKey}>
<p className="text-xs font-medium uppercase tracking-wider text-neutral-400">
{formatDayLabel(dayItems[0].date)}
</p>
<div className="mt-2 space-y-2">
{dayItems.map((item, i) => (
<TimelineEntry key={`${item.type}-${i}`} item={item} />
))}
</div>
</div>
))}
</div>
)}
</div>
);
}
function TimelineEntry({ item }: { item: TimelineItem }) {
if (item.type === "deadline") {
const d = item.data;
return (
<div className="flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5">
<div className="mt-0.5 rounded-md bg-amber-50 p-1">
<Clock className="h-3.5 w-3.5 text-amber-500" />
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-neutral-900">
{d.title}
</p>
<p className="mt-0.5 truncate text-xs text-neutral-500">
{d.case_number} · {d.case_title}
</p>
</div>
<span className="shrink-0 text-xs font-medium text-amber-600">
Frist
</span>
</div>
);
}
const a = item.data;
return (
<div className="flex items-start gap-3 rounded-lg border border-neutral-100 bg-neutral-50/50 px-3 py-2.5">
<div className="mt-0.5 rounded-md bg-blue-50 p-1">
<Calendar className="h-3.5 w-3.5 text-blue-500" />
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-neutral-900">
{a.title}
</p>
<div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
<span>{format(item.date, "HH:mm")} Uhr</span>
{a.location && (
<>
<span className="text-neutral-300">·</span>
<span className="flex items-center gap-0.5 truncate">
<MapPin className="h-3 w-3" />
{a.location}
</span>
</>
)}
{a.case_number && (
<>
<span className="text-neutral-300">·</span>
<span>{a.case_number}</span>
</>
)}
</div>
</div>
<span className="shrink-0 text-xs font-medium text-blue-600">
Termin
</span>
</div>
);
}

View File

@@ -0,0 +1,178 @@
"use client";
import { useQuery, useMutation } from "@tanstack/react-query";
import { api } from "@/lib/api";
import type { ProceedingType, CalculateResponse, CalculatedDeadline } from "@/lib/types";
import { format, parseISO, isPast, isThisWeek } from "date-fns";
import { de } from "date-fns/locale";
import { Calculator, Calendar, ArrowRight, AlertTriangle } from "lucide-react";
import { useState } from "react";
function getTimelineUrgency(dueDate: string): "red" | "amber" | "green" {
const due = parseISO(dueDate);
if (isPast(due)) return "red";
if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
return "green";
}
const dotColors = {
red: "bg-red-500",
amber: "bg-amber-500",
green: "bg-green-500",
};
export function DeadlineCalculator() {
const [proceedingType, setProceedingType] = useState("");
const [triggerDate, setTriggerDate] = useState("");
const { data: proceedingTypes, isLoading: typesLoading } = useQuery({
queryKey: ["proceeding-types"],
queryFn: () => api.get<ProceedingType[]>("/api/proceeding-types"),
});
const calculateMutation = useMutation({
mutationFn: (params: { proceeding_type: string; trigger_event_date: string }) =>
api.post<CalculateResponse>("/api/deadlines/calculate", params),
});
function handleCalculate(e: React.FormEvent) {
e.preventDefault();
if (!proceedingType || !triggerDate) return;
calculateMutation.mutate({
proceeding_type: proceedingType,
trigger_event_date: triggerDate,
});
}
const results = calculateMutation.data;
return (
<div className="space-y-6">
{/* Input form */}
<form onSubmit={handleCalculate} className="rounded-lg border border-neutral-200 bg-white p-5">
<div className="flex items-center gap-2 text-sm font-medium text-neutral-900">
<Calculator className="h-4 w-4" />
Fristenberechnung
</div>
<div className="mt-4 grid gap-4 sm:grid-cols-3">
<div>
<label className="mb-1 block text-xs font-medium text-neutral-500">
Verfahrensart
</label>
<select
value={proceedingType}
onChange={(e) => setProceedingType(e.target.value)}
disabled={typesLoading}
className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
>
<option value="">Bitte wahlen...</option>
{proceedingTypes?.map((pt) => (
<option key={pt.id} value={pt.code}>
{pt.name} ({pt.code})
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-medium text-neutral-500">
Auslosedatum
</label>
<input
type="date"
value={triggerDate}
onChange={(e) => setTriggerDate(e.target.value)}
className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
/>
</div>
<div className="flex items-end">
<button
type="submit"
disabled={!proceedingType || !triggerDate || calculateMutation.isPending}
className="flex w-full items-center justify-center gap-2 rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
>
{calculateMutation.isPending ? "Berechne..." : "Berechnen"}
<ArrowRight className="h-3.5 w-3.5" />
</button>
</div>
</div>
</form>
{/* Error */}
{calculateMutation.isError && (
<div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
<AlertTriangle className="h-4 w-4 shrink-0" />
Fehler bei der Berechnung. Bitte Eingaben prufen.
</div>
)}
{/* Results */}
{results && results.deadlines && (
<div className="space-y-3">
<div className="flex items-center justify-between">
<h3 className="text-sm font-medium text-neutral-900">
Berechnete Fristen
</h3>
<span className="text-xs text-neutral-500">
{results.deadlines.length} Fristen ab{" "}
{format(parseISO(results.trigger_event_date), "dd. MMM yyyy", { locale: de })}
</span>
</div>
{/* Timeline */}
<div className="relative rounded-lg border border-neutral-200 bg-white">
{results.deadlines.map((d: CalculatedDeadline, i: number) => {
const urgency = getTimelineUrgency(d.due_date);
const isLast = i === results.deadlines.length - 1;
return (
<div
key={d.rule_id}
className={`flex gap-3 px-4 py-3 ${!isLast ? "border-b border-neutral-100" : ""}`}
>
{/* Timeline dot + line */}
<div className="flex flex-col items-center pt-1">
<div className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColors[urgency]}`} />
{!isLast && <div className="mt-1 w-px flex-1 bg-neutral-200" />}
</div>
{/* Content */}
<div className="min-w-0 flex-1">
<div className="flex items-start justify-between gap-2">
<span className="text-sm font-medium text-neutral-900">
{d.title}
</span>
<span className="shrink-0 text-sm font-medium tabular-nums text-neutral-700">
{format(parseISO(d.due_date), "dd.MM.yyyy")}
</span>
</div>
<div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
{d.rule_code && <span>{d.rule_code}</span>}
{d.was_adjusted && (
<>
{d.rule_code && <span>·</span>}
<span className="text-amber-600">
Angepasst (Original: {format(parseISO(d.original_due_date), "dd.MM.yyyy")})
</span>
</>
)}
</div>
</div>
</div>
);
})}
</div>
</div>
)}
{/* Empty state */}
{!results && !calculateMutation.isPending && (
<div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
<Calendar className="mx-auto h-8 w-8 text-neutral-300" />
<p className="mt-2 text-sm text-neutral-500">
Verfahrensart und Auslosedatum wahlen, um Fristen zu berechnen
</p>
</div>
)}
</div>
);
}

View File

@@ -0,0 +1,154 @@
"use client";
import type { Deadline } from "@/lib/types";
import {
format,
startOfMonth,
endOfMonth,
startOfWeek,
endOfWeek,
eachDayOfInterval,
isSameMonth,
isToday,
parseISO,
isPast,
isThisWeek,
addMonths,
subMonths,
} from "date-fns";
import { de } from "date-fns/locale";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useState, useMemo } from "react";
interface DeadlineCalendarViewProps {
deadlines: Deadline[];
}
function getUrgency(deadline: Deadline): "red" | "amber" | "green" {
if (deadline.status === "completed") return "green";
const due = parseISO(deadline.due_date);
if (isPast(due)) return "red";
if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
return "green";
}
const dotColors = {
red: "bg-red-500",
amber: "bg-amber-500",
green: "bg-green-500",
};
export function DeadlineCalendarView({ deadlines }: DeadlineCalendarViewProps) {
const [currentMonth, setCurrentMonth] = useState(new Date());
const monthStart = startOfMonth(currentMonth);
const monthEnd = endOfMonth(currentMonth);
const calStart = startOfWeek(monthStart, { weekStartsOn: 1 });
const calEnd = endOfWeek(monthEnd, { weekStartsOn: 1 });
const days = eachDayOfInterval({ start: calStart, end: calEnd });
const deadlinesByDay = useMemo(() => {
const map = new Map<string, Deadline[]>();
for (const d of deadlines) {
if (d.status === "completed") continue;
const key = d.due_date.slice(0, 10);
const existing = map.get(key) || [];
existing.push(d);
map.set(key, existing);
}
return map;
}, [deadlines]);
const weekDays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
return (
<div className="rounded-lg border border-neutral-200 bg-white">
{/* Header */}
<div className="flex items-center justify-between border-b border-neutral-200 px-4 py-3">
<button
onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
className="rounded-md p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
>
<ChevronLeft className="h-4 w-4" />
</button>
<span className="text-sm font-medium text-neutral-900">
{format(currentMonth, "MMMM yyyy", { locale: de })}
</span>
<button
onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
className="rounded-md p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
>
<ChevronRight className="h-4 w-4" />
</button>
</div>
{/* Weekday labels */}
<div className="grid grid-cols-7 border-b border-neutral-100">
{weekDays.map((d) => (
<div key={d} className="px-2 py-2 text-center text-xs font-medium text-neutral-400">
{d}
</div>
))}
</div>
{/* Days grid */}
<div className="grid grid-cols-7">
{days.map((day, i) => {
const key = format(day, "yyyy-MM-dd");
const dayDeadlines = deadlinesByDay.get(key) || [];
const inMonth = isSameMonth(day, currentMonth);
const today = isToday(day);
return (
<div
key={i}
className={`min-h-[4.5rem] border-b border-r border-neutral-100 p-1.5 ${
!inMonth ? "bg-neutral-50" : ""
}`}
>
<div
className={`mb-1 text-right text-xs ${
today
? "font-bold text-neutral-900"
: inMonth
? "text-neutral-600"
: "text-neutral-300"
}`}
>
{today ? (
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-neutral-900 text-white">
{format(day, "d")}
</span>
) : (
format(day, "d")
)}
</div>
<div className="space-y-0.5">
{dayDeadlines.slice(0, 3).map((dl) => {
const urgency = getUrgency(dl);
return (
<div
key={dl.id}
className="flex items-center gap-1 truncate"
title={dl.title}
>
<div className={`h-1.5 w-1.5 shrink-0 rounded-full ${dotColors[urgency]}`} />
<span className="truncate text-[10px] text-neutral-700">
{dl.title}
</span>
</div>
);
})}
{dayDeadlines.length > 3 && (
<div className="text-[10px] text-neutral-400">
+{dayDeadlines.length - 3} mehr
</div>
)}
</div>
</div>
);
})}
</div>
</div>
);
}

View File

@@ -0,0 +1,257 @@
"use client";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { api } from "@/lib/api";
import type { Deadline, Case } from "@/lib/types";
import { format, isPast, isThisWeek, parseISO } from "date-fns";
import { de } from "date-fns/locale";
import { Check, Clock, Filter } from "lucide-react";
import { toast } from "sonner";
import { useState, useMemo } from "react";
type StatusFilter = "all" | "pending" | "completed" | "overdue";
function getUrgency(deadline: Deadline): "red" | "amber" | "green" {
if (deadline.status === "completed") return "green";
const due = parseISO(deadline.due_date);
if (isPast(due)) return "red";
if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
return "green";
}
const urgencyConfig = {
red: {
bg: "bg-red-50",
border: "border-red-200",
badge: "bg-red-100 text-red-700",
dot: "bg-red-500",
label: "Uberschritten",
},
amber: {
bg: "bg-amber-50",
border: "border-amber-200",
badge: "bg-amber-100 text-amber-700",
dot: "bg-amber-500",
label: "Diese Woche",
},
green: {
bg: "bg-white",
border: "border-neutral-200",
badge: "bg-green-100 text-green-700",
dot: "bg-green-500",
label: "OK",
},
};
export function DeadlineList() {
const queryClient = useQueryClient();
const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
const [caseFilter, setCaseFilter] = useState<string>("all");
const { data: deadlines, isLoading } = useQuery({
queryKey: ["deadlines"],
queryFn: () => api.get<Deadline[]>("/api/deadlines"),
});
const { data: cases } = useQuery({
queryKey: ["cases"],
queryFn: () => api.get<Case[]>("/api/cases"),
});
const completeMutation = useMutation({
mutationFn: (id: string) =>
api.patch<Deadline>(`/api/deadlines/${id}/complete`),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["deadlines"] });
toast.success("Frist als erledigt markiert");
},
onError: () => {
toast.error("Fehler beim Abschliessen der Frist");
},
});
const caseMap = useMemo(() => {
const map = new Map<string, Case>();
cases?.forEach((c) => map.set(c.id, c));
return map;
}, [cases]);
const filtered = useMemo(() => {
if (!deadlines) return [];
return deadlines.filter((d) => {
if (statusFilter === "pending" && d.status !== "pending") return false;
if (statusFilter === "completed" && d.status !== "completed") return false;
if (statusFilter === "overdue") {
if (d.status === "completed") return false;
if (!isPast(parseISO(d.due_date))) return false;
}
if (caseFilter !== "all" && d.case_id !== caseFilter) return false;
return true;
});
}, [deadlines, statusFilter, caseFilter]);
const counts = useMemo(() => {
if (!deadlines) return { overdue: 0, thisWeek: 0, ok: 0 };
let overdue = 0, thisWeek = 0, ok = 0;
for (const d of deadlines) {
if (d.status === "completed") continue;
const urgency = getUrgency(d);
if (urgency === "red") overdue++;
else if (urgency === "amber") thisWeek++;
else ok++;
}
return { overdue, thisWeek, ok };
}, [deadlines]);
if (isLoading) {
return (
<div className="space-y-3">
{[1, 2, 3, 4, 5].map((i) => (
<div key={i} className="h-16 animate-pulse rounded-lg bg-neutral-100" />
))}
</div>
);
}
return (
<div className="space-y-4">
{/* Summary cards */}
<div className="grid grid-cols-3 gap-3">
<button
onClick={() => setStatusFilter(statusFilter === "overdue" ? "all" : "overdue")}
className={`rounded-lg border p-3 text-left transition-colors ${
statusFilter === "overdue"
? "border-red-300 bg-red-50"
: "border-neutral-200 bg-white hover:bg-neutral-50"
}`}
>
<div className="text-2xl font-semibold text-red-600">{counts.overdue}</div>
<div className="text-xs text-neutral-500">Uberschritten</div>
</button>
<button
onClick={() => setStatusFilter(statusFilter === "pending" ? "all" : "pending")}
className={`rounded-lg border p-3 text-left transition-colors ${
statusFilter === "pending"
? "border-amber-300 bg-amber-50"
: "border-neutral-200 bg-white hover:bg-neutral-50"
}`}
>
<div className="text-2xl font-semibold text-amber-600">{counts.thisWeek}</div>
<div className="text-xs text-neutral-500">Diese Woche</div>
</button>
<button
onClick={() => setStatusFilter("all")}
className={`rounded-lg border p-3 text-left transition-colors ${
statusFilter === "all"
? "border-green-300 bg-green-50"
: "border-neutral-200 bg-white hover:bg-neutral-50"
}`}
>
<div className="text-2xl font-semibold text-green-600">{counts.ok}</div>
<div className="text-xs text-neutral-500">OK</div>
</button>
</div>
{/* Filters */}
<div className="flex items-center gap-3">
<div className="flex items-center gap-1.5 text-sm text-neutral-500">
<Filter className="h-3.5 w-3.5" />
<span>Filter:</span>
</div>
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
>
<option value="all">Alle Status</option>
<option value="pending">Offen</option>
<option value="completed">Erledigt</option>
<option value="overdue">Uberschritten</option>
</select>
{cases && cases.length > 0 && (
<select
value={caseFilter}
onChange={(e) => setCaseFilter(e.target.value)}
className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
>
<option value="all">Alle Akten</option>
{cases.map((c) => (
<option key={c.id} value={c.id}>
{c.case_number} {c.title}
</option>
))}
</select>
)}
</div>
{/* Deadline list */}
{filtered.length === 0 ? (
<div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
<Clock className="mx-auto h-8 w-8 text-neutral-300" />
<p className="mt-2 text-sm text-neutral-500">Keine Fristen gefunden</p>
</div>
) : (
<div className="space-y-2">
{filtered.map((deadline) => {
const urgency = getUrgency(deadline);
const config = urgencyConfig[urgency];
const caseInfo = caseMap.get(deadline.case_id);
return (
<div
key={deadline.id}
className={`flex items-center gap-3 rounded-lg border px-4 py-3 ${config.bg} ${config.border}`}
>
<div className={`h-2.5 w-2.5 shrink-0 rounded-full ${config.dot}`} />
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="truncate text-sm font-medium text-neutral-900">
{deadline.title}
</span>
<span className={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${config.badge}`}>
{config.label}
</span>
{deadline.status === "completed" && (
<span className="shrink-0 rounded bg-neutral-100 px-1.5 py-0.5 text-xs font-medium text-neutral-500">
Erledigt
</span>
)}
</div>
<div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
<span>
{format(parseISO(deadline.due_date), "dd. MMM yyyy", { locale: de })}
</span>
{caseInfo && (
<>
<span>·</span>
<span className="truncate">
{caseInfo.case_number} {caseInfo.title}
</span>
</>
)}
{deadline.source !== "manual" && (
<>
<span>·</span>
<span>{deadline.source}</span>
</>
)}
</div>
</div>
{deadline.status !== "completed" && (
<button
onClick={() => completeMutation.mutate(deadline.id)}
disabled={completeMutation.isPending}
title="Als erledigt markieren"
className="shrink-0 rounded-md p-1.5 text-neutral-400 hover:bg-white hover:text-green-600"
>
<Check className="h-4 w-4" />
</button>
)}
</div>
);
})}
</div>
)}
</div>
);
}

View File

@@ -12,7 +12,7 @@ import {
} from "lucide-react";
const navigation = [
{ name: "Dashboard", href: "/", icon: LayoutDashboard },
{ name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
{ name: "Akten", href: "/akten", icon: FolderOpen },
{ name: "Fristen", href: "/fristen", icon: Clock },
{ name: "Termine", href: "/termine", icon: Calendar },
@@ -30,10 +30,7 @@ export function Sidebar() {
</div>
<nav className="flex-1 space-y-0.5 p-2">
{navigation.map((item) => {
const isActive =
item.href === "/"
? pathname === "/"
: pathname.startsWith(item.href);
const isActive = pathname.startsWith(item.href);
return (
<Link
key={item.href}

View File

@@ -69,6 +69,13 @@ class ApiClient {
});
}
patch<T>(path: string, body?: unknown) {
return this.request<T>(path, {
method: "PATCH",
body: body ? JSON.stringify(body) : undefined,
});
}
delete<T>(path: string) {
return this.request<T>(path, { method: "DELETE" });
}

View File

@@ -104,21 +104,52 @@ export interface Document {
updated_at: string;
}
export interface ExtractedDeadline {
title: string;
due_date: string | null;
export interface DeadlineRule {
id: string;
proceeding_type_id?: number;
parent_id?: string;
code?: string;
name: string;
description?: string;
primary_party?: string;
event_type?: string;
is_mandatory: boolean;
duration_value: number;
duration_unit: string;
timing: string;
trigger_event: string;
rule_reference: string;
confidence: number;
source_quote: string;
timing?: string;
rule_code?: string;
deadline_notes?: string;
sequence_order: number;
}
export interface ExtractionResponse {
deadlines: ExtractedDeadline[];
count: number;
export interface RuleTreeNode extends DeadlineRule {
children?: RuleTreeNode[];
}
export interface ProceedingType {
id: number;
code: string;
name: string;
description?: string;
jurisdiction?: string;
default_color: string;
sort_order: number;
is_active: boolean;
}
export interface CalculatedDeadline {
rule_code: string;
rule_id: string;
title: string;
due_date: string;
original_due_date: string;
was_adjusted: boolean;
}
export interface CalculateResponse {
proceeding_type: string;
trigger_event_date: string;
deadlines: CalculatedDeadline[];
}
export interface ApiError {