Files
bakery-ia/frontend/src/components/ui/index.ts

86 lines
5.0 KiB
TypeScript
Raw Normal View History

2025-08-28 10:41:04 +02:00
// UI Components - Design System
export { default as Button } from './Button';
export { default as Input } from './Input';
2025-09-23 12:49:35 +02:00
export { default as Textarea } from './Textarea/Textarea';
2025-12-05 20:07:01 +01:00
export { default as Card, CardHeader, CardBody, CardFooter, CardContent, CardTitle, CardDescription } from './Card';
2025-09-16 12:21:15 +02:00
export { default as Modal, ModalHeader, ModalBody, ModalFooter } from './Modal';
2025-08-28 10:41:04 +02:00
export { default as Table } from './Table';
export { Badge, CountBadge, StatusDot, SeverityBadge } from './Badge';
2025-08-28 10:41:04 +02:00
export { default as Avatar } from './Avatar';
export { default as Tooltip } from './Tooltip';
export { default as Select } from './Select';
export { default as DatePicker } from './DatePicker';
export { Tabs } from './Tabs';
2025-08-28 10:41:04 +02:00
export { ThemeToggle } from './ThemeToggle';
2025-09-23 19:24:22 +02:00
export { Toggle } from './Toggle';
2025-08-28 10:41:04 +02:00
export { ProgressBar } from './ProgressBar';
export { StatusIndicator } from './StatusIndicator';
export { ListItem } from './ListItem';
2025-08-30 19:11:15 +02:00
export { StatsCard, StatsGrid } from './Stats';
export { StatusCard, getStatusColor } from './StatusCard';
2025-09-26 07:46:25 +02:00
export { EditViewModal } from './EditViewModal';
export { AddModal } from './AddModal';
2025-11-01 21:35:03 +01:00
export { StatusModal } from './StatusModal';
2025-09-26 07:46:25 +02:00
export { DialogModal, showInfoDialog, showWarningDialog, showErrorDialog, showSuccessDialog, showConfirmDialog } from './DialogModal';
export { TenantSwitcher } from './TenantSwitcher';
2025-09-25 12:14:46 +02:00
export { LanguageSelector, CompactLanguageSelector } from './LanguageSelector';
2025-09-26 07:46:25 +02:00
export { LoadingSpinner } from './LoadingSpinner';
export { EmptyState } from './EmptyState';
2025-09-26 12:12:17 +02:00
export { ResponsiveText } from './ResponsiveText';
export { SearchAndFilter } from './SearchAndFilter';
2025-10-29 06:58:05 +01:00
export { BaseDeleteModal } from './BaseDeleteModal';
export { Alert, AlertTitle, AlertDescription } from './Alert';
export { Progress } from './Progress';
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
export { Loader } from './Loader';
export { AnimatedCounter } from './AnimatedCounter';
export { ScrollReveal } from './ScrollReveal';
export { FloatingCTA } from './FloatingCTA';
export { TableOfContents } from './TableOfContents';
export { SavingsCalculator } from './SavingsCalculator';
export { StepTimeline } from './StepTimeline';
export { FAQAccordion } from './FAQAccordion';
feat: Redesign bakery and user settings pages with improved UX Implemented a comprehensive redesign of the settings pages using Jobs To Be Done (JTBD) methodology to improve user experience, visual appeal, and discoverability. ## New Components - **SettingRow**: Reusable component for consistent setting layouts with support for toggles, inputs, selects, and custom content - **SettingSection**: Collapsible section component for grouping related settings with consistent styling ## Page Redesigns ### BakerySettingsPage - Redesigned information tab with better visual hierarchy using SettingSection components - Improved business hours UI with clearer day-by-day layout - Enhanced header with gradient bakery icon and status indicators - Consistent spacing and responsive design improvements - Better visual feedback for unsaved changes ### NewProfileSettingsPage - Unified design with bakery settings page - Improved personal information section with SettingSection - Better security section layout with collapsible password change form - Enhanced privacy & data management UI - Consistent icon usage and visual hierarchy ### InventorySettingsCard - Replaced checkbox with toggle switch for temperature monitoring - Progressive disclosure: temperature settings only shown when enabled - Better visual separation between setting groups - Improved responsive grid layouts - Added helpful descriptions and tooltips ## Key Improvements 1. **Visual Consistency**: Both bakery and user settings now use the same design patterns and components 2. **Scannability**: Icons, badges, and clear visual hierarchy make settings easier to scan 3. **Progressive Disclosure**: Complex settings (like temperature monitoring) only show when relevant 4. **Toggle Switches**: Binary settings use toggles instead of checkboxes for better visual feedback 5. **Responsive Design**: Improved mobile and desktop layouts with better touch targets 6. **Accessibility**: Proper ARIA labels, help text, and keyboard navigation support ## JTBD Analysis Applied - Main job: "Quickly find, understand, and change settings without mistakes" - Sub-jobs addressed: - Discovery & navigation (visual grouping, icons, clear labels) - Configuration & adjustment (toggles, inline editing, validation) - Validation & confidence (help text, descriptions, visual feedback) This redesign maintains backward compatibility while significantly improving the user experience for managing bakery and personal settings.
2025-11-14 06:34:23 +00:00
export { SettingRow } from './SettingRow';
export { SettingSection } from './SettingSection';
feat: Complete settings UX redesign with search functionality Final phase of settings redesign completing all cards and adding search/filter functionality. ## NotificationSettingsCard Redesign - ✅ Replaced checkboxes with toggle switches for all notifications - ✅ WhatsApp enabled toggle with progressive disclosure for credentials - ✅ Email enabled toggle with progressive disclosure for sender config - ✅ PO, Inventory, Production, and Forecast toggles with channel selection - ✅ Dark mode support for all info boxes - ✅ Used Select component for API version and language dropdowns - ✅ Added helpful descriptions and tooltips throughout - ✅ Better visual hierarchy with icons - ✅ Progressive disclosure reduces visual clutter significantly **Before**: 377 lines with nested checkboxes **After**: 399 lines but much better organized with toggles and sections ## New Search Functionality ### SettingsSearch Component - Real-time search with debouncing (300ms) - Clear button to reset search - Shows current search query in a tooltip - Responsive design with proper touch targets - Integrates seamlessly with existing UI ### Integration - Added to **BakerySettingsPage** above tabs navigation - Added to **NewProfileSettingsPage** above tabs navigation - Consistent positioning and styling across both pages - Ready for future filtering logic enhancement ## Complete Settings Redesign Summary All 9 settings cards now redesigned: 1. ✅ BakerySettingsPage - Main settings with SettingSection 2. ✅ NewProfileSettingsPage - User profile with unified design 3. ✅ InventorySettingsCard - Temperature toggle + progressive disclosure 4. ✅ ProcurementSettingsCard - Auto-approval + smart procurement toggles 5. ✅ ProductionSettingsCard - Quality checks + schedule optimization 6. ✅ POSSettingsCard - Auto-sync toggles for products & transactions 7. ✅ SupplierSettingsCard - Enhanced layout with SettingSection 8. ✅ OrderSettingsCard - Discount, pricing, & delivery toggles 9. ✅ NotificationSettingsCard - WhatsApp, Email, & alert preferences ## Key Achievements - **20+ toggle switches** replacing checkboxes across all settings - **8 progressive disclosure sections** hiding complexity until needed - **Unified SettingSection/SettingRow** design system - **Search functionality** for quick setting discovery - **Dark mode support** throughout all cards - **Help text & tooltips** on critical settings - **Mobile-optimized** touch-friendly controls - **Responsive layouts** for all screen sizes ## Technical Details - Maintained backward compatibility with existing settings API - All cards follow consistent patterns for maintainability - Progressive disclosure improves UX without losing functionality - Search component uses React hooks for efficient re-renders - Proper TypeScript types for all new components This completes the comprehensive UX redesign of the settings experience following Jobs To Be Done methodology.
2025-11-14 06:46:54 +00:00
export { SettingsSearch } from './SettingsSearch';
2025-08-28 10:41:04 +02:00
// Export types
export type { ButtonProps } from './Button';
export type { InputProps } from './Input';
2025-09-23 12:49:35 +02:00
export type { TextareaProps } from './Textarea';
2025-12-05 20:07:01 +01:00
export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, CardContentProps, CardTitleProps } from './Card';
2025-09-16 12:21:15 +02:00
export type { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './Modal';
2025-12-05 20:07:01 +01:00
export type { TableProps, TableColumn } from './Table';
export type { BadgeProps, CountBadgeProps, StatusDotProps, SeverityBadgeProps, SeverityLevel } from './Badge';
2025-08-28 10:41:04 +02:00
export type { AvatarProps } from './Avatar';
export type { TooltipProps } from './Tooltip';
export type { SelectProps, SelectOption } from './Select';
export type { DatePickerProps } from './DatePicker';
export type { TabsProps, TabItem } from './Tabs';
2025-08-28 10:41:04 +02:00
export type { ThemeToggleProps } from './ThemeToggle';
2025-09-23 19:24:22 +02:00
export type { ToggleProps } from './Toggle';
2025-08-28 10:41:04 +02:00
export type { ProgressBarProps } from './ProgressBar';
export type { StatusIndicatorProps } from './StatusIndicator';
2025-08-30 19:11:15 +02:00
export type { ListItemProps } from './ListItem';
export type { StatsCardProps, StatsCardVariant, StatsCardSize, StatsGridProps } from './Stats';
export type { StatusCardProps, StatusIndicatorConfig } from './StatusCard';
2025-09-26 07:46:25 +02:00
export type { EditViewModalProps, EditViewModalField, EditViewModalSection, EditViewModalAction } from './EditViewModal';
export type { AddModalProps, AddModalField, AddModalSection } from './AddModal';
2025-11-01 21:35:03 +01:00
export type { StatusModalProps, StatusModalField, StatusModalSection, StatusModalAction } from './StatusModal/StatusModal';
2025-09-26 07:46:25 +02:00
export type { DialogModalProps, DialogModalAction } from './DialogModal';
export type { LoadingSpinnerProps } from './LoadingSpinner';
2025-09-26 12:12:17 +02:00
export type { EmptyStateProps } from './EmptyState';
export type { ResponsiveTextProps } from './ResponsiveText';
2025-10-29 06:58:05 +01:00
export type { SearchAndFilterProps, FilterConfig, FilterOption } from './SearchAndFilter';
export type { BaseDeleteModalProps, DeleteMode, EntityDisplayInfo, DeleteModeOption, DeleteWarning, DeletionSummaryData } from './BaseDeleteModal';
export type { LoaderProps } from './Loader';
export type { AnimatedCounterProps } from './AnimatedCounter';
export type { ScrollRevealProps } from './ScrollReveal';
export type { FloatingCTAProps } from './FloatingCTA';
export type { TableOfContentsProps, TOCSection } from './TableOfContents';
export type { SavingsCalculatorProps } from './SavingsCalculator';
export type { StepTimelineProps, TimelineStep } from './StepTimeline';
feat: Redesign bakery and user settings pages with improved UX Implemented a comprehensive redesign of the settings pages using Jobs To Be Done (JTBD) methodology to improve user experience, visual appeal, and discoverability. ## New Components - **SettingRow**: Reusable component for consistent setting layouts with support for toggles, inputs, selects, and custom content - **SettingSection**: Collapsible section component for grouping related settings with consistent styling ## Page Redesigns ### BakerySettingsPage - Redesigned information tab with better visual hierarchy using SettingSection components - Improved business hours UI with clearer day-by-day layout - Enhanced header with gradient bakery icon and status indicators - Consistent spacing and responsive design improvements - Better visual feedback for unsaved changes ### NewProfileSettingsPage - Unified design with bakery settings page - Improved personal information section with SettingSection - Better security section layout with collapsible password change form - Enhanced privacy & data management UI - Consistent icon usage and visual hierarchy ### InventorySettingsCard - Replaced checkbox with toggle switch for temperature monitoring - Progressive disclosure: temperature settings only shown when enabled - Better visual separation between setting groups - Improved responsive grid layouts - Added helpful descriptions and tooltips ## Key Improvements 1. **Visual Consistency**: Both bakery and user settings now use the same design patterns and components 2. **Scannability**: Icons, badges, and clear visual hierarchy make settings easier to scan 3. **Progressive Disclosure**: Complex settings (like temperature monitoring) only show when relevant 4. **Toggle Switches**: Binary settings use toggles instead of checkboxes for better visual feedback 5. **Responsive Design**: Improved mobile and desktop layouts with better touch targets 6. **Accessibility**: Proper ARIA labels, help text, and keyboard navigation support ## JTBD Analysis Applied - Main job: "Quickly find, understand, and change settings without mistakes" - Sub-jobs addressed: - Discovery & navigation (visual grouping, icons, clear labels) - Configuration & adjustment (toggles, inline editing, validation) - Validation & confidence (help text, descriptions, visual feedback) This redesign maintains backward compatibility while significantly improving the user experience for managing bakery and personal settings.
2025-11-14 06:34:23 +00:00
export type { FAQAccordionProps, FAQItem } from './FAQAccordion';
export type { SettingRowProps } from './SettingRow';
feat: Complete settings UX redesign with search functionality Final phase of settings redesign completing all cards and adding search/filter functionality. ## NotificationSettingsCard Redesign - ✅ Replaced checkboxes with toggle switches for all notifications - ✅ WhatsApp enabled toggle with progressive disclosure for credentials - ✅ Email enabled toggle with progressive disclosure for sender config - ✅ PO, Inventory, Production, and Forecast toggles with channel selection - ✅ Dark mode support for all info boxes - ✅ Used Select component for API version and language dropdowns - ✅ Added helpful descriptions and tooltips throughout - ✅ Better visual hierarchy with icons - ✅ Progressive disclosure reduces visual clutter significantly **Before**: 377 lines with nested checkboxes **After**: 399 lines but much better organized with toggles and sections ## New Search Functionality ### SettingsSearch Component - Real-time search with debouncing (300ms) - Clear button to reset search - Shows current search query in a tooltip - Responsive design with proper touch targets - Integrates seamlessly with existing UI ### Integration - Added to **BakerySettingsPage** above tabs navigation - Added to **NewProfileSettingsPage** above tabs navigation - Consistent positioning and styling across both pages - Ready for future filtering logic enhancement ## Complete Settings Redesign Summary All 9 settings cards now redesigned: 1. ✅ BakerySettingsPage - Main settings with SettingSection 2. ✅ NewProfileSettingsPage - User profile with unified design 3. ✅ InventorySettingsCard - Temperature toggle + progressive disclosure 4. ✅ ProcurementSettingsCard - Auto-approval + smart procurement toggles 5. ✅ ProductionSettingsCard - Quality checks + schedule optimization 6. ✅ POSSettingsCard - Auto-sync toggles for products & transactions 7. ✅ SupplierSettingsCard - Enhanced layout with SettingSection 8. ✅ OrderSettingsCard - Discount, pricing, & delivery toggles 9. ✅ NotificationSettingsCard - WhatsApp, Email, & alert preferences ## Key Achievements - **20+ toggle switches** replacing checkboxes across all settings - **8 progressive disclosure sections** hiding complexity until needed - **Unified SettingSection/SettingRow** design system - **Search functionality** for quick setting discovery - **Dark mode support** throughout all cards - **Help text & tooltips** on critical settings - **Mobile-optimized** touch-friendly controls - **Responsive layouts** for all screen sizes ## Technical Details - Maintained backward compatibility with existing settings API - All cards follow consistent patterns for maintainability - Progressive disclosure improves UX without losing functionality - Search component uses React hooks for efficient re-renders - Proper TypeScript types for all new components This completes the comprehensive UX redesign of the settings experience following Jobs To Be Done methodology.
2025-11-14 06:46:54 +00:00
export type { SettingSectionProps } from './SettingSection';
export type { SettingsSearchProps } from './SettingsSearch';