[V0_FILE]typescriptreact:file="page.tsx" isQuickEdit="true" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@headlessui/react' import { useState } from 'react'; const pharmacies = [ { id: 1, name: "Apteka Nova", address: "ul. Narutowicza 45", coords: { x: 120, y: 150 }, availability: false, priceMultiplier: 0.9025 // Results in 18.05 zł }, { id: 2, name: "Apteka Pod Słońcem", address: "ul. Krakowska 28", coords: { x: 180, y: 100 }, availability: true, priceMultiplier: 0.931 // Results in 18.62 zł }, { id: 3, name: "Apteka Pod Złotym Lwem", address: "ul. Krakowskie Przedmieście 12", coords: { x: 250, y: 180 }, availability: true, priceMultiplier: 0.95 // Results in 19.00 zł }, { id: 4, name: "Apteka Zdrowia", address: "ul. Zielona 15", coords: { x: 200, y: 220 }, availability: true, priceMultiplier: 0.969 // Results in 19.38 zł }, { id: 5, name: "Apteka Centralna", address: "ul. Lubartowska 24", coords: { x: 150, y: 160 }, availability: true, priceMultiplier: 0.9975 // Results in 19.95 zł } ]; function ProductDetails({ product, handleAddToCart }) { const [selectedProductForCart, setSelectedProductForCart] = useState(null); const [selectedPharmacy, setSelectedPharmacy] = useState(null); const handleSelectPharmacy = (pharmacy) => { setSelectedPharmacy(pharmacy); }; return ( <> {selectedProductForCart && ( )} ); } export default ProductDetails; [V0_FILE]typescriptreact:file="components/pharmacy-selector.tsx" 'use client' import { X } from 'lucide-react' import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" interface Pharmacy { id: number name: string address: string availability: boolean finalPrice: number } interface PharmacySelectorProps { isOpen: boolean onClose: () => void product: { name: string basePrice: number } onSelectPharmacy: (pharmacy: Pharmacy) => void } export function PharmacySelector({ isOpen, onClose, product, onSelectPharmacy }: PharmacySelectorProps) { const pharmacies = [ { id: 1, name: "Apteka Nova", address: "ul. Narutowicza 45", finalPrice: 18.05, availability: false }, { id: 2, name: "Apteka Pod Słońcem", address: "ul. Krakowska 28", finalPrice: 18.62, availability: true }, { id: 3, name: "Apteka Pod Złotym Lwem", address: "ul. Krakowskie Przedmieście 12", finalPrice: 19.00, availability: true }, { id: 4, name: "Apteka Zdrowia", address: "ul. Zielona 15", finalPrice: 19.38, availability: true }, { id: 5, name: "Apteka Centralna", address: "ul. Lubartowska 24", finalPrice: 19.95, availability: true } ] return ( ) } [V0_FILE]typescriptreact:file="components/product-card.tsx" 'use client' import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { PharmacySelector } from "@/components/pharmacy-selector" import { useToast } from "@/components/ui/use-toast" interface ProductCardProps { product: { id: number name: string basePrice: number availability: boolean category: string } onAddToCart: (product: any, pharmacy: any) => void } export function ProductCard({ product, onAddToCart }: ProductCardProps) { const [isPharmacySelectorOpen, setIsPharmacySelectorOpen] = useState(false) const { toast } = useToast() const handlePharmacySelect = (pharmacy: any) => { onAddToCart(product, pharmacy) setIsPharmacySelectorOpen(false) toast({ title: "Produkt dodany do koszyka", description: `${product.name} z apteki ${pharmacy.name}`, }) } return (

{product.name}

{product.basePrice.toFixed(2)} zł

{!product.availability ? ( Sprawdź w innych aptekach ) : ( Dostępny od ręki )}

setIsPharmacySelectorOpen(false)} product={product} onSelectPharmacy={handlePharmacySelect} />

) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" 'use client' import React, { useState } from 'react'; import { Search, ShoppingCart, User, MapPin, Menu, X, ChevronLeft, Package, Clock, Settings, LogOut, Eye } from 'lucide-react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { ProductCard } from "@/components/product-card"; interface CartItem { productId: number productName: string pharmacyId: number pharmacyName: string price: number quantity: number } const PharmacyApp = () => { const [selectedProduct, setSelectedProduct] = useState(null); const [loginData, setLoginData] = useState({ email: '', password: '' }); const [loginError, setLoginError] = useState(''); const [selectedPharmacy, setSelectedPharmacy] = useState(null); const [selectedOrder, setSelectedOrder] = useState(null); const [cart, setCart] = useState([]); const [isCartOpen, setIsCartOpen] = useState(false); const [selectedProductForCart, setSelectedProductForCart] = useState(null); const [selectedPharmacyForCart, setSelectedPharmacyForCart] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [selectedCity, setSelectedCity] = useState('Lublin'); const [selectedCategory, setSelectedCategory] = useState(null); const [activeFilters, setActiveFilters] = useState([]); const [isLoggedIn, setIsLoggedIn] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const pharmacies = [ { id: 1, name: "Apteka Pod Złotym Lwem", address: "ul. Krakowskie Przedmieście 12", coords: { x: 120, y: 150 }, availability: true, priceMultiplier: 1.0 }, { id: 2, name: "Apteka Centralna", address: "ul. Lubartowska 24", coords: { x: 180, y: 100 }, availability: true, priceMultiplier: 1.05 }, { id: 3, name: "Apteka Nova", address: "ul. Narutowicza 45", coords: { x: 250, y: 180 }, availability: false, priceMultiplier: 0.95 }, { id: 4, name: "Apteka Pod Słońcem", address: "ul. Krakowska 28", coords: { x: 200, y: 220 }, availability: true, priceMultiplier: 0.98 }, { id: 5, name: "Apteka Zdrowia", address: "ul. Zielona 15", coords: { x: 150, y: 160 }, availability: true, priceMultiplier: 1.02 } ]; const userData = { name: "Jan Kowalski", email: "jan.kowalski@email.pl", orders: [ { id: "RX-2024-001", date: "2024-01-10", status: "Zrealizowane", total: 156.99, pharmacy: "Apteka Centrum, ul. Warszawska 15", items: [ { name: "Ibuprom Max, 400mg", quantity: 2, price: 24.99 }, { name: "Rutinoscorbin", quantity: 1, price: 15.99 }, { name: "Bepanthen Plus krem", quantity: 1, price: 35.99 }, { name: "Wit. D3 2000j.m.", quantity: 1, price: 29.99 } ] }, { id: "RX-2024-002", date: "2024-01-05", status: "W realizacji", total: 89.50, pharmacy: "Apteka Pod Słońcem, ul. Krakowska 28", items: [ { name: "Aspirin C", quantity: 1, price: 28.50 }, { name: "Calcium D3", quantity: 2, price: 19.99 }, { name: "Voltaren żel", quantity: 1, price: 32.99 } ] }, { id: "RX-2023-089", date: "2023-12-28", status: "Zrealizowane", total: 199.99, pharmacy: "Apteka Centrum, ul. Warszawska 15", items: [ { name: "Gripex Hot Active", quantity: 2, price: 29.99 }, { name: "Neosine Forte", quantity: 1, price: 45.99 }, { name: "Cholinex", quantity: 1, price: 18.99 }, { name: "Strepsils Intensive", quantity: 2, price: 22.99 } ] } ] }; const categories = [ { id: 'leki', name: 'Leki i profilaktyka' }, { id: 'witaminy', name: 'Witaminy i minerały' }, { id: 'pielegnacja', name: 'Pielęgnacja i skin care' }, { id: 'sport', name: 'Sport i zdrowie' }, { id: 'dzieci', name: 'Dla dzieci i mam' }, { id: 'medyczne', name: 'Produkty medyczne' }, { id: 'ortopedia', name: 'Ortopedia i rehabilitacja' }, { id: 'zwierzeta', name: 'Dla zwierząt' } ]; const products = [ { id: 1, name: 'NUROFEN 400MG', price: '8,76 zł', category: 'leki', availability: true, basePrice: 8.76 }, { id: 2, name: 'NUROFEN 200MG', price: '7,56 zł', category: 'leki', availability: true, basePrice: 7.56 }, { id: 3, name: 'APAP', price: '9,99 zł', category: 'leki', availability: true, basePrice: 9.99 }, { id: 4, name: 'IBUPROM MAX', price: '12,99 zł', category: 'leki', availability: false, basePrice: 12.99 }, { id: 5, name: 'GRIPEX', price: '15,99 zł', category: 'leki', availability: true, basePrice: 15.99 }, { id: 6, name: 'ASPIRIN', price: '11,99 zł', category: 'leki', availability: true, basePrice: 11.99 }, { id: 7, name: 'Witamina D3 2000UI', price: '19,99 zł', category: 'witaminy', availability: true, basePrice: 19.99 }, { id: 8, name: 'Magnez + B6', price: '22,50 zł', category: 'witaminy', availability: true, basePrice: 22.50 }, { id: 9, name: 'Multiwitamina', price: '29,99 zł', category: 'witaminy', availability: true, basePrice: 29.99 }, { id: 10, name: 'Omega 3', price: '39,99 zł', category: 'witaminy', availability: false, basePrice: 39.99 }, ]; const filters = [ { id: 'dostepne', name: 'Dostępne od ręki' }, { id: 'bez-recepty', name: 'Bez recepty' }, { id: 'promocje', name: 'W promocji' } ]; const handleSelectPharmacy = (pharmacy) => { setSelectedPharmacyForCart(pharmacy); }; const handleAddToCart = (product, pharmacy) => { // Convert string price (e.g. "8,76 zł") to number const basePrice = typeof product.basePrice === 'number' ? product.basePrice : parseFloat(product.price.replace(',', '.').replace(' zł', '')); const newItem: CartItem = { productId: product.id, productName: product.name, pharmacyId: pharmacy.id, pharmacyName: pharmacy.name, price: parseFloat((basePrice * pharmacy.priceMultiplier).toFixed(2)), quantity: 1 }; setCart(prevCart => { const existingItemIndex = prevCart.findIndex( item => item.productId === product.id && item.pharmacyId === pharmacy.id ); if (existingItemIndex > -1) { const newCart = [...prevCart]; newCart[existingItemIndex].quantity += 1; return newCart; } return [...prevCart, newItem]; }); setSelectedProductForCart(null); setSelectedPharmacyForCart(null); }; const removeFromCart = (index) => { const newCart = [...cart]; newCart.splice(index, 1); setCart(newCart); }; const getCartTotal = () => { return cart.reduce((sum, item) => { const itemTotal = item.price * item.quantity; return isNaN(itemTotal) ? sum : sum + itemTotal; }, 0).toFixed(2); }; const handleLogin = () => { if (loginData.email === 'kowalski' && loginData.password === 'apteka123') { setIsLoggedIn(true); setLoginError(''); } else { setLoginError('Niepoprawny login lub hasło'); } }; const handleCategorySelect = (categoryId) => { setSelectedCategory(categoryId); }; const handleFilterToggle = (filterId) => { setActiveFilters(prev => prev.includes(filterId) ? prev.filter(f => f !== filterId) : [...prev, filterId] ); }; const filteredProducts = products.filter(product => { if (selectedCategory && product.category !== selectedCategory) return false; if (activeFilters.includes('dostepne') && !product.availability) return false; if (searchQuery && !product.name.toLowerCase().includes(searchQuery.toLowerCase())) return false; return true; }); return (

{/* Header */}

{/* Logo and Search */}

PharmFind

setSearchQuery(e.target.value)} />

{/* City Selector and Actions */}

setSelectedCity('Lublin')}>Lublin setSelectedCity('Warszawa')}>Warszawa setSelectedCity('Kraków')}>Kraków

{/* Categories */}

{/* Mobile Menu */} {isMobileMenuOpen && (

setSearchQuery(e.target.value)} />

handleCategorySelect(category.id)} > {'{'}{category.name}{'}'}

)}

{/* Filters and Products */}

{/* Filters */}

Filtry

{filters.map((filter) => ( handleFilterToggle(filter.id)} className="rounded border-gray-300" /> {'{'}{filter.name}{'}'} ))}

{activeFilters.length > 0 && (

{activeFilters.map(filterId => { const filter = filters.find(f => f.id === filterId); return ( handleFilterToggle(filterId)} > {'{'}{filter.name}{'}'} × ); })}

)}

{/* Products */}

{filteredProducts.map((product) => ( ))}

{/* Product Details Modal with Map */} {selectedProduct && (

{'{'}{selectedProduct.name}{'}'}

Cena {'{'}{selectedProduct.price}{'}'}

Bez recepty {selectedProduct.availability ? ( Dostępny od ręki ) : ( Sprawdź dostępność )}

Szczegóły produktu

Kategoria: {'{'}{categories.find(c => c.id === selectedProduct.category)?.name}{'}'}
Producent: Przykładowy Producent
Dawka: {'{'}{selectedProduct.basePrice}{'}'}mg

Dostępność w aptekach

{/* Selected pharmacy info */} {selectedPharmacy && (

{'{'}{selectedPharmacy.name}{'}'}

{'{'}{selectedPharmacy.address}{'}'}

00 text-green-600" : "bg-red-100 text-red-600"} > {'{'}{selectedPharmacy.availability ? "Dostępne" : "Sprawdź dostępność"}{'}'}

{selectedPharmacy.availability && ( )}

)}

)} {/* Modal wyboru apteki */} {selectedProductForCart && (

Wybierz aptekę

{'{'}{selectedProductForCart.name}{'}'}

Wybierz aptekę z dostępną ceną:

{pharmacies .map(pharmacy => ({ ...pharmacy, finalPrice: parseFloat((parseFloat(selectedProductForCart.basePrice) * pharmacy.priceMultiplier).toFixed(2)) })) .sort((a, b) => a.finalPrice - b.finalPrice) .map(pharmacy => (

handleSelectPharmacy(pharmacy)} >

{'{'}{pharmacy.name}{'}'}

{'{'}{pharmacy.address}{'}'}

{'{'}{pharmacy.finalPrice.toFixed(2)}{'}'} zł {pharmacy.availability ? (

Dostępny od ręki

) : (

Sprawdź dostępność

)}

))}

)} {/* Koszyk */} {isCartOpen && (

Koszyk

{cart.length === 0 ? (

Twój koszyk jest pusty

) : ( <>

{cart.map((item, index) => (

{'{'}{item.productName}{'}'}

{'{'}{item.pharmacyName}{'}'}

{'{'}{item.price.toFixed(2)}{'}'} zł x {'{'}{item.quantity}{'}'} {'{'}{(item.price * item.quantity).toFixed(2)}{'}'} zł

))}

Suma: {'{'}{getCartTotal()}{'}'} zł

)}

); }; export default PharmacyApp;

{selectedProductForCart.name}

{pharmacy.name}

{product.name}

{pharmacy.name}

{product.name}

Moje konto

Zamówienie {'{'}{order.id}{'}'}

Szczegóły zamówienia {'{'}{selectedOrder.id}{'}'}

Lista leków:

Filtry

{'{'}{selectedProduct.name}{'}'}

Szczegóły produktu

Dostępność w aptekach

{'{'}{selectedPharmacy.name}{'}'}

Wybierz aptekę

{'{'}{selectedProductForCart.name}{'}'}

{'{'}{pharmacy.name}{'}'}

Koszyk

{'{'}{item.productName}{'}'}