diff --git a/app/components/CardList.tsx b/app/components/CardList.tsx index ebb02f9..bd4e9ce 100644 --- a/app/components/CardList.tsx +++ b/app/components/CardList.tsx @@ -1,66 +1,66 @@ import { listarProdutos } from "@/app/actions"; -import { ProductCard } from "./ProductCard"; +import { ListaProductCard } from "./ListaProductCard"; interface Produto { - id: number; - nome: string; - qtd: number; - tipoUN: string; - comprado: boolean; - listaId: string; - createdAt: Date; - updatedAt: Date; + id: number; + nome: string; + qtd: number; + tipoUN: string; + comprado: boolean; + listaId: string; + createdAt: Date; + updatedAt: Date; } interface CardListProps { - listaId: string; + listaId: string; } export async function CardList({ listaId }: CardListProps) { - const produtos = await listarProdutos(listaId); - - if (produtos.length === 0) { - return ( -
- Nenhum produto cadastrado ainda. -
- ); - } - - const produtosNaoComprados = produtos.filter((p: Produto) => !p.comprado); - const produtosComprados = produtos.filter((p: Produto) => p.comprado); + const produtos = await listarProdutos(listaId); + if (produtos.length === 0) { return ( -
-
-

Produtos Pendentes

-
- {produtosNaoComprados.map((produto: Produto) => ( - - ))} -
-
- - {produtosComprados.length > 0 && ( -
-

- Produtos Comprados -

-
- {produtosComprados.map((produto: Produto) => ( - - ))} -
-
- )} -
+
+ Nenhum produto cadastrado ainda. +
); -} \ No newline at end of file + } + + const produtosNaoComprados = produtos.filter((p: Produto) => !p.comprado); + const produtosComprados = produtos.filter((p: Produto) => p.comprado); + + return ( +
+
+

Produtos Pendentes

+
+ {produtosNaoComprados.map((produto: Produto) => ( + + ))} +
+
+ + {produtosComprados.length > 0 && ( +
+

+ Produtos Comprados +

+
+ {produtosComprados.map((produto: Produto) => ( + + ))} +
+
+ )} +
+ ); +} diff --git a/app/components/FilterSidebar.tsx b/app/components/FilterSidebar.tsx index ccb3873..6cc034c 100644 --- a/app/components/FilterSidebar.tsx +++ b/app/components/FilterSidebar.tsx @@ -1,7 +1,7 @@ "use client"; -import { useState, useEffect } from "react"; -import { Search, Filter, X, AlertTriangle, Zap } from "lucide-react"; +import { useState } from "react"; +import { Filter, X, AlertTriangle, Zap } from "lucide-react"; import * as LucideIcons from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; @@ -15,17 +15,14 @@ import { AccordionItem, AccordionTrigger, } from "@/components/ui/accordion"; -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { ProductFilters, NUTRITION_GRADES, NOVA_GROUPS, - POPULAR_CATEGORIES, POPULAR_CATEGORIES_WITH_ICONS, COMMON_ALLERGENS, - COMMON_ADDITIVES, } from "@/lib/types"; interface FilterSidebarProps { @@ -49,7 +46,7 @@ export function FilterSidebar({ const [searchCategories, setSearchCategories] = useState(""); const [searchAllergens, setSearchAllergens] = useState(""); - const updateFilter = (key: keyof ProductFilters, value: any) => { + const updateFilter = (key: keyof ProductFilters, value: unknown) => { onFiltersChange({ ...filters, [key]: value }); }; @@ -244,8 +241,9 @@ export function FilterSidebar({ .toLowerCase() .includes(searchCategories.toLowerCase()) ).map((category) => { - const IconComponent = - LucideIcons[category.icon as keyof typeof LucideIcons]; + const IconComponent = LucideIcons[ + category.icon as keyof typeof LucideIcons + ] as React.ComponentType<{ className?: string }> | undefined; return (
  • Como funciona @@ -49,7 +49,7 @@ export function Footer() {
  • Recursos diff --git a/app/components/ListaProductCard.tsx b/app/components/ListaProductCard.tsx new file mode 100644 index 0000000..870d98d --- /dev/null +++ b/app/components/ListaProductCard.tsx @@ -0,0 +1,120 @@ +"use client"; + +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Check, X, Edit, Trash2 } from "lucide-react"; +import { toggleComprado } from "@/app/actions"; + +interface Produto { + id: number; + nome: string; + qtd: number; + tipoUN: string; + comprado: boolean; + listaId: string; + createdAt: Date; + updatedAt: Date; +} + +interface ListaProductCardProps { + produto: Produto; + listaId: string; +} + +export function ListaProductCard({ produto, listaId }: ListaProductCardProps) { + const handleToggleComprado = async () => { + try { + await toggleComprado(produto.id, listaId); + } catch (error) { + console.error("Erro ao alterar status do produto:", error); + } + }; + + // listaId é usado na função handleToggleComprado + + return ( + + +
    +
    +

    + {produto.nome} +

    + +
    + + {produto.qtd} {produto.tipoUN} + + + {produto.comprado && ( + + Comprado + + )} +
    +
    +
    + +
    + + + + + +
    +     +     + ); +} diff --git a/app/components/ProductCard.tsx b/app/components/ProductCard.tsx index 2a2cb37..2e24936 100644 --- a/app/components/ProductCard.tsx +++ b/app/components/ProductCard.tsx @@ -4,16 +4,9 @@ import { useRouter } from "next/navigation"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; +import Image from "next/image"; import { Product } from "@/lib/openFoodFactsApi"; -import { - Heart, - AlertTriangle, - Zap, - Star, - Plus, - Eye, - TrendingUp, -} from "lucide-react"; +import { Heart, AlertTriangle, Zap, Plus, Eye } from "lucide-react"; import { formatNutritionData } from "@/lib/openFoodFactsApi"; interface ProductCardProps { @@ -111,15 +104,19 @@ export function ProductCard({ product, className = "" }: ProductCardProps) { return ( {/* Imagem do Produto */}
    - {product.product_name {/* Overlay com badges */} diff --git a/app/components/SortDropdown.tsx b/app/components/SortDropdown.tsx index 6efa41a..b4e0d43 100644 --- a/app/components/SortDropdown.tsx +++ b/app/components/SortDropdown.tsx @@ -4,7 +4,7 @@ import { ChevronDown, TrendingUp, Zap, - AlphabeticalOrder, + SortAsc, Building2, Flame, Droplet, @@ -23,13 +23,16 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; -import { SORT_OPTIONS, SortOption } from "@/lib/types"; +import { SORT_OPTIONS } from "@/lib/types"; // Mapear ícones para cada opção -const SORT_ICONS: Record = { +const SORT_ICONS: Record< + string, + React.ComponentType<{ className?: string }> +> = { relevance: TrendingUp, nutrition_grade: Zap, - name: AlphabeticalOrder, + name: SortAsc, brand: Building2, energy: Flame, fat: Droplet, @@ -60,7 +63,7 @@ export function SortDropdown({ - + {SORT_OPTIONS.map((option) => { const IconComponent = SORT_ICONS[option.value]; return ( diff --git a/app/components/header.tsx b/app/components/header.tsx index 3276c9a..8c4d227 100644 --- a/app/components/header.tsx +++ b/app/components/header.tsx @@ -1,7 +1,7 @@ "use client"; import { useState, useEffect } from "react"; import { useTheme } from "next-themes"; -import { Sun, Moon, Menu, X, ScanLine, Info } from "lucide-react"; +import { Sun, Moon, Menu, X, ScanLine } from "lucide-react"; import { Button } from "@/components/ui/button"; export function Header() { @@ -43,13 +43,13 @@ export function Header() { {/* Desktop Navigation */}