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

217
internal_frontend/components/customers/details/sub/CustomerNotesContent.tsx Normal file
View File

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