Gitlab-Migration/rheinsw-mono-repo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Customer Detail Page and Enhance dynamic breadcrumbs

Browse Source
This commit is contained in:
Thatsaphorn
2025-07-06 17:24:12 +00:00
parent 055d19d201
commit e00142ff81
14 changed files with 934 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
internal_frontend/components/customers/details/sub/ContactInformationContent.tsx Normal file
View File

@@ -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>
);
}