Styles styels styles
This commit is contained in:
@@ -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: [
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user