1140 lines
62 KiB
TypeScript
1140 lines
62 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 { ImagePreviewModal } from '@/components/dialogs';
|
|
import { FileUpload } from '@/components/inputs';
|
|
import { NumberInput } from '@/components/inputs';
|
|
import { RupiahInput } from '@/components/inputs';
|
|
import { InputError } from '@/components/ui';
|
|
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 { FieldDescription } from '@/components/ui/field';
|
|
import { Label } from '@/components/ui/label';
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetFooter,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
} from '@/components/ui/sheet';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { useCan } from '@/hooks/use-can';
|
|
import { formatNumber } from '@/lib/format';
|
|
import { getTemporaryUrl } from '@/lib/upload';
|
|
import { formatCurrency } from '@/lib/utils';
|
|
import { index as transactionIndex, update } from '@/routes/admin/manage/transactions';
|
|
import type { ProductVariantForTransaction, TransactionCreateData, TransactionForEdit } 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 = {
|
|
transaction: TransactionForEdit;
|
|
products: TransactionCreateData['products'];
|
|
customers: TransactionCreateData['customers'];
|
|
employees: TransactionCreateData['employees'];
|
|
channelOptions: TransactionCreateData['channelOptions'];
|
|
paymentTypeOptions: TransactionCreateData['paymentTypeOptions'];
|
|
priceTypeOptions: TransactionCreateData['priceTypeOptions'];
|
|
};
|
|
|
|
const SELLING_PRICE_TYPES = ['distributor', 'agent', 'sub_agent', 'wholesale', 'retail', 'tiktok', 'shopee', 'reject_selling'];
|
|
|
|
export default function TransactionEdit({
|
|
transaction,
|
|
products,
|
|
customers,
|
|
employees,
|
|
channelOptions,
|
|
paymentTypeOptions,
|
|
priceTypeOptions,
|
|
}: Props) {
|
|
|
|
const { hasRole } = useCan();
|
|
const isCashier = hasRole('cashier');
|
|
|
|
const [stockType, setStockType] = useState<'good' | 'reject'>(
|
|
transaction.stock_type === 'reject' ? 'reject' : 'good',
|
|
);
|
|
const [channel, setChannel] = useState(transaction.channel);
|
|
const [priceType, setPriceType] = useState(transaction.price_type);
|
|
const [paymentType, setPaymentType] = useState(transaction.payment_type);
|
|
const [customerId, setCustomerId] = useState<number | null>(transaction.customer_id);
|
|
const [marketingId, setMarketingId] = useState<number | null>(transaction.marketing_id);
|
|
const [discount, setDiscount] = useState(transaction.discount);
|
|
const initialSubtotal = (transaction.items ?? []).reduce(
|
|
(sum, item) => sum + item.unit_price * item.quantity,
|
|
0,
|
|
);
|
|
const [negoPrice, setNegoPrice] = useState<number | null>(
|
|
transaction.nego_price != null
|
|
? initialSubtotal - transaction.discount - transaction.nego_price
|
|
: null,
|
|
);
|
|
const [isCompleted, setIsCompleted] = useState(transaction.is_completed);
|
|
const [notes, setNotes] = useState(transaction.notes ?? '');
|
|
const [photo, setPhoto] = useState<string | null>(transaction.photo_key);
|
|
const [photoUrl, setPhotoUrl] = useState<string | null>(transaction.photo_url);
|
|
const [uploading, setUploading] = useState(false);
|
|
const [fetchedVariants, setFetchedVariants] = useState<Map<number, ProductVariantForTransaction[]>>(new Map());
|
|
const [loadingVariants, setLoadingVariants] = useState(false);
|
|
const [selectedProductId, setSelectedProductId] = useState(() => {
|
|
const firstProductId = transaction.existing_product_ids?.[0];
|
|
return firstProductId ? String(firstProductId) : '';
|
|
});
|
|
const [quantities, setQuantities] = useState<Record<number, number>>(() =>
|
|
Object.fromEntries(
|
|
(transaction.items ?? []).map((item) => [
|
|
item.product_variant_id,
|
|
item.quantity,
|
|
]),
|
|
),
|
|
);
|
|
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]);
|
|
|
|
useEffect(() => {
|
|
if (channel === 'tiktok') {
|
|
setPriceType('tiktok');
|
|
setPaymentType('marketplace');
|
|
} else if (channel === 'shopee') {
|
|
setPriceType('shopee');
|
|
setPaymentType('marketplace');
|
|
} else if (isCashier) {
|
|
setPriceType('retail');
|
|
}
|
|
}, [channel, isCashier]);
|
|
|
|
useEffect(() => {
|
|
if (stockType === 'reject') {
|
|
setPriceType('reject_selling');
|
|
} else if (isCashier) {
|
|
setPriceType('retail');
|
|
} else if (priceType === 'reject_selling') {
|
|
setPriceType('retail');
|
|
}
|
|
}, [stockType, isCashier]);
|
|
|
|
const [tiktokOrderId, setTiktokOrderId] = useState(transaction.tiktok_order_id ?? '');
|
|
const [shopeeOrderId, setShopeeOrderId] = useState(transaction.shopee_order_id ?? '');
|
|
|
|
const selectedProduct = useMemo(
|
|
() => products.find((p) => String(p.id) === selectedProductId) ?? null,
|
|
[products, selectedProductId],
|
|
);
|
|
|
|
useEffect(() => {
|
|
const productIds = transaction.existing_product_ids ?? [];
|
|
if (productIds.length === 0) return;
|
|
|
|
const toFetch = productIds.filter((id) => !fetchedVariants.has(id));
|
|
if (toFetch.length === 0) return;
|
|
|
|
setLoadingVariants(true);
|
|
Promise.all(
|
|
toFetch.map((id) =>
|
|
fetch(`/admin/master/products/${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 produk.');
|
|
})
|
|
.finally(() => setLoadingVariants(false));
|
|
}, [transaction.existing_product_ids]);
|
|
|
|
useEffect(() => {
|
|
if (!selectedProduct) return;
|
|
if (fetchedVariants.has(selectedProduct.id)) return;
|
|
|
|
setLoadingVariants(true);
|
|
fetch(`/admin/master/products/${selectedProduct.id}/variants`)
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
setFetchedVariants((prev) => {
|
|
const next = new Map(prev);
|
|
next.set(selectedProduct.id, data.variants);
|
|
return next;
|
|
});
|
|
})
|
|
.catch(() => {
|
|
toast.error('Gagal memuat varian produk.');
|
|
})
|
|
.finally(() => setLoadingVariants(false));
|
|
}, [selectedProduct, fetchedVariants]);
|
|
|
|
const variantById = useMemo(() => {
|
|
const map = new Map<number, ProductVariantForTransaction>();
|
|
for (const [, variants] of fetchedVariants) {
|
|
for (const v of variants) {
|
|
map.set(v.id, v);
|
|
}
|
|
}
|
|
return map;
|
|
}, [fetchedVariants]);
|
|
|
|
const productByVariantId = useMemo(() => {
|
|
const map = new Map<number, string>();
|
|
for (const [productId, variants] of fetchedVariants) {
|
|
const product = products.find((p) => p.id === productId);
|
|
if (!product) continue;
|
|
for (const v of variants) {
|
|
map.set(v.id, product.name);
|
|
}
|
|
}
|
|
return map;
|
|
}, [fetchedVariants, products]);
|
|
|
|
const showPhoto = paymentType === 'transfer' || paymentType === 'qris';
|
|
|
|
const availablePriceTypes = useMemo(() => {
|
|
if (stockType === 'reject') {
|
|
return priceTypeOptions.filter((o) => o.value === 'reject_selling');
|
|
}
|
|
|
|
if (isCashier) {
|
|
return priceTypeOptions.filter((o) => o.value === 'retail');
|
|
}
|
|
|
|
return priceTypeOptions.filter((o) => SELLING_PRICE_TYPES.includes(o.value) && o.value !== 'retail');
|
|
}, [stockType, priceTypeOptions, isCashier]);
|
|
|
|
const getUnitPrice = useCallback(
|
|
(variantId: number) => {
|
|
const variant = variantById.get(variantId);
|
|
|
|
if (!variant) {
|
|
return 0;
|
|
}
|
|
|
|
if (stockType === 'reject') {
|
|
return variant.prices?.reject_selling ?? 0;
|
|
}
|
|
|
|
if (isCashier) {
|
|
return variant.prices?.retail ?? 0;
|
|
}
|
|
|
|
return variant.prices?.[priceType] ?? 0;
|
|
},
|
|
[variantById, stockType, priceType, isCashier],
|
|
);
|
|
|
|
const subtotal = Object.entries(quantities).reduce(
|
|
(sum, [variantId, quantity]) => {
|
|
const unitPrice = getUnitPrice(Number(variantId));
|
|
|
|
return sum + unitPrice * quantity;
|
|
},
|
|
0,
|
|
);
|
|
|
|
const total = negoPrice ?? (subtotal - discount);
|
|
|
|
const updateQuantity = useCallback((variantId: number, value: number) => {
|
|
setQuantities((prev) => ({
|
|
...prev,
|
|
[variantId]: Math.max(0, value),
|
|
}));
|
|
}, []);
|
|
|
|
const incrementQuantity = useCallback(
|
|
(variantId: number, amount: number) => {
|
|
if (amount > 0 && getUnitPrice(variantId) <= 0) {
|
|
toast.error('Harga produk ini belum diatur.');
|
|
|
|
return;
|
|
}
|
|
|
|
setQuantities((prev) => ({
|
|
...prev,
|
|
[variantId]: Math.max(0, (prev[variantId] ?? 0) + amount),
|
|
}));
|
|
},
|
|
[getUnitPrice],
|
|
);
|
|
|
|
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 = getUnitPrice(id);
|
|
const productName = productByVariantId.get(id) ?? '';
|
|
lines.push({
|
|
key: `variant-${id}`,
|
|
photoUrl: variant.photo_url,
|
|
title: `${productName} — ${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;
|
|
})();
|
|
|
|
function formatQuantity(value: number): string {
|
|
return formatNumber(value, { maximumFractionDigits: 4 });
|
|
}
|
|
|
|
function getPayload() {
|
|
return {
|
|
stock_type: stockType === 'good' && isCashier ? 'retail' : stockType,
|
|
channel,
|
|
price_type: stockType === 'reject' ? 'reject_selling' : (isCashier ? 'retail' : priceType),
|
|
payment_type: paymentType,
|
|
customer_id: customerId,
|
|
marketing_id: marketingId,
|
|
discount,
|
|
nego_price: negoPrice,
|
|
is_completed: isCompleted,
|
|
tiktok_order_id: channel === 'tiktok' ? tiktokOrderId || null : null,
|
|
shopee_order_id: channel === 'shopee' ? shopeeOrderId || null : null,
|
|
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: showPhoto ? photo : null,
|
|
};
|
|
}
|
|
|
|
if (transaction.id == null) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-muted-foreground">Transaksi tidak ditemukan.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head title="Edit Transaksi" />
|
|
|
|
<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 Transaksi
|
|
</h2>
|
|
<Button asChild variant="outline">
|
|
<Link href={transactionIndex.url()}>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
Kembali
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<Form
|
|
action={update(transaction.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>Pilih Produk</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid gap-2">
|
|
<Label>
|
|
Nama Produk{' '}
|
|
<span className="text-destructive">
|
|
*
|
|
</span>
|
|
</Label>
|
|
<Combobox
|
|
items={products}
|
|
itemToStringLabel={(p) =>
|
|
p.name
|
|
}
|
|
value={selectedProduct}
|
|
onValueChange={(value) =>
|
|
setSelectedProductId(
|
|
value
|
|
? String(value.id)
|
|
: '',
|
|
)
|
|
}
|
|
>
|
|
<ComboboxInput
|
|
placeholder="Cari produk..."
|
|
className="w-full"
|
|
/>
|
|
<ComboboxContent>
|
|
<ComboboxEmpty>
|
|
Tidak ada produk
|
|
ditemukan.
|
|
</ComboboxEmpty>
|
|
<ComboboxList>
|
|
{(p) => (
|
|
<ComboboxItem
|
|
key={p.id}
|
|
value={p}
|
|
>
|
|
{p.name}
|
|
</ComboboxItem>
|
|
)}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
<InputError
|
|
message={errors.items}
|
|
/>
|
|
</div>
|
|
|
|
{selectedProduct && (
|
|
<div className="space-y-2">
|
|
{loadingVariants ? (
|
|
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
|
|
Memuat varian...
|
|
</div>
|
|
) : fetchedVariants.get(selectedProduct.id)?.length === 0 ? (
|
|
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
|
|
Tidak ada varian ditemukan.
|
|
</div>
|
|
) : (
|
|
(fetchedVariants.get(selectedProduct.id) ?? []).map(
|
|
(variant) => {
|
|
const currentStock =
|
|
stockType === 'reject'
|
|
? variant.reject_stock
|
|
: (isCashier ? variant.retail_stock : variant.stock);
|
|
|
|
return (
|
|
<div
|
|
key={variant.id}
|
|
className={
|
|
(quantities[
|
|
variant
|
|
.id
|
|
] ?? 0) > 0
|
|
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
|
|
: 'flex flex-wrap items-center justify-between gap-2 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
|
|
·{' '}
|
|
{getUnitPrice(variant.id) <= 0 ? (
|
|
<span className="text-destructive">Harga belum diatur</span>
|
|
) : (
|
|
formatCurrency(
|
|
stockType === 'reject'
|
|
? (variant.prices?.reject_selling ?? 0)
|
|
: (isCashier ? (variant.prices?.retail ?? 0) : (variant.prices?.[priceType] ?? 0)),
|
|
)
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex 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"
|
|
disabled={getUnitPrice(variant.id) <= 0}
|
|
onClick={() =>
|
|
incrementQuantity(
|
|
variant.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>Tipe Stok <span className="text-destructive">*</span></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="grid gap-2">
|
|
<Label>Channel <span className="text-destructive">*</span></Label>
|
|
<Select
|
|
value={channel}
|
|
onValueChange={setChannel}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Pilih channel" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{channelOptions.map(
|
|
(opt) => (
|
|
<SelectItem
|
|
key={opt.value}
|
|
value={opt.value}
|
|
>
|
|
{opt.label}
|
|
</SelectItem>
|
|
),
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
<InputError
|
|
message={errors.channel}
|
|
/>
|
|
</div>
|
|
|
|
{channel === 'tiktok' && (
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="edit-tiktok_order_id">
|
|
ID Pesanan TikTok
|
|
</Label>
|
|
<input
|
|
id="edit-tiktok_order_id"
|
|
type="text"
|
|
value={tiktokOrderId}
|
|
onChange={(e) => setTiktokOrderId(e.target.value)}
|
|
placeholder="Masukkan ID pesanan TikTok"
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
|
|
/>
|
|
<InputError
|
|
message={errors.tiktok_order_id}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{channel === 'shopee' && (
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="edit-shopee_order_id">
|
|
ID Pesanan Shopee
|
|
</Label>
|
|
<input
|
|
id="edit-shopee_order_id"
|
|
type="text"
|
|
value={shopeeOrderId}
|
|
onChange={(e) => setShopeeOrderId(e.target.value)}
|
|
placeholder="Masukkan ID pesanan Shopee"
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
|
|
/>
|
|
<InputError
|
|
message={errors.shopee_order_id}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{!isCashier && (
|
|
<div className="grid gap-2">
|
|
<Label>Tipe Harga <span className="text-destructive">*</span></Label>
|
|
<Select
|
|
value={priceType}
|
|
onValueChange={setPriceType}
|
|
disabled={channel === 'tiktok' || channel === 'shopee'}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Pilih tipe harga" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{availablePriceTypes.map(
|
|
(opt) => (
|
|
<SelectItem
|
|
key={opt.value}
|
|
value={opt.value}
|
|
>
|
|
{opt.label}
|
|
</SelectItem>
|
|
),
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
<InputError
|
|
message={errors.price_type}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid gap-2">
|
|
<Label>Tipe Pembayaran <span className="text-destructive">*</span></Label>
|
|
<Select
|
|
value={paymentType}
|
|
onValueChange={setPaymentType}
|
|
disabled={channel === 'tiktok' || channel === 'shopee'}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Pilih tipe pembayaran" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{paymentTypeOptions.map(
|
|
(opt) => (
|
|
<SelectItem
|
|
key={opt.value}
|
|
value={opt.value}
|
|
>
|
|
{opt.label}
|
|
</SelectItem>
|
|
),
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
<InputError
|
|
message={errors.payment_type}
|
|
/>
|
|
</div>
|
|
|
|
{showPhoto && (
|
|
<div className="grid gap-2">
|
|
<Label>Foto <span className="text-destructive">*</span></Label>
|
|
<FileUpload
|
|
value={photo}
|
|
onChange={(key) => {
|
|
setPhoto(key);
|
|
setPhotoUrl(
|
|
key
|
|
? getTemporaryUrl(
|
|
key,
|
|
)
|
|
: null,
|
|
);
|
|
}}
|
|
folder="transaction"
|
|
existingUrl={photoUrl}
|
|
onUploadingChange={setUploading}
|
|
/>
|
|
<InputError
|
|
message={errors.photo_key}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid gap-2">
|
|
<Label>Pelanggan</Label>
|
|
<Combobox
|
|
items={customers}
|
|
itemToStringLabel={(c) => c.name}
|
|
value={customers.find((c) => c.id === customerId) ?? null}
|
|
onValueChange={(value) =>
|
|
setCustomerId(value ? value.id : null)
|
|
}
|
|
>
|
|
<ComboboxInput
|
|
placeholder="Pilih pelanggan..."
|
|
className="w-full"
|
|
/>
|
|
<ComboboxContent>
|
|
<ComboboxEmpty>
|
|
Tidak ada pelanggan.
|
|
</ComboboxEmpty>
|
|
<ComboboxList>
|
|
{(c) => (
|
|
<ComboboxItem
|
|
key={c.id}
|
|
value={c}
|
|
>
|
|
{c.name}
|
|
</ComboboxItem>
|
|
)}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
<InputError
|
|
message={errors.customer_id}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label>Marketing</Label>
|
|
<Combobox
|
|
items={employees}
|
|
itemToStringLabel={(e) =>
|
|
e.user_profile?.full_name ?? '-'
|
|
}
|
|
value={employees.find((e) => e.id === marketingId) ?? null}
|
|
onValueChange={(value) =>
|
|
setMarketingId(value ? value.id : null)
|
|
}
|
|
>
|
|
<ComboboxInput
|
|
placeholder="Pilih marketing..."
|
|
className="w-full"
|
|
/>
|
|
<ComboboxContent>
|
|
<ComboboxEmpty>
|
|
Tidak ada karyawan.
|
|
</ComboboxEmpty>
|
|
<ComboboxList>
|
|
{(e) => (
|
|
<ComboboxItem
|
|
key={e.id}
|
|
value={e}
|
|
>
|
|
{e.user_profile?.full_name ?? '-'}
|
|
</ComboboxItem>
|
|
)}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
<InputError
|
|
message={errors.marketing_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="grid gap-2">
|
|
<Label htmlFor="edit-discount">
|
|
Diskon
|
|
</Label>
|
|
<RupiahInput
|
|
id="edit-discount"
|
|
value={discount}
|
|
onValueChange={setDiscount}
|
|
placeholder="0"
|
|
/>
|
|
<InputError
|
|
message={errors.discount}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="edit-nego_price">
|
|
Harga Nego
|
|
</Label>
|
|
<RupiahInput
|
|
id="edit-nego_price"
|
|
value={negoPrice ?? 0}
|
|
onValueChange={(val) =>
|
|
setNegoPrice(val || null)
|
|
}
|
|
placeholder="0"
|
|
/>
|
|
<FieldDescription>
|
|
Harga akhir setelah dinego dengan customer.
|
|
</FieldDescription>
|
|
<InputError
|
|
message={errors.nego_price}
|
|
/>
|
|
</div>
|
|
|
|
<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="flex items-center justify-between">
|
|
<Label htmlFor="edit-is_completed">
|
|
Pesanan Selesai
|
|
</Label>
|
|
<Switch
|
|
id="edit-is_completed"
|
|
checked={isCompleted}
|
|
onCheckedChange={setIsCompleted}
|
|
/>
|
|
</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>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full"
|
|
disabled={
|
|
processing ||
|
|
uploading ||
|
|
Object.values(quantities).every(
|
|
(q) => q <= 0,
|
|
) ||
|
|
Object.entries(quantities).some(
|
|
([id, q]) => q > 0 && getUnitPrice(Number(id)) <= 0,
|
|
) ||
|
|
total <= 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 transaksi"
|
|
>
|
|
<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 Transaksi</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={
|
|
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>
|
|
<div className="text-right">
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|
{formatCurrency(
|
|
item.price * item.quantity,
|
|
)}
|
|
</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}
|
|
/>
|
|
|
|
<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>
|
|
</>
|
|
);
|
|
}
|