828 lines
34 KiB
JavaScript
828 lines
34 KiB
JavaScript
import useEditorStore from "./useEditorStore";
|
||
import { useState } from "react";
|
||
import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
|
||
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
||
import { CSS } from "@dnd-kit/utilities";
|
||
|
||
function SortableColumnItem({ column, elementId, updateColumnWidth, updateColumnLabel, toggleColumnVisibility }) {
|
||
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.key });
|
||
|
||
const style = {
|
||
transform: CSS.Transform.toString(transform),
|
||
transition,
|
||
};
|
||
|
||
return (
|
||
<div ref={setNodeRef} style={{ ...styles.columnItem, ...style }} {...attributes}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 8, flex: 1 }}>
|
||
<div {...listeners} style={{ cursor: "grab", padding: "0 4px" }}>
|
||
⋮⋮
|
||
</div>
|
||
<label style={styles.checkbox}>
|
||
<input
|
||
type="checkbox"
|
||
checked={column.visible}
|
||
onChange={() => toggleColumnVisibility(elementId, column.key)}
|
||
/>
|
||
<span>{column.key}</span>
|
||
</label>
|
||
</div>
|
||
<div style={{ display: "flex", gap: 4 }}>
|
||
<input
|
||
type="text"
|
||
value={column.label}
|
||
onChange={(e) => updateColumnLabel(elementId, column.key, e.target.value)}
|
||
style={{ ...styles.input, width: 70, fontSize: 11 }}
|
||
placeholder="Label"
|
||
/>
|
||
<input
|
||
type="number"
|
||
value={column.width}
|
||
onChange={(e) => updateColumnWidth(elementId, column.key, Number(e.target.value))}
|
||
style={{ ...styles.input, width: 50, fontSize: 11 }}
|
||
placeholder="W"
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function PropertiesPanel() {
|
||
const elements = useEditorStore((state) => state.elements);
|
||
const selectedId = useEditorStore((state) => state.selectedId);
|
||
const updateElement = useEditorStore((state) => state.updateElement);
|
||
const duplicateElement = useEditorStore((state) => state.duplicateElement);
|
||
const deleteElement = useEditorStore((state) => state.deleteElement);
|
||
const toggleColumnVisibility = useEditorStore((state) => state.toggleColumnVisibility);
|
||
const updateColumnWidth = useEditorStore((state) => state.updateColumnWidth);
|
||
const updateColumnLabel = useEditorStore((state) => state.updateColumnLabel);
|
||
const reorderColumns = useEditorStore((state) => state.reorderColumns);
|
||
|
||
const selected = elements.find((el) => el.id === selectedId);
|
||
|
||
const [imageUpload, setImageUpload] = useState(null);
|
||
|
||
const sensors = useSensors(
|
||
useSensor(PointerSensor, {
|
||
activationConstraint: {
|
||
distance: 8,
|
||
},
|
||
})
|
||
);
|
||
|
||
if (!selected) {
|
||
return (
|
||
<div style={styles.panel}>
|
||
<div style={styles.emptyState}>
|
||
<p>Select an element to edit properties</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const handleImageUpload = (e) => {
|
||
const file = e.target.files[0];
|
||
if (file) {
|
||
const reader = new FileReader();
|
||
reader.onload = (event) => {
|
||
updateElement(selected.id, { src: event.target.result });
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
};
|
||
|
||
const handleDragEnd = (event) => {
|
||
const { active, over } = event;
|
||
|
||
if (active.id !== over.id) {
|
||
const oldIndex = selected.columns.findIndex((col) => col.key === active.id);
|
||
const newIndex = selected.columns.findIndex((col) => col.key === over.id);
|
||
const newColumns = arrayMove(selected.columns, oldIndex, newIndex);
|
||
reorderColumns(selected.id, newColumns);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={styles.panel}>
|
||
<div style={styles.header}>
|
||
<h4 style={styles.title}>Properties</h4>
|
||
<div style={styles.actions}>
|
||
<button
|
||
onClick={() => duplicateElement(selected.id)}
|
||
style={styles.iconBtn}
|
||
title="Duplicate"
|
||
>
|
||
📋
|
||
</button>
|
||
<button
|
||
onClick={() => deleteElement(selected.id)}
|
||
style={styles.iconBtn}
|
||
title="Delete"
|
||
>
|
||
🗑️
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Type</label>
|
||
<div style={styles.badge}>{selected.type.toUpperCase()}</div>
|
||
</div>
|
||
|
||
{/* POSITION */}
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Position</label>
|
||
<div style={styles.row}>
|
||
<div style={styles.inputGroup}>
|
||
<span style={styles.inputLabel}>X</span>
|
||
<input
|
||
type="number"
|
||
value={selected.x}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { x: Number(e.target.value) })
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
<div style={styles.inputGroup}>
|
||
<span style={styles.inputLabel}>Y</span>
|
||
<input
|
||
type="number"
|
||
value={selected.y}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { y: Number(e.target.value) })
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ROTATION */}
|
||
{selected.rotation !== undefined && (
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Rotation</label>
|
||
<input
|
||
type="number"
|
||
value={Math.round(selected.rotation)}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { rotation: Number(e.target.value) })
|
||
}
|
||
style={styles.input}
|
||
placeholder="Degrees"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* TEXT PROPERTIES */}
|
||
{selected.type === "text" && (
|
||
<>
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Text</label>
|
||
<textarea
|
||
value={selected.text}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { text: e.target.value })
|
||
}
|
||
style={{ ...styles.input, minHeight: 60, resize: "vertical" }}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Font Size</label>
|
||
<input
|
||
type="number"
|
||
value={selected.fontSize}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
fontSize: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Font Family</label>
|
||
<select
|
||
value={selected.fontFamily}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { fontFamily: e.target.value })
|
||
}
|
||
style={styles.input}
|
||
>
|
||
<option value="Arial">Arial</option>
|
||
<option value="Times New Roman">Times New Roman</option>
|
||
<option value="Courier New">Courier New</option>
|
||
<option value="Georgia">Georgia</option>
|
||
<option value="Verdana">Verdana</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Font Weight</label>
|
||
<select
|
||
value={selected.fontWeight || "normal"}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { fontWeight: e.target.value })
|
||
}
|
||
style={styles.input}
|
||
>
|
||
<option value="normal">Normal (400)</option>
|
||
<option value="500">Medium (500)</option>
|
||
<option value="600">Semi Bold (600)</option>
|
||
<option value="bold">Bold (700)</option>
|
||
<option value="800">Extra Bold (800)</option>
|
||
<option value="900">Black (900)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Color</label>
|
||
<input
|
||
type="color"
|
||
value={selected.color}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { color: e.target.value })
|
||
}
|
||
style={{ ...styles.input, height: 40 }}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Style</label>
|
||
<div style={styles.row}>
|
||
<label style={styles.checkbox}>
|
||
<input
|
||
type="checkbox"
|
||
checked={selected.bold}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { bold: e.target.checked })
|
||
}
|
||
/>
|
||
<span>Bold</span>
|
||
</label>
|
||
<label style={styles.checkbox}>
|
||
<input
|
||
type="checkbox"
|
||
checked={selected.italic}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { italic: e.target.checked })
|
||
}
|
||
/>
|
||
<span>Italic</span>
|
||
</label>
|
||
</div>
|
||
<div style={{ marginTop: 8 }}>
|
||
<label style={styles.checkbox}>
|
||
<input
|
||
type="checkbox"
|
||
checked={selected.underline}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { underline: e.target.checked })
|
||
}
|
||
/>
|
||
<span>Underline</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Alignment</label>
|
||
<select
|
||
value={selected.align}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { align: e.target.value })
|
||
}
|
||
style={styles.input}
|
||
>
|
||
<option value="left">Left</option>
|
||
<option value="center">Center</option>
|
||
<option value="right">Right</option>
|
||
</select>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* IMAGE PROPERTIES */}
|
||
{selected.type === "image" && (
|
||
<>
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Image</label>
|
||
{selected.src ? (
|
||
<div style={{ position: "relative" }}>
|
||
<img
|
||
src={selected.src}
|
||
alt="Preview"
|
||
style={{
|
||
width: "100%",
|
||
height: 120,
|
||
objectFit: "cover",
|
||
borderRadius: 4,
|
||
border: "1px solid #ddd",
|
||
}}
|
||
/>
|
||
<button
|
||
onClick={() => updateElement(selected.id, { src: null })}
|
||
style={{
|
||
position: "absolute",
|
||
top: 8,
|
||
right: 8,
|
||
background: "#ff4444",
|
||
color: "#fff",
|
||
border: "none",
|
||
borderRadius: 4,
|
||
padding: "4px 8px",
|
||
cursor: "pointer",
|
||
fontSize: 12,
|
||
}}
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<input
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={handleImageUpload}
|
||
style={styles.input}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Size</label>
|
||
<div style={styles.row}>
|
||
<div style={styles.inputGroup}>
|
||
<span style={styles.inputLabel}>W</span>
|
||
<input
|
||
type="number"
|
||
value={selected.width}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
width: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
<div style={styles.inputGroup}>
|
||
<span style={styles.inputLabel}>H</span>
|
||
<input
|
||
type="number"
|
||
value={selected.height}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
height: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* QRCODE PROPERTIES */}
|
||
{selected.type === "qrcode" && (
|
||
<>
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>QR Code Data</label>
|
||
<textarea
|
||
value={selected.data}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { data: e.target.value })
|
||
}
|
||
style={{ ...styles.input, minHeight: 60, resize: "vertical" }}
|
||
placeholder="Enter URL or text"
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Size</label>
|
||
<input
|
||
type="number"
|
||
value={selected.size}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
size: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* LINE PROPERTIES */}
|
||
{selected.type === "line" && (
|
||
<>
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Width</label>
|
||
<input
|
||
type="number"
|
||
value={selected.width}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
width: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Thickness</label>
|
||
<input
|
||
type="number"
|
||
value={selected.thickness}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
thickness: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Color</label>
|
||
<input
|
||
type="color"
|
||
value={selected.color}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { color: e.target.value })
|
||
}
|
||
style={{ ...styles.input, height: 40 }}
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* RECTANGLE PROPERTIES */}
|
||
{selected.type === "rectangle" && (
|
||
<>
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Size</label>
|
||
<div style={styles.row}>
|
||
<div style={styles.inputGroup}>
|
||
<span style={styles.inputLabel}>W</span>
|
||
<input
|
||
type="number"
|
||
value={selected.width}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
width: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
<div style={styles.inputGroup}>
|
||
<span style={styles.inputLabel}>H</span>
|
||
<input
|
||
type="number"
|
||
value={selected.height}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
height: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Fill Color</label>
|
||
<input
|
||
type="color"
|
||
value={selected.fill === "transparent" ? "#ffffff" : selected.fill}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { fill: e.target.value })
|
||
}
|
||
style={{ ...styles.input, height: 40 }}
|
||
/>
|
||
<label style={{ ...styles.checkbox, marginTop: 8 }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={selected.fill === "transparent"}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
fill: e.target.checked ? "transparent" : "#ffffff",
|
||
})
|
||
}
|
||
/>
|
||
<span>Transparent</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Border Color</label>
|
||
<input
|
||
type="color"
|
||
value={selected.stroke}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { stroke: e.target.value })
|
||
}
|
||
style={{ ...styles.input, height: 40 }}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Border Width</label>
|
||
<input
|
||
type="number"
|
||
value={selected.strokeWidth}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
strokeWidth: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Corner Radius</label>
|
||
<input
|
||
type="number"
|
||
value={selected.cornerRadius}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
cornerRadius: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* SUMMARY PROPERTIES */}
|
||
{selected.type === "summary" && (
|
||
<>
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Font Size</label>
|
||
<input
|
||
type="number"
|
||
value={selected.fontSize}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
fontSize: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Spacing</label>
|
||
<input
|
||
type="number"
|
||
value={selected.spacing}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
spacing: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Label Color</label>
|
||
<input
|
||
type="color"
|
||
value={selected.labelColor}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { labelColor: e.target.value })
|
||
}
|
||
style={{ ...styles.input, height: 40 }}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Value Color</label>
|
||
<input
|
||
type="color"
|
||
value={selected.valueColor}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { valueColor: e.target.value })
|
||
}
|
||
style={{ ...styles.input, height: 40 }}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Fields</label>
|
||
{selected.fields.map((field, idx) => (
|
||
<div key={field.key} style={styles.columnItem}>
|
||
<label style={styles.checkbox}>
|
||
<input
|
||
type="checkbox"
|
||
checked={field.visible}
|
||
onChange={() => {
|
||
const newFields = [...selected.fields];
|
||
newFields[idx].visible = !newFields[idx].visible;
|
||
updateElement(selected.id, { fields: newFields });
|
||
}}
|
||
/>
|
||
<span>{field.label}</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={field.label}
|
||
onChange={(e) => {
|
||
const newFields = [...selected.fields];
|
||
newFields[idx].label = e.target.value;
|
||
updateElement(selected.id, { fields: newFields });
|
||
}}
|
||
style={{ ...styles.input, width: 80 }}
|
||
placeholder="Label"
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* TABLE PROPERTIES */}
|
||
{selected.type === "table" && (
|
||
<>
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Row Height</label>
|
||
<input
|
||
type="number"
|
||
value={selected.rowHeight}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, {
|
||
rowHeight: Number(e.target.value),
|
||
})
|
||
}
|
||
style={styles.input}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Columns (Drag to reorder)</label>
|
||
<DndContext
|
||
sensors={sensors}
|
||
collisionDetection={closestCenter}
|
||
onDragEnd={handleDragEnd}
|
||
>
|
||
<SortableContext
|
||
items={selected.columns.map((col) => col.key)}
|
||
strategy={verticalListSortingStrategy}
|
||
>
|
||
{selected.columns.map((col) => (
|
||
<SortableColumnItem
|
||
key={col.key}
|
||
column={col}
|
||
elementId={selected.id}
|
||
updateColumnWidth={updateColumnWidth}
|
||
updateColumnLabel={updateColumnLabel}
|
||
toggleColumnVisibility={toggleColumnVisibility}
|
||
/>
|
||
))}
|
||
</SortableContext>
|
||
</DndContext>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Header Background</label>
|
||
<input
|
||
type="color"
|
||
value={selected.headerBg}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { headerBg: e.target.value })
|
||
}
|
||
style={{ ...styles.input, height: 40 }}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.label}>Border Color</label>
|
||
<input
|
||
type="color"
|
||
value={selected.borderColor}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { borderColor: e.target.value })
|
||
}
|
||
style={{ ...styles.input, height: 40 }}
|
||
/>
|
||
</div>
|
||
|
||
<div style={styles.section}>
|
||
<label style={styles.checkbox}>
|
||
<input
|
||
type="checkbox"
|
||
checked={selected.showSampleData}
|
||
onChange={(e) =>
|
||
updateElement(selected.id, { showSampleData: e.target.checked })
|
||
}
|
||
/>
|
||
<span>Show Sample Data</span>
|
||
</label>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const styles = {
|
||
panel: {
|
||
width: 280,
|
||
background: "#fff",
|
||
borderLeft: "1px solid #ddd",
|
||
padding: 16,
|
||
overflowY: "auto",
|
||
},
|
||
header: {
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
marginBottom: 16,
|
||
},
|
||
title: {
|
||
margin: 0,
|
||
fontSize: 16,
|
||
fontWeight: 600,
|
||
},
|
||
actions: {
|
||
display: "flex",
|
||
gap: 4,
|
||
},
|
||
iconBtn: {
|
||
background: "none",
|
||
border: "1px solid #ddd",
|
||
borderRadius: 4,
|
||
padding: "4px 8px",
|
||
cursor: "pointer",
|
||
fontSize: 14,
|
||
},
|
||
emptyState: {
|
||
textAlign: "center",
|
||
color: "#999",
|
||
marginTop: 40,
|
||
},
|
||
section: {
|
||
marginBottom: 16,
|
||
},
|
||
label: {
|
||
display: "block",
|
||
fontSize: 12,
|
||
fontWeight: 600,
|
||
marginBottom: 6,
|
||
color: "#333",
|
||
},
|
||
input: {
|
||
width: "100%",
|
||
padding: 8,
|
||
border: "1px solid #ddd",
|
||
borderRadius: 4,
|
||
fontSize: 13,
|
||
boxSizing: "border-box",
|
||
},
|
||
row: {
|
||
display: "flex",
|
||
gap: 8,
|
||
},
|
||
inputGroup: {
|
||
flex: 1,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
},
|
||
inputLabel: {
|
||
fontSize: 11,
|
||
color: "#666",
|
||
marginBottom: 4,
|
||
},
|
||
checkbox: {
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
fontSize: 13,
|
||
cursor: "pointer",
|
||
},
|
||
badge: {
|
||
display: "inline-block",
|
||
padding: "4px 8px",
|
||
background: "#e3f2fd",
|
||
color: "#1976d2",
|
||
borderRadius: 4,
|
||
fontSize: 11,
|
||
fontWeight: 600,
|
||
},
|
||
columnItem: {
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
padding: "6px 0",
|
||
borderBottom: "1px solid #f0f0f0",
|
||
},
|
||
};
|