1543 lines
51 KiB
TypeScript
1543 lines
51 KiB
TypeScript
import { useState, useEffect, useCallback, useRef } from "react";
|
||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import { useAlert } from "../context/AlertContext";
|
||
import { useAuth } from "../context/AuthContext";
|
||
import Forbidden from "../components/Forbidden";
|
||
import {
|
||
companySettingsOptions,
|
||
type CompanySettingsData,
|
||
} from "../lib/queries/settings";
|
||
import { bankAccountsOptions, type BankAccount } from "../lib/queries/common";
|
||
import { motion } from "framer-motion";
|
||
import Box from "@mui/material/Box";
|
||
import Typography from "@mui/material/Typography";
|
||
import IconButton from "@mui/material/IconButton";
|
||
|
||
import apiFetch from "../utils/api";
|
||
import { useApiMutation } from "../lib/queries/mutations";
|
||
import {
|
||
Button,
|
||
Card,
|
||
DataTable,
|
||
ConfirmDialog,
|
||
Field,
|
||
TextField,
|
||
Select,
|
||
CheckboxField,
|
||
StatusChip,
|
||
FileUpload,
|
||
LoadingState,
|
||
type DataColumn,
|
||
} from "../ui";
|
||
const API_BASE = "/api/admin";
|
||
|
||
const DEFAULT_FIELD_ORDER = [
|
||
"street",
|
||
"city_postal",
|
||
"country",
|
||
"company_id",
|
||
"vat_id",
|
||
];
|
||
|
||
const FIELD_LABELS: Record<string, string> = {
|
||
street: "Ulice",
|
||
city_postal: "Město + PSČ",
|
||
country: "Země",
|
||
company_id: "IČO",
|
||
vat_id: "DIČ",
|
||
};
|
||
|
||
const PlusIcon = (
|
||
<svg
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
);
|
||
const EditIcon = (
|
||
<svg
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
>
|
||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||
</svg>
|
||
);
|
||
const RemoveIcon = (
|
||
<svg
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
>
|
||
<line x1="18" y1="6" x2="6" y2="18" />
|
||
<line x1="6" y1="6" x2="18" y2="18" />
|
||
</svg>
|
||
);
|
||
const UpIcon = (
|
||
<svg
|
||
width="12"
|
||
height="12"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
>
|
||
<path d="M18 15l-6-6-6 6" />
|
||
</svg>
|
||
);
|
||
const DownIcon = (
|
||
<svg
|
||
width="12"
|
||
height="12"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
>
|
||
<path d="M6 9l6 6 6-6" />
|
||
</svg>
|
||
);
|
||
|
||
interface CustomField {
|
||
name: string;
|
||
value: string;
|
||
showLabel: boolean;
|
||
_key: string;
|
||
}
|
||
|
||
interface CompanyForm {
|
||
company_name: string;
|
||
street: string;
|
||
city: string;
|
||
postal_code: string;
|
||
country: string;
|
||
company_id: string;
|
||
vat_id: string;
|
||
offer_number_pattern: string;
|
||
order_number_pattern: string;
|
||
invoice_number_pattern: string;
|
||
issued_order_number_pattern: string;
|
||
issued_order_type_code: string;
|
||
project_number_pattern: string;
|
||
project_type_code: string;
|
||
quotation_prefix: string;
|
||
order_type_code: string;
|
||
invoice_type_code: string;
|
||
warehouse_receipt_prefix: string;
|
||
warehouse_receipt_number_pattern: string;
|
||
warehouse_issue_prefix: string;
|
||
warehouse_issue_number_pattern: string;
|
||
warehouse_inventory_prefix: string;
|
||
warehouse_inventory_number_pattern: string;
|
||
default_currency: string;
|
||
default_vat_rate: number;
|
||
available_currencies: string[];
|
||
available_vat_rates: number[];
|
||
}
|
||
|
||
interface BankForm {
|
||
account_name: string;
|
||
bank_name: string;
|
||
account_number: string;
|
||
iban: string;
|
||
bic: string;
|
||
currency: string;
|
||
is_default: boolean;
|
||
}
|
||
|
||
export default function CompanySettings({
|
||
embedded,
|
||
}: { embedded?: boolean } = {}) {
|
||
const alert = useAlert();
|
||
const { hasPermission } = useAuth();
|
||
const canEditCompany = hasPermission("settings.company");
|
||
const canManageBanking = hasPermission("settings.banking");
|
||
const queryClient = useQueryClient();
|
||
const [saving, setSaving] = useState(false);
|
||
const [uploadingLogo, setUploadingLogo] = useState(false);
|
||
const [uploadingLogoDark, setUploadingLogoDark] = useState(false);
|
||
const [logoUrl, setLogoUrl] = useState<string | null>(null);
|
||
const [logoUrlDark, setLogoUrlDark] = useState<string | null>(null);
|
||
const logoUrlRef = useRef<string | null>(null);
|
||
const logoUrlDarkRef = useRef<string | null>(null);
|
||
const [form, setForm] = useState<CompanyForm>({
|
||
company_name: "",
|
||
street: "",
|
||
city: "",
|
||
postal_code: "",
|
||
country: "",
|
||
company_id: "",
|
||
vat_id: "",
|
||
offer_number_pattern: "",
|
||
order_number_pattern: "",
|
||
invoice_number_pattern: "",
|
||
issued_order_number_pattern: "",
|
||
issued_order_type_code: "",
|
||
project_number_pattern: "",
|
||
project_type_code: "",
|
||
quotation_prefix: "",
|
||
order_type_code: "",
|
||
invoice_type_code: "",
|
||
warehouse_receipt_prefix: "",
|
||
warehouse_receipt_number_pattern: "",
|
||
warehouse_issue_prefix: "",
|
||
warehouse_issue_number_pattern: "",
|
||
warehouse_inventory_prefix: "",
|
||
warehouse_inventory_number_pattern: "",
|
||
default_currency: "CZK",
|
||
default_vat_rate: 21,
|
||
available_currencies: ["CZK", "EUR", "USD", "GBP"],
|
||
available_vat_rates: [0, 10, 12, 15, 21],
|
||
});
|
||
const [customFields, setCustomFields] = useState<CustomField[]>([]);
|
||
const [fieldOrder, setFieldOrder] = useState<string[]>([
|
||
...DEFAULT_FIELD_ORDER,
|
||
]);
|
||
const [bankSaving, setBankSaving] = useState(false);
|
||
const [editingBank, setEditingBank] = useState<number | null>(null);
|
||
const [bankDeleteConfirm, setBankDeleteConfirm] = useState<{
|
||
isOpen: boolean;
|
||
id: number | null;
|
||
}>({ isOpen: false, id: null });
|
||
const [bankForm, setBankForm] = useState<BankForm>({
|
||
account_name: "",
|
||
bank_name: "",
|
||
account_number: "",
|
||
iban: "",
|
||
bic: "",
|
||
currency: "CZK",
|
||
is_default: false,
|
||
});
|
||
|
||
const saveSettingsMutation = useApiMutation<
|
||
Record<string, unknown>,
|
||
{ message?: string }
|
||
>({
|
||
url: () => `${API_BASE}/company-settings`,
|
||
method: () => "PUT",
|
||
invalidate: [
|
||
"settings",
|
||
"company-settings",
|
||
"attendance",
|
||
"offers",
|
||
"orders",
|
||
"invoices",
|
||
],
|
||
});
|
||
|
||
const bankMutation = useApiMutation<
|
||
BankForm & { id?: number },
|
||
{ message?: string }
|
||
>({
|
||
url: (input) =>
|
||
input.id != null
|
||
? `${API_BASE}/bank-accounts/${input.id}`
|
||
: `${API_BASE}/bank-accounts`,
|
||
method: (input) => (input.id != null ? "PUT" : "POST"),
|
||
invalidate: ["settings", "bank-accounts", "invoices"],
|
||
});
|
||
|
||
const bankDeleteMutation = useApiMutation<number, { message?: string }>({
|
||
url: (id) => `${API_BASE}/bank-accounts/${id}`,
|
||
method: () => "DELETE",
|
||
invalidate: ["settings", "bank-accounts", "invoices"],
|
||
});
|
||
|
||
const getFullFieldOrder = useCallback((): string[] => {
|
||
const allBuiltIn = [...DEFAULT_FIELD_ORDER];
|
||
const order = [...fieldOrder].filter((k) => k !== "company_name");
|
||
for (const f of allBuiltIn) {
|
||
if (!order.includes(f)) order.push(f);
|
||
}
|
||
for (let i = 0; i < customFields.length; i++) {
|
||
const key = `custom_${i}`;
|
||
if (!order.includes(key)) order.push(key);
|
||
}
|
||
return order.filter((key) => {
|
||
if (key.startsWith("custom_")) {
|
||
const idx = parseInt(key.split("_")[1]);
|
||
return idx < customFields.length;
|
||
}
|
||
return true;
|
||
});
|
||
}, [fieldOrder, customFields]);
|
||
|
||
const moveField = (index: number, direction: number) => {
|
||
const order = getFullFieldOrder();
|
||
const newIndex = index + direction;
|
||
if (newIndex < 0 || newIndex >= order.length) return;
|
||
const updated = [...order];
|
||
[updated[index], updated[newIndex]] = [updated[newIndex], updated[index]];
|
||
setFieldOrder(updated);
|
||
};
|
||
|
||
const getFieldDisplayName = (key: string): string => {
|
||
if (FIELD_LABELS[key]) return FIELD_LABELS[key];
|
||
if (key.startsWith("custom_")) {
|
||
const idx = parseInt(key.split("_")[1]);
|
||
const cf = customFields[idx];
|
||
if (cf)
|
||
return cf.name
|
||
? `${cf.name}: ${cf.value || "..."}`
|
||
: cf.value || `Vlastní pole ${idx + 1}`;
|
||
}
|
||
return key;
|
||
};
|
||
|
||
const fetchLogo = useCallback(async (variant: "light" | "dark" = "light") => {
|
||
try {
|
||
const resp = await apiFetch(
|
||
`${API_BASE}/company-settings/logo?variant=${variant}`,
|
||
);
|
||
if (resp.ok) {
|
||
const blob = await resp.blob();
|
||
if (variant === "dark") {
|
||
setLogoUrlDark((prev) => {
|
||
if (prev) URL.revokeObjectURL(prev);
|
||
const url = URL.createObjectURL(blob);
|
||
logoUrlDarkRef.current = url;
|
||
return url;
|
||
});
|
||
} else {
|
||
setLogoUrl((prev) => {
|
||
if (prev) URL.revokeObjectURL(prev);
|
||
const url = URL.createObjectURL(blob);
|
||
logoUrlRef.current = url;
|
||
return url;
|
||
});
|
||
}
|
||
}
|
||
} catch {
|
||
// ignore - no logo
|
||
}
|
||
}, []);
|
||
|
||
// ── TanStack Query: company settings ──
|
||
const { data: settingsData, isPending: settingsLoading } = useQuery(
|
||
companySettingsOptions(),
|
||
);
|
||
|
||
// ── TanStack Query: bank accounts ──
|
||
const { data: bankAccountsData, isPending: bankLoading } = useQuery(
|
||
bankAccountsOptions(),
|
||
);
|
||
|
||
const bankAccountsList: BankAccount[] = Array.isArray(bankAccountsData)
|
||
? bankAccountsData
|
||
: [];
|
||
|
||
// Populate form state when settings data arrives
|
||
useEffect(() => {
|
||
if (!settingsData) return;
|
||
setForm({
|
||
company_name: settingsData.company_name || "",
|
||
street: settingsData.street || "",
|
||
city: settingsData.city || "",
|
||
postal_code: settingsData.postal_code || "",
|
||
country: settingsData.country || "",
|
||
company_id: settingsData.company_id || "",
|
||
vat_id: settingsData.vat_id || "",
|
||
offer_number_pattern: settingsData.offer_number_pattern || "",
|
||
order_number_pattern: settingsData.order_number_pattern || "",
|
||
invoice_number_pattern: settingsData.invoice_number_pattern || "",
|
||
issued_order_number_pattern:
|
||
settingsData.issued_order_number_pattern || "",
|
||
issued_order_type_code: settingsData.issued_order_type_code || "",
|
||
project_number_pattern: settingsData.project_number_pattern || "",
|
||
project_type_code: settingsData.project_type_code || "",
|
||
quotation_prefix: settingsData.quotation_prefix || "",
|
||
order_type_code: settingsData.order_type_code || "",
|
||
invoice_type_code: settingsData.invoice_type_code || "",
|
||
warehouse_receipt_prefix: settingsData.warehouse_receipt_prefix || "",
|
||
warehouse_receipt_number_pattern:
|
||
settingsData.warehouse_receipt_number_pattern || "",
|
||
warehouse_issue_prefix: settingsData.warehouse_issue_prefix || "",
|
||
warehouse_issue_number_pattern:
|
||
settingsData.warehouse_issue_number_pattern || "",
|
||
warehouse_inventory_prefix: settingsData.warehouse_inventory_prefix || "",
|
||
warehouse_inventory_number_pattern:
|
||
settingsData.warehouse_inventory_number_pattern || "",
|
||
default_currency: settingsData.default_currency || "CZK",
|
||
default_vat_rate: settingsData.default_vat_rate ?? 21,
|
||
available_currencies:
|
||
Array.isArray(settingsData.available_currencies) &&
|
||
settingsData.available_currencies.length > 0
|
||
? settingsData.available_currencies
|
||
: ["CZK", "EUR", "USD", "GBP"],
|
||
available_vat_rates:
|
||
Array.isArray(settingsData.available_vat_rates) &&
|
||
settingsData.available_vat_rates.length > 0
|
||
? settingsData.available_vat_rates
|
||
: [0, 10, 12, 15, 21],
|
||
});
|
||
const cf: CustomField[] =
|
||
Array.isArray(settingsData.custom_fields) &&
|
||
settingsData.custom_fields.length > 0
|
||
? settingsData.custom_fields.map((f, i) => ({
|
||
...f,
|
||
showLabel: f.showLabel !== false,
|
||
_key: (f as CustomField)._key || `cf-${Date.now()}-${i}`,
|
||
}))
|
||
: [];
|
||
setCustomFields(cf);
|
||
if (
|
||
Array.isArray(settingsData.supplier_field_order) &&
|
||
settingsData.supplier_field_order.length > 0
|
||
) {
|
||
setFieldOrder(settingsData.supplier_field_order);
|
||
} else {
|
||
setFieldOrder([...DEFAULT_FIELD_ORDER]);
|
||
}
|
||
if (settingsData.has_logo) {
|
||
fetchLogo("light");
|
||
}
|
||
if (settingsData.has_logo_dark) {
|
||
fetchLogo("dark");
|
||
}
|
||
}, [settingsData, fetchLogo]);
|
||
|
||
const resetBankForm = () => {
|
||
setEditingBank(null);
|
||
setBankForm({
|
||
account_name: "",
|
||
bank_name: "",
|
||
account_number: "",
|
||
iban: "",
|
||
bic: "",
|
||
currency: "CZK",
|
||
is_default: false,
|
||
});
|
||
};
|
||
|
||
const handleBankSave = async () => {
|
||
if (!bankForm.account_name.trim()) {
|
||
alert.error("Název účtu je povinný");
|
||
return;
|
||
}
|
||
setBankSaving(true);
|
||
try {
|
||
const result = await bankMutation.mutateAsync({
|
||
...bankForm,
|
||
id: editingBank ?? undefined,
|
||
});
|
||
alert.success(result?.message || "Uloženo");
|
||
resetBankForm();
|
||
} catch (e) {
|
||
alert.error(e instanceof Error ? e.message : "Chyba připojení");
|
||
} finally {
|
||
setBankSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleBankDelete = (id: number) => {
|
||
setBankDeleteConfirm({ isOpen: true, id });
|
||
};
|
||
|
||
const confirmBankDelete = async () => {
|
||
if (bankDeleteConfirm.id == null) return;
|
||
try {
|
||
const result = await bankDeleteMutation.mutateAsync(bankDeleteConfirm.id);
|
||
alert.success(result?.message || "Smazáno");
|
||
if (editingBank === bankDeleteConfirm.id) resetBankForm();
|
||
} catch (e) {
|
||
alert.error(e instanceof Error ? e.message : "Chyba připojení");
|
||
} finally {
|
||
setBankDeleteConfirm({ isOpen: false, id: null });
|
||
}
|
||
};
|
||
|
||
const startEditBank = (account: BankAccount) => {
|
||
setEditingBank(account.id);
|
||
setBankForm({
|
||
account_name: account.account_name || "",
|
||
bank_name: account.bank_name || "",
|
||
account_number: account.account_number || "",
|
||
iban: account.iban || "",
|
||
bic: account.bic || "",
|
||
currency: account.currency || "CZK",
|
||
is_default: !!account.is_default,
|
||
});
|
||
};
|
||
|
||
// Cleanup blob URLs on unmount
|
||
useEffect(() => {
|
||
return () => {
|
||
if (logoUrlRef.current) URL.revokeObjectURL(logoUrlRef.current);
|
||
if (logoUrlDarkRef.current) URL.revokeObjectURL(logoUrlDarkRef.current);
|
||
};
|
||
}, []);
|
||
|
||
const handleSave = async () => {
|
||
setSaving(true);
|
||
try {
|
||
const payload = {
|
||
...form,
|
||
custom_fields: customFields.filter(
|
||
(f) => f.name.trim() || f.value.trim(),
|
||
),
|
||
supplier_field_order: getFullFieldOrder(),
|
||
};
|
||
const result = await saveSettingsMutation.mutateAsync(payload);
|
||
alert.success(result?.message || "Nastavení bylo uloženo");
|
||
} catch (e) {
|
||
alert.error(
|
||
e instanceof Error ? e.message : "Nepodařilo se uložit nastavení",
|
||
);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleLogoUpload = async (
|
||
file: File,
|
||
variant: "light" | "dark" = "light",
|
||
) => {
|
||
if (!file) return;
|
||
|
||
const setUploading =
|
||
variant === "dark" ? setUploadingLogoDark : setUploadingLogo;
|
||
setUploading(true);
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append("logo", file);
|
||
|
||
const response = await apiFetch(
|
||
`${API_BASE}/company-settings/logo?variant=${variant}`,
|
||
{
|
||
method: "POST",
|
||
body: formData,
|
||
},
|
||
);
|
||
const result = await response.json();
|
||
if (result.success) {
|
||
alert.success(result.message || "Logo bylo nahráno");
|
||
queryClient.invalidateQueries({ queryKey: ["company-settings"] });
|
||
queryClient.invalidateQueries({ queryKey: ["offers"] });
|
||
queryClient.invalidateQueries({ queryKey: ["orders"] });
|
||
queryClient.invalidateQueries({ queryKey: ["invoices"] });
|
||
fetchLogo(variant);
|
||
} else {
|
||
alert.error(result.error || "Nepodařilo se nahrát logo");
|
||
}
|
||
} catch {
|
||
alert.error("Chyba připojení");
|
||
} finally {
|
||
setUploading(false);
|
||
}
|
||
};
|
||
|
||
const updateField = (field: keyof CompanyForm, value: string | number) => {
|
||
setForm((prev) => ({ ...prev, [field]: value }));
|
||
};
|
||
|
||
if (!embedded && !canEditCompany) return <Forbidden />;
|
||
|
||
if (settingsLoading) {
|
||
return <LoadingState />;
|
||
}
|
||
|
||
const fullFieldOrder = getFullFieldOrder();
|
||
|
||
const bankColumns: DataColumn<BankAccount>[] = [
|
||
{
|
||
key: "account_name",
|
||
header: "Název",
|
||
render: (acc) => acc.account_name,
|
||
},
|
||
{
|
||
key: "bank_name",
|
||
header: "Banka",
|
||
render: (acc) => acc.bank_name,
|
||
},
|
||
{
|
||
key: "account_number",
|
||
header: "Číslo účtu",
|
||
mono: true,
|
||
render: (acc) => acc.account_number,
|
||
},
|
||
{
|
||
key: "iban",
|
||
header: "IBAN",
|
||
mono: true,
|
||
render: (acc) => acc.iban,
|
||
},
|
||
{
|
||
key: "bic",
|
||
header: "BIC/SWIFT",
|
||
mono: true,
|
||
render: (acc) => acc.bic,
|
||
},
|
||
{
|
||
key: "currency",
|
||
header: "Měna",
|
||
render: (acc) => acc.currency,
|
||
},
|
||
{
|
||
key: "is_default",
|
||
header: "Výchozí",
|
||
width: 70,
|
||
align: "right",
|
||
render: (acc) =>
|
||
acc.is_default ? (
|
||
<Box component="span" sx={{ color: "primary.main", fontWeight: 600 }}>
|
||
✓
|
||
</Box>
|
||
) : (
|
||
"–"
|
||
),
|
||
},
|
||
{
|
||
key: "actions",
|
||
header: "",
|
||
width: 80,
|
||
align: "right",
|
||
render: (acc) => (
|
||
<Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => startEditBank(acc)}
|
||
title="Upravit"
|
||
aria-label="Upravit"
|
||
>
|
||
{EditIcon}
|
||
</IconButton>
|
||
<IconButton
|
||
size="small"
|
||
color="error"
|
||
onClick={() => handleBankDelete(acc.id)}
|
||
title="Smazat"
|
||
aria-label="Smazat"
|
||
>
|
||
{RemoveIcon}
|
||
</IconButton>
|
||
</Box>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Box>
|
||
{!embedded && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 12 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.25 }}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "flex-start",
|
||
justifyContent: "space-between",
|
||
flexWrap: "wrap",
|
||
gap: 2,
|
||
mb: 3,
|
||
}}
|
||
>
|
||
<Box>
|
||
<Typography variant="h4">Nastavení firmy</Typography>
|
||
<Typography
|
||
variant="body2"
|
||
color="text.secondary"
|
||
sx={{ mt: 0.5 }}
|
||
>
|
||
Firemní údaje a bankovní účty
|
||
</Typography>
|
||
</Box>
|
||
<Button onClick={handleSave} disabled={saving}>
|
||
{saving ? "Ukládání..." : "Uložit nastavení"}
|
||
</Button>
|
||
</Box>
|
||
</motion.div>
|
||
)}
|
||
|
||
<Box
|
||
sx={{
|
||
display: "grid",
|
||
gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" },
|
||
gap: 3,
|
||
}}
|
||
>
|
||
{/* Company Info */}
|
||
{(canEditCompany || !embedded) && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 12 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.25, delay: 0.06 }}
|
||
>
|
||
<Card>
|
||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||
Firemní údaje
|
||
</Typography>
|
||
<Field label="Název firmy">
|
||
<TextField
|
||
value={form.company_name}
|
||
onChange={(e) => updateField("company_name", e.target.value)}
|
||
/>
|
||
</Field>
|
||
<Box
|
||
sx={{
|
||
display: "grid",
|
||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||
gap: 2,
|
||
}}
|
||
>
|
||
<Field label="Ulice">
|
||
<TextField
|
||
value={form.street}
|
||
onChange={(e) => updateField("street", e.target.value)}
|
||
/>
|
||
</Field>
|
||
<Field label="Město">
|
||
<TextField
|
||
value={form.city}
|
||
onChange={(e) => updateField("city", e.target.value)}
|
||
/>
|
||
</Field>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "grid",
|
||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||
gap: 2,
|
||
}}
|
||
>
|
||
<Field label="PSČ">
|
||
<TextField
|
||
value={form.postal_code}
|
||
onChange={(e) => updateField("postal_code", e.target.value)}
|
||
/>
|
||
</Field>
|
||
<Field label="Země">
|
||
<TextField
|
||
value={form.country}
|
||
onChange={(e) => updateField("country", e.target.value)}
|
||
/>
|
||
</Field>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "grid",
|
||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||
gap: 2,
|
||
}}
|
||
>
|
||
<Field label="IČO">
|
||
<TextField
|
||
value={form.company_id}
|
||
onChange={(e) => updateField("company_id", e.target.value)}
|
||
/>
|
||
</Field>
|
||
<Field label="DIČ">
|
||
<TextField
|
||
value={form.vat_id}
|
||
onChange={(e) => updateField("vat_id", e.target.value)}
|
||
/>
|
||
</Field>
|
||
</Box>
|
||
<Box>
|
||
<Typography
|
||
variant="body2"
|
||
sx={{
|
||
display: "block",
|
||
mb: 0.5,
|
||
fontWeight: 600,
|
||
color: "text.secondary",
|
||
}}
|
||
>
|
||
Vlastní pole
|
||
</Typography>
|
||
{customFields.map((field, idx) => (
|
||
<Box key={field._key} sx={{ mb: 1 }}>
|
||
<Box
|
||
sx={{
|
||
display: "grid",
|
||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||
gap: 2,
|
||
alignItems: "flex-start",
|
||
}}
|
||
>
|
||
<TextField
|
||
label={idx === 0 ? "Název" : undefined}
|
||
value={field.name}
|
||
onChange={(e) => {
|
||
const updated = [...customFields];
|
||
updated[idx] = {
|
||
...updated[idx],
|
||
name: e.target.value,
|
||
};
|
||
setCustomFields(updated);
|
||
}}
|
||
placeholder="Např. Tel."
|
||
/>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: 0.5,
|
||
alignItems: idx === 0 ? "flex-end" : "center",
|
||
}}
|
||
>
|
||
<TextField
|
||
label={idx === 0 ? "Hodnota" : undefined}
|
||
value={field.value}
|
||
onChange={(e) => {
|
||
const updated = [...customFields];
|
||
updated[idx] = {
|
||
...updated[idx],
|
||
value: e.target.value,
|
||
};
|
||
setCustomFields(updated);
|
||
}}
|
||
sx={{ flex: 1 }}
|
||
/>
|
||
<IconButton
|
||
size="small"
|
||
color="error"
|
||
onClick={() => {
|
||
const key = `custom_${idx}`;
|
||
setFieldOrder((prev) =>
|
||
prev
|
||
.filter((k) => k !== key)
|
||
.map((k) => {
|
||
if (k.startsWith("custom_")) {
|
||
const ki = parseInt(k.split("_")[1]);
|
||
if (ki > idx) return `custom_${ki - 1}`;
|
||
}
|
||
return k;
|
||
}),
|
||
);
|
||
setCustomFields(
|
||
customFields.filter((_, i) => i !== idx),
|
||
);
|
||
}}
|
||
title="Odebrat pole"
|
||
aria-label="Odebrat pole"
|
||
>
|
||
{RemoveIcon}
|
||
</IconButton>
|
||
</Box>
|
||
</Box>
|
||
<Box sx={{ mt: 0.5 }}>
|
||
<CheckboxField
|
||
label={
|
||
<Typography
|
||
variant="body2"
|
||
sx={{ fontSize: "0.8rem" }}
|
||
>
|
||
Zobrazit název v PDF
|
||
</Typography>
|
||
}
|
||
checked={field.showLabel !== false}
|
||
onChange={(checked) => {
|
||
const updated = [...customFields];
|
||
updated[idx] = {
|
||
...updated[idx],
|
||
showLabel: checked,
|
||
};
|
||
setCustomFields(updated);
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
))}
|
||
<Button
|
||
variant="outlined"
|
||
color="inherit"
|
||
size="small"
|
||
startIcon={PlusIcon}
|
||
onClick={() =>
|
||
setCustomFields([
|
||
...customFields,
|
||
{
|
||
name: "",
|
||
value: "",
|
||
showLabel: true,
|
||
_key: `cf-${Date.now()}`,
|
||
},
|
||
])
|
||
}
|
||
sx={{ mt: 0.5 }}
|
||
>
|
||
Přidat pole
|
||
</Button>
|
||
</Box>
|
||
</Card>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* Bank Accounts */}
|
||
{(canManageBanking || !embedded) && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 12 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.25, delay: 0.08 }}
|
||
>
|
||
<Card>
|
||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||
Bankovní účty
|
||
</Typography>
|
||
{bankLoading ? (
|
||
<LoadingState />
|
||
) : (
|
||
<>
|
||
{bankAccountsList.length > 0 && (
|
||
<Box sx={{ mb: 2 }}>
|
||
<DataTable<BankAccount>
|
||
columns={bankColumns}
|
||
rows={bankAccountsList}
|
||
rowKey={(acc) => acc.id}
|
||
rowSx={(acc) =>
|
||
editingBank === acc.id
|
||
? { bgcolor: "action.selected" }
|
||
: {}
|
||
}
|
||
/>
|
||
</Box>
|
||
)}
|
||
|
||
<Box
|
||
sx={{
|
||
bgcolor: "action.hover",
|
||
borderRadius: 2,
|
||
p: 2,
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="subtitle2"
|
||
color="text.secondary"
|
||
sx={{ mb: 1.5 }}
|
||
>
|
||
{editingBank !== null
|
||
? "Upravit účet"
|
||
: "Přidat nový účet"}
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "grid",
|
||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||
gap: 2,
|
||
}}
|
||
>
|
||
<Field label="Název účtu" required>
|
||
<TextField
|
||
value={bankForm.account_name}
|
||
onChange={(e) =>
|
||
setBankForm((f) => ({
|
||
...f,
|
||
account_name: e.target.value,
|
||
}))
|
||
}
|
||
placeholder="Např. Hlavní CZK účet"
|
||
/>
|
||
</Field>
|
||
<Field label="Název banky">
|
||
<TextField
|
||
value={bankForm.bank_name}
|
||
onChange={(e) =>
|
||
setBankForm((f) => ({
|
||
...f,
|
||
bank_name: e.target.value,
|
||
}))
|
||
}
|
||
placeholder="Např. MONETA Money Bank, a.s."
|
||
/>
|
||
</Field>
|
||
<Field label="Číslo účtu">
|
||
<TextField
|
||
value={bankForm.account_number}
|
||
onChange={(e) =>
|
||
setBankForm((f) => ({
|
||
...f,
|
||
account_number: e.target.value,
|
||
}))
|
||
}
|
||
placeholder="123456789/0600"
|
||
/>
|
||
</Field>
|
||
<Field label="Měna">
|
||
<Select
|
||
value={bankForm.currency}
|
||
onChange={(v) =>
|
||
setBankForm((f) => ({
|
||
...f,
|
||
currency: v,
|
||
}))
|
||
}
|
||
options={form.available_currencies.map((c) => ({
|
||
value: c,
|
||
label: c,
|
||
}))}
|
||
/>
|
||
</Field>
|
||
<Field label="IBAN">
|
||
<TextField
|
||
value={bankForm.iban}
|
||
onChange={(e) =>
|
||
setBankForm((f) => ({
|
||
...f,
|
||
iban: e.target.value,
|
||
}))
|
||
}
|
||
placeholder="CZ65 0800 0000 1920 0014 5399"
|
||
/>
|
||
</Field>
|
||
<Field label="BIC / SWIFT">
|
||
<TextField
|
||
value={bankForm.bic}
|
||
onChange={(e) =>
|
||
setBankForm((f) => ({
|
||
...f,
|
||
bic: e.target.value,
|
||
}))
|
||
}
|
||
placeholder="GIBACZPX"
|
||
/>
|
||
</Field>
|
||
</Box>
|
||
<CheckboxField
|
||
label="Výchozí účet (použije se automaticky při vytváření faktury)"
|
||
checked={bankForm.is_default}
|
||
onChange={(checked) =>
|
||
setBankForm((f) => ({
|
||
...f,
|
||
is_default: checked,
|
||
}))
|
||
}
|
||
/>
|
||
<Box sx={{ display: "flex", gap: 1, mt: 1 }}>
|
||
<Button
|
||
size="small"
|
||
startIcon={editingBank === null ? PlusIcon : undefined}
|
||
onClick={handleBankSave}
|
||
disabled={bankSaving}
|
||
>
|
||
{bankSaving
|
||
? "Ukládání..."
|
||
: editingBank !== null
|
||
? "Uložit změny"
|
||
: "Přidat účet"}
|
||
</Button>
|
||
{editingBank !== null && (
|
||
<Button
|
||
size="small"
|
||
variant="outlined"
|
||
color="inherit"
|
||
onClick={resetBankForm}
|
||
>
|
||
Zrušit
|
||
</Button>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
</>
|
||
)}
|
||
</Card>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* PDF Field Order */}
|
||
{(canEditCompany || !embedded) && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 12 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.25, delay: 0.08 }}
|
||
>
|
||
<Card>
|
||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||
Pořadí polí dodavatele v PDF
|
||
</Typography>
|
||
<Typography
|
||
variant="caption"
|
||
color="text.secondary"
|
||
sx={{ display: "block", mb: 1.5 }}
|
||
>
|
||
Určuje pořadí řádků v adresním bloku dodavatele na PDF nabídce.
|
||
</Typography>
|
||
<Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
|
||
{fullFieldOrder.map((key, index) => (
|
||
<Box
|
||
key={key}
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 1,
|
||
px: 1,
|
||
py: 0.5,
|
||
border: 1,
|
||
borderColor: "divider",
|
||
borderRadius: 1,
|
||
}}
|
||
>
|
||
<Box sx={{ display: "flex", flexDirection: "column" }}>
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => moveField(index, -1)}
|
||
disabled={index === 0}
|
||
title="Nahoru"
|
||
aria-label="Nahoru"
|
||
sx={{ p: 0.25 }}
|
||
>
|
||
{UpIcon}
|
||
</IconButton>
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => moveField(index, 1)}
|
||
disabled={index === fullFieldOrder.length - 1}
|
||
title="Dolů"
|
||
aria-label="Dolů"
|
||
sx={{ p: 0.25 }}
|
||
>
|
||
{DownIcon}
|
||
</IconButton>
|
||
</Box>
|
||
<Typography
|
||
variant="body2"
|
||
sx={{
|
||
color: key.startsWith("custom_")
|
||
? "primary.main"
|
||
: "text.primary",
|
||
fontWeight: key.startsWith("custom_") ? 600 : 400,
|
||
}}
|
||
>
|
||
{getFieldDisplayName(key)}
|
||
</Typography>
|
||
</Box>
|
||
))}
|
||
</Box>
|
||
</Card>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* Document Numbering */}
|
||
{(canEditCompany || !embedded) && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 12 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.25, delay: 0.1 }}
|
||
>
|
||
<Card>
|
||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||
Číslování dokladů
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
p: 1.5,
|
||
bgcolor: "action.hover",
|
||
borderRadius: 1,
|
||
fontSize: "0.8rem",
|
||
color: "text.secondary",
|
||
mb: 2,
|
||
}}
|
||
>
|
||
<strong>Dostupné zástupné znaky:</strong>{" "}
|
||
<code>{"{YYYY}"}</code> rok, <code>{"{YY}"}</code> rok (2
|
||
číslice), <code>{"{PREFIX}"}</code> prefix (nabídky / sklad),{" "}
|
||
<code>{"{CODE}"}</code> typový kód, <code>{"{NNN}"}</code>{" "}
|
||
pořadí (3 číslice), <code>{"{NNNN}"}</code> pořadí (4 číslice),{" "}
|
||
<code>{"{NNNNN}"}</code> pořadí (5 číslic)
|
||
</Box>
|
||
{[
|
||
{
|
||
label: "Nabídky",
|
||
patternKey: "offer_number_pattern" as const,
|
||
defaultPattern: "{YYYY}/{PREFIX}/{NNN}",
|
||
prefixKey: "quotation_prefix" as const,
|
||
prefixLabel: "Prefix",
|
||
codeKey: null,
|
||
},
|
||
{
|
||
label: "Objednávky přijaté",
|
||
patternKey: "order_number_pattern" as const,
|
||
defaultPattern: "{YY}{CODE}{NNNN}",
|
||
prefixKey: null,
|
||
codeKey: "order_type_code" as const,
|
||
codeLabel: "Typový kód",
|
||
// Mirror the server generator's code fallback so the preview
|
||
// matches the real generated number when the field is empty.
|
||
defaultCode: "71",
|
||
},
|
||
{
|
||
label: "Objednávky vydané",
|
||
patternKey: "issued_order_number_pattern" as const,
|
||
defaultPattern: "{YY}{CODE}{NNNN}",
|
||
prefixKey: null,
|
||
codeKey: "issued_order_type_code" as const,
|
||
codeLabel: "Typový kód",
|
||
defaultCode: "72",
|
||
},
|
||
{
|
||
label: "Projekty",
|
||
patternKey: "project_number_pattern" as const,
|
||
defaultPattern: "{YY}{CODE}{NNNN}",
|
||
prefixKey: null,
|
||
codeKey: "project_type_code" as const,
|
||
codeLabel: "Typový kód",
|
||
defaultCode: "73",
|
||
},
|
||
{
|
||
label: "Faktury",
|
||
patternKey: "invoice_number_pattern" as const,
|
||
defaultPattern: "{YY}{CODE}{NNNN}",
|
||
prefixKey: null,
|
||
codeKey: "invoice_type_code" as const,
|
||
codeLabel: "Typový kód",
|
||
defaultCode: "81",
|
||
},
|
||
{
|
||
label: "Sklad — Příjmy",
|
||
patternKey: "warehouse_receipt_number_pattern" as const,
|
||
defaultPattern: "{PREFIX}-{YYYY}-{NNN}",
|
||
prefixKey: "warehouse_receipt_prefix" as const,
|
||
prefixLabel: "Prefix",
|
||
codeKey: null,
|
||
},
|
||
{
|
||
label: "Sklad — Výdeje",
|
||
patternKey: "warehouse_issue_number_pattern" as const,
|
||
defaultPattern: "{PREFIX}-{YYYY}-{NNN}",
|
||
prefixKey: "warehouse_issue_prefix" as const,
|
||
prefixLabel: "Prefix",
|
||
codeKey: null,
|
||
},
|
||
{
|
||
label: "Sklad — Inventarizace",
|
||
patternKey: "warehouse_inventory_number_pattern" as const,
|
||
defaultPattern: "{PREFIX}-{YYYY}-{NNN}",
|
||
prefixKey: "warehouse_inventory_prefix" as const,
|
||
prefixLabel: "Prefix",
|
||
codeKey: null,
|
||
},
|
||
].map((cfg, idx) => {
|
||
const pattern = form[cfg.patternKey] || cfg.defaultPattern;
|
||
const yyyy = String(new Date().getFullYear());
|
||
const yy = yyyy.slice(-2);
|
||
const prefix = cfg.prefixKey ? form[cfg.prefixKey] || "NA" : "";
|
||
const code = cfg.codeKey
|
||
? form[cfg.codeKey] ||
|
||
(cfg as { defaultCode?: string }).defaultCode ||
|
||
""
|
||
: "";
|
||
const preview = pattern.replace(
|
||
/\{(\w+)\}/g,
|
||
(m: string, k: string) => {
|
||
if (k === "YYYY") return yyyy;
|
||
if (k === "YY") return yy;
|
||
if (k === "PREFIX") return prefix;
|
||
if (k === "CODE") return code;
|
||
if (/^N+$/.test(k)) return "1".padStart(k.length, "0");
|
||
return m;
|
||
},
|
||
);
|
||
return (
|
||
<Box key={cfg.patternKey}>
|
||
{idx > 0 && (
|
||
<Box
|
||
sx={{
|
||
borderTop: 1,
|
||
borderColor: "divider",
|
||
my: 2,
|
||
}}
|
||
/>
|
||
)}
|
||
<Typography variant="body1" sx={{ fontWeight: 600, mb: 1 }}>
|
||
{cfg.label}
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexWrap: "wrap",
|
||
gap: 2,
|
||
alignItems: "flex-start",
|
||
}}
|
||
>
|
||
<Box sx={{ flex: "1 1 200px" }}>
|
||
<Field label="Formát">
|
||
<TextField
|
||
value={form[cfg.patternKey]}
|
||
onChange={(e) =>
|
||
updateField(cfg.patternKey, e.target.value)
|
||
}
|
||
placeholder={cfg.defaultPattern}
|
||
/>
|
||
</Field>
|
||
</Box>
|
||
{cfg.prefixKey && (
|
||
<Box sx={{ width: 120 }}>
|
||
<Field label={cfg.prefixLabel || "Prefix"}>
|
||
<TextField
|
||
value={form[cfg.prefixKey]}
|
||
onChange={(e) =>
|
||
updateField(cfg.prefixKey, e.target.value)
|
||
}
|
||
/>
|
||
</Field>
|
||
</Box>
|
||
)}
|
||
{cfg.codeKey && (
|
||
<Box sx={{ width: 120 }}>
|
||
<Field label={cfg.codeLabel || "Kód"}>
|
||
<TextField
|
||
value={form[cfg.codeKey]}
|
||
onChange={(e) =>
|
||
updateField(cfg.codeKey, e.target.value)
|
||
}
|
||
/>
|
||
</Field>
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
<Typography variant="caption" color="text.secondary">
|
||
Ukázka:{" "}
|
||
<Box component="strong" sx={{ color: "text.primary" }}>
|
||
{preview}
|
||
</Box>
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
})}
|
||
</Card>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* Currency & VAT */}
|
||
{(canEditCompany || !embedded) && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 12 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.25, delay: 0.12 }}
|
||
>
|
||
<Card>
|
||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||
Měna a DPH
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "grid",
|
||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||
gap: 2,
|
||
}}
|
||
>
|
||
<Field label="Výchozí měna">
|
||
<Select
|
||
value={form.default_currency}
|
||
onChange={(v) => updateField("default_currency", v)}
|
||
options={form.available_currencies.map((c) => ({
|
||
value: c,
|
||
label: c,
|
||
}))}
|
||
/>
|
||
</Field>
|
||
<Field label="Výchozí sazba DPH (%)">
|
||
<TextField
|
||
type="number"
|
||
value={form.default_vat_rate}
|
||
onChange={(e) =>
|
||
updateField("default_vat_rate", Number(e.target.value))
|
||
}
|
||
slotProps={{ htmlInput: { min: 0, step: 1 } }}
|
||
/>
|
||
</Field>
|
||
<Field label="Dostupné měny">
|
||
<TextField
|
||
value={form.available_currencies.join(", ")}
|
||
onChange={(e) =>
|
||
setForm((prev) => ({
|
||
...prev,
|
||
available_currencies: e.target.value
|
||
.split(",")
|
||
.map((s) => s.trim())
|
||
.filter(Boolean),
|
||
}))
|
||
}
|
||
placeholder="CZK, EUR, USD"
|
||
/>
|
||
</Field>
|
||
<Field label="Dostupné sazby DPH (%)">
|
||
<TextField
|
||
value={form.available_vat_rates.join(", ")}
|
||
onChange={(e) =>
|
||
setForm((prev) => ({
|
||
...prev,
|
||
available_vat_rates: e.target.value
|
||
.split(",")
|
||
.map((s) => Number(s.trim()))
|
||
.filter((n) => !isNaN(n)),
|
||
}))
|
||
}
|
||
placeholder="0, 12, 21"
|
||
/>
|
||
</Field>
|
||
</Box>
|
||
</Card>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* Logo */}
|
||
{(canEditCompany || !embedded) && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 12 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.25, delay: 0.14 }}
|
||
>
|
||
<Card>
|
||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||
Logo
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "grid",
|
||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||
gap: 2,
|
||
}}
|
||
>
|
||
<Box>
|
||
<Typography
|
||
variant="body2"
|
||
sx={{
|
||
display: "block",
|
||
mb: 0.5,
|
||
fontWeight: 600,
|
||
color: "text.secondary",
|
||
}}
|
||
>
|
||
Logo (světlý režim)
|
||
</Typography>
|
||
{logoUrl && (
|
||
<Box
|
||
sx={{
|
||
mb: 1,
|
||
p: 1,
|
||
border: 1,
|
||
borderColor: "divider",
|
||
borderRadius: 1,
|
||
bgcolor: "background.paper",
|
||
display: "inline-block",
|
||
}}
|
||
>
|
||
<Box
|
||
component="img"
|
||
src={logoUrl}
|
||
alt="Logo (světlý režim)"
|
||
sx={{ maxWidth: 200, maxHeight: 80, display: "block" }}
|
||
/>
|
||
</Box>
|
||
)}
|
||
<FileUpload
|
||
files={[]}
|
||
accept="image/*"
|
||
buttonLabel={uploadingLogo ? "Nahrávání..." : "Nahrát logo"}
|
||
disabled={uploadingLogo}
|
||
onFilesChange={(files) => {
|
||
if (files[0]) handleLogoUpload(files[0], "light");
|
||
}}
|
||
/>
|
||
<Typography
|
||
variant="caption"
|
||
color="text.secondary"
|
||
sx={{ display: "block", mt: 0.5 }}
|
||
>
|
||
PNG, JPEG, GIF nebo WebP, max 5 MB
|
||
</Typography>
|
||
</Box>
|
||
<Box>
|
||
<Typography
|
||
variant="body2"
|
||
sx={{
|
||
display: "block",
|
||
mb: 0.5,
|
||
fontWeight: 600,
|
||
color: "text.secondary",
|
||
}}
|
||
>
|
||
Logo (tmavý režim)
|
||
</Typography>
|
||
{logoUrlDark && (
|
||
<Box
|
||
sx={{
|
||
mb: 1,
|
||
p: 1,
|
||
border: 1,
|
||
borderColor: "divider",
|
||
borderRadius: 1,
|
||
bgcolor: "background.paper",
|
||
display: "inline-block",
|
||
}}
|
||
>
|
||
<Box
|
||
component="img"
|
||
src={logoUrlDark}
|
||
alt="Logo (tmavý režim)"
|
||
sx={{ maxWidth: 200, maxHeight: 80, display: "block" }}
|
||
/>
|
||
</Box>
|
||
)}
|
||
<FileUpload
|
||
files={[]}
|
||
accept="image/*"
|
||
buttonLabel={
|
||
uploadingLogoDark ? "Nahrávání..." : "Nahrát logo"
|
||
}
|
||
disabled={uploadingLogoDark}
|
||
onFilesChange={(files) => {
|
||
if (files[0]) handleLogoUpload(files[0], "dark");
|
||
}}
|
||
/>
|
||
<Typography
|
||
variant="caption"
|
||
color="text.secondary"
|
||
sx={{ display: "block", mt: 0.5 }}
|
||
>
|
||
PNG, JPEG, GIF nebo WebP, max 5 MB
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
</Card>
|
||
</motion.div>
|
||
)}
|
||
</Box>
|
||
|
||
{embedded && canEditCompany && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 12 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.25, delay: 0.2 }}
|
||
>
|
||
<Button
|
||
onClick={handleSave}
|
||
fullWidth
|
||
sx={{ mt: 2 }}
|
||
disabled={saving}
|
||
>
|
||
{saving ? "Ukládání..." : "Uložit nastavení firmy"}
|
||
</Button>
|
||
</motion.div>
|
||
)}
|
||
|
||
<ConfirmDialog
|
||
isOpen={bankDeleteConfirm.isOpen}
|
||
onClose={() => setBankDeleteConfirm({ isOpen: false, id: null })}
|
||
onConfirm={confirmBankDelete}
|
||
title="Smazat bankovní účet"
|
||
message="Opravdu chcete smazat tento bankovní účet?"
|
||
confirmText="Smazat"
|
||
cancelText="Zrušit"
|
||
confirmVariant="danger"
|
||
/>
|
||
</Box>
|
||
);
|
||
}
|