feat: separate Products and Website Content into individual pages

- Added new dedicated pages for Products and Website Content
- Updated sidebar navigation with Products and Website Content submenus under AI Assistant
- Added Package and Globe icons for better visual distinction
- Modified ManageStoreDataContent to support defaultTab prop
- Added translations for new menu items (en, hu, de):
  - activeShop, aiAssistant, aiMenu, products, websiteContent
- Added routes for /products and /website-content
- Each page can be accessed independently while sharing the same component
- Shop context preserved when navigating between pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

shopcall.ai-main/src/App.tsx

@@ -35,6 +35,8 @@ const Crawler = lazy(() => import("./pages/Crawler"));
 const NotFound = lazy(() => import("./pages/NotFound"));
 const ShopRenterIntegration = lazy(() => import("./pages/ShopRenterIntegration"));
 const IntegrationsRedirect = lazy(() => import("./pages/IntegrationsRedirect"));
+const Products = lazy(() => import("./pages/Products"));
+const WebsiteContent = lazy(() => import("./pages/WebsiteContent"));
 
 // Loading component for lazy-loaded routes
 const PageLoader = () => (
@@ -72,6 +74,8 @@ const App = () => (
                 <Route path="/webshops" element={<Webshops />} />
                 <Route path="/phone-numbers" element={<PhoneNumbers />} />
                 <Route path="/ai-config" element={<AIConfig />} />
+                <Route path="/products" element={<Products />} />
+                <Route path="/website-content" element={<WebsiteContent />} />
                 <Route path="/manage-store-data" element={<ManageStoreData />} />
                 <Route path="/api-keys" element={<APIKeys />} />
                 <Route path="/onboarding" element={<Onboarding />} />

shopcall.ai-main/src/components/AppSidebar.tsx

@@ -15,7 +15,7 @@ import {
   SidebarFooter,
 } from "@/components/ui/sidebar";
 import { useNavigate } from "react-router-dom";
-import { LayoutDashboard, Phone, BarChart3, Settings, CreditCard, Layers3, PhoneCall, LogOut, Brain, Database, Store, ChevronDown } from "lucide-react";
+import { LayoutDashboard, Phone, BarChart3, Settings, CreditCard, Layers3, PhoneCall, LogOut, Brain, Database, Store, ChevronDown, Package, Globe } from "lucide-react";
 import { useAuth } from "@/components/context/AuthContext";
 import { useShop } from "@/components/context/ShopContext";
 import { useTranslation } from 'react-i18next';
@@ -171,7 +171,7 @@ export function AppSidebar() {
         {/* AI Assistant Section */}
         <SidebarGroup className="mt-4">
           <div className="px-3 py-2 text-xs font-semibold text-slate-500 uppercase tracking-wider">
-            {t('sidebar.aiAssistant') || 'AI Assistant'}
+            {t('sidebar.aiAssistant')}
           </div>
           <SidebarGroupContent>
             <SidebarMenu>
@@ -181,7 +181,7 @@ export function AppSidebar() {
                     <SidebarMenuButton className="w-full justify-start text-slate-300 hover:text-white hover:bg-slate-800/50">
                       <div className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer w-full">
                         <Brain className="w-4 h-4" />
-                        <span className="flex-1">{t('sidebar.aiMenu') || 'AI Configuration'}</span>
+                        <span className="flex-1">{t('sidebar.aiMenu')}</span>
                         <ChevronDown className={`w-4 h-4 transition-transform ${isAIMenuOpen ? 'rotate-180' : ''}`} />
                       </div>
                     </SidebarMenuButton>
@@ -197,7 +197,7 @@ export function AppSidebar() {
                         >
                           <a onClick={() => navigate('/ai-config')} className="flex items-center gap-2 cursor-pointer">
                             <Settings className="w-3 h-3" />
-                            <span>{t('sidebar.configuration') || 'Configuration'}</span>
+                            <span>{t('sidebar.configuration')}</span>
                           </a>
                         </SidebarMenuSubButton>
                       </SidebarMenuSubItem>
@@ -205,21 +205,43 @@ export function AppSidebar() {
                         <SidebarMenuSubButton
                           asChild
                           className={`text-slate-300 hover:text-white hover:bg-slate-800/50 ${
-                            currentPath === '/manage-store-data' ? 'bg-cyan-500/20 text-cyan-400' : ''
+                            currentPath === '/products' ? 'bg-cyan-500/20 text-cyan-400' : ''
                           }`}
                         >
                           <a
                             onClick={() => {
                               if (selectedShop) {
-                                navigate(`/manage-store-data?shop=${selectedShop.id}`);
+                                navigate(`/products?shop=${selectedShop.id}`);
                               } else {
-                                navigate('/manage-store-data');
+                                navigate('/products');
                               }
                             }}
                             className="flex items-center gap-2 cursor-pointer"
                           >
-                            <Database className="w-3 h-3" />
-                            <span>{t('sidebar.knowledgeBase') || 'Knowledge Base'}</span>
+                            <Package className="w-3 h-3" />
+                            <span>{t('sidebar.products')}</span>
+                          </a>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                      <SidebarMenuSubItem>
+                        <SidebarMenuSubButton
+                          asChild
+                          className={`text-slate-300 hover:text-white hover:bg-slate-800/50 ${
+                            currentPath === '/website-content' ? 'bg-cyan-500/20 text-cyan-400' : ''
+                          }`}
+                        >
+                          <a
+                            onClick={() => {
+                              if (selectedShop) {
+                                navigate(`/website-content?shop=${selectedShop.id}`);
+                              } else {
+                                navigate('/website-content');
+                              }
+                            }}
+                            className="flex items-center gap-2 cursor-pointer"
+                          >
+                            <Globe className="w-3 h-3" />
+                            <span>{t('sidebar.websiteContent')}</span>
                           </a>
                         </SidebarMenuSubButton>
                       </SidebarMenuSubItem>

shopcall.ai-main/src/components/ManageStoreDataContent.tsx

@@ -111,7 +111,11 @@ interface ScraperShopStatus {
   updated_at: string;
 }
 
-export function ManageStoreDataContent() {
+interface ManageStoreDataContentProps {
+  defaultTab?: "products" | "website";
+}
+
+export function ManageStoreDataContent({ defaultTab }: ManageStoreDataContentProps = {}) {
   const [searchParams] = useSearchParams();
   const { toast } = useToast();
   const { t } = useTranslation();
@@ -119,7 +123,7 @@ export function ManageStoreDataContent() {
   const [stores, setStores] = useState<StoreData[]>([]);
   const [selectedStore, setSelectedStore] = useState<StoreData | null>(null);
   const [loading, setLoading] = useState(true);
-  const [activeTab, setActiveTab] = useState<"products" | "website">("products");
+  const [activeTab, setActiveTab] = useState<"products" | "website">(defaultTab || "products");
 
   // Filter and search state
   const [searchQuery, setSearchQuery] = useState("");

shopcall.ai-main/src/i18n/locales/de.json

@@ -189,7 +189,13 @@
     "apiKeys": "API-Schlüssel",
     "settings": "Einstellungen",
     "logout": "Abmelden",
-    "configuration": "Konfiguration"
+    "configuration": "Konfiguration",
+    "activeShop": "Aktiver Shop",
+    "aiAssistant": "KI-Assistent",
+    "aiMenu": "KI-Konfiguration",
+    "knowledgeBase": "Wissensdatenbank",
+    "products": "Produkte",
+    "websiteContent": "Website-Inhalte"
   },
   "common": {
     "loading": "Wird geladen...",

shopcall.ai-main/src/i18n/locales/en.json

@@ -199,7 +199,13 @@
     "apiKeys": "API Keys",
     "settings": "Settings",
     "logout": "Logout",
-    "configuration": "Configuration"
+    "configuration": "Configuration",
+    "activeShop": "Active Shop",
+    "aiAssistant": "AI Assistant",
+    "aiMenu": "AI Configuration",
+    "knowledgeBase": "Knowledge Base",
+    "products": "Products",
+    "websiteContent": "Website Content"
   },
   "common": {
     "loading": "Loading...",

shopcall.ai-main/src/i18n/locales/hu.json

@@ -189,7 +189,13 @@
     "apiKeys": "API Kulcsok",
     "settings": "Beállítások",
     "logout": "Kijelentkezés",
-    "configuration": "Konfiguráció"
+    "configuration": "Konfiguráció",
+    "activeShop": "Aktív Bolt",
+    "aiAssistant": "AI Asszisztens",
+    "aiMenu": "AI Konfiguráció",
+    "knowledgeBase": "Tudásbázis",
+    "products": "Termékek",
+    "websiteContent": "Weboldal Tartalom"
   },
   "common": {
     "loading": "Betöltés...",

shopcall.ai-main/src/pages/Products.tsx

@@ -0,0 +1,18 @@
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/AppSidebar";
+import { ManageStoreDataContent } from "@/components/ManageStoreDataContent";
+
+const Products = () => {
+  return (
+    <SidebarProvider>
+      <div className="min-h-screen flex w-full bg-slate-900">
+        <AppSidebar />
+        <main className="flex-1">
+          <ManageStoreDataContent defaultTab="products" />
+        </main>
+      </div>
+    </SidebarProvider>
+  );
+};
+
+export default Products;

shopcall.ai-main/src/pages/WebsiteContent.tsx

@@ -0,0 +1,18 @@
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/AppSidebar";
+import { ManageStoreDataContent } from "@/components/ManageStoreDataContent";
+
+const WebsiteContent = () => {
+  return (
+    <SidebarProvider>
+      <div className="min-h-screen flex w-full bg-slate-900">
+        <AppSidebar />
+        <main className="flex-1">
+          <ManageStoreDataContent defaultTab="website" />
+        </main>
+      </div>
+    </SidebarProvider>
+  );
+};
+
+export default WebsiteContent;