salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

final ui of planner and writer

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-27 09:25:31 +00:00
parent efd7193951
commit c227d9ee03
5 changed files with 44 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/header/HeaderMetrics.tsx
View File

@@ -11,6 +11,7 @@ export const HeaderMetrics: React.FC = () => {
return (
<div className="igny8-header-metrics flex">
{metrics.map((metric, index) => {
const isCredits = metric.label.toLowerCase() === 'credits';
const metricElement = (
<div className={`igny8-header-metric ${metric.tooltip ? 'cursor-help' : ''}`}>
<div className={`igny8-header-metric-accent ${metric.accentColor}`}></div>
@@ -20,7 +21,7 @@ export const HeaderMetrics: React.FC = () => {
<InfoIcon className="w-3 h-3 text-gray-400 dark:text-gray-500" />
)}
</span>
<span className="igny8-header-metric-value">
<span className={`igny8-header-metric-value ${isCredits ? 'igny8-header-metric-value-credits' : ''}`}>
{typeof metric.value === 'number' ? metric.value.toLocaleString() : metric.value}
</span>
</div>

9
frontend/src/layout/AppHeader.tsx
View File

@@ -105,10 +105,6 @@ const AppHeader: React.FC = () => {
</div>
)}
{/* Site and Sector Selector - Desktop */}
<div className="hidden lg:flex items-center gap-4 ml-auto">
<SiteAndSectorSelector />
</div>
</div>
{/* Right side actions */}
@@ -121,6 +117,11 @@ const AppHeader: React.FC = () => {
{/* Header Metrics */}
<HeaderMetrics />
{/* Site and Sector Selector - Desktop */}
<div className="hidden lg:flex items-center">
<SiteAndSectorSelector />
</div>
{/* Search Icon */}
<button
onClick={() => setIsSearchOpen(true)}

67
frontend/src/pages/Setup/IndustriesSectorsKeywords.tsx
View File

@@ -704,45 +704,6 @@ export default function IndustriesSectorsKeywords() {
</div>
)}
{/* Keyword Count Summary & Next Step CTA */}
{activeSite && activeSector && (
<div className="mx-6 mt-6 mb-4">
<div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
<div className="flex items-center gap-6">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
<span className="text-green-600 dark:text-green-400 font-bold">{addedCount}</span> keywords in your workflow
</span>
</div>
<div className="w-px h-5 bg-gray-300 dark:bg-gray-600 hidden sm:block" />
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
<span className="text-blue-600 dark:text-blue-400 font-bold">{availableCount}</span> available to add
</span>
</div>
</div>
{addedCount > 0 && (
<Button
variant="success"
size="sm"
onClick={() => navigate('/planner/keywords')}
endIcon={
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
}
>
Next: Plan Your Content
</Button>
)}
</div>
{/* Coming Soon Teaser */}
<p className="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
Looking for more keywords? Keyword Research coming soon!
</p>
</div>
)}
<TablePageTemplate
columns={pageConfig.columns}
data={seedKeywords}
@@ -755,6 +716,34 @@ export default function IndustriesSectorsKeywords() {
difficulty: difficultyFilter,
showNotAddedOnly: showNotAddedOnly ? 'true' : '',
}}
customActions={activeSite && activeSector ? (
<div className="flex items-center gap-3 px-3 py-1.5 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
<span className="text-xs font-medium text-gray-600 dark:text-gray-400">
<span className="text-green-600 dark:text-green-400 font-bold">{addedCount}</span> in workflow
</span>
<div className="w-px h-4 bg-gray-300 dark:bg-gray-600" />
<span className="text-xs font-medium text-gray-600 dark:text-gray-400">
<span className="text-blue-600 dark:text-blue-400 font-bold">{availableCount}</span> available
</span>
{addedCount > 0 && (
<>
<div className="w-px h-4 bg-gray-300 dark:bg-gray-600" />
<Button
variant="success"
size="sm"
onClick={() => navigate('/planner/keywords')}
endIcon={
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
}
>
Next: Plan Your Content
</Button>
</>
)}
</div>
) : undefined}
onFilterChange={(key, value) => {
const stringValue = value === null || value === undefined ? '' : String(value);

5
frontend/src/styles/igny8-colors.css
View File

@@ -383,6 +383,11 @@ select.igny8-select-styled option:checked {
margin-left: 4px;
}
/* Credits-specific value - 20% smaller than other metrics */
.igny8-header-metric-value-credits {
font-size: 13px; /* 16px * 0.8 = 12.8px ≈ 13px */
}
.dark .igny8-header-metric-value {
color: #fff;
}

8
frontend/src/templates/TablePageTemplate.tsx
View File

@@ -545,7 +545,7 @@ export default function TablePageTemplate({
return (
<div className={className}>
{/* Bulk Actions and Action Buttons Row - Reduced padding */}
<div className="flex flex-col gap-2.5">
<div className="flex flex-col gap-2.5 mb-2.5">
{/* Main row with buttons and metrics */}
<div className="flex items-center justify-between py-1.5">
{/* Left side - Create Button, Primary Action, Bulk Actions, Filter Toggle */}
@@ -728,10 +728,10 @@ export default function TablePageTemplate({
</div>
</div>
{/* Filters Row - Below action buttons, centered */}
{/* Filters Row - Below action buttons, left aligned with shadow */}
{showFilters && (renderFilters || filters.length > 0) && (
<div className="flex justify-center py-1.5">
<div className="bg-gray-50 dark:bg-gray-800/30 rounded-lg px-4 py-2 border border-gray-200 dark:border-gray-700">
<div className="flex justify-start py-1.5 mb-2.5">
<div className="bg-gray-50 dark:bg-gray-800/30 rounded-lg px-4 py-2 border border-gray-200 dark:border-gray-700 shadow-md">
<div className="flex gap-3 items-center flex-wrap">
{renderFilters ? (
renderFilters