Mobile friendly, lint correction, typescript error clear
This commit is contained in:
Marcelo
@@ -1,23 +1,32 @@
|
||||
"use client";
|
||||
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useSyncExternalStore } from "react";
|
||||
|
||||
function subscribe(callback: () => void) {
|
||||
if (typeof window === "undefined") return () => {};
|
||||
window.addEventListener("storage", callback);
|
||||
return () => window.removeEventListener("storage", callback);
|
||||
}
|
||||
|
||||
function getSnapshot() {
|
||||
if (typeof window === "undefined") return null;
|
||||
return localStorage.getItem("ct_token");
|
||||
}
|
||||
|
||||
export function RequireAuth({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [ready, setReady] = useState(false);
|
||||
const token = useSyncExternalStore(subscribe, getSnapshot, () => null);
|
||||
const hasToken = Boolean(token);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("ct_token");
|
||||
if (!token) {
|
||||
if (!hasToken) {
|
||||
router.replace("/login");
|
||||
return;
|
||||
}
|
||||
setReady(true);
|
||||
}, [router, pathname]);
|
||||
}, [router, pathname, hasToken]);
|
||||
|
||||
if (!ready) {
|
||||
if (!hasToken) {
|
||||
return (
|
||||
<div className="min-h-screen bg-black text-zinc-200 flex items-center justify-center">
|
||||
Loading…
|
||||
|
||||
@@ -2,20 +2,20 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Menu } from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Sidebar } from "@/components/layout/Sidebar";
|
||||
import { UtilityControls } from "@/components/layout/UtilityControls";
|
||||
import { useI18n } from "@/lib/i18n/useI18n";
|
||||
|
||||
export function AppShell({ children }: { children: React.ReactNode }) {
|
||||
export function AppShell({
|
||||
children,
|
||||
initialTheme,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
initialTheme?: "dark" | "light";
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const pathname = usePathname();
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setDrawerOpen(false);
|
||||
}, [pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!drawerOpen) return;
|
||||
const onKey = (event: KeyboardEvent) => {
|
||||
@@ -34,7 +34,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
||||
<div className="flex min-h-screen">
|
||||
<Sidebar />
|
||||
<div className="flex min-h-screen flex-1 flex-col">
|
||||
<header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-white/10 bg-black/20 px-4 backdrop-blur">
|
||||
<header className="sticky top-0 z-30 flex min-h-[3.5rem] flex-wrap items-center justify-between gap-3 border-b border-white/10 bg-black/20 px-4 py-2 backdrop-blur">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
@@ -48,7 +48,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
||||
{t("sidebar.productTitle")}
|
||||
</div>
|
||||
</div>
|
||||
<UtilityControls />
|
||||
<UtilityControls initialTheme={initialTheme} />
|
||||
</header>
|
||||
<main className="flex-1">{children}</main>
|
||||
</div>
|
||||
|
||||
@@ -2,17 +2,26 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { BarChart3, Bell, LayoutGrid, LogOut, Settings, Wrench, X } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { BarChart3, Bell, DollarSign, LayoutGrid, LogOut, Settings, Wrench, X } from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { useI18n } from "@/lib/i18n/useI18n";
|
||||
|
||||
const items = [
|
||||
type NavItem = {
|
||||
href: string;
|
||||
labelKey: string;
|
||||
icon: LucideIcon;
|
||||
ownerOnly?: boolean;
|
||||
};
|
||||
|
||||
const items: NavItem[] = [
|
||||
{ href: "/overview", labelKey: "nav.overview", icon: LayoutGrid },
|
||||
{ href: "/machines", labelKey: "nav.machines", icon: Wrench },
|
||||
{ href: "/reports", labelKey: "nav.reports", icon: BarChart3 },
|
||||
{ href: "/alerts", labelKey: "nav.alerts", icon: Bell },
|
||||
{ href: "/financial", labelKey: "nav.financial", icon: DollarSign, ownerOnly: true },
|
||||
{ href: "/settings", labelKey: "nav.settings", icon: Settings },
|
||||
] as const;
|
||||
];
|
||||
|
||||
type SidebarProps = {
|
||||
variant?: "desktop" | "drawer";
|
||||
@@ -57,6 +66,14 @@ export function Sidebar({ variant = "desktop", onNavigate, onClose }: SidebarPro
|
||||
}
|
||||
|
||||
const roleKey = (me?.membership?.role || "MEMBER").toLowerCase();
|
||||
const isOwner = roleKey === "owner";
|
||||
const visibleItems = useMemo(() => items.filter((it) => !it.ownerOnly || isOwner), [isOwner]);
|
||||
|
||||
useEffect(() => {
|
||||
visibleItems.forEach((it) => {
|
||||
router.prefetch(it.href);
|
||||
});
|
||||
}, [router, visibleItems]);
|
||||
const shellClass = [
|
||||
"relative z-20 flex flex-col border-r border-white/10 bg-black/40",
|
||||
variant === "desktop" ? "hidden md:flex h-screen w-64" : "flex h-full w-72 max-w-[85vw]",
|
||||
@@ -82,13 +99,14 @@ export function Sidebar({ variant = "desktop", onNavigate, onClose }: SidebarPro
|
||||
</div>
|
||||
|
||||
<nav className="px-3 py-2 flex-1 space-y-1">
|
||||
{items.map((it) => {
|
||||
{visibleItems.map((it) => {
|
||||
const active = pathname === it.href || pathname.startsWith(it.href + "/");
|
||||
const Icon = it.icon;
|
||||
return (
|
||||
<Link
|
||||
key={it.href}
|
||||
href={it.href}
|
||||
onMouseEnter={() => router.prefetch(it.href)}
|
||||
onClick={onNavigate}
|
||||
className={[
|
||||
"flex items-center gap-3 rounded-xl px-3 py-2 text-sm transition",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useI18n } from "@/lib/i18n/useI18n";
|
||||
|
||||
@@ -46,19 +46,13 @@ const MoonIcon = ({ className }: { className?: string }) => (
|
||||
|
||||
type UtilityControlsProps = {
|
||||
className?: string;
|
||||
initialTheme?: "dark" | "light";
|
||||
};
|
||||
|
||||
export function UtilityControls({ className }: UtilityControlsProps) {
|
||||
export function UtilityControls({ className, initialTheme = "dark" }: UtilityControlsProps) {
|
||||
const router = useRouter();
|
||||
const { locale, setLocale, t } = useI18n();
|
||||
const [theme, setTheme] = useState<"dark" | "light">("dark");
|
||||
|
||||
useEffect(() => {
|
||||
const current = document.documentElement.getAttribute("data-theme");
|
||||
if (current === "light" || current === "dark") {
|
||||
setTheme(current);
|
||||
}
|
||||
}, []);
|
||||
const [theme, setTheme] = useState<"dark" | "light">(initialTheme);
|
||||
|
||||
function applyTheme(next: "light" | "dark") {
|
||||
document.documentElement.setAttribute("data-theme", next);
|
||||
@@ -78,7 +72,7 @@ export function UtilityControls({ className }: UtilityControlsProps) {
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
"pointer-events-auto flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2",
|
||||
"pointer-events-auto flex flex-wrap items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-2 py-1 sm:gap-3 sm:px-3 sm:py-2",
|
||||
className ?? "",
|
||||
].join(" ")}
|
||||
title={t("sidebar.themeTooltip")}
|
||||
@@ -91,7 +85,7 @@ export function UtilityControls({ className }: UtilityControlsProps) {
|
||||
>
|
||||
{theme === "light" ? <SunIcon className="h-4 w-4" /> : <MoonIcon className="h-4 w-4" />}
|
||||
</button>
|
||||
<div className="flex items-center gap-2 text-[11px] font-semibold tracking-[0.2em]">
|
||||
<div className="flex items-center gap-2 text-[10px] font-semibold tracking-[0.2em] sm:text-[11px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => switchLocale("en")}
|
||||
|
||||
777
components/settings/AlertsConfig.tsx
Normal file
777
components/settings/AlertsConfig.tsx
Normal file
@@ -0,0 +1,777 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useI18n } from "@/lib/i18n/useI18n";
|
||||
|
||||
type RoleName = "MEMBER" | "ADMIN" | "OWNER";
|
||||
type Channel = "email" | "sms";
|
||||
|
||||
type RoleRule = {
|
||||
enabled: boolean;
|
||||
afterMinutes: number;
|
||||
channels: Channel[];
|
||||
};
|
||||
|
||||
type AlertRule = {
|
||||
id: string;
|
||||
eventType: string;
|
||||
roles: Record<RoleName, RoleRule>;
|
||||
repeatMinutes?: number;
|
||||
};
|
||||
|
||||
type AlertPolicy = {
|
||||
version: number;
|
||||
defaults: Record<RoleName, RoleRule>;
|
||||
rules: AlertRule[];
|
||||
};
|
||||
|
||||
type AlertContact = {
|
||||
id: string;
|
||||
name: string;
|
||||
roleScope: string;
|
||||
email?: string | null;
|
||||
phone?: string | null;
|
||||
eventTypes?: string[] | null;
|
||||
isActive: boolean;
|
||||
userId?: string | null;
|
||||
};
|
||||
|
||||
type ContactDraft = {
|
||||
name: string;
|
||||
roleScope: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
eventTypes: string[];
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
const ROLE_ORDER: RoleName[] = ["MEMBER", "ADMIN", "OWNER"];
|
||||
const CHANNELS: Channel[] = ["email", "sms"];
|
||||
const EVENT_TYPES = [
|
||||
{ value: "macrostop", labelKey: "alerts.event.macrostop" },
|
||||
{ value: "microstop", labelKey: "alerts.event.microstop" },
|
||||
{ value: "slow-cycle", labelKey: "alerts.event.slow-cycle" },
|
||||
{ value: "offline", labelKey: "alerts.event.offline" },
|
||||
{ value: "error", labelKey: "alerts.event.error" },
|
||||
] as const;
|
||||
|
||||
function normalizeContactDraft(contact: AlertContact): ContactDraft {
|
||||
return {
|
||||
name: contact.name,
|
||||
roleScope: contact.roleScope,
|
||||
email: contact.email ?? "",
|
||||
phone: contact.phone ?? "",
|
||||
eventTypes: Array.isArray(contact.eventTypes) ? contact.eventTypes : [],
|
||||
isActive: contact.isActive,
|
||||
};
|
||||
}
|
||||
|
||||
export function AlertsConfig() {
|
||||
const { t } = useI18n();
|
||||
const [policy, setPolicy] = useState<AlertPolicy | null>(null);
|
||||
const [policyDraft, setPolicyDraft] = useState<AlertPolicy | null>(null);
|
||||
const [contacts, setContacts] = useState<AlertContact[]>([]);
|
||||
const [contactEdits, setContactEdits] = useState<Record<string, ContactDraft>>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [role, setRole] = useState<RoleName>("MEMBER");
|
||||
const [savingPolicy, setSavingPolicy] = useState(false);
|
||||
const [policyError, setPolicyError] = useState<string | null>(null);
|
||||
const [contactsError, setContactsError] = useState<string | null>(null);
|
||||
const [savingContactId, setSavingContactId] = useState<string | null>(null);
|
||||
const [deletingContactId, setDeletingContactId] = useState<string | null>(null);
|
||||
const [selectedEventType, setSelectedEventType] = useState<string>("");
|
||||
|
||||
const [newContact, setNewContact] = useState<ContactDraft>({
|
||||
name: "",
|
||||
roleScope: "CUSTOM",
|
||||
email: "",
|
||||
phone: "",
|
||||
eventTypes: [],
|
||||
isActive: true,
|
||||
});
|
||||
const [creatingContact, setCreatingContact] = useState(false);
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
setPolicyError(null);
|
||||
setContactsError(null);
|
||||
try {
|
||||
const [policyRes, contactsRes, meRes] = await Promise.all([
|
||||
fetch("/api/alerts/policy", { cache: "no-store" }),
|
||||
fetch("/api/alerts/contacts", { cache: "no-store" }),
|
||||
fetch("/api/me", { cache: "no-store" }),
|
||||
]);
|
||||
const policyJson = await policyRes.json().catch(() => ({}));
|
||||
const contactsJson = await contactsRes.json().catch(() => ({}));
|
||||
const meJson = await meRes.json().catch(() => ({}));
|
||||
|
||||
if (!alive) return;
|
||||
|
||||
if (!policyRes.ok || !policyJson?.ok) {
|
||||
setPolicyError(policyJson?.error || t("alerts.error.loadPolicy"));
|
||||
} else {
|
||||
setPolicy(policyJson.policy);
|
||||
setPolicyDraft(policyJson.policy);
|
||||
if (policyJson.policy?.rules?.length) {
|
||||
setSelectedEventType((prev) => prev || policyJson.policy.rules[0].eventType);
|
||||
}
|
||||
}
|
||||
|
||||
if (!contactsRes.ok || !contactsJson?.ok) {
|
||||
setContactsError(contactsJson?.error || t("alerts.error.loadContacts"));
|
||||
} else {
|
||||
setContacts(contactsJson.contacts ?? []);
|
||||
const nextEdits: Record<string, ContactDraft> = {};
|
||||
for (const contact of contactsJson.contacts ?? []) {
|
||||
nextEdits[contact.id] = normalizeContactDraft(contact);
|
||||
}
|
||||
setContactEdits(nextEdits);
|
||||
}
|
||||
|
||||
if (meRes.ok && meJson?.ok && meJson?.membership?.role) {
|
||||
setRole(String(meJson.membership.role).toUpperCase() as RoleName);
|
||||
}
|
||||
} catch {
|
||||
if (!alive) return;
|
||||
setPolicyError(t("alerts.error.loadPolicy"));
|
||||
setContactsError(t("alerts.error.loadContacts"));
|
||||
} finally {
|
||||
if (alive) setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
load();
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!policyDraft?.rules?.length) return;
|
||||
setSelectedEventType((prev) => {
|
||||
if (prev && policyDraft.rules.some((rule) => rule.eventType === prev)) {
|
||||
return prev;
|
||||
}
|
||||
return policyDraft.rules[0].eventType;
|
||||
});
|
||||
}, [policyDraft]);
|
||||
|
||||
function updatePolicyDefaults(role: RoleName, patch: Partial<RoleRule>) {
|
||||
setPolicyDraft((prev) => {
|
||||
if (!prev) return prev;
|
||||
return {
|
||||
...prev,
|
||||
defaults: {
|
||||
...prev.defaults,
|
||||
[role]: {
|
||||
...prev.defaults[role],
|
||||
...patch,
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function updateRule(eventType: string, patch: Partial<AlertRule>) {
|
||||
setPolicyDraft((prev) => {
|
||||
if (!prev) return prev;
|
||||
return {
|
||||
...prev,
|
||||
rules: prev.rules.map((rule) =>
|
||||
rule.eventType === eventType ? { ...rule, ...patch } : rule
|
||||
),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function updateRuleRole(eventType: string, role: RoleName, patch: Partial<RoleRule>) {
|
||||
setPolicyDraft((prev) => {
|
||||
if (!prev) return prev;
|
||||
return {
|
||||
...prev,
|
||||
rules: prev.rules.map((rule) => {
|
||||
if (rule.eventType !== eventType) return rule;
|
||||
return {
|
||||
...rule,
|
||||
roles: {
|
||||
...rule.roles,
|
||||
[role]: {
|
||||
...rule.roles[role],
|
||||
...patch,
|
||||
},
|
||||
},
|
||||
};
|
||||
}),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function applyDefaultsToEvent(eventType: string) {
|
||||
setPolicyDraft((prev) => {
|
||||
if (!prev) return prev;
|
||||
return {
|
||||
...prev,
|
||||
rules: prev.rules.map((rule) => {
|
||||
if (rule.eventType !== eventType) return rule;
|
||||
return {
|
||||
...rule,
|
||||
roles: {
|
||||
MEMBER: { ...prev.defaults.MEMBER },
|
||||
ADMIN: { ...prev.defaults.ADMIN },
|
||||
OWNER: { ...prev.defaults.OWNER },
|
||||
},
|
||||
};
|
||||
}),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async function savePolicy() {
|
||||
if (!policyDraft) return;
|
||||
setSavingPolicy(true);
|
||||
setPolicyError(null);
|
||||
try {
|
||||
const res = await fetch("/api/alerts/policy", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ policy: policyDraft }),
|
||||
});
|
||||
const json = await res.json().catch(() => ({}));
|
||||
if (!res.ok || !json?.ok) {
|
||||
setPolicyError(json?.error || t("alerts.error.savePolicy"));
|
||||
} else {
|
||||
setPolicy(policyDraft);
|
||||
}
|
||||
} catch {
|
||||
setPolicyError(t("alerts.error.savePolicy"));
|
||||
} finally {
|
||||
setSavingPolicy(false);
|
||||
}
|
||||
}
|
||||
|
||||
function updateContactDraft(id: string, patch: Partial<ContactDraft>) {
|
||||
setContactEdits((prev) => ({
|
||||
...prev,
|
||||
[id]: {
|
||||
...(prev[id] ?? { name: "", roleScope: "CUSTOM", email: "", phone: "", eventTypes: [], isActive: true }),
|
||||
...patch,
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
async function saveContact(id: string) {
|
||||
const payload = contactEdits[id];
|
||||
if (!payload) return;
|
||||
setSavingContactId(id);
|
||||
try {
|
||||
const res = await fetch(`/api/alerts/contacts/${id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const json = await res.json().catch(() => ({}));
|
||||
if (!res.ok || !json?.ok) {
|
||||
setContactsError(json?.error || t("alerts.error.saveContact"));
|
||||
} else if (json.contact) {
|
||||
const contact = json.contact as AlertContact;
|
||||
setContacts((prev) => prev.map((row) => (row.id === id ? contact : row)));
|
||||
setContactEdits((prev) => ({ ...prev, [id]: normalizeContactDraft(contact) }));
|
||||
}
|
||||
} catch {
|
||||
setContactsError(t("alerts.error.saveContact"));
|
||||
} finally {
|
||||
setSavingContactId(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteContact(id: string) {
|
||||
setDeletingContactId(id);
|
||||
try {
|
||||
const res = await fetch(`/api/alerts/contacts/${id}`, { method: "DELETE" });
|
||||
const json = await res.json().catch(() => ({}));
|
||||
if (!res.ok || !json?.ok) {
|
||||
setContactsError(json?.error || t("alerts.error.deleteContact"));
|
||||
} else {
|
||||
setContacts((prev) => prev.filter((row) => row.id !== id));
|
||||
setContactEdits((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[id];
|
||||
return next;
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
setContactsError(t("alerts.error.deleteContact"));
|
||||
} finally {
|
||||
setDeletingContactId(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function createContact() {
|
||||
setCreatingContact(true);
|
||||
setCreateError(null);
|
||||
try {
|
||||
const res = await fetch("/api/alerts/contacts", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(newContact),
|
||||
});
|
||||
const json = await res.json().catch(() => ({}));
|
||||
if (!res.ok || !json?.ok) {
|
||||
setCreateError(json?.error || t("alerts.error.createContact"));
|
||||
return;
|
||||
}
|
||||
const contact = json.contact as AlertContact;
|
||||
setContacts((prev) => [contact, ...prev]);
|
||||
setContactEdits((prev) => ({ ...prev, [contact.id]: normalizeContactDraft(contact) }));
|
||||
setNewContact({
|
||||
name: "",
|
||||
roleScope: "CUSTOM",
|
||||
email: "",
|
||||
phone: "",
|
||||
eventTypes: [],
|
||||
isActive: true,
|
||||
});
|
||||
} catch {
|
||||
setCreateError(t("alerts.error.createContact"));
|
||||
} finally {
|
||||
setCreatingContact(false);
|
||||
}
|
||||
}
|
||||
|
||||
const policyDirty = useMemo(
|
||||
() => JSON.stringify(policy) !== JSON.stringify(policyDraft),
|
||||
[policy, policyDraft]
|
||||
);
|
||||
const canEdit = role === "OWNER";
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{loading && (
|
||||
<div className="text-sm text-zinc-400">{t("alerts.loading")}</div>
|
||||
)}
|
||||
|
||||
{!loading && policyError && (
|
||||
<div className="rounded-xl border border-red-500/20 bg-red-500/10 p-3 text-sm text-red-200">
|
||||
{policyError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && policyDraft && (
|
||||
<div className="rounded-2xl border border-white/10 bg-white/5 p-5">
|
||||
<div className="mb-4 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white">{t("alerts.policy.title")}</div>
|
||||
<div className="text-xs text-zinc-400">{t("alerts.policy.subtitle")}</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={savePolicy}
|
||||
disabled={!canEdit || !policyDirty || savingPolicy}
|
||||
className="rounded-xl border border-white/10 bg-white/10 px-4 py-2 text-sm text-white disabled:opacity-40"
|
||||
>
|
||||
{savingPolicy ? t("alerts.policy.saving") : t("alerts.policy.save")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!canEdit && (
|
||||
<div className="mb-4 rounded-xl border border-white/10 bg-black/20 p-3 text-sm text-zinc-300">
|
||||
{t("alerts.policy.readOnly")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-xl border border-white/10 bg-black/20 p-4">
|
||||
<div className="mb-3 text-xs text-zinc-400">{t("alerts.policy.defaults")}</div>
|
||||
<div className="mb-4 text-xs text-zinc-500">{t("alerts.policy.defaultsHelp")}</div>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
{ROLE_ORDER.map((role) => {
|
||||
const rule = policyDraft.defaults[role];
|
||||
return (
|
||||
<div key={role} className="rounded-xl border border-white/10 bg-black/20 p-3">
|
||||
<div className="text-sm font-semibold text-white">{role}</div>
|
||||
<label className="mt-3 flex items-center gap-2 text-xs text-zinc-400">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={rule.enabled}
|
||||
onChange={(event) => updatePolicyDefaults(role, { enabled: event.target.checked })}
|
||||
disabled={!canEdit}
|
||||
className="h-4 w-4 rounded border border-white/20 bg-black/20"
|
||||
/>
|
||||
{t("alerts.policy.enabled")}
|
||||
</label>
|
||||
<label className="mt-3 block text-xs text-zinc-400">
|
||||
{t("alerts.policy.afterMinutes")}
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={rule.afterMinutes}
|
||||
onChange={(event) =>
|
||||
updatePolicyDefaults(role, { afterMinutes: Number(event.target.value) })
|
||||
}
|
||||
disabled={!canEdit}
|
||||
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
||||
/>
|
||||
</label>
|
||||
<div className="mt-3 text-xs text-zinc-400">{t("alerts.policy.channels")}</div>
|
||||
<div className="mt-2 flex flex-wrap gap-3">
|
||||
{CHANNELS.map((channel) => (
|
||||
<label key={channel} className="flex items-center gap-2 text-xs text-zinc-400">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={rule.channels.includes(channel)}
|
||||
onChange={(event) => {
|
||||
const next = event.target.checked
|
||||
? [...rule.channels, channel]
|
||||
: rule.channels.filter((c) => c !== channel);
|
||||
updatePolicyDefaults(role, { channels: next });
|
||||
}}
|
||||
disabled={!canEdit}
|
||||
className="h-4 w-4 rounded border border-white/20 bg-black/20"
|
||||
/>
|
||||
{channel.toUpperCase()}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid grid-cols-1 gap-4">
|
||||
<div className="rounded-xl border border-white/10 bg-black/20 p-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white">{t("alerts.policy.eventSelectLabel")}</div>
|
||||
<div className="text-xs text-zinc-400">{t("alerts.policy.eventSelectHelper")}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<select
|
||||
value={selectedEventType}
|
||||
onChange={(event) => setSelectedEventType(event.target.value)}
|
||||
disabled={!canEdit}
|
||||
className="rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
||||
>
|
||||
{policyDraft.rules.map((rule) => (
|
||||
<option key={rule.eventType} value={rule.eventType}>
|
||||
{t(`alerts.event.${rule.eventType}`)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyDefaultsToEvent(selectedEventType)}
|
||||
disabled={!canEdit || !selectedEventType}
|
||||
className="rounded-lg border border-white/10 bg-white/10 px-3 py-2 text-xs text-white disabled:opacity-40"
|
||||
>
|
||||
{t("alerts.policy.applyDefaults")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{policyDraft.rules
|
||||
.filter((rule) => rule.eventType === selectedEventType)
|
||||
.map((rule) => (
|
||||
<div key={rule.eventType} className="rounded-xl border border-white/10 bg-black/20 p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="text-sm font-semibold text-white">
|
||||
{t(`alerts.event.${rule.eventType}`)}
|
||||
</div>
|
||||
<label className="text-xs text-zinc-400">
|
||||
{t("alerts.policy.repeatMinutes")}
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={rule.repeatMinutes ?? 0}
|
||||
onChange={(event) =>
|
||||
updateRule(rule.eventType, { repeatMinutes: Number(event.target.value) })
|
||||
}
|
||||
disabled={!canEdit}
|
||||
className="ml-2 w-20 rounded-lg border border-white/10 bg-black/30 px-2 py-1 text-xs text-white"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 grid grid-cols-1 gap-3 md:grid-cols-3">
|
||||
{ROLE_ORDER.map((role) => {
|
||||
const roleRule = rule.roles[role];
|
||||
return (
|
||||
<div key={role} className="rounded-xl border border-white/10 bg-black/20 p-3">
|
||||
<div className="text-sm font-semibold text-white">{role}</div>
|
||||
<label className="mt-2 flex items-center gap-2 text-xs text-zinc-400">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={roleRule.enabled}
|
||||
onChange={(event) =>
|
||||
updateRuleRole(rule.eventType, role, { enabled: event.target.checked })
|
||||
}
|
||||
disabled={!canEdit}
|
||||
className="h-4 w-4 rounded border border-white/20 bg-black/20"
|
||||
/>
|
||||
{t("alerts.policy.enabled")}
|
||||
</label>
|
||||
<label className="mt-3 block text-xs text-zinc-400">
|
||||
{t("alerts.policy.afterMinutes")}
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
value={roleRule.afterMinutes}
|
||||
onChange={(event) =>
|
||||
updateRuleRole(rule.eventType, role, { afterMinutes: Number(event.target.value) })
|
||||
}
|
||||
disabled={!canEdit}
|
||||
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
||||
/>
|
||||
</label>
|
||||
<div className="mt-3 text-xs text-zinc-400">{t("alerts.policy.channels")}</div>
|
||||
<div className="mt-2 flex flex-wrap gap-3">
|
||||
{CHANNELS.map((channel) => (
|
||||
<label key={channel} className="flex items-center gap-2 text-xs text-zinc-400">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={roleRule.channels.includes(channel)}
|
||||
onChange={(event) => {
|
||||
const next = event.target.checked
|
||||
? [...roleRule.channels, channel]
|
||||
: roleRule.channels.filter((c) => c !== channel);
|
||||
updateRuleRole(rule.eventType, role, { channels: next });
|
||||
}}
|
||||
disabled={!canEdit}
|
||||
className="h-4 w-4 rounded border border-white/20 bg-black/20"
|
||||
/>
|
||||
{channel.toUpperCase()}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-2xl border border-white/10 bg-white/5 p-5">
|
||||
<div className="mb-4 flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white">{t("alerts.contacts.title")}</div>
|
||||
<div className="text-xs text-zinc-400">{t("alerts.contacts.subtitle")}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!canEdit && (
|
||||
<div className="mb-4 rounded-xl border border-white/10 bg-black/20 p-3 text-sm text-zinc-300">
|
||||
{t("alerts.contacts.readOnly")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contactsError && (
|
||||
<div className="mb-3 rounded-xl border border-red-500/20 bg-red-500/10 p-3 text-sm text-red-200">
|
||||
{contactsError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<label className="rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
|
||||
{t("alerts.contacts.name")}
|
||||
<input
|
||||
value={newContact.name}
|
||||
onChange={(event) => setNewContact((prev) => ({ ...prev, name: event.target.value }))}
|
||||
disabled={!canEdit}
|
||||
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
||||
/>
|
||||
</label>
|
||||
<label className="rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
|
||||
{t("alerts.contacts.roleScope")}
|
||||
<select
|
||||
value={newContact.roleScope}
|
||||
onChange={(event) => setNewContact((prev) => ({ ...prev, roleScope: event.target.value }))}
|
||||
disabled={!canEdit}
|
||||
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
||||
>
|
||||
<option value="CUSTOM">{t("alerts.contacts.role.custom")}</option>
|
||||
<option value="MEMBER">{t("alerts.contacts.role.member")}</option>
|
||||
<option value="ADMIN">{t("alerts.contacts.role.admin")}</option>
|
||||
<option value="OWNER">{t("alerts.contacts.role.owner")}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
|
||||
{t("alerts.contacts.email")}
|
||||
<input
|
||||
value={newContact.email}
|
||||
onChange={(event) => setNewContact((prev) => ({ ...prev, email: event.target.value }))}
|
||||
disabled={!canEdit}
|
||||
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
||||
/>
|
||||
</label>
|
||||
<label className="rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
|
||||
{t("alerts.contacts.phone")}
|
||||
<input
|
||||
value={newContact.phone}
|
||||
onChange={(event) => setNewContact((prev) => ({ ...prev, phone: event.target.value }))}
|
||||
disabled={!canEdit}
|
||||
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
||||
/>
|
||||
</label>
|
||||
<label className="rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400 md:col-span-2">
|
||||
{t("alerts.contacts.eventTypes")}
|
||||
<div className="mt-2 flex flex-wrap gap-3">
|
||||
{EVENT_TYPES.map((eventType) => (
|
||||
<label key={eventType.value} className="flex items-center gap-2 text-xs text-zinc-400">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={newContact.eventTypes.includes(eventType.value)}
|
||||
onChange={(event) => {
|
||||
const next = event.target.checked
|
||||
? [...newContact.eventTypes, eventType.value]
|
||||
: newContact.eventTypes.filter((value) => value !== eventType.value);
|
||||
setNewContact((prev) => ({ ...prev, eventTypes: next }));
|
||||
}}
|
||||
disabled={!canEdit}
|
||||
className="h-4 w-4 rounded border border-white/20 bg-black/20"
|
||||
/>
|
||||
{t(eventType.labelKey)}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-zinc-500">{t("alerts.contacts.eventTypesHelper")}</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{createError && (
|
||||
<div className="mt-3 rounded-xl border border-red-500/20 bg-red-500/10 p-3 text-sm text-red-200">
|
||||
{createError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={createContact}
|
||||
disabled={!canEdit || creatingContact}
|
||||
className="rounded-xl border border-white/10 bg-white/10 px-4 py-2 text-sm text-white disabled:opacity-40"
|
||||
>
|
||||
{creatingContact ? t("alerts.contacts.creating") : t("alerts.contacts.add")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 space-y-3">
|
||||
{contacts.length === 0 && (
|
||||
<div className="text-sm text-zinc-400">{t("alerts.contacts.empty")}</div>
|
||||
)}
|
||||
{contacts.map((contact) => {
|
||||
const draft = contactEdits[contact.id] ?? normalizeContactDraft(contact);
|
||||
const locked = !!contact.userId;
|
||||
return (
|
||||
<div key={contact.id} className="rounded-xl border border-white/10 bg-black/20 p-3">
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<label className="text-xs text-zinc-400">
|
||||
{t("alerts.contacts.name")}
|
||||
<input
|
||||
value={draft.name}
|
||||
onChange={(event) => updateContactDraft(contact.id, { name: event.target.value })}
|
||||
disabled={!canEdit || locked}
|
||||
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white disabled:opacity-50"
|
||||
/>
|
||||
</label>
|
||||
<label className="text-xs text-zinc-400">
|
||||
{t("alerts.contacts.roleScope")}
|
||||
<select
|
||||
value={draft.roleScope}
|
||||
onChange={(event) => updateContactDraft(contact.id, { roleScope: event.target.value })}
|
||||
disabled={!canEdit}
|
||||
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
||||
>
|
||||
<option value="CUSTOM">{t("alerts.contacts.role.custom")}</option>
|
||||
<option value="MEMBER">{t("alerts.contacts.role.member")}</option>
|
||||
<option value="ADMIN">{t("alerts.contacts.role.admin")}</option>
|
||||
<option value="OWNER">{t("alerts.contacts.role.owner")}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="text-xs text-zinc-400">
|
||||
{t("alerts.contacts.email")}
|
||||
<input
|
||||
value={draft.email}
|
||||
onChange={(event) => updateContactDraft(contact.id, { email: event.target.value })}
|
||||
disabled={!canEdit || locked}
|
||||
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white disabled:opacity-50"
|
||||
/>
|
||||
</label>
|
||||
<label className="text-xs text-zinc-400">
|
||||
{t("alerts.contacts.phone")}
|
||||
<input
|
||||
value={draft.phone}
|
||||
onChange={(event) => updateContactDraft(contact.id, { phone: event.target.value })}
|
||||
disabled={!canEdit || locked}
|
||||
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white disabled:opacity-50"
|
||||
/>
|
||||
</label>
|
||||
<label className="text-xs text-zinc-400 md:col-span-2">
|
||||
{t("alerts.contacts.eventTypes")}
|
||||
<div className="mt-2 flex flex-wrap gap-3">
|
||||
{EVENT_TYPES.map((eventType) => (
|
||||
<label key={eventType.value} className="flex items-center gap-2 text-xs text-zinc-400">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={draft.eventTypes.includes(eventType.value)}
|
||||
onChange={(event) => {
|
||||
const next = event.target.checked
|
||||
? [...draft.eventTypes, eventType.value]
|
||||
: draft.eventTypes.filter((value) => value !== eventType.value);
|
||||
updateContactDraft(contact.id, { eventTypes: next });
|
||||
}}
|
||||
disabled={!canEdit}
|
||||
className="h-4 w-4 rounded border border-white/20 bg-black/20"
|
||||
/>
|
||||
{t(eventType.labelKey)}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-zinc-500">{t("alerts.contacts.eventTypesHelper")}</div>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-xs text-zinc-400">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={draft.isActive}
|
||||
onChange={(event) => updateContactDraft(contact.id, { isActive: event.target.checked })}
|
||||
disabled={!canEdit}
|
||||
className="h-4 w-4 rounded border border-white/20 bg-black/20"
|
||||
/>
|
||||
{t("alerts.contacts.active")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => saveContact(contact.id)}
|
||||
disabled={!canEdit || savingContactId === contact.id}
|
||||
className="rounded-xl border border-white/10 bg-white/10 px-4 py-2 text-xs text-white disabled:opacity-40"
|
||||
>
|
||||
{savingContactId === contact.id ? t("alerts.contacts.saving") : t("alerts.contacts.save")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteContact(contact.id)}
|
||||
disabled={!canEdit || deletingContactId === contact.id}
|
||||
className="rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-2 text-xs text-red-200 disabled:opacity-40"
|
||||
>
|
||||
{deletingContactId === contact.id ? t("alerts.contacts.deleting") : t("alerts.contacts.delete")}
|
||||
</button>
|
||||
{locked && (
|
||||
<span className="text-xs text-zinc-500">{t("alerts.contacts.linkedUser")}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
682
components/settings/FinancialCostConfig.tsx
Normal file
682
components/settings/FinancialCostConfig.tsx
Normal file
@@ -0,0 +1,682 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user