more fixes ui

2025-12-27 07:09:33 +00:00
parent d5bda678fd
commit 4482d2f4c4
13 changed files with 117 additions and 29 deletions
--- a/frontend/src/config/pages/clusters.config.tsx
+++ b/frontend/src/config/pages/clusters.config.tsx
@@ -19,6 +19,7 @@ import { Cluster } from '../../services/api';
 import Input from '../../components/form/input/InputField';
 import Label from '../../components/form/Label';
 import Button from '../../components/ui/button/Button';
+import { BoltIcon } from '../../icons';

 export interface ColumnConfig {
  key: string;
@@ -93,6 +94,7 @@ export const createClustersPageConfig = (
    volumeDropdownRef: React.RefObject<HTMLDivElement | null>;
    setCurrentPage: (page: number) => void;
    loadClusters: () => Promise<void>;
+    onGenerateIdeas?: (clusterId: number) => void; // Handler for generate ideas button
  }
 ): ClustersPageConfig => {
  const showSectorColumn = !handlers.activeSector; // Show when viewing all sectors
@@ -129,6 +131,7 @@ export const createClustersPageConfig = (
        sortable: true,
        sortField: 'keywords_count',
        width: '120px',
+        align: 'center' as const,
        render: (value: number) => value.toLocaleString(),
      },
      {
@@ -137,6 +140,7 @@ export const createClustersPageConfig = (
        sortable: false, // Backend doesn't support sorting by ideas_count
        sortField: 'ideas_count',
        width: '120px',
+        align: 'center' as const,
        render: (value: number) => (
          <Badge 
            color={value > 0 ? 'success' : 'light'} 
@@ -155,6 +159,7 @@ export const createClustersPageConfig = (
        sortable: true,
        sortField: 'volume',
        width: '120px',
+        align: 'center' as const,
        render: (value: number) => value.toLocaleString(),
      },
      {
@@ -193,6 +198,7 @@ export const createClustersPageConfig = (
        sortable: false, // Backend doesn't support sorting by content_count
        sortField: 'content_count',
        width: '120px',
+        align: 'center' as const,
        render: (value: number) => value.toLocaleString(),
      },
      {
@@ -244,6 +250,32 @@ export const createClustersPageConfig = (
        defaultVisible: false,
        render: (value: string) => formatRelativeDate(value),
      },
+      // Generate Ideas action column - only shows button for status = 'new'
+      {
+        key: 'generate_action',
+        label: 'Actions',
+        sortable: false,
+        width: '120px',
+        render: (_value: any, row: Cluster) => {
+          // Only show generate button for clusters with status 'new'
+          if (row.status === 'new' && handlers.onGenerateIdeas) {
+            return (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handlers.onGenerateIdeas!(row.id);
+                }}
+                className="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-white bg-brand-500 hover:bg-brand-600 rounded transition-colors"
+                title="Generate Ideas"
+              >
+                <BoltIcon className="w-4 h-4" />
+                Generate
+              </button>
+            );
+          }
+          return <span className="text-gray-400 dark:text-gray-500 text-sm">-</span>;
+        },
+      },
    ],
    filters: [
      {
--- a/frontend/src/config/pages/content.config.tsx
+++ b/frontend/src/config/pages/content.config.tsx
@@ -296,7 +296,7 @@ export const createContentPageConfig = (
        sortable: true,
        sortField: 'word_count',
        width: '100px',
-        align: 'right',
+        align: 'center' as const,
        render: (value: number) => (
          <span className="font-mono text-sm text-gray-700 dark:text-gray-300">
            {value?.toLocaleString() || 0}
--- a/frontend/src/config/pages/ideas.config.tsx
+++ b/frontend/src/config/pages/ideas.config.tsx
@@ -203,6 +203,7 @@ export const createIdeasPageConfig = (
        sortable: true,
        sortField: 'estimated_word_count',
        width: '100px',
+        align: 'center' as const,
        render: (value: number) => value.toLocaleString(),
      },
      {
--- a/frontend/src/config/pages/keywords.config.tsx
+++ b/frontend/src/config/pages/keywords.config.tsx
@@ -160,6 +160,7 @@ export const createKeywordsPageConfig = (
        ...volumeColumn,
        sortable: true,
        sortField: 'seed_keyword__volume', // Backend expects seed_keyword__volume
+        align: 'center' as const,
        render: (value: number) => value.toLocaleString(),
      },
      {
@@ -200,6 +201,7 @@ export const createKeywordsPageConfig = (
        ...countryColumn,
        sortable: false, // Backend doesn't support sorting by country
        sortField: 'seed_keyword__country',
+        align: 'center' as const,
        render: (value: string) => {
          const countryNames: Record<string, string> = {
            'US': 'United States',
--- a/frontend/src/config/pages/table-actions.config.tsx
+++ b/frontend/src/config/pages/table-actions.config.tsx
@@ -155,12 +155,7 @@ const tableActionsConfigs: Record<string, TableActionsConfig> = {
        icon: EditIcon,
        variant: 'primary',
      },
-      {
-        key: 'generate_ideas',
-        label: 'Generate Ideas',
-        icon: <BoltIcon className="w-5 h-5" />,
-        variant: 'primary',
-      },
+      // Generate Ideas moved to dedicated column - only shows for status='new'
    ],
    bulkActions: [
      {
@@ -175,12 +170,7 @@ const tableActionsConfigs: Record<string, TableActionsConfig> = {
        icon: <DownloadIcon className="w-4 h-4 text-blue-light-500" />,
        variant: 'secondary',
      },
-      {
-        key: 'auto_generate_ideas',
-        label: 'Generate Ideas',
-        icon: <BoltIcon className="w-4 h-4 text-warning-500" />,
-        variant: 'secondary',
-      },
+      // Removed auto_generate_ideas - now row-level only
    ],
  },
  '/planner/ideas': {
--- a/frontend/src/config/pages/tasks.config.tsx
+++ b/frontend/src/config/pages/tasks.config.tsx
@@ -215,6 +215,7 @@ export const createTasksPageConfig = (
        ...wordCountColumn,
        sortable: true,
        sortField: 'word_count',
+        align: 'center' as const,
        render: (value: number | null | undefined) => (value != null ? value.toLocaleString() : '-'),
      },
      {
--- a/frontend/src/layout/AppSidebar.tsx
+++ b/frontend/src/layout/AppSidebar.tsx
@@ -452,16 +452,17 @@ const AppSidebar: React.FC = () => {
      onMouseEnter={() => !isExpanded && setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
-      {/* Collapse/Expand Toggle Button - Position changes based on state */}
+      {/* Collapse/Expand Toggle Button - Fixed 5px from sidebar edge, does not move with hover */}
      <button
        onClick={toggleSidebar}
-        className={`hidden lg:flex absolute top-20 w-6 h-6 items-center justify-center bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-full shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-300 z-50 ${
-          isExpanded || isHovered ? '-right-3' : 'right-3'
+        className={`hidden lg:flex absolute top-20 w-6 h-6 items-center justify-center bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-full shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors z-[60] ${
+          isExpanded ? 'left-[295px]' : 'left-[95px]'
        }`}
+        style={{ position: 'fixed' }}
        aria-label={isExpanded ? "Collapse Sidebar" : "Expand Sidebar"}
      >
        <svg 
-          className={`w-3.5 h-3.5 text-gray-500 dark:text-gray-400 transition-transform duration-300 ${isExpanded || isHovered ? 'rotate-180' : ''}`} 
+          className={`w-3.5 h-3.5 text-gray-500 dark:text-gray-400 transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''}`} 
          fill="none" 
          stroke="currentColor" 
          viewBox="0 0 24 24"
--- a/frontend/src/pages/Planner/Clusters.tsx
+++ b/frontend/src/pages/Planner/Clusters.tsx
@@ -331,6 +331,7 @@ export default function Clusters() {
      volumeDropdownRef,
      setCurrentPage,
      loadClusters,
+      onGenerateIdeas: (clusterId: number) => handleRowAction('generate_ideas', { id: clusterId } as Cluster),
    });
  }, [
    activeSector,
@@ -344,6 +345,7 @@ export default function Clusters() {
    tempVolumeMin,
    tempVolumeMax,
    loadClusters,
+    handleRowAction,
  ]);

  // Calculate header metrics
@@ -405,12 +407,6 @@ export default function Clusters() {
          volumeMin: volumeMin,
          volumeMax: volumeMax,
        }}
-        primaryAction={{
-          label: 'Generate Ideas',
-          icon: <BoltIcon className="w-4 h-4" />,
-          onClick: () => handleBulkAction('auto_generate_ideas', selectedIds),
-          variant: 'success',
-        }}
        onFilterChange={(key, value) => {
          const stringValue = value === null || value === undefined ? '' : String(value);
          if (key === 'search') {
--- a/frontend/src/pages/Writer/Content.tsx
+++ b/frontend/src/pages/Writer/Content.tsx
@@ -4,6 +4,7 @@
 */

 import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import TablePageTemplate from '../../templates/TablePageTemplate';
 import { 
  fetchContent,
@@ -14,9 +15,8 @@ import {
  bulkDeleteContent,
 } from '../../services/api';
 import { optimizerApi } from '../../api/optimizer.api';
-import { useNavigate } from 'react-router-dom';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { FileIcon, TaskIcon, CheckCircleIcon } from '../../icons';
+import { FileIcon, TaskIcon, CheckCircleIcon, ArrowRightIcon } from '../../icons';
 import { createContentPageConfig } from '../../config/pages/content.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
@@ -273,6 +273,28 @@ export default function Content() {
        onDelete={handleDelete}
        onBulkDelete={handleBulkDelete}
        getItemDisplayName={(row: ContentType) => row.title || `Content #${row.id}`}
+        statusExplainer={
+          <div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
+            <div className="font-medium text-gray-700 dark:text-gray-300">
+              Currently Generated (Draft): {content.filter(c => c.status === 'draft').length}
+            </div>
+            <div>
+              Image Prompts: {content.filter(c => c.has_image_prompts).length}/{content.length}
+            </div>
+            <div>
+              Images Generated: {content.filter(c => c.has_generated_images).length}/{content.length}
+            </div>
+            <div className="pt-2 border-t border-gray-200 dark:border-gray-700 mt-2">
+              <Link 
+                to="/writer/review" 
+                className="text-brand-500 hover:text-brand-600 flex items-center gap-1"
+              >
+                <span>Review ({content.filter(c => c.status === 'review').length})</span>
+                <ArrowRightIcon className="w-3 h-3" />
+              </Link>
+            </div>
+          </div>
+        }
      />

      {/* Module Metrics Footer - Pipeline Style with Cross-Module Links */}
--- a/frontend/src/pages/Writer/Images.tsx
+++ b/frontend/src/pages/Writer/Images.tsx
@@ -4,6 +4,7 @@
 */

 import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { Link } from 'react-router-dom';
 import TablePageTemplate from '../../templates/TablePageTemplate';
 import {
  fetchContentImages,
@@ -18,7 +19,7 @@ import {
  bulkDeleteContent,
 } from '../../services/api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { FileIcon, DownloadIcon } from '../../icons';
+import { FileIcon, DownloadIcon, ArrowRightIcon } from '../../icons';
 import { PhotoIcon } from '@heroicons/react/24/outline';
 import { createImagesPageConfig } from '../../config/pages/images.config';
 import ImageQueueModal, { ImageQueueItem } from '../../components/common/ImageQueueModal';
@@ -514,6 +515,28 @@ export default function Images() {
        setCurrentPage(1);
      }}
      onRowAction={handleRowAction}
+      statusExplainer={
+        <div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
+          <div className="font-medium text-gray-700 dark:text-gray-300">
+            Content Images Status
+          </div>
+          <div>
+            Need Images: {images.filter(i => i.overall_status === 'pending').length}
+          </div>
+          <div>
+            Images Complete: {images.filter(i => i.overall_status === 'complete').length}
+          </div>
+          <div className="pt-2 border-t border-gray-200 dark:border-gray-700 mt-2">
+            <Link 
+              to="/writer/review" 
+              className="text-brand-500 hover:text-brand-600 flex items-center gap-1"
+            >
+              <span>Go to Review</span>
+              <ArrowRightIcon className="w-3 h-3" />
+            </Link>
+          </div>
+        </div>
+      }
    />
      <ImageQueueModal
        isOpen={isQueueModalOpen}
--- a/frontend/src/pages/Writer/Review.tsx
+++ b/frontend/src/pages/Writer/Review.tsx
@@ -453,6 +453,13 @@ export default function Review() {
          setCurrentPage(1);
        }}
        onRowAction={handleRowAction}
+        statusExplainer={
+          <div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
+            <div className="font-medium text-gray-700 dark:text-gray-300">
+              Approve {totalCount} content pages/articles awaiting approval
+            </div>
+          </div>
+        }
      />
      <ModuleMetricsFooter
        metrics={[
--- a/frontend/src/pages/Writer/Tasks.tsx
+++ b/frontend/src/pages/Writer/Tasks.tsx
@@ -3,7 +3,7 @@
 * Consistent with Keywords page layout, structure and design
 */

-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import TablePageTemplate from '../../templates/TablePageTemplate';
 import {
  fetchTasks,
--- a/frontend/src/templates/TablePageTemplate.tsx
+++ b/frontend/src/templates/TablePageTemplate.tsx
@@ -164,6 +164,8 @@ interface TablePageTemplateProps {
  };
  // Custom row highlight function (returns bg class based on row data)
  getRowClassName?: (row: any) => string;
+  // Status explainer component to display on right side of table actions row
+  statusExplainer?: ReactNode;
 }

 export default function TablePageTemplate({
@@ -202,6 +204,7 @@ export default function TablePageTemplate({
  bulkActions: customBulkActions,
  primaryAction,
  getRowClassName,
+  statusExplainer,
 }: TablePageTemplateProps) {
  const location = useLocation();
  const [isBulkActionsDropdownOpen, setIsBulkActionsDropdownOpen] = useState(false);
@@ -752,8 +755,17 @@ export default function TablePageTemplate({
          </div>
        )}
        
-        {/* Right side - Action Buttons */}
-        <div className="flex gap-2 items-center">
+        {/* Right side - Status Explainer and Action Buttons */}
+        <div className="flex gap-4 items-start">
+          {/* Status Explainer */}
+          {statusExplainer && (
+            <div className="text-right">
+              {statusExplainer}
+            </div>
+          )}
+          
+          {/* Action Buttons */}
+          <div className="flex gap-2 items-center">
          {/* Custom Actions */}
          {customActions}
          {onExportCSV && (
@@ -786,6 +798,7 @@ export default function TablePageTemplate({
              {createLabel}
            </Button>
          )}
+          </div>
        </div>
      </div>