Improve the frontend and fix TODOs

This commit is contained in:
Urtzi Alfaro
2025-10-24 13:05:04 +02:00
parent 07c33fa578
commit 61376b7a9f
100 changed files with 8284 additions and 3419 deletions

View File

@@ -278,13 +278,63 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
setSearchValue(e.target.value);
}, []);
// Filter navigation items based on search
const filteredItems = useMemo(() => {
if (!searchValue.trim()) {
return visibleItems;
}
const searchLower = searchValue.toLowerCase();
const filterItems = (items: NavigationItem[]): NavigationItem[] => {
return items.filter(item => {
// Check if item label matches
const labelMatches = item.label.toLowerCase().includes(searchLower);
// Check if any child matches
if (item.children && item.children.length > 0) {
const childrenMatch = item.children.some(child =>
child.label.toLowerCase().includes(searchLower)
);
return labelMatches || childrenMatch;
}
return labelMatches;
}).map(item => {
// If item has children, filter them too
if (item.children && item.children.length > 0) {
return {
...item,
children: item.children.filter(child =>
child.label.toLowerCase().includes(searchLower)
)
};
}
return item;
});
};
return filterItems(visibleItems);
}, [visibleItems, searchValue]);
const handleSearchSubmit = useCallback((e: React.FormEvent) => {
e.preventDefault();
if (searchValue.trim()) {
// TODO: Implement search functionality
console.log('Search:', searchValue);
// Search is now live-filtered as user types
if (searchValue.trim() && filteredItems.length > 0) {
// Navigate to first matching item
const firstItem = filteredItems[0];
if (firstItem.to) {
navigate(firstItem.to);
setSearchValue('');
} else if (firstItem.children && firstItem.children.length > 0) {
const firstChild = firstItem.children[0];
if (firstChild.to) {
navigate(firstChild.to);
setSearchValue('');
}
}
}
}, [searchValue]);
}, [searchValue, filteredItems, navigate]);
const clearSearch = useCallback(() => {
setSearchValue('');
@@ -734,7 +784,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
{/* Navigation */}
<nav className={clsx('flex-1 overflow-y-auto overflow-x-hidden', isCollapsed ? 'px-1 py-4' : 'p-4')}>
<ul className={clsx(isCollapsed ? 'space-y-1 flex flex-col items-center' : 'space-y-2')}>
{visibleItems.map(item => renderItem(item))}
{filteredItems.map(item => renderItem(item))}
</ul>
</nav>
@@ -785,14 +835,14 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
<div className="py-1">
<button
onClick={() => {
navigate('/app/settings/personal-info');
navigate('/app/settings');
setIsProfileMenuOpen(false);
if (onClose) onClose();
}}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-secondary)] transition-colors"
>
<User className="h-4 w-4" />
{t('common:profile.my_profile', 'Mi perfil')}
<Settings className="h-4 w-4" />
{t('common:profile.settings', 'Ajustes')}
</button>
<button
onClick={() => {
@@ -934,7 +984,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
{/* Navigation */}
<nav className="flex-1 p-4 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
<ul className="space-y-2 pb-4">
{visibleItems.map(item => renderItem(item))}
{filteredItems.map(item => renderItem(item))}
</ul>
</nav>
@@ -975,17 +1025,6 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
{isProfileMenuOpen && (
<div className="mx-4 mb-2 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg py-2">
<div className="py-1">
<button
onClick={() => {
navigate('/app/settings/profile');
setIsProfileMenuOpen(false);
if (onClose) onClose();
}}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-tertiary)] transition-colors"
>
<User className="h-4 w-4" />
{t('common:profile.profile', 'Perfil')}
</button>
<button
onClick={() => {
navigate('/app/settings');
@@ -995,7 +1034,18 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-tertiary)] transition-colors"
>
<Settings className="h-4 w-4" />
{t('common:profile.settings', 'Configuración')}
{t('common:profile.settings', 'Ajustes')}
</button>
<button
onClick={() => {
navigate('/app/settings/organizations');
setIsProfileMenuOpen(false);
if (onClose) onClose();
}}
className="w-full px-4 py-2 text-left text-sm flex items-center gap-3 hover:bg-[var(--bg-tertiary)] transition-colors"
>
<Factory className="h-4 w-4" />
{t('common:profile.my_locations', 'Mis Locales')}
</button>
</div>