Browse Source

fix: hide products-related controls on Website Content tab

- Add conditional rendering for search/filter bar (products tab only)
- Add conditional rendering for category management section (products tab only)
- Add conditional rendering for bulk actions (products tab only)
- Add conditional rendering for enable/disable all buttons (products tab only)
- Website Content tab now shows only scraper-related content

Fixes issue where category management and product controls were
showing on the Website Content tab.

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

Co-Authored-By: Claude <noreply@anthropic.com>
Fszontagh 4 months ago
parent
commit
a50b41a2ac
1 changed files with 81 additions and 76 deletions
  1. 81 76
      shopcall.ai-main/src/components/ManageStoreDataContent.tsx

+ 81 - 76
shopcall.ai-main/src/components/ManageStoreDataContent.tsx

@@ -910,56 +910,58 @@ export function ManageStoreDataContent() {
               </TabsTrigger>
               </TabsTrigger>
             </TabsList>
             </TabsList>
 
 
-            {/* Search and Filter Bar */}
-            <div className="flex gap-4 mb-6">
-              <div className="flex-1 relative">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400" />
-                <Input
-                  placeholder={`Search ${activeTab}...`}
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-10 bg-slate-700 border-slate-600 text-white"
-                />
-              </div>
-              <Select value={statusFilter} onValueChange={(value) => setStatusFilter(value as "all" | "enabled" | "disabled")}>
-                <SelectTrigger className="w-[180px] bg-slate-700 border-slate-600 text-white">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent className="bg-slate-700 border-slate-600 text-white">
-                  <SelectItem value="all">All Items</SelectItem>
-                  <SelectItem value="enabled">Enabled Only</SelectItem>
-                  <SelectItem value="disabled">Disabled Only</SelectItem>
-                </SelectContent>
-              </Select>
-
-              {/* Category Filter */}
-              {categories.length > 0 && (
-                <Select value={categoryFilter} onValueChange={(value) => setCategoryFilter(value)}>
-                  <SelectTrigger className="w-[200px] bg-slate-700 border-slate-600 text-white">
-                    <Tag className="w-4 h-4 mr-2" />
-                    <SelectValue placeholder="All Categories" />
+            {/* Search and Filter Bar - Only show for products tab */}
+            {activeTab === "products" && (
+              <div className="flex gap-4 mb-6">
+                <div className="flex-1 relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400" />
+                  <Input
+                    placeholder={`Search ${activeTab}...`}
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="pl-10 bg-slate-700 border-slate-600 text-white"
+                  />
+                </div>
+                <Select value={statusFilter} onValueChange={(value) => setStatusFilter(value as "all" | "enabled" | "disabled")}>
+                  <SelectTrigger className="w-[180px] bg-slate-700 border-slate-600 text-white">
+                    <SelectValue />
                   </SelectTrigger>
                   </SelectTrigger>
-                  <SelectContent className="bg-slate-700 border-slate-600">
-                    <SelectItem value="all">All Categories</SelectItem>
-                    {categories.map((cat) => (
-                      <SelectItem key={cat.category_id} value={cat.category_id}>
-                        <div className="flex items-center justify-between w-full gap-2">
-                          <span className={cat.is_excluded ? 'line-through text-slate-500' : 'text-white'}>
-                            {cat.category_name}
-                          </span>
-                          <Badge variant="secondary" className="text-xs text-white">
-                            {cat.product_count}
-                          </Badge>
-                        </div>
-                      </SelectItem>
-                    ))}
+                  <SelectContent className="bg-slate-700 border-slate-600 text-white">
+                    <SelectItem value="all">All Items</SelectItem>
+                    <SelectItem value="enabled">Enabled Only</SelectItem>
+                    <SelectItem value="disabled">Disabled Only</SelectItem>
                   </SelectContent>
                   </SelectContent>
                 </Select>
                 </Select>
-              )}
-            </div>
 
 
-            {/* Category Management Section */}
-            {categories.length > 0 && (
+                {/* Category Filter */}
+                {categories.length > 0 && (
+                  <Select value={categoryFilter} onValueChange={(value) => setCategoryFilter(value)}>
+                    <SelectTrigger className="w-[200px] bg-slate-700 border-slate-600 text-white">
+                      <Tag className="w-4 h-4 mr-2" />
+                      <SelectValue placeholder="All Categories" />
+                    </SelectTrigger>
+                    <SelectContent className="bg-slate-700 border-slate-600">
+                      <SelectItem value="all">All Categories</SelectItem>
+                      {categories.map((cat) => (
+                        <SelectItem key={cat.category_id} value={cat.category_id}>
+                          <div className="flex items-center justify-between w-full gap-2">
+                            <span className={cat.is_excluded ? 'line-through text-slate-500' : 'text-white'}>
+                              {cat.category_name}
+                            </span>
+                            <Badge variant="secondary" className="text-xs text-white">
+                              {cat.product_count}
+                            </Badge>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              </div>
+            )}
+
+            {/* Category Management Section - Only show for products tab */}
+            {activeTab === "products" && categories.length > 0 && (
               <div className="mb-6 p-4 bg-slate-700/30 rounded-lg border border-slate-600">
               <div className="mb-6 p-4 bg-slate-700/30 rounded-lg border border-slate-600">
                 <div className="flex items-center justify-between mb-3">
                 <div className="flex items-center justify-between mb-3">
                   <h3 className="text-white font-medium flex items-center gap-2">
                   <h3 className="text-white font-medium flex items-center gap-2">
@@ -994,8 +996,8 @@ export function ManageStoreDataContent() {
               </div>
               </div>
             )}
             )}
 
 
-            {/* Bulk Actions */}
-            {selectedItems.size > 0 && (
+            {/* Bulk Actions - Only show for products tab */}
+            {activeTab === "products" && selectedItems.size > 0 && (
               <div className="flex gap-2 mb-4 p-3 bg-slate-700/50 rounded-lg">
               <div className="flex gap-2 mb-4 p-3 bg-slate-700/50 rounded-lg">
                 <span className="text-white mr-4">{selectedItems.size} items selected</span>
                 <span className="text-white mr-4">{selectedItems.size} items selected</span>
                 <Button
                 <Button
@@ -1017,34 +1019,37 @@ export function ManageStoreDataContent() {
               </div>
               </div>
             )}
             )}
 
 
-            <div className="flex gap-2 mb-4">
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => setConfirmDialog({
-                  open: true,
-                  title: `Enable All ${activeTab}`,
-                  description: `Are you sure you want to enable all ${activeTab} for AI context? This will also clear all category exclusions.`,
-                  action: handleEnableAll
-                })}
-                className="bg-slate-700 border-slate-600 text-white"
-              >
-                Enable All
-              </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => setConfirmDialog({
-                  open: true,
-                  title: `Disable All ${activeTab}`,
-                  description: `Are you sure you want to disable all ${activeTab} from AI context?`,
-                  action: handleDisableAll
-                })}
-                className="bg-slate-700 border-slate-600 text-white"
-              >
-                Disable All
-              </Button>
-            </div>
+            {/* Enable/Disable All Actions - Only show for products tab */}
+            {activeTab === "products" && (
+              <div className="flex gap-2 mb-4">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => setConfirmDialog({
+                    open: true,
+                    title: `Enable All ${activeTab}`,
+                    description: `Are you sure you want to enable all ${activeTab} for AI context? This will also clear all category exclusions.`,
+                    action: handleEnableAll
+                  })}
+                  className="bg-slate-700 border-slate-600 text-white"
+                >
+                  Enable All
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => setConfirmDialog({
+                    open: true,
+                    title: `Disable All ${activeTab}`,
+                    description: `Are you sure you want to disable all ${activeTab} from AI context?`,
+                    action: handleDisableAll
+                  })}
+                  className="bg-slate-700 border-slate-600 text-white"
+                >
+                  Disable All
+                </Button>
+              </div>
+            )}
 
 
             <TabsContent value="products">
             <TabsContent value="products">
               {dataLoading ? (
               {dataLoading ? (