Styles styels styles

This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 18:12:51 +00:00
parent e96069775c
commit c880e24fc0
22 changed files with 314 additions and 219 deletions

View File

@@ -10,7 +10,7 @@ import {
sectorColumn,
difficultyColumn,
statusColumn,
createdColumn,
createdWithActionsColumn,
} from '../snippets/columns.snippets';
import Badge from '../../components/ui/badge/Badge';
import { formatRelativeDate } from '../../utils/date';
@@ -107,6 +107,7 @@ export const createClustersPageConfig = (
label: 'Cluster Name',
sortable: true,
sortField: 'name',
width: '400px',
render: (value: string, row: Cluster) => (
<Link
to={`/planner/clusters/${row.id}`}
@@ -130,17 +131,8 @@ export const createClustersPageConfig = (
label: 'KW Count',
sortable: true,
sortField: 'keywords_count',
width: '120px',
align: 'center' as const,
render: (value: number) => value.toLocaleString(),
},
{
key: 'ideas_count',
label: 'Ideas',
sortable: false, // Backend doesn't support sorting by ideas_count
sortField: 'ideas_count',
width: '120px',
align: 'center' as const,
headingAlign: 'center' as const,
render: (value: number) => value.toLocaleString(),
},
{
@@ -148,8 +140,8 @@ export const createClustersPageConfig = (
label: 'Volume',
sortable: true,
sortField: 'volume',
width: '120px',
align: 'center' as const,
headingAlign: 'center' as const,
render: (value: number) => value.toLocaleString(),
},
{
@@ -159,6 +151,7 @@ export const createClustersPageConfig = (
sortable: true,
sortField: 'difficulty',
align: 'center' as const,
headingAlign: 'center' as const,
render: (value: number) => {
const difficultyNum = getDifficultyNumber(value);
const difficultyBadgeColor =
@@ -187,8 +180,8 @@ export const createClustersPageConfig = (
label: 'Content',
sortable: false, // Backend doesn't support sorting by content_count
sortField: 'content_count',
width: '120px',
align: 'center' as const,
headingAlign: 'center' as const,
render: (value: number) => value.toLocaleString(),
},
{
@@ -205,9 +198,44 @@ export const createClustersPageConfig = (
},
},
{
...createdColumn,
key: 'ideas_count',
label: 'Ideas',
sortable: false, // Backend doesn't support sorting by ideas_count
sortField: 'ideas_count',
align: 'center' as const,
headingAlign: 'center' as const,
render: (value: number) => value.toLocaleString(),
},
// Generate Ideas action column - only shows button for status = 'new'
{
key: 'generate_action',
label: 'Generate Ideas',
sortable: false,
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>;
},
},
{
...createdWithActionsColumn,
sortable: true,
sortField: 'created_at',
width: '130px',
render: (value: string) => formatRelativeDate(value),
},
// Optional columns - hidden by default
@@ -240,32 +268,6 @@ export const createClustersPageConfig = (
defaultVisible: false,
render: (value: string) => formatRelativeDate(value),
},
// Generate Ideas action column - only shows button for status = 'new'
{
key: 'generate_action',
label: 'Generate Ideas',
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: [
{