5044 lines
184 KiB
JavaScript
5044 lines
184 KiB
JavaScript
/* ============================================
|
|
ERP Nutzfahrzeuge - React SPA v4
|
|
============================================ */
|
|
|
|
const {
|
|
useState,
|
|
useEffect,
|
|
useCallback,
|
|
useMemo,
|
|
useRef
|
|
} = React;
|
|
|
|
// ============ ICON COMPONENT ============
|
|
const Icon = ({
|
|
name,
|
|
size = 20,
|
|
className = ''
|
|
}) => {
|
|
const icons = {
|
|
dashboard: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z',
|
|
truck: 'M1 3h15v13H1V3zm15 5h4l3 3v5h-7V8zM5 18a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',
|
|
car: 'M5 11l1.5-4.5h11L19 11M3 11h18v6H3v-6zm2 6a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm12 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z',
|
|
forklift: 'M2 20V4h2v14h8v2H2zm2-14h6v8H4V6zm6 0h4v12h-4V6zm4 0h2v12h-2V6zM14 2h6v2h-6V2z',
|
|
contacts: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM2 18c0-3 3-5 6-5s6 2 6 5v1H2v-1zm14-5c2 0 4 2 4 4v1h-4v-5z',
|
|
sale: 'M2 4h20v4H2V4zm0 6h12v10H2V10zm14 0h6v6h-6v-6zm0 8h6v2h-6v-2z',
|
|
ai: 'M12 2l2 7h7l-5.5 4 2 7L12 16l-5.5 4 2-7L3 9h7l2-7z',
|
|
settings: 'M12 8a4 4 0 100 8 4 4 0 000-8z',
|
|
users: 'M9 11a4 4 0 100-8 4 4 0 000 8zm0 2c-4 0-7 2-7 5v1h14v-1c0-3-3-5-7-5zm6-2a3 3 0 100-6 3 3 0 000 6z',
|
|
search: 'M11 4a7 7 0 100 14 7 7 0 000-14zm10 17l-5-5',
|
|
bell: 'M12 2a6 6 0 016 6v4l2 4H4l2-4V8a6 6 0 016-6z',
|
|
menu: 'M3 6h18M3 12h18M3 18h18',
|
|
close: 'M6 6l12 12M18 6L6 18',
|
|
plus: 'M12 5v14M5 12h14',
|
|
edit: 'M3 17v4h4l11-11-4-4L3 17z',
|
|
trash: 'M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14',
|
|
check: 'M5 12l5 5L20 7',
|
|
alert: 'M12 2L2 20h20L12 2zm0 7v6m0 4v.01',
|
|
info: 'M12 2a10 10 0 100 20 10 10 0 000-20z',
|
|
chevronLeft: 'M15 6l-6 6 6 6',
|
|
chevronRight: 'M9 6l6 6-6 6',
|
|
chevronDown: 'M6 9l6 6 6-6',
|
|
arrowUp: 'M12 5v14M5 12l7-7 7 7',
|
|
arrowDown: 'M12 5v14M5 12l7 7 7-7',
|
|
upload: 'M12 4v12M5 11l7-7 7 7M4 20h16',
|
|
download: 'M12 4v12M5 11l7 7 7-7M4 20h16',
|
|
camera: 'M3 7h4l2-3h6l2 3h4v12H3V7zm9 3a4 4 0 100 8 4 4 0 000-8z',
|
|
mic: 'M12 2a3 3 0 013 3v6a3 3 0 01-6 0V5a3 3 0 013-3z',
|
|
send: 'M2 12l20-9-9 20-2-9-9-2z',
|
|
sync: 'M4 12a8 8 0 0114-5l2-2v6h-6l2-2a6 6 0 00-10 5H4z',
|
|
image: 'M3 4h18v16H3V4zm3 12l4-4 3 3 5-5 3 6H6z',
|
|
doc: 'M6 2h10l4 4v16H6V2zm10 0v4h4M9 12h6M9 16h6',
|
|
filter: 'M3 6h18l-7 8v6l-4-2v-4L3 6z',
|
|
sort: 'M7 4v16M4 7l3-3 3 3M17 20V4M14 17l3 3 3-3',
|
|
logout: 'M9 4H5v16h4M16 8l4 4-4 4M9 12h11',
|
|
sun: 'M12 8a4 4 0 100 8 4 4 0 000-8z',
|
|
moon: 'M21 12a9 9 0 11-9-9 7 7 0 009 9z',
|
|
tag: 'M2 12l8-8h12v12l-8 8L2 12zm12-4a2 2 0 100 4 2 2 0 000-4z',
|
|
euro: 'M16 8a5 5 0 00-5-3 5 5 0 00-5 7 5 5 0 005 7 5 5 0 005-3M4 11h8M4 13h8',
|
|
clock: 'M12 2a10 10 0 100 20 10 10 0 000-20zm0 6v6l4 2',
|
|
eye: 'M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 3a4 4 0 100 8 4 4 0 000-8z',
|
|
location: 'M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7z',
|
|
calendar: 'M3 6h18v15H3V6zm0-2h4V2h2v2h6V2h2v2h4',
|
|
trending: 'M3 17l6-6 4 4 8-8M16 7h5v5',
|
|
package: 'M12 2L2 7v10l10 5 10-5V7L12 2z',
|
|
building: 'M4 4h16v16H4V4z',
|
|
shield: 'M12 2L4 6v6c0 5 4 9 8 10 4-1 8-5 8-10V6l-8-4z',
|
|
star: 'M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7l3-7z',
|
|
list: 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01',
|
|
grid: 'M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z',
|
|
external: 'M14 3h7v7M21 3l-9 9',
|
|
refresh: 'M4 12a8 8 0 0114-5l2-2v6h-6l2-2a6 6 0 00-10 5H4z',
|
|
globe: 'M12 2a10 10 0 100 20 10 10 0 000-20z',
|
|
briefcase: 'M3 7h18v13H3V7zM8 7V4h8v3',
|
|
phone: 'M6 2h12v20H6V2z',
|
|
mail: 'M3 5h18v14H3V5z',
|
|
chart: 'M3 3v18h18M7 14l4-4 3 3 5-6',
|
|
layers: 'M12 2L2 7l10 5 10-5-10-5z',
|
|
wrench: 'M14 6a4 4 0 11-5 5L3 17l4 4 6-6a4 4 0 015-5z',
|
|
pdf: 'M6 2h10l4 4v16H6V2z',
|
|
sparkles: 'M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z',
|
|
shopping: 'M3 3h2l2 14h12l2-10H6',
|
|
gas: 'M3 7v10a2 2 0 002 2h8a2 2 0 002-2V7M3 7h12',
|
|
road: 'M5 22V2l4 20M19 22V2l-4 20',
|
|
certificate: 'M12 2L4 6v6c0 5 4 9 8 10 4-1 8-5 8-10V6l-8-4z',
|
|
percentage: 'M19 5L5 19',
|
|
currency: 'M3 8h18M3 16h18',
|
|
truck_type: 'M1 3h15v13H1V3z',
|
|
clipboard: 'M9 2h6v4H9V2zM4 6h16v16H4V6z',
|
|
save: 'M5 3h12l4 4v14H5V3z',
|
|
drag: 'M8 6h2v2H8V6zm6 0h2v2h-2V6zM8 11h2v2H8v-2zm6 0h2v2h-2v-2z',
|
|
config: 'M12 4a8 8 0 100 16 8 8 0 000-16z'
|
|
};
|
|
const path = icons[name] || icons.dashboard;
|
|
return /*#__PURE__*/React.createElement("svg", {
|
|
width: size,
|
|
height: size,
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
strokeWidth: "2",
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
className: className
|
|
}, /*#__PURE__*/React.createElement("path", {
|
|
d: path
|
|
}));
|
|
};
|
|
|
|
// ============ SHARED COMPONENTS ============
|
|
const Badge = ({
|
|
variant = 'neutral',
|
|
children
|
|
}) => /*#__PURE__*/React.createElement("span", {
|
|
className: `badge badge-${variant}`
|
|
}, children);
|
|
const Button = ({
|
|
variant = 'primary',
|
|
size = 'md',
|
|
icon,
|
|
children,
|
|
onClick,
|
|
disabled,
|
|
type = 'button',
|
|
className = '',
|
|
title
|
|
}) => {
|
|
const cls = `btn btn-${variant} ${size === 'sm' ? 'btn-sm' : ''} ${size === 'lg' ? 'btn-lg' : ''} ${className}`;
|
|
return /*#__PURE__*/React.createElement("button", {
|
|
type: type,
|
|
className: cls,
|
|
onClick: onClick,
|
|
disabled: disabled,
|
|
title: title
|
|
}, icon && /*#__PURE__*/React.createElement(Icon, {
|
|
name: icon,
|
|
size: size === 'sm' ? 14 : 16
|
|
}), children);
|
|
};
|
|
const Card = ({
|
|
title,
|
|
action,
|
|
children,
|
|
className = ''
|
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
className: `card ${className}`
|
|
}, (title || action) && /*#__PURE__*/React.createElement("div", {
|
|
className: "card-header"
|
|
}, title && /*#__PURE__*/React.createElement("h3", {
|
|
className: "card-title"
|
|
}, title), action && /*#__PURE__*/React.createElement("div", null, action)), /*#__PURE__*/React.createElement("div", {
|
|
className: "card-body"
|
|
}, children));
|
|
const KpiCard = ({
|
|
label,
|
|
value,
|
|
trend,
|
|
trendDir,
|
|
icon,
|
|
color = 'primary'
|
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
className: "kpi-card"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
className: "kpi-label"
|
|
}, t(label)), /*#__PURE__*/React.createElement("div", {
|
|
className: "kpi-value"
|
|
}, value), trend && /*#__PURE__*/React.createElement("div", {
|
|
className: "kpi-trend",
|
|
style: {
|
|
color: trendDir === 'up' ? 'var(--color-success)' : 'var(--color-error)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: trendDir === 'up' ? 'arrowUp' : 'arrowDown',
|
|
size: 14
|
|
}), /*#__PURE__*/React.createElement("span", null, trend))), icon && /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 'var(--radius-md)',
|
|
background: `var(--color-${color}-light)`,
|
|
color: `var(--color-${color})`,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: icon,
|
|
size: 20
|
|
}))));
|
|
const Spinner = ({
|
|
size = 'md'
|
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: 'var(--space-12)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: `spinner ${size === 'lg' ? 'spinner-lg' : ''}`
|
|
}));
|
|
const EmptyState = ({
|
|
icon = 'package',
|
|
title,
|
|
text,
|
|
action
|
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
className: "empty-state"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: icon,
|
|
size: 64,
|
|
className: "empty-state-icon"
|
|
}), /*#__PURE__*/React.createElement("h3", {
|
|
className: "empty-state-title"
|
|
}, title), /*#__PURE__*/React.createElement("p", {
|
|
className: "empty-state-text"
|
|
}, text), action);
|
|
const ErrorState = ({
|
|
title,
|
|
text,
|
|
onRetry
|
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
className: "error-state"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "alert",
|
|
size: 48,
|
|
className: "error-state-icon"
|
|
}), /*#__PURE__*/React.createElement("h3", {
|
|
className: "empty-state-title"
|
|
}, title || t('common.fehler_aufgetreten')), /*#__PURE__*/React.createElement("p", {
|
|
className: "empty-state-text"
|
|
}, text || 'Fehler.'), onRetry && /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "refresh",
|
|
onClick: onRetry
|
|
}, t('common.erneut_versuchen')));
|
|
const Avatar = ({
|
|
name,
|
|
size = 'md'
|
|
}) => {
|
|
const i = name.split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase();
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: `avatar ${size === 'lg' ? 'avatar-lg' : ''}`
|
|
}, i);
|
|
};
|
|
const ViewToggle = ({
|
|
view,
|
|
onChange
|
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
className: "view-toggle"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: `view-toggle-btn ${view === 'table' ? 'active' : ''}`,
|
|
onClick: () => onChange('table')
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "list",
|
|
size: 16
|
|
}), " Tabelle"), /*#__PURE__*/React.createElement("button", {
|
|
className: `view-toggle-btn ${view === 'grid' ? 'active' : ''}`,
|
|
onClick: () => onChange('grid')
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "grid",
|
|
size: 16
|
|
}), " Kacheln"));
|
|
const useRouter = () => {
|
|
const [route, setRoute] = useState(window.location.hash.slice(1) || '/dashboard');
|
|
useEffect(() => {
|
|
const h = () => setRoute(window.location.hash.slice(1) || '/dashboard');
|
|
window.addEventListener('hashchange', h);
|
|
return () => window.removeEventListener('hashchange', h);
|
|
}, []);
|
|
const navigate = useCallback(p => {
|
|
window.location.hash = p;
|
|
}, []);
|
|
return {
|
|
route,
|
|
navigate
|
|
};
|
|
};
|
|
const ZBRef = ({
|
|
field
|
|
}) => /*#__PURE__*/React.createElement("span", {
|
|
className: "zb-field-ref"
|
|
}, field);
|
|
|
|
// ============ IMAGE MANAGER (v4 with file button) ============
|
|
const photoCategories = [{
|
|
id: 'aussen_front',
|
|
label: 'Aussen - Front'
|
|
}, {
|
|
id: 'aussen_seite',
|
|
label: 'Aussen - Seite'
|
|
}, {
|
|
id: 'aussen_heck',
|
|
label: 'Aussen - Heck'
|
|
}, {
|
|
id: 'innen_armaturen',
|
|
label: 'Innen - Armaturen'
|
|
}, {
|
|
id: 'innen_sitze',
|
|
label: 'Innen - Sitze'
|
|
}, {
|
|
id: 'motorraum',
|
|
label: 'Motorraum'
|
|
}, {
|
|
id: 'schaeden',
|
|
label: 'Schaeden'
|
|
}, {
|
|
id: 'unterboden',
|
|
label: 'Unterboden'
|
|
}, {
|
|
id: 'dokumente',
|
|
label: 'Dokumente'
|
|
}, {
|
|
id: 'sonstiges',
|
|
label: 'Sonstiges'
|
|
}];
|
|
const ImageManager = ({
|
|
photos,
|
|
setPhotos,
|
|
role
|
|
}) => {
|
|
const [uploading, setUploading] = useState(false);
|
|
const [lightbox, setLightbox] = useState(null);
|
|
const [showRetusche, setShowRetusche] = useState(null);
|
|
const [retuscheOption, setRetuscheOption] = useState(null);
|
|
const [retuscheLoading, setRetuscheLoading] = useState(false);
|
|
const [deleteConfirm, setDeleteConfirm] = useState(null);
|
|
const fileInputRef = useRef(null);
|
|
const handleUpload = () => {
|
|
setUploading(true);
|
|
setTimeout(() => {
|
|
setPhotos([...photos, {
|
|
id: Date.now() + Math.random(),
|
|
category: 'sonstiges',
|
|
isMain: photos.length === 0
|
|
}]);
|
|
setUploading(false);
|
|
}, 1500);
|
|
};
|
|
const handleFileSelect = e => {
|
|
e.stopPropagation();
|
|
handleUpload();
|
|
};
|
|
const setMainPhoto = id => setPhotos(photos.map(p => ({
|
|
...p,
|
|
isMain: p.id === id
|
|
})));
|
|
const deletePhoto = id => {
|
|
setPhotos(photos.filter(p => p.id !== id));
|
|
setDeleteConfirm(null);
|
|
};
|
|
const setPhotoCategory = (id, category) => setPhotos(photos.map(p => p.id === id ? {
|
|
...p,
|
|
category
|
|
} : p));
|
|
const movePhoto = (id, dir) => {
|
|
const idx = photos.findIndex(p => p.id === id);
|
|
if (idx < 0) return;
|
|
const ni = dir === 'left' ? idx - 1 : idx + 1;
|
|
if (ni < 0 || ni >= photos.length) return;
|
|
const arr = [...photos];
|
|
[arr[idx], arr[ni]] = [arr[ni], arr[idx]];
|
|
setPhotos(arr);
|
|
};
|
|
const handleRetusche = () => {
|
|
setRetuscheLoading(true);
|
|
setTimeout(() => {
|
|
setRetuscheLoading(false);
|
|
setShowRetusche(null);
|
|
setRetuscheOption(null);
|
|
}, 2000);
|
|
};
|
|
const catLabel = catId => photoCategories.find(c => c.id === catId)?.label || 'Sonstiges';
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: "image-manager"
|
|
}, role !== 'buchhaltung' && /*#__PURE__*/React.createElement("div", {
|
|
className: `image-upload-zone ${uploading ? 'uploading' : ''}`,
|
|
onClick: handleUpload
|
|
}, uploading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
className: "spinner spinner-lg"
|
|
}), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
fontSize: 'var(--font-size-sm)',
|
|
color: 'var(--color-text-secondary)'
|
|
}
|
|
}, "Fotos werden hochgeladen...")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "upload",
|
|
size: 48,
|
|
className: "image-upload-icon"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-medium)'
|
|
}
|
|
}, "Fotos hochladen (Drag & Drop)"), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}, "JPG, PNG, WEBP · max 50 MB · Mehrfachauswahl"), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
marginTop: 'var(--space-3)',
|
|
display: 'flex',
|
|
gap: 'var(--space-2)',
|
|
justifyContent: 'center'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "file-input-wrapper"
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
size: "sm",
|
|
icon: "image"
|
|
}, "Datei auswaehlen"), /*#__PURE__*/React.createElement("input", {
|
|
type: "file",
|
|
multiple: true,
|
|
accept: "image/*",
|
|
ref: fileInputRef,
|
|
onChange: handleFileSelect
|
|
}))))), photos.length === 0 ? /*#__PURE__*/React.createElement(EmptyState, {
|
|
icon: "image",
|
|
title: "Keine Fotos vorhanden",
|
|
text: "Laden Sie Fotos hoch. Kategorisieren Sie nach Perspektiven und markieren Sie ein Hauptfoto."
|
|
}) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 'var(--space-2)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
style: {
|
|
fontSize: 'var(--font-size-sm)',
|
|
color: 'var(--color-text-secondary)'
|
|
}
|
|
}, photos.length, " Foto", photos.length !== 1 ? 's' : ''), role !== 'buchhaltung' && /*#__PURE__*/React.createElement("span", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "drag",
|
|
size: 12
|
|
}), " Sortieren · ", /*#__PURE__*/React.createElement(Icon, {
|
|
name: "star",
|
|
size: 12
|
|
}), " Hauptfoto")), /*#__PURE__*/React.createElement("div", {
|
|
className: "image-gallery"
|
|
}, photos.map((photo, idx) => /*#__PURE__*/React.createElement("div", {
|
|
key: photo.id,
|
|
className: `image-thumb ${photo.isMain ? 'main-photo' : ''}`,
|
|
onClick: () => setLightbox(idx)
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "image-thumb-placeholder"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "image",
|
|
size: 32
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)'
|
|
}
|
|
}, "Foto ", idx + 1)), /*#__PURE__*/React.createElement("div", {
|
|
className: "image-thumb-category"
|
|
}, catLabel(photo.category)), photo.isMain && /*#__PURE__*/React.createElement("div", {
|
|
className: "image-thumb-main-badge"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "star",
|
|
size: 14
|
|
})), role !== 'buchhaltung' && /*#__PURE__*/React.createElement("div", {
|
|
className: "image-thumb-overlay",
|
|
onClick: e => e.stopPropagation()
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "image-thumb-actions"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: `image-thumb-action star ${photo.isMain ? 'active' : ''}`,
|
|
title: "Hauptfoto",
|
|
onClick: () => setMainPhoto(photo.id)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "star",
|
|
size: 14
|
|
})), /*#__PURE__*/React.createElement("button", {
|
|
className: "image-thumb-action",
|
|
title: "Nach links",
|
|
onClick: () => movePhoto(photo.id, 'left')
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "chevronLeft",
|
|
size: 14
|
|
})), /*#__PURE__*/React.createElement("button", {
|
|
className: "image-thumb-action",
|
|
title: "Nach rechts",
|
|
onClick: () => movePhoto(photo.id, 'right')
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "chevronRight",
|
|
size: 14
|
|
})), /*#__PURE__*/React.createElement("button", {
|
|
className: "image-thumb-action",
|
|
title: "KI-Retusche",
|
|
onClick: () => setShowRetusche(photo.id)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "sparkles",
|
|
size: 14
|
|
})), /*#__PURE__*/React.createElement("button", {
|
|
className: "image-thumb-action danger",
|
|
title: "Loeschen",
|
|
onClick: () => setDeleteConfirm(photo.id)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "trash",
|
|
size: 14
|
|
})))))))), lightbox !== null && photos[lightbox] && /*#__PURE__*/React.createElement("div", {
|
|
className: "lightbox",
|
|
onClick: () => setLightbox(null)
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: "lightbox-close",
|
|
onClick: () => setLightbox(null)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "close",
|
|
size: 24
|
|
})), photos.length > 1 && /*#__PURE__*/React.createElement("button", {
|
|
className: "lightbox-nav prev",
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
setLightbox(lightbox === 0 ? photos.length - 1 : lightbox - 1);
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "chevronLeft",
|
|
size: 24
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "lightbox-image",
|
|
style: {
|
|
width: '70vw',
|
|
height: '60vh',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
onClick: e => e.stopPropagation()
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "image",
|
|
size: 120,
|
|
style: {
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
})), photos.length > 1 && /*#__PURE__*/React.createElement("button", {
|
|
className: "lightbox-nav next",
|
|
onClick: e => {
|
|
e.stopPropagation();
|
|
setLightbox(lightbox === photos.length - 1 ? 0 : lightbox + 1);
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "chevronRight",
|
|
size: 24
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "lightbox-info",
|
|
onClick: e => e.stopPropagation()
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-lg)',
|
|
fontWeight: 'var(--font-weight-semibold)'
|
|
}
|
|
}, "Foto ", lightbox + 1, " von ", photos.length), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-sm)',
|
|
opacity: 0.7
|
|
}
|
|
}, catLabel(photos[lightbox].category), photos[lightbox].isMain ? ' · Hauptfoto' : ''))), showRetusche && /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-overlay",
|
|
onClick: () => setShowRetusche(null)
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "modal",
|
|
onClick: e => e.stopPropagation()
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-header"
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
style: {
|
|
fontSize: 'var(--font-size-lg)',
|
|
fontWeight: 'var(--font-weight-semibold)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "sparkles",
|
|
size: 20
|
|
}), " KI-Bildretusche"), /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm",
|
|
onClick: () => setShowRetusche(null)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "close",
|
|
size: 20
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-body"
|
|
}, /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
fontSize: 'var(--font-size-sm)',
|
|
color: 'var(--color-text-secondary)',
|
|
marginBottom: 'var(--space-4)'
|
|
}
|
|
}, "Waehlen Sie eine Retusche-Option. Verarbeitung via OpenRouter Flux.1-Pro."), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 'var(--space-3)'
|
|
}
|
|
}, [{
|
|
id: 'bg',
|
|
icon: 'image',
|
|
label: 'Hintergrund entfernen',
|
|
desc: 'Ersetzt Hintergrund durch neutrale Farbe'
|
|
}, {
|
|
id: 'reflections',
|
|
icon: 'sparkles',
|
|
label: 'Spiegelungen retuschieren',
|
|
desc: 'Reduziert Reflexionen auf der Fahrzeugoberflaeche'
|
|
}, {
|
|
id: 'brightness',
|
|
icon: 'sun',
|
|
label: 'Helligkeit optimieren',
|
|
desc: 'Passt Belichtung und Kontrast an'
|
|
}].map(opt => /*#__PURE__*/React.createElement("div", {
|
|
key: opt.id,
|
|
className: `retusche-option ${retuscheOption === opt.id ? 'selected' : ''}`,
|
|
onClick: () => setRetuscheOption(opt.id)
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "retusche-option-icon"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: opt.icon,
|
|
size: 20
|
|
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-medium)'
|
|
}
|
|
}, opt.label), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}, opt.desc)))))), /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-footer"
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
variant: "secondary",
|
|
onClick: () => setShowRetusche(null)
|
|
}, "Abbrechen"), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "sparkles",
|
|
disabled: !retuscheOption || retuscheLoading,
|
|
onClick: handleRetusche
|
|
}, retuscheLoading ? 'Verarbeite...' : 'Retusche starten')))), deleteConfirm && /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-overlay",
|
|
onClick: () => setDeleteConfirm(null)
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "modal",
|
|
onClick: e => e.stopPropagation(),
|
|
style: {
|
|
maxWidth: 400
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-header"
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
style: {
|
|
fontSize: 'var(--font-size-lg)'
|
|
}
|
|
}, "Foto loeschen?")), /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-body"
|
|
}, /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
fontSize: 'var(--font-size-sm)'
|
|
}
|
|
}, "Foto wirklich loeschen? Nicht rueckgaengig machbar.")), /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-footer"
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
variant: "secondary",
|
|
onClick: () => setDeleteConfirm(null)
|
|
}, "Abbrechen"), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "danger",
|
|
icon: "trash",
|
|
onClick: () => deletePhoto(deleteConfirm)
|
|
}, "Loeschen")))));
|
|
};
|
|
|
|
// ============ SIDEBAR + TOPBAR ============
|
|
const Sidebar = ({
|
|
route,
|
|
navigate,
|
|
role
|
|
}) => {
|
|
const navItems = [{
|
|
section: 'nav.main',
|
|
items: [{
|
|
id: '/dashboard',
|
|
icon: 'dashboard',
|
|
label: 'nav.dashboard',
|
|
roles: ['admin', 'verkaeufer', 'buchhaltung']
|
|
}, {
|
|
id: '/fahrzeuge',
|
|
icon: 'truck',
|
|
label: 'nav.fahrzeuge',
|
|
roles: ['admin', 'verkaeufer', 'buchhaltung']
|
|
}, {
|
|
id: '/kontakte',
|
|
icon: 'contacts',
|
|
label: 'nav.kontakte',
|
|
roles: ['admin', 'verkaeufer', 'buchhaltung']
|
|
}, {
|
|
id: '/verkauf',
|
|
icon: 'sale',
|
|
label: 'nav.verkauf',
|
|
roles: ['admin', 'verkaeufer', 'buchhaltung']
|
|
}]
|
|
}, {
|
|
section: 'nav.ki',
|
|
items: [{
|
|
id: '/ki-copilot',
|
|
icon: 'ai',
|
|
label: 'nav.ki-copilot',
|
|
roles: ['admin', 'verkaeufer', 'buchhaltung']
|
|
}]
|
|
}, {
|
|
section: 'nav.verwaltung',
|
|
items: [{
|
|
id: '/einstellungen',
|
|
icon: 'settings',
|
|
label: 'nav.einstellungen',
|
|
roles: ['admin']
|
|
}]
|
|
}];
|
|
const isActive = id => route === id || id !== '/dashboard' && route.startsWith(id);
|
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
className: "sidebar-overlay",
|
|
onClick: () => closeSidebar()
|
|
}), /*#__PURE__*/React.createElement("aside", {
|
|
className: "sidebar",
|
|
role: "navigation"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "sidebar-header"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "sidebar-logo"
|
|
}, "NF"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
className: "sidebar-title"
|
|
}, "Nutzfahrzeug-ERP"), /*#__PURE__*/React.createElement("div", {
|
|
className: "sidebar-subtitle"
|
|
}, "Handelsverwaltung"))), /*#__PURE__*/React.createElement("nav", {
|
|
className: "sidebar-nav"
|
|
}, navItems.map((section, si) => /*#__PURE__*/React.createElement("div", {
|
|
key: si,
|
|
className: "sidebar-nav-section"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "sidebar-nav-label"
|
|
}, t(section.section)), section.items.map(item => item.roles.includes(role) ? /*#__PURE__*/React.createElement("a", {
|
|
key: item.id,
|
|
href: `#${item.id}`,
|
|
className: `sidebar-nav-item ${isActive(item.id) ? 'active' : ''}`,
|
|
onClick: () => closeSidebar()
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: item.icon,
|
|
size: 18
|
|
}), /*#__PURE__*/React.createElement("span", null, t(item.label))) : null)))), /*#__PURE__*/React.createElement("div", {
|
|
className: "sidebar-footer"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'var(--space-3)',
|
|
padding: 'var(--space-2) var(--space-3)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Avatar, {
|
|
name: "Max Mustermann"
|
|
}), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-sm)',
|
|
fontWeight: 'var(--font-weight-medium)'
|
|
}
|
|
}, "Max Mustermann"), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}, role === 'admin' ? 'Administrator' : role === 'verkaeufer' ? 'Verkaeufer' : 'Buchhaltung'))))));
|
|
};
|
|
const Topbar = ({
|
|
route,
|
|
role,
|
|
setRole,
|
|
navigate
|
|
}) => {
|
|
const [showProfile, setShowProfile] = useState(false);
|
|
const routeLabels = {
|
|
'/dashboard': 'nav.dashboard',
|
|
'/fahrzeuge': 'nav.fahrzeuge',
|
|
'/fahrzeuge/neu': 'nav.fahrzeuge.neu',
|
|
'/kontakte': 'nav.kontakte',
|
|
'/verkauf': 'nav.verkauf',
|
|
'/ki-copilot': 'nav.ki-copilot',
|
|
'/einstellungen': 'nav.einstellungen'
|
|
};
|
|
const currentLabel = routeLabels[route] || routeLabels[route.split('/').slice(0, 2).join('/')] || 'nav.dashboard';
|
|
return /*#__PURE__*/React.createElement("header", {
|
|
className: "topbar"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: "mobile-menu-btn",
|
|
onClick: toggleSidebar
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "menu",
|
|
size: 24
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "topbar-breadcrumb"
|
|
}, /*#__PURE__*/React.createElement("span", null, t('nav.main')), /*#__PURE__*/React.createElement(Icon, {
|
|
name: "chevronRight",
|
|
size: 14
|
|
}), /*#__PURE__*/React.createElement("span", {
|
|
className: "current"
|
|
}, t(currentLabel))), /*#__PURE__*/React.createElement("div", {
|
|
className: "topbar-actions"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "lang-switcher",
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-1)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: `btn btn-ghost btn-sm ${currentLang === 'de' ? 'active' : ''}`,
|
|
onClick: () => setLang('de'),
|
|
style: {
|
|
fontWeight: currentLang === 'de' ? 'bold' : 'normal'
|
|
}
|
|
}, "DE"), /*#__PURE__*/React.createElement("button", {
|
|
className: `btn btn-ghost btn-sm ${currentLang === 'en' ? 'active' : ''}`,
|
|
onClick: () => setLang('en'),
|
|
style: {
|
|
fontWeight: currentLang === 'en' ? 'bold' : 'normal'
|
|
}
|
|
}, "EN")), /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm",
|
|
onClick: toggleDarkMode
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: darkMode ? 'sun' : 'moon',
|
|
size: 18
|
|
})), /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "bell",
|
|
size: 18
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
position: 'relative'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm",
|
|
onClick: () => setShowProfile(!showProfile),
|
|
style: {
|
|
gap: 'var(--space-2)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Avatar, {
|
|
name: "Max Mustermann"
|
|
}), /*#__PURE__*/React.createElement(Icon, {
|
|
name: "chevronDown",
|
|
size: 14
|
|
})), showProfile && /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: '100%',
|
|
marginTop: 'var(--space-2)',
|
|
background: 'var(--color-surface)',
|
|
border: '1px solid var(--color-border)',
|
|
borderRadius: 'var(--radius-lg)',
|
|
boxShadow: 'var(--shadow-lg)',
|
|
minWidth: 200,
|
|
zIndex: 'var(--z-dropdown)',
|
|
overflow: 'hidden'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
padding: 'var(--space-3) var(--space-4)',
|
|
borderBottom: '1px solid var(--color-border)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-semibold)',
|
|
fontSize: 'var(--font-size-sm)'
|
|
}
|
|
}, "Max Mustermann"), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}, "max@nf-handel.de")), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
padding: 'var(--space-3) var(--space-4)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "label"
|
|
}, "Rolle"), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-1)',
|
|
marginTop: 'var(--space-2)'
|
|
}
|
|
}, ['admin', 'verkaeufer', 'buchhaltung'].map(r => /*#__PURE__*/React.createElement("button", {
|
|
key: r,
|
|
className: `btn btn-sm ${role === r ? 'btn-primary' : 'btn-secondary'}`,
|
|
onClick: () => {
|
|
setRole(r);
|
|
setShowProfile(false);
|
|
},
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)'
|
|
}
|
|
}, r === 'admin' ? 'Admin' : r === 'verkaeufer' ? 'Verkaeufer' : 'Buchhaltung')))), /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost",
|
|
style: {
|
|
width: '100%',
|
|
justifyContent: 'flex-start',
|
|
borderRadius: 0
|
|
},
|
|
onClick: () => navigate('/einstellungen')
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "settings",
|
|
size: 16
|
|
}), " ", t('nav.einstellungen'))))));
|
|
};
|
|
|
|
// ============ MOCK DATA ============
|
|
const mockVehicles = [{
|
|
id: 1,
|
|
marke: 'Mercedes-Benz',
|
|
modell: 'Actros 1845 LS',
|
|
fin: 'WDB9066351L123456',
|
|
baujahr: 2019,
|
|
erstzulassung: '2019-03-15',
|
|
kmStand: 150000,
|
|
betriebsstunden: null,
|
|
leistungKw: 330,
|
|
leistungPs: 449,
|
|
kraftstoff: 'Diesel',
|
|
getriebe: 'Automatik',
|
|
farbe: 'Weiss',
|
|
zustand: 'Gebraucht',
|
|
standort: 'Muenchen',
|
|
preis: 45000,
|
|
verfuegbarkeit: 'verfuegbar',
|
|
mobiledeStatus: 'gelistet',
|
|
typ: 'lkw',
|
|
hsn: '0911',
|
|
tsn: 'AAM',
|
|
egTyp: 'e1*2007/46*0514*12',
|
|
lkwTyp: 'Sattelzugmaschine',
|
|
aufbau: '3-Achs Sattelzug',
|
|
abgasnorm: 'Euro 6',
|
|
bereifung: '315/70 R22.5',
|
|
achsen: '3',
|
|
laenge: 6150,
|
|
breite: 2500,
|
|
hoehe: 3950,
|
|
leergewicht: 8500,
|
|
Gesamtgewicht: 19000,
|
|
hubraum: 14801,
|
|
vorbesitzer: 1,
|
|
unfallschaeden: false,
|
|
tuev: '03.2027',
|
|
serviceIntervall: 150000,
|
|
letzterService: '01.2026',
|
|
beschreibung: 'Top gepflegter Actros, Euro 6, 1. Hand',
|
|
lkwBordgeraet: true,
|
|
lkwHubwerk: false,
|
|
lkwLadebordwand: false,
|
|
lkwKlima: true,
|
|
lkwSchlafplatz: true,
|
|
lkwHydraulik: false,
|
|
anhaengelast: 40000,
|
|
kuppellast: 15000
|
|
}, {
|
|
id: 2,
|
|
marke: 'MAN',
|
|
modell: 'TGL 12.180',
|
|
fin: 'WMAUYYT1XPA123456',
|
|
baujahr: 2018,
|
|
erstzulassung: '2018-06-20',
|
|
kmStand: 120000,
|
|
betriebsstunden: null,
|
|
leistungKw: 132,
|
|
leistungPs: 180,
|
|
kraftstoff: 'Diesel',
|
|
getriebe: 'Manuell',
|
|
farbe: 'Blau',
|
|
zustand: 'Gebraucht',
|
|
standort: 'Muenchen',
|
|
preis: 29500,
|
|
verfuegbarkeit: 'verfuegbar',
|
|
mobiledeStatus: 'gelistet',
|
|
typ: 'lkw',
|
|
hsn: '0846',
|
|
tsn: 'ABJ',
|
|
lkwTyp: 'Kastenwagen',
|
|
aufbau: 'Kuehlkoffer',
|
|
abgasnorm: 'Euro 6',
|
|
bereifung: '265/70 R19.5',
|
|
achsen: '2',
|
|
laenge: 7200,
|
|
breite: 2100,
|
|
hoehe: 2900,
|
|
leergewicht: 4500,
|
|
Gesamtgewicht: 12000,
|
|
hubraum: 4880,
|
|
vorbesitzer: 2,
|
|
unfallschaeden: false,
|
|
tuev: '06.2026',
|
|
serviceIntervall: 100000,
|
|
letzterService: '10.2025',
|
|
beschreibung: 'MAN TGL mit Kuehlkoffer, tempiert bis +2°C',
|
|
lkwBordgeraet: false,
|
|
lkwHubwerk: false,
|
|
lkwLadebordwand: true,
|
|
lkwKlima: true,
|
|
lkwSchlafplatz: false,
|
|
lkwHydraulik: false,
|
|
anhaengelast: 8000,
|
|
kuppellast: 750
|
|
}, {
|
|
id: 3,
|
|
marke: 'BMW',
|
|
modell: 'X5 xDrive30d',
|
|
fin: 'WBAJA9C50K8123456',
|
|
baujahr: 2023,
|
|
erstzulassung: '2023-05-20',
|
|
kmStand: 25000,
|
|
betriebsstunden: null,
|
|
leistungKw: 195,
|
|
leistungPs: 265,
|
|
kraftstoff: 'Diesel',
|
|
getriebe: 'Automatik',
|
|
farbe: 'Schwarz Metallic',
|
|
zustand: 'Jahreswagen',
|
|
standort: 'Muenchen',
|
|
preis: 52000,
|
|
verfuegbarkeit: 'verfuegbar',
|
|
mobiledeStatus: 'gelistet',
|
|
typ: 'pkw',
|
|
hsn: '0511',
|
|
tsn: 'CZ1',
|
|
egTyp: 'e1*2007/46*1812*18',
|
|
pkwKlasse: 'Oberklasse',
|
|
pkwKarosserie: 'SUV',
|
|
pkwTueren: '5',
|
|
pkwSitze: '5',
|
|
pkwHubraum: 2993,
|
|
pkwAntrieb: 'Allrad',
|
|
pkwVerbrauch: '7.2',
|
|
pkwCo2: 189,
|
|
pkwUmwelt: 'gruen',
|
|
pkwReifen: '275/45 R20',
|
|
pkwAusstattung: ['Klimaautomatik', 'Navigation', 'Tempomat', 'Sitzheizung', 'LED-Matrix', 'Head-Up-Display'],
|
|
abgasnorm: 'Euro 6',
|
|
vorbesitzer: 1,
|
|
unfallschaeden: false,
|
|
tuev: '05.2025',
|
|
serviceIntervall: 30000,
|
|
letzterService: '03.2026',
|
|
laenge: 4922,
|
|
breite: 2004,
|
|
hoehe: 1776,
|
|
leergewicht: 2095,
|
|
Gesamtgewicht: 2670,
|
|
beschreibung: 'BMW X5 xDrive30d, Jahreswagen, M-Sportpaket'
|
|
}, {
|
|
id: 4,
|
|
marke: 'Volkswagen',
|
|
modell: 'Golf 8 2.0 TDI',
|
|
fin: 'WVWZZZ1KZ8W123456',
|
|
baujahr: 2022,
|
|
erstzulassung: '2022-03-10',
|
|
kmStand: 45000,
|
|
betriebsstunden: null,
|
|
leistungKw: 147,
|
|
leistungPs: 200,
|
|
kraftstoff: 'Diesel',
|
|
getriebe: 'DSG',
|
|
farbe: 'Grau',
|
|
zustand: 'Gebraucht',
|
|
standort: 'Muenchen',
|
|
preis: 28000,
|
|
verfuegbarkeit: 'verfuegbar',
|
|
mobiledeStatus: 'gelistet',
|
|
typ: 'pkw',
|
|
hsn: '0600',
|
|
tsn: 'BMR',
|
|
pkwKlasse: 'Kompaktklasse',
|
|
pkwKarosserie: 'Hatchback',
|
|
pkwTueren: '5',
|
|
pkwSitze: '5',
|
|
pkwHubraum: 1968,
|
|
pkwAntrieb: 'Front',
|
|
pkwVerbrauch: '5.1',
|
|
pkwCo2: 134,
|
|
pkwUmwelt: 'gruen',
|
|
pkwReifen: '225/45 R17',
|
|
pkwAusstattung: ['Klimaautomatik', 'Navigation', 'Tempomat', 'Spurhalteassistent'],
|
|
abgasnorm: 'Euro 6',
|
|
vorbesitzer: 1,
|
|
unfallschaeden: false,
|
|
tuev: '03.2024',
|
|
serviceIntervall: 30000,
|
|
letzterService: '01.2026',
|
|
laenge: 4284,
|
|
breite: 1789,
|
|
hoehe: 1456,
|
|
leergewicht: 1420,
|
|
Gesamtgewicht: 1910,
|
|
beschreibung: 'VW Golf 8 2.0 TDI DSG, Style'
|
|
}, {
|
|
id: 5,
|
|
marke: 'Liebherr',
|
|
modell: 'R 926 Crawler',
|
|
fin: 'LIR92620201234567',
|
|
baujahr: 2020,
|
|
erstzulassung: null,
|
|
kmStand: null,
|
|
betriebsstunden: 3200,
|
|
leistungKw: 150,
|
|
leistungPs: 204,
|
|
kraftstoff: 'Diesel',
|
|
getriebe: 'Hydrostat',
|
|
farbe: 'Gelb',
|
|
zustand: 'Gebraucht',
|
|
standort: 'Berlin',
|
|
preis: 89000,
|
|
verfuegbarkeit: 'verfuegbar',
|
|
mobiledeStatus: 'nicht_gelistet',
|
|
typ: 'baumaschine',
|
|
art: 'Bagger',
|
|
aufbau: 'Hydraulikbagger 26t',
|
|
bsEinheit: 'h',
|
|
abgasnorm: 'Euro 5',
|
|
vorbesitzer: 1,
|
|
unfallschaeden: false,
|
|
beschreibung: 'Liebherr R 926, 26t Raupenbagger'
|
|
}, {
|
|
id: 6,
|
|
marke: 'Toyota',
|
|
modell: '8FBE20 Elektrostapler',
|
|
fin: 'TOY8FBE20220123456',
|
|
baujahr: 2022,
|
|
erstzulassung: null,
|
|
kmStand: null,
|
|
betriebsstunden: 1850,
|
|
leistungKw: 4.5,
|
|
leistungPs: 6,
|
|
kraftstoff: 'Elektro',
|
|
getriebe: 'Stufenlos',
|
|
farbe: 'Orange',
|
|
zustand: 'Gebraucht',
|
|
standort: 'Berlin',
|
|
preis: 18500,
|
|
verfuegbarkeit: 'verfuegbar',
|
|
mobiledeStatus: 'nicht_gelistet',
|
|
typ: 'stapler',
|
|
abgasnorm: 'Keine',
|
|
staplerTrag: 2000,
|
|
staplerHubhoehe: 4500,
|
|
staplerBauhoehe: 2230,
|
|
staplerMast: 'Dreisteg',
|
|
staplerAntrieb: 'Elektro',
|
|
staplerBatterieKwh: 12.5,
|
|
staplerBatterieTyp: 'Lithium-Ion',
|
|
staplerReifen: 'Superelastik',
|
|
staplerLastschwerpunkt: 500,
|
|
staplerFahrkomponente: 'Stapler',
|
|
beschreibung: 'Toyota 8FBE20 Elektro-Gabelstapler, 2t'
|
|
}, {
|
|
id: 7,
|
|
marke: 'Scania',
|
|
modell: 'R 500 Highline',
|
|
fin: 'SCNR5002019123456',
|
|
baujahr: 2019,
|
|
erstzulassung: '2019-08-05',
|
|
kmStand: 210000,
|
|
betriebsstunden: null,
|
|
leistungKw: 368,
|
|
leistungPs: 500,
|
|
kraftstoff: 'Diesel',
|
|
getriebe: 'Automatik',
|
|
farbe: 'Rot',
|
|
zustand: 'Gebraucht',
|
|
standort: 'Muenchen',
|
|
preis: 38000,
|
|
verfuegbarkeit: 'verfuegbar',
|
|
mobiledeStatus: 'fehler',
|
|
typ: 'lkw',
|
|
hsn: '0856',
|
|
tsn: 'CKL',
|
|
lkwTyp: 'Sattelzugmaschine',
|
|
aufbau: '2-Achs Sattelzug',
|
|
abgasnorm: 'Euro 6',
|
|
bereifung: '315/70 R22.5',
|
|
achsen: '2',
|
|
laenge: 5800,
|
|
breite: 2500,
|
|
hoehe: 3800,
|
|
leergewicht: 7500,
|
|
Gesamtgewicht: 18000,
|
|
hubraum: 16400,
|
|
vorbesitzer: 2,
|
|
unfallschaeden: true,
|
|
tuev: '08.2026',
|
|
lkwBordgeraet: true,
|
|
lkwKlima: true,
|
|
lkwSchlafplatz: true,
|
|
anhaengelast: 40000,
|
|
kuppellast: 15000,
|
|
beschreibung: 'Scania R 500 Highline, V8, G410 Retarder'
|
|
}, {
|
|
id: 8,
|
|
marke: 'Linde',
|
|
modell: 'H25D Dieselsappler',
|
|
fin: 'LINH25D20211234567',
|
|
baujahr: 2021,
|
|
erstzulassung: null,
|
|
kmStand: null,
|
|
betriebsstunden: 3200,
|
|
leistungKw: 36,
|
|
leistungPs: 49,
|
|
kraftstoff: 'Diesel',
|
|
getriebe: 'Stufenlos',
|
|
farbe: 'Gelb',
|
|
zustand: 'Gebraucht',
|
|
standort: 'Koeln',
|
|
preis: 28000,
|
|
verfuegbarkeit: 'verfuegbar',
|
|
mobiledeStatus: 'nicht_gelistet',
|
|
typ: 'stapler',
|
|
abgasnorm: 'Euro 5',
|
|
staplerTrag: 2500,
|
|
staplerHubhoehe: 3000,
|
|
staplerBauhoehe: 1990,
|
|
staplerMast: 'Zweisteg',
|
|
staplerAntrieb: 'Diesel',
|
|
staplerBatterieKwh: null,
|
|
staplerBatterieTyp: null,
|
|
staplerReifen: 'Vollgummi',
|
|
staplerLastschwerpunkt: 500,
|
|
staplerFahrkomponente: 'Stapler',
|
|
beschreibung: 'Linde H25D Dieselstapler, 2.5t'
|
|
}];
|
|
const mockContactsKaeufer = [{
|
|
id: 1,
|
|
firmenname: 'Mueller Transport GmbH',
|
|
ansprechpartner: 'Thomas Mueller',
|
|
email: 't.mueller@mueller-transport.de',
|
|
telefon: '+49 89 1234567',
|
|
land: 'Deutschland',
|
|
ustId: 'DE123456789',
|
|
ustStatus: 'geprueft',
|
|
rolle: 'kaeufer',
|
|
adresse: 'Ludwigstrasse 45, 80336 Muenchen'
|
|
}, {
|
|
id: 2,
|
|
firmenname: 'Bauer Bauunternehmen GmbH',
|
|
ansprechpartner: 'Klaus Bauer',
|
|
email: 'k.bauer@bauer-bau.de',
|
|
telefon: '+49 30 9876543',
|
|
land: 'Deutschland',
|
|
ustId: 'DE987654321',
|
|
ustStatus: 'geprueft',
|
|
rolle: 'kaeufer',
|
|
adresse: 'Alexanderplatz 5, 10178 Berlin'
|
|
}, {
|
|
id: 4,
|
|
firmenname: 'Van den Berg Logistics B.V.',
|
|
ansprechpartner: 'Jan van den Berg',
|
|
email: 'j.vandenberg@vdberg.nl',
|
|
telefon: '+31 20 123 4567',
|
|
land: 'Niederlande',
|
|
ustId: 'NL123456789B01',
|
|
ustStatus: 'manuell_best',
|
|
rolle: 'kaeufer',
|
|
adresse: 'Keizersgracht 100, 1015 Amsterdam'
|
|
}];
|
|
const mockContactsVerkaeufer = [{
|
|
id: 3,
|
|
firmenname: 'TransLog AG',
|
|
ansprechpartner: 'Peter Schneider',
|
|
email: 'p.schneider@translog.ch',
|
|
telefon: '+41 44 555 1234',
|
|
land: 'Schweiz',
|
|
ustId: '',
|
|
ustStatus: 'ungeprueft',
|
|
rolle: 'verkaeufer',
|
|
adresse: 'Bahnhofstrasse 12, 8001 Zuerich'
|
|
}, {
|
|
id: 5,
|
|
firmenname: 'Schmidt Baumaschinen GmbH',
|
|
ansprechpartner: 'Andrea Schmidt',
|
|
email: 'a.schmidt@schmidt-baumaschinen.de',
|
|
telefon: '+49 221 555 7890',
|
|
land: 'Deutschland',
|
|
ustId: 'DE555444333',
|
|
ustStatus: 'geprueft',
|
|
rolle: 'beides',
|
|
adresse: 'Hohe Strasse 30, 50667 Koeln'
|
|
}];
|
|
const statusBadge = s => {
|
|
const m = {
|
|
verfuegbar: {
|
|
v: 'success',
|
|
l: t('fb.verfuegbar')
|
|
},
|
|
reserviert: {
|
|
v: 'warning',
|
|
l: t('fb.reserviert')
|
|
},
|
|
verkauft: {
|
|
v: 'neutral',
|
|
l: t('fb.verkauft')
|
|
}
|
|
};
|
|
const c = m[s] || m.verfuegbar;
|
|
return /*#__PURE__*/React.createElement(Badge, {
|
|
variant: c.v
|
|
}, c.l);
|
|
};
|
|
const mobiledeBadge = s => {
|
|
const m = {
|
|
gelistet: {
|
|
v: 'success',
|
|
l: t('fb.gelistet')
|
|
},
|
|
nicht_gelistet: {
|
|
v: 'neutral',
|
|
l: t('fb.nicht_gelistet')
|
|
},
|
|
fehler: {
|
|
v: 'error',
|
|
l: t('fb.fehler')
|
|
},
|
|
entfernt: {
|
|
v: 'neutral',
|
|
l: 'Entfernt'
|
|
}
|
|
};
|
|
const c = m[s] || m.nicht_gelistet;
|
|
return /*#__PURE__*/React.createElement(Badge, {
|
|
variant: c.v
|
|
}, c.l);
|
|
};
|
|
const typIcon = typ => typ === 'baumaschine' ? 'wrench' : typ === 'pkw' ? 'car' : typ === 'stapler' ? 'forklift' : 'truck';
|
|
const typLabel = typ => typ === 'lkw' ? 'LKW' : typ === 'baumaschine' ? 'Baumaschine' : typ === 'pkw' ? 'PKW' : typ === 'stapler' ? 'Stapler' : 'Transporter';
|
|
|
|
// ============ DASHBOARD (v4 configurable) ============
|
|
const DashboardView = ({
|
|
navigate,
|
|
role
|
|
}) => {
|
|
const [widgets, setWidgets] = useState(() => {
|
|
const saved = localStorage.getItem('erp-dashboard-widgets');
|
|
if (saved) try {
|
|
return JSON.parse(saved);
|
|
} catch (e) {}
|
|
return {
|
|
kpis: true,
|
|
quickActions: true,
|
|
activities: true,
|
|
tasks: true,
|
|
topVehicles: true
|
|
};
|
|
});
|
|
const [showConfig, setShowConfig] = useState(false);
|
|
const saveWidgets = w => {
|
|
setWidgets(w);
|
|
localStorage.setItem('erp-dashboard-widgets', JSON.stringify(w));
|
|
};
|
|
const toggleWidget = key => saveWidgets({
|
|
...widgets,
|
|
[key]: !widgets[key]
|
|
});
|
|
const kpis = [{
|
|
label: 'dash.fahrzeuge_im_bestand',
|
|
value: '52',
|
|
trend: '+5 diesen Monat',
|
|
trendDir: 'up',
|
|
icon: 'truck',
|
|
color: 'primary'
|
|
}, {
|
|
label: 'dash.verkaufe_diesen_monat',
|
|
value: '14',
|
|
trend: '+20% vs. Vormonat',
|
|
trendDir: 'up',
|
|
icon: 'sale',
|
|
color: 'success'
|
|
}, {
|
|
label: 'dash.offene_tasks',
|
|
value: '8',
|
|
trend: '3 ueberfaellig',
|
|
trendDir: 'down',
|
|
icon: 'clock',
|
|
color: 'warning'
|
|
}, {
|
|
label: 'dash.mobilede_sync',
|
|
value: '35/52',
|
|
trend: '17 nicht gelistet',
|
|
trendDir: 'down',
|
|
icon: 'sync',
|
|
color: 'info'
|
|
}];
|
|
const recentActivities = [{
|
|
type: 'sale',
|
|
text: 'Mercedes Actros an Mueller GmbH verkauft',
|
|
time: 'vor 2 Std'
|
|
}, {
|
|
type: 'add',
|
|
text: 'Neues Fahrzeug: BMW X5 xDrive30d (PKW)',
|
|
time: 'vor 4 Std'
|
|
}, {
|
|
type: 'add',
|
|
text: 'Neuer Stapler: Toyota 8FBE20 Elektrostapler',
|
|
time: 'vor 5 Std'
|
|
}, {
|
|
type: 'sync',
|
|
text: 'mobile.de Sync: 5 Fahrzeuge aktualisiert',
|
|
time: 'vor 6 Std'
|
|
}, {
|
|
type: 'edit',
|
|
text: 'Preis aktualisiert: MAN TGL - 32.000 -> 29.500',
|
|
time: 'vor 1 Tag'
|
|
}];
|
|
const upcomingTasks = [{
|
|
task: 'USt-IdNr.-Pruefung fuer Mueller GmbH (EU-Ausland)',
|
|
due: '15.07.2026',
|
|
priority: 'high'
|
|
}, {
|
|
task: 'Kaufvertrag: Volvo FH16 an Bauer GmbH',
|
|
due: '16.07.2026',
|
|
priority: 'high'
|
|
}, {
|
|
task: 'DATEV-Export fuer Juni 2026',
|
|
due: '20.07.2026',
|
|
priority: 'medium'
|
|
}, {
|
|
task: 'Fahrzeugfotos nachretuschieren (3 Fahrzeuge)',
|
|
due: '22.07.2026',
|
|
priority: 'low'
|
|
}];
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
position: 'relative'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 'var(--space-6)',
|
|
flexWrap: 'wrap',
|
|
gap: 'var(--space-4)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
|
|
style: {
|
|
fontSize: 'var(--font-size-2xl)',
|
|
fontWeight: 'var(--font-weight-bold)'
|
|
}
|
|
}, t('dash.title')), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
color: 'var(--color-text-secondary)',
|
|
fontSize: 'var(--font-size-sm)',
|
|
marginTop: 'var(--space-1)'
|
|
}
|
|
}, "Willkommen zurueck, Max!")), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-2)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
variant: "ghost",
|
|
icon: "config",
|
|
onClick: () => setShowConfig(true),
|
|
title: "Dashboard konfigurieren"
|
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "plus",
|
|
onClick: () => navigate('/fahrzeuge/neu'),
|
|
className: "hide-mobile"
|
|
}, t('dash.neues_fahrzeug')))), widgets.kpis && /*#__PURE__*/React.createElement("div", {
|
|
className: "kpi-grid",
|
|
style: {
|
|
marginBottom: 'var(--space-6)'
|
|
}
|
|
}, kpis.map((k, i) => /*#__PURE__*/React.createElement(KpiCard, {
|
|
key: i,
|
|
...k
|
|
}))), widgets.quickActions && /*#__PURE__*/React.createElement(Card, {
|
|
title: t('dash.schnellzugriffe'),
|
|
className: "hide-mobile",
|
|
style: {
|
|
marginBottom: 'var(--space-6)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-4)',
|
|
flexWrap: 'wrap'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "plus",
|
|
onClick: () => navigate('/fahrzeuge/neu')
|
|
}, t('dash.neues_fahrzeug')), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "secondary",
|
|
icon: "sale",
|
|
onClick: () => navigate('/verkauf')
|
|
}, t('dash.neuer_verkauf')), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "secondary",
|
|
icon: "ai",
|
|
onClick: () => navigate('/ki-copilot')
|
|
}, t('dash.ki_copilot')), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "secondary",
|
|
icon: "calendar",
|
|
onClick: () => navigate('/verkauf')
|
|
}, "Verkaufskalender"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "two-col",
|
|
style: {
|
|
marginBottom: 'var(--space-6)'
|
|
}
|
|
}, widgets.activities && /*#__PURE__*/React.createElement(Card, {
|
|
title: t('dash.letzte_aktivitaeten')
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 'var(--space-4)'
|
|
}
|
|
}, recentActivities.map((act, i) => /*#__PURE__*/React.createElement("div", {
|
|
key: i,
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-3)',
|
|
alignItems: 'flex-start'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 'var(--radius-md)',
|
|
flexShrink: 0,
|
|
background: act.type === 'sale' ? 'var(--color-success-light)' : act.type === 'add' ? 'var(--color-primary-light)' : act.type === 'sync' ? 'var(--color-info-light)' : 'var(--color-warning-light)',
|
|
color: act.type === 'sale' ? 'var(--color-success)' : act.type === 'add' ? 'var(--color-primary)' : act.type === 'sync' ? 'var(--color-info)' : 'var(--color-warning)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: act.type === 'sale' ? 'sale' : act.type === 'add' ? 'plus' : act.type === 'sync' ? 'sync' : 'edit',
|
|
size: 16
|
|
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-sm)',
|
|
fontWeight: 'var(--font-weight-medium)'
|
|
}
|
|
}, act.text), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}, act.time)))))), widgets.tasks && /*#__PURE__*/React.createElement(Card, {
|
|
title: t('dash.bevorstehende_tasks')
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 'var(--space-3)'
|
|
}
|
|
}, upcomingTasks.map((task, i) => /*#__PURE__*/React.createElement("div", {
|
|
key: i,
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'var(--space-3)',
|
|
padding: 'var(--space-3)',
|
|
borderRadius: 'var(--radius-md)',
|
|
border: '1px solid var(--color-border)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: task.priority === 'high' ? 'error' : task.priority === 'medium' ? 'warning' : 'neutral'
|
|
}, task.priority === 'high' ? 'Hoch' : task.priority === 'medium' ? 'Mittel' : 'Niedrig'), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
flex: 1,
|
|
fontSize: 'var(--font-size-sm)'
|
|
}
|
|
}, task.task), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)',
|
|
whiteSpace: 'nowrap'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "calendar",
|
|
size: 14
|
|
}), " ", task.due)))))), widgets.topVehicles && /*#__PURE__*/React.createElement(Card, {
|
|
title: t('dash.top_fahrzeuge')
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "data-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Marke"), /*#__PURE__*/React.createElement("th", null, "FIN"), /*#__PURE__*/React.createElement("th", null, "Anfragen"), /*#__PURE__*/React.createElement("th", null, "Preis"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
|
|
onClick: () => navigate('/fahrzeug/1'),
|
|
style: {
|
|
cursor: 'pointer'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("td", null, "Mercedes Actros 2019"), /*#__PURE__*/React.createElement("td", {
|
|
style: {
|
|
fontFamily: 'var(--font-mono)',
|
|
fontSize: 'var(--font-size-xs)'
|
|
}
|
|
}, "WDB9066351L123456"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "primary"
|
|
}, "24")), /*#__PURE__*/React.createElement("td", null, "45.000")), /*#__PURE__*/React.createElement("tr", {
|
|
onClick: () => navigate('/fahrzeug/3'),
|
|
style: {
|
|
cursor: 'pointer'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("td", null, "BMW X5 xDrive30d"), /*#__PURE__*/React.createElement("td", {
|
|
style: {
|
|
fontFamily: 'var(--font-mono)',
|
|
fontSize: 'var(--font-size-xs)'
|
|
}
|
|
}, "WBAJA9C50K8123456"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "primary"
|
|
}, "18")), /*#__PURE__*/React.createElement("td", null, "52.000")), /*#__PURE__*/React.createElement("tr", {
|
|
onClick: () => navigate('/fahrzeug/5'),
|
|
style: {
|
|
cursor: 'pointer'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("td", null, "Liebherr R 926"), /*#__PURE__*/React.createElement("td", {
|
|
style: {
|
|
fontFamily: 'var(--font-mono)',
|
|
fontSize: 'var(--font-size-xs)'
|
|
}
|
|
}, "LIR92620201234567"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "primary"
|
|
}, "12")), /*#__PURE__*/React.createElement("td", null, "89.000"))))), showConfig && /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-overlay",
|
|
onClick: () => setShowConfig(false)
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "modal",
|
|
onClick: e => e.stopPropagation()
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-header"
|
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
style: {
|
|
fontSize: 'var(--font-size-lg)',
|
|
fontWeight: 'var(--font-weight-semibold)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "config",
|
|
size: 20
|
|
}), " Dashboard konfigurieren"), /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm",
|
|
onClick: () => setShowConfig(false)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "close",
|
|
size: 20
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-body"
|
|
}, /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
fontSize: 'var(--font-size-sm)',
|
|
color: 'var(--color-text-secondary)',
|
|
marginBottom: 'var(--space-4)'
|
|
}
|
|
}, "Widgets ein-/ausblenden. Konfiguration wird pro Benutzer gespeichert."), [{
|
|
key: 'kpis',
|
|
label: 'KPI-Kennzahlen'
|
|
}, {
|
|
key: 'quickActions',
|
|
label: 'Schnellzugriffe'
|
|
}, {
|
|
key: 'activities',
|
|
label: 'Letzte Aktivitaeten'
|
|
}, {
|
|
key: 'tasks',
|
|
label: 'Bevorstehende Tasks'
|
|
}, {
|
|
key: 'topVehicles',
|
|
label: 'Top-Fahrzeuge'
|
|
}].map(item => /*#__PURE__*/React.createElement("div", {
|
|
key: item.key,
|
|
className: "config-item"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "config-item-label"
|
|
}, item.label), /*#__PURE__*/React.createElement("div", {
|
|
className: `toggle ${widgets[item.key] ? 'active' : ''}`,
|
|
onClick: () => toggleWidget(item.key)
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "modal-footer"
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
onClick: () => setShowConfig(false)
|
|
}, "Fertig")))));
|
|
};
|
|
|
|
// ============ FAHRZEUG LISTE ============
|
|
const FahrzeugListe = ({
|
|
navigate,
|
|
role
|
|
}) => {
|
|
const [search, setSearch] = useState('');
|
|
const [filterType, setFilterType] = useState('alle');
|
|
const [filterStatus, setFilterStatus] = useState('alle');
|
|
const [sortBy, setSortBy] = useState('marke');
|
|
const [sortDir, setSortDir] = useState('asc');
|
|
const [view, setView] = useState('table');
|
|
const [page, setPage] = useState(1);
|
|
const perPage = 10;
|
|
const filtered = useMemo(() => {
|
|
let r = mockVehicles.filter(v => {
|
|
const ms = !search || v.marke.toLowerCase().includes(search.toLowerCase()) || v.modell.toLowerCase().includes(search.toLowerCase()) || v.fin.toLowerCase().includes(search.toLowerCase()) || (v.hsn || '').includes(search);
|
|
const mt = filterType === 'alle' || v.typ === filterType;
|
|
const mst = filterStatus === 'alle' || v.verfuegbarkeit === filterStatus;
|
|
return ms && mt && mst;
|
|
});
|
|
r.sort((a, b) => {
|
|
const av = a[sortBy] || '',
|
|
bv = b[sortBy] || '';
|
|
if (typeof av === 'number') return sortDir === 'asc' ? av - bv : bv - av;
|
|
return sortDir === 'asc' ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
|
|
});
|
|
return r;
|
|
}, [search, filterType, filterStatus, sortBy, sortDir]);
|
|
const totalPages = Math.ceil(filtered.length / perPage);
|
|
const pageData = filtered.slice((page - 1) * perPage, page * perPage);
|
|
const handleSort = col => {
|
|
if (sortBy === col) setSortDir(sortDir === 'asc' ? 'desc' : 'asc');else {
|
|
setSortBy(col);
|
|
setSortDir('asc');
|
|
}
|
|
};
|
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 'var(--space-6)',
|
|
flexWrap: 'wrap',
|
|
gap: 'var(--space-4)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
|
|
style: {
|
|
fontSize: 'var(--font-size-2xl)',
|
|
fontWeight: 'var(--font-weight-bold)'
|
|
}
|
|
}, t('fb.title')), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
color: 'var(--color-text-secondary)',
|
|
fontSize: 'var(--font-size-sm)'
|
|
}
|
|
}, filtered.length, " ", t('common.eintraege'))), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-2)',
|
|
alignItems: 'center'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(ViewToggle, {
|
|
view: view,
|
|
onChange: setView
|
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "secondary",
|
|
icon: "download",
|
|
className: "hide-mobile"
|
|
}, "Export"), role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "plus",
|
|
onClick: () => navigate('/fahrzeuge/neu')
|
|
}, t('fb.add_new')))), /*#__PURE__*/React.createElement(Card, {
|
|
style: {
|
|
marginBottom: 'var(--space-4)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-4)',
|
|
flexWrap: 'wrap',
|
|
alignItems: 'flex-end'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
flex: '1 1 300px'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Suche (Marke, Modell, FIN, HSN)"), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
position: 'relative'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "search",
|
|
size: 16,
|
|
style: {
|
|
position: 'absolute',
|
|
left: 'var(--space-3)',
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
style: {
|
|
paddingLeft: 'var(--space-8)'
|
|
},
|
|
placeholder: t('fb.suche'),
|
|
value: search,
|
|
onChange: e => {
|
|
setSearch(e.target.value);
|
|
setPage(1);
|
|
}
|
|
}))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Typ"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: filterType,
|
|
onChange: e => {
|
|
setFilterType(e.target.value);
|
|
setPage(1);
|
|
}
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "alle"
|
|
}, "Alle"), /*#__PURE__*/React.createElement("option", {
|
|
value: "lkw"
|
|
}, "LKW"), /*#__PURE__*/React.createElement("option", {
|
|
value: "baumaschine"
|
|
}, "Baumaschine"), /*#__PURE__*/React.createElement("option", {
|
|
value: "pkw"
|
|
}, "PKW"), /*#__PURE__*/React.createElement("option", {
|
|
value: "stapler"
|
|
}, "Stapler"), /*#__PURE__*/React.createElement("option", {
|
|
value: "transporter"
|
|
}, "Transporter"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Status"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: filterStatus,
|
|
onChange: e => {
|
|
setFilterStatus(e.target.value);
|
|
setPage(1);
|
|
}
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "alle"
|
|
}, "Alle"), /*#__PURE__*/React.createElement("option", {
|
|
value: "verfuegbar"
|
|
}, "Verfuegbar"), /*#__PURE__*/React.createElement("option", {
|
|
value: "reserviert"
|
|
}, "Reserviert"), /*#__PURE__*/React.createElement("option", {
|
|
value: "verkauft"
|
|
}, "Verkauft"))), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "ghost",
|
|
icon: "close",
|
|
onClick: () => {
|
|
setSearch('');
|
|
setFilterType('alle');
|
|
setFilterStatus('alle');
|
|
}
|
|
}, "Reset"))), pageData.length === 0 ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(EmptyState, {
|
|
icon: "truck",
|
|
title: "Keine Fahrzeuge",
|
|
text: "Legen Sie Ihr erstes Fahrzeug an.",
|
|
action: role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "plus",
|
|
onClick: () => navigate('/fahrzeuge/neu')
|
|
}, "Fahrzeug hinzufuegen")
|
|
})) : view === 'table' ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
overflowX: 'auto'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "data-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
|
|
className: sortBy === 'marke' ? 'sorted' : '',
|
|
onClick: () => handleSort('marke')
|
|
}, "Marke"), /*#__PURE__*/React.createElement("th", null, "Modell"), /*#__PURE__*/React.createElement("th", null, "FIN"), /*#__PURE__*/React.createElement("th", null, "Baujahr"), /*#__PURE__*/React.createElement("th", {
|
|
className: "hide-mobile"
|
|
}, "KM/h"), /*#__PURE__*/React.createElement("th", {
|
|
className: sortBy === 'preis' ? 'sorted' : '',
|
|
onClick: () => handleSort('preis')
|
|
}, "Preis"), /*#__PURE__*/React.createElement("th", null, "Typ"), /*#__PURE__*/React.createElement("th", null, "Status"), /*#__PURE__*/React.createElement("th", {
|
|
className: "hide-mobile"
|
|
}, "mobile.de"), /*#__PURE__*/React.createElement("th", null, "Aktion"))), /*#__PURE__*/React.createElement("tbody", null, pageData.map(v => /*#__PURE__*/React.createElement("tr", {
|
|
key: v.id,
|
|
onClick: () => navigate('/fahrzeug/' + v.id),
|
|
style: {
|
|
cursor: 'pointer'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("td", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-semibold)'
|
|
}
|
|
}, v.marke), /*#__PURE__*/React.createElement("td", null, v.modell), /*#__PURE__*/React.createElement("td", {
|
|
style: {
|
|
fontFamily: 'var(--font-mono)',
|
|
fontSize: 'var(--font-size-xs)'
|
|
}
|
|
}, v.fin), /*#__PURE__*/React.createElement("td", null, v.baujahr), /*#__PURE__*/React.createElement("td", {
|
|
className: "hide-mobile"
|
|
}, v.kmStand ? formatNumber(v.kmStand) + ' km' : v.betriebsstunden ? formatNumber(v.betriebsstunden) + ' h' : '-'), /*#__PURE__*/React.createElement("td", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-semibold)'
|
|
}
|
|
}, formatPrice(v.preis)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "info"
|
|
}, typLabel(v.typ))), /*#__PURE__*/React.createElement("td", null, statusBadge(v.verfuegbarkeit)), /*#__PURE__*/React.createElement("td", {
|
|
className: "hide-mobile"
|
|
}, mobiledeBadge(v.mobiledeStatus)), /*#__PURE__*/React.createElement("td", {
|
|
onClick: e => e.stopPropagation()
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-1)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm",
|
|
onClick: () => navigate('/fahrzeug/' + v.id)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "eye",
|
|
size: 16
|
|
})), role !== 'buchhaltung' && /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm",
|
|
onClick: () => navigate('/fahrzeuge/neu?id=' + v.id)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "edit",
|
|
size: 16
|
|
}))))))))), /*#__PURE__*/React.createElement("div", {
|
|
className: "pagination"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "pagination-info"
|
|
}, (page - 1) * perPage + 1, "-", Math.min(page * perPage, filtered.length), " von ", filtered.length), /*#__PURE__*/React.createElement("div", {
|
|
className: "pagination-controls"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: "pagination-btn",
|
|
disabled: page === 1,
|
|
onClick: () => setPage(page - 1)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "chevronLeft",
|
|
size: 16
|
|
})), Array.from({
|
|
length: totalPages
|
|
}, (_, i) => i + 1).map(p => /*#__PURE__*/React.createElement("button", {
|
|
key: p,
|
|
className: `pagination-btn ${page === p ? 'active' : ''}`,
|
|
onClick: () => setPage(p)
|
|
}, p)), /*#__PURE__*/React.createElement("button", {
|
|
className: "pagination-btn",
|
|
disabled: page === totalPages,
|
|
onClick: () => setPage(page + 1)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "chevronRight",
|
|
size: 16
|
|
}))))) : /*#__PURE__*/React.createElement("div", {
|
|
className: "card-grid"
|
|
}, filtered.map(v => /*#__PURE__*/React.createElement("div", {
|
|
key: v.id,
|
|
className: "vehicle-card",
|
|
onClick: () => navigate('/fahrzeug/' + v.id)
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "vehicle-card-image"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: typIcon(v.typ),
|
|
size: 48,
|
|
style: {
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "card-status-badge"
|
|
}, statusBadge(v.verfuegbarkeit))), /*#__PURE__*/React.createElement("div", {
|
|
className: "vehicle-card-body"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "vehicle-card-title"
|
|
}, v.marke, " ", v.modell), /*#__PURE__*/React.createElement("div", {
|
|
className: "vehicle-card-subtitle"
|
|
}, "FIN: ", v.fin), /*#__PURE__*/React.createElement("div", {
|
|
className: "vehicle-card-info"
|
|
}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "calendar",
|
|
size: 12
|
|
}), " ", v.baujahr), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "info"
|
|
}, typLabel(v.typ)))), /*#__PURE__*/React.createElement("div", {
|
|
className: "vehicle-card-meta"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "vehicle-card-price"
|
|
}, formatPrice(v.preis)), mobiledeBadge(v.mobiledeStatus)))))));
|
|
};
|
|
|
|
// ============ FAHRZEUG DETAIL ============
|
|
const FahrzeugDetail = ({
|
|
id,
|
|
navigate,
|
|
role
|
|
}) => {
|
|
const [activeTab, setActiveTab] = useState('allgemein');
|
|
const [photos, setPhotos] = useState([{
|
|
id: 1,
|
|
category: 'aussen_front',
|
|
isMain: true
|
|
}, {
|
|
id: 2,
|
|
category: 'aussen_seite',
|
|
isMain: false
|
|
}, {
|
|
id: 3,
|
|
category: 'aussen_heck',
|
|
isMain: false
|
|
}, {
|
|
id: 4,
|
|
category: 'innen_armaturen',
|
|
isMain: false
|
|
}]);
|
|
const vehicle = mockVehicles.find(v => v.id === parseInt(id));
|
|
if (!vehicle) return /*#__PURE__*/React.createElement(ErrorState, {
|
|
title: "Nicht gefunden",
|
|
text: "Fahrzeug existiert nicht.",
|
|
onRetry: () => navigate('/fahrzeuge')
|
|
});
|
|
const tabs = [{
|
|
id: 'allgemein',
|
|
label: 'Allgemein'
|
|
}, {
|
|
id: 'technisch',
|
|
label: 'Technisch'
|
|
}, {
|
|
id: 'abmessungen',
|
|
label: 'Abmessungen'
|
|
}, ...(vehicle.typ === 'baumaschine' ? [{
|
|
id: 'baumaschine',
|
|
label: 'Baumaschine'
|
|
}] : []), ...(vehicle.typ === 'pkw' ? [{
|
|
id: 'pkw',
|
|
label: 'PKW-Daten'
|
|
}] : []), ...(vehicle.typ === 'stapler' ? [{
|
|
id: 'stapler',
|
|
label: 'Stapler-Daten'
|
|
}] : []), ...(vehicle.typ === 'lkw' ? [{
|
|
id: 'lkw',
|
|
label: 'LKW-Daten'
|
|
}] : []), {
|
|
id: 'verkaufsinfo',
|
|
label: 'Verkaufsinfo'
|
|
}, {
|
|
id: 'dokumente',
|
|
label: 'Dokumente'
|
|
}, {
|
|
id: 'fotos',
|
|
label: 'Fotos'
|
|
}, {
|
|
id: 'mobilede',
|
|
label: 'mobile.de'
|
|
}];
|
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'var(--space-4)',
|
|
marginBottom: 'var(--space-6)',
|
|
flexWrap: 'wrap'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
variant: "ghost",
|
|
icon: "chevronLeft",
|
|
onClick: () => navigate('/fahrzeuge')
|
|
}, t('fd.zurueck')), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
flex: 1
|
|
}
|
|
}, /*#__PURE__*/React.createElement("h1", {
|
|
style: {
|
|
fontSize: 'var(--font-size-2xl)',
|
|
fontWeight: 'var(--font-weight-bold)'
|
|
}
|
|
}, vehicle.marke, " ", vehicle.modell), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
color: 'var(--color-text-secondary)',
|
|
fontSize: 'var(--font-size-sm)',
|
|
fontFamily: 'var(--font-mono)'
|
|
}
|
|
}, "FIN: ", vehicle.fin, " · HSN: ", vehicle.hsn || '-', " · TSN: ", vehicle.tsn || '-')), role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
|
|
variant: "secondary",
|
|
icon: "edit",
|
|
onClick: () => navigate('/fahrzeuge/neu?id=' + vehicle.id)
|
|
}, "Bearbeiten"), role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "sale",
|
|
onClick: () => navigate('/verkauf?vehicle=' + vehicle.id)
|
|
}, "Verkaufen")), /*#__PURE__*/React.createElement("div", {
|
|
className: "tabs"
|
|
}, tabs.map(tab => /*#__PURE__*/React.createElement("div", {
|
|
key: tab.id,
|
|
className: `tab ${activeTab === tab.id ? 'active' : ''}`,
|
|
onClick: () => setActiveTab(tab.id)
|
|
}, tab.label))), activeTab === 'allgemein' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Allgemein"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-grid"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Marke"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.marke)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Modell"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.modell)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "FIN"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value",
|
|
style: {
|
|
fontFamily: 'var(--font-mono)'
|
|
}
|
|
}, vehicle.fin)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Baujahr"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.baujahr)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Erstzulassung"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.erstzulassung ? formatDate(vehicle.erstzulassung) : '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Farbe"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.farbe)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Zustand"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.zustand)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Standort"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.standort)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "HSN ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(2.1)"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value",
|
|
style: {
|
|
fontFamily: 'var(--font-mono)'
|
|
}
|
|
}, vehicle.hsn || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "TSN ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(2.2)"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value",
|
|
style: {
|
|
fontFamily: 'var(--font-mono)'
|
|
}
|
|
}, vehicle.tsn || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "EG-Typgenehmigung ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "K"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value",
|
|
style: {
|
|
fontFamily: 'var(--font-mono)',
|
|
fontSize: 'var(--font-size-xs)'
|
|
}
|
|
}, vehicle.egTyp || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Vorbesitzer"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.vorbesitzer || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Unfallschaeden"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.unfallschaeden ? /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "error"
|
|
}, "Ja") : /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Nein"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "TUeV/AU"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.tuev || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Letzter Service"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.letzterService || '-'))), vehicle.beschreibung && /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
marginTop: 'var(--space-4)',
|
|
paddingTop: 'var(--space-4)',
|
|
borderTop: '1px solid var(--color-border)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Beschreibung"), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
marginTop: 'var(--space-2)',
|
|
fontSize: 'var(--font-size-sm)'
|
|
}
|
|
}, vehicle.beschreibung))), activeTab === 'technisch' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Technische Daten"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-grid"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Leistung (kW) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "P.2"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.leistungKw, " kW")), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Leistung (PS)"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.leistungPs, " PS")), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Kraftstoff ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "P.3"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.kraftstoff)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Getriebe"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.getriebe)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Hubraum (ccm) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "P.1"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.hubraum || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Abgasnorm"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.abgasnorm || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "KM-Stand"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.kmStand ? formatNumber(vehicle.kmStand) + ' km' : '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Betriebsstunden"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.betriebsstunden ? formatNumber(vehicle.betriebsstunden) + ' h' : '-')))), activeTab === 'abmessungen' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Abmessungen & Gewichte"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-grid"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Laenge (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(18)"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.laenge || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Breite (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(19)"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.breite || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Hoehe (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(20)"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.hoehe || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Leergewicht (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "G"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.leergewicht || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Gesamtgewicht (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "F.1"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.Gesamtgewicht || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Achsen ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "L"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.achsen || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Bereifung ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(15)"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.bereifung || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Anhaengelast ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "O.1"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.anhaengelast ? formatNumber(vehicle.anhaengelast) + ' kg' : '-')))), activeTab === 'pkw' && vehicle.typ === 'pkw' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "PKW-Daten"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-grid"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Fahrzeugklasse"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.pkwKlasse)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Karosserie"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.pkwKarosserie)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Tueren"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.pkwTueren)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Sitzplaetze ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "S.1"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.pkwSitze)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Antriebsart"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.pkwAntrieb)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Verbrauch (l/100km)"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.pkwVerbrauch)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "CO2 (g/km) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "V.7"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.pkwCo2)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Umweltplakette"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: vehicle.pkwUmwelt === 'gruen' ? 'success' : 'warning'
|
|
}, vehicle.pkwUmwelt)))), vehicle.pkwAusstattung && /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
marginTop: 'var(--space-4)',
|
|
paddingTop: 'var(--space-4)',
|
|
borderTop: '1px solid var(--color-border)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Ausstattung"), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: 'var(--space-2)',
|
|
marginTop: 'var(--space-2)'
|
|
}
|
|
}, vehicle.pkwAusstattung.map((a, i) => /*#__PURE__*/React.createElement(Badge, {
|
|
key: i,
|
|
variant: "primary"
|
|
}, a))))), activeTab === 'lkw' && vehicle.typ === 'lkw' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "LKW-Daten"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-grid"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "LKW-Typ"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.lkwTyp)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Aufbau"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.aufbau || '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Bordgeraet"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.lkwBordgeraet ? /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Ja") : /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "neutral"
|
|
}, "Nein"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Hubwerk"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.lkwHubwerk ? /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Ja") : /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "neutral"
|
|
}, "Nein"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Ladebordwand"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.lkwLadebordwand ? /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Ja") : /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "neutral"
|
|
}, "Nein"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Klimaanlage"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.lkwKlima ? /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Ja") : /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "neutral"
|
|
}, "Nein"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Schlafplatz"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.lkwSchlafplatz ? /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Ja") : /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "neutral"
|
|
}, "Nein"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Hydraulik"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.lkwHydraulik ? /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Ja") : /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "neutral"
|
|
}, "Nein"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Anhaengelast (kg)"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.anhaengelast ? formatNumber(vehicle.anhaengelast) : '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Kuppelast (kg)"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.kuppellast ? formatNumber(vehicle.kuppellast) : '-')))), activeTab === 'baumaschine' && vehicle.typ === 'baumaschine' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Baumaschinen-Daten"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-grid"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Art"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.art)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Betriebsstunden"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.betriebsstunden ? formatNumber(vehicle.betriebsstunden) + ' h' : '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Aufbau"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.aufbau || '-')))), activeTab === 'stapler' && vehicle.typ === 'stapler' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Stapler-Daten"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-grid"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Tragfaehigkeit (kg)"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.staplerTrag)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Hubhoehe (mm)"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.staplerHubhoehe)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Bauhoehe (mm)"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.staplerBauhoehe)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Masttyp"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.staplerMast)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Antrieb"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.staplerAntrieb)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Batterie"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.staplerBatterieKwh ? vehicle.staplerBatterieKwh + ' kWh' : '-')), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Reifenart"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.staplerReifen)))), activeTab === 'verkaufsinfo' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Verkaufsinfo"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-grid"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Preis"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value",
|
|
style: {
|
|
fontSize: 'var(--font-size-xl)',
|
|
color: 'var(--color-primary)'
|
|
}
|
|
}, formatPrice(vehicle.preis))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Status"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, statusBadge(vehicle.verfuegbarkeit))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Standort"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, vehicle.standort)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Typ"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, typLabel(vehicle.typ))))), activeTab === 'dokumente' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Dokumente"
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "data-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Dateiname"), /*#__PURE__*/React.createElement("th", null, "Kategorie"), /*#__PURE__*/React.createElement("th", null, "Aktion"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "ZB_I_Fahrzeugschein.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "info"
|
|
}, "ZB I")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "download",
|
|
size: 16
|
|
})))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "ZB_II_Fahrzeugbrief.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "info"
|
|
}, "ZB II")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "download",
|
|
size: 16
|
|
})))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Kaufvertrag.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "primary"
|
|
}, "Vertrag")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "download",
|
|
size: 16
|
|
}))))))), activeTab === 'fotos' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Fotos"
|
|
}, /*#__PURE__*/React.createElement(ImageManager, {
|
|
photos: photos,
|
|
setPhotos: setPhotos,
|
|
role: role
|
|
})), activeTab === 'mobilede' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "mobile.de Status"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
marginBottom: 'var(--space-4)'
|
|
}
|
|
}, mobiledeBadge(vehicle.mobiledeStatus)), vehicle.mobiledeStatus === 'fehler' && /*#__PURE__*/React.createElement("div", {
|
|
className: "warning-banner"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "alert",
|
|
size: 20,
|
|
className: "warning-banner-icon"
|
|
}), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "API Fehler:"), " Pflichtfeld fehlt.")), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-2)',
|
|
flexWrap: 'wrap'
|
|
}
|
|
}, role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "sync"
|
|
}, "Sync"), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "secondary",
|
|
icon: "chart"
|
|
}, "Preisvergleich"))));
|
|
};
|
|
|
|
// ============ FAHRZEUG FORM (v4 tabbed) ============
|
|
const FahrzeugForm = ({
|
|
navigate,
|
|
editId
|
|
}) => {
|
|
const [typ, setTyp] = useState('lkw');
|
|
const [errors, setErrors] = useState({});
|
|
const [ocrLoading, setOcrLoading] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [photos, setPhotos] = useState([]);
|
|
const [activeFormTab, setActiveFormTab] = useState('allgemein');
|
|
const editVehicle = editId ? mockVehicles.find(v => v.id === parseInt(editId)) : null;
|
|
const [form, setForm] = useState(editVehicle || {
|
|
marke: '',
|
|
modell: '',
|
|
fin: '',
|
|
baujahr: '',
|
|
erstzulassung: '',
|
|
kmStand: '',
|
|
betriebsstunden: '',
|
|
leistungKw: '',
|
|
leistungPs: '',
|
|
kraftstoff: 'Diesel',
|
|
getriebe: 'Manuell',
|
|
farbe: '',
|
|
zustand: 'Gebraucht',
|
|
standort: 'Muenchen',
|
|
preis: '',
|
|
hsn: '',
|
|
tsn: '',
|
|
egTyp: '',
|
|
hubraum: '',
|
|
abgasnorm: 'Euro 6',
|
|
vorbesitzer: '',
|
|
unfallschaeden: false,
|
|
tuev: '',
|
|
letzterService: '',
|
|
serviceIntervall: '',
|
|
laenge: '',
|
|
breite: '',
|
|
hoehe: '',
|
|
leergewicht: '',
|
|
Gesamtgewicht: '',
|
|
achsen: '',
|
|
bereifung: '',
|
|
anhaengelast: '',
|
|
kuppellast: '',
|
|
antriebsart: '',
|
|
verbrauch: '',
|
|
co2: '',
|
|
umweltplakette: 'gruen',
|
|
lkwTyp: '',
|
|
aufbau: '',
|
|
lkwBordgeraet: false,
|
|
lkwHubwerk: false,
|
|
lkwLadebordwand: false,
|
|
lkwKlima: false,
|
|
lkwSchlafplatz: false,
|
|
lkwHydraulik: false,
|
|
art: '',
|
|
bsEinheit: 'h',
|
|
pkwKlasse: '',
|
|
pkwKarosserie: '',
|
|
pkwTueren: '',
|
|
pkwSitze: '',
|
|
pkwHubraum: '',
|
|
pkwAntrieb: '',
|
|
pkwVerbrauch: '',
|
|
pkwCo2: '',
|
|
pkwUmwelt: 'gruen',
|
|
pkwReifen: '',
|
|
pkwAusstattung: [],
|
|
staplerTrag: '',
|
|
staplerHubhoehe: '',
|
|
staplerBauhoehe: '',
|
|
staplerMast: '',
|
|
staplerAntrieb: 'Elektro',
|
|
staplerBatterieKwh: '',
|
|
staplerBatterieTyp: '',
|
|
staplerReifen: 'Superelastik',
|
|
staplerLastschwerpunkt: '500',
|
|
staplerFahrkomponente: 'Stapler',
|
|
kaufpreis: '',
|
|
mwst: '19',
|
|
provision: '',
|
|
lagerkosten: '',
|
|
transportkosten: '',
|
|
beschreibung: ''
|
|
});
|
|
const update = (f, v) => setForm({
|
|
...form,
|
|
[f]: v
|
|
});
|
|
const validate = () => {
|
|
const e = {};
|
|
if (!form.marke) e.marke = 'Pflicht';
|
|
if (!form.modell) e.modell = 'Pflicht';
|
|
if (!form.fin) e.fin = 'Pflicht';else if (form.fin.length !== 17) e.fin = '17 Zeichen';
|
|
if (!form.baujahr) e.baujahr = 'Pflicht';
|
|
if (!form.preis) e.preis = 'Pflicht';
|
|
setErrors(e);
|
|
return Object.keys(e).length === 0;
|
|
};
|
|
const handleSubmit = e => {
|
|
e.preventDefault();
|
|
if (!validate()) return;
|
|
setSaving(true);
|
|
setTimeout(() => {
|
|
setSaving(false);
|
|
navigate('/fahrzeuge');
|
|
}, 1000);
|
|
};
|
|
const handleOcr = () => {
|
|
setOcrLoading(true);
|
|
setTimeout(() => {
|
|
setOcrLoading(false);
|
|
setForm({
|
|
...form,
|
|
marke: 'Mercedes-Benz',
|
|
modell: 'Actros 1845 LS',
|
|
fin: 'WDB9066351L123456',
|
|
baujahr: '2019',
|
|
erstzulassung: '2019-03-15',
|
|
leistungKw: '330',
|
|
kraftstoff: 'Diesel',
|
|
farbe: 'Weiss',
|
|
abgasnorm: 'Euro 6',
|
|
hsn: '0911',
|
|
tsn: 'AAM'
|
|
});
|
|
}, 2000);
|
|
};
|
|
const formTabs = [{
|
|
id: 'allgemein',
|
|
label: 'Allgemein',
|
|
icon: 'tag'
|
|
}, {
|
|
id: 'technisch',
|
|
label: 'Technische Daten',
|
|
icon: 'wrench'
|
|
}, {
|
|
id: 'abmessungen',
|
|
label: 'Abmessungen',
|
|
icon: 'package'
|
|
}, ...(typ === 'pkw' ? [{
|
|
id: 'pkw',
|
|
label: 'PKW',
|
|
icon: 'car'
|
|
}] : []), ...(typ === 'lkw' ? [{
|
|
id: 'lkw',
|
|
label: 'LKW',
|
|
icon: 'truck'
|
|
}] : []), ...(typ === 'baumaschine' ? [{
|
|
id: 'baumaschine',
|
|
label: 'Baumaschine',
|
|
icon: 'wrench'
|
|
}] : []), ...(typ === 'stapler' ? [{
|
|
id: 'stapler',
|
|
label: 'Stapler',
|
|
icon: 'forklift'
|
|
}] : []), {
|
|
id: 'preise',
|
|
label: 'Preise & Kosten',
|
|
icon: 'euro'
|
|
}, {
|
|
id: 'bilder',
|
|
label: 'Bilder',
|
|
icon: 'image'
|
|
}, {
|
|
id: 'dokumente',
|
|
label: 'Dokumente',
|
|
icon: 'doc'
|
|
}, {
|
|
id: 'mobilede',
|
|
label: 'mobile.de',
|
|
icon: 'external'
|
|
}];
|
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'var(--space-4)',
|
|
marginBottom: 'var(--space-6)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
variant: "ghost",
|
|
icon: "chevronLeft",
|
|
onClick: () => navigate('/fahrzeuge')
|
|
}, t('fd.zurueck')), /*#__PURE__*/React.createElement("h1", {
|
|
style: {
|
|
fontSize: 'var(--font-size-2xl)',
|
|
fontWeight: 'var(--font-weight-bold)'
|
|
}
|
|
}, t(editId ? 'ff.titel_bearbeiten' : 'ff.titel_neu'))), /*#__PURE__*/React.createElement(Card, {
|
|
title: "Fahrzeugtyp",
|
|
style: {
|
|
marginBottom: 'var(--space-6)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-2)',
|
|
flexWrap: 'wrap'
|
|
}
|
|
}, ['lkw', 'baumaschine', 'pkw', 'stapler', 'transporter'].map(o => /*#__PURE__*/React.createElement("button", {
|
|
key: o,
|
|
type: "button",
|
|
className: `btn ${typ === o ? 'btn-primary' : 'btn-secondary'}`,
|
|
onClick: () => setTyp(o)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: typIcon(o),
|
|
size: 16
|
|
}), " ", typLabel(o))))), /*#__PURE__*/React.createElement(Card, {
|
|
title: t('ff.ocr_upload'),
|
|
style: {
|
|
marginBottom: 'var(--space-6)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
fontSize: 'var(--font-size-sm)',
|
|
color: 'var(--color-text-secondary)',
|
|
marginBottom: 'var(--space-4)'
|
|
}
|
|
}, t('ff.ocr_text')), /*#__PURE__*/React.createElement("div", {
|
|
className: "dropzone",
|
|
onClick: handleOcr
|
|
}, ocrLoading ? /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: 'var(--space-3)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "spinner spinner-lg"
|
|
}), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
fontSize: 'var(--font-size-sm)'
|
|
}
|
|
}, "OCR laeuft... Qwen2.5-VL")) : /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: 'var(--space-2)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "camera",
|
|
size: 48,
|
|
style: {
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-medium)'
|
|
}
|
|
}, "ZB I / ZB II hier klicken"), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
size: "sm",
|
|
icon: "sparkles",
|
|
style: {
|
|
marginTop: 'var(--space-2)'
|
|
}
|
|
}, t('ff.ocr_ausloesen'))))), /*#__PURE__*/React.createElement("form", {
|
|
onSubmit: handleSubmit
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "form-tabs"
|
|
}, formTabs.map(tab => /*#__PURE__*/React.createElement("div", {
|
|
key: tab.id,
|
|
className: `form-tab ${activeFormTab === tab.id ? 'active' : ''}`,
|
|
onClick: () => setActiveFormTab(tab.id)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: tab.icon,
|
|
size: 16
|
|
}), " ", tab.label))), activeFormTab === 'allgemein' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Allgemein"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "three-col"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Marke * ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "D.1"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: `input ${errors.marke ? 'input-error' : ''}`,
|
|
value: form.marke,
|
|
onChange: e => update('marke', e.target.value)
|
|
}), errors.marke && /*#__PURE__*/React.createElement("div", {
|
|
className: "form-error"
|
|
}, errors.marke)), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Modell * ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "D.3"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: `input ${errors.modell ? 'input-error' : ''}`,
|
|
value: form.modell,
|
|
onChange: e => update('modell', e.target.value)
|
|
}), errors.modell && /*#__PURE__*/React.createElement("div", {
|
|
className: "form-error"
|
|
}, errors.modell)), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "FIN * ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "E"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: `input ${errors.fin ? 'input-error' : ''}`,
|
|
value: form.fin,
|
|
onChange: e => update('fin', e.target.value),
|
|
maxLength: 17,
|
|
style: {
|
|
fontFamily: 'var(--font-mono)'
|
|
}
|
|
}), errors.fin && /*#__PURE__*/React.createElement("div", {
|
|
className: "form-error"
|
|
}, errors.fin)), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Baujahr *"), /*#__PURE__*/React.createElement("input", {
|
|
className: `input ${errors.baujahr ? 'input-error' : ''}`,
|
|
type: "number",
|
|
value: form.baujahr,
|
|
onChange: e => update('baujahr', e.target.value)
|
|
}), errors.baujahr && /*#__PURE__*/React.createElement("div", {
|
|
className: "form-error"
|
|
}, errors.baujahr)), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Erstzulassung ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "B"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "date",
|
|
value: form.erstzulassung,
|
|
onChange: e => update('erstzulassung', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Farbe ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "R"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
value: form.farbe,
|
|
onChange: e => update('farbe', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Zustand"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.zustand,
|
|
onChange: e => update('zustand', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", null, "Neu"), /*#__PURE__*/React.createElement("option", null, "Gebraucht"), /*#__PURE__*/React.createElement("option", null, "Jahreswagen"), /*#__PURE__*/React.createElement("option", null, "Unfallfahrzeug"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Standort"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
value: form.standort,
|
|
onChange: e => update('standort', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "HSN ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(2.1)"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
value: form.hsn,
|
|
onChange: e => update('hsn', e.target.value),
|
|
placeholder: "0911",
|
|
style: {
|
|
fontFamily: 'var(--font-mono)'
|
|
}
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "TSN ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(2.2)"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
value: form.tsn,
|
|
onChange: e => update('tsn', e.target.value),
|
|
placeholder: "AAM",
|
|
style: {
|
|
fontFamily: 'var(--font-mono)'
|
|
}
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "EG-Typgenehmigung ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "K"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
value: form.egTyp,
|
|
onChange: e => update('egTyp', e.target.value),
|
|
style: {
|
|
fontFamily: 'var(--font-mono)',
|
|
fontSize: 'var(--font-size-xs)'
|
|
}
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Vorbesitzer"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.vorbesitzer,
|
|
onChange: e => update('vorbesitzer', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Unfallschaeden"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.unfallschaeden,
|
|
onChange: e => update('unfallschaeden', e.target.value === 'true')
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "false"
|
|
}, "Nein"), /*#__PURE__*/React.createElement("option", {
|
|
value: "true"
|
|
}, "Ja"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "TUeV/AU gueltig bis"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
value: form.tuev,
|
|
onChange: e => update('tuev', e.target.value),
|
|
placeholder: "03.2027"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Letzter Service"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
value: form.letzterService,
|
|
onChange: e => update('letzterService', e.target.value),
|
|
placeholder: "01.2026"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Service-Intervall (km)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.serviceIntervall,
|
|
onChange: e => update('serviceIntervall', e.target.value),
|
|
placeholder: "150000"
|
|
})))), activeFormTab === 'technisch' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Technische Daten"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "three-col"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Leistung (kW) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "P.2"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.leistungKw,
|
|
onChange: e => update('leistungKw', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Leistung (PS)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.leistungPs,
|
|
onChange: e => update('leistungPs', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Hubraum (ccm) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "P.1"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.hubraum,
|
|
onChange: e => update('hubraum', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Kraftstoff ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "P.3"
|
|
})), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.kraftstoff,
|
|
onChange: e => update('kraftstoff', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", null, "Diesel"), /*#__PURE__*/React.createElement("option", null, "Benzin"), /*#__PURE__*/React.createElement("option", null, "Elektro"), /*#__PURE__*/React.createElement("option", null, "Hybrid"), /*#__PURE__*/React.createElement("option", null, "Gas (CNG/LPG)"), /*#__PURE__*/React.createElement("option", null, "Wasserstoff"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Getriebe"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.getriebe,
|
|
onChange: e => update('getriebe', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", null, "Manuell"), /*#__PURE__*/React.createElement("option", null, "Automatik"), /*#__PURE__*/React.createElement("option", null, "DSG"), /*#__PURE__*/React.createElement("option", null, "Hydrostat"), /*#__PURE__*/React.createElement("option", null, "Stufenlos"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Antriebsart"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.antriebsart,
|
|
onChange: e => update('antriebsart', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: ""
|
|
}, "--"), /*#__PURE__*/React.createElement("option", null, "Frontantrieb"), /*#__PURE__*/React.createElement("option", null, "Heckantrieb"), /*#__PURE__*/React.createElement("option", null, "Allrad"), /*#__PURE__*/React.createElement("option", null, "4x4"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Abgasnorm"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.abgasnorm,
|
|
onChange: e => update('abgasnorm', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", null, "Euro 6"), /*#__PURE__*/React.createElement("option", null, "Euro 5"), /*#__PURE__*/React.createElement("option", null, "Euro 4"), /*#__PURE__*/React.createElement("option", null, "Euro 3"), /*#__PURE__*/React.createElement("option", null, "Euro 2"), /*#__PURE__*/React.createElement("option", null, "Euro 1"), /*#__PURE__*/React.createElement("option", null, "Keine"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Verbrauch (l/100km)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
step: "0.1",
|
|
value: form.verbrauch,
|
|
onChange: e => update('verbrauch', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "CO2 (g/km) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "V.7"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.co2,
|
|
onChange: e => update('co2', e.target.value)
|
|
})), (typ === 'lkw' || typ === 'transporter' || typ === 'pkw') && /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "KM-Stand"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.kmStand,
|
|
onChange: e => update('kmStand', e.target.value)
|
|
})), (typ === 'baumaschine' || typ === 'stapler') && /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Betriebsstunden"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.betriebsstunden,
|
|
onChange: e => update('betriebsstunden', e.target.value)
|
|
})))), activeFormTab === 'abmessungen' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Abmessungen & Gewichte"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "three-col"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Laenge (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(18)"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.laenge,
|
|
onChange: e => update('laenge', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Breite (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(19)"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.breite,
|
|
onChange: e => update('breite', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Hoehe (mm) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(20)"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.hoehe,
|
|
onChange: e => update('hoehe', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Leergewicht (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "G"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.leergewicht,
|
|
onChange: e => update('leergewicht', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Gesamtgewicht (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "F.1"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.Gesamtgewicht,
|
|
onChange: e => update('Gesamtgewicht', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Achsen ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "L"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.achsen,
|
|
onChange: e => update('achsen', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Bereifung ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(15)"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
value: form.bereifung,
|
|
onChange: e => update('bereifung', e.target.value),
|
|
placeholder: "315/70 R22.5"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Anhaengelast (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "O.1"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.anhaengelast,
|
|
onChange: e => update('anhaengelast', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Kuppelast (kg) ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "(13)"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.kuppellast,
|
|
onChange: e => update('kuppellast', e.target.value)
|
|
})))), activeFormTab === 'pkw' && typ === 'pkw' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "PKW-spezifische Daten"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "three-col"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Fahrzeugklasse ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "J"
|
|
})), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.pkwKlasse,
|
|
onChange: e => update('pkwKlasse', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: ""
|
|
}, "--"), /*#__PURE__*/React.createElement("option", null, "Kleinwagen"), /*#__PURE__*/React.createElement("option", null, "Kompaktklasse"), /*#__PURE__*/React.createElement("option", null, "Mittelklasse"), /*#__PURE__*/React.createElement("option", null, "Oberklasse"), /*#__PURE__*/React.createElement("option", null, "Luxusklasse"), /*#__PURE__*/React.createElement("option", null, "Gelaendewagen"), /*#__PURE__*/React.createElement("option", null, "Van"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Karosserieform"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.pkwKarosserie,
|
|
onChange: e => update('pkwKarosserie', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: ""
|
|
}, "--"), /*#__PURE__*/React.createElement("option", null, "Limousine"), /*#__PURE__*/React.createElement("option", null, "Kombi"), /*#__PURE__*/React.createElement("option", null, "Hatchback"), /*#__PURE__*/React.createElement("option", null, "Coupé"), /*#__PURE__*/React.createElement("option", null, "Cabrio"), /*#__PURE__*/React.createElement("option", null, "SUV"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Tueren"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.pkwTueren,
|
|
onChange: e => update('pkwTueren', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: ""
|
|
}, "--"), /*#__PURE__*/React.createElement("option", null, "2"), /*#__PURE__*/React.createElement("option", null, "3"), /*#__PURE__*/React.createElement("option", null, "4"), /*#__PURE__*/React.createElement("option", null, "5"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Sitzplaetze ", /*#__PURE__*/React.createElement(ZBRef, {
|
|
field: "S.1"
|
|
})), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.pkwSitze,
|
|
onChange: e => update('pkwSitze', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: ""
|
|
}, "--"), /*#__PURE__*/React.createElement("option", null, "2"), /*#__PURE__*/React.createElement("option", null, "4"), /*#__PURE__*/React.createElement("option", null, "5"), /*#__PURE__*/React.createElement("option", null, "7"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Hubraum (ccm)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.pkwHubraum,
|
|
onChange: e => update('pkwHubraum', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Antriebsart"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.pkwAntrieb,
|
|
onChange: e => update('pkwAntrieb', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: ""
|
|
}, "--"), /*#__PURE__*/React.createElement("option", null, "Frontantrieb"), /*#__PURE__*/React.createElement("option", null, "Heckantrieb"), /*#__PURE__*/React.createElement("option", null, "Allrad"), /*#__PURE__*/React.createElement("option", null, "4x4"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Verbrauch (l/100km)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
step: "0.1",
|
|
value: form.pkwVerbrauch,
|
|
onChange: e => update('pkwVerbrauch', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "CO2 (g/km)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.pkwCo2,
|
|
onChange: e => update('pkwCo2', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Umweltplakette"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.pkwUmwelt,
|
|
onChange: e => update('pkwUmwelt', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "gruen"
|
|
}, "Gruen"), /*#__PURE__*/React.createElement("option", {
|
|
value: "gelb"
|
|
}, "Gelb"), /*#__PURE__*/React.createElement("option", {
|
|
value: "rot"
|
|
}, "Rot"), /*#__PURE__*/React.createElement("option", {
|
|
value: "keine"
|
|
}, "Keine"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Reifengroesse"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
value: form.pkwReifen,
|
|
onChange: e => update('pkwReifen', e.target.value),
|
|
placeholder: "275/45 R20"
|
|
})))), activeFormTab === 'lkw' && typ === 'lkw' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "LKW-spezifische Daten"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "three-col"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "LKW-Typ"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.lkwTyp,
|
|
onChange: e => update('lkwTyp', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: ""
|
|
}, "--"), /*#__PURE__*/React.createElement("option", null, "Sattelzugmaschine"), /*#__PURE__*/React.createElement("option", null, "Solo-LKW"), /*#__PURE__*/React.createElement("option", null, "Kastenwagen"), /*#__PURE__*/React.createElement("option", null, "Pritsche"), /*#__PURE__*/React.createElement("option", null, "Tieflader"), /*#__PURE__*/React.createElement("option", null, "Kipper"), /*#__PURE__*/React.createElement("option", null, "Silo"), /*#__PURE__*/React.createElement("option", null, "Kuehlwagen"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Aufbau"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
value: form.aufbau,
|
|
onChange: e => update('aufbau', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Bordgeraet"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.lkwBordgeraet,
|
|
onChange: e => update('lkwBordgeraet', e.target.value === 'true')
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "false"
|
|
}, "Nein"), /*#__PURE__*/React.createElement("option", {
|
|
value: "true"
|
|
}, "Ja"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Hubwerk"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.lkwHubwerk,
|
|
onChange: e => update('lkwHubwerk', e.target.value === 'true')
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "false"
|
|
}, "Nein"), /*#__PURE__*/React.createElement("option", {
|
|
value: "true"
|
|
}, "Ja"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Ladebordwand"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.lkwLadebordwand,
|
|
onChange: e => update('lkwLadebordwand', e.target.value === 'true')
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "false"
|
|
}, "Nein"), /*#__PURE__*/React.createElement("option", {
|
|
value: "true"
|
|
}, "Ja"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Klimaanlage"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.lkwKlima,
|
|
onChange: e => update('lkwKlima', e.target.value === 'true')
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "false"
|
|
}, "Nein"), /*#__PURE__*/React.createElement("option", {
|
|
value: "true"
|
|
}, "Ja"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Schlafplatz"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.lkwSchlafplatz,
|
|
onChange: e => update('lkwSchlafplatz', e.target.value === 'true')
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "false"
|
|
}, "Nein"), /*#__PURE__*/React.createElement("option", {
|
|
value: "true"
|
|
}, "Ja"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Hydraulische Anlage"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.lkwHydraulik,
|
|
onChange: e => update('lkwHydraulik', e.target.value === 'true')
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "false"
|
|
}, "Nein"), /*#__PURE__*/React.createElement("option", {
|
|
value: "true"
|
|
}, "Ja"))))), activeFormTab === 'baumaschine' && typ === 'baumaschine' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Baumaschinen-spezifische Daten"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "three-col"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Art"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.art,
|
|
onChange: e => update('art', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: ""
|
|
}, "--"), /*#__PURE__*/React.createElement("option", null, "Bagger"), /*#__PURE__*/React.createElement("option", null, "Radlader"), /*#__PURE__*/React.createElement("option", null, "Kran"), /*#__PURE__*/React.createElement("option", null, "Walze"), /*#__PURE__*/React.createElement("option", null, "Bulldozer"), /*#__PURE__*/React.createElement("option", null, "Teleskoplader"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Einheit"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.bsEinheit,
|
|
onChange: e => update('bsEinheit', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "h"
|
|
}, "Stunden (h)"), /*#__PURE__*/React.createElement("option", {
|
|
value: "min"
|
|
}, "Minuten (min)"))))), activeFormTab === 'stapler' && typ === 'stapler' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Stapler-spezifische Daten"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "three-col"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Tragfaehigkeit (kg)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.staplerTrag,
|
|
onChange: e => update('staplerTrag', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Hubhoehe (mm)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.staplerHubhoehe,
|
|
onChange: e => update('staplerHubhoehe', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Bauhoehe (mm)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.staplerBauhoehe,
|
|
onChange: e => update('staplerBauhoehe', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Masttyp"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.staplerMast,
|
|
onChange: e => update('staplerMast', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: ""
|
|
}, "--"), /*#__PURE__*/React.createElement("option", null, "Dreisteg"), /*#__PURE__*/React.createElement("option", null, "Zweisteg"), /*#__PURE__*/React.createElement("option", null, "Scherenmast"), /*#__PURE__*/React.createElement("option", null, "Teleskopmast"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Antriebsart"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.staplerAntrieb,
|
|
onChange: e => update('staplerAntrieb', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", null, "Elektro"), /*#__PURE__*/React.createElement("option", null, "Diesel"), /*#__PURE__*/React.createElement("option", null, "Gas"), /*#__PURE__*/React.createElement("option", null, "Benzin"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Batteriekapazitaet (kWh)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
step: "0.1",
|
|
value: form.staplerBatterieKwh,
|
|
onChange: e => update('staplerBatterieKwh', e.target.value),
|
|
disabled: form.staplerAntrieb !== 'Elektro'
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Batterietyp"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.staplerBatterieTyp,
|
|
onChange: e => update('staplerBatterieTyp', e.target.value),
|
|
disabled: form.staplerAntrieb !== 'Elektro'
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: ""
|
|
}, "--"), /*#__PURE__*/React.createElement("option", null, "Blei-Saeure"), /*#__PURE__*/React.createElement("option", null, "Lithium-Ion"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Reifenart"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.staplerReifen,
|
|
onChange: e => update('staplerReifen', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", null, "Superelastik"), /*#__PURE__*/React.createElement("option", null, "Vollgummi"), /*#__PURE__*/React.createElement("option", null, "Luftreifen"), /*#__PURE__*/React.createElement("option", null, "Polyurethan"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Lastschwerpunkt (mm)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.staplerLastschwerpunkt,
|
|
onChange: e => update('staplerLastschwerpunkt', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Fahrkomponente"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.staplerFahrkomponente,
|
|
onChange: e => update('staplerFahrkomponente', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", null, "Stapler"), /*#__PURE__*/React.createElement("option", null, "Radlader"), /*#__PURE__*/React.createElement("option", null, "Teleskoplader"), /*#__PURE__*/React.createElement("option", null, "Hubwagen"), /*#__PURE__*/React.createElement("option", null, "Kommissionierer"))))), activeFormTab === 'preise' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Preise & Kosten"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "three-col"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Verkaufspreis (€) *"), /*#__PURE__*/React.createElement("input", {
|
|
className: `input ${errors.preis ? 'input-error' : ''}`,
|
|
type: "number",
|
|
value: form.preis,
|
|
onChange: e => update('preis', e.target.value)
|
|
}), errors.preis && /*#__PURE__*/React.createElement("div", {
|
|
className: "form-error"
|
|
}, errors.preis)), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Kaufpreis (€)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.kaufpreis,
|
|
onChange: e => update('kaufpreis', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "MwSt-Satz"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: form.mwst,
|
|
onChange: e => update('mwst', e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "19"
|
|
}, "19%"), /*#__PURE__*/React.createElement("option", {
|
|
value: "7"
|
|
}, "7%"), /*#__PURE__*/React.createElement("option", {
|
|
value: "0"
|
|
}, "0% (steuerfrei)"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Provision (€)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.provision,
|
|
onChange: e => update('provision', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Lagerkosten (€/Monat)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.lagerkosten,
|
|
onChange: e => update('lagerkosten', e.target.value)
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Transportkosten (€)"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
type: "number",
|
|
value: form.transportkosten,
|
|
onChange: e => update('transportkosten', e.target.value)
|
|
})))), activeFormTab === 'bilder' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Fotos"
|
|
}, /*#__PURE__*/React.createElement(ImageManager, {
|
|
photos: photos,
|
|
setPhotos: setPhotos,
|
|
role: "admin"
|
|
})), activeFormTab === 'dokumente' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Dokumente"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "dropzone",
|
|
style: {
|
|
marginBottom: 'var(--space-4)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "upload",
|
|
size: 48,
|
|
style: {
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-medium)'
|
|
}
|
|
}, "Dokumente hochladen"), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}, "ZB I, ZB II, TUeV, Vertrag, Rechnung · PDF/JPG · max 50 MB"), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
marginTop: 'var(--space-3)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "file-input-wrapper"
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
size: "sm",
|
|
icon: "doc"
|
|
}, "Datei auswaehlen"), /*#__PURE__*/React.createElement("input", {
|
|
type: "file",
|
|
multiple: true,
|
|
accept: ".pdf,image/*"
|
|
}))))), activeFormTab === 'mobilede' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "mobile.de Listing"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Listing-Status"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select"
|
|
}, /*#__PURE__*/React.createElement("option", null, "Entwurf"), /*#__PURE__*/React.createElement("option", null, "Gelistet"), /*#__PURE__*/React.createElement("option", null, "Nicht gelistet"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Beschreibung (fuer mobile.de)"), /*#__PURE__*/React.createElement("textarea", {
|
|
className: "textarea",
|
|
rows: 4,
|
|
value: form.beschreibung,
|
|
onChange: e => update('beschreibung', e.target.value),
|
|
placeholder: "Top gepflegter LKW, 1. Hand..."
|
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-3)',
|
|
justifyContent: 'flex-end',
|
|
marginTop: 'var(--space-6)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
variant: "secondary",
|
|
onClick: () => navigate('/fahrzeuge')
|
|
}, t('ff.abbrechen')), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: saving ? undefined : 'check',
|
|
type: "submit",
|
|
disabled: saving
|
|
}, saving ? t('common.laden') : t('ff.speichern')))));
|
|
};
|
|
|
|
// ============ KONTAKTE ============
|
|
const KontakteListe = ({
|
|
navigate,
|
|
role
|
|
}) => {
|
|
const [tab, setTab] = useState('kunden');
|
|
const [search, setSearch] = useState('');
|
|
const [view, setView] = useState('table');
|
|
const data = tab === 'kunden' ? mockContactsKaeufer : mockContactsVerkaeufer;
|
|
const filtered = data.filter(c => !search || c.firmenname.toLowerCase().includes(search.toLowerCase()) || c.ansprechpartner.toLowerCase().includes(search.toLowerCase()));
|
|
const ustBadge = s => {
|
|
const m = {
|
|
geprueft: {
|
|
v: 'success',
|
|
l: t('kt.geprueft')
|
|
},
|
|
ungeprueft: {
|
|
v: 'warning',
|
|
l: t('kt.ungeprueft')
|
|
},
|
|
manuell_best: {
|
|
v: 'info',
|
|
l: t('kt.manuell_best')
|
|
}
|
|
};
|
|
const c = m[s] || m.ungeprueft;
|
|
return /*#__PURE__*/React.createElement(Badge, {
|
|
variant: c.v
|
|
}, c.l);
|
|
};
|
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 'var(--space-6)',
|
|
flexWrap: 'wrap',
|
|
gap: 'var(--space-4)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
|
|
style: {
|
|
fontSize: 'var(--font-size-2xl)',
|
|
fontWeight: 'var(--font-weight-bold)'
|
|
}
|
|
}, t('kt.title')), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
color: 'var(--color-text-secondary)',
|
|
fontSize: 'var(--font-size-sm)'
|
|
}
|
|
}, filtered.length, " ", t('common.eintraege'))), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-2)',
|
|
alignItems: 'center'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(ViewToggle, {
|
|
view: view,
|
|
onChange: setView
|
|
}), role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "plus"
|
|
}, t('kt.add_new')))), /*#__PURE__*/React.createElement("div", {
|
|
className: "subtabs"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: `subtab ${tab === 'kunden' ? 'active' : ''}`,
|
|
onClick: () => {
|
|
setTab('kunden');
|
|
setSearch('');
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "shopping",
|
|
size: 16
|
|
}), " Kunden"), /*#__PURE__*/React.createElement("div", {
|
|
className: `subtab ${tab === 'lieferanten' ? 'active' : ''}`,
|
|
onClick: () => {
|
|
setTab('lieferanten');
|
|
setSearch('');
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "briefcase",
|
|
size: 16
|
|
}), " Lieferanten")), /*#__PURE__*/React.createElement(Card, {
|
|
style: {
|
|
marginBottom: 'var(--space-4)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-4)',
|
|
flexWrap: 'wrap',
|
|
alignItems: 'flex-end'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
flex: '1 1 300px'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, t('common.suchen')), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
position: 'relative'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "search",
|
|
size: 16,
|
|
style: {
|
|
position: 'absolute',
|
|
left: 'var(--space-3)',
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
style: {
|
|
paddingLeft: 'var(--space-8)'
|
|
},
|
|
placeholder: t('kt.suche'),
|
|
value: search,
|
|
onChange: e => setSearch(e.target.value)
|
|
}))))), filtered.length === 0 ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(EmptyState, {
|
|
icon: "contacts",
|
|
title: "Keine Kontakte",
|
|
text: "Noch keine Kontakte angelegt."
|
|
})) : view === 'table' ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
overflowX: 'auto'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "data-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Firma"), /*#__PURE__*/React.createElement("th", null, "Ansprechpartner"), /*#__PURE__*/React.createElement("th", {
|
|
className: "hide-mobile"
|
|
}, "Land"), /*#__PURE__*/React.createElement("th", {
|
|
className: "hide-mobile"
|
|
}, "USt-IdNr."), /*#__PURE__*/React.createElement("th", {
|
|
className: "hide-mobile"
|
|
}, "Status"), /*#__PURE__*/React.createElement("th", null, "Aktion"))), /*#__PURE__*/React.createElement("tbody", null, filtered.map(c => /*#__PURE__*/React.createElement("tr", {
|
|
key: c.id
|
|
}, /*#__PURE__*/React.createElement("td", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-semibold)'
|
|
}
|
|
}, c.firmenname), /*#__PURE__*/React.createElement("td", null, c.ansprechpartner), /*#__PURE__*/React.createElement("td", {
|
|
className: "hide-mobile"
|
|
}, c.land), /*#__PURE__*/React.createElement("td", {
|
|
className: "hide-mobile",
|
|
style: {
|
|
fontFamily: 'var(--font-mono)',
|
|
fontSize: 'var(--font-size-xs)'
|
|
}
|
|
}, c.ustId || '-'), /*#__PURE__*/React.createElement("td", {
|
|
className: "hide-mobile"
|
|
}, ustBadge(c.ustStatus)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-1)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "eye",
|
|
size: 16
|
|
})), role !== 'buchhaltung' && /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "edit",
|
|
size: 16
|
|
})))))))))) : /*#__PURE__*/React.createElement("div", {
|
|
className: "card-grid"
|
|
}, filtered.map(c => /*#__PURE__*/React.createElement("div", {
|
|
key: c.id,
|
|
className: "contact-card"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "contact-card-header"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 'var(--radius-md)',
|
|
background: tab === 'kunden' ? 'var(--color-primary-light)' : 'var(--color-info-light)',
|
|
color: tab === 'kunden' ? 'var(--color-primary)' : 'var(--color-info)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: tab === 'kunden' ? 'shopping' : 'briefcase',
|
|
size: 20
|
|
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
className: "contact-card-name"
|
|
}, c.firmenname), /*#__PURE__*/React.createElement("div", {
|
|
className: "contact-card-person"
|
|
}, c.ansprechpartner))), /*#__PURE__*/React.createElement("div", {
|
|
className: "contact-card-info"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "contact-card-info-item"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "location",
|
|
size: 14
|
|
}), " ", c.land), /*#__PURE__*/React.createElement("div", {
|
|
className: "contact-card-info-item"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "mail",
|
|
size: 14
|
|
}), " ", c.email), /*#__PURE__*/React.createElement("div", {
|
|
className: "contact-card-info-item"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "phone",
|
|
size: 14
|
|
}), " ", c.telefon))))));
|
|
};
|
|
|
|
// ============ VERKAUFSMODUL (v7 list first) ============
|
|
const mockVerkaeufe = [{
|
|
id: 1,
|
|
fahrzeug: 'Mercedes Actros 1845 LS',
|
|
fin: 'WDB9066351L123456',
|
|
kunde: 'Mueller Transport GmbH',
|
|
datum: '2026-07-05',
|
|
betrag: 45000,
|
|
status: 'abgeschlossen',
|
|
mwstTyp: 'inland',
|
|
steuer: 8550,
|
|
gesamt: 53550
|
|
}, {
|
|
id: 2,
|
|
fahrzeug: 'MAN TGL 12.180',
|
|
fin: 'WMAUYYT1XPA123456',
|
|
kunde: 'Bauer Bauunternehmen GmbH',
|
|
datum: '2026-07-10',
|
|
betrag: 29500,
|
|
status: 'pruefung',
|
|
mwstTyp: 'inland',
|
|
steuer: 5605,
|
|
gesamt: 35105
|
|
}, {
|
|
id: 3,
|
|
fahrzeug: 'BMW X5 xDrive30d',
|
|
fin: 'WBAJA9C50K8123456',
|
|
kunde: 'Van den Berg Logistics B.V.',
|
|
datum: '2026-07-08',
|
|
betrag: 52000,
|
|
status: 'entwurf',
|
|
mwstTyp: 'eu_ausland',
|
|
steuer: 0,
|
|
gesamt: 52000
|
|
}, {
|
|
id: 4,
|
|
fahrzeug: 'Volvo FH16 750',
|
|
fin: 'YV2XK0DG5LA123456',
|
|
kunde: 'Spedition Hartmann KG',
|
|
datum: '2026-06-28',
|
|
betrag: 55000,
|
|
status: 'abgeschlossen',
|
|
mwstTyp: 'inland',
|
|
steuer: 10450,
|
|
gesamt: 65450
|
|
}, {
|
|
id: 5,
|
|
fahrzeug: 'Scania R 500 Highline',
|
|
fin: 'SCNR5002019123456',
|
|
kunde: 'Mueller Transport GmbH',
|
|
datum: '2026-07-12',
|
|
betrag: 38000,
|
|
status: 'entwurf',
|
|
mwstTyp: 'inland',
|
|
steuer: 7220,
|
|
gesamt: 45220
|
|
}, {
|
|
id: 6,
|
|
fahrzeug: 'Liebherr R 926',
|
|
fin: 'LIR92620201234567',
|
|
kunde: 'Bauer Bauunternehmen GmbH',
|
|
datum: '2026-06-20',
|
|
betrag: 89000,
|
|
status: 'storniert',
|
|
mwstTyp: 'inland',
|
|
steuer: 16910,
|
|
gesamt: 105910
|
|
}, {
|
|
id: 7,
|
|
fahrzeug: 'Toyota 8FBE20',
|
|
fin: 'TOY8FBE20220123456',
|
|
kunde: 'Schmidt Baumaschinen GmbH',
|
|
datum: '2026-07-01',
|
|
betrag: 18500,
|
|
status: 'abgeschlossen',
|
|
mwstTyp: 'inland',
|
|
steuer: 3515,
|
|
gesamt: 22015
|
|
}];
|
|
const verkaufStatusBadge = s => {
|
|
const m = {
|
|
entwurf: {
|
|
cls: 'verkauf-status-entwurf',
|
|
l: 'Entwurf'
|
|
},
|
|
pruefung: {
|
|
cls: 'verkauf-status-pruefung',
|
|
l: 'Pruefung'
|
|
},
|
|
abgeschlossen: {
|
|
cls: 'verkauf-status-abgeschlossen',
|
|
l: 'Abgeschlossen'
|
|
},
|
|
storniert: {
|
|
cls: 'verkauf-status-storniert',
|
|
l: 'Storniert'
|
|
}
|
|
};
|
|
const c = m[s] || m.entwurf;
|
|
return /*#__PURE__*/React.createElement("span", {
|
|
className: `verkauf-status-badge ${c.cls}`
|
|
}, c.l);
|
|
};
|
|
const mwstTypLabel = t => t === 'inland' ? 'Inland' : t === 'eu_ausland' ? 'EU-Ausland' : 'Drittland';
|
|
const VerkaufsModul = ({
|
|
navigate,
|
|
role,
|
|
preselectVehicle
|
|
}) => {
|
|
const [viewMode, setViewMode] = useState('list');
|
|
const [view, setView] = useState('table');
|
|
const [search, setSearch] = useState('');
|
|
const [filterStatus, setFilterStatus] = useState('alle');
|
|
const [sortBy, setSortBy] = useState('datum');
|
|
const [sortDir, setSortDir] = useState('desc');
|
|
const [showWizard, setShowWizard] = useState(false);
|
|
const [detailId, setDetailId] = useState(null);
|
|
const filtered = useMemo(() => {
|
|
let r = mockVerkaeufe.filter(v => {
|
|
const ms = !search || v.fahrzeug.toLowerCase().includes(search.toLowerCase()) || v.kunde.toLowerCase().includes(search.toLowerCase()) || v.fin.toLowerCase().includes(search.toLowerCase());
|
|
const mst = filterStatus === 'alle' || v.status === filterStatus;
|
|
return ms && mst;
|
|
});
|
|
r.sort((a, b) => {
|
|
const av = a[sortBy],
|
|
bv = b[sortBy];
|
|
if (typeof av === 'number') return sortDir === 'asc' ? av - bv : bv - av;
|
|
return sortDir === 'asc' ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
|
|
});
|
|
return r;
|
|
}, [search, filterStatus, sortBy, sortDir]);
|
|
const handleSort = col => {
|
|
if (sortBy === col) setSortDir(sortDir === 'asc' ? 'desc' : 'asc');else {
|
|
setSortBy(col);
|
|
setSortDir('asc');
|
|
}
|
|
};
|
|
if (showWizard) return /*#__PURE__*/React.createElement(VerkaufWizard, {
|
|
navigate: navigate,
|
|
role: role,
|
|
preselectVehicle: preselectVehicle,
|
|
onClose: () => setShowWizard(false)
|
|
});
|
|
if (detailId) return /*#__PURE__*/React.createElement(VerkaufDetail, {
|
|
verkauf: mockVerkaeufe.find(v => v.id === detailId),
|
|
onBack: () => setDetailId(null),
|
|
navigate: navigate
|
|
});
|
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 'var(--space-6)',
|
|
flexWrap: 'wrap',
|
|
gap: 'var(--space-4)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
|
|
style: {
|
|
fontSize: 'var(--font-size-2xl)',
|
|
fontWeight: 'var(--font-weight-bold)'
|
|
}
|
|
}, t('vk.title')), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
color: 'var(--color-text-secondary)',
|
|
fontSize: 'var(--font-size-sm)'
|
|
}
|
|
}, filtered.length, " Verkaeufe")), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-2)',
|
|
alignItems: 'center'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "view-toggle"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: `view-toggle-btn ${viewMode === 'list' ? 'active' : ''}`,
|
|
onClick: () => setViewMode('list')
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "list",
|
|
size: 16
|
|
}), " Liste"), /*#__PURE__*/React.createElement("button", {
|
|
className: `view-toggle-btn ${viewMode === 'calendar' ? 'active' : ''}`,
|
|
onClick: () => setViewMode('calendar')
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "calendar",
|
|
size: 16
|
|
}), " Kalender")), viewMode === 'list' && /*#__PURE__*/React.createElement(ViewToggle, {
|
|
view: view,
|
|
onChange: setView
|
|
}), role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "plus",
|
|
onClick: () => setShowWizard(true)
|
|
}, t('vk.neuer_verkauf')))), viewMode === 'calendar' ? /*#__PURE__*/React.createElement(VerkaufKalender, {
|
|
navigate: navigate
|
|
}) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card, {
|
|
style: {
|
|
marginBottom: 'var(--space-4)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: 'var(--space-4)',
|
|
flexWrap: 'wrap',
|
|
alignItems: 'flex-end'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
flex: '1 1 300px'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Suche (Fahrzeug, Kunde, FIN)"), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
position: 'relative'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "search",
|
|
size: 16,
|
|
style: {
|
|
position: 'absolute',
|
|
left: 'var(--space-3)',
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
style: {
|
|
paddingLeft: 'var(--space-8)'
|
|
},
|
|
placeholder: "Verkauf suchen...",
|
|
value: search,
|
|
onChange: e => setSearch(e.target.value)
|
|
}))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Status"), /*#__PURE__*/React.createElement("select", {
|
|
className: "select",
|
|
value: filterStatus,
|
|
onChange: e => setFilterStatus(e.target.value)
|
|
}, /*#__PURE__*/React.createElement("option", {
|
|
value: "alle"
|
|
}, "Alle"), /*#__PURE__*/React.createElement("option", {
|
|
value: "entwurf"
|
|
}, "Entwurf"), /*#__PURE__*/React.createElement("option", {
|
|
value: "pruefung"
|
|
}, "Pruefung"), /*#__PURE__*/React.createElement("option", {
|
|
value: "abgeschlossen"
|
|
}, "Abgeschlossen"), /*#__PURE__*/React.createElement("option", {
|
|
value: "storniert"
|
|
}, "Storniert"))))), filtered.length === 0 ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(EmptyState, {
|
|
icon: "sale",
|
|
title: "Keine Verkaeufe",
|
|
text: "Noch keine Verkaeufe angelegt.",
|
|
action: role !== 'buchhaltung' && /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "plus",
|
|
onClick: () => setShowWizard(true)
|
|
}, t('vk.neuer_verkauf'))
|
|
})) : view === 'table' ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
overflowX: 'auto'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "data-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
|
|
className: sortBy === 'fahrzeug' ? 'sorted' : '',
|
|
onClick: () => handleSort('fahrzeug')
|
|
}, "Fahrzeug"), /*#__PURE__*/React.createElement("th", null, "Kunde"), /*#__PURE__*/React.createElement("th", {
|
|
className: sortBy === 'datum' ? 'sorted' : '',
|
|
onClick: () => handleSort('datum')
|
|
}, "Datum"), /*#__PURE__*/React.createElement("th", {
|
|
className: sortBy === 'betrag' ? 'sorted' : '',
|
|
onClick: () => handleSort('betrag')
|
|
}, "Betrag"), /*#__PURE__*/React.createElement("th", null, "Status"), /*#__PURE__*/React.createElement("th", null, "MwSt-Typ"))), /*#__PURE__*/React.createElement("tbody", null, filtered.map(v => /*#__PURE__*/React.createElement("tr", {
|
|
key: v.id,
|
|
onClick: () => setDetailId(v.id),
|
|
style: {
|
|
cursor: 'pointer'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("td", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-semibold)'
|
|
}
|
|
}, v.fahrzeug), /*#__PURE__*/React.createElement("td", null, v.kunde), /*#__PURE__*/React.createElement("td", null, formatDate(v.datum)), /*#__PURE__*/React.createElement("td", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-semibold)'
|
|
}
|
|
}, formatPrice(v.betrag)), /*#__PURE__*/React.createElement("td", null, verkaufStatusBadge(v.status)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "info"
|
|
}, mwstTypLabel(v.mwstTyp))))))))) : /*#__PURE__*/React.createElement("div", {
|
|
className: "card-grid"
|
|
}, filtered.map(v => /*#__PURE__*/React.createElement("div", {
|
|
key: v.id,
|
|
className: "verkauf-card",
|
|
onClick: () => setDetailId(v.id)
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
marginBottom: 'var(--space-2)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-semibold)',
|
|
fontSize: 'var(--font-size-sm)'
|
|
}
|
|
}, v.fahrzeug), verkaufStatusBadge(v.status)), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-secondary)',
|
|
marginBottom: 'var(--space-2)'
|
|
}
|
|
}, v.kunde), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-bold)',
|
|
color: 'var(--color-primary)'
|
|
}
|
|
}, formatPrice(v.betrag)), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}, formatDate(v.datum), " · ", mwstTypLabel(v.mwstTyp))))))));
|
|
};
|
|
const VerkaufDetail = ({
|
|
verkauf,
|
|
onBack,
|
|
navigate
|
|
}) => {
|
|
const [activeTab, setActiveTab] = useState('uebersicht');
|
|
if (!verkauf) return null;
|
|
const tabs = [{
|
|
id: 'uebersicht',
|
|
label: 'Uebersicht'
|
|
}, {
|
|
id: 'dokumente',
|
|
label: 'Dokumente'
|
|
}, {
|
|
id: 'zahlung',
|
|
label: 'Zahlungsverlauf'
|
|
}, {
|
|
id: 'termine',
|
|
label: 'Termine'
|
|
}];
|
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'var(--space-4)',
|
|
marginBottom: 'var(--space-6)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
variant: "ghost",
|
|
icon: "chevronLeft",
|
|
onClick: onBack
|
|
}, "Zurueck"), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
flex: 1
|
|
}
|
|
}, /*#__PURE__*/React.createElement("h1", {
|
|
style: {
|
|
fontSize: 'var(--font-size-2xl)',
|
|
fontWeight: 'var(--font-weight-bold)'
|
|
}
|
|
}, verkauf.fahrzeug), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
color: 'var(--color-text-secondary)',
|
|
fontSize: 'var(--font-size-sm)'
|
|
}
|
|
}, "FIN: ", verkauf.fin, " · ", formatDate(verkauf.datum))), verkaufStatusBadge(verkauf.status)), /*#__PURE__*/React.createElement("div", {
|
|
className: "tabs"
|
|
}, tabs.map(tab => /*#__PURE__*/React.createElement("div", {
|
|
key: tab.id,
|
|
className: `tab ${activeTab === tab.id ? 'active' : ''}`,
|
|
onClick: () => setActiveTab(tab.id)
|
|
}, tab.label))), activeTab === 'uebersicht' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Verkaufsuebersicht"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-grid"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Fahrzeug"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, verkauf.fahrzeug)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "FIN"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value",
|
|
style: {
|
|
fontFamily: 'var(--font-mono)'
|
|
}
|
|
}, verkauf.fin)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Kunde"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, verkauf.kunde)), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Datum"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, formatDate(verkauf.datum))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Netto-Betrag"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, formatPrice(verkauf.betrag))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "MwSt-Typ"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "info"
|
|
}, mwstTypLabel(verkauf.mwstTyp)))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Steuerbetrag"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value"
|
|
}, formatPrice(verkauf.steuer))), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "info-label"
|
|
}, "Gesamt (brutto)"), /*#__PURE__*/React.createElement("div", {
|
|
className: "info-value",
|
|
style: {
|
|
fontSize: 'var(--font-size-lg)',
|
|
color: 'var(--color-primary)'
|
|
}
|
|
}, formatPrice(verkauf.gesamt))))), activeTab === 'dokumente' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Dokumente"
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "data-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Dokument"), /*#__PURE__*/React.createElement("th", null, "Typ"), /*#__PURE__*/React.createElement("th", null, "Aktion"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Kaufvertrag.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "primary"
|
|
}, "Vertrag")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "download",
|
|
size: 16
|
|
})))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Rechnung.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "info"
|
|
}, "Rechnung")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "download",
|
|
size: 16
|
|
})))), verkauf.mwstTyp === 'eu_ausland' && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Lieferbescheinigung.pdf"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "warning"
|
|
}, "Zertifikat")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn-ghost btn-sm"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "download",
|
|
size: 16
|
|
}))))))), activeTab === 'zahlung' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Zahlungsverlauf"
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "data-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Datum"), /*#__PURE__*/React.createElement("th", null, "Betrag"), /*#__PURE__*/React.createElement("th", null, "Methode"), /*#__PURE__*/React.createElement("th", null, "Status"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, formatDate(verkauf.datum)), /*#__PURE__*/React.createElement("td", null, formatPrice(verkauf.gesamt)), /*#__PURE__*/React.createElement("td", null, "Ueberweisung"), /*#__PURE__*/React.createElement("td", null, verkauf.status === 'abgeschlossen' ? /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Bezahlt") : /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "warning"
|
|
}, "Offen")))))), activeTab === 'termine' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Termine"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 'var(--space-3)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'var(--space-3)',
|
|
padding: 'var(--space-3)',
|
|
border: '1px solid var(--color-border)',
|
|
borderRadius: 'var(--radius-md)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "calendar",
|
|
size: 20,
|
|
style: {
|
|
color: 'var(--color-info)'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-medium)'
|
|
}
|
|
}, "Ueberfuehrung"), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}, "Geplant: ", formatDate(verkauf.datum))), /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "info"
|
|
}, "Geplant")), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 'var(--space-3)',
|
|
padding: 'var(--space-3)',
|
|
border: '1px solid var(--color-border)',
|
|
borderRadius: 'var(--radius-md)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "package",
|
|
size: 20,
|
|
style: {
|
|
color: 'var(--color-warning)'
|
|
}
|
|
}), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontWeight: 'var(--font-weight-medium)'
|
|
}
|
|
}, "Lieferung"), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)'
|
|
}
|
|
}, "Geplant: ", formatDate(verkauf.datum))), /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "warning"
|
|
}, "Geplant")))));
|
|
};
|
|
|
|
// ============ KI COPILOT (v7 ChatGPT-like) ============
|
|
const KiCopilot = ({
|
|
navigate,
|
|
role
|
|
}) => {
|
|
const [messages, setMessages] = useState([{
|
|
type: 'ai',
|
|
text: 'Hallo Max! Ich bin Ihr KI-Assistent. Ich kann Fahrzeuge anlegen, suchen, verkaufen und Dokumente erstellen. Was kann ich fuer Sie tun?'
|
|
}]);
|
|
const [input, setInput] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [listening, setListening] = useState(false);
|
|
const [speechSupported, setSpeechSupported] = useState(true);
|
|
const textareaRef = useRef(null);
|
|
const messagesEnd = useRef(null);
|
|
const recognitionRef = useRef(null);
|
|
useEffect(() => {
|
|
messagesEnd.current?.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
}, [messages]);
|
|
useEffect(() => {
|
|
document.body.classList.add('copilot-active');
|
|
return () => document.body.classList.remove('copilot-active');
|
|
}, []);
|
|
useEffect(() => {
|
|
const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
if (!SR) {
|
|
setSpeechSupported(false);
|
|
return;
|
|
}
|
|
const rec = new SR();
|
|
rec.lang = 'de-DE';
|
|
rec.continuous = false;
|
|
rec.interimResults = true;
|
|
rec.onresult = e => {
|
|
let text = '';
|
|
for (let i = 0; i < e.results.length; i++) text += e.results[i][0].transcript;
|
|
setInput(text);
|
|
autoGrow();
|
|
};
|
|
rec.onerror = e => {
|
|
setListening(false);
|
|
};
|
|
rec.onend = () => {
|
|
setListening(false);
|
|
};
|
|
recognitionRef.current = rec;
|
|
}, []);
|
|
const autoGrow = () => {
|
|
const ta = textareaRef.current;
|
|
if (ta) {
|
|
ta.style.height = '48px';
|
|
ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
|
|
}
|
|
};
|
|
const toggleMic = () => {
|
|
if (!speechSupported || !recognitionRef.current) return;
|
|
if (listening) {
|
|
recognitionRef.current.stop();
|
|
setListening(false);
|
|
} else {
|
|
try {
|
|
recognitionRef.current.start();
|
|
setListening(true);
|
|
} catch (e) {}
|
|
}
|
|
};
|
|
const sendMessage = text => {
|
|
const msg = text || input;
|
|
if (!msg.trim() || loading) return;
|
|
setMessages(prev => [...prev, {
|
|
type: 'user',
|
|
text: msg
|
|
}]);
|
|
setInput('');
|
|
if (textareaRef.current) textareaRef.current.style.height = '48px';
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
let r = 'Ich verstehe Ihren Befehl. Bitte spezifizieren Sie genauer.';
|
|
const ml = msg.toLowerCase();
|
|
if (ml.includes('lege') && ml.includes('fahrzeug')) r = 'Ich habe die Daten extrahiert und das Fahrzeugformular vorausgefuellt. Bitte ueberpruefen Sie die Daten und bestaetigen Sie zum Speichern. Das Formular ist jetzt geoeffnet.';else if (ml.includes('finde') || ml.includes('suche')) r = 'Ich habe 3 Fahrzeuge gefunden, die Ihren Kriterien entsprechen. Die Ergebnisse werden in der Bestandsliste angezeigt.';else if (ml.includes('verkaufe') || ml.includes('kaufvertrag')) r = 'Verkaufsprozess gestartet. Ich habe Kaeufer und Fahrzeug identifiziert. Der Verkaufs-Assistent ist jetzt geoeffnet.';else if (ml.includes('rechnung')) r = 'Rechnung RE-2026-047 wurde aus dem letzten Verkauf generiert. Die PDF steht zum Download bereit.';else if (ml.includes('kontakt') || ml.includes('kunde')) r = 'Ich habe die Kontaktverwaltung geoeffnet. Sie koennen zwischen Kunden und Lieferanten wechseln.';else if (ml.includes('preis') || ml.includes('vergleich')) r = 'Ich vergleiche Preise aehnlicher Fahrzeuge auf mobile.de. Bitte waehlen Sie ein Fahrzeug aus der Bestandsliste.';
|
|
setMessages(prev => [...prev, {
|
|
type: 'ai',
|
|
text: r
|
|
}]);
|
|
setLoading(false);
|
|
}, 1500);
|
|
};
|
|
const handleKeyDown = e => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
}
|
|
};
|
|
const chips = ['Fahrzeug suchen', 'Neuer Verkauf', 'Kontakte', 'Preisvergleich', 'Dokument erstellen', 'Letzte Verkaeufe'];
|
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
marginBottom: 'var(--space-4)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("h1", {
|
|
style: {
|
|
fontSize: 'var(--font-size-2xl)',
|
|
fontWeight: 'var(--font-weight-bold)'
|
|
}
|
|
}, t('ki.title')), /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
color: 'var(--color-text-secondary)',
|
|
fontSize: 'var(--font-size-sm)',
|
|
marginTop: 'var(--space-1)'
|
|
}
|
|
}, "KI-Assistent via OpenRouter - Text & Spracheingabe")), /*#__PURE__*/React.createElement("div", {
|
|
className: "copilot-container"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "copilot-chat"
|
|
}, messages.map((msg, i) => /*#__PURE__*/React.createElement("div", {
|
|
key: i,
|
|
className: msg.type === 'user' ? 'chat-msg-user' : 'chat-msg-ai'
|
|
}, msg.type === 'ai' && /*#__PURE__*/React.createElement("div", {
|
|
className: "chat-ai-avatar"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "ai",
|
|
size: 20
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "chat-bubble-full"
|
|
}, msg.text))), loading && /*#__PURE__*/React.createElement("div", {
|
|
className: "chat-msg-ai"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "chat-ai-avatar"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "ai",
|
|
size: 20
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "chat-bubble-full"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "typing-indicator"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "typing-dot"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "typing-dot"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "typing-dot"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
ref: messagesEnd
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "copilot-input-container"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "copilot-chips"
|
|
}, chips.map((chip, i) => /*#__PURE__*/React.createElement("div", {
|
|
key: i,
|
|
className: "chat-chip",
|
|
onClick: () => sendMessage(chip)
|
|
}, chip))), /*#__PURE__*/React.createElement("div", {
|
|
className: "copilot-input-row"
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
className: `chat-mic-btn ${listening ? 'recording' : ''}`,
|
|
onClick: toggleMic,
|
|
title: speechSupported ? 'Spracheingabe' : 'Spracheingabe nicht unterstuetzt',
|
|
disabled: !speechSupported
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "mic",
|
|
size: 20
|
|
})), /*#__PURE__*/React.createElement("textarea", {
|
|
ref: textareaRef,
|
|
className: "copilot-textarea",
|
|
placeholder: t('ki.placeholder'),
|
|
value: input,
|
|
onChange: e => {
|
|
setInput(e.target.value);
|
|
autoGrow();
|
|
},
|
|
onKeyDown: handleKeyDown,
|
|
rows: 1
|
|
}), /*#__PURE__*/React.createElement("button", {
|
|
className: "chat-send-btn",
|
|
onClick: () => sendMessage(),
|
|
disabled: !input.trim() || loading,
|
|
title: "Senden"
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: "send",
|
|
size: 20
|
|
})))), !speechSupported && /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
textAlign: 'center',
|
|
fontSize: 'var(--font-size-xs)',
|
|
color: 'var(--color-text-muted)',
|
|
padding: 'var(--space-2)'
|
|
}
|
|
}, "Spracheingabe nicht unterstuetzt - bitte Text eingeben"), " "));
|
|
};
|
|
|
|
// ============ EINSTELLUNGEN ============
|
|
const Einstellungen = ({
|
|
navigate
|
|
}) => {
|
|
const [activeTab, setActiveTab] = useState('stammdaten');
|
|
const [stammdatenSub, setStammdatenSub] = useState('steuer');
|
|
const tabs = [{
|
|
id: 'stammdaten',
|
|
label: 'Stammdaten'
|
|
}, {
|
|
id: 'vorlagen',
|
|
label: 'Vertragsvorlagen'
|
|
}, {
|
|
id: 'benutzer',
|
|
label: 'Benutzerverwaltung'
|
|
}, {
|
|
id: 'firma',
|
|
label: 'Firmenprofil'
|
|
}];
|
|
const stammdatenSubs = [{
|
|
id: 'steuer',
|
|
label: 'Steuer & MwSt',
|
|
icon: 'percentage'
|
|
}, {
|
|
id: 'waehrungen',
|
|
label: 'Waehrungen',
|
|
icon: 'currency'
|
|
}, {
|
|
id: 'lieferbedingungen',
|
|
label: 'Incoterms',
|
|
icon: 'truck'
|
|
}, {
|
|
id: 'zahlungsbedingungen',
|
|
label: 'Zahlungsbedingungen',
|
|
icon: 'euro'
|
|
}, {
|
|
id: 'versicherungen',
|
|
label: 'Versicherungen',
|
|
icon: 'shield'
|
|
}, {
|
|
id: 'gewaehrleistung',
|
|
label: 'Gewaehrleistung',
|
|
icon: 'certificate'
|
|
}, {
|
|
id: 'lkw_typen',
|
|
label: 'LKW-Typen',
|
|
icon: 'truck_type'
|
|
}, {
|
|
id: 'baumaschinen_typen',
|
|
label: 'Baumaschinen',
|
|
icon: 'wrench'
|
|
}, {
|
|
id: 'fahrzeugzustaende',
|
|
label: 'Zustaende',
|
|
icon: 'tag'
|
|
}, {
|
|
id: 'kraftstoffarten',
|
|
label: 'Kraftstoffe',
|
|
icon: 'gas'
|
|
}, {
|
|
id: 'abgasnormen',
|
|
label: 'Abgasnormen',
|
|
icon: 'layers'
|
|
}, {
|
|
id: 'bereifung',
|
|
label: 'Bereifung',
|
|
icon: 'road'
|
|
}, {
|
|
id: 'zulassungsstatus',
|
|
label: 'Zulassung',
|
|
icon: 'certificate'
|
|
}];
|
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
marginBottom: 'var(--space-6)'
|
|
}
|
|
}, /*#__PURE__*/React.createElement("h1", {
|
|
style: {
|
|
fontSize: 'var(--font-size-2xl)',
|
|
fontWeight: 'var(--font-weight-bold)'
|
|
}
|
|
}, t('set.title'))), /*#__PURE__*/React.createElement("div", {
|
|
className: "tabs"
|
|
}, tabs.map(tab => /*#__PURE__*/React.createElement("div", {
|
|
key: tab.id,
|
|
className: `tab ${activeTab === tab.id ? 'active' : ''}`,
|
|
onClick: () => setActiveTab(tab.id)
|
|
}, tab.label))), activeTab === 'stammdaten' && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
className: "subtabs"
|
|
}, stammdatenSubs.map(s => /*#__PURE__*/React.createElement("div", {
|
|
key: s.id,
|
|
className: `subtab ${stammdatenSub === s.id ? 'active' : ''}`,
|
|
onClick: () => setStammdatenSub(s.id)
|
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
name: s.icon,
|
|
size: 14
|
|
}), " ", s.label))), stammdatenSub === 'steuer' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Steuerklassen"
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "stammdaten-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Bezeichnung"), /*#__PURE__*/React.createElement("th", null, "Satz"), /*#__PURE__*/React.createElement("th", null, "Status"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "EU-Inland"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "primary"
|
|
}, "19%")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Aktiv"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "EU-Ausland"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "warning"
|
|
}, "0%")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Aktiv"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Drittland"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "warning"
|
|
}, "0%")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Aktiv")))))), stammdatenSub === 'waehrungen' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Waehrungen"
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "stammdaten-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Waehrung"), /*#__PURE__*/React.createElement("th", null, "Code"), /*#__PURE__*/React.createElement("th", null, "Kurs"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Euro"), /*#__PURE__*/React.createElement("td", null, "EUR"), /*#__PURE__*/React.createElement("td", null, "1.0000")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "USD"), /*#__PURE__*/React.createElement("td", null, "USD"), /*#__PURE__*/React.createElement("td", null, "0.9234")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "CHF"), /*#__PURE__*/React.createElement("td", null, "CHF"), /*#__PURE__*/React.createElement("td", null, "1.0523"))))), stammdatenSub === 'lieferbedingungen' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Incoterms"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: 'var(--space-2)'
|
|
}
|
|
}, ['EXW', 'FOB', 'CIF', 'DAP', 'DDP', 'FCA'].map(c => /*#__PURE__*/React.createElement(Badge, {
|
|
key: c,
|
|
variant: "primary"
|
|
}, c)))), stammdatenSub === 'zahlungsbedingungen' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Zahlungsbedingungen"
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "stammdaten-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Bezeichnung"), /*#__PURE__*/React.createElement("th", null, "Frist"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Vorkasse"), /*#__PURE__*/React.createElement("td", null, "Sofort")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "30 Tage netto"), /*#__PURE__*/React.createElement("td", null, "30T")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Ratenzahlung"), /*#__PURE__*/React.createElement("td", null, "3 Raten"))))), (stammdatenSub === 'versicherungen' || stammdatenSub === 'gewaehrleistung' || stammdatenSub === 'lkw_typen' || stammdatenSub === 'baumaschinen_typen' || stammdatenSub === 'fahrzeugzustaende' || stammdatenSub === 'kraftstoffarten' || stammdatenSub === 'abgasnormen' || stammdatenSub === 'bereifung' || stammdatenSub === 'zulassungsstatus') && /*#__PURE__*/React.createElement(Card, {
|
|
title: stammdatenSubs.find(s => s.id === stammdatenSub)?.label
|
|
}, /*#__PURE__*/React.createElement("p", {
|
|
style: {
|
|
color: 'var(--color-text-secondary)',
|
|
fontSize: 'var(--font-size-sm)'
|
|
}
|
|
}, "Stammdaten verwaltet unter: ", stammdatenSubs.find(s => s.id === stammdatenSub)?.label))), activeTab === 'vorlagen' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Vertragsvorlagen"
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "data-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Vorlage"), /*#__PURE__*/React.createElement("th", null, "Typ"), /*#__PURE__*/React.createElement("th", null, "Status"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Kaufvertrag Inland"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "primary"
|
|
}, "Inland")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Aktiv"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Kaufvertrag EU-Ausland"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "info"
|
|
}, "EU")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Aktiv"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Rechnung"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "neutral"
|
|
}, "Rechnung")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Aktiv")))))), activeTab === 'benutzer' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Benutzerverwaltung"
|
|
}, /*#__PURE__*/React.createElement("table", {
|
|
className: "data-table"
|
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), /*#__PURE__*/React.createElement("th", null, "Rolle"), /*#__PURE__*/React.createElement("th", null, "Status"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Max Mustermann"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "primary"
|
|
}, "Admin")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Aktiv"))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Sarah Klein"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "info"
|
|
}, "Verkaeufer")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Badge, {
|
|
variant: "success"
|
|
}, "Aktiv")))))), activeTab === 'firma' && /*#__PURE__*/React.createElement(Card, {
|
|
title: "Firmenprofil"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "two-col"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "Firmenname"), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
defaultValue: "Nutzfahrzeug Handel GmbH"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "form-group"
|
|
}, /*#__PURE__*/React.createElement("label", {
|
|
className: "label"
|
|
}, "USt-IdNr."), /*#__PURE__*/React.createElement("input", {
|
|
className: "input",
|
|
defaultValue: "DE123456789",
|
|
style: {
|
|
fontFamily: 'var(--font-mono)'
|
|
}
|
|
}))), /*#__PURE__*/React.createElement(Button, {
|
|
variant: "primary",
|
|
icon: "check",
|
|
style: {
|
|
marginTop: 'var(--space-4)'
|
|
}
|
|
}, "Speichern")));
|
|
};
|
|
|
|
// ============ MAIN APP ============
|
|
const App = () => {
|
|
const {
|
|
route,
|
|
navigate
|
|
} = useRouter();
|
|
const [role, setRole] = useState(localStorage.getItem('erp-role') || 'admin');
|
|
const [toasts, setToasts] = useState([]);
|
|
const removeToast = id => setToasts(prev => prev.filter(t => t.id !== id));
|
|
const routeParts = route.split('/').filter(Boolean);
|
|
const view = routeParts[0] || 'dashboard';
|
|
const param = routeParts[1];
|
|
const queryStr = route.split('?')[1];
|
|
const query = {};
|
|
if (queryStr) {
|
|
queryStr.split('&').forEach(p => {
|
|
const [k, v] = p.split('=');
|
|
query[k] = v;
|
|
});
|
|
}
|
|
let content;
|
|
switch (view) {
|
|
case 'dashboard':
|
|
content = /*#__PURE__*/React.createElement(DashboardView, {
|
|
navigate: navigate,
|
|
role: role
|
|
});
|
|
break;
|
|
case 'fahrzeuge':
|
|
if (param === 'neu') content = /*#__PURE__*/React.createElement(FahrzeugForm, {
|
|
navigate: navigate,
|
|
editId: query.id
|
|
});else content = /*#__PURE__*/React.createElement(FahrzeugListe, {
|
|
navigate: navigate,
|
|
role: role
|
|
});
|
|
break;
|
|
case 'fahrzeug':
|
|
content = /*#__PURE__*/React.createElement(FahrzeugDetail, {
|
|
id: param,
|
|
navigate: navigate,
|
|
role: role
|
|
});
|
|
break;
|
|
case 'kontakte':
|
|
content = /*#__PURE__*/React.createElement(KontakteListe, {
|
|
navigate: navigate,
|
|
role: role
|
|
});
|
|
break;
|
|
case 'verkauf':
|
|
content = /*#__PURE__*/React.createElement(VerkaufsModul, {
|
|
navigate: navigate,
|
|
role: role,
|
|
preselectVehicle: query.vehicle
|
|
});
|
|
break;
|
|
case 'ki-copilot':
|
|
content = /*#__PURE__*/React.createElement(KiCopilot, {
|
|
navigate: navigate,
|
|
role: role
|
|
});
|
|
break;
|
|
case 'einstellungen':
|
|
content = /*#__PURE__*/React.createElement(Einstellungen, {
|
|
navigate: navigate
|
|
});
|
|
break;
|
|
default:
|
|
content = /*#__PURE__*/React.createElement(DashboardView, {
|
|
navigate: navigate,
|
|
role: role
|
|
});
|
|
}
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: "app-layout"
|
|
}, /*#__PURE__*/React.createElement(Sidebar, {
|
|
route: '/' + view,
|
|
navigate: navigate,
|
|
role: role
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "main-content"
|
|
}, /*#__PURE__*/React.createElement(Topbar, {
|
|
route: route,
|
|
role: role,
|
|
setRole: setRole,
|
|
navigate: navigate
|
|
}), /*#__PURE__*/React.createElement("main", {
|
|
id: "main-content",
|
|
className: "content-area"
|
|
}, content)));
|
|
};
|
|
ReactDOM.createRoot(document.getElementById('root')).render(/*#__PURE__*/React.createElement(App, null));
|