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

Fix frontend 1

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-08-28 18:07:16 +02:00
parent 9ea6794923
commit 68bb5a6449
11 changed files with 427 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/domain/dashboard/QuickActions.tsx
View File

@@ -286,7 +286,7 @@ const QuickActions: React.FC<QuickActionsProps> = ({
'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
sizeClasses[size],
{
'bg-white hover:bg-[var(--bg-secondary)]': !action.backgroundGradient,
'bg-[var(--bg-primary)] hover:bg-[var(--bg-secondary)]': !action.backgroundGradient,
'bg-gradient-to-br text-white hover:opacity-90': action.backgroundGradient,
'opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none': isDisabled,
}

6
frontend/src/components/domain/inventory/InventoryForm.tsx
View File

@@ -499,7 +499,7 @@ export const InventoryForm: React.FC<InventoryFormProps> = ({
type="number"
step="0.01"
min="0"
value={formData.low_stock_threshold.toString()}
value={formData.low_stock_threshold?.toString() || ''}
onChange={(e) => handleInputChange('low_stock_threshold', parseFloat(e.target.value) || 0)}
error={errors.low_stock_threshold}
placeholder="10"
@@ -510,7 +510,7 @@ export const InventoryForm: React.FC<InventoryFormProps> = ({
type="number"
step="0.01"
min="0"
value={formData.reorder_point.toString()}
value={formData.reorder_point?.toString() || ''}
onChange={(e) => handleInputChange('reorder_point', parseFloat(e.target.value) || 0)}
error={errors.reorder_point}
placeholder="20"
@@ -521,7 +521,7 @@ export const InventoryForm: React.FC<InventoryFormProps> = ({
type="number"
step="0.01"
min="0"
value={formData.reorder_quantity.toString()}
value={formData.reorder_quantity?.toString() || ''}
onChange={(e) => handleInputChange('reorder_quantity', parseFloat(e.target.value) || 0)}
error={errors.reorder_quantity}
placeholder="50"

17
frontend/src/components/layout/AppShell/AppShell.tsx
View File

@@ -205,6 +205,7 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
isOpen={isSidebarOpen}
isCollapsed={isSidebarCollapsed}
onClose={() => setIsSidebarOpen(false)}
onToggleCollapse={toggleSidebar}
className="z-[var(--z-fixed)]"
/>
@@ -223,15 +224,13 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
<main
className={clsx(
'flex-1 flex flex-col transition-all duration-300 ease-in-out',
// Adjust margins based on sidebar state
shouldShowSidebar && isAuthenticated && {
'lg:ml-[var(--sidebar-width)]': !isSidebarCollapsed,
'lg:ml-16': isSidebarCollapsed,
},
// Add header offset
shouldShowHeader && 'pt-[var(--header-height)]',
// Adjust margins based on sidebar state
shouldShowSidebar && isAuthenticated && !isSidebarCollapsed && 'lg:ml-[var(--sidebar-width)]',
shouldShowSidebar && isAuthenticated && isSidebarCollapsed && 'lg:ml-[var(--sidebar-collapsed-width)]',
// Add padding to content
padded && 'p-4 lg:p-6'
padded && 'px-4 lg:px-6 pb-4 lg:pb-6'
)}
role="main"
aria-label="Contenido principal"
@@ -247,10 +246,8 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
showPrivacyLinks={true}
className={clsx(
'transition-all duration-300 ease-in-out',
shouldShowSidebar && isAuthenticated && {
'lg:ml-[var(--sidebar-width)]': !isSidebarCollapsed,
'lg:ml-16': isSidebarCollapsed,
}
shouldShowSidebar && isAuthenticated && !isSidebarCollapsed && 'lg:ml-[var(--sidebar-width)]',
shouldShowSidebar && isAuthenticated && isSidebarCollapsed && 'lg:ml-[var(--sidebar-collapsed-width)]'
)}
/>
)}

27
frontend/src/components/layout/Sidebar/Sidebar.tsx
View File

@@ -40,6 +40,10 @@ export interface SidebarProps {
* Callback when sidebar is closed (mobile)
*/
onClose?: () => void;
/**
* Callback when sidebar collapse state is toggled (desktop)
*/
onToggleCollapse?: () => void;
/**
* Custom navigation items
*/
@@ -110,6 +114,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
isOpen = false,
isCollapsed = false,
onClose,
onToggleCollapse,
customItems,
showCollapseButton = true,
showFooter = true,
@@ -340,12 +345,12 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
disabled={item.disabled}
data-path={item.path}
className={clsx(
'w-full p-3 rounded-lg transition-all duration-200',
'w-full rounded-lg transition-all duration-200',
'focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20',
isActive && 'bg-[var(--color-primary)]/10 border-l-2 border-[var(--color-primary)]',
!isActive && 'hover:bg-[var(--bg-secondary)]',
item.disabled && 'opacity-50 cursor-not-allowed',
isCollapsed && !hasChildren && 'flex justify-center p-3'
isCollapsed && !hasChildren ? 'flex justify-center items-center p-2 mx-1' : 'p-3'
)}
aria-expanded={hasChildren ? isExpanded : undefined}
aria-current={isActive ? 'page' : undefined}
@@ -388,29 +393,29 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
'bg-[var(--bg-primary)] border-r border-[var(--border-primary)]',
'transition-all duration-300 ease-in-out z-[var(--z-fixed)]',
'hidden lg:flex lg:flex-col',
isCollapsed ? 'w-16' : 'w-[var(--sidebar-width)]',
isCollapsed ? 'w-[var(--sidebar-collapsed-width)]' : 'w-[var(--sidebar-width)]',
className
)}
aria-label="Navegación principal"
>
{/* Navigation */}
<nav className="flex-1 p-4 overflow-y-auto">
<ul className="space-y-2">
<nav className={clsx('flex-1 overflow-y-auto', isCollapsed ? 'px-1 py-4' : 'p-4')}>
<ul className={clsx(isCollapsed ? 'space-y-1' : 'space-y-2')}>
{visibleItems.map(item => renderItem(item))}
</ul>
</nav>
{/* Collapse button */}
{showCollapseButton && (
<div className="p-4 border-t border-[var(--border-primary)]">
<div className={clsx('border-t border-[var(--border-primary)]', isCollapsed ? 'p-2' : 'p-4')}>
<Button
variant="ghost"
size="sm"
onClick={() => {
// This should be handled by parent component
console.log('Toggle collapse');
}}
className="w-full flex items-center justify-center"
onClick={onToggleCollapse}
className={clsx(
'w-full flex items-center justify-center',
isCollapsed ? 'p-2' : 'px-4 py-2'
)}
aria-label={isCollapsed ? 'Expandir sidebar' : 'Contraer sidebar'}
>
{isCollapsed ? (

42
frontend/src/components/ui/Table/Table.tsx
View File

@@ -229,14 +229,14 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({
};
const variantClasses = {
default: 'border-collapse border border-table-border',
default: 'border-collapse',
striped: 'border-collapse',
bordered: 'border-collapse border border-table-border',
bordered: 'border-collapse border border-[var(--border-primary)]',
borderless: 'border-collapse',
};
const tableClasses = clsx(
'w-full bg-table-bg',
'w-full bg-[var(--bg-primary)]',
sizeClasses[size],
variantClasses[variant],
{
@@ -285,10 +285,10 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({
const hasExpansion = expandable;
return (
<thead className={clsx('bg-table-header-bg', { 'sticky top-0 z-10': sticky })}>
<thead className={clsx('bg-[var(--bg-secondary)]', { 'sticky top-0 z-10': sticky })}>
<tr>
{hasSelection && (
<th className="px-4 py-3 text-left font-medium text-text-primary border-b border-table-border w-12">
<th className="px-4 py-3 text-left font-medium text-[var(--text-primary)] border-b border-[var(--border-primary)] w-12">
{rowSelection.type !== 'radio' && (
<input
type="checkbox"
@@ -302,7 +302,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({
</th>
)}
{hasExpansion && (
<th className="px-4 py-3 text-left font-medium text-text-primary border-b border-table-border w-12"></th>
<th className="px-4 py-3 text-left font-medium text-[var(--text-primary)] border-b border-[var(--border-primary)] w-12"></th>
)}
{columns.map((column) => {
const isSorted = sortState.field === (column.sortKey || column.key);
@@ -311,12 +311,12 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({
<th
key={column.key}
className={clsx(
'px-4 py-3 font-medium text-text-primary border-b border-table-border',
'px-4 py-3 font-medium text-[var(--text-primary)] border-b border-[var(--border-primary)]',
{
'text-left': column.align === 'left' || !column.align,
'text-center': column.align === 'center',
'text-right': column.align === 'right',
'cursor-pointer hover:bg-table-row-hover': column.sortable,
'cursor-pointer hover:bg-[var(--bg-secondary)] transition-colors duration-150': column.sortable,
},
column.headerClassName
)}
@@ -372,12 +372,13 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({
<tr
{...rowProps}
className={clsx(
'transition-colors duration-150',
'group transition-colors duration-200 ease-in-out',
{
'bg-table-row-hover': hover && !isSelected,
'bg-table-row-selected': isSelected,
'odd:bg-bg-secondary': variant === 'striped' && !isSelected,
'border-b border-table-border': variant !== 'borderless',
'hover:bg-[var(--bg-secondary)] hover:shadow-sm': hover && !isSelected,
'bg-[var(--color-primary)]/10': isSelected,
'odd:bg-[var(--bg-tertiary)]/30': variant === 'striped' && !isSelected && !hover,
'odd:hover:bg-[var(--bg-secondary)]': variant === 'striped' && hover && !isSelected,
'border-b border-[var(--border-primary)]': variant !== 'borderless',
'cursor-pointer': expandable?.expandRowByClick,
},
rowProps.className
@@ -385,7 +386,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({
onClick={expandable?.expandRowByClick ? () => handleExpand(record, !isExpanded) : rowProps.onClick}
>
{rowSelection && (
<td className="px-4 py-3 border-b border-table-border">
<td className="px-4 py-3 border-b border-[var(--border-primary)]">
<input
type={rowSelection.type || 'checkbox'}
className="rounded border-input-border focus:ring-color-primary"
@@ -398,7 +399,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({
</td>
)}
{expandable && (
<td className="px-4 py-3 border-b border-table-border">
<td className="px-4 py-3 border-b border-[var(--border-primary)]">
{canExpand && (
<button
type="button"
@@ -431,11 +432,12 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({
<td
key={column.key}
className={clsx(
'px-4 py-3 border-b border-table-border',
'px-4 py-3 border-b border-[var(--border-primary)] transition-colors duration-200 ease-in-out',
{
'text-left': column.align === 'left' || !column.align,
'text-center': column.align === 'center',
'text-right': column.align === 'right',
'group-hover:text-[var(--text-primary)]': true,
},
column.className
)}
@@ -450,7 +452,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({
<tr>
<td
colSpan={columns.length + (rowSelection ? 1 : 0) + (expandable ? 1 : 0)}
className="px-4 py-0 border-b border-table-border bg-bg-secondary"
className="px-4 py-0 border-b border-[var(--border-primary)] bg-[var(--bg-secondary)]"
>
<div className="py-4" style={{ paddingLeft: expandable.indentSize || 24 }}>
{expandable.expandedRowRender(record, index)}
@@ -462,7 +464,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({
);
})}
{summary && (
<tr className="bg-table-header-bg border-t-2 border-table-border font-medium">
<tr className="bg-[var(--bg-secondary)] border-t-2 border-[var(--border-primary)] font-medium">
<td colSpan={columns.length + (rowSelection ? 1 : 0) + (expandable ? 1 : 0)}>
{summary(data)}
</td>
@@ -472,8 +474,8 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({
);
return (
<div className="space-y-4">
<div className={containerClasses}>
<div className="space-y-4 bg-[var(--bg-primary)]">
<div className={clsx(containerClasses, 'bg-[var(--bg-primary)]')}>
<table
ref={ref}
className={tableClasses}