718 lines
36 KiB
TypeScript
718 lines
36 KiB
TypeScript
'use no memo';
|
|
|
|
import { Form, Head, Link } from '@inertiajs/react';
|
|
import {
|
|
ArrowLeft,
|
|
Minus,
|
|
Plus,
|
|
ShoppingCart,
|
|
Trash2,
|
|
} from 'lucide-react';
|
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { ConfirmDialog } from '@/components/dialogs';
|
|
import { FileUploadMultiple } from '@/components/inputs';
|
|
import { ImagePreviewModal } from '@/components/dialogs';
|
|
import { InputError } from '@/components/ui';
|
|
import { RupiahInput } from '@/components/inputs';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import {
|
|
Combobox,
|
|
ComboboxContent,
|
|
ComboboxEmpty,
|
|
ComboboxInput,
|
|
ComboboxItem,
|
|
ComboboxList,
|
|
} from '@/components/ui/combobox';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetFooter,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
} from '@/components/ui/sheet';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { formatNumber } from '@/lib/format';
|
|
import { getTemporaryUrl } from '@/lib/upload';
|
|
import { formatCurrency } from '@/lib/utils';
|
|
import {
|
|
index as purchaseIndex,
|
|
update,
|
|
} from '@/routes/admin/manage/purchases';
|
|
import type { PurchaseCreateData, PurchaseForEdit, RawMaterialVariant } from './columns';
|
|
|
|
type CartLine = {
|
|
key: string;
|
|
photoUrl: string | null;
|
|
title: string;
|
|
subtitle: string;
|
|
price: number;
|
|
quantity: string;
|
|
onAdjust: (delta: number) => void;
|
|
onSet: (value: string) => void;
|
|
onRemove: () => void;
|
|
};
|
|
|
|
type Props = {
|
|
purchase: PurchaseForEdit;
|
|
suppliers: PurchaseCreateData['suppliers'];
|
|
rawMaterials: { id: number; name: string; unit: string }[];
|
|
};
|
|
|
|
export default function PurchaseEdit({
|
|
purchase,
|
|
suppliers,
|
|
rawMaterials,
|
|
}: Props) {
|
|
|
|
const [supplierId, setSupplierId] = useState(String(purchase.supplier_id));
|
|
const selectedSupplier =
|
|
suppliers.find((s) => String(s.id) === supplierId) ?? null;
|
|
const [discount, setDiscount] = useState(purchase.discount);
|
|
const [shippingCost, setShippingCost] = useState(purchase.shipping_cost);
|
|
const [notes, setNotes] = useState(purchase.notes ?? '');
|
|
const [photos, setPhotos] = useState<{ key: string; url: string | null }[]>(() => {
|
|
if (purchase.photo_keys && purchase.photo_keys.length > 0) {
|
|
return purchase.photo_keys.map((key: string, index: number) => ({
|
|
key,
|
|
url: purchase.photo_urls?.[index] ?? getTemporaryUrl(key),
|
|
}));
|
|
}
|
|
return [];
|
|
});
|
|
const [uploading, setUploading] = useState(false);
|
|
|
|
const [quantities, setQuantities] = useState<Record<number, string>>(() =>
|
|
Object.fromEntries(
|
|
Object.entries(purchase.existing_quantities).map(([id, qty]) => [
|
|
Number(id),
|
|
String(qty),
|
|
]),
|
|
),
|
|
);
|
|
const [cartOpen, setCartOpen] = useState(false);
|
|
const [previewKey, setPreviewKey] = useState<string | null>(null);
|
|
const [variantPreview, setVariantPreview] = useState<{ src: string; title?: string; description?: string } | null>(null);
|
|
const [cartRemoveKey, setCartRemoveKey] = useState<string | null>(null);
|
|
|
|
const [fetchedVariants, setFetchedVariants] = useState<Map<number, RawMaterialVariant[]>>(new Map());
|
|
const [loadingVariants, setLoadingVariants] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const materialIds = purchase.existing_material_ids ?? [];
|
|
if (materialIds.length === 0) return;
|
|
|
|
const toFetch = materialIds.filter((id) => !fetchedVariants.has(id));
|
|
if (toFetch.length === 0) return;
|
|
|
|
setLoadingVariants(true);
|
|
Promise.all(
|
|
toFetch.map((id) =>
|
|
fetch(`/admin/master/raw-materials/${id}/variants`)
|
|
.then((res) => res.json())
|
|
.then((data) => [id, data.variants] as const)
|
|
),
|
|
)
|
|
.then((results) => {
|
|
setFetchedVariants((prev) => {
|
|
const next = new Map(prev);
|
|
for (const [id, variants] of results) {
|
|
next.set(id, variants);
|
|
}
|
|
return next;
|
|
});
|
|
})
|
|
.catch(() => {
|
|
toast.error('Gagal memuat varian bahan baku.');
|
|
})
|
|
.finally(() => setLoadingVariants(false));
|
|
}, [purchase.existing_material_ids]);
|
|
|
|
const priceMap = useMemo(() => {
|
|
const map = new Map<number, RawMaterialVariant & { materialName: string; materialUnit: string }>();
|
|
for (const [materialId, variants] of fetchedVariants) {
|
|
const material = rawMaterials.find((m) => m.id === materialId);
|
|
if (!material) continue;
|
|
for (const p of variants) {
|
|
map.set(p.id, { ...p, materialName: material.name, materialUnit: material.unit });
|
|
}
|
|
}
|
|
return map;
|
|
}, [fetchedVariants, rawMaterials]);
|
|
|
|
const materialByPriceId = useMemo(() => {
|
|
const map = new Map<number, { name: string; unit: string }>();
|
|
for (const [materialId, variants] of fetchedVariants) {
|
|
const material = rawMaterials.find((m) => m.id === materialId);
|
|
if (!material) continue;
|
|
for (const p of variants) {
|
|
map.set(p.id, { name: material.name, unit: material.unit });
|
|
}
|
|
}
|
|
return map;
|
|
}, [fetchedVariants, rawMaterials]);
|
|
|
|
const subtotal = Object.entries(quantities).reduce(
|
|
(sum, [priceId, quantity]) => {
|
|
const price = priceMap.get(Number(priceId));
|
|
|
|
return sum + (price ? price.price * (parseFloat(quantity) || 0) : 0);
|
|
},
|
|
0,
|
|
);
|
|
const total = subtotal - discount + shippingCost;
|
|
|
|
const purchasedVariantsByMaterial = useMemo(() => {
|
|
const map = new Map<string, { name: string; unit: string; items: { id: number; variant: string; price: number; stock: number; photo_url: string | null; photo_conversion_url: string | null }[] }>();
|
|
|
|
for (const [priceId, quantity] of Object.entries(quantities)) {
|
|
const id = Number(priceId);
|
|
const price = priceMap.get(id);
|
|
const material = materialByPriceId.get(id);
|
|
|
|
if (!price || !material) continue;
|
|
|
|
if (!map.has(material.name)) {
|
|
map.set(material.name, { name: material.name, unit: material.unit, items: [] });
|
|
}
|
|
|
|
map.get(material.name)!.items.push({
|
|
id: price.id,
|
|
variant: price.variant,
|
|
price: price.price,
|
|
stock: price.stock,
|
|
photo_url: price.photo_url,
|
|
photo_conversion_url: price.photo_conversion_url,
|
|
});
|
|
}
|
|
|
|
return map;
|
|
}, [quantities, priceMap, materialByPriceId]);
|
|
|
|
const isMultiMaterial = purchasedVariantsByMaterial.size > 1;
|
|
|
|
const updateQuantity = useCallback((priceId: number, value: string) => {
|
|
setQuantities((prev) => ({
|
|
...prev,
|
|
[priceId]: value,
|
|
}));
|
|
}, []);
|
|
|
|
const incrementQuantity = useCallback((priceId: number, amount: number) => {
|
|
setQuantities((prev) => ({
|
|
...prev,
|
|
[priceId]: String(Math.max(0, (parseFloat(prev[priceId]) || 0) + amount)),
|
|
}));
|
|
}, []);
|
|
|
|
const cartItems: CartLine[] = (() => {
|
|
const lines: CartLine[] = [];
|
|
|
|
for (const [priceId, quantity] of Object.entries(quantities)) {
|
|
if ((parseFloat(quantity) || 0) <= 0) {
|
|
continue;
|
|
}
|
|
|
|
const id = Number(priceId);
|
|
const price = priceMap.get(id);
|
|
const material = materialByPriceId.get(id);
|
|
|
|
if (price && material) {
|
|
lines.push({
|
|
key: `existing-${id}`,
|
|
photoUrl: price.photo_conversion_url ?? price.photo_url,
|
|
title: `${material.name} — ${price.variant}`,
|
|
subtitle: `${formatCurrency(price.price)} / ${material.unit}`,
|
|
price: price.price,
|
|
quantity,
|
|
onAdjust: (delta) => incrementQuantity(id, delta),
|
|
onSet: (value) => updateQuantity(id, value),
|
|
onRemove: () => updateQuantity(id, '0'),
|
|
});
|
|
}
|
|
}
|
|
|
|
return lines.sort((a, b) => a.title.localeCompare(b.title));
|
|
})();
|
|
|
|
function formatQuantity(value: number): string {
|
|
return formatNumber(value, { maximumFractionDigits: 4 });
|
|
}
|
|
|
|
function getPayload() {
|
|
return {
|
|
mode: 'existing',
|
|
supplier_id: supplierId ? Number(supplierId) : null,
|
|
discount,
|
|
shipping_cost: shippingCost,
|
|
notes: notes || null,
|
|
photo_keys: photos.map((p) => p.key),
|
|
existing_items: Object.entries(quantities)
|
|
.map(([priceId, quantity]) => ({
|
|
raw_material_price_id: Number(priceId),
|
|
quantity: parseFloat(quantity) || 0,
|
|
unit_price: priceMap.get(Number(priceId))?.price ?? 0,
|
|
}))
|
|
.filter((item) => item.quantity > 0),
|
|
};
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head title="Edit Belanja" />
|
|
|
|
<div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-2xl font-semibold tracking-tight">
|
|
Edit Belanja
|
|
</h2>
|
|
<Button asChild variant="outline">
|
|
<Link href={purchaseIndex.url()}>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Kembali
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<Form
|
|
action={update(purchase.id)}
|
|
method="put"
|
|
transform={(data) => ({
|
|
...data,
|
|
...getPayload(),
|
|
})}
|
|
onError={() => {
|
|
toast.error('Ada data yang belum sesuai, silakan periksa kembali input Anda.');
|
|
}}
|
|
>
|
|
{({ errors, processing }) => (
|
|
<div className="grid gap-6 md:grid-cols-3">
|
|
<div className="space-y-6 md:col-span-2">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>
|
|
Pilih Bahan Baku
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{Array.from(purchasedVariantsByMaterial.entries()).map(([materialName, group]) => (
|
|
<div key={materialName} className="space-y-2">
|
|
{isMultiMaterial && (
|
|
<p className="text-sm font-medium text-muted-foreground">
|
|
{group.name} ({group.unit})
|
|
</p>
|
|
)}
|
|
{group.items.map((price) => (
|
|
<div
|
|
key={price.id}
|
|
className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3"
|
|
>
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
{price.photo_conversion_url ?? price.photo_url ? (
|
|
<img
|
|
src={price.photo_conversion_url ?? price.photo_url!}
|
|
alt={price.variant}
|
|
className="h-10 w-10 shrink-0 cursor-pointer rounded-md object-cover"
|
|
onClick={() => setVariantPreview({ src: price.photo_url ?? null, title: price.variant, description: group.name })}
|
|
/>
|
|
) : (
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
|
|
N/A
|
|
</div>
|
|
)}
|
|
<div className="min-w-0">
|
|
<p className="truncate font-medium">
|
|
{price.variant}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
Stok:{' '}
|
|
{formatQuantity(Number(price.stock))}{' '}
|
|
{group.unit} · {formatCurrency(price.price)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon"
|
|
disabled={
|
|
(parseFloat(quantities[price.id] ?? '0') || 0) <= 0
|
|
}
|
|
onClick={() =>
|
|
incrementQuantity(price.id, -1)
|
|
}
|
|
>
|
|
<Minus className="h-4 w-4" />
|
|
</Button>
|
|
<Input
|
|
type="text"
|
|
inputMode="decimal"
|
|
className="w-24 text-center"
|
|
value={quantities[price.id] ?? '0'}
|
|
onChange={(e) =>
|
|
updateQuantity(price.id, e.target.value)
|
|
}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() =>
|
|
incrementQuantity(price.id, 1)
|
|
}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="space-y-6 md:col-span-1">
|
|
<Card className="sticky top-6">
|
|
<CardHeader>
|
|
<CardTitle>Ringkasan</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid gap-2">
|
|
<Label>
|
|
Supplier{' '}
|
|
<span className="text-destructive">
|
|
*
|
|
</span>
|
|
</Label>
|
|
<Combobox
|
|
items={suppliers}
|
|
itemToStringLabel={(s) =>
|
|
s.name
|
|
}
|
|
value={selectedSupplier}
|
|
onValueChange={(value) =>
|
|
setSupplierId(
|
|
value
|
|
? String(value.id)
|
|
: '',
|
|
)
|
|
}
|
|
>
|
|
<ComboboxInput
|
|
placeholder="Cari supplier..."
|
|
className="w-full"
|
|
/>
|
|
<ComboboxContent>
|
|
<ComboboxEmpty>
|
|
Tidak ada supplier
|
|
ditemukan.
|
|
</ComboboxEmpty>
|
|
<ComboboxList>
|
|
{(s) => (
|
|
<ComboboxItem
|
|
key={s.id}
|
|
value={s}
|
|
>
|
|
{s.name}
|
|
</ComboboxItem>
|
|
)}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
<InputError
|
|
message={errors.supplier_id}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-muted-foreground">
|
|
Subtotal
|
|
</span>
|
|
<span className="font-medium">
|
|
{formatCurrency(subtotal)}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-muted-foreground">
|
|
Diskon
|
|
</span>
|
|
<div className="w-36">
|
|
<RupiahInput
|
|
value={discount}
|
|
onValueChange={
|
|
setDiscount
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<InputError
|
|
message={errors.discount}
|
|
/>
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-muted-foreground">
|
|
Ongkir
|
|
</span>
|
|
<div className="w-36">
|
|
<RupiahInput
|
|
value={shippingCost}
|
|
onValueChange={
|
|
setShippingCost
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<InputError
|
|
message={errors.shipping_cost}
|
|
/>
|
|
<div className="border-t pt-2">
|
|
<div className="flex items-center justify-between text-sm font-semibold">
|
|
<span>Total</span>
|
|
<span>
|
|
{formatCurrency(total)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="edit-notes">
|
|
Keterangan
|
|
</Label>
|
|
<Textarea
|
|
id="edit-notes"
|
|
value={notes}
|
|
onChange={(e) =>
|
|
setNotes(e.target.value)
|
|
}
|
|
placeholder="Masukkan keterangan"
|
|
maxLength={100}
|
|
/>
|
|
<InputError
|
|
message={errors.notes}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label>Foto</Label>
|
|
<FileUploadMultiple
|
|
value={photos}
|
|
onChange={setPhotos}
|
|
folder="purchase"
|
|
maxItems={5}
|
|
onUploadingChange={setUploading}
|
|
/>
|
|
<InputError
|
|
message={errors.photo_keys as string}
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full"
|
|
disabled={
|
|
processing ||
|
|
uploading ||
|
|
!supplierId ||
|
|
Object.values(
|
|
quantities,
|
|
).every((q) => (parseFloat(q) || 0) <= 0)
|
|
}
|
|
>
|
|
{processing
|
|
? 'Menyimpan...'
|
|
: 'Simpan'}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Form>
|
|
|
|
<Button
|
|
type="button"
|
|
onClick={() => setCartOpen(true)}
|
|
className="fixed top-1/2 right-4 z-50 h-14 w-14 -translate-y-1/2 rounded-full shadow-lg"
|
|
size="icon"
|
|
aria-label="Buka keranjang belanja"
|
|
>
|
|
<ShoppingCart className="h-5 w-5" />
|
|
{cartItems.length > 0 && (
|
|
<span className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-xs font-semibold text-white">
|
|
{cartItems.length}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
|
|
<Sheet open={cartOpen} onOpenChange={setCartOpen}>
|
|
<SheetContent side="right" className="w-full sm:max-w-md">
|
|
<SheetHeader>
|
|
<SheetTitle>Keranjang Belanja</SheetTitle>
|
|
</SheetHeader>
|
|
|
|
<div className="flex-1 space-y-3 overflow-y-auto px-6 pb-6">
|
|
{cartItems.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
Keranjang kosong.
|
|
</p>
|
|
) : (
|
|
cartItems.map((item) => (
|
|
<div
|
|
key={item.key}
|
|
className="space-y-3 rounded-lg border p-3"
|
|
>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex items-center gap-3">
|
|
{item.photoUrl ? (
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
setPreviewKey(
|
|
item.key,
|
|
)
|
|
}
|
|
className="block h-10 w-10 shrink-0 overflow-hidden rounded-md border transition-opacity hover:opacity-80"
|
|
>
|
|
<img
|
|
src={item.photoUrl}
|
|
alt={item.title}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</button>
|
|
) : (
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
|
|
N/A
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="font-medium">
|
|
{item.title}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{item.subtitle}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() =>
|
|
setCartRemoveKey(item.key)
|
|
}
|
|
>
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon-sm"
|
|
disabled={
|
|
(parseFloat(item.quantity) || 0) <= 0
|
|
}
|
|
onClick={() =>
|
|
item.onAdjust(-1)
|
|
}
|
|
>
|
|
<Minus className="h-4 w-4" />
|
|
</Button>
|
|
<Input
|
|
type="text"
|
|
inputMode="decimal"
|
|
className="w-20 text-center"
|
|
value={item.quantity}
|
|
onChange={(e) => item.onSet(e.target.value)}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon-sm"
|
|
onClick={() =>
|
|
item.onAdjust(1)
|
|
}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
{formatCurrency(
|
|
item.price * (parseFloat(item.quantity) || 0),
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
<SheetFooter>
|
|
<div className="flex items-center justify-between border-t pt-4">
|
|
<span className="text-sm">Subtotal</span>
|
|
<span className="text-sm font-semibold">
|
|
{formatCurrency(subtotal)}
|
|
</span>
|
|
</div>
|
|
</SheetFooter>
|
|
</SheetContent>
|
|
</Sheet>
|
|
|
|
<ImagePreviewModal
|
|
open={previewKey !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setPreviewKey(null);
|
|
}
|
|
}}
|
|
src={
|
|
cartItems.find((i) => i.key === previewKey)?.photoUrl ??
|
|
null
|
|
}
|
|
title={cartItems.find((i) => i.key === previewKey)?.title}
|
|
/>
|
|
|
|
<ImagePreviewModal
|
|
open={variantPreview !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setVariantPreview(null);
|
|
}
|
|
}}
|
|
src={variantPreview?.src ?? null}
|
|
title={variantPreview?.title}
|
|
description={variantPreview?.description}
|
|
/>
|
|
|
|
<ConfirmDialog
|
|
open={cartRemoveKey !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setCartRemoveKey(null);
|
|
}
|
|
}}
|
|
title="Hapus Item Keranjang"
|
|
description="Apakah Anda yakin ingin menghapus item ini dari keranjang?"
|
|
confirmLabel="Hapus"
|
|
variant="destructive"
|
|
onConfirm={() => {
|
|
cartItems
|
|
.find((i) => i.key === cartRemoveKey)
|
|
?.onRemove();
|
|
setCartRemoveKey(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|