refactor(admin): split loeschfristen + dsb-portal page.tsx into colocated components
Split two oversized page files into _components/ directories following Next.js 15 conventions and the 500-LOC hard cap: - loeschfristen/page.tsx (2322 LOC -> 412 LOC orchestrator + 6 components) - dsb-portal/page.tsx (2068 LOC -> 135 LOC orchestrator + 9 components) All component files stay under 500 lines. Build verified. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
189
admin-compliance/app/sdk/dsb-portal/_components/AufgabenTab.tsx
Normal file
189
admin-compliance/app/sdk/dsb-portal/_components/AufgabenTab.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
import {
|
||||
Task, TASK_CATEGORIES, PRIORITY_LABELS, PRIORITY_COLORS,
|
||||
TASK_STATUS_LABELS, TASK_STATUS_COLORS, apiFetch, formatDate,
|
||||
} from './types'
|
||||
import {
|
||||
Skeleton, Modal, Badge, FormLabel, FormInput, FormTextarea,
|
||||
FormSelect, PrimaryButton, SecondaryButton, ErrorState, EmptyState,
|
||||
IconTask, IconPlus, IconCheck, IconCalendar,
|
||||
} from './ui-primitives'
|
||||
|
||||
export function AufgabenTab({
|
||||
assignmentId,
|
||||
addToast,
|
||||
}: {
|
||||
assignmentId: string
|
||||
addToast: (msg: string, type?: 'success' | 'error') => void
|
||||
}) {
|
||||
const [tasks, setTasks] = useState<Task[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all')
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const [newTitle, setNewTitle] = useState('')
|
||||
const [newDesc, setNewDesc] = useState('')
|
||||
const [newCategory, setNewCategory] = useState(TASK_CATEGORIES[0])
|
||||
const [newPriority, setNewPriority] = useState('medium')
|
||||
const [newDueDate, setNewDueDate] = useState('')
|
||||
|
||||
const fetchTasks = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const params = statusFilter !== 'all' ? `?status=${statusFilter}` : ''
|
||||
const data = await apiFetch<Task[]>(`/api/sdk/v1/dsb/assignments/${assignmentId}/tasks${params}`)
|
||||
setTasks(data)
|
||||
} catch (e: unknown) {
|
||||
setError(e instanceof Error ? e.message : 'Fehler beim Laden der Aufgaben')
|
||||
} finally { setLoading(false) }
|
||||
}, [assignmentId, statusFilter])
|
||||
|
||||
useEffect(() => { fetchTasks() }, [fetchTasks])
|
||||
|
||||
const handleCreateTask = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSaving(true)
|
||||
try {
|
||||
await apiFetch<Task>(`/api/sdk/v1/dsb/assignments/${assignmentId}/tasks`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
title: newTitle, description: newDesc, category: newCategory,
|
||||
priority: newPriority, due_date: newDueDate || null,
|
||||
}),
|
||||
})
|
||||
addToast('Aufgabe erstellt')
|
||||
setShowModal(false)
|
||||
setNewTitle(''); setNewDesc(''); setNewCategory(TASK_CATEGORIES[0])
|
||||
setNewPriority('medium'); setNewDueDate('')
|
||||
fetchTasks()
|
||||
} catch (e: unknown) {
|
||||
addToast(e instanceof Error ? e.message : 'Fehler', 'error')
|
||||
} finally { setSaving(false) }
|
||||
}
|
||||
|
||||
const handleCompleteTask = async (taskId: string) => {
|
||||
try {
|
||||
await apiFetch(`/api/sdk/v1/dsb/tasks/${taskId}/complete`, { method: 'POST' })
|
||||
addToast('Aufgabe abgeschlossen')
|
||||
fetchTasks()
|
||||
} catch (e: unknown) {
|
||||
addToast(e instanceof Error ? e.message : 'Fehler', 'error')
|
||||
}
|
||||
}
|
||||
|
||||
const statusFilters = [
|
||||
{ value: 'all', label: 'Alle' },
|
||||
{ value: 'open', label: 'Offen' },
|
||||
{ value: 'in_progress', label: 'In Bearbeitung' },
|
||||
{ value: 'completed', label: 'Erledigt' },
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{statusFilters.map((f) => (
|
||||
<button key={f.value} onClick={() => setStatusFilter(f.value)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
|
||||
statusFilter === f.value ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}>{f.label}</button>
|
||||
))}
|
||||
</div>
|
||||
<PrimaryButton onClick={() => setShowModal(true)} className="flex items-center gap-1.5">
|
||||
<IconPlus /> Neue Aufgabe
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{loading ? (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-16 rounded-lg" />)}
|
||||
</div>
|
||||
) : error ? (
|
||||
<ErrorState message={error} onRetry={fetchTasks} />
|
||||
) : tasks.length === 0 ? (
|
||||
<EmptyState icon={<IconTask className="w-7 h-7" />} title="Keine Aufgaben"
|
||||
description="Erstellen Sie eine neue Aufgabe um zu beginnen." />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{tasks.map((task) => (
|
||||
<div key={task.id} className="bg-white border border-gray-200 rounded-lg p-4 hover:border-purple-300 transition-colors">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h4 className={`font-medium ${task.status === 'completed' ? 'line-through text-gray-400' : 'text-gray-900'}`}>
|
||||
{task.title}
|
||||
</h4>
|
||||
<Badge label={task.category} className="bg-purple-50 text-purple-600 border-purple-200" />
|
||||
<Badge label={PRIORITY_LABELS[task.priority] || task.priority}
|
||||
className={PRIORITY_COLORS[task.priority] || 'bg-gray-100 text-gray-500'} />
|
||||
<Badge label={TASK_STATUS_LABELS[task.status] || task.status}
|
||||
className={TASK_STATUS_COLORS[task.status] || 'bg-gray-100 text-gray-500'} />
|
||||
</div>
|
||||
{task.description && <p className="text-sm text-gray-500 mt-1 line-clamp-2">{task.description}</p>}
|
||||
<div className="flex items-center gap-3 mt-2 text-xs text-gray-400">
|
||||
{task.due_date && (
|
||||
<span className="flex items-center gap-1"><IconCalendar className="w-3 h-3" />Frist: {formatDate(task.due_date)}</span>
|
||||
)}
|
||||
<span>Erstellt: {formatDate(task.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{task.status !== 'completed' && task.status !== 'cancelled' && (
|
||||
<button onClick={() => handleCompleteTask(task.id)} title="Aufgabe abschliessen"
|
||||
className="p-2 rounded-lg text-green-600 hover:bg-green-50 transition-colors flex-shrink-0">
|
||||
<IconCheck className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create task modal */}
|
||||
<Modal open={showModal} onClose={() => setShowModal(false)} title="Neue Aufgabe erstellen">
|
||||
<form onSubmit={handleCreateTask} className="space-y-4">
|
||||
<div>
|
||||
<FormLabel htmlFor="task-title">Titel *</FormLabel>
|
||||
<FormInput id="task-title" value={newTitle} onChange={setNewTitle} placeholder="Aufgabentitel" required />
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel htmlFor="task-desc">Beschreibung</FormLabel>
|
||||
<FormTextarea id="task-desc" value={newDesc} onChange={setNewDesc} placeholder="Beschreibung der Aufgabe..." />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<FormLabel htmlFor="task-cat">Kategorie</FormLabel>
|
||||
<FormSelect id="task-cat" value={newCategory} onChange={setNewCategory}
|
||||
options={TASK_CATEGORIES.map((c) => ({ value: c, label: c }))} />
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel htmlFor="task-prio">Prioritaet</FormLabel>
|
||||
<FormSelect id="task-prio" value={newPriority} onChange={setNewPriority}
|
||||
options={[
|
||||
{ value: 'urgent', label: 'Dringend' }, { value: 'high', label: 'Hoch' },
|
||||
{ value: 'medium', label: 'Mittel' }, { value: 'low', label: 'Niedrig' },
|
||||
]} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel htmlFor="task-due">Faelligkeitsdatum</FormLabel>
|
||||
<FormInput id="task-due" type="date" value={newDueDate} onChange={setNewDueDate} />
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<SecondaryButton onClick={() => setShowModal(false)}>Abbrechen</SecondaryButton>
|
||||
<PrimaryButton type="submit" disabled={saving || !newTitle.trim()}>
|
||||
{saving ? 'Erstelle...' : 'Aufgabe erstellen'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
126
admin-compliance/app/sdk/dsb-portal/_components/DetailView.tsx
Normal file
126
admin-compliance/app/sdk/dsb-portal/_components/DetailView.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { AssignmentOverview, ASSIGNMENT_STATUS_LABELS, ASSIGNMENT_STATUS_COLORS, formatDate } from './types'
|
||||
import {
|
||||
Badge, ComplianceBar, HoursBar,
|
||||
IconBack, IconTask, IconClock, IconMail, IconSettings, IconShield,
|
||||
} from './ui-primitives'
|
||||
import { AufgabenTab } from './AufgabenTab'
|
||||
import { ZeiterfassungTab } from './ZeiterfassungTab'
|
||||
import { KommunikationTab } from './KommunikationTab'
|
||||
import { EinstellungenTab } from './EinstellungenTab'
|
||||
|
||||
type DetailTab = 'aufgaben' | 'zeit' | 'kommunikation' | 'einstellungen'
|
||||
|
||||
export function DetailView({
|
||||
assignment,
|
||||
onBack,
|
||||
onUpdate,
|
||||
addToast,
|
||||
}: {
|
||||
assignment: AssignmentOverview
|
||||
onBack: () => void
|
||||
onUpdate: () => void
|
||||
addToast: (msg: string, type?: 'success' | 'error') => void
|
||||
}) {
|
||||
const [activeTab, setActiveTab] = useState<DetailTab>('aufgaben')
|
||||
|
||||
const tabs: { id: DetailTab; label: string; icon: React.ReactNode }[] = [
|
||||
{ id: 'aufgaben', label: 'Aufgaben', icon: <IconTask className="w-4 h-4" /> },
|
||||
{ id: 'zeit', label: 'Zeiterfassung', icon: <IconClock className="w-4 h-4" /> },
|
||||
{ id: 'kommunikation', label: 'Kommunikation', icon: <IconMail className="w-4 h-4" /> },
|
||||
{ id: 'einstellungen', label: 'Einstellungen', icon: <IconSettings className="w-4 h-4" /> },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Back + Header */}
|
||||
<div>
|
||||
<button onClick={onBack}
|
||||
className="flex items-center gap-2 text-sm text-purple-600 hover:text-purple-800 font-medium mb-4 transition-colors">
|
||||
<IconBack className="w-4 h-4" /> Zurueck zur Uebersicht
|
||||
</button>
|
||||
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600">
|
||||
<IconShield className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-gray-900">{assignment.tenant_name}</h2>
|
||||
<p className="text-sm text-gray-400 font-mono">{assignment.tenant_slug}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
label={ASSIGNMENT_STATUS_LABELS[assignment.status] || assignment.status}
|
||||
className={ASSIGNMENT_STATUS_COLORS[assignment.status] || 'bg-gray-100 text-gray-600'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meta info */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-5 pt-5 border-t border-gray-100">
|
||||
<div>
|
||||
<p className="text-xs text-gray-400">Vertragsbeginn</p>
|
||||
<p className="text-sm font-medium text-gray-700">{formatDate(assignment.contract_start)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-400">Vertragsende</p>
|
||||
<p className="text-sm font-medium text-gray-700">
|
||||
{assignment.contract_end ? formatDate(assignment.contract_end) : 'Unbefristet'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-400">Compliance-Score</p>
|
||||
<div className="mt-1"><ComplianceBar score={assignment.compliance_score} /></div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-400">Stunden diesen Monat</p>
|
||||
<div className="mt-1"><HoursBar used={assignment.hours_this_month} budget={assignment.hours_budget} /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{assignment.notes && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-100">
|
||||
<p className="text-xs text-gray-400 mb-1">Anmerkungen</p>
|
||||
<p className="text-sm text-gray-600">{assignment.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-gray-200">
|
||||
<nav className="flex gap-0 -mb-px overflow-x-auto">
|
||||
{tabs.map((tab) => (
|
||||
<button key={tab.id} onClick={() => setActiveTab(tab.id)}
|
||||
className={`flex items-center gap-2 px-5 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
|
||||
activeTab === tab.id
|
||||
? 'border-purple-600 text-purple-700'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}>
|
||||
{tab.icon} {tab.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Tab content */}
|
||||
<div>
|
||||
{activeTab === 'aufgaben' && <AufgabenTab assignmentId={assignment.id} addToast={addToast} />}
|
||||
{activeTab === 'zeit' && (
|
||||
<ZeiterfassungTab assignmentId={assignment.id} monthlyBudget={assignment.monthly_hours_budget} addToast={addToast} />
|
||||
)}
|
||||
{activeTab === 'kommunikation' && <KommunikationTab assignmentId={assignment.id} addToast={addToast} />}
|
||||
{activeTab === 'einstellungen' && (
|
||||
<EinstellungenTab assignment={assignment} onUpdate={onUpdate} addToast={addToast} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { AssignmentOverview, ASSIGNMENT_STATUS_LABELS, apiFetch } from './types'
|
||||
import { FormLabel, FormInput, FormTextarea, PrimaryButton } from './ui-primitives'
|
||||
|
||||
export function EinstellungenTab({
|
||||
assignment,
|
||||
onUpdate,
|
||||
addToast,
|
||||
}: {
|
||||
assignment: AssignmentOverview
|
||||
onUpdate: () => void
|
||||
addToast: (msg: string, type?: 'success' | 'error') => void
|
||||
}) {
|
||||
const [status, setStatus] = useState(assignment.status)
|
||||
const [budget, setBudget] = useState(String(assignment.monthly_hours_budget))
|
||||
const [notes, setNotes] = useState(assignment.notes || '')
|
||||
const [contractStart, setContractStart] = useState(assignment.contract_start?.slice(0, 10) || '')
|
||||
const [contractEnd, setContractEnd] = useState(assignment.contract_end?.slice(0, 10) || '')
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true)
|
||||
try {
|
||||
await apiFetch(`/api/sdk/v1/dsb/assignments/${assignment.id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({
|
||||
status,
|
||||
monthly_hours_budget: parseFloat(budget) || 0,
|
||||
notes,
|
||||
contract_start: contractStart || null,
|
||||
contract_end: contractEnd || null,
|
||||
}),
|
||||
})
|
||||
addToast('Einstellungen gespeichert')
|
||||
onUpdate()
|
||||
} catch (e: unknown) {
|
||||
addToast(e instanceof Error ? e.message : 'Fehler beim Speichern', 'error')
|
||||
} finally { setSaving(false) }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
{/* Status */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-5">
|
||||
<h4 className="text-sm font-semibold text-gray-700 mb-3">Status</h4>
|
||||
<div className="flex gap-2">
|
||||
{(['active', 'paused', 'terminated'] as const).map((s) => (
|
||||
<button key={s} onClick={() => setStatus(s)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${
|
||||
status === s
|
||||
? s === 'active' ? 'bg-green-100 text-green-700 border-green-300'
|
||||
: s === 'paused' ? 'bg-yellow-100 text-yellow-700 border-yellow-300'
|
||||
: 'bg-red-100 text-red-700 border-red-300'
|
||||
: 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50'
|
||||
}`}>
|
||||
{ASSIGNMENT_STATUS_LABELS[s]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contract period */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-5">
|
||||
<h4 className="text-sm font-semibold text-gray-700 mb-3">Vertragszeitraum</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<FormLabel htmlFor="s-start">Vertragsbeginn</FormLabel>
|
||||
<FormInput id="s-start" type="date" value={contractStart} onChange={setContractStart} />
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel htmlFor="s-end">Vertragsende</FormLabel>
|
||||
<FormInput id="s-end" type="date" value={contractEnd} onChange={setContractEnd} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Budget */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-5">
|
||||
<h4 className="text-sm font-semibold text-gray-700 mb-3">Monatliches Stundenbudget</h4>
|
||||
<div className="max-w-xs">
|
||||
<FormInput type="number" value={budget} onChange={setBudget} min={0} max={999} step={1} />
|
||||
<p className="text-xs text-gray-400 mt-1">Stunden pro Monat</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-5">
|
||||
<h4 className="text-sm font-semibold text-gray-700 mb-3">Anmerkungen</h4>
|
||||
<FormTextarea value={notes} onChange={setNotes} placeholder="Interne Anmerkungen zum Mandat..." rows={4} />
|
||||
</div>
|
||||
|
||||
{/* Save */}
|
||||
<div className="flex justify-end">
|
||||
<PrimaryButton onClick={handleSave} disabled={saving}>
|
||||
{saving ? 'Speichere...' : 'Einstellungen speichern'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
import { Communication, COMM_CHANNELS, apiFetch, formatDateTime } from './types'
|
||||
import {
|
||||
Skeleton, Modal, Badge, FormLabel, FormInput, FormTextarea,
|
||||
FormSelect, PrimaryButton, SecondaryButton, ErrorState, EmptyState,
|
||||
IconMail, IconPlus, IconInbound, IconOutbound,
|
||||
} from './ui-primitives'
|
||||
|
||||
const CHANNEL_COLORS: Record<string, string> = {
|
||||
'E-Mail': 'bg-blue-100 text-blue-700 border-blue-200',
|
||||
'Telefon': 'bg-green-100 text-green-700 border-green-200',
|
||||
'Besprechung': 'bg-purple-100 text-purple-700 border-purple-200',
|
||||
'Portal': 'bg-indigo-100 text-indigo-700 border-indigo-200',
|
||||
'Brief': 'bg-orange-100 text-orange-700 border-orange-200',
|
||||
}
|
||||
|
||||
export function KommunikationTab({
|
||||
assignmentId,
|
||||
addToast,
|
||||
}: {
|
||||
assignmentId: string
|
||||
addToast: (msg: string, type?: 'success' | 'error') => void
|
||||
}) {
|
||||
const [comms, setComms] = useState<Communication[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const [formDirection, setFormDirection] = useState('outbound')
|
||||
const [formChannel, setFormChannel] = useState(COMM_CHANNELS[0])
|
||||
const [formSubject, setFormSubject] = useState('')
|
||||
const [formContent, setFormContent] = useState('')
|
||||
const [formParticipants, setFormParticipants] = useState('')
|
||||
|
||||
const fetchComms = useCallback(async () => {
|
||||
setLoading(true); setError('')
|
||||
try {
|
||||
const data = await apiFetch<Communication[]>(
|
||||
`/api/sdk/v1/dsb/assignments/${assignmentId}/communications`,
|
||||
)
|
||||
setComms(data)
|
||||
} catch (e: unknown) {
|
||||
setError(e instanceof Error ? e.message : 'Fehler beim Laden der Kommunikation')
|
||||
} finally { setLoading(false) }
|
||||
}, [assignmentId])
|
||||
|
||||
useEffect(() => { fetchComms() }, [fetchComms])
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault(); setSaving(true)
|
||||
try {
|
||||
await apiFetch(`/api/sdk/v1/dsb/assignments/${assignmentId}/communications`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
direction: formDirection, channel: formChannel,
|
||||
subject: formSubject, content: formContent, participants: formParticipants,
|
||||
}),
|
||||
})
|
||||
addToast('Kommunikation erfasst'); setShowModal(false)
|
||||
setFormDirection('outbound'); setFormChannel(COMM_CHANNELS[0])
|
||||
setFormSubject(''); setFormContent(''); setFormParticipants('')
|
||||
fetchComms()
|
||||
} catch (e: unknown) {
|
||||
addToast(e instanceof Error ? e.message : 'Fehler', 'error')
|
||||
} finally { setSaving(false) }
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<p className="text-sm text-gray-500">Kommunikations-Protokoll</p>
|
||||
<PrimaryButton onClick={() => setShowModal(true)} className="flex items-center gap-1.5">
|
||||
<IconPlus /> Kommunikation erfassen
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-20 rounded-lg" />)}
|
||||
</div>
|
||||
) : error ? (
|
||||
<ErrorState message={error} onRetry={fetchComms} />
|
||||
) : comms.length === 0 ? (
|
||||
<EmptyState icon={<IconMail className="w-7 h-7" />} title="Keine Kommunikation"
|
||||
description="Erfassen Sie die erste Kommunikation mit dem Mandanten." />
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{comms.map((comm) => (
|
||||
<div key={comm.id} className="bg-white border border-gray-200 rounded-xl p-4 hover:border-purple-200 transition-colors">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||||
comm.direction === 'inbound' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'
|
||||
}`}>
|
||||
{comm.direction === 'inbound' ? <IconInbound className="w-4 h-4" /> : <IconOutbound className="w-4 h-4" />}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium text-gray-900 text-sm">{comm.subject}</span>
|
||||
<Badge label={comm.channel}
|
||||
className={CHANNEL_COLORS[comm.channel] || 'bg-gray-100 text-gray-600 border-gray-200'} />
|
||||
<span className="text-xs text-gray-400">
|
||||
{comm.direction === 'inbound' ? 'Eingehend' : 'Ausgehend'}
|
||||
</span>
|
||||
</div>
|
||||
{comm.content && <p className="text-sm text-gray-500 mt-1 line-clamp-2">{comm.content}</p>}
|
||||
<div className="flex items-center gap-3 mt-2 text-xs text-gray-400">
|
||||
<span>{formatDateTime(comm.created_at)}</span>
|
||||
{comm.participants && <span>Teilnehmer: {comm.participants}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create communication modal */}
|
||||
<Modal open={showModal} onClose={() => setShowModal(false)} title="Kommunikation erfassen">
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<FormLabel htmlFor="comm-dir">Richtung</FormLabel>
|
||||
<FormSelect id="comm-dir" value={formDirection} onChange={setFormDirection}
|
||||
options={[{ value: 'outbound', label: 'Ausgehend' }, { value: 'inbound', label: 'Eingehend' }]} />
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel htmlFor="comm-ch">Kanal</FormLabel>
|
||||
<FormSelect id="comm-ch" value={formChannel} onChange={setFormChannel}
|
||||
options={COMM_CHANNELS.map((c) => ({ value: c, label: c }))} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel htmlFor="comm-subj">Betreff *</FormLabel>
|
||||
<FormInput id="comm-subj" value={formSubject} onChange={setFormSubject}
|
||||
placeholder="Betreff der Kommunikation" required />
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel htmlFor="comm-content">Inhalt</FormLabel>
|
||||
<FormTextarea id="comm-content" value={formContent} onChange={setFormContent}
|
||||
placeholder="Inhalt / Zusammenfassung..." rows={4} />
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel htmlFor="comm-parts">Teilnehmer</FormLabel>
|
||||
<FormInput id="comm-parts" value={formParticipants} onChange={setFormParticipants}
|
||||
placeholder="z.B. Herr Mueller, Frau Schmidt" />
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<SecondaryButton onClick={() => setShowModal(false)}>Abbrechen</SecondaryButton>
|
||||
<PrimaryButton type="submit" disabled={saving || !formSubject.trim()}>
|
||||
{saving ? 'Speichere...' : 'Kommunikation erfassen'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import { AssignmentOverview, ASSIGNMENT_STATUS_LABELS, ASSIGNMENT_STATUS_COLORS, formatDate } from './types'
|
||||
import { Badge, ComplianceBar, HoursBar, IconTask, IconCalendar } from './ui-primitives'
|
||||
|
||||
export function MandantCard({
|
||||
assignment,
|
||||
onClick,
|
||||
}: {
|
||||
assignment: AssignmentOverview
|
||||
onClick: () => void
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className="bg-white rounded-xl border border-gray-200 p-5 hover:border-purple-400 hover:shadow-lg cursor-pointer transition-all group"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="min-w-0">
|
||||
<h3 className="font-semibold text-gray-900 truncate group-hover:text-purple-700 transition-colors">
|
||||
{assignment.tenant_name}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-400 font-mono">{assignment.tenant_slug}</p>
|
||||
</div>
|
||||
<Badge
|
||||
label={ASSIGNMENT_STATUS_LABELS[assignment.status] || assignment.status}
|
||||
className={ASSIGNMENT_STATUS_COLORS[assignment.status] || 'bg-gray-100 text-gray-600'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Compliance Score */}
|
||||
<div className="mb-3">
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 mb-1">
|
||||
<span>Compliance-Score</span>
|
||||
</div>
|
||||
<ComplianceBar score={assignment.compliance_score} />
|
||||
</div>
|
||||
|
||||
{/* Hours */}
|
||||
<div className="mb-3">
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 mb-1">
|
||||
<span>Stunden diesen Monat</span>
|
||||
</div>
|
||||
<HoursBar used={assignment.hours_this_month} budget={assignment.hours_budget} />
|
||||
</div>
|
||||
|
||||
{/* Footer: Tasks */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-gray-100">
|
||||
<div className="flex items-center gap-1 text-sm text-gray-600">
|
||||
<IconTask className="w-4 h-4" />
|
||||
<span>{assignment.open_task_count} offene Aufgaben</span>
|
||||
</div>
|
||||
{assignment.urgent_task_count > 0 && (
|
||||
<Badge label={`${assignment.urgent_task_count} dringend`} className="bg-red-100 text-red-700 border-red-200" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Next deadline */}
|
||||
{assignment.next_deadline && (
|
||||
<div className="flex items-center gap-1 mt-2 text-xs text-gray-400">
|
||||
<IconCalendar className="w-3 h-3" />
|
||||
<span>Naechste Frist: {formatDate(assignment.next_deadline)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
import {
|
||||
HourEntry, HoursSummary, HOUR_CATEGORIES,
|
||||
apiFetch, formatDate, currentMonth, monthLabel, prevMonth, nextMonth,
|
||||
} from './types'
|
||||
import {
|
||||
Skeleton, Modal, Badge, HoursBar, FormLabel, FormInput,
|
||||
FormTextarea, FormSelect, PrimaryButton, SecondaryButton,
|
||||
ErrorState, EmptyState, IconClock, IconPlus,
|
||||
} from './ui-primitives'
|
||||
|
||||
export function ZeiterfassungTab({
|
||||
assignmentId,
|
||||
monthlyBudget,
|
||||
addToast,
|
||||
}: {
|
||||
assignmentId: string
|
||||
monthlyBudget: number
|
||||
addToast: (msg: string, type?: 'success' | 'error') => void
|
||||
}) {
|
||||
const [hours, setHours] = useState<HourEntry[]>([])
|
||||
const [summary, setSummary] = useState<HoursSummary | null>(null)
|
||||
const [month, setMonth] = useState(currentMonth())
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const [formDate, setFormDate] = useState(new Date().toISOString().slice(0, 10))
|
||||
const [formHours, setFormHours] = useState('1')
|
||||
const [formCategory, setFormCategory] = useState(HOUR_CATEGORIES[0])
|
||||
const [formDesc, setFormDesc] = useState('')
|
||||
const [formBillable, setFormBillable] = useState(true)
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true); setError('')
|
||||
try {
|
||||
const [hoursData, summaryData] = await Promise.all([
|
||||
apiFetch<HourEntry[]>(`/api/sdk/v1/dsb/assignments/${assignmentId}/hours?month=${month}`),
|
||||
apiFetch<HoursSummary>(`/api/sdk/v1/dsb/assignments/${assignmentId}/hours/summary?month=${month}`),
|
||||
])
|
||||
setHours(hoursData); setSummary(summaryData)
|
||||
} catch (e: unknown) {
|
||||
setError(e instanceof Error ? e.message : 'Fehler beim Laden der Zeiterfassung')
|
||||
} finally { setLoading(false) }
|
||||
}, [assignmentId, month])
|
||||
|
||||
useEffect(() => { fetchData() }, [fetchData])
|
||||
|
||||
const handleLogHours = async (e: React.FormEvent) => {
|
||||
e.preventDefault(); setSaving(true)
|
||||
try {
|
||||
await apiFetch(`/api/sdk/v1/dsb/assignments/${assignmentId}/hours`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
date: formDate, hours: parseFloat(formHours),
|
||||
category: formCategory, description: formDesc, billable: formBillable,
|
||||
}),
|
||||
})
|
||||
addToast('Stunden erfasst'); setShowModal(false)
|
||||
setFormDate(new Date().toISOString().slice(0, 10))
|
||||
setFormHours('1'); setFormCategory(HOUR_CATEGORIES[0])
|
||||
setFormDesc(''); setFormBillable(true); fetchData()
|
||||
} catch (e: unknown) {
|
||||
addToast(e instanceof Error ? e.message : 'Fehler', 'error')
|
||||
} finally { setSaving(false) }
|
||||
}
|
||||
|
||||
const maxCatHours = summary ? Math.max(...Object.values(summary.by_category), 1) : 1
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={() => setMonth(prevMonth(month))}
|
||||
className="p-2 rounded-lg hover:bg-gray-100 text-gray-500 transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<span className="text-sm font-medium text-gray-700 min-w-[140px] text-center">{monthLabel(month)}</span>
|
||||
<button onClick={() => setMonth(nextMonth(month))}
|
||||
className="p-2 rounded-lg hover:bg-gray-100 text-gray-500 transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<PrimaryButton onClick={() => setShowModal(true)} className="flex items-center gap-1.5">
|
||||
<IconPlus /> Stunden erfassen
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-24 rounded-lg" />
|
||||
<Skeleton className="h-40 rounded-lg" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<ErrorState message={error} onRetry={fetchData} />
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* Summary cards */}
|
||||
{summary && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div className="bg-purple-50 rounded-xl p-4 border border-purple-200">
|
||||
<p className="text-xs text-purple-600 font-medium">Gesamt-Stunden</p>
|
||||
<p className="text-2xl font-bold text-purple-900 mt-1">{summary.total_hours}h</p>
|
||||
<div className="mt-2"><HoursBar used={summary.total_hours} budget={monthlyBudget} /></div>
|
||||
</div>
|
||||
<div className="bg-green-50 rounded-xl p-4 border border-green-200">
|
||||
<p className="text-xs text-green-600 font-medium">Abrechnungsfaehig</p>
|
||||
<p className="text-2xl font-bold text-green-900 mt-1">{summary.billable_hours}h</p>
|
||||
<p className="text-xs text-green-500 mt-1">
|
||||
{summary.total_hours > 0
|
||||
? `${Math.round((summary.billable_hours / summary.total_hours) * 100)}% der Gesamtstunden`
|
||||
: 'Keine Stunden erfasst'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
|
||||
<p className="text-xs text-gray-500 font-medium">Budget verbleibend</p>
|
||||
<p className="text-2xl font-bold text-gray-900 mt-1">{Math.max(monthlyBudget - summary.total_hours, 0)}h</p>
|
||||
<p className="text-xs text-gray-400 mt-1">von {monthlyBudget}h Monatsbudget</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hours by category */}
|
||||
{summary && Object.keys(summary.by_category).length > 0 && (
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-5">
|
||||
<h4 className="text-sm font-semibold text-gray-700 mb-3">Stunden nach Kategorie</h4>
|
||||
<div className="space-y-2.5">
|
||||
{Object.entries(summary.by_category).sort(([, a], [, b]) => b - a).map(([cat, h]) => (
|
||||
<div key={cat} className="flex items-center gap-3">
|
||||
<span className="text-xs text-gray-500 min-w-[120px] truncate">{cat}</span>
|
||||
<div className="flex-1 h-5 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-purple-400 rounded-full transition-all"
|
||||
style={{ width: `${(h / maxCatHours) * 100}%` }} />
|
||||
</div>
|
||||
<span className="text-xs font-medium text-gray-700 min-w-[40px] text-right">{h}h</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hours table */}
|
||||
{hours.length === 0 ? (
|
||||
<EmptyState icon={<IconClock className="w-7 h-7" />} title="Keine Stunden erfasst"
|
||||
description={`Fuer ${monthLabel(month)} wurden noch keine Stunden erfasst.`} />
|
||||
) : (
|
||||
<div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-200">
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Datum</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Stunden</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Kategorie</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Beschreibung</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Abrechenbar</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{hours.map((entry) => (
|
||||
<tr key={entry.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-4 py-3 text-gray-700 whitespace-nowrap">{formatDate(entry.date)}</td>
|
||||
<td className="px-4 py-3 font-medium text-gray-900">{entry.hours}h</td>
|
||||
<td className="px-4 py-3">
|
||||
<Badge label={entry.category} className="bg-purple-50 text-purple-600 border-purple-200" />
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-600 max-w-xs truncate">{entry.description || '-'}</td>
|
||||
<td className="px-4 py-3">
|
||||
{entry.billable
|
||||
? <span className="text-green-600 font-medium">Ja</span>
|
||||
: <span className="text-gray-400">Nein</span>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Log hours modal */}
|
||||
<Modal open={showModal} onClose={() => setShowModal(false)} title="Stunden erfassen">
|
||||
<form onSubmit={handleLogHours} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<FormLabel htmlFor="h-date">Datum *</FormLabel>
|
||||
<FormInput id="h-date" type="date" value={formDate} onChange={setFormDate} required />
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel htmlFor="h-hours">Stunden *</FormLabel>
|
||||
<FormInput id="h-hours" type="number" value={formHours} onChange={setFormHours}
|
||||
min={0.25} max={24} step={0.25} required />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel htmlFor="h-cat">Kategorie</FormLabel>
|
||||
<FormSelect id="h-cat" value={formCategory} onChange={setFormCategory}
|
||||
options={HOUR_CATEGORIES.map((c) => ({ value: c, label: c }))} />
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel htmlFor="h-desc">Beschreibung</FormLabel>
|
||||
<FormTextarea id="h-desc" value={formDesc} onChange={setFormDesc} placeholder="Was wurde gemacht..." />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input id="h-billable" type="checkbox" checked={formBillable}
|
||||
onChange={(e) => setFormBillable(e.target.checked)}
|
||||
className="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
|
||||
<label htmlFor="h-billable" className="text-sm text-gray-700">Abrechnungsfaehig</label>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<SecondaryButton onClick={() => setShowModal(false)}>Abbrechen</SecondaryButton>
|
||||
<PrimaryButton type="submit" disabled={saving}>
|
||||
{saving ? 'Erfasse...' : 'Stunden erfassen'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
199
admin-compliance/app/sdk/dsb-portal/_components/types.ts
Normal file
199
admin-compliance/app/sdk/dsb-portal/_components/types.ts
Normal file
@@ -0,0 +1,199 @@
|
||||
// =============================================================================
|
||||
// TYPES
|
||||
// =============================================================================
|
||||
|
||||
export interface AssignmentOverview {
|
||||
id: string
|
||||
dsb_user_id: string
|
||||
tenant_id: string
|
||||
tenant_name: string
|
||||
tenant_slug: string
|
||||
status: string
|
||||
contract_start: string
|
||||
contract_end: string | null
|
||||
monthly_hours_budget: number
|
||||
notes: string
|
||||
compliance_score: number
|
||||
hours_this_month: number
|
||||
hours_budget: number
|
||||
open_task_count: number
|
||||
urgent_task_count: number
|
||||
next_deadline: string | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface DSBDashboard {
|
||||
assignments: AssignmentOverview[]
|
||||
total_assignments: number
|
||||
active_assignments: number
|
||||
total_hours_this_month: number
|
||||
open_tasks: number
|
||||
urgent_tasks: number
|
||||
generated_at: string
|
||||
}
|
||||
|
||||
export interface HourEntry {
|
||||
id: string
|
||||
assignment_id: string
|
||||
date: string
|
||||
hours: number
|
||||
category: string
|
||||
description: string
|
||||
billable: boolean
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface Task {
|
||||
id: string
|
||||
assignment_id: string
|
||||
title: string
|
||||
description: string
|
||||
category: string
|
||||
priority: string
|
||||
status: string
|
||||
due_date: string | null
|
||||
completed_at: string | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface Communication {
|
||||
id: string
|
||||
assignment_id: string
|
||||
direction: string
|
||||
channel: string
|
||||
subject: string
|
||||
content: string
|
||||
participants: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface HoursSummary {
|
||||
total_hours: number
|
||||
billable_hours: number
|
||||
by_category: Record<string, number>
|
||||
period: string
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// CONSTANTS
|
||||
// =============================================================================
|
||||
|
||||
export const DSB_USER_ID = '00000000-0000-0000-0000-000000000001'
|
||||
|
||||
export const TASK_CATEGORIES = [
|
||||
'DSFA-Pruefung', 'Betroffenenanfrage', 'Vorfall-Pruefung',
|
||||
'Audit-Vorbereitung', 'Richtlinien-Pruefung', 'Schulung',
|
||||
'Beratung', 'Sonstiges',
|
||||
]
|
||||
|
||||
export const HOUR_CATEGORIES = [
|
||||
'DSFA-Pruefung', 'Beratung', 'Audit', 'Schulung',
|
||||
'Vorfallreaktion', 'Dokumentation', 'Besprechung', 'Sonstiges',
|
||||
]
|
||||
|
||||
export const COMM_CHANNELS = ['E-Mail', 'Telefon', 'Besprechung', 'Portal', 'Brief']
|
||||
|
||||
export const PRIORITY_LABELS: Record<string, string> = {
|
||||
urgent: 'Dringend', high: 'Hoch', medium: 'Mittel', low: 'Niedrig',
|
||||
}
|
||||
|
||||
export const PRIORITY_COLORS: Record<string, string> = {
|
||||
urgent: 'bg-red-100 text-red-700 border-red-200',
|
||||
high: 'bg-orange-100 text-orange-700 border-orange-200',
|
||||
medium: 'bg-blue-100 text-blue-700 border-blue-200',
|
||||
low: 'bg-gray-100 text-gray-500 border-gray-200',
|
||||
}
|
||||
|
||||
export const TASK_STATUS_LABELS: Record<string, string> = {
|
||||
open: 'Offen', in_progress: 'In Bearbeitung', waiting: 'Wartend',
|
||||
completed: 'Erledigt', cancelled: 'Abgebrochen',
|
||||
}
|
||||
|
||||
export const TASK_STATUS_COLORS: Record<string, string> = {
|
||||
open: 'bg-blue-100 text-blue-700',
|
||||
in_progress: 'bg-yellow-100 text-yellow-700',
|
||||
waiting: 'bg-orange-100 text-orange-700',
|
||||
completed: 'bg-green-100 text-green-700',
|
||||
cancelled: 'bg-gray-100 text-gray-500',
|
||||
}
|
||||
|
||||
export const ASSIGNMENT_STATUS_COLORS: Record<string, string> = {
|
||||
active: 'bg-green-100 text-green-700 border-green-300',
|
||||
paused: 'bg-yellow-100 text-yellow-700 border-yellow-300',
|
||||
terminated: 'bg-red-100 text-red-700 border-red-300',
|
||||
}
|
||||
|
||||
export const ASSIGNMENT_STATUS_LABELS: Record<string, string> = {
|
||||
active: 'Aktiv', paused: 'Pausiert', terminated: 'Beendet',
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// API HELPERS
|
||||
// =============================================================================
|
||||
|
||||
export async function apiFetch<T>(url: string, options?: RequestInit): Promise<T> {
|
||||
const res = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-User-ID': DSB_USER_ID,
|
||||
...(options?.headers || {}),
|
||||
},
|
||||
})
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => '')
|
||||
throw new Error(`API Error ${res.status}: ${text || res.statusText}`)
|
||||
}
|
||||
return res.json()
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// DATE HELPERS
|
||||
// =============================================================================
|
||||
|
||||
export function formatDate(dateStr: string | null): string {
|
||||
if (!dateStr) return '-'
|
||||
try {
|
||||
return new Date(dateStr).toLocaleDateString('de-DE', {
|
||||
day: '2-digit', month: '2-digit', year: 'numeric',
|
||||
})
|
||||
} catch { return dateStr }
|
||||
}
|
||||
|
||||
export function formatDateTime(dateStr: string | null): string {
|
||||
if (!dateStr) return '-'
|
||||
try {
|
||||
return new Date(dateStr).toLocaleDateString('de-DE', {
|
||||
day: '2-digit', month: '2-digit', year: 'numeric',
|
||||
hour: '2-digit', minute: '2-digit',
|
||||
})
|
||||
} catch { return dateStr }
|
||||
}
|
||||
|
||||
export function currentMonth(): string {
|
||||
const d = new Date()
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
export function monthLabel(ym: string): string {
|
||||
const [y, m] = ym.split('-')
|
||||
const months = [
|
||||
'Januar', 'Februar', 'Maerz', 'April', 'Mai', 'Juni',
|
||||
'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember',
|
||||
]
|
||||
return `${months[parseInt(m, 10) - 1]} ${y}`
|
||||
}
|
||||
|
||||
export function prevMonth(ym: string): string {
|
||||
const [y, m] = ym.split('-').map(Number)
|
||||
if (m === 1) return `${y - 1}-12`
|
||||
return `${y}-${String(m - 1).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
export function nextMonth(ym: string): string {
|
||||
const [y, m] = ym.split('-').map(Number)
|
||||
if (m === 12) return `${y + 1}-01`
|
||||
return `${y}-${String(m + 1).padStart(2, '0')}`
|
||||
}
|
||||
@@ -0,0 +1,367 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect, useCallback, useRef } from 'react'
|
||||
|
||||
// =============================================================================
|
||||
// TOAST
|
||||
// =============================================================================
|
||||
|
||||
export interface ToastMessage {
|
||||
id: number
|
||||
message: string
|
||||
type: 'success' | 'error'
|
||||
}
|
||||
|
||||
let toastIdCounter = 0
|
||||
|
||||
export function useToast() {
|
||||
const [toasts, setToasts] = useState<ToastMessage[]>([])
|
||||
|
||||
const addToast = useCallback((message: string, type: 'success' | 'error' = 'success') => {
|
||||
const id = ++toastIdCounter
|
||||
setToasts((prev) => [...prev, { id, message, type }])
|
||||
setTimeout(() => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id))
|
||||
}, 3500)
|
||||
}, [])
|
||||
|
||||
return { toasts, addToast }
|
||||
}
|
||||
|
||||
export function ToastContainer({ toasts }: { toasts: ToastMessage[] }) {
|
||||
if (toasts.length === 0) return null
|
||||
return (
|
||||
<div className="fixed top-4 right-4 z-[100] flex flex-col gap-2">
|
||||
{toasts.map((t) => (
|
||||
<div
|
||||
key={t.id}
|
||||
className={`px-5 py-3 rounded-lg shadow-lg text-sm font-medium text-white transition-all animate-slide-in ${
|
||||
t.type === 'success' ? 'bg-green-600' : 'bg-red-600'
|
||||
}`}
|
||||
>
|
||||
{t.message}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// LOADING SKELETON
|
||||
// =============================================================================
|
||||
|
||||
export function Skeleton({ className = '' }: { className?: string }) {
|
||||
return <div className={`animate-pulse bg-gray-200 rounded ${className}`} />
|
||||
}
|
||||
|
||||
export function DashboardSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-28 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-64 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// MODAL
|
||||
// =============================================================================
|
||||
|
||||
export function Modal({
|
||||
open, onClose, title, children, maxWidth = 'max-w-lg',
|
||||
}: {
|
||||
open: boolean; onClose: () => void; title: string
|
||||
children: React.ReactNode; maxWidth?: string
|
||||
}) {
|
||||
const overlayRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const handleEsc = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
|
||||
document.addEventListener('keydown', handleEsc)
|
||||
return () => document.removeEventListener('keydown', handleEsc)
|
||||
}, [open, onClose])
|
||||
|
||||
if (!open) return null
|
||||
|
||||
return (
|
||||
<div ref={overlayRef}
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
|
||||
onClick={(e) => { if (e.target === overlayRef.current) onClose() }}>
|
||||
<div className={`bg-white rounded-2xl shadow-2xl w-full ${maxWidth} mx-4 overflow-hidden`}>
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 bg-purple-50">
|
||||
<h3 className="text-lg font-semibold text-purple-900">{title}</h3>
|
||||
<button onClick={onClose} className="p-1 rounded-lg hover:bg-purple-100 transition-colors text-purple-600">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="px-6 py-4 max-h-[70vh] overflow-y-auto">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// STAT CARD, PROGRESS BARS, BADGE
|
||||
// =============================================================================
|
||||
|
||||
export function StatCard({
|
||||
title, value, icon, accent = false,
|
||||
}: {
|
||||
title: string; value: string | number; icon: React.ReactNode; accent?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div className={`rounded-xl border p-5 transition-all ${
|
||||
accent ? 'bg-red-50 border-red-200' : 'bg-white border-gray-200 hover:border-purple-300'
|
||||
}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
|
||||
accent ? 'bg-red-100 text-red-600' : 'bg-purple-100 text-purple-600'
|
||||
}`}>{icon}</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">{title}</p>
|
||||
<p className={`text-2xl font-bold ${accent ? 'text-red-700' : 'text-gray-900'}`}>{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function ComplianceBar({ score }: { score: number }) {
|
||||
const color = score < 40 ? 'bg-red-500' : score < 70 ? 'bg-yellow-500' : 'bg-green-500'
|
||||
const textColor = score < 40 ? 'text-red-700' : score < 70 ? 'text-yellow-700' : 'text-green-700'
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 h-2.5 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div className={`h-full rounded-full transition-all ${color}`} style={{ width: `${Math.min(score, 100)}%` }} />
|
||||
</div>
|
||||
<span className={`text-xs font-semibold min-w-[36px] text-right ${textColor}`}>{score}%</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function HoursBar({ used, budget }: { used: number; budget: number }) {
|
||||
const pct = budget > 0 ? Math.min((used / budget) * 100, 100) : 0
|
||||
const over = used > budget
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 h-2.5 bg-gray-100 rounded-full overflow-hidden">
|
||||
<div className={`h-full rounded-full transition-all ${over ? 'bg-red-500' : 'bg-purple-500'}`} style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
<span className={`text-xs font-medium min-w-[60px] text-right ${over ? 'text-red-600' : 'text-gray-600'}`}>
|
||||
{used}h / {budget}h
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Badge({ label, className = '' }: { label: string; className?: string }) {
|
||||
return (
|
||||
<span className={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full border ${className}`}>
|
||||
{label}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// FORM COMPONENTS
|
||||
// =============================================================================
|
||||
|
||||
export function FormLabel({ children, htmlFor }: { children: React.ReactNode; htmlFor?: string }) {
|
||||
return <label htmlFor={htmlFor} className="block text-sm font-medium text-gray-700 mb-1">{children}</label>
|
||||
}
|
||||
|
||||
export function FormInput({
|
||||
id, type = 'text', value, onChange, placeholder, required, min, max, step,
|
||||
}: {
|
||||
id?: string; type?: string; value: string | number; onChange: (val: string) => void
|
||||
placeholder?: string; required?: boolean; min?: string | number; max?: string | number; step?: string | number
|
||||
}) {
|
||||
return (
|
||||
<input id={id} type={type} value={value} onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder} required={required} min={min} max={max} step={step}
|
||||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500" />
|
||||
)
|
||||
}
|
||||
|
||||
export function FormTextarea({
|
||||
id, value, onChange, placeholder, rows = 3,
|
||||
}: { id?: string; value: string; onChange: (val: string) => void; placeholder?: string; rows?: number }) {
|
||||
return (
|
||||
<textarea id={id} value={value} onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder} rows={rows}
|
||||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none" />
|
||||
)
|
||||
}
|
||||
|
||||
export function FormSelect({
|
||||
id, value, onChange, options, placeholder,
|
||||
}: {
|
||||
id?: string; value: string; onChange: (val: string) => void
|
||||
options: { value: string; label: string }[]; placeholder?: string
|
||||
}) {
|
||||
return (
|
||||
<select id={id} value={value} onChange={(e) => onChange(e.target.value)}
|
||||
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white">
|
||||
{placeholder && <option value="" disabled>{placeholder}</option>}
|
||||
{options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
|
||||
</select>
|
||||
)
|
||||
}
|
||||
|
||||
export function PrimaryButton({
|
||||
onClick, disabled, children, type = 'button', className = '',
|
||||
}: {
|
||||
onClick?: () => void; disabled?: boolean; children: React.ReactNode
|
||||
type?: 'button' | 'submit'; className?: string
|
||||
}) {
|
||||
return (
|
||||
<button type={type} onClick={onClick} disabled={disabled}
|
||||
className={`px-4 py-2 rounded-lg bg-purple-600 text-white text-sm font-medium hover:bg-purple-700 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${className}`}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export function SecondaryButton({
|
||||
onClick, disabled, children, type = 'button', className = '',
|
||||
}: {
|
||||
onClick?: () => void; disabled?: boolean; children: React.ReactNode
|
||||
type?: 'button' | 'submit'; className?: string
|
||||
}) {
|
||||
return (
|
||||
<button type={type} onClick={onClick} disabled={disabled}
|
||||
className={`px-4 py-2 rounded-lg border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-50 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${className}`}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// ERROR / EMPTY STATES
|
||||
// =============================================================================
|
||||
|
||||
export function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-4">
|
||||
<svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-700 font-medium mb-1">Fehler beim Laden</p>
|
||||
<p className="text-sm text-gray-500 mb-4 max-w-md">{message}</p>
|
||||
<PrimaryButton onClick={onRetry}>Erneut versuchen</PrimaryButton>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function EmptyState({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<div className="w-14 h-14 rounded-full bg-purple-50 flex items-center justify-center mb-3 text-purple-400">{icon}</div>
|
||||
<p className="text-gray-700 font-medium">{title}</p>
|
||||
<p className="text-sm text-gray-400 mt-1">{description}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// ICONS
|
||||
// =============================================================================
|
||||
|
||||
export function IconUsers({ className = 'w-5 h-5' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconClock({ className = 'w-5 h-5' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconTask({ className = 'w-5 h-5' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconAlert({ className = 'w-5 h-5' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconBack({ className = 'w-5 h-5' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconPlus({ className = 'w-4 h-4' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconCheck({ className = 'w-4 h-4' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconMail({ className = 'w-5 h-5' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconSettings({ className = 'w-5 h-5' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconRefresh({ className = 'w-4 h-4' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconInbound({ className = 'w-4 h-4' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconOutbound({ className = 'w-4 h-4' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconShield({ className = 'w-6 h-6' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>)
|
||||
}
|
||||
|
||||
export function IconCalendar({ className = 'w-4 h-4' }: { className?: string }) {
|
||||
return (<svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>)
|
||||
}
|
||||
Reference in New Issue
Block a user