bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix UI for inventory page

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-09-15 15:31:27 +02:00
parent 36cfc88f93
commit 65a53c6d16
10 changed files with 953 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/components/ui/StatusModal/StatusModal.tsx
View File

@@ -9,7 +9,7 @@ import { formatters } from '../Stats/StatsPresets';
export interface StatusModalField {
label: string;
value: string | number | React.ReactNode;
type?: 'text' | 'currency' | 'date' | 'datetime' | 'percentage' | 'list' | 'status' | 'image' | 'email' | 'tel' | 'number';
type?: 'text' | 'currency' | 'date' | 'datetime' | 'percentage' | 'list' | 'status' | 'image' | 'email' | 'tel' | 'number' | 'select';
highlight?: boolean;
span?: 1 | 2; // For grid layout
editable?: boolean; // Whether this field can be edited
@@ -52,6 +52,7 @@ export interface StatusModalProps {
onEdit?: () => void;
onSave?: () => Promise<void>;
onCancel?: () => void;
onFieldChange?: (sectionIndex: number, fieldIndex: number, value: string | number) => void;
// Layout
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -186,6 +187,26 @@ const renderEditableField = (
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent"
/>
);
case 'select':
return (
<select
value={String(field.value)}
onChange={(e) => onChange?.(e.target.value)}
required={field.required}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent bg-[var(--bg-primary)]"
>
{field.placeholder && (
<option value="" disabled>
{field.placeholder}
</option>
)}
{field.options?.map((option, index) => (
<option key={index} value={option.value}>
{option.label}
</option>
))}
</select>
);
default:
return (
<Input
@@ -219,6 +240,7 @@ export const StatusModal: React.FC<StatusModalProps> = ({
onEdit,
onSave,
onCancel,
onFieldChange,
size = 'lg',
loading = false,
}) => {
@@ -364,11 +386,11 @@ export const StatusModal: React.FC<StatusModalProps> = ({
<div className="space-y-6">
{sections.map((section, sectionIndex) => (
<div key={sectionIndex} className="space-y-4">
<div className="flex items-center gap-2 pb-2 border-b border-[var(--border-primary)]">
<div className="flex items-baseline gap-3 pb-3 border-b border-[var(--border-primary)]">
{section.icon && (
<section.icon className="w-4 h-4 text-[var(--text-tertiary)]" />
<section.icon className="w-5 h-5 text-[var(--text-secondary)] flex-shrink-0 mt-0.5" />
)}
<h3 className="font-medium text-[var(--text-primary)]">
<h3 className="font-medium text-[var(--text-primary)] leading-tight">
{section.title}
</h3>
</div>
@@ -387,7 +409,11 @@ export const StatusModal: React.FC<StatusModalProps> = ({
? 'font-semibold text-[var(--text-primary)]'
: 'text-[var(--text-primary)]'
}`}>
{renderEditableField(field, mode === 'edit')}
{renderEditableField(
field,
mode === 'edit',
(value: string | number) => onFieldChange?.(sectionIndex, fieldIndex, value)
)}
</dd>
</div>
))}