From 6932f091c4b0dc5f90b2d69a83cdc14a9feb7837 Mon Sep 17 00:00:00 2001 From: parsa aghaei Date: Sun, 26 Jul 2026 19:53:34 +0330 Subject: [PATCH] feat(frontend): create user-facing interactive catalog page (/catalog) with PDF print exporter and remove internal PDF link --- .../application/app/catalog/CatalogClient.tsx | 236 ++++++++++++++++++ frontend/application/app/catalog/page.tsx | 22 ++ frontend/application/components/Footer.tsx | 10 +- frontend/application/components/Header.tsx | 1 + 4 files changed, 263 insertions(+), 6 deletions(-) create mode 100644 frontend/application/app/catalog/CatalogClient.tsx create mode 100644 frontend/application/app/catalog/page.tsx diff --git a/frontend/application/app/catalog/CatalogClient.tsx b/frontend/application/app/catalog/CatalogClient.tsx new file mode 100644 index 0000000..74617df --- /dev/null +++ b/frontend/application/app/catalog/CatalogClient.tsx @@ -0,0 +1,236 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import SafeImage from "../../components/SafeImage"; +import { Download, Printer, ShieldCheck, Sparkles, CheckCircle2, ChevronLeft, Search, Filter } from "lucide-react"; +import Link from "next/link"; +import { productService } from "../../lib/services/productService"; +import { Product } from "../../lib/data/products"; +import { toPersian } from "../../lib/utils"; + +export default function CatalogClient() { + const [products, setProducts] = useState([]); + const [loading, setLoading] = useState(true); + const [searchQuery, setSearchQuery] = useState(""); + const [selectedCategory, setSelectedCategory] = useState("all"); + + useEffect(() => { + productService.getProducts({ limit: 999 }) + .then(res => { + setProducts(res.data || []); + }) + .catch(err => console.error("Catalog fetch error:", err)) + .finally(() => setLoading(false)); + }, []); + + const categories = Array.from(new Set(products.map(p => p.category).filter(Boolean))); + + const filteredProducts = products.filter(p => { + const matchCategory = selectedCategory === "all" || p.category === selectedCategory; + const matchSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase()) || + p.artNo.toLowerCase().includes(searchQuery.toLowerCase()) || + (p.main_ingredients && p.main_ingredients.some(i => i.toLowerCase().includes(searchQuery.toLowerCase()))); + return matchCategory && matchSearch; + }); + + const handlePrint = () => { + window.print(); + }; + + return ( +
+ {/* Header Bar - Hidden on print */} +
+
+
+ +
+
+
+ + کاتالوگ رسمی محصولات کانینا آلمان +
+

+ راهنمای جامع مکمل‌های درمانی و دارویی Canina Pharma +

+

+ معرفی کامل ترکیبات فعال، موارد مصرف بالینی و استانداردهای دارویی محصولات برند آلمانی کانینا جهت استفاده صاحبان پت‌ها و متخصصین دامپزشکی. +

+
+ +
+ + + ورود به فروشگاه + + +
+
+
+
+ + {/* Print Cover Header - Visible only on Print */} +
+

کاتالوگ رسمی مکمل‌های درمانی Canina Pharma Germany

+

واردکننده انحصاری مکمل‌های دارویی سگ و گربه در ایران — info@canina-iran.com | ۰۲۱-۸۸۸۸۴۴۴۴

+
+ + {/* Filter & Search Controls - Hidden on print */} +
+
+ + setSearchQuery(e.target.value)} + className="w-full bg-slate-50 border border-slate-200 rounded-2xl py-3 pr-11 pl-4 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-canina-blue/20" + /> +
+ +
+ + {categories.map(cat => ( + + ))} +
+
+ + {/* Catalog Products Grid */} +
+ {loading ? ( +
در حال بارگذاری کاتالوگ محصولات...
+ ) : filteredProducts.length === 0 ? ( +
+

محصولی یافت نشد

+

لطفاً عبارت جستجو را تغییر دهید.

+
+ ) : ( +
+ {filteredProducts.map((product) => ( +
+
+ {/* Top Image Banner */} +
+ +
+ کد کالا: {product.artNo} +
+ {product.suitableFor && ( +
+ مناسب: {product.suitableFor} +
+ )} +
+ + {/* Body Content */} +
+
+ + {product.category} + +

+ {product.name} +

+ {product.scientificTagline && ( +

+ {product.scientificTagline} +

+ )} +
+ +

+ {product.shortDescription || product.description} +

+ + {/* Ingredients Badges */} + {product.main_ingredients && product.main_ingredients.length > 0 && ( +
+ + مواد موثره و ترکیبات اصلی: + +
+ {product.main_ingredients.map((ing, idx) => ( + + {ing} + + ))} +
+
+ )} + + {/* Dosage Instructions */} + {product.dosageLogic && ( +
+ +
+ دستور مصرف بالینی: + {product.dosageLogic} +
+
+ )} +
+
+ + {/* Card Footer - Hidden on print */} +
+
+ + گرید دارویی آلمان +
+ + جزئیات تخصصی + + +
+
+ ))} +
+ )} +
+ + {/* Print Footer */} +
+ صفحه کاتالوگ آنلاین محصولات Canina Pharma Germany — وبسایت رسمی: https://canina-iran.com +
+
+ ); +} diff --git a/frontend/application/app/catalog/page.tsx b/frontend/application/app/catalog/page.tsx new file mode 100644 index 0000000..331a847 --- /dev/null +++ b/frontend/application/app/catalog/page.tsx @@ -0,0 +1,22 @@ +import type { Metadata } from "next"; +import CatalogClient from "./CatalogClient"; + +export const metadata: Metadata = { + title: "کاتالوگ محصولات Canina - راهنمای مکمل‌های درمانی سگ و گربه", + description: "کاتالوگ جامع محصولات آلمانی کانینا شامل راهنمای ترکیبات، گرید دارویی، دوز مصرفی و موارد درمان بالینی مفصل، پوست و مو و رشد پت‌ها.", + alternates: { + canonical: "/catalog", + }, + openGraph: { + title: "کاتالوگ رسمی مکمل‌های درمانی Canina Pharma Germany", + description: "دانلود و مشاهده آنلاین کاتالوگ مکمل‌های دارویی حیوانات خانگی کانینا آلمان", + url: "https://canina-iran.com/catalog", + siteName: "کانینا ایران", + locale: "fa_IR", + type: "website", + } +}; + +export default function CatalogPage() { + return ; +} diff --git a/frontend/application/components/Footer.tsx b/frontend/application/components/Footer.tsx index 5a26412..77e7d03 100644 --- a/frontend/application/components/Footer.tsx +++ b/frontend/application/components/Footer.tsx @@ -95,15 +95,13 @@ export default function Footer({ onNavigate, onShopNavigate, onB2BOpen }: {
  • -
    - دانلود کاتالوگ رسمی Canina (PDF) - + دانلود کاتالوگ آنلاین محصولات (PDF) +
  • diff --git a/frontend/application/components/Header.tsx b/frontend/application/components/Header.tsx index 82ea286..1888f62 100644 --- a/frontend/application/components/Header.tsx +++ b/frontend/application/components/Header.tsx @@ -233,6 +233,7 @@ export default function Header({ {[ { id: 'shop', label: getText('nav_products', 'محصولات تخصصی'), href: '/shop' }, + { id: 'catalog', label: getText('nav_catalog', 'کاتالوگ آنلاین'), href: '/catalog' }, { id: 'wiki', label: getText('nav_wiki', 'دانشنامه علمی'), href: '/wiki' }, { id: 'blog', label: getText('nav_blog', 'مجله سلامت پت'), href: '/blog' }, { id: 'profile', label: getText('nav_pet_profiles', 'شناسنامه پت'), href: '/profile' }