@openg2p/registry-widgets 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/SectionRenderer.d.ts +1 -0
- package/dist/components/SectionRenderer.d.ts.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +151 -11
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +151 -11
- package/dist/index.js.map +1 -1
- package/dist/theme/index.d.ts +35 -9
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/widgets/DisplayWidget.d.ts.map +1 -1
- package/dist/widgets/HeaderSectionWidget.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionRenderer.d.ts","sourceRoot":"","sources":["../../src/components/SectionRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAyC,MAAM,UAAU,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"SectionRenderer.d.ts","sourceRoot":"","sources":["../../src/components/SectionRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAyC,MAAM,UAAU,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA0ClD,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,CAAC;IACvB,wBAAwB,CAAC,EAAE,oBAAoB,CAAC,0BAA0B,CAAC,CAAC;IAC5E,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAClC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAGjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,2GAA2G;IAC3G,oBAAoB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAErE,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,oGAAoG;IACpG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,uGAAuG;IACvG,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,4FAA4F;IAC5F,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,wGAAwG;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,0HAA0H;IAC1H,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjE,iGAAiG;IACjG,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAGD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,wZAwB7B,oBAAoB,4CAm8CtB,CAAC"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -3515,6 +3515,39 @@ const sectionValidate = (section, currentSchemaData, dispatch) => {
|
|
|
3515
3515
|
return isValid;
|
|
3516
3516
|
};
|
|
3517
3517
|
|
|
3518
|
+
/** Root class on readonly label/value rows; SectionRenderer scopes overflow/ellipsis rules here. */
|
|
3519
|
+
const READONLY_VALUE_ROW_ROOT_CLASSES = [
|
|
3520
|
+
'TextDisplayWidget',
|
|
3521
|
+
'TextAreaDisplayWidget',
|
|
3522
|
+
'SelectDisplayWidget',
|
|
3523
|
+
'PhoneDisplayWidget',
|
|
3524
|
+
'NumberDisplayWidget',
|
|
3525
|
+
'CurrencyDisplayWidget',
|
|
3526
|
+
'RadioDisplayWidget',
|
|
3527
|
+
'DateDisplayWidget',
|
|
3528
|
+
'DateTimeDisplayWidget',
|
|
3529
|
+
'CheckboxDisplayWidget',
|
|
3530
|
+
'BooleanDisplayWidget',
|
|
3531
|
+
'FileDisplayWidget',
|
|
3532
|
+
'DisplayFieldWidget',
|
|
3533
|
+
];
|
|
3534
|
+
/** Rows whose value is one line in .flex-1 > .text-gray-900 (ellipsis; full string via title on the element). */
|
|
3535
|
+
const READONLY_SINGLE_LINE_VALUE_ROW_CLASSES = [
|
|
3536
|
+
'TextDisplayWidget',
|
|
3537
|
+
'SelectDisplayWidget',
|
|
3538
|
+
'PhoneDisplayWidget',
|
|
3539
|
+
'NumberDisplayWidget',
|
|
3540
|
+
'CurrencyDisplayWidget',
|
|
3541
|
+
'RadioDisplayWidget',
|
|
3542
|
+
'DateDisplayWidget',
|
|
3543
|
+
'DateTimeDisplayWidget',
|
|
3544
|
+
'CheckboxDisplayWidget',
|
|
3545
|
+
'BooleanDisplayWidget',
|
|
3546
|
+
'DisplayFieldWidget',
|
|
3547
|
+
];
|
|
3548
|
+
function scopedClassSelectors(sectionClassId, classNames) {
|
|
3549
|
+
return classNames.map((c) => `.${sectionClassId} .${c}`).join(',\n ');
|
|
3550
|
+
}
|
|
3518
3551
|
/**
|
|
3519
3552
|
* Renders a section with its panels
|
|
3520
3553
|
*
|
|
@@ -3579,6 +3612,9 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
|
|
|
3579
3612
|
const sectionId = sectionToRender['section-id'];
|
|
3580
3613
|
const gridId = `section-panels-${sectionId}`;
|
|
3581
3614
|
const sectionClassId = `section-${sectionId}`;
|
|
3615
|
+
const readonlyValueRowRootsCss = useMemo(() => scopedClassSelectors(sectionClassId, READONLY_VALUE_ROW_ROOT_CLASSES), [sectionClassId]);
|
|
3616
|
+
const readonlyValueRowFlex1Css = useMemo(() => READONLY_VALUE_ROW_ROOT_CLASSES.map((c) => `.${sectionClassId} .${c} > .flex-1`).join(',\n '), [sectionClassId]);
|
|
3617
|
+
const readonlySingleLineValueTextCss = useMemo(() => READONLY_SINGLE_LINE_VALUE_ROW_CLASSES.map((c) => `.${sectionClassId} .${c} > .flex-1 > .text-gray-900`).join(',\n '), [sectionClassId]);
|
|
3582
3618
|
// IntakeForm mode: accordion expand/collapse state (supports toggle)
|
|
3583
3619
|
const [standaloneExpanded, setStandaloneExpanded] = useState(true); // For sectionIndex undefined (standalone use)
|
|
3584
3620
|
const isExpandedFromContainer = typeof sectionIndex === 'number' && expandedSectionIndex === sectionIndex;
|
|
@@ -4060,12 +4096,24 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
|
|
|
4060
4096
|
});
|
|
4061
4097
|
}
|
|
4062
4098
|
if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
|
|
4099
|
+
let profileImage = null;
|
|
4100
|
+
for (const record of newSchemaData) {
|
|
4101
|
+
if (typeof record === 'object' && record !== null) {
|
|
4102
|
+
for (const [key, value] of Object.entries(record)) {
|
|
4103
|
+
if (value instanceof File) {
|
|
4104
|
+
profileImage = value;
|
|
4105
|
+
record[key] = '';
|
|
4106
|
+
}
|
|
4107
|
+
}
|
|
4108
|
+
}
|
|
4109
|
+
}
|
|
4063
4110
|
try {
|
|
4064
4111
|
const sectionchanges = {
|
|
4065
4112
|
section_id: dbSectionId ?? originalSection['section-id'],
|
|
4066
4113
|
section_register_id: sectionRegisterId,
|
|
4067
4114
|
records: [...newSchemaData],
|
|
4068
|
-
files: [...sectionFiles]
|
|
4115
|
+
files: [...sectionFiles],
|
|
4116
|
+
...(profileImage ? { image: profileImage } : {}),
|
|
4069
4117
|
};
|
|
4070
4118
|
await onSectionSave(sectionchanges);
|
|
4071
4119
|
}
|
|
@@ -4108,12 +4156,24 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
|
|
|
4108
4156
|
});
|
|
4109
4157
|
}
|
|
4110
4158
|
if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
|
|
4159
|
+
let profileImage = null;
|
|
4160
|
+
for (const record of newSchemaData) {
|
|
4161
|
+
if (typeof record === 'object' && record !== null) {
|
|
4162
|
+
for (const [key, value] of Object.entries(record)) {
|
|
4163
|
+
if (value instanceof File) {
|
|
4164
|
+
profileImage = value;
|
|
4165
|
+
record[key] = '';
|
|
4166
|
+
}
|
|
4167
|
+
}
|
|
4168
|
+
}
|
|
4169
|
+
}
|
|
4111
4170
|
try {
|
|
4112
4171
|
await onSectionSave({
|
|
4113
4172
|
section_id: dbSectionId ?? originalSection['section-id'],
|
|
4114
4173
|
section_register_id: sectionRegisterId,
|
|
4115
4174
|
records: [...newSchemaData],
|
|
4116
4175
|
files: [...sectionFiles],
|
|
4176
|
+
...(profileImage ? { image: profileImage } : {}),
|
|
4117
4177
|
});
|
|
4118
4178
|
}
|
|
4119
4179
|
catch (error) {
|
|
@@ -4184,20 +4244,27 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
|
|
|
4184
4244
|
white-space: nowrap !important;
|
|
4185
4245
|
}
|
|
4186
4246
|
/* Readonly: prevent flex row from overflowing panel */
|
|
4187
|
-
|
|
4247
|
+
${readonlyValueRowRootsCss} {
|
|
4188
4248
|
min-width: 0 !important;
|
|
4189
4249
|
overflow: hidden !important;
|
|
4190
4250
|
}
|
|
4191
|
-
|
|
4251
|
+
${readonlyValueRowFlex1Css} {
|
|
4192
4252
|
min-width: 0 !important;
|
|
4193
4253
|
overflow: hidden !important;
|
|
4194
4254
|
}
|
|
4195
|
-
/* Readonly value
|
|
4196
|
-
|
|
4255
|
+
/* Readonly value: single-line ellipsis; full value via title on the value node */
|
|
4256
|
+
${readonlySingleLineValueTextCss} {
|
|
4197
4257
|
overflow: hidden;
|
|
4198
4258
|
text-overflow: ellipsis;
|
|
4199
4259
|
white-space: nowrap;
|
|
4200
4260
|
}
|
|
4261
|
+
/* Readonly textarea: break unbroken long tokens; title on pre keeps full text on hover */
|
|
4262
|
+
.${sectionClassId} .TextAreaDisplayWidget > .flex-1 > pre {
|
|
4263
|
+
min-width: 0;
|
|
4264
|
+
max-width: 100%;
|
|
4265
|
+
overflow-wrap: anywhere;
|
|
4266
|
+
word-break: break-word;
|
|
4267
|
+
}
|
|
4201
4268
|
|
|
4202
4269
|
/* Only apply fixed height when in edit mode */
|
|
4203
4270
|
.${sectionClassId}[data-edit-mode="true"] {
|
|
@@ -8087,10 +8154,10 @@ const DisplayWidget = ({ config }) => {
|
|
|
8087
8154
|
const label = translateConfig(widgetConfig['widget-label']);
|
|
8088
8155
|
// If no label, render as paragraph text
|
|
8089
8156
|
if (!label || label.trim() === '') {
|
|
8090
|
-
return (jsxRuntimeExports.jsx("div", { className: "mb-3 text-base text-gray-700", title: String(displayValue ?? ''), children: displayValue }));
|
|
8157
|
+
return (jsxRuntimeExports.jsx("div", { className: "DisplayFieldWidget mb-3 min-w-0 w-full overflow-hidden text-ellipsis whitespace-nowrap text-base text-gray-700", title: String(displayValue ?? ''), children: displayValue }));
|
|
8091
8158
|
}
|
|
8092
|
-
// With label, render as key-value pair
|
|
8093
|
-
return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] }), jsxRuntimeExports.jsx("div", { className: "flex-1 text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue })] }));
|
|
8159
|
+
// With label, render as key-value pair (structure matches other readonly widgets for SectionRenderer ellipsis)
|
|
8160
|
+
return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] DisplayFieldWidget flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] }), jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
|
|
8094
8161
|
};
|
|
8095
8162
|
|
|
8096
8163
|
const TableCellSelect = ({ config, value, onValueChange }) => {
|
|
@@ -9058,7 +9125,18 @@ const HeaderSectionWidget = ({ config }) => {
|
|
|
9058
9125
|
result = searchIn(schemaData);
|
|
9059
9126
|
return result;
|
|
9060
9127
|
}, [paths, values, schemaData]);
|
|
9061
|
-
const
|
|
9128
|
+
const imageVal = findValue('image');
|
|
9129
|
+
const imageUrlVal = findValue('imageUrl');
|
|
9130
|
+
const [previewUrl, setPreviewUrl] = useState(null);
|
|
9131
|
+
useEffect(() => {
|
|
9132
|
+
if (imageVal instanceof File) {
|
|
9133
|
+
const url = URL.createObjectURL(imageVal);
|
|
9134
|
+
setPreviewUrl(url);
|
|
9135
|
+
return () => URL.revokeObjectURL(url);
|
|
9136
|
+
}
|
|
9137
|
+
setPreviewUrl(null);
|
|
9138
|
+
}, [imageVal]);
|
|
9139
|
+
const displayImageUrl = previewUrl || (typeof imageUrlVal === 'string' && imageUrlVal ? imageUrlVal : null);
|
|
9062
9140
|
const displayName = findValue('name') || '';
|
|
9063
9141
|
const functionalId = findValue('functionalId') || '';
|
|
9064
9142
|
const statusValue = findValue('status') || '';
|
|
@@ -9091,6 +9169,18 @@ const HeaderSectionWidget = ({ config }) => {
|
|
|
9091
9169
|
return opt ? opt.label : String(statusValue);
|
|
9092
9170
|
}, [statusValue, statusOptions]);
|
|
9093
9171
|
const statusColor = statusColors[String(statusValue).toLowerCase()] || '#6B7280';
|
|
9172
|
+
// ── Image edit helpers ───────────────────────────────────────
|
|
9173
|
+
const fileInputRef = useRef(null);
|
|
9174
|
+
const handleImageUpload = useCallback((e) => {
|
|
9175
|
+
const file = e.target.files?.[0];
|
|
9176
|
+
if (!file)
|
|
9177
|
+
return;
|
|
9178
|
+
updateFieldValue('image', file);
|
|
9179
|
+
e.target.value = '';
|
|
9180
|
+
}, [updateFieldValue]);
|
|
9181
|
+
const handleImageDelete = useCallback(() => {
|
|
9182
|
+
updateFieldValue('image', '');
|
|
9183
|
+
}, [updateFieldValue]);
|
|
9094
9184
|
// ── Scoped class for CSS isolation ────────────────────────────
|
|
9095
9185
|
const cls = `header-section-widget-${widgetConfig['widget-id']}`;
|
|
9096
9186
|
// ── RENDER ────────────────────────────────────────────────────
|
|
@@ -9151,6 +9241,56 @@ const HeaderSectionWidget = ({ config }) => {
|
|
|
9151
9241
|
border-radius: 8px;
|
|
9152
9242
|
}
|
|
9153
9243
|
|
|
9244
|
+
.${cls} .hdr-avatar-wrapper {
|
|
9245
|
+
position: relative;
|
|
9246
|
+
width: ${imageSize}px;
|
|
9247
|
+
height: ${imageSize}px;
|
|
9248
|
+
flex-shrink: 0;
|
|
9249
|
+
}
|
|
9250
|
+
|
|
9251
|
+
.${cls} .hdr-avatar-overlay {
|
|
9252
|
+
position: absolute;
|
|
9253
|
+
inset: 0;
|
|
9254
|
+
border-radius: 8px;
|
|
9255
|
+
background: rgba(0, 0, 0, 0.55);
|
|
9256
|
+
display: flex;
|
|
9257
|
+
flex-direction: column;
|
|
9258
|
+
align-items: center;
|
|
9259
|
+
justify-content: center;
|
|
9260
|
+
gap: 6px;
|
|
9261
|
+
opacity: 0;
|
|
9262
|
+
transition: opacity 0.2s;
|
|
9263
|
+
}
|
|
9264
|
+
|
|
9265
|
+
.${cls} .hdr-avatar-wrapper:hover .hdr-avatar-overlay {
|
|
9266
|
+
opacity: 1;
|
|
9267
|
+
}
|
|
9268
|
+
|
|
9269
|
+
.${cls} .hdr-avatar-action {
|
|
9270
|
+
display: flex;
|
|
9271
|
+
align-items: center;
|
|
9272
|
+
gap: 5px;
|
|
9273
|
+
padding: 5px 14px;
|
|
9274
|
+
border: none;
|
|
9275
|
+
border-radius: 4px;
|
|
9276
|
+
background: rgba(255, 255, 255, 0.92);
|
|
9277
|
+
color: #374151;
|
|
9278
|
+
font-size: 0.7rem;
|
|
9279
|
+
font-weight: 500;
|
|
9280
|
+
cursor: pointer;
|
|
9281
|
+
font-family: Roboto, sans-serif;
|
|
9282
|
+
transition: background 0.15s;
|
|
9283
|
+
white-space: nowrap;
|
|
9284
|
+
}
|
|
9285
|
+
|
|
9286
|
+
.${cls} .hdr-avatar-action:hover {
|
|
9287
|
+
background: #fff;
|
|
9288
|
+
}
|
|
9289
|
+
|
|
9290
|
+
.${cls} .hdr-avatar-action--delete {
|
|
9291
|
+
color: #DC2626;
|
|
9292
|
+
}
|
|
9293
|
+
|
|
9154
9294
|
.${cls} .hdr-info {
|
|
9155
9295
|
display: flex;
|
|
9156
9296
|
flex-direction: column;
|
|
@@ -9255,13 +9395,13 @@ const HeaderSectionWidget = ({ config }) => {
|
|
|
9255
9395
|
min-width: 0;
|
|
9256
9396
|
}
|
|
9257
9397
|
}
|
|
9258
|
-
` }), jsxRuntimeExports.jsxs("div", { className: cls, children: [jsxRuntimeExports.jsxs("div", { className: "hdr-left", children: [jsxRuntimeExports.jsxs("div", { children: [
|
|
9398
|
+
` }), jsxRuntimeExports.jsxs("div", { className: cls, children: [jsxRuntimeExports.jsxs("div", { className: "hdr-left", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-avatar-wrapper", children: [displayImageUrl ? (jsxRuntimeExports.jsx("img", { src: displayImageUrl, alt: displayName || 'Profile', className: "hdr-avatar", onError: (e) => {
|
|
9259
9399
|
e.target.style.display = 'none';
|
|
9260
9400
|
const placeholder = e.target
|
|
9261
9401
|
.parentElement?.querySelector('.hdr-avatar-placeholder');
|
|
9262
9402
|
if (placeholder)
|
|
9263
9403
|
placeholder.style.display = 'flex';
|
|
9264
|
-
} })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display:
|
|
9404
|
+
} })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: displayImageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) }), !isReadonly && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "hdr-avatar-overlay", children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "hdr-avatar-action", onClick: () => fileInputRef.current?.click(), children: [jsxRuntimeExports.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), jsxRuntimeExports.jsx("polyline", { points: "17 8 12 3 7 8" }), jsxRuntimeExports.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] }), "Upload"] }), jsxRuntimeExports.jsxs("button", { type: "button", className: "hdr-avatar-action hdr-avatar-action--delete", onClick: handleImageDelete, children: [jsxRuntimeExports.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("polyline", { points: "3 6 5 6 21 6" }), jsxRuntimeExports.jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })] }), "Delete"] })] }), jsxRuntimeExports.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: handleImageUpload })] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: getLabel('enterReason'), onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
|
|
9265
9405
|
};
|
|
9266
9406
|
|
|
9267
9407
|
/**
|