feat: redesign dashboard layout and header tabs to match CraftAlley V2 mockup

This commit is contained in:
Christian Vidal Wolf
2026-06-17 11:29:49 +02:00
parent 41ad8d3598
commit 3cb986bd90
3 changed files with 554 additions and 399 deletions
+8 -8
View File
@@ -51,30 +51,30 @@ const FilterBar: React.FC<FilterBarProps> = ({ filters, onFilterChange, options
</button>
{/* Filter dropdowns - always visible on desktop, toggle on mobile */}
<div className={`max-w-7xl mx-auto flex-wrap gap-2 md:gap-4 items-end ${isExpanded ? 'flex flex-col md:flex-row mt-3' : 'hidden md:flex md:flex-row'}`}>
<div className={`max-w-7xl mx-auto flex-wrap gap-2 md:gap-3 items-end ${isExpanded ? 'flex flex-col md:flex-row mt-3' : 'hidden md:flex md:flex-row'}`}>
<MultiSelectDropdown
label="Customer"
label="CUSTOMER"
selected={filters.customer}
options={options.customer}
onChange={(v) => onFilterChange('customer', v)}
className="w-full md:w-auto md:flex-1"
/>
<MultiSelectDropdown
label="Year"
label="YEAR"
selected={filters.year}
options={options.year}
onChange={(v) => onFilterChange('year', v)}
className="w-full md:w-auto md:flex-1"
/>
<MultiSelectDropdown
label="Month"
label="MONTH"
selected={filters.month}
options={options.month}
onChange={(v) => onFilterChange('month', v)}
className="w-full md:w-auto md:flex-1"
/>
<MultiSelectDropdown
label="Week"
label="WEEK"
selected={filters.week}
options={options.week}
onChange={(v) => onFilterChange('week', v)}
@@ -82,7 +82,7 @@ const FilterBar: React.FC<FilterBarProps> = ({ filters, onFilterChange, options
enableRangeSelect={true}
/>
<MultiSelectDropdown
label="Product Line"
label="PRODUCT LINE"
selected={filters.line}
options={options.line}
onChange={(v) => onFilterChange('line', v)}
@@ -96,7 +96,7 @@ const FilterBar: React.FC<FilterBarProps> = ({ filters, onFilterChange, options
className="w-full md:w-auto md:flex-1"
/>
<MultiSelectDropdown
label="Title"
label="TITLE"
selected={filters.title}
options={options.title}
onChange={(v) => onFilterChange('title', v)}
@@ -110,7 +110,7 @@ const FilterBar: React.FC<FilterBarProps> = ({ filters, onFilterChange, options
className="w-full md:w-auto md:flex-1"
/>
<MultiSelectDropdown
label="Stock"
label="STOCK"
selected={filters.stock}
options={options.stock}
onChange={(v) => onFilterChange('stock', v)}