wirabasalamah/AbelBirdNest-Stock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine purchase receipt and lot label flow

Browse Source
This commit is contained in:
wirabasalamah
2026-05-29 05:21:28 +07:00
parent 8f08d24a4e
commit d0bdd4bb63
7 changed files with 413 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
scripts/seed-local-superadmin.mjs Normal file
View File

@ -0,0 +1,66 @@
import { randomBytes, scryptSync } from "node:crypto";
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
const roles = [
{ code: "ADMIN", name: "Administrator" },
{ code: "OWNER", name: "Owner" },
{ code: "PURCHASING", name: "Purchasing" },
{ code: "WAREHOUSE", name: "Warehouse" },
{ code: "QC", name: "Quality Control" },
{ code: "SALES", name: "Sales" },
{ code: "SYSTEM_ADMIN", name: "System Admin" }
];
function hashPassword(password) {
const salt = randomBytes(16).toString("hex");
const derived = scryptSync(password, salt, 64).toString("hex");
return `${salt}:${derived}`;
}
async function main() {
for (const role of roles) {
await prisma.role.upsert({
where: { code: role.code },
update: { name: role.name },
create: role
});
}
const role = await prisma.role.findUniqueOrThrow({
where: { code: "SYSTEM_ADMIN" }
});
await prisma.user.upsert({
where: { email: "wirabasalamah@gmail.com" },
update: {
roleId: role.id,
username: "wirabasalamah",
name: "Wira Basalamah",
passwordHash: hashPassword("password"),
emailVerifiedAt: new Date(),
status: "ACTIVE"
},
create: {
roleId: role.id,
username: "wirabasalamah",
email: "wirabasalamah@gmail.com",
name: "Wira Basalamah",
passwordHash: hashPassword("password"),
emailVerifiedAt: new Date(),
status: "ACTIVE"
}
});
}
main()
.then(async () => {
console.log("Seeded SYSTEM_ADMIN user: wirabasalamah@gmail.com");
await prisma.$disconnect();
})
.catch(async (error) => {
console.error(error);
await prisma.$disconnect();
process.exit(1);
});

9
src/app/api/v1/receipts/[id]/route.ts
View File

@ -23,7 +23,14 @@ const receiptDetailInclude = {
warehouseLocation: true
}
},
lots: true
lots: {
include: {
grade: true,
unit: true,
warehouse: true,
warehouseLocation: true
}
}
} as const;
export async function GET(request: Request, context: RouteContext) {

28
src/app/api/v1/receipts/route.ts
View File

@ -21,7 +21,14 @@ const receiptDetailInclude = {
warehouseLocation: true
}
},
lots: true
lots: {
include: {
grade: true,
unit: true,
warehouse: true,
warehouseLocation: true
}
}
} as const;
export async function GET(request: Request) {
@ -60,12 +67,8 @@ export async function POST(request: Request) {
const purchase = await prisma.purchase.findUnique({
where: { id: purchaseId },
include: {
_count: {
select: {
receipts: true,
lots: true
}
}
receipts: { select: { id: true, receiptNo: true } },
lots: { select: { id: true } }
}
});
@ -73,16 +76,13 @@ export async function POST(request: Request) {
return NextResponse.json({ message: "Purchase not found" }, { status: 404 });
}
if (purchase.status !== "SUBMITTED") {
return NextResponse.json(
{ message: "Purchase harus diajukan sebelum dibuatkan receipt." },
{ status: 409 }
);
if (purchase.status === "CANCELLED") {
return NextResponse.json({ message: "Purchase yang dibatalkan tidak bisa dibuatkan receipt" }, { status: 422 });
}
if (purchase._count.receipts > 0 || purchase._count.lots > 0) {
if (purchase.receipts.length > 0 || purchase.lots.length > 0) {
return NextResponse.json(
{ message: "Purchase sudah memiliki receipt/lot." },
{ message: `Purchase sudah memiliki receipt/lot ${purchase.receipts[0]?.receiptNo ?? ""}`.trim() },
{ status: 409 }
);
}

74
src/features/purchases/components/purchases-client.tsx
View File

@ -15,9 +15,7 @@ import type {
EmployeeRecord,
GradeRecord,
ProfitShareSchemeRecord,
UnitRecord,
WarehouseLocationRecord,
WarehouseRecord
UnitRecord
} from "@/types/master-data";
import type { PurchaseDetail, PurchaseListItem } from "@/types/purchase";
@ -51,8 +49,6 @@ type PurchaseForm = {
above_average_ratio_percent: string;
mk_share_percent: string;
non_mk_share_percent: string;
warehouse_id: string;
warehouse_location_id: string;
modal_beli: string;
modal_barang: string;
modal_masuk: string;
@ -107,8 +103,6 @@ const emptyForm = (): PurchaseForm => ({
above_average_ratio_percent: "",
mk_share_percent: "",
non_mk_share_percent: "",
warehouse_id: "",
warehouse_location_id: "",
modal_beli: "",
modal_barang: "",
modal_masuk: "",
@ -187,8 +181,6 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
const [profitShareSchemes, setProfitShareSchemes] = useState<ProfitShareSchemeRecord[]>([]);
const [couriers, setCouriers] = useState<CourierRecord[]>([]);
const [employees, setEmployees] = useState<EmployeeRecord[]>([]);
const [warehouses, setWarehouses] = useState<WarehouseRecord[]>([]);
const [locations, setLocations] = useState<WarehouseLocationRecord[]>([]);
const [form, setForm] = useState<PurchaseForm>(emptyForm);
const [editingId, setEditingId] = useState<string | null>(null);
const [selectedPurchase, setSelectedPurchase] = useState<PurchaseDetail | null>(null);
@ -209,8 +201,6 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
profitShareSchemesRes,
couriersRes,
employeesRes,
warehousesRes,
locationsRes,
gradesRes
] = await Promise.all([
fetch("/api/v1/purchases?purchase_type=REGULAR", { cache: "no-store" }),
@ -219,8 +209,6 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
fetch("/api/v1/profit-share-schemes", { cache: "no-store" }),
fetch("/api/v1/couriers", { cache: "no-store" }),
fetch("/api/v1/employees", { cache: "no-store" }),
fetch("/api/v1/warehouses", { cache: "no-store" }),
fetch("/api/v1/warehouse-locations", { cache: "no-store" }),
fetch("/api/v1/grades", { cache: "no-store" })
]);
@ -233,11 +221,6 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
);
const couriersPayload = await parseJsonResponse<{ data: CourierRecord[] }>(couriersRes, "Memuat daftar kurir");
const employeesPayload = await parseJsonResponse<{ data: EmployeeRecord[] }>(employeesRes, "Memuat daftar pegawai");
const warehousesPayload = await parseJsonResponse<{ data: WarehouseRecord[] }>(warehousesRes, "Memuat gudang");
const locationsPayload = await parseJsonResponse<{ data: WarehouseLocationRecord[] }>(
locationsRes,
"Memuat lokasi gudang"
);
const gradesPayload = await parseJsonResponse<{ data: GradeRecord[] }>(gradesRes, "Memuat grade");
if (
@ -247,8 +230,6 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
!profitShareSchemesRes.ok ||
!couriersRes.ok ||
!employeesRes.ok ||
!warehousesRes.ok ||
!locationsRes.ok ||
!gradesRes.ok
) {
throw new Error(dict.purchases.loadingError);
@ -260,8 +241,6 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
setProfitShareSchemes(profitShareSchemesPayload.data);
setCouriers(couriersPayload.data);
setEmployees(employeesPayload.data);
setWarehouses(warehousesPayload.data);
setLocations(locationsPayload.data);
setGrades(gradesPayload.data);
} catch (err) {
setError(err instanceof Error ? err.message : dict.purchases.loadingError);
@ -331,8 +310,6 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
setEditingId(detail.id);
const defaultUnitId = detail.lines[0]?.unit.id ?? units[0]?.id ?? "";
const defaultWarehouseId = detail.lines[0]?.warehouse?.id ?? "";
const defaultWarehouseLocationId = detail.lines[0]?.warehouse_location?.id ?? "";
const beratBeli = detail.analysis?.weight_buy ?? detail.lines.reduce((sum, line) => sum + line.qty_ordered, 0);
const beratMasuk = detail.analysis?.weight_received ?? beratBeli;
const derivedModalBarang = detail.lines.reduce(
@ -356,8 +333,6 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
above_average_ratio_percent: detail.above_average_ratio_percent?.toString() ?? "",
mk_share_percent: detail.mk_share_percent?.toString() ?? "",
non_mk_share_percent: detail.non_mk_share_percent?.toString() ?? "",
warehouse_id: defaultWarehouseId,
warehouse_location_id: defaultWarehouseLocationId,
modal_beli: String(modalBeli),
modal_barang: String(modalBarang),
modal_masuk: detail.analysis?.modal_masuk?.toString() ?? "",
@ -447,8 +422,8 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
const beratBeliKgPayload = convertQtyToKg(beratBeliPayload, selectedUnit?.code);
const modalBeliPayload = beratBeliKgPayload > 0 ? totalModalBeliValue / beratBeliKgPayload : 0;
const payload = {
warehouse_id: form.warehouse_id || "",
warehouse_location_id: form.warehouse_location_id || null,
warehouse_id: "",
warehouse_location_id: null,
modal_beli: modalBeliPayload,
modal_barang: modalBarangValue,
modal_masuk: modalMasuk ?? 0,
@ -485,8 +460,8 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
unit_cost: 0,
mal_unit_price: numberFromForm(line.mal_unit_price),
classification_status: "FINAL",
warehouse_id: form.warehouse_id || "",
warehouse_location_id: form.warehouse_location_id || null,
warehouse_id: "",
warehouse_location_id: null,
notes: line.notes || ""
})),
cost_lines: normalizedCostLines.map((costLine) => ({
@ -869,21 +844,14 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
});
}, [barangAtasRata2Value, computedMkSharePercent, computedNonMkSharePercent, kadarMasukValue]);
const locationOptions = useMemo(
() => locations.filter((location) => location.warehouse_id === form.warehouse_id),
[form.warehouse_id, locations]
);
const masterReady =
grades.length > 0 &&
units.length > 0 &&
employees.length > 0 &&
warehouses.length > 0;
employees.length > 0;
const missingMasterLabels = [
grades.length === 0 ? "grade" : null,
units.length === 0 ? "unit" : null,
employees.length === 0 ? "pegawai penerima" : null,
warehouses.length === 0 ? "gudang" : null
employees.length === 0 ? "pegawai penerima" : null
].filter((value): value is string => Boolean(value));
const agentMap = useMemo(() => {
@ -1112,29 +1080,6 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
<div aria-hidden="true" className="hidden md:block" />
</div>
<div className="grid gap-4 md:grid-cols-2">
<SelectField
label={dict.common.warehouse}
value={form.warehouse_id}
onChange={(value) =>
setForm((current) => ({
...current,
warehouse_id: value,
warehouse_location_id: ""
}))
}
options={warehouses.map((warehouse) => ({ value: warehouse.id, label: `${warehouse.code} - ${warehouse.name}` }))}
placeholder={dict.receipts.chooseWarehouse}
/>
<SelectField
label={dict.common.location}
value={form.warehouse_location_id}
onChange={(value) => setForm((current) => ({ ...current, warehouse_location_id: value }))}
options={locationOptions.map((location) => ({ value: location.id, label: `${location.code} - ${location.name}` }))}
placeholder={dict.purchases.optional}
/>
</div>
<label className="block">
<span className="ops-label">{dict.common.notes}</span>
<textarea value={form.notes} onChange={(e) => setForm((c) => ({ ...c, notes: e.target.value }))} rows={3} className="ops-textarea" />
@ -1298,9 +1243,8 @@ export function PurchasesClient({ currencyCode }: PurchasesClientProps) {
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<button type="submit" disabled={submitting || !masterReady || !form.unit_id} className="ops-btn-secondary">{dict.purchases.saveDraft}</button>
<button type="button" disabled={submitting || !masterReady || !form.unit_id} onClick={() => void savePurchase("submit")} className="ops-btn-primary">
{submitting ? dict.common.processing : dict.purchases.submit}
<button type="submit" disabled={submitting || !masterReady || !form.unit_id} className="ops-btn-primary">
{submitting ? dict.common.processing : dict.purchases.saveDraft}
</button>
</div>
{error ? <div className="rounded border border-ember/30 bg-ember/10 px-4 py-2 text-sm text-ember">{error}</div> : null}

299
src/features/receipts/components/receipts-client.tsx
View File

@ -1,5 +1,6 @@
"use client";
import { Printer, Tags } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { useLocale } from "@/components/providers/locale-provider";
@ -131,6 +132,15 @@ export function ReceiptsClient() {
setError(null);
}
async function fetchReceiptDetail(id: string) {
const response = await fetch(`/api/v1/receipts/${id}`, { cache: "no-store" });
const payload = (await response.json()) as DetailResponse<ReceiptDetail> | ApiErrorResponse;
if (!response.ok || !("data" in payload)) {
throw new Error("message" in payload ? payload.message : dict.receipts.detailError);
}
return payload.data;
}
function updateLine(index: number, patch: Partial<ReceiptLineForm>) {
setForm((current) => ({
...current,
@ -193,12 +203,25 @@ export function ReceiptsClient() {
async function openReceipt(id: string) {
setError(null);
try {
const response = await fetch(`/api/v1/receipts/${id}`, { cache: "no-store" });
const payload = (await response.json()) as DetailResponse<ReceiptDetail> | ApiErrorResponse;
if (!response.ok || !("data" in payload)) {
throw new Error(dict.receipts.detailError);
}
setSelectedReceipt(payload.data);
setSelectedReceipt(await fetchReceiptDetail(id));
} catch (err) {
setError(err instanceof Error ? err.message : dict.receipts.detailError);
}
}
async function printReceiptById(id: string) {
setError(null);
try {
printReceipt(await fetchReceiptDetail(id));
} catch (err) {
setError(err instanceof Error ? err.message : dict.receipts.detailError);
}
}
async function printLotLabelsById(id: string) {
setError(null);
try {
printLotLabels(await fetchReceiptDetail(id));
} catch (err) {
setError(err instanceof Error ? err.message : dict.receipts.detailError);
}
@ -221,9 +244,59 @@ export function ReceiptsClient() {
}
}
const submittedPurchases = useMemo(
() => purchases.filter((purchase) => purchase.status === "SUBMITTED"),
[purchases]
function printReceipt(detail: ReceiptDetail) {
setError(null);
const printWindow = window.open("", "_blank", "width=1120,height=760");
if (!printWindow) {
window.alert(locale === "id" ? "Popup cetak diblokir browser. Izinkan pop-up untuk situs ini lalu coba lagi." : "Print popup was blocked by the browser. Allow pop-ups for this site and try again.");
return;
}
try {
printWindow.document.open();
printWindow.document.write(buildReceiptPrintHtml(detail, locale));
printWindow.document.close();
} catch (err) {
if (!printWindow.closed) {
printWindow.close();
}
setError(err instanceof Error ? err.message : locale === "id" ? "Gagal menyiapkan cetak penerimaan." : "Failed to prepare receipt print.");
}
}
function printLotLabels(detail: ReceiptDetail) {
setError(null);
if (detail.generated_lots.length === 0) {
setError(locale === "id" ? "Belum ada lot yang bisa dicetak. Buat lot terlebih dahulu." : "No lot labels to print yet. Generate lots first.");
return;
}
const printWindow = window.open("", "_blank", "width=900,height=760");
if (!printWindow) {
window.alert(locale === "id" ? "Popup cetak diblokir browser. Izinkan pop-up untuk situs ini lalu coba lagi." : "Print popup was blocked by the browser. Allow pop-ups for this site and try again.");
return;
}
try {
printWindow.document.open();
printWindow.document.write(buildLotLabelsPrintHtml(detail, locale));
printWindow.document.close();
} catch (err) {
if (!printWindow.closed) {
printWindow.close();
}
setError(err instanceof Error ? err.message : locale === "id" ? "Gagal menyiapkan label lot." : "Failed to prepare lot labels.");
}
}
const receiptedPurchaseIds = useMemo(
() => new Set(items.map((item) => item.purchase.id)),
[items]
);
const receivablePurchases = useMemo(
() => purchases.filter((purchase) => purchase.status !== "CANCELLED" && !receiptedPurchaseIds.has(purchase.id)),
[purchases, receiptedPurchaseIds]
);
return (
@ -243,7 +316,7 @@ export function ReceiptsClient() {
<span className="ops-label">{dict.receipts.purchase}</span>
<select value={form.purchase_id} onChange={(event) => void handlePurchaseChange(event.target.value)} className="ops-select">
<option value="">{dict.receipts.choosePurchase}</option>
{submittedPurchases.map((purchase) => (
{receivablePurchases.map((purchase) => (
<option key={purchase.id} value={purchase.id}>
{purchase.purchase_no} · {purchase.agent?.name || dict.receipts.directPurchase}
</option>
@ -337,6 +410,24 @@ export function ReceiptsClient() {
<div className="flex gap-2">
<button type="button" onClick={() => void openReceipt(item.id)} className="ops-btn-secondary">{dict.common.detail}</button>
{item.status !== "FINALIZED" ? <button type="button" onClick={() => void generateLots(item.id)} className="ops-btn-primary">{dict.receipts.generateLots}</button> : null}
<button
type="button"
onClick={() => void printReceiptById(item.id)}
className="ops-btn-secondary"
>
<Printer className="h-4 w-4" />
{locale === "id" ? "Receipt" : "Receipt"}
</button>
{item.lot_count > 0 ? (
<button
type="button"
onClick={() => void printLotLabelsById(item.id)}
className="ops-btn-secondary"
>
<Tags className="h-4 w-4" />
{locale === "id" ? "Label lot" : "Lot labels"}
</button>
) : null}
</div>
</td>
</tr>
@ -355,7 +446,19 @@ export function ReceiptsClient() {
<h3 className="mt-2 text-2xl font-semibold text-ink">{selectedReceipt.receipt_no}</h3>
<p className="mt-2 text-sm text-slate-500">{selectedReceipt.purchase.purchase_no}</p>
</div>
{selectedReceipt.status !== "FINALIZED" ? <button type="button" onClick={() => void generateLots(selectedReceipt.id)} className="ops-btn-primary">{dict.receipts.generateLots}</button> : null}
<div className="flex flex-wrap items-center gap-2">
<button type="button" onClick={() => printReceipt(selectedReceipt)} className="ops-btn-secondary">
<Printer className="h-4 w-4" />
{locale === "id" ? "Cetak receipt" : "Print receipt"}
</button>
{selectedReceipt.generated_lots.length > 0 ? (
<button type="button" onClick={() => printLotLabels(selectedReceipt)} className="ops-btn-secondary">
<Tags className="h-4 w-4" />
{locale === "id" ? "Cetak label lot" : "Print lot labels"}
</button>
) : null}
{selectedReceipt.status !== "FINALIZED" ? <button type="button" onClick={() => void generateLots(selectedReceipt.id)} className="ops-btn-primary">{dict.receipts.generateLots}</button> : null}
</div>
</div>
<div className="mt-5 space-y-4">
{selectedReceipt.lines.map((line) => (
@ -372,7 +475,7 @@ export function ReceiptsClient() {
<div className="mt-3 space-y-2">
{selectedReceipt.generated_lots.map((lot) => (
<div key={lot.id} className="rounded border border-line/70 bg-white px-4 py-3 text-sm text-slate-600">
<span className="font-medium text-ink">{lot.lot_code}</span> · {lot.status}
<span className="font-medium text-ink">{lot.lot_code}</span> · {lot.grade?.name ?? "-"} · {formatQuantity(lot.original_qty, locale, lot.unit.code)} · {lot.status}
</div>
))}
</div>
@ -385,6 +488,178 @@ export function ReceiptsClient() {
);
}
function escapeHtml(value: string) {
return value
.replaceAll("&", "&amp;")
.replaceAll("<", "&lt;")
.replaceAll(">", "&gt;")
.replaceAll('"', "&quot;")
.replaceAll("'", "&#39;");
}
function buildReceiptPrintHtml(detail: ReceiptDetail, locale: string) {
const isIndonesian = locale === "id";
const safeReceiptNo = escapeHtml(detail.receipt_no);
const safePurchaseNo = escapeHtml(detail.purchase.purchase_no);
const safeDate = escapeHtml(new Date(detail.receipt_date).toLocaleDateString(isIndonesian ? "id-ID" : "en-US"));
const safeNotes = escapeHtml(detail.notes ?? "-");
const totalAccepted = detail.lines.reduce((sum, line) => sum + line.qty_accepted, 0);
const rows = detail.lines.map((line, index) => {
const safeGrade = escapeHtml(line.grade?.name ?? "-");
const safeWarehouse = escapeHtml(line.warehouse.name);
const safeLocation = escapeHtml(line.location?.name ?? "-");
const safeLineNotes = escapeHtml(line.notes ?? "-");
return `<tr>
<td>${index + 1}</td>
<td>${safeGrade}</td>
<td>${escapeHtml(formatQuantity(line.qty_received, locale, line.unit.code))}</td>
<td>${escapeHtml(formatQuantity(line.qty_accepted, locale, line.unit.code))}</td>
<td>${escapeHtml(formatQuantity(line.qty_rejected, locale, line.unit.code))}</td>
<td>${safeWarehouse}</td>
<td>${safeLocation}</td>
<td>${safeLineNotes}</td>
</tr>`;
}).join("");
const lotRows = detail.generated_lots.map((lot, index) => {
const safeGrade = escapeHtml(lot.grade?.name ?? "-");
return `<tr>
<td>${index + 1}</td>
<td>${escapeHtml(lot.lot_code)}</td>
<td>${safeGrade}</td>
<td>${escapeHtml(formatQuantity(lot.original_qty, locale, lot.unit.code))}</td>
<td>${escapeHtml(lot.status)}</td>
</tr>`;
}).join("");
return `<!doctype html>
<html lang="${isIndonesian ? "id" : "en"}">
<head>
<meta charset="utf-8" />
<title>${isIndonesian ? "Receipt Penerimaan" : "Receipt"} ${safeReceiptNo}</title>
<style>
body { margin: 0; background: #eef3f5; color: #182126; font-family: Arial, Helvetica, sans-serif; }
.sheet { max-width: 1120px; margin: 0 auto; padding: 24px; }
.paper { background: #fff; border: 1px solid #d9e2e7; padding: 28px; }
.top { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2px solid #182126; padding-bottom: 16px; }
h1 { margin: 0; font-size: 28px; letter-spacing: 0; }
.muted { color: #64748b; font-size: 12px; line-height: 1.5; }
.meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; }
.box { border: 1px solid #d9e2e7; padding: 10px 12px; }
.label { color: #64748b; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.value { margin-top: 4px; font-size: 14px; font-weight: 700; }
table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12px; }
th, td { border: 1px solid #d9e2e7; padding: 8px; text-align: left; vertical-align: top; }
th { background: #f1f5f9; font-size: 10px; text-transform: uppercase; color: #475569; }
h2 { margin: 24px 0 0; font-size: 16px; }
@media print {
body { background: #fff; }
.sheet { padding: 0; }
.paper { border: 0; }
}
</style>
</head>
<body onload="window.print()">
<div class="sheet">
<div class="paper">
<div class="top">
<div>
<h1>${isIndonesian ? "Receipt Penerimaan" : "Goods Receipt"}</h1>
<div class="muted">${safeReceiptNo}</div>
</div>
<div class="muted" style="text-align:right">
${isIndonesian ? "Pembelian" : "Purchase"}<br />
<strong>${safePurchaseNo}</strong>
</div>
</div>
<div class="meta">
<div class="box"><div class="label">${isIndonesian ? "Tanggal" : "Date"}</div><div class="value">${safeDate}</div></div>
<div class="box"><div class="label">${isIndonesian ? "Status" : "Status"}</div><div class="value">${escapeHtml(detail.status)}</div></div>
<div class="box"><div class="label">${isIndonesian ? "Baris" : "Lines"}</div><div class="value">${detail.lines.length}</div></div>
<div class="box"><div class="label">${isIndonesian ? "Total valid" : "Accepted total"}</div><div class="value">${escapeHtml(formatQuantity(totalAccepted, locale))}</div></div>
</div>
<div class="muted"><strong>${isIndonesian ? "Catatan" : "Notes"}:</strong> ${safeNotes}</div>
<h2>${isIndonesian ? "Baris Penerimaan" : "Receipt Lines"}</h2>
<table>
<thead><tr><th>No</th><th>Grade</th><th>${isIndonesian ? "Diterima" : "Received"}</th><th>${isIndonesian ? "Valid" : "Accepted"}</th><th>${isIndonesian ? "Ditolak" : "Rejected"}</th><th>${isIndonesian ? "Gudang" : "Warehouse"}</th><th>${isIndonesian ? "Lokasi" : "Location"}</th><th>${isIndonesian ? "Catatan" : "Notes"}</th></tr></thead>
<tbody>${rows}</tbody>
</table>
<h2>${isIndonesian ? "Lot Hasil" : "Generated Lots"}</h2>
<table>
<thead><tr><th>No</th><th>Lot</th><th>Grade</th><th>Qty</th><th>Status</th></tr></thead>
<tbody>${lotRows || `<tr><td colspan="5">${isIndonesian ? "Belum ada lot." : "No lots yet."}</td></tr>`}</tbody>
</table>
</div>
</div>
</body>
</html>`;
}
function buildLotLabelsPrintHtml(detail: ReceiptDetail, locale: string) {
const isIndonesian = locale === "id";
const labels = detail.generated_lots.map((lot) => {
const safeLotCode = escapeHtml(lot.lot_code);
const safeGrade = escapeHtml(lot.grade?.name ?? "-");
const safeWarehouse = escapeHtml(lot.warehouse.name);
const safeLocation = escapeHtml(lot.location?.name ?? "-");
const codeValue = escapeHtml(lot.qr_code_value || lot.barcode_value || lot.lot_code);
return `<section class="label">
<div class="label-head">
<div>
<div class="eyebrow">ABELBIRDNEST LOT</div>
<h2>${safeLotCode}</h2>
</div>
<div class="status">${escapeHtml(lot.status)}</div>
</div>
<div class="barcode">${codeValue}</div>
<div class="grid">
<div><span>Grade</span><strong>${safeGrade}</strong></div>
<div><span>Qty</span><strong>${escapeHtml(formatQuantity(lot.original_qty, locale, lot.unit.code))}</strong></div>
<div><span>${isIndonesian ? "Gudang" : "Warehouse"}</span><strong>${safeWarehouse}</strong></div>
<div><span>${isIndonesian ? "Lokasi" : "Location"}</span><strong>${safeLocation}</strong></div>
</div>
<div class="foot">
<span>${isIndonesian ? "Receipt" : "Receipt"} ${escapeHtml(detail.receipt_no)}</span>
<span>${escapeHtml(detail.receipt_date)}</span>
</div>
</section>`;
}).join("");
return `<!doctype html>
<html lang="${isIndonesian ? "id" : "en"}">
<head>
<meta charset="utf-8" />
<title>${isIndonesian ? "Label Lot" : "Lot Labels"} ${escapeHtml(detail.receipt_no)}</title>
<style>
body { margin: 0; background: #f1f5f9; color: #111827; font-family: Arial, Helvetica, sans-serif; }
.sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.label { break-inside: avoid; background: #fff; border: 1.5px solid #111827; border-radius: 6px; padding: 14px; min-height: 190px; display: flex; flex-direction: column; gap: 12px; }
.label-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.eyebrow { font-size: 9px; font-weight: 800; color: #64748b; letter-spacing: 0; }
h2 { margin: 3px 0 0; font-size: 24px; letter-spacing: 0; }
.status { border: 1px solid #111827; padding: 4px 7px; font-size: 10px; font-weight: 800; }
.barcode { border: 1px solid #cbd5e1; padding: 9px; text-align: center; font-family: "Courier New", monospace; font-size: 18px; font-weight: 800; letter-spacing: 2px; overflow-wrap: anywhere; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.grid div { border-top: 1px solid #e2e8f0; padding-top: 6px; }
.grid span { display: block; font-size: 9px; color: #64748b; font-weight: 800; text-transform: uppercase; }
.grid strong { display: block; margin-top: 2px; font-size: 12px; }
.foot { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; color: #64748b; font-size: 10px; }
@media print {
body { background: #fff; }
.sheet { padding: 0; gap: 8mm; }
.label { border-radius: 0; min-height: 48mm; }
}
</style>
</head>
<body onload="window.print()">
<main class="sheet">${labels}</main>
</body>
</html>`;
}
function Field({ label, value, onChange, type = "text", disabled = false }: { label: string; value: string; onChange?: (value: string) => void; type?: string; disabled?: boolean }) {
return (
<label className="block">

22
src/features/receipts/lib/serialize-receipt.ts
View File

@ -35,7 +35,15 @@ type ReceiptDetailSerializable = {
lots: Array<{
id: bigint;
lotCode: string;
originalQty: DecimalLike;
availableQty: DecimalLike;
qrCodeValue: string | null;
barcodeValue: string | null;
status: string;
grade: { id: bigint; name: string } | null;
unit: { id: bigint; code: string };
warehouse: { id: bigint; name: string };
warehouseLocation: { id: bigint; name: string } | null;
}>;
};
@ -85,7 +93,19 @@ export function serializeReceiptDetail(receipt: ReceiptDetailSerializable): Rece
generated_lots: receipt.lots.map((lot) => ({
id: lot.id.toString(),
lot_code: lot.lotCode,
status: lot.status
grade: lot.grade
? { id: lot.grade.id.toString(), name: lot.grade.name }
: null,
original_qty: lot.originalQty.toNumber(),
available_qty: lot.availableQty.toNumber(),
unit: { id: lot.unit.id.toString(), code: lot.unit.code },
warehouse: { id: lot.warehouse.id.toString(), name: lot.warehouse.name },
location: lot.warehouseLocation
? { id: lot.warehouseLocation.id.toString(), name: lot.warehouseLocation.name }
: null,
status: lot.status,
qr_code_value: lot.qrCodeValue,
barcode_value: lot.barcodeValue
}))
};
}

8
src/types/receipt.ts
View File

@ -37,6 +37,14 @@ export type ReceiptDetail = {
generated_lots: Array<{
id: string;
lot_code: string;
grade: { id: string; name: string } | null;
original_qty: number;
available_qty: number;
unit: { id: string; code: string };
warehouse: { id: string; name: string };
location: { id: string; name: string } | null;
status: string;
qr_code_value: string | null;
barcode_value: string | null;
}>;
};