Customer Detail Page and Enhance dynamic breadcrumbs
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
import {Card} from "@/components/ui/card";
|
||||
import {Skeleton} from "@/components/ui/skeleton";
|
||||
import {Customer} from "@/services/customers/entities/customer";
|
||||
import React from "react";
|
||||
|
||||
type Props = {
|
||||
loading: boolean;
|
||||
customer: Customer | null;
|
||||
sections: React.ReactNode[];
|
||||
};
|
||||
|
||||
export default function CustomerDetailContent({loading, customer, sections}: Readonly<Props>) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
|
||||
<Card className="p-4 space-y-2">
|
||||
<Skeleton className="h-5 w-40"/>
|
||||
<Skeleton className="h-4 w-64"/>
|
||||
<Skeleton className="h-4 w-44"/>
|
||||
<Skeleton className="h-4 w-72"/>
|
||||
</Card>
|
||||
<Card className="p-4 space-y-2">
|
||||
<Skeleton className="h-5 w-40"/>
|
||||
<Skeleton className="h-14 w-full"/>
|
||||
</Card>
|
||||
<Card className="p-4 space-y-2 md:col-span-2">
|
||||
<Skeleton className="h-5 w-40"/>
|
||||
<Skeleton className="h-20 w-full"/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!customer) {
|
||||
return (
|
||||
<div className="text-center text-muted-foreground pt-20">
|
||||
<p className="text-lg">Keine Kundendaten gefunden.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
|
||||
{sections}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Mail, Pencil, Building, MapPin, User, Copy} from "lucide-react";
|
||||
import {Card} from "@/components/ui/card";
|
||||
import React from "react";
|
||||
import {
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
|
||||
import {Customer} from "@/services/customers/entities/customer";
|
||||
|
||||
interface Props {
|
||||
customer: Customer,
|
||||
handleOpenDialog: (content: React.ReactNode) => void;
|
||||
}
|
||||
|
||||
export default function ContactInformationContent({customer, handleOpenDialog}: Readonly<Props>) {
|
||||
const copyToClipboard = async (text: string) => {
|
||||
await navigator.clipboard.writeText(text);
|
||||
};
|
||||
|
||||
const handleEditClick = () => {
|
||||
handleOpenDialog(
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Kontaktinformationen bearbeiten</DialogTitle>
|
||||
<DialogDescription>
|
||||
Bearbeite hier die Kontaktinformationen für {customer.name}.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Add your form fields here */}
|
||||
<p className="text-sm text-muted-foreground italic">Form fields will go here.</p>
|
||||
<div className="rounded-lg border bg-muted/40 p-4 space-y-2">
|
||||
<p className="text-sm"><span className="text-muted-foreground">Name:</span> {customer.name}</p>
|
||||
<p className="text-sm"><span className="text-muted-foreground">E-Mail:</span> {customer.email}
|
||||
</p>
|
||||
<p className="text-sm"><span
|
||||
className="text-muted-foreground">Firma:</span> {customer.companyName}</p>
|
||||
<p className="text-sm">
|
||||
<span
|
||||
className="text-muted-foreground">Adresse:</span> {customer.street}, {customer.zip} {customer.city}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleOpenDialog(null)}>Abbrechen</Button>
|
||||
<Button type="submit">Speichern</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-4">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4 text-muted-foreground"/>
|
||||
<h2 className="text-lg font-semibold">Kontaktinformationen</h2>
|
||||
</div>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={handleEditClick}
|
||||
>
|
||||
<Pencil className="w-4 h-4"/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-3 mt-2">
|
||||
{[
|
||||
{icon: User, label: "Name", value: customer.name},
|
||||
{icon: Mail, label: "E-Mail", value: customer.email, copyable: true},
|
||||
{icon: Building, label: "Firma", value: customer.companyName},
|
||||
{icon: MapPin, label: "Adresse", value: `${customer.street}, ${customer.zip} ${customer.city}`}
|
||||
].map((item, index) => (
|
||||
<div key={index}
|
||||
className="group flex items-start gap-3 rounded-md p-1.5 hover:bg-muted/50 transition-colors">
|
||||
<item.icon className="h-4 w-4 text-muted-foreground mt-0.5"/>
|
||||
<div className="flex-1">
|
||||
<p className="text-xs text-muted-foreground">{item.label}</p>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-sm font-medium">{item.value}</p>
|
||||
{item.copyable && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => copyToClipboard(item.value)}
|
||||
>
|
||||
<Copy className="h-4 w-4"/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Kopieren</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
import React, {useState} from 'react';
|
||||
import {motion, AnimatePresence} from "framer-motion";
|
||||
import {Card} from "@/components/ui/card";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {ChevronDown, ChevronRight, Pencil, Plus, Trash2, Notebook} from "lucide-react";
|
||||
import {Customer, CustomerNote} from "@/services/customers/entities/customer";
|
||||
import {
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {Label} from "@/components/ui/label";
|
||||
import {Textarea} from "@/components/ui/textarea";
|
||||
import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
|
||||
|
||||
type Props = {
|
||||
customer: Customer;
|
||||
handleOpenDialog: (content: React.ReactNode) => void;
|
||||
};
|
||||
|
||||
export default function CustomerNotesContent({customer, handleOpenDialog}: Readonly<Props>) {
|
||||
const [expandedNotes, setExpandedNotes] = useState<number[]>([]);
|
||||
|
||||
const toggleNote = (index: number) => {
|
||||
setExpandedNotes(prev =>
|
||||
prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
|
||||
);
|
||||
};
|
||||
|
||||
const handleAddNote = () => {
|
||||
handleOpenDialog(
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Neue Notiz hinzufügen</DialogTitle>
|
||||
<DialogDescription>
|
||||
Füge eine neue Notiz für {customer.name} hinzu.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="note">Notiz</Label>
|
||||
<Textarea
|
||||
id="note"
|
||||
placeholder="Schreib hier deine Notiz..."
|
||||
className="min-h-[150px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
Speichern
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
);
|
||||
};
|
||||
|
||||
const handleEditNote = (note: CustomerNote) => {
|
||||
handleOpenDialog(
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Notiz bearbeiten</DialogTitle>
|
||||
<DialogDescription>
|
||||
Bearbeite deine Notiz hier.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="note">Notiz</Label>
|
||||
<Textarea
|
||||
id="note"
|
||||
defaultValue={note.text}
|
||||
className="min-h-[150px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
Speichern
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
);
|
||||
};
|
||||
|
||||
const handleDeleteNote = (note: CustomerNote) => {
|
||||
handleOpenDialog(
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Notiz löschen</DialogTitle>
|
||||
<DialogDescription>
|
||||
Willst du diese Notiz von der Firma <strong>{customer.companyName}</strong> wirklich löschen?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="py-4 text-sm text-muted-foreground">
|
||||
{note.text}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={() => {
|
||||
// Handle delete
|
||||
handleOpenDialog(null);
|
||||
}}>
|
||||
Löschen
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-4 pb-2 md:col-span-2">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex items-center gap-2">
|
||||
<Notebook className="w-4 h-4 text-muted-foreground"/>
|
||||
<h2 className="text-lg font-semibold">Notizen</h2>
|
||||
</div>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={handleAddNote}
|
||||
>
|
||||
<Plus className="w-4 h-4"/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-1 mt-2">
|
||||
{customer.notes.map((note, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={false}
|
||||
className="group rounded-md hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="px-2 py-1.5">
|
||||
<div className="flex items-start gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="text-muted-foreground mt-1"
|
||||
onClick={() => toggleNote(index)}
|
||||
>
|
||||
{expandedNotes.includes(index) ?
|
||||
<ChevronDown className="w-4 h-4"/> :
|
||||
<ChevronRight className="w-4 h-4"/>
|
||||
}
|
||||
</button>
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between items-start gap-2">
|
||||
<div
|
||||
className="flex-1 font-medium cursor-pointer"
|
||||
onClick={() => toggleNote(index)}
|
||||
>
|
||||
{note.text}
|
||||
</div>
|
||||
<div
|
||||
className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => handleEditNote(note)}
|
||||
>
|
||||
<Pencil className="w-4 h-4"/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Bearbeiten</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => handleDeleteNote(note)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-destructive"/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Löschen</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
{expandedNotes.includes(index) && (
|
||||
<motion.div
|
||||
initial={{height: 0, opacity: 0}}
|
||||
animate={{height: "auto", opacity: 1}}
|
||||
exit={{height: 0, opacity: 0}}
|
||||
transition={{duration: 0.2}}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="pt-2 text-sm">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Erstellt von {note.creator} am {" "}
|
||||
{new Date(note.createdAt).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
import React, {useState} from 'react';
|
||||
import {motion, AnimatePresence} from "framer-motion";
|
||||
import {Card} from "@/components/ui/card";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Phone, ChevronDown, ChevronRight, Copy, Pencil, Plus, Trash2} from "lucide-react";
|
||||
import {
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from "@/components/ui/dialog";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {Label} from "@/components/ui/label";
|
||||
import {Textarea} from "@/components/ui/textarea";
|
||||
import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
|
||||
import {Customer, CustomerPhoneNumber} from "@/services/customers/entities/customer";
|
||||
|
||||
interface Props {
|
||||
customer: Customer,
|
||||
handleOpenDialog: (content: React.ReactNode | null) => void;
|
||||
}
|
||||
|
||||
export default function CustomerPhoneNumberContent({customer, handleOpenDialog}: Readonly<Props>) {
|
||||
const [expandedPhones, setExpandedPhones] = useState<number[]>([]);
|
||||
|
||||
const togglePhone = (index: number) => {
|
||||
setExpandedPhones(prev =>
|
||||
prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]
|
||||
);
|
||||
};
|
||||
|
||||
const copyToClipboard = async (text: string) => {
|
||||
await navigator.clipboard.writeText(text);
|
||||
};
|
||||
|
||||
const handleAddPhone = () => {
|
||||
handleOpenDialog(
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Neue Telefonnummer</DialogTitle>
|
||||
<DialogDescription>
|
||||
Füge eine neue Telefonnummer für <strong>{customer.companyName}</strong> hinzu.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">Telefonnummer</Label>
|
||||
<Input id="phone" placeholder="+49 123 456789"/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="note">Notiz</Label>
|
||||
<Textarea id="note" placeholder="Optionale Notiz zur Telefonnummer" className="h-20"/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit">Speichern</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
);
|
||||
};
|
||||
|
||||
const handleEditPhone = (phone: CustomerPhoneNumber) => {
|
||||
handleOpenDialog(
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Telefonnummer bearbeiten</DialogTitle>
|
||||
<DialogDescription>
|
||||
Bearbeite die Telefonnummer für <strong>{customer.companyName}</strong>.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">Telefonnummer</Label>
|
||||
<Input id="phone" defaultValue={phone.number} placeholder="+49 123 456789"/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="note">Notiz</Label>
|
||||
<Textarea
|
||||
id="note"
|
||||
defaultValue={phone.note}
|
||||
placeholder="Optionale Notiz zur Telefonnummer"
|
||||
className="h-20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit">Speichern</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
);
|
||||
};
|
||||
|
||||
const handleDeletePhone = (phone: CustomerPhoneNumber) => {
|
||||
handleOpenDialog(
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Telefonnummer löschen</DialogTitle>
|
||||
<DialogDescription>
|
||||
Willst du die Telefonnummer <strong>{phone.number}</strong> von der
|
||||
Firma <strong>{customer.companyName}</strong> löschen?
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleOpenDialog(null)}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={() => {
|
||||
// Add your delete logic here
|
||||
handleOpenDialog(null);
|
||||
}}>
|
||||
Löschen
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-4">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="w-4 h-4 text-muted-foreground"/>
|
||||
<h2 className="text-lg font-semibold">Telefonnummern</h2>
|
||||
</div>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={handleAddPhone}
|
||||
>
|
||||
<Plus className="w-4 h-4"/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-1 mt-2">
|
||||
{customer.phoneNumbers.map((phone, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={false}
|
||||
className="group rounded-md hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="px-2 py-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 flex-1 text-left"
|
||||
onClick={() => togglePhone(index)}
|
||||
>
|
||||
<div className="text-muted-foreground">
|
||||
{expandedPhones.includes(index) ?
|
||||
<ChevronDown className="w-4 h-4"/> :
|
||||
<ChevronRight className="w-4 h-4"/>
|
||||
}
|
||||
</div>
|
||||
<span className="font-medium">{phone.number}</span>
|
||||
</button>
|
||||
<div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => copyToClipboard(phone.number)}
|
||||
>
|
||||
<Copy className="w-4 h-4"/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Kopieren</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => handleEditPhone(phone)}
|
||||
>
|
||||
<Pencil className="w-4 h-4"/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Bearbeiten</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => handleDeletePhone(phone)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-destructive"/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Löschen</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
{expandedPhones.includes(index) && (
|
||||
<motion.div
|
||||
initial={{height: 0, opacity: 0}}
|
||||
animate={{height: "auto", opacity: 1}}
|
||||
exit={{height: 0, opacity: 0}}
|
||||
transition={{duration: 0.2}}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="pt-2 pl-6 text-sm space-y-1">
|
||||
{phone.note && (
|
||||
<p className="text-muted-foreground">
|
||||
{phone.note}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Erstellt von {phone.creator} am {" "}
|
||||
{new Date(phone.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user