feat(ui): mobile responsiveness audit + type fixes
Mobile Responsiveness: - Viewport meta tags toegevoegd in layout.tsx - EPD header: patient details verborgen op mobiel, zoekbalk responsive - Agenda: auto-switch naar dagview op mobiel, mini-kalender verborgen - Agenda toolbar: verticale stacking, Week/Werkweek knoppen verborgen - Patiëntenlijst: compact icoon-only button op mobiel - Verpleegrapportage: verticale flow i.p.v. twee-koloms layout - Cortex: artifact overlay met slide-in animatie op mobiel - Cortex: "Terug" knop toegevoegd aan artifact panels - Toast feedback bij succesvolle afspraak creatie Code Quality Fixes (KISS/DRY): - Resize listener vervangen door bestaande useMediaQuery hook - Dubbele flex class opgeschoond in epd-header.tsx - userScalable: false verwijderd (accessibility) Type Fixes: - actions.ts: status literal type met 'as const' - agenda-block.tsx: dateRange start/end optioneel - chat-empty-state.tsx: framer-motion ease type - cortex-store.ts: ChatEntities.dateRange consistent met Zod schema 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
colinislit
@@ -124,7 +124,7 @@ export async function createEncounter(params: CreateEncounterParams) {
|
||||
class_code: params.classCode,
|
||||
class_display: params.classDisplay,
|
||||
notes: params.notes,
|
||||
status: 'planned',
|
||||
status: 'planned' as const,
|
||||
};
|
||||
|
||||
console.log('[createEncounter] Insert data:', insertData);
|
||||
|
||||
@@ -21,10 +21,10 @@ interface AgendaToolbarProps {
|
||||
onNewAppointment: () => void;
|
||||
}
|
||||
|
||||
const VIEW_OPTIONS: { value: CalendarView; label: string }[] = [
|
||||
const VIEW_OPTIONS: { value: CalendarView; label: string; className?: string }[] = [
|
||||
{ value: 'timeGridDay', label: 'Dag' },
|
||||
{ value: 'timeGridWeek', label: 'Week' },
|
||||
{ value: 'timeGridWorkWeek', label: 'Werkweek' },
|
||||
{ value: 'timeGridWeek', label: 'Week', className: 'hidden md:block' },
|
||||
{ value: 'timeGridWorkWeek', label: 'Werkweek', className: 'hidden md:block' },
|
||||
];
|
||||
|
||||
export function AgendaToolbar({
|
||||
@@ -60,7 +60,7 @@ export function AgendaToolbar({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-4 mb-4">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-4">
|
||||
{/* Left: Title and Date */}
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-2xl font-bold text-slate-900">Agenda</h1>
|
||||
@@ -104,11 +104,10 @@ export function AgendaToolbar({
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => onViewChange(option.value)}
|
||||
className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
|
||||
currentView === option.value
|
||||
className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${currentView === option.value
|
||||
? 'bg-white text-slate-900 shadow-sm'
|
||||
: 'text-slate-600 hover:text-slate-900'
|
||||
}`}
|
||||
} ${option.className || ''}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
@@ -116,9 +115,10 @@ export function AgendaToolbar({
|
||||
</div>
|
||||
|
||||
{/* New Appointment Button */}
|
||||
<Button onClick={onNewAppointment} className="gap-2">
|
||||
<Button onClick={onNewAppointment} className="gap-2 w-full md:w-auto">
|
||||
<Plus className="h-4 w-4" />
|
||||
Nieuwe Afspraak
|
||||
<span className="hidden md:inline">Nieuwe Afspraak</span>
|
||||
<span className="md:hidden">Nieuw</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,6 +10,7 @@ import React, { useState, useCallback, useRef, useTransition, useEffect } from '
|
||||
import dynamic from 'next/dynamic';
|
||||
import { startOfWeek, endOfWeek, addDays, format } from 'date-fns';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import { useMediaQuery } from '@/hooks/use-media-query';
|
||||
|
||||
// Lazy load FullCalendar component (~150KB+ savings)
|
||||
const AgendaCalendar = dynamic(
|
||||
@@ -62,6 +63,14 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
|
||||
const [pendingReschedule, setPendingReschedule] = useState<PendingReschedule | null>(null);
|
||||
const [isRescheduling, setIsRescheduling] = useState(false);
|
||||
|
||||
// Auto-switch to day view on mobile
|
||||
const isMobile = useMediaQuery('(max-width: 767px)');
|
||||
useEffect(() => {
|
||||
if (isMobile) {
|
||||
setCurrentView('timeGridDay');
|
||||
}
|
||||
}, [isMobile]);
|
||||
|
||||
const calendarRef = useRef<{ getApi: () => { prev: () => void; next: () => void; today: () => void; changeView: (view: string) => void; getDate: () => Date } } | null>(null);
|
||||
|
||||
// Auto-open appointment modal when navigating from a report
|
||||
@@ -118,7 +127,7 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
|
||||
|
||||
// Handle date range change from calendar
|
||||
const handleDateChange = useCallback((start: Date, end: Date) => {
|
||||
setCurrentDate((prev) =>
|
||||
setCurrentDate((prev) =>
|
||||
prev.toDateString() === start.toDateString() ? prev : start
|
||||
);
|
||||
fetchEvents(start, end);
|
||||
@@ -246,7 +255,7 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
|
||||
|
||||
<div className="flex flex-1 gap-4 min-h-0">
|
||||
{/* Mini calendar sidebar */}
|
||||
<div className="w-64 flex-shrink-0">
|
||||
<div className="w-64 flex-shrink-0 hidden md:block">
|
||||
<MiniCalendar
|
||||
selectedDate={currentDate}
|
||||
onDateSelect={handleMiniCalendarDateSelect}
|
||||
|
||||
@@ -50,12 +50,12 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
|
||||
const name = patient.name?.[0];
|
||||
const fullName = name
|
||||
? [
|
||||
...(name.prefix || []),
|
||||
...(name.given || []),
|
||||
name.family,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
...(name.prefix || []),
|
||||
...(name.given || []),
|
||||
name.family,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
: '';
|
||||
|
||||
// Extract status from extension
|
||||
@@ -67,29 +67,29 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
|
||||
// Extract birth date
|
||||
const birthDate = patient.birthDate
|
||||
? new Date(patient.birthDate).toLocaleDateString('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
: null;
|
||||
|
||||
// Extract BSN from identifiers
|
||||
const bsnIdentifier = patient.identifier?.find(
|
||||
(id: any) => id.system === 'http://fhir.nl/fhir/NamingSystem/bsn' ||
|
||||
id.system?.includes('bsn') ||
|
||||
id.type?.coding?.[0]?.code === 'BSN'
|
||||
id.system?.includes('bsn') ||
|
||||
id.type?.coding?.[0]?.code === 'BSN'
|
||||
);
|
||||
const bsn = bsnIdentifier?.value;
|
||||
|
||||
// Extract last modified
|
||||
const lastModified = patient.meta?.lastUpdated
|
||||
? new Date(patient.meta.lastUpdated).toLocaleString('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: null;
|
||||
|
||||
// Check if John Doe
|
||||
@@ -141,7 +141,7 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
|
||||
</div>
|
||||
|
||||
{/* Patient Details */}
|
||||
<div className="flex items-center gap-3 text-xs text-slate-500">
|
||||
<div className="hidden md:flex items-center gap-3 text-xs text-slate-500">
|
||||
{birthDate && <span>Geb: {birthDate}</span>}
|
||||
{bsn && <span>BSN: {bsn}</span>}
|
||||
<span>ID: {patient.id}</span>
|
||||
@@ -184,7 +184,7 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Zoek patiënt..."
|
||||
className="w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
|
||||
className="w-full md:w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,10 +32,10 @@ export default async function PatientsPage({
|
||||
</div>
|
||||
<Link
|
||||
href="/epd/patients/new"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-teal-600 to-teal-700 hover:from-teal-700 hover:to-teal-800 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all"
|
||||
className="inline-flex items-center gap-2 px-3 md:px-4 py-2 bg-gradient-to-r from-teal-600 to-teal-700 hover:from-teal-700 hover:to-teal-800 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
<span>Nieuwe patiënt</span>
|
||||
<span className="hidden md:inline">Nieuwe patiënt</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -172,9 +172,9 @@ export function RapportageWorkspace({ patients }: RapportageWorkspaceProps) {
|
||||
const groupedLogs = groupLogsByDayAndPart(logs);
|
||||
|
||||
return (
|
||||
<div className="h-full flex bg-slate-50">
|
||||
<div className="h-full flex flex-col md:flex-row bg-slate-50">
|
||||
{/* Sidebar - Patiënten */}
|
||||
<aside className="w-80 border-r border-slate-200 bg-white flex-shrink-0 overflow-hidden flex flex-col">
|
||||
<aside className="w-full md:w-80 border-b md:border-b-0 md:border-r border-slate-200 bg-white flex-shrink-0 overflow-hidden flex flex-col h-48 md:h-auto">
|
||||
<div className="p-4 border-b border-slate-200">
|
||||
<h2 className="font-semibold text-slate-900">Ronde overzicht</h2>
|
||||
</div>
|
||||
@@ -190,11 +190,10 @@ export function RapportageWorkspace({ patients }: RapportageWorkspaceProps) {
|
||||
<button
|
||||
key={patient.id}
|
||||
onClick={() => setSelectedPatientId(patient.id)}
|
||||
className={`w-full px-4 py-3 text-left transition-colors ${
|
||||
isSelected
|
||||
className={`w-full px-4 py-3 text-left transition-colors ${isSelected
|
||||
? 'bg-teal-50'
|
||||
: 'hover:bg-slate-50'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={`font-medium truncate ${isSelected ? 'text-teal-900' : 'text-slate-900'}`}>
|
||||
@@ -229,92 +228,92 @@ export function RapportageWorkspace({ patients }: RapportageWorkspaceProps) {
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 overflow-y-auto p-6 space-y-4">
|
||||
{/* Risico alerts */}
|
||||
{selectedPatient && selectedPatient.alerts.high_risk_count > 0 && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-center gap-3">
|
||||
<AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0" />
|
||||
<div>
|
||||
<span className="font-medium text-red-900">
|
||||
{selectedPatient.alerts.high_risk_count} hoog risico
|
||||
</span>
|
||||
<span className="text-red-700 text-sm ml-2">
|
||||
Let op verhoogde aandachtspunten voor deze cliënt
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Invoerformulier */}
|
||||
{selectedPatientId && (
|
||||
<QuickEntryForm
|
||||
patientId={selectedPatientId}
|
||||
onSuccess={handleRefresh}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Stats row - alleen tonen als er data is */}
|
||||
{logs.length > 0 && (
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span className="text-slate-600">
|
||||
<span className="font-semibold text-slate-900">{logs.length}</span> notities
|
||||
{/* Risico alerts */}
|
||||
{selectedPatient && selectedPatient.alerts.high_risk_count > 0 && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-center gap-3">
|
||||
<AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0" />
|
||||
<div>
|
||||
<span className="font-medium text-red-900">
|
||||
{selectedPatient.alerts.high_risk_count} hoog risico
|
||||
</span>
|
||||
<span className="text-red-700 text-sm ml-2">
|
||||
Let op verhoogde aandachtspunten voor deze cliënt
|
||||
</span>
|
||||
{markedForHandover > 0 && (
|
||||
<span className="flex items-center gap-1 text-teal-700">
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
<span className="font-semibold">{markedForHandover}</span> overdracht
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Timeline */}
|
||||
{isLoading ? (
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||
<Loader2 className="h-8 w-8 text-slate-400 animate-spin mx-auto" />
|
||||
<p className="text-sm text-slate-500 mt-2">Laden...</p>
|
||||
</div>
|
||||
) : logs.length === 0 ? (
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||
<FileText className="h-10 w-10 text-slate-300 mx-auto mb-2" />
|
||||
<p className="text-slate-600">Nog geen notities</p>
|
||||
<p className="text-sm text-slate-500">Voeg een notitie toe via het formulier hierboven</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{groupedLogs.map(dayGroup => (
|
||||
<div key={dayGroup.date} className="bg-white rounded-lg border border-slate-200 overflow-hidden">
|
||||
<div className="px-4 py-2 bg-slate-50 border-b border-slate-100">
|
||||
<span className="font-medium text-slate-700 capitalize text-sm">{dayGroup.dateLabel}</span>
|
||||
</div>
|
||||
{/* Invoerformulier */}
|
||||
{selectedPatientId && (
|
||||
<QuickEntryForm
|
||||
patientId={selectedPatientId}
|
||||
onSuccess={handleRefresh}
|
||||
/>
|
||||
)}
|
||||
|
||||
{dayGroup.dayParts.map(partGroup => {
|
||||
const PartIcon = DAY_PART_CONFIG[partGroup.part].icon;
|
||||
return (
|
||||
<div key={partGroup.part}>
|
||||
<div className="flex items-center gap-2 px-4 py-1.5 bg-slate-50/50 border-b border-slate-50">
|
||||
<PartIcon className={`h-3.5 w-3.5 ${DAY_PART_CONFIG[partGroup.part].color}`} />
|
||||
<span className="text-xs font-medium text-slate-500">{DAY_PART_CONFIG[partGroup.part].label}</span>
|
||||
</div>
|
||||
{/* Stats row - alleen tonen als er data is */}
|
||||
{logs.length > 0 && (
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<span className="text-slate-600">
|
||||
<span className="font-semibold text-slate-900">{logs.length}</span> notities
|
||||
</span>
|
||||
{markedForHandover > 0 && (
|
||||
<span className="flex items-center gap-1 text-teal-700">
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
<span className="font-semibold">{markedForHandover}</span> overdracht
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative pl-8">
|
||||
<div className="absolute left-5 top-0 bottom-0 w-0.5 bg-slate-100" />
|
||||
|
||||
{partGroup.logs.map((log, idx) => (
|
||||
<TimelineItem
|
||||
key={log.id}
|
||||
log={log}
|
||||
onRefresh={handleRefresh}
|
||||
isLast={idx === partGroup.logs.length - 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* Timeline */}
|
||||
{isLoading ? (
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||
<Loader2 className="h-8 w-8 text-slate-400 animate-spin mx-auto" />
|
||||
<p className="text-sm text-slate-500 mt-2">Laden...</p>
|
||||
</div>
|
||||
) : logs.length === 0 ? (
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
|
||||
<FileText className="h-10 w-10 text-slate-300 mx-auto mb-2" />
|
||||
<p className="text-slate-600">Nog geen notities</p>
|
||||
<p className="text-sm text-slate-500">Voeg een notitie toe via het formulier hierboven</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{groupedLogs.map(dayGroup => (
|
||||
<div key={dayGroup.date} className="bg-white rounded-lg border border-slate-200 overflow-hidden">
|
||||
<div className="px-4 py-2 bg-slate-50 border-b border-slate-100">
|
||||
<span className="font-medium text-slate-700 capitalize text-sm">{dayGroup.dateLabel}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{dayGroup.dayParts.map(partGroup => {
|
||||
const PartIcon = DAY_PART_CONFIG[partGroup.part].icon;
|
||||
return (
|
||||
<div key={partGroup.part}>
|
||||
<div className="flex items-center gap-2 px-4 py-1.5 bg-slate-50/50 border-b border-slate-50">
|
||||
<PartIcon className={`h-3.5 w-3.5 ${DAY_PART_CONFIG[partGroup.part].color}`} />
|
||||
<span className="text-xs font-medium text-slate-500">{DAY_PART_CONFIG[partGroup.part].label}</span>
|
||||
</div>
|
||||
|
||||
<div className="relative pl-8">
|
||||
<div className="absolute left-5 top-0 bottom-0 w-0.5 bg-slate-100" />
|
||||
|
||||
{partGroup.logs.map((log, idx) => (
|
||||
<TimelineItem
|
||||
key={log.id}
|
||||
log={log}
|
||||
onRefresh={handleRefresh}
|
||||
isLast={idx === partGroup.logs.length - 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
@@ -389,11 +388,10 @@ function QuickEntryForm({ patientId, onSuccess }: { patientId: string; onSuccess
|
||||
key={cat}
|
||||
type="button"
|
||||
onClick={() => setCategory(cat)}
|
||||
className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors whitespace-nowrap ${
|
||||
isSelected
|
||||
className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors whitespace-nowrap ${isSelected
|
||||
? `${config.bgColor} ${config.textColor}`
|
||||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-3 w-3" />
|
||||
{config.label}
|
||||
@@ -426,11 +424,10 @@ function QuickEntryForm({ patientId, onSuccess }: { patientId: string; onSuccess
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIncludeInHandover(!includeInHandover)}
|
||||
className={`inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors ${
|
||||
includeInHandover
|
||||
className={`inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors ${includeInHandover
|
||||
? 'bg-teal-100 text-teal-800'
|
||||
: 'bg-slate-100 text-slate-600 hover:bg-teal-50 hover:text-teal-700'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<CheckCircle2 className="h-3.5 w-3.5" />
|
||||
Overdracht
|
||||
@@ -533,9 +530,8 @@ function TimelineItem({ log, onRefresh, isLast }: { log: Report; onRefresh: () =
|
||||
key={cat}
|
||||
type="button"
|
||||
onClick={() => setEditCategory(cat)}
|
||||
className={`text-xs px-2 py-0.5 rounded-full ${
|
||||
editCategory === cat ? `${catConfig.bgColor} ${catConfig.textColor}` : 'bg-slate-100 text-slate-600'
|
||||
}`}
|
||||
className={`text-xs px-2 py-0.5 rounded-full ${editCategory === cat ? `${catConfig.bgColor} ${catConfig.textColor}` : 'bg-slate-100 text-slate-600'
|
||||
}`}
|
||||
>
|
||||
{catConfig.label}
|
||||
</button>
|
||||
@@ -585,11 +581,10 @@ function TimelineItem({ log, onRefresh, isLast }: { log: Report; onRefresh: () =
|
||||
<button
|
||||
onClick={toggleHandover}
|
||||
disabled={isPending}
|
||||
className={`text-xs px-1.5 py-0.5 rounded transition-colors ${
|
||||
log.include_in_handover
|
||||
className={`text-xs px-1.5 py-0.5 rounded transition-colors ${log.include_in_handover
|
||||
? 'bg-teal-100 text-teal-700'
|
||||
: 'bg-slate-100 text-slate-400 hover:bg-teal-50 hover:text-teal-600'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<CheckCircle2 className={`h-3 w-3 inline ${isPending ? 'animate-pulse' : ''}`} />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user