683 lines
24 KiB
TypeScript
683 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { useI18n } from "@/lib/i18n/useI18n";
|
|
|
|
type OrgProfile = {
|
|
orgId: string;
|
|
defaultCurrency: string;
|
|
machineCostPerMin?: number | null;
|
|
operatorCostPerMin?: number | null;
|
|
ratedRunningKw?: number | null;
|
|
idleKw?: number | null;
|
|
kwhRate?: number | null;
|
|
energyMultiplier?: number | null;
|
|
energyCostPerMin?: number | null;
|
|
scrapCostPerUnit?: number | null;
|
|
rawMaterialCostPerUnit?: number | null;
|
|
};
|
|
|
|
type LocationOverride = {
|
|
id: string;
|
|
location: string;
|
|
currency?: string | null;
|
|
machineCostPerMin?: number | null;
|
|
operatorCostPerMin?: number | null;
|
|
ratedRunningKw?: number | null;
|
|
idleKw?: number | null;
|
|
kwhRate?: number | null;
|
|
energyMultiplier?: number | null;
|
|
energyCostPerMin?: number | null;
|
|
scrapCostPerUnit?: number | null;
|
|
rawMaterialCostPerUnit?: number | null;
|
|
};
|
|
|
|
type MachineOverride = {
|
|
id: string;
|
|
machineId: string;
|
|
currency?: string | null;
|
|
machineCostPerMin?: number | null;
|
|
operatorCostPerMin?: number | null;
|
|
ratedRunningKw?: number | null;
|
|
idleKw?: number | null;
|
|
kwhRate?: number | null;
|
|
energyMultiplier?: number | null;
|
|
energyCostPerMin?: number | null;
|
|
scrapCostPerUnit?: number | null;
|
|
rawMaterialCostPerUnit?: number | null;
|
|
};
|
|
|
|
type ProductOverride = {
|
|
id: string;
|
|
sku: string;
|
|
currency?: string | null;
|
|
rawMaterialCostPerUnit?: number | null;
|
|
};
|
|
|
|
type MachineRow = {
|
|
id: string;
|
|
name: string;
|
|
location?: string | null;
|
|
};
|
|
|
|
type CostConfig = {
|
|
org: OrgProfile | null;
|
|
locations: LocationOverride[];
|
|
machines: MachineOverride[];
|
|
products: ProductOverride[];
|
|
};
|
|
|
|
type OrgForm = {
|
|
defaultCurrency: string;
|
|
machineCostPerMin: string;
|
|
operatorCostPerMin: string;
|
|
ratedRunningKw: string;
|
|
idleKw: string;
|
|
kwhRate: string;
|
|
energyMultiplier: string;
|
|
energyCostPerMin: string;
|
|
scrapCostPerUnit: string;
|
|
rawMaterialCostPerUnit: string;
|
|
};
|
|
|
|
type OverrideForm = {
|
|
id: string;
|
|
location?: string;
|
|
machineId?: string;
|
|
currency: string;
|
|
machineCostPerMin: string;
|
|
operatorCostPerMin: string;
|
|
ratedRunningKw: string;
|
|
idleKw: string;
|
|
kwhRate: string;
|
|
energyMultiplier: string;
|
|
energyCostPerMin: string;
|
|
scrapCostPerUnit: string;
|
|
rawMaterialCostPerUnit: string;
|
|
};
|
|
|
|
type ProductForm = {
|
|
id: string;
|
|
sku: string;
|
|
currency: string;
|
|
rawMaterialCostPerUnit: string;
|
|
};
|
|
|
|
const COST_FIELDS = [
|
|
{ key: "machineCostPerMin", labelKey: "financial.field.machineCostPerMin" },
|
|
{ key: "operatorCostPerMin", labelKey: "financial.field.operatorCostPerMin" },
|
|
{ key: "ratedRunningKw", labelKey: "financial.field.ratedRunningKw" },
|
|
{ key: "idleKw", labelKey: "financial.field.idleKw" },
|
|
{ key: "kwhRate", labelKey: "financial.field.kwhRate" },
|
|
{ key: "energyMultiplier", labelKey: "financial.field.energyMultiplier" },
|
|
{ key: "energyCostPerMin", labelKey: "financial.field.energyCostPerMin" },
|
|
{ key: "scrapCostPerUnit", labelKey: "financial.field.scrapCostPerUnit" },
|
|
{ key: "rawMaterialCostPerUnit", labelKey: "financial.field.rawMaterialCostPerUnit" },
|
|
] as const;
|
|
|
|
type CostFieldKey = (typeof COST_FIELDS)[number]["key"];
|
|
|
|
function makeId(prefix: string) {
|
|
return `${prefix}-${Math.random().toString(36).slice(2, 10)}`;
|
|
}
|
|
|
|
function toFieldValue(value?: number | null) {
|
|
if (value === null || value === undefined || Number.isNaN(value)) return "";
|
|
return String(value);
|
|
}
|
|
|
|
function parseNumber(input: string) {
|
|
const trimmed = input.trim();
|
|
if (!trimmed) return null;
|
|
const n = Number(trimmed);
|
|
return Number.isFinite(n) ? n : null;
|
|
}
|
|
|
|
export function FinancialCostConfig() {
|
|
const { t } = useI18n();
|
|
const [role, setRole] = useState<string | null>(null);
|
|
const [machines, setMachines] = useState<MachineRow[]>([]);
|
|
const [config, setConfig] = useState<CostConfig | null>(null);
|
|
const [orgForm, setOrgForm] = useState<OrgForm>({
|
|
defaultCurrency: "USD",
|
|
machineCostPerMin: "",
|
|
operatorCostPerMin: "",
|
|
ratedRunningKw: "",
|
|
idleKw: "",
|
|
kwhRate: "",
|
|
energyMultiplier: "1",
|
|
energyCostPerMin: "",
|
|
scrapCostPerUnit: "",
|
|
rawMaterialCostPerUnit: "",
|
|
});
|
|
const [locationRows, setLocationRows] = useState<OverrideForm[]>([]);
|
|
const [machineRows, setMachineRows] = useState<OverrideForm[]>([]);
|
|
const [productRows, setProductRows] = useState<ProductForm[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [saveStatus, setSaveStatus] = useState<string | null>(null);
|
|
|
|
const locations = useMemo(() => {
|
|
const seen = new Set<string>();
|
|
for (const m of machines) {
|
|
if (!m.location) continue;
|
|
seen.add(m.location);
|
|
}
|
|
return Array.from(seen).sort();
|
|
}, [machines]);
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
|
|
async function loadMe() {
|
|
try {
|
|
const res = await fetch("/api/me", { cache: "no-store" });
|
|
const data = await res.json().catch(() => ({}));
|
|
if (!alive) return;
|
|
setRole(data?.membership?.role ?? null);
|
|
} catch {
|
|
if (alive) setRole(null);
|
|
}
|
|
}
|
|
|
|
loadMe();
|
|
return () => {
|
|
alive = false;
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
|
|
async function load() {
|
|
try {
|
|
const [machinesRes, costsRes] = await Promise.all([
|
|
fetch("/api/machines", { cache: "no-store" }),
|
|
fetch("/api/financial/costs", { cache: "no-store" }),
|
|
]);
|
|
const machinesJson = await machinesRes.json().catch(() => ({}));
|
|
const costsJson = await costsRes.json().catch(() => ({}));
|
|
if (!alive) return;
|
|
setMachines(machinesJson.machines ?? []);
|
|
setConfig({
|
|
org: costsJson.org ?? null,
|
|
locations: costsJson.locations ?? [],
|
|
machines: costsJson.machines ?? [],
|
|
products: costsJson.products ?? [],
|
|
});
|
|
} catch {
|
|
if (!alive) return;
|
|
} finally {
|
|
if (alive) setLoading(false);
|
|
}
|
|
}
|
|
|
|
load();
|
|
return () => {
|
|
alive = false;
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!config) return;
|
|
const org = config.org;
|
|
setOrgForm({
|
|
defaultCurrency: org?.defaultCurrency ?? "USD",
|
|
machineCostPerMin: toFieldValue(org?.machineCostPerMin),
|
|
operatorCostPerMin: toFieldValue(org?.operatorCostPerMin),
|
|
ratedRunningKw: toFieldValue(org?.ratedRunningKw),
|
|
idleKw: toFieldValue(org?.idleKw),
|
|
kwhRate: toFieldValue(org?.kwhRate),
|
|
energyMultiplier: toFieldValue(org?.energyMultiplier ?? 1),
|
|
energyCostPerMin: toFieldValue(org?.energyCostPerMin),
|
|
scrapCostPerUnit: toFieldValue(org?.scrapCostPerUnit),
|
|
rawMaterialCostPerUnit: toFieldValue(org?.rawMaterialCostPerUnit),
|
|
});
|
|
|
|
setLocationRows(
|
|
(config.locations ?? []).map((row) => ({
|
|
id: row.id ?? makeId("loc"),
|
|
location: row.location,
|
|
currency: row.currency ?? "",
|
|
machineCostPerMin: toFieldValue(row.machineCostPerMin),
|
|
operatorCostPerMin: toFieldValue(row.operatorCostPerMin),
|
|
ratedRunningKw: toFieldValue(row.ratedRunningKw),
|
|
idleKw: toFieldValue(row.idleKw),
|
|
kwhRate: toFieldValue(row.kwhRate),
|
|
energyMultiplier: toFieldValue(row.energyMultiplier),
|
|
energyCostPerMin: toFieldValue(row.energyCostPerMin),
|
|
scrapCostPerUnit: toFieldValue(row.scrapCostPerUnit),
|
|
rawMaterialCostPerUnit: toFieldValue(row.rawMaterialCostPerUnit),
|
|
}))
|
|
);
|
|
|
|
setMachineRows(
|
|
(config.machines ?? []).map((row) => ({
|
|
id: row.id ?? makeId("machine"),
|
|
machineId: row.machineId,
|
|
currency: row.currency ?? "",
|
|
machineCostPerMin: toFieldValue(row.machineCostPerMin),
|
|
operatorCostPerMin: toFieldValue(row.operatorCostPerMin),
|
|
ratedRunningKw: toFieldValue(row.ratedRunningKw),
|
|
idleKw: toFieldValue(row.idleKw),
|
|
kwhRate: toFieldValue(row.kwhRate),
|
|
energyMultiplier: toFieldValue(row.energyMultiplier),
|
|
energyCostPerMin: toFieldValue(row.energyCostPerMin),
|
|
scrapCostPerUnit: toFieldValue(row.scrapCostPerUnit),
|
|
rawMaterialCostPerUnit: toFieldValue(row.rawMaterialCostPerUnit),
|
|
}))
|
|
);
|
|
|
|
setProductRows(
|
|
(config.products ?? []).map((row) => ({
|
|
id: row.id ?? makeId("product"),
|
|
sku: row.sku,
|
|
currency: row.currency ?? "",
|
|
rawMaterialCostPerUnit: toFieldValue(row.rawMaterialCostPerUnit),
|
|
}))
|
|
);
|
|
}, [config]);
|
|
|
|
async function handleSave() {
|
|
setSaving(true);
|
|
setSaveStatus(null);
|
|
|
|
const orgPayload = {
|
|
defaultCurrency: orgForm.defaultCurrency.trim() || undefined,
|
|
machineCostPerMin: parseNumber(orgForm.machineCostPerMin),
|
|
operatorCostPerMin: parseNumber(orgForm.operatorCostPerMin),
|
|
ratedRunningKw: parseNumber(orgForm.ratedRunningKw),
|
|
idleKw: parseNumber(orgForm.idleKw),
|
|
kwhRate: parseNumber(orgForm.kwhRate),
|
|
energyMultiplier: parseNumber(orgForm.energyMultiplier),
|
|
energyCostPerMin: parseNumber(orgForm.energyCostPerMin),
|
|
scrapCostPerUnit: parseNumber(orgForm.scrapCostPerUnit),
|
|
rawMaterialCostPerUnit: parseNumber(orgForm.rawMaterialCostPerUnit),
|
|
};
|
|
|
|
const locationPayload = locationRows
|
|
.filter((row) => row.location)
|
|
.map((row) => ({
|
|
location: row.location || "",
|
|
currency: row.currency.trim() || null,
|
|
machineCostPerMin: parseNumber(row.machineCostPerMin),
|
|
operatorCostPerMin: parseNumber(row.operatorCostPerMin),
|
|
ratedRunningKw: parseNumber(row.ratedRunningKw),
|
|
idleKw: parseNumber(row.idleKw),
|
|
kwhRate: parseNumber(row.kwhRate),
|
|
energyMultiplier: parseNumber(row.energyMultiplier),
|
|
energyCostPerMin: parseNumber(row.energyCostPerMin),
|
|
scrapCostPerUnit: parseNumber(row.scrapCostPerUnit),
|
|
rawMaterialCostPerUnit: parseNumber(row.rawMaterialCostPerUnit),
|
|
}));
|
|
|
|
const machinePayload = machineRows
|
|
.filter((row) => row.machineId)
|
|
.map((row) => ({
|
|
machineId: row.machineId || "",
|
|
currency: row.currency.trim() || null,
|
|
machineCostPerMin: parseNumber(row.machineCostPerMin),
|
|
operatorCostPerMin: parseNumber(row.operatorCostPerMin),
|
|
ratedRunningKw: parseNumber(row.ratedRunningKw),
|
|
idleKw: parseNumber(row.idleKw),
|
|
kwhRate: parseNumber(row.kwhRate),
|
|
energyMultiplier: parseNumber(row.energyMultiplier),
|
|
energyCostPerMin: parseNumber(row.energyCostPerMin),
|
|
scrapCostPerUnit: parseNumber(row.scrapCostPerUnit),
|
|
rawMaterialCostPerUnit: parseNumber(row.rawMaterialCostPerUnit),
|
|
}));
|
|
|
|
const productPayload = productRows
|
|
.filter((row) => row.sku)
|
|
.map((row) => ({
|
|
sku: row.sku.trim(),
|
|
currency: row.currency.trim() || null,
|
|
rawMaterialCostPerUnit: parseNumber(row.rawMaterialCostPerUnit),
|
|
}));
|
|
|
|
try {
|
|
const res = await fetch("/api/financial/costs", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
org: orgPayload,
|
|
locations: locationPayload,
|
|
machines: machinePayload,
|
|
products: productPayload,
|
|
}),
|
|
});
|
|
const json = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
setSaveStatus(json?.error ?? t("financial.config.saveFailed"));
|
|
} else {
|
|
setConfig({
|
|
org: json.org ?? null,
|
|
locations: json.locations ?? [],
|
|
machines: json.machines ?? [],
|
|
products: json.products ?? [],
|
|
});
|
|
setSaveStatus(t("financial.config.saved"));
|
|
}
|
|
} catch {
|
|
setSaveStatus(t("financial.config.saveFailed"));
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
function updateOrgField(key: CostFieldKey, value: string) {
|
|
setOrgForm((prev) => ({ ...prev, [key]: value }));
|
|
}
|
|
|
|
function updateLocationRow(id: string, key: keyof OverrideForm, value: string) {
|
|
setLocationRows((prev) => prev.map((row) => (row.id === id ? { ...row, [key]: value } : row)));
|
|
}
|
|
|
|
function updateMachineRow(id: string, key: keyof OverrideForm, value: string) {
|
|
setMachineRows((prev) => prev.map((row) => (row.id === id ? { ...row, [key]: value } : row)));
|
|
}
|
|
|
|
function updateProductRow(id: string, key: keyof ProductForm, value: string) {
|
|
setProductRows((prev) => prev.map((row) => (row.id === id ? { ...row, [key]: value } : row)));
|
|
}
|
|
|
|
function addLocationRow() {
|
|
setLocationRows((prev) => [
|
|
...prev,
|
|
{
|
|
id: makeId("loc"),
|
|
location: "",
|
|
currency: "",
|
|
machineCostPerMin: "",
|
|
operatorCostPerMin: "",
|
|
ratedRunningKw: "",
|
|
idleKw: "",
|
|
kwhRate: "",
|
|
energyMultiplier: "",
|
|
energyCostPerMin: "",
|
|
scrapCostPerUnit: "",
|
|
rawMaterialCostPerUnit: "",
|
|
},
|
|
]);
|
|
}
|
|
|
|
function addMachineRow() {
|
|
setMachineRows((prev) => [
|
|
...prev,
|
|
{
|
|
id: makeId("machine"),
|
|
machineId: "",
|
|
currency: "",
|
|
machineCostPerMin: "",
|
|
operatorCostPerMin: "",
|
|
ratedRunningKw: "",
|
|
idleKw: "",
|
|
kwhRate: "",
|
|
energyMultiplier: "",
|
|
energyCostPerMin: "",
|
|
scrapCostPerUnit: "",
|
|
rawMaterialCostPerUnit: "",
|
|
},
|
|
]);
|
|
}
|
|
|
|
function addProductRow() {
|
|
setProductRows((prev) => [
|
|
...prev,
|
|
{ id: makeId("product"), sku: "", currency: "", rawMaterialCostPerUnit: "" },
|
|
]);
|
|
}
|
|
|
|
function applyOrgToAllMachines() {
|
|
setMachineRows(
|
|
machines.map((m) => ({
|
|
id: makeId("machine"),
|
|
machineId: m.id,
|
|
currency: orgForm.defaultCurrency,
|
|
machineCostPerMin: orgForm.machineCostPerMin,
|
|
operatorCostPerMin: orgForm.operatorCostPerMin,
|
|
ratedRunningKw: orgForm.ratedRunningKw,
|
|
idleKw: orgForm.idleKw,
|
|
kwhRate: orgForm.kwhRate,
|
|
energyMultiplier: orgForm.energyMultiplier,
|
|
energyCostPerMin: orgForm.energyCostPerMin,
|
|
scrapCostPerUnit: orgForm.scrapCostPerUnit,
|
|
rawMaterialCostPerUnit: orgForm.rawMaterialCostPerUnit,
|
|
}))
|
|
);
|
|
}
|
|
|
|
if (role && role !== "OWNER") {
|
|
return (
|
|
<div className="rounded-2xl border border-white/10 bg-black/40 p-6 text-zinc-300">
|
|
{t("financial.config.ownerOnly")}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-2xl border border-white/10 bg-black/40 p-4 space-y-6">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-white">{t("financial.config.title")}</h2>
|
|
<p className="text-xs text-zinc-500">{t("financial.config.subtitle")}</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={applyOrgToAllMachines}
|
|
className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-zinc-200 hover:bg-white/10"
|
|
>
|
|
{t("financial.config.applyOrg")}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="rounded-lg bg-emerald-500/80 px-4 py-2 text-xs font-semibold text-white hover:bg-emerald-500"
|
|
>
|
|
{saving ? t("financial.config.saving") : t("financial.config.save")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{saveStatus && <div className="text-xs text-zinc-400">{saveStatus}</div>}
|
|
|
|
<div className="grid gap-4">
|
|
<div className="rounded-xl border border-white/10 bg-black/20 p-4">
|
|
<div className="mb-4 flex items-center gap-4">
|
|
<div className="text-sm font-semibold text-white">{t("financial.config.orgDefaults")}</div>
|
|
<div className="flex-1" />
|
|
<input
|
|
className="w-28 rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-zinc-200"
|
|
value={orgForm.defaultCurrency}
|
|
onChange={(event) =>
|
|
setOrgForm((prev) => ({ ...prev, defaultCurrency: event.target.value.toUpperCase() }))
|
|
}
|
|
placeholder="USD"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
{COST_FIELDS.map((field) => (
|
|
<label key={field.key} className="text-xs text-zinc-400">
|
|
{t(field.labelKey)}
|
|
<input
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-zinc-200"
|
|
value={orgForm[field.key]}
|
|
onChange={(event) => updateOrgField(field.key, event.target.value)}
|
|
/>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-white/10 bg-black/20 p-4 space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-sm font-semibold text-white">{t("financial.config.locationOverrides")}</div>
|
|
<button
|
|
type="button"
|
|
onClick={addLocationRow}
|
|
className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-zinc-200 hover:bg-white/10"
|
|
>
|
|
{t("financial.config.addLocation")}
|
|
</button>
|
|
</div>
|
|
{locationRows.length === 0 && (
|
|
<div className="text-xs text-zinc-500">{t("financial.config.noneLocation")}</div>
|
|
)}
|
|
{locationRows.map((row) => (
|
|
<div key={row.id} className="rounded-xl border border-white/10 bg-black/30 p-4">
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<label className="text-xs text-zinc-400">
|
|
{t("financial.config.location")}
|
|
<select
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-zinc-200"
|
|
value={row.location ?? ""}
|
|
onChange={(event) => updateLocationRow(row.id, "location", event.target.value)}
|
|
>
|
|
<option value="">{t("financial.config.selectLocation")}</option>
|
|
{locations.map((loc) => (
|
|
<option key={loc} value={loc}>
|
|
{loc}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label className="text-xs text-zinc-400">
|
|
{t("financial.config.currency")}
|
|
<input
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-zinc-200"
|
|
value={row.currency}
|
|
onChange={(event) => updateLocationRow(row.id, "currency", event.target.value.toUpperCase())}
|
|
placeholder="MXN"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div className="mt-4 grid gap-3 md:grid-cols-3">
|
|
{COST_FIELDS.map((field) => (
|
|
<label key={field.key} className="text-xs text-zinc-400">
|
|
{t(field.labelKey)}
|
|
<input
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-zinc-200"
|
|
value={row[field.key]}
|
|
onChange={(event) => updateLocationRow(row.id, field.key, event.target.value)}
|
|
/>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-white/10 bg-black/20 p-4 space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-sm font-semibold text-white">{t("financial.config.machineOverrides")}</div>
|
|
<button
|
|
type="button"
|
|
onClick={addMachineRow}
|
|
className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-zinc-200 hover:bg-white/10"
|
|
>
|
|
{t("financial.config.addMachine")}
|
|
</button>
|
|
</div>
|
|
{machineRows.length === 0 && (
|
|
<div className="text-xs text-zinc-500">{t("financial.config.noneMachine")}</div>
|
|
)}
|
|
{machineRows.map((row) => (
|
|
<div key={row.id} className="rounded-xl border border-white/10 bg-black/30 p-4">
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<label className="text-xs text-zinc-400">
|
|
{t("financial.config.machine")}
|
|
<select
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-zinc-200"
|
|
value={row.machineId ?? ""}
|
|
onChange={(event) => updateMachineRow(row.id, "machineId", event.target.value)}
|
|
>
|
|
<option value="">{t("financial.config.selectMachine")}</option>
|
|
{machines.map((machine) => (
|
|
<option key={machine.id} value={machine.id}>
|
|
{machine.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label className="text-xs text-zinc-400">
|
|
{t("financial.config.currency")}
|
|
<input
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-zinc-200"
|
|
value={row.currency}
|
|
onChange={(event) => updateMachineRow(row.id, "currency", event.target.value.toUpperCase())}
|
|
placeholder="MXN"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div className="mt-4 grid gap-3 md:grid-cols-3">
|
|
{COST_FIELDS.map((field) => (
|
|
<label key={field.key} className="text-xs text-zinc-400">
|
|
{t(field.labelKey)}
|
|
<input
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-zinc-200"
|
|
value={row[field.key]}
|
|
onChange={(event) => updateMachineRow(row.id, field.key, event.target.value)}
|
|
/>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-white/10 bg-black/20 p-4 space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-sm font-semibold text-white">{t("financial.config.productOverrides")}</div>
|
|
<button
|
|
type="button"
|
|
onClick={addProductRow}
|
|
className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-zinc-200 hover:bg-white/10"
|
|
>
|
|
{t("financial.config.addProduct")}
|
|
</button>
|
|
</div>
|
|
{productRows.length === 0 && (
|
|
<div className="text-xs text-zinc-500">{t("financial.config.noneProduct")}</div>
|
|
)}
|
|
{productRows.map((row) => (
|
|
<div key={row.id} className="rounded-xl border border-white/10 bg-black/30 p-4">
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<label className="text-xs text-zinc-400">
|
|
{t("financial.config.sku")}
|
|
<input
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-zinc-200"
|
|
value={row.sku}
|
|
onChange={(event) => updateProductRow(row.id, "sku", event.target.value)}
|
|
placeholder="SKU-001"
|
|
/>
|
|
</label>
|
|
<label className="text-xs text-zinc-400">
|
|
{t("financial.config.currency")}
|
|
<input
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-zinc-200"
|
|
value={row.currency}
|
|
onChange={(event) => updateProductRow(row.id, "currency", event.target.value.toUpperCase())}
|
|
placeholder="MXN"
|
|
/>
|
|
</label>
|
|
<label className="text-xs text-zinc-400">
|
|
{t("financial.config.rawMaterialUnit")}
|
|
<input
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-zinc-200"
|
|
value={row.rawMaterialCostPerUnit}
|
|
onChange={(event) => updateProductRow(row.id, "rawMaterialCostPerUnit", event.target.value)}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{loading && <div className="text-xs text-zinc-500">{t("financial.config.loading")}</div>}
|
|
</div>
|
|
);
|
|
}
|