649 lines
34 KiB
TypeScript
649 lines
34 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, useRef, useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { ConfirmDialog } from '@/components/dialogs';
|
|
import { FileUpload } from '@/components/inputs';
|
|
import { ImagePreviewModal } from '@/components/dialogs';
|
|
import { InputError } from '@/components/ui';
|
|
import { NumberInput } from '@/components/inputs';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Label } from '@/components/ui/label';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
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 restockIndex, update } from '@/routes/admin/manage/restocks';
|
|
import type { RestockCreateData, RestockForEdit } from './columns';
|
|
|
|
type CartLine = {
|
|
key: string;
|
|
photoUrl: string | null;
|
|
title: string;
|
|
subtitle: string;
|
|
price: number;
|
|
quantity: number;
|
|
onAdjust: (delta: number) => void;
|
|
onSet: (value: number) => void;
|
|
onRemove: () => void;
|
|
};
|
|
|
|
type Props = {
|
|
restock: RestockForEdit;
|
|
data: RestockCreateData;
|
|
};
|
|
|
|
export default function RestockEdit({ restock, data }: Props) {
|
|
const { products } = data;
|
|
|
|
const [stockType, setStockType] = useState<'good' | 'reject'>(
|
|
restock.stock_type === 'reject' ? 'reject' : 'good',
|
|
);
|
|
const selectedProductId = useMemo(() => {
|
|
const items = restock.items ?? [];
|
|
const product = products.find((p) =>
|
|
p.product_variants.some((v) =>
|
|
items.some((i) => i.product_variant_id === v.id),
|
|
),
|
|
);
|
|
|
|
return product ? String(product.id) : '';
|
|
}, [products, restock.items]);
|
|
const [quantities, setQuantities] = useState<Record<number, number>>(() =>
|
|
Object.fromEntries(
|
|
(restock.items ?? []).map((item) => [
|
|
item.product_variant_id,
|
|
item.quantity,
|
|
]),
|
|
),
|
|
);
|
|
const [notes, setNotes] = useState(restock.notes ?? '');
|
|
const [photo, setPhoto] = useState<string | null>(restock.photo_key);
|
|
const [photoUrl, setPhotoUrl] = useState<string | null>(restock.photo_url);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [cartOpen, setCartOpen] = useState(false);
|
|
const [previewKey, setPreviewKey] = useState<string | null>(null);
|
|
const [cartRemoveKey, setCartRemoveKey] = useState<string | null>(null);
|
|
|
|
const quantitiesRef = useRef(quantities);
|
|
|
|
useEffect(() => {
|
|
quantitiesRef.current = quantities;
|
|
}, [quantities]);
|
|
|
|
const selectedProduct = useMemo(
|
|
() => products.find((p) => String(p.id) === selectedProductId) ?? null,
|
|
[products, selectedProductId],
|
|
);
|
|
|
|
const variantById = useMemo(
|
|
() =>
|
|
new Map(
|
|
products.flatMap((p) =>
|
|
p.product_variants.map((v) => [v.id, v]),
|
|
),
|
|
),
|
|
[products],
|
|
);
|
|
|
|
const getUnitPrice = useCallback(
|
|
(variantId: number) => {
|
|
const variant = variantById.get(variantId);
|
|
|
|
if (!variant) {
|
|
return 0;
|
|
}
|
|
|
|
return stockType === 'reject' ? variant.reject_price : variant.capital_price;
|
|
},
|
|
[variantById, stockType],
|
|
);
|
|
|
|
const subtotal = Object.entries(quantities).reduce(
|
|
(sum, [variantId, quantity]) => {
|
|
const unitPrice = getUnitPrice(Number(variantId));
|
|
|
|
return sum + unitPrice * quantity;
|
|
},
|
|
0,
|
|
);
|
|
|
|
const updateQuantity = useCallback((variantId: number, value: number) => {
|
|
setQuantities((prev) => ({
|
|
...prev,
|
|
[variantId]: Math.max(0, value),
|
|
}));
|
|
}, []);
|
|
|
|
const incrementQuantity = useCallback(
|
|
(variantId: number, amount: number) => {
|
|
setQuantities((prev) => ({
|
|
...prev,
|
|
[variantId]: Math.max(0, (prev[variantId] ?? 0) + amount),
|
|
}));
|
|
},
|
|
[],
|
|
);
|
|
|
|
const cartItems: CartLine[] = (() => {
|
|
const lines: CartLine[] = [];
|
|
|
|
for (const [variantId, quantity] of Object.entries(quantities)) {
|
|
if (quantity <= 0) {
|
|
continue;
|
|
}
|
|
|
|
const id = Number(variantId);
|
|
const variant = variantById.get(id);
|
|
|
|
if (variant) {
|
|
const unitPrice = stockType === 'reject' ? variant.reject_price : variant.capital_price;
|
|
lines.push({
|
|
key: `variant-${id}`,
|
|
photoUrl: variant.photo_url,
|
|
title: variant.name,
|
|
subtitle: `${formatCurrency(unitPrice)} / pcs`,
|
|
price: unitPrice,
|
|
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 {
|
|
stock_type: stockType,
|
|
items: Object.entries(quantitiesRef.current)
|
|
.map(([variantId, quantity]) => ({
|
|
product_variant_id: Number(variantId),
|
|
quantity: Number(quantity),
|
|
}))
|
|
.filter((item) => item.quantity > 0),
|
|
notes: notes || null,
|
|
photo_key: photo,
|
|
};
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head title="Edit Restock" />
|
|
|
|
<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 Restock
|
|
</h2>
|
|
<Button asChild variant="outline">
|
|
<Link href={restockIndex.url()}>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Kembali
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<Form
|
|
action={update(restock.id)}
|
|
method="put"
|
|
transform={(formData) => ({
|
|
...formData,
|
|
...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>Item Restock</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{selectedProduct ? (
|
|
<div className="space-y-2">
|
|
{selectedProduct.product_variants.map(
|
|
(variant) => {
|
|
const currentStock =
|
|
stockType === 'good'
|
|
? variant.stock
|
|
: variant.reject_stock;
|
|
|
|
return (
|
|
<div
|
|
key={variant.id}
|
|
className={
|
|
(quantities[
|
|
variant
|
|
.id
|
|
] ?? 0) > 0
|
|
? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
|
|
: 'flex items-center justify-between gap-3 rounded-lg border p-3'
|
|
}
|
|
>
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
{variant.photo_url ? (
|
|
<img
|
|
src={
|
|
variant.photo_url
|
|
}
|
|
alt={
|
|
variant.name
|
|
}
|
|
className="h-10 w-10 shrink-0 rounded-md object-cover"
|
|
/>
|
|
) : (
|
|
<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">
|
|
{
|
|
variant.name
|
|
}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
Stok:{' '}
|
|
{formatQuantity(
|
|
Number(
|
|
currentStock,
|
|
),
|
|
)}{' '}
|
|
pcs
|
|
·{' '}
|
|
{formatCurrency(
|
|
stockType === 'reject'
|
|
? variant.reject_price
|
|
: variant.capital_price,
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon"
|
|
disabled={
|
|
!(
|
|
quantities[
|
|
variant
|
|
.id
|
|
] ??
|
|
0
|
|
)
|
|
}
|
|
onClick={() =>
|
|
incrementQuantity(
|
|
variant.id,
|
|
-1,
|
|
)
|
|
}
|
|
>
|
|
<Minus className="h-4 w-4" />
|
|
</Button>
|
|
<NumberInput
|
|
className="w-24 text-center"
|
|
value={
|
|
quantities[
|
|
variant
|
|
.id
|
|
] ??
|
|
0
|
|
}
|
|
onValueChange={(
|
|
val,
|
|
) =>
|
|
updateQuantity(
|
|
variant.id,
|
|
val,
|
|
)
|
|
}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() =>
|
|
incrementQuantity(
|
|
variant.id,
|
|
1,
|
|
)
|
|
}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">
|
|
Tidak ada item.
|
|
</p>
|
|
)}
|
|
<InputError message={errors.items} />
|
|
</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>Jenis Stok</Label>
|
|
<RadioGroup
|
|
value={stockType}
|
|
onValueChange={(value) =>
|
|
setStockType(
|
|
value as
|
|
'good' | 'reject',
|
|
)
|
|
}
|
|
className="flex flex-wrap gap-4"
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem
|
|
value="good"
|
|
id="edit-stock-type-good"
|
|
/>
|
|
<Label
|
|
htmlFor="edit-stock-type-good"
|
|
className="font-normal"
|
|
>
|
|
Bagus
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem
|
|
value="reject"
|
|
id="edit-stock-type-reject"
|
|
/>
|
|
<Label
|
|
htmlFor="edit-stock-type-reject"
|
|
className="font-normal"
|
|
>
|
|
Reject
|
|
</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
<InputError
|
|
message={errors.stock_type}
|
|
/>
|
|
</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="border-t pt-2">
|
|
<div className="flex items-center justify-between text-sm font-semibold">
|
|
<span>Total</span>
|
|
<span>
|
|
{formatCurrency(
|
|
subtotal,
|
|
)}
|
|
</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>
|
|
<FileUpload
|
|
value={photo}
|
|
onChange={(key) => {
|
|
setPhoto(key);
|
|
setPhotoUrl(
|
|
key
|
|
? getTemporaryUrl(
|
|
key,
|
|
)
|
|
: null,
|
|
);
|
|
}}
|
|
folder="restock"
|
|
existingUrl={photoUrl}
|
|
onUploadingChange={setUploading}
|
|
/>
|
|
<InputError
|
|
message={errors.photo_key}
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full"
|
|
disabled={
|
|
processing ||
|
|
uploading ||
|
|
Object.values(quantities).every(
|
|
(q) => q <= 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 restock"
|
|
>
|
|
<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 Restock</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="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon-sm"
|
|
disabled={
|
|
item.quantity <= 0
|
|
}
|
|
onClick={() =>
|
|
item.onAdjust(-1)
|
|
}
|
|
>
|
|
<Minus className="h-4 w-4" />
|
|
</Button>
|
|
<NumberInput
|
|
className="w-20 text-center"
|
|
value={item.quantity}
|
|
onValueChange={item.onSet}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon-sm"
|
|
onClick={() =>
|
|
item.onAdjust(1)
|
|
}
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<span className="font-medium">
|
|
{formatCurrency(
|
|
item.price * item.quantity,
|
|
)}
|
|
</span>
|
|
</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}
|
|
/>
|
|
|
|
<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>
|
|
</>
|
|
);
|
|
}
|