Section 2 COmpleted
This commit is contained in:
IGNY8 VPS (Salman)
191
frontend/src/components/sites/SiteSetupChecklist.tsx
Normal file
191
frontend/src/components/sites/SiteSetupChecklist.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
/**
|
||||
* Site Setup Checklist Component
|
||||
* Displays setup progress for a site to guide users through configuration
|
||||
*/
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Card } from '../ui/card';
|
||||
import Button from '../ui/button/Button';
|
||||
import { CheckLineIcon } from '../../icons';
|
||||
|
||||
interface SetupItem {
|
||||
id: string;
|
||||
label: string;
|
||||
completed: boolean;
|
||||
href: string;
|
||||
}
|
||||
|
||||
interface SiteSetupChecklistProps {
|
||||
siteId: number;
|
||||
siteName: string;
|
||||
hasIndustry: boolean;
|
||||
hasSectors: boolean;
|
||||
hasWordPressIntegration: boolean;
|
||||
hasKeywords: boolean;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export default function SiteSetupChecklist({
|
||||
siteId,
|
||||
siteName,
|
||||
hasIndustry,
|
||||
hasSectors,
|
||||
hasWordPressIntegration,
|
||||
hasKeywords,
|
||||
compact = false,
|
||||
}: SiteSetupChecklistProps) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const setupItems: SetupItem[] = [
|
||||
{
|
||||
id: 'created',
|
||||
label: 'Site created',
|
||||
completed: true, // Always true if this component is rendered
|
||||
href: `/sites/${siteId}/settings`,
|
||||
},
|
||||
{
|
||||
id: 'industry',
|
||||
label: 'Industry/Sectors selected',
|
||||
completed: hasIndustry && hasSectors,
|
||||
href: `/sites/${siteId}/settings`,
|
||||
},
|
||||
{
|
||||
id: 'wordpress',
|
||||
label: 'WordPress integration configured',
|
||||
completed: hasWordPressIntegration,
|
||||
href: `/sites/${siteId}/settings?tab=integrations`,
|
||||
},
|
||||
{
|
||||
id: 'keywords',
|
||||
label: 'Keywords added',
|
||||
completed: hasKeywords,
|
||||
href: '/setup/add-keywords',
|
||||
},
|
||||
];
|
||||
|
||||
const completedCount = setupItems.filter((item) => item.completed).length;
|
||||
const totalCount = setupItems.length;
|
||||
const isComplete = completedCount === totalCount;
|
||||
const progressPercent = Math.round((completedCount / totalCount) * 100);
|
||||
|
||||
// Find first incomplete item for "Complete Setup" button
|
||||
const firstIncomplete = setupItems.find((item) => !item.completed);
|
||||
|
||||
if (compact) {
|
||||
// Compact version for list view
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1">
|
||||
{setupItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
item.completed
|
||||
? 'bg-green-500'
|
||||
: 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
title={item.label}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{completedCount}/{totalCount}
|
||||
</span>
|
||||
{isComplete && (
|
||||
<span className="text-xs text-green-600 dark:text-green-400 font-medium">
|
||||
✓ Ready
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Full version for dashboard
|
||||
return (
|
||||
<Card className="p-5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
Site Setup Progress
|
||||
</h3>
|
||||
<span className="text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
{progressPercent}% complete
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full mb-4">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all duration-500 ${
|
||||
isComplete ? 'bg-green-500' : 'bg-blue-500'
|
||||
}`}
|
||||
style={{ width: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Checklist items */}
|
||||
<div className="space-y-2 mb-4">
|
||||
{setupItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => navigate(item.href)}
|
||||
className="w-full flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-left"
|
||||
>
|
||||
<div
|
||||
className={`flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center ${
|
||||
item.completed
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
|
||||
: 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{item.completed ? (
|
||||
<CheckLineIcon className="w-3 h-3" />
|
||||
) : (
|
||||
<span className="w-2 h-2 rounded-full bg-current" />
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`text-sm ${
|
||||
item.completed
|
||||
? 'text-gray-600 dark:text-gray-400'
|
||||
: 'text-gray-900 dark:text-white font-medium'
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Action button */}
|
||||
{isComplete ? (
|
||||
<div className="flex items-center gap-2 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
|
||||
<CheckLineIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
|
||||
<span className="text-sm font-medium text-green-700 dark:text-green-300">
|
||||
Ready to create content!
|
||||
</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="primary"
|
||||
className="ml-auto"
|
||||
onClick={() => navigate('/planner/keywords')}
|
||||
>
|
||||
Start Planning
|
||||
</Button>
|
||||
</div>
|
||||
) : firstIncomplete ? (
|
||||
<Button
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
onClick={() => navigate(firstIncomplete.href)}
|
||||
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>
|
||||
}
|
||||
>
|
||||
Complete Setup
|
||||
</Button>
|
||||
) : null}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user