1124 lines
42 KiB
TypeScript
1124 lines
42 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
import { AlertsConfig } from "@/components/settings/AlertsConfig";
|
|
import { FinancialCostConfig } from "@/components/settings/FinancialCostConfig";
|
|
import { useI18n } from "@/lib/i18n/useI18n";
|
|
|
|
type Shift = {
|
|
name: string;
|
|
start: string;
|
|
end: string;
|
|
enabled: boolean;
|
|
};
|
|
|
|
type SettingsPayload = {
|
|
orgId?: string;
|
|
version?: number;
|
|
timezone?: string;
|
|
shiftSchedule: {
|
|
shifts: Shift[];
|
|
shiftChangeCompensationMin: number;
|
|
lunchBreakMin: number;
|
|
};
|
|
thresholds: {
|
|
stoppageMultiplier: number;
|
|
macroStoppageMultiplier: number;
|
|
oeeAlertThresholdPct: number;
|
|
performanceThresholdPct: number;
|
|
qualitySpikeDeltaPct: number;
|
|
};
|
|
alerts: {
|
|
oeeDropEnabled: boolean;
|
|
performanceDegradationEnabled: boolean;
|
|
qualitySpikeEnabled: boolean;
|
|
predictiveOeeDeclineEnabled: boolean;
|
|
};
|
|
defaults: {
|
|
moldTotal: number;
|
|
moldActive: number;
|
|
};
|
|
updatedAt?: string;
|
|
updatedBy?: string;
|
|
};
|
|
|
|
type OrgInfo = {
|
|
id: string;
|
|
name: string;
|
|
slug: string;
|
|
};
|
|
|
|
type MemberRow = {
|
|
id: string;
|
|
membershipId: string;
|
|
name?: string | null;
|
|
email: string;
|
|
role: string;
|
|
isActive: boolean;
|
|
joinedAt: string;
|
|
};
|
|
|
|
type InviteRow = {
|
|
id: string;
|
|
email: string;
|
|
role: string;
|
|
token: string;
|
|
createdAt: string;
|
|
expiresAt: string;
|
|
};
|
|
|
|
const DEFAULT_SHIFT: Omit<Shift, "name"> = {
|
|
start: "06:00",
|
|
end: "15:00",
|
|
enabled: true,
|
|
};
|
|
|
|
const DEFAULT_SETTINGS: SettingsPayload = {
|
|
orgId: "",
|
|
version: 0,
|
|
timezone: "UTC",
|
|
shiftSchedule: {
|
|
shifts: [],
|
|
shiftChangeCompensationMin: 10,
|
|
lunchBreakMin: 30,
|
|
},
|
|
thresholds: {
|
|
stoppageMultiplier: 1.5,
|
|
oeeAlertThresholdPct: 90,
|
|
macroStoppageMultiplier: 5,
|
|
performanceThresholdPct: 85,
|
|
qualitySpikeDeltaPct: 5,
|
|
},
|
|
alerts: {
|
|
oeeDropEnabled: true,
|
|
performanceDegradationEnabled: true,
|
|
qualitySpikeEnabled: true,
|
|
predictiveOeeDeclineEnabled: true,
|
|
},
|
|
defaults: {
|
|
moldTotal: 1,
|
|
moldActive: 1,
|
|
},
|
|
updatedAt: "",
|
|
updatedBy: "",
|
|
};
|
|
|
|
const SETTINGS_TABS = [
|
|
{ id: "general", labelKey: "settings.tabs.general" },
|
|
{ id: "shifts", labelKey: "settings.tabs.shifts" },
|
|
{ id: "thresholds", labelKey: "settings.tabs.thresholds" },
|
|
{ id: "alerts", labelKey: "settings.tabs.alerts" },
|
|
{ id: "financial", labelKey: "settings.tabs.financial" },
|
|
{ id: "team", labelKey: "settings.tabs.team" },
|
|
] as const;
|
|
|
|
type ReadResponse<T> = { data: T | null; text: string };
|
|
type ApiEnvelope = { ok: boolean; error?: string; message?: string };
|
|
|
|
function asRecord(value: unknown): Record<string, unknown> | null {
|
|
if (!value || typeof value !== "object" || Array.isArray(value)) return null;
|
|
return value as Record<string, unknown>;
|
|
}
|
|
|
|
function unwrapApiResponse(data: unknown): { ok: boolean; error: string | null; record: Record<string, unknown> | null } {
|
|
const record = asRecord(data);
|
|
const ok = typeof record?.ok === "boolean" ? record.ok : false;
|
|
const error =
|
|
typeof record?.error === "string"
|
|
? record.error
|
|
: typeof record?.message === "string"
|
|
? record.message
|
|
: null;
|
|
return { ok, error, record };
|
|
}
|
|
|
|
function isOrgInfo(value: unknown): value is OrgInfo {
|
|
const record = asRecord(value);
|
|
return (
|
|
!!record &&
|
|
typeof record.id === "string" &&
|
|
typeof record.name === "string" &&
|
|
typeof record.slug === "string"
|
|
);
|
|
}
|
|
|
|
function isMemberRow(value: unknown): value is MemberRow {
|
|
const record = asRecord(value);
|
|
return (
|
|
!!record &&
|
|
typeof record.id === "string" &&
|
|
typeof record.membershipId === "string" &&
|
|
typeof record.email === "string" &&
|
|
typeof record.role === "string" &&
|
|
typeof record.isActive === "boolean" &&
|
|
typeof record.joinedAt === "string"
|
|
);
|
|
}
|
|
|
|
function isInviteRow(value: unknown): value is InviteRow {
|
|
const record = asRecord(value);
|
|
return (
|
|
!!record &&
|
|
typeof record.id === "string" &&
|
|
typeof record.email === "string" &&
|
|
typeof record.role === "string" &&
|
|
typeof record.token === "string" &&
|
|
typeof record.createdAt === "string" &&
|
|
typeof record.expiresAt === "string"
|
|
);
|
|
}
|
|
|
|
async function readResponse<T>(response: Response): Promise<ReadResponse<T>> {
|
|
const text = await response.text();
|
|
if (!text) {
|
|
return { data: null, text: "" };
|
|
}
|
|
try {
|
|
return { data: JSON.parse(text) as T, text };
|
|
} catch {
|
|
return { data: null, text };
|
|
}
|
|
}
|
|
|
|
function normalizeShift(raw: unknown, fallbackName: string): Shift {
|
|
const record = asRecord(raw);
|
|
const name = String(record?.name ?? fallbackName);
|
|
const start = String(record?.start ?? record?.startTime ?? DEFAULT_SHIFT.start);
|
|
const end = String(record?.end ?? record?.endTime ?? DEFAULT_SHIFT.end);
|
|
const enabled = record?.enabled !== false;
|
|
return { name, start, end, enabled };
|
|
}
|
|
|
|
function normalizeSettings(raw: unknown, fallbackName: (index: number) => string): SettingsPayload {
|
|
const record = asRecord(raw);
|
|
if (!record) {
|
|
return {
|
|
...DEFAULT_SETTINGS,
|
|
shiftSchedule: {
|
|
...DEFAULT_SETTINGS.shiftSchedule,
|
|
shifts: [{ name: fallbackName(1), ...DEFAULT_SHIFT }],
|
|
},
|
|
};
|
|
}
|
|
|
|
const shiftSchedule = asRecord(record.shiftSchedule) ?? {};
|
|
const shiftsRaw = Array.isArray(shiftSchedule.shifts) ? shiftSchedule.shifts : [];
|
|
const shifts = shiftsRaw.length
|
|
? shiftsRaw.map((s, idx) => normalizeShift(s, fallbackName(idx + 1)))
|
|
: [{ name: fallbackName(1), ...DEFAULT_SHIFT }];
|
|
const thresholds = asRecord(record.thresholds) ?? {};
|
|
const alerts = asRecord(record.alerts) ?? {};
|
|
const defaults = asRecord(record.defaults) ?? {};
|
|
|
|
return {
|
|
orgId: String(record.orgId ?? ""),
|
|
version: Number(record.version ?? 0),
|
|
timezone: String(record.timezone ?? DEFAULT_SETTINGS.timezone),
|
|
shiftSchedule: {
|
|
shifts,
|
|
shiftChangeCompensationMin: Number(
|
|
shiftSchedule.shiftChangeCompensationMin ?? DEFAULT_SETTINGS.shiftSchedule.shiftChangeCompensationMin
|
|
),
|
|
lunchBreakMin: Number(shiftSchedule.lunchBreakMin ?? DEFAULT_SETTINGS.shiftSchedule.lunchBreakMin),
|
|
},
|
|
thresholds: {
|
|
stoppageMultiplier: Number(
|
|
thresholds.stoppageMultiplier ?? DEFAULT_SETTINGS.thresholds.stoppageMultiplier
|
|
),
|
|
macroStoppageMultiplier: Number(
|
|
thresholds.macroStoppageMultiplier ?? DEFAULT_SETTINGS.thresholds.macroStoppageMultiplier
|
|
),
|
|
oeeAlertThresholdPct: Number(
|
|
thresholds.oeeAlertThresholdPct ?? DEFAULT_SETTINGS.thresholds.oeeAlertThresholdPct
|
|
),
|
|
performanceThresholdPct: Number(
|
|
thresholds.performanceThresholdPct ?? DEFAULT_SETTINGS.thresholds.performanceThresholdPct
|
|
),
|
|
qualitySpikeDeltaPct: Number(
|
|
thresholds.qualitySpikeDeltaPct ?? DEFAULT_SETTINGS.thresholds.qualitySpikeDeltaPct
|
|
),
|
|
},
|
|
alerts: {
|
|
oeeDropEnabled: (alerts.oeeDropEnabled as boolean | undefined) ?? DEFAULT_SETTINGS.alerts.oeeDropEnabled,
|
|
performanceDegradationEnabled:
|
|
(alerts.performanceDegradationEnabled as boolean | undefined) ??
|
|
DEFAULT_SETTINGS.alerts.performanceDegradationEnabled,
|
|
qualitySpikeEnabled:
|
|
(alerts.qualitySpikeEnabled as boolean | undefined) ?? DEFAULT_SETTINGS.alerts.qualitySpikeEnabled,
|
|
predictiveOeeDeclineEnabled:
|
|
(alerts.predictiveOeeDeclineEnabled as boolean | undefined) ??
|
|
DEFAULT_SETTINGS.alerts.predictiveOeeDeclineEnabled,
|
|
},
|
|
defaults: {
|
|
moldTotal: Number(defaults.moldTotal ?? DEFAULT_SETTINGS.defaults.moldTotal),
|
|
moldActive: Number(defaults.moldActive ?? DEFAULT_SETTINGS.defaults.moldActive),
|
|
},
|
|
updatedAt: record.updatedAt ? String(record.updatedAt) : "",
|
|
updatedBy: record.updatedBy ? String(record.updatedBy) : "",
|
|
};
|
|
}
|
|
|
|
function Toggle({
|
|
label,
|
|
helper,
|
|
enabled,
|
|
onChange,
|
|
}: {
|
|
label: string;
|
|
helper: string;
|
|
enabled: boolean;
|
|
onChange: (next: boolean) => void;
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange(!enabled)}
|
|
className="flex w-full items-center justify-between gap-4 rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-left hover:bg-white/5"
|
|
>
|
|
<div>
|
|
<div className="text-sm font-semibold text-white">{label}</div>
|
|
<div className="text-xs text-zinc-400">{helper}</div>
|
|
</div>
|
|
<span
|
|
className={`h-6 w-12 rounded-full border border-white/10 p-0.5 transition ${
|
|
enabled ? "bg-emerald-500/20" : "bg-white/5"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`block h-5 w-5 rounded-full transition ${
|
|
enabled ? "translate-x-6 bg-emerald-400" : "bg-zinc-500"
|
|
}`}
|
|
/>
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default function SettingsPage() {
|
|
const { t, locale } = useI18n();
|
|
const [draft, setDraft] = useState<SettingsPayload | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [saveStatus, setSaveStatus] = useState<"saved" | null>(null);
|
|
const [orgInfo, setOrgInfo] = useState<OrgInfo | null>(null);
|
|
const [members, setMembers] = useState<MemberRow[]>([]);
|
|
const [invites, setInvites] = useState<InviteRow[]>([]);
|
|
const [teamLoading, setTeamLoading] = useState(true);
|
|
const [teamError, setTeamError] = useState<string | null>(null);
|
|
const [inviteEmail, setInviteEmail] = useState("");
|
|
const [inviteRole, setInviteRole] = useState("MEMBER");
|
|
const [inviteStatus, setInviteStatus] = useState<string | null>(null);
|
|
const [inviteSubmitting, setInviteSubmitting] = useState(false);
|
|
const [activeTab, setActiveTab] = useState<(typeof SETTINGS_TABS)[number]["id"]>("general");
|
|
const defaultShiftName = useCallback(
|
|
(index: number) => t("settings.shift.defaultName", { index }),
|
|
[t]
|
|
);
|
|
|
|
const loadSettings = useCallback(async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const response = await fetch("/api/settings", { cache: "no-store" });
|
|
const { data, text } = await readResponse(response);
|
|
const api = unwrapApiResponse(data);
|
|
if (!response.ok || !api.ok) {
|
|
const message = api.error || text || t("settings.failedLoad");
|
|
throw new Error(message);
|
|
}
|
|
const next = normalizeSettings(api.record?.settings, defaultShiftName);
|
|
setDraft(next);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : t("settings.failedLoad"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [defaultShiftName, t]);
|
|
|
|
const buildInviteUrl = useCallback((token: string) => {
|
|
if (typeof window === "undefined") return `/invite/${token}`;
|
|
return `${window.location.origin}/invite/${token}`;
|
|
}, []);
|
|
|
|
const loadTeam = useCallback(async () => {
|
|
setTeamLoading(true);
|
|
setTeamError(null);
|
|
try {
|
|
const response = await fetch("/api/org/members", { cache: "no-store" });
|
|
const { data, text } = await readResponse(response);
|
|
const api = unwrapApiResponse(data);
|
|
if (!response.ok || !api.ok) {
|
|
const message = api.error || text || t("settings.failedTeam");
|
|
throw new Error(message);
|
|
}
|
|
setOrgInfo(isOrgInfo(api.record?.org) ? api.record?.org : null);
|
|
const membersRaw = Array.isArray(api.record?.members) ? api.record?.members : [];
|
|
const invitesRaw = Array.isArray(api.record?.invites) ? api.record?.invites : [];
|
|
setMembers(membersRaw.filter(isMemberRow));
|
|
setInvites(invitesRaw.filter(isInviteRow));
|
|
} catch (err) {
|
|
setTeamError(err instanceof Error ? err.message : t("settings.failedTeam"));
|
|
} finally {
|
|
setTeamLoading(false);
|
|
}
|
|
}, [t]);
|
|
|
|
useEffect(() => {
|
|
loadSettings();
|
|
loadTeam();
|
|
}, [loadSettings, loadTeam]);
|
|
|
|
const updateShift = useCallback((index: number, patch: Partial<Shift>) => {
|
|
setDraft((prev) => {
|
|
if (!prev) return prev;
|
|
const shifts = prev.shiftSchedule.shifts.map((shift, idx) =>
|
|
idx === index ? { ...shift, ...patch } : shift
|
|
);
|
|
return {
|
|
...prev,
|
|
shiftSchedule: {
|
|
...prev.shiftSchedule,
|
|
shifts,
|
|
},
|
|
};
|
|
});
|
|
}, []);
|
|
|
|
const addShift = useCallback(() => {
|
|
setDraft((prev) => {
|
|
if (!prev) return prev;
|
|
if (prev.shiftSchedule.shifts.length >= 3) return prev;
|
|
const nextIndex = prev.shiftSchedule.shifts.length + 1;
|
|
const newShift: Shift = {
|
|
name: defaultShiftName(nextIndex),
|
|
...DEFAULT_SHIFT,
|
|
};
|
|
return {
|
|
...prev,
|
|
shiftSchedule: {
|
|
...prev.shiftSchedule,
|
|
shifts: [...prev.shiftSchedule.shifts, newShift],
|
|
},
|
|
};
|
|
});
|
|
}, [defaultShiftName]);
|
|
|
|
const removeShift = useCallback((index: number) => {
|
|
setDraft((prev) => {
|
|
if (!prev) return prev;
|
|
if (prev.shiftSchedule.shifts.length <= 1) return prev;
|
|
const shifts = prev.shiftSchedule.shifts.filter((_, idx) => idx !== index);
|
|
return {
|
|
...prev,
|
|
shiftSchedule: {
|
|
...prev.shiftSchedule,
|
|
shifts,
|
|
},
|
|
};
|
|
});
|
|
}, []);
|
|
|
|
const updateShiftField = useCallback((key: "shiftChangeCompensationMin" | "lunchBreakMin", value: number) => {
|
|
setDraft((prev) => {
|
|
if (!prev) return prev;
|
|
return {
|
|
...prev,
|
|
shiftSchedule: {
|
|
...prev.shiftSchedule,
|
|
[key]: value,
|
|
},
|
|
};
|
|
});
|
|
}, []);
|
|
|
|
const updateThreshold = useCallback(
|
|
(
|
|
key:
|
|
| "stoppageMultiplier"
|
|
| "macroStoppageMultiplier"
|
|
| "oeeAlertThresholdPct"
|
|
| "performanceThresholdPct"
|
|
| "qualitySpikeDeltaPct",
|
|
value: number
|
|
) => {
|
|
setDraft((prev) => {
|
|
if (!prev) return prev;
|
|
return {
|
|
...prev,
|
|
thresholds: {
|
|
...prev.thresholds,
|
|
[key]: value,
|
|
},
|
|
};
|
|
});
|
|
},
|
|
[]
|
|
);
|
|
|
|
const updateDefaults = useCallback((key: "moldTotal" | "moldActive", value: number) => {
|
|
setDraft((prev) => {
|
|
if (!prev) return prev;
|
|
return {
|
|
...prev,
|
|
defaults: {
|
|
...prev.defaults,
|
|
[key]: value,
|
|
},
|
|
};
|
|
});
|
|
}, []);
|
|
|
|
const updateAlerts = useCallback(
|
|
(
|
|
key:
|
|
| "oeeDropEnabled"
|
|
| "performanceDegradationEnabled"
|
|
| "qualitySpikeEnabled"
|
|
| "predictiveOeeDeclineEnabled",
|
|
value: boolean
|
|
) => {
|
|
setDraft((prev) => {
|
|
if (!prev) return prev;
|
|
return {
|
|
...prev,
|
|
alerts: {
|
|
...prev.alerts,
|
|
[key]: value,
|
|
},
|
|
};
|
|
});
|
|
},
|
|
[]
|
|
);
|
|
|
|
const copyInviteLink = useCallback(
|
|
async (token: string) => {
|
|
const url = buildInviteUrl(token);
|
|
try {
|
|
if (navigator.clipboard?.writeText) {
|
|
await navigator.clipboard.writeText(url);
|
|
setInviteStatus(t("settings.inviteStatus.copied"));
|
|
} else {
|
|
setInviteStatus(url);
|
|
}
|
|
} catch {
|
|
setInviteStatus(url);
|
|
}
|
|
},
|
|
[buildInviteUrl, t]
|
|
);
|
|
|
|
const revokeInvite = useCallback(async (inviteId: string) => {
|
|
setInviteStatus(null);
|
|
try {
|
|
const response = await fetch(`/api/org/invites/${inviteId}`, { method: "DELETE" });
|
|
const { data, text } = await readResponse(response);
|
|
const api = unwrapApiResponse(data);
|
|
if (!response.ok || !api.ok) {
|
|
const message = api.error || text || t("settings.inviteStatus.failed");
|
|
throw new Error(message);
|
|
}
|
|
setInvites((prev) => prev.filter((invite) => invite.id !== inviteId));
|
|
} catch (err) {
|
|
setInviteStatus(err instanceof Error ? err.message : t("settings.inviteStatus.failed"));
|
|
}
|
|
}, [t]);
|
|
|
|
const createInvite = useCallback(async () => {
|
|
if (!inviteEmail.trim()) {
|
|
setInviteStatus(t("settings.inviteStatus.emailRequired"));
|
|
return;
|
|
}
|
|
setInviteSubmitting(true);
|
|
setInviteStatus(null);
|
|
try {
|
|
const response = await fetch("/api/org/members", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email: inviteEmail, role: inviteRole }),
|
|
});
|
|
const { data, text } = await readResponse(response);
|
|
const api = unwrapApiResponse(data);
|
|
if (!response.ok || !api.ok) {
|
|
const message = api.error || text || t("settings.inviteStatus.createFailed");
|
|
throw new Error(message);
|
|
}
|
|
const nextInvite = api.record?.invite;
|
|
if (isInviteRow(nextInvite)) {
|
|
setInvites((prev) => [nextInvite, ...prev.filter((invite) => invite.id !== nextInvite.id)]);
|
|
const inviteUrl = buildInviteUrl(nextInvite.token);
|
|
if (api.record?.emailSent === false) {
|
|
setInviteStatus(t("settings.inviteStatus.emailFailed", { url: inviteUrl }));
|
|
} else {
|
|
setInviteStatus(t("settings.inviteStatus.sent"));
|
|
}
|
|
}
|
|
setInviteEmail("");
|
|
await loadTeam();
|
|
} catch (err) {
|
|
setInviteStatus(err instanceof Error ? err.message : t("settings.inviteStatus.createFailed"));
|
|
} finally {
|
|
setInviteSubmitting(false);
|
|
}
|
|
}, [buildInviteUrl, inviteEmail, inviteRole, loadTeam, t]);
|
|
|
|
const saveSettings = useCallback(async () => {
|
|
if (!draft) return;
|
|
setSaving(true);
|
|
setSaveStatus(null);
|
|
setError(null);
|
|
try {
|
|
const response = await fetch("/api/settings", {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
source: "control_tower",
|
|
version: draft.version,
|
|
timezone: draft.timezone,
|
|
shiftSchedule: draft.shiftSchedule,
|
|
thresholds: draft.thresholds,
|
|
alerts: draft.alerts,
|
|
defaults: draft.defaults,
|
|
}),
|
|
});
|
|
const { data, text } = await readResponse(response);
|
|
const api = unwrapApiResponse(data);
|
|
if (!response.ok || !api.ok) {
|
|
if (response.status === 409) {
|
|
throw new Error(t("settings.conflict"));
|
|
}
|
|
const message = api.error || text || t("settings.failedSave");
|
|
throw new Error(message);
|
|
}
|
|
const next = normalizeSettings(api.record?.settings, defaultShiftName);
|
|
setDraft(next);
|
|
setSaveStatus("saved");
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : t("settings.failedSave"));
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}, [defaultShiftName, draft, t]);
|
|
|
|
const statusLabel = useMemo(() => {
|
|
if (loading) return t("settings.loading");
|
|
if (saving) return t("settings.saving");
|
|
if (saveStatus === "saved") return t("settings.saved");
|
|
return null;
|
|
}, [loading, saving, saveStatus, t]);
|
|
|
|
const formatRole = useCallback(
|
|
(role?: string | null) => {
|
|
if (!role) return "";
|
|
const key = `settings.role.${role.toLowerCase()}`;
|
|
const label = t(key);
|
|
return label === key ? role : label;
|
|
},
|
|
[t]
|
|
);
|
|
|
|
if (loading && !draft) {
|
|
return (
|
|
<div className="p-4 sm:p-6">
|
|
<div className="rounded-2xl border border-white/10 bg-white/5 p-6 text-sm text-zinc-300">
|
|
{t("settings.loading")}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!draft) {
|
|
return (
|
|
<div className="p-4 sm:p-6">
|
|
<div className="rounded-2xl border border-red-500/30 bg-red-500/10 p-6 text-sm text-red-200">
|
|
{error || t("settings.unavailable")}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-4 sm:p-6">
|
|
<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold text-white">{t("settings.title")}</h1>
|
|
<p className="text-sm text-zinc-400">{t("settings.subtitle")}</p>
|
|
</div>
|
|
<div className="flex w-full flex-wrap items-center gap-2 sm:w-auto">
|
|
<button
|
|
onClick={loadSettings}
|
|
className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-center text-sm text-white hover:bg-white/10 sm:w-auto"
|
|
>
|
|
{t("settings.refresh")}
|
|
</button>
|
|
<button
|
|
onClick={saveSettings}
|
|
disabled={saving}
|
|
className="w-full rounded-xl border border-emerald-400/40 bg-emerald-500/20 px-4 py-2 text-center text-sm text-emerald-100 hover:bg-emerald-500/30 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
|
|
>
|
|
{t("settings.save")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{(error || statusLabel) && (
|
|
<div className="mb-6 rounded-2xl border border-white/10 bg-white/5 p-4 text-sm text-zinc-300">
|
|
{error ? error : statusLabel}
|
|
</div>
|
|
)}
|
|
|
|
<div className="mb-6 flex flex-wrap gap-2 rounded-2xl border border-white/10 bg-white/5 p-2">
|
|
{SETTINGS_TABS.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={
|
|
tab.id === activeTab
|
|
? "rounded-xl bg-emerald-500/20 px-4 py-2 text-sm text-emerald-200"
|
|
: "rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-zinc-200 hover:bg-white/10"
|
|
}
|
|
>
|
|
{t(tab.labelKey)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{activeTab === "general" && (
|
|
<div className="space-y-6">
|
|
<div className="rounded-2xl border border-white/10 bg-white/5 p-5">
|
|
<div className="text-sm font-semibold text-white">{t("settings.org.title")}</div>
|
|
<div className="mt-4 space-y-3">
|
|
<div className="rounded-xl border border-white/10 bg-black/20 p-3">
|
|
<div className="text-xs text-zinc-400">{t("settings.org.plantName")}</div>
|
|
<div className="mt-1 text-sm text-zinc-300">{orgInfo?.name || t("common.loading")}</div>
|
|
{orgInfo?.slug ? (
|
|
<div className="mt-1 text-[11px] text-zinc-500">
|
|
{t("settings.org.slug")}: {orgInfo.slug}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<label className="block rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
|
|
{t("settings.org.timeZone")}
|
|
<input
|
|
value={draft.timezone || ""}
|
|
onChange={(event) =>
|
|
setDraft((prev) =>
|
|
prev
|
|
? {
|
|
...prev,
|
|
timezone: event.target.value,
|
|
}
|
|
: prev
|
|
)
|
|
}
|
|
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="text-xs text-zinc-500">
|
|
{t("settings.updated")}:{" "}
|
|
{draft.updatedAt ? new Date(draft.updatedAt).toLocaleString(locale) : t("common.na")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
|
|
<div className="rounded-2xl border border-white/10 bg-white/5 p-5">
|
|
<div className="mb-3 text-sm font-semibold text-white">{t("settings.defaults")}</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("settings.defaults.moldTotal")}
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
value={draft.defaults.moldTotal}
|
|
onChange={(event) => updateDefaults("moldTotal", Number(event.target.value))}
|
|
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("settings.defaults.moldActive")}
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
value={draft.defaults.moldActive}
|
|
onChange={(event) => updateDefaults("moldActive", Number(event.target.value))}
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-white/10 bg-white/5 p-5">
|
|
<div className="mb-3 text-sm font-semibold text-white">{t("settings.integrations")}</div>
|
|
<div className="space-y-3 text-sm text-zinc-300">
|
|
<div className="rounded-xl border border-white/10 bg-black/20 p-3">
|
|
<div className="text-xs text-zinc-400">{t("settings.integrations.webhook")}</div>
|
|
<div className="mt-1 text-sm text-white">https://hooks.example.com/iiot</div>
|
|
</div>
|
|
<div className="rounded-xl border border-white/10 bg-black/20 p-3">
|
|
<div className="text-xs text-zinc-400">{t("settings.integrations.erp")}</div>
|
|
<div className="mt-1 text-sm text-zinc-300">{t("settings.integrations.erpNotConfigured")}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "thresholds" && (
|
|
<div className="space-y-6">
|
|
<div className="rounded-2xl border border-white/10 bg-white/5 p-5">
|
|
<div className="mb-3 flex items-center justify-between gap-4">
|
|
<div className="text-sm font-semibold text-white">{t("settings.thresholds")}</div>
|
|
<div className="text-xs text-zinc-400">{t("settings.thresholds.appliesAll")}</div>
|
|
</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("settings.thresholds.oee")} (%)
|
|
<input
|
|
type="number"
|
|
min={50}
|
|
max={100}
|
|
value={draft.thresholds.oeeAlertThresholdPct}
|
|
onChange={(event) =>
|
|
updateThreshold("oeeAlertThresholdPct", Number(event.target.value))
|
|
}
|
|
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("settings.thresholds.stoppage")}
|
|
<input
|
|
type="number"
|
|
min={1.1}
|
|
max={5}
|
|
step={0.1}
|
|
value={draft.thresholds.stoppageMultiplier}
|
|
onChange={(event) =>
|
|
updateThreshold("stoppageMultiplier", Number(event.target.value))
|
|
}
|
|
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("settings.thresholds.macroStoppage")}
|
|
<input
|
|
type="number"
|
|
min={1.1}
|
|
max={20}
|
|
step={0.1}
|
|
value={draft.thresholds.macroStoppageMultiplier}
|
|
onChange={(event) =>
|
|
updateThreshold("macroStoppageMultiplier", Number(event.target.value))
|
|
}
|
|
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("settings.thresholds.performance")} (%)
|
|
<input
|
|
type="number"
|
|
min={50}
|
|
max={100}
|
|
value={draft.thresholds.performanceThresholdPct}
|
|
onChange={(event) =>
|
|
updateThreshold("performanceThresholdPct", Number(event.target.value))
|
|
}
|
|
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("settings.thresholds.qualitySpike")} (%)
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
max={100}
|
|
value={draft.thresholds.qualitySpikeDeltaPct}
|
|
onChange={(event) =>
|
|
updateThreshold("qualitySpikeDeltaPct", Number(event.target.value))
|
|
}
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "shifts" && (
|
|
<div className="space-y-6">
|
|
<div className="rounded-2xl border border-white/10 bg-white/5 p-5">
|
|
<div className="mb-3 flex items-center justify-between gap-4">
|
|
<div className="text-sm font-semibold text-white">{t("settings.shiftSchedule")}</div>
|
|
<div className="text-xs text-zinc-400">{t("settings.shiftHint")}</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
|
{draft.shiftSchedule.shifts.map((shift, index) => (
|
|
<div key={`${shift.name}-${index}`} className="rounded-xl border border-white/10 bg-black/20 p-3">
|
|
<div className="flex items-center justify-between">
|
|
<input
|
|
value={shift.name}
|
|
onChange={(event) => updateShift(index, { name: event.target.value })}
|
|
className="w-full rounded-md border border-white/10 bg-black/30 px-2 py-1 text-sm text-white"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeShift(index)}
|
|
disabled={draft.shiftSchedule.shifts.length <= 1}
|
|
className="ml-3 rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-xs text-white disabled:opacity-40"
|
|
>
|
|
{t("settings.shiftRemove")}
|
|
</button>
|
|
</div>
|
|
<div className="mt-3 flex items-center gap-2">
|
|
<input
|
|
type="time"
|
|
value={shift.start}
|
|
onChange={(event) => updateShift(index, { start: event.target.value })}
|
|
className="w-full rounded-md border border-white/10 bg-black/30 px-2 py-1 text-sm text-white"
|
|
/>
|
|
<span className="text-xs text-zinc-400">{t("settings.shiftTo")}</span>
|
|
<input
|
|
type="time"
|
|
value={shift.end}
|
|
onChange={(event) => updateShift(index, { end: event.target.value })}
|
|
className="w-full rounded-md border border-white/10 bg-black/30 px-2 py-1 text-sm text-white"
|
|
/>
|
|
</div>
|
|
<div className="mt-3 flex items-center gap-2 text-xs text-zinc-400">
|
|
<input
|
|
type="checkbox"
|
|
checked={shift.enabled}
|
|
onChange={(event) => updateShift(index, { enabled: event.target.checked })}
|
|
className="h-4 w-4 rounded border border-white/20 bg-black/20"
|
|
/>
|
|
{t("settings.shiftEnabled")}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={addShift}
|
|
disabled={draft.shiftSchedule.shifts.length >= 3}
|
|
className="rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-white disabled:opacity-40"
|
|
>
|
|
{t("settings.shiftAdd")}
|
|
</button>
|
|
<div className="flex flex-1 flex-wrap gap-3">
|
|
<label className="flex-1 rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
|
|
{t("settings.shiftCompLabel")}
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
max={480}
|
|
value={draft.shiftSchedule.shiftChangeCompensationMin}
|
|
onChange={(event) =>
|
|
updateShiftField("shiftChangeCompensationMin", Number(event.target.value))
|
|
}
|
|
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="flex-1 rounded-xl border border-white/10 bg-black/20 p-3 text-xs text-zinc-400">
|
|
{t("settings.lunchBreakLabel")}
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
max={480}
|
|
value={draft.shiftSchedule.lunchBreakMin}
|
|
onChange={(event) => updateShiftField("lunchBreakMin", Number(event.target.value))}
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "alerts" && (
|
|
<div className="space-y-6">
|
|
<div className="rounded-2xl border border-white/10 bg-white/5 p-5">
|
|
<div className="text-sm font-semibold text-white">{t("settings.alerts")}</div>
|
|
<div className="mt-4 space-y-3">
|
|
<Toggle
|
|
label={t("settings.alerts.oeeDrop")}
|
|
helper={t("settings.alerts.oeeDropHelper")}
|
|
enabled={draft.alerts.oeeDropEnabled}
|
|
onChange={(next) => updateAlerts("oeeDropEnabled", next)}
|
|
/>
|
|
<Toggle
|
|
label={t("settings.alerts.performanceDegradation")}
|
|
helper={t("settings.alerts.performanceDegradationHelper")}
|
|
enabled={draft.alerts.performanceDegradationEnabled}
|
|
onChange={(next) => updateAlerts("performanceDegradationEnabled", next)}
|
|
/>
|
|
<Toggle
|
|
label={t("settings.alerts.qualitySpike")}
|
|
helper={t("settings.alerts.qualitySpikeHelper")}
|
|
enabled={draft.alerts.qualitySpikeEnabled}
|
|
onChange={(next) => updateAlerts("qualitySpikeEnabled", next)}
|
|
/>
|
|
<Toggle
|
|
label={t("settings.alerts.predictive")}
|
|
helper={t("settings.alerts.predictiveHelper")}
|
|
enabled={draft.alerts.predictiveOeeDeclineEnabled}
|
|
onChange={(next) => updateAlerts("predictiveOeeDeclineEnabled", next)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<AlertsConfig />
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "financial" && (
|
|
<div className="space-y-6">
|
|
<FinancialCostConfig />
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "team" && (
|
|
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
|
|
<div className="rounded-2xl border border-white/10 bg-white/5 p-5">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<div className="text-sm font-semibold text-white">{t("settings.team")}</div>
|
|
<div className="text-xs text-zinc-400">{t("settings.teamTotal", { count: members.length })}</div>
|
|
</div>
|
|
|
|
{teamLoading && <div className="text-sm text-zinc-400">{t("settings.loadingTeam")}</div>}
|
|
{teamError && (
|
|
<div className="rounded-xl border border-red-500/20 bg-red-500/10 p-3 text-sm text-red-200">
|
|
{teamError}
|
|
</div>
|
|
)}
|
|
|
|
{!teamLoading && !teamError && members.length === 0 && (
|
|
<div className="text-sm text-zinc-400">{t("settings.teamNone")}</div>
|
|
)}
|
|
|
|
{!teamLoading && !teamError && members.length > 0 && (
|
|
<div className="space-y-2">
|
|
{members.map((member) => (
|
|
<div
|
|
key={member.membershipId}
|
|
className="flex items-center justify-between gap-3 rounded-xl border border-white/10 bg-black/20 p-3"
|
|
>
|
|
<div className="min-w-0">
|
|
<div className="truncate text-sm font-semibold text-white">
|
|
{member.name || member.email}
|
|
</div>
|
|
<div className="truncate text-xs text-zinc-400">{member.email}</div>
|
|
</div>
|
|
<div className="flex flex-col items-end gap-1 text-xs text-zinc-400">
|
|
<span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-white">
|
|
{formatRole(member.role)}
|
|
</span>
|
|
{!member.isActive ? (
|
|
<span className="rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-red-200">
|
|
{t("settings.role.inactive")}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-white/10 bg-white/5 p-5">
|
|
<div className="mb-3 text-sm font-semibold text-white">{t("settings.invites")}</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("settings.inviteEmail")}
|
|
<input
|
|
value={inviteEmail}
|
|
onChange={(event) => setInviteEmail(event.target.value)}
|
|
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("settings.inviteRole")}
|
|
<select
|
|
value={inviteRole}
|
|
onChange={(event) => setInviteRole(event.target.value)}
|
|
className="mt-2 w-full rounded-lg border border-white/10 bg-black/30 px-3 py-2 text-sm text-white"
|
|
>
|
|
<option value="MEMBER">{t("settings.inviteRole.member")}</option>
|
|
<option value="ADMIN">{t("settings.inviteRole.admin")}</option>
|
|
<option value="OWNER">{t("settings.inviteRole.owner")}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="mt-3 flex flex-wrap items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={createInvite}
|
|
disabled={inviteSubmitting}
|
|
className="rounded-xl border border-emerald-400/40 bg-emerald-500/20 px-4 py-2 text-sm text-emerald-100 hover:bg-emerald-500/30 disabled:opacity-60"
|
|
>
|
|
{inviteSubmitting ? t("settings.inviteSending") : t("settings.inviteSend")}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={loadTeam}
|
|
className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-white hover:bg-white/10"
|
|
>
|
|
{t("settings.refresh")}
|
|
</button>
|
|
{inviteStatus && <div className="text-xs text-zinc-400">{inviteStatus}</div>}
|
|
</div>
|
|
|
|
<div className="mt-4 space-y-3">
|
|
{invites.length === 0 && (
|
|
<div className="text-sm text-zinc-400">{t("settings.inviteNone")}</div>
|
|
)}
|
|
{invites.map((invite) => (
|
|
<div key={invite.id} className="rounded-xl border border-white/10 bg-black/20 p-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="truncate text-sm font-semibold text-white">{invite.email}</div>
|
|
<div className="text-xs text-zinc-400">
|
|
{formatRole(invite.role)} -{" "}
|
|
{t("settings.inviteExpires", {
|
|
date: new Date(invite.expiresAt).toLocaleDateString(locale),
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => copyInviteLink(invite.token)}
|
|
className="rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-xs text-white hover:bg-white/10"
|
|
>
|
|
{t("settings.inviteCopy")}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => revokeInvite(invite.id)}
|
|
className="rounded-lg border border-red-500/30 bg-red-500/10 px-2 py-1 text-xs text-red-200 hover:bg-red-500/20"
|
|
>
|
|
{t("settings.inviteRevoke")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 rounded-lg border border-white/10 bg-black/30 px-2 py-1 text-xs text-zinc-400">
|
|
{buildInviteUrl(invite.token)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|