50b2be68ac
- Integrated toast notifications to display error messages when form submissions fail across various components, enhancing user feedback and experience. - Updated components including DeleteUser, FormDialog, ManageTwoFactor, TwoFactorRecoveryCodes, TwoFactorSetupModal, PayrollPeriodShow, EmployeeCreate, EmployeeEdit, CuttingCreate, CuttingEdit, PurchaseCreate, PurchaseEdit, RestockCreate, RestockEdit, TransactionCreate, TransactionEdit, Category management, Product management, Raw Material management, Role management, Settings, and Authentication pages.
649 lines
35 KiB
TypeScript
649 lines
35 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/confirm-dialog';
|
|
import { FileUpload } from '@/components/file-upload';
|
|
import { ImagePreviewModal } from '@/components/image-preview-modal';
|
|
import InputError from '@/components/input-error';
|
|
import { NumberInput } from '@/components/number-input';
|
|
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('Terjadi kesalahan saat menyimpan data. 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>
|
|
</>
|
|
);
|
|
}
|