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

feat: add Usage Limits Panel component with usage tracking and visual indicators for limits

Browse Source 
style: implement custom color schemes and gradients for account section, enhancing visual hierarchy
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-12 13:15:15 +00:00
parent 12956ec64a
commit 6e2101d019
29 changed files with 3622 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/components/ui/pricing-table/index.tsx
View File

@@ -18,6 +18,17 @@ export interface PricingPlan {
features: string[];
buttonText: string;
highlighted?: boolean;
disabled?: boolean;
// Plan limits
max_sites?: number;
max_users?: number;
max_keywords?: number;
max_clusters?: number;
max_content_ideas?: number;
max_content_words?: number;
max_images_basic?: number;
max_images_premium?: number;
included_credits?: number;
}
interface PricingTableProps {
@@ -124,12 +135,68 @@ export function PricingTable({ variant = '1', title, plans, showToggle = false,
<span className="text-sm text-gray-700 dark:text-gray-300">{feature}</span>
</li>
))}
{/* Plan Limits Section */}
{(plan.max_sites || plan.max_content_words || plan.included_credits) && (
<div className="pt-3 mt-3 border-t border-gray-200 dark:border-gray-700">
<div className="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">LIMITS</div>
{plan.max_sites && (
<li className="flex items-start gap-2">
<Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
<span className="text-xs text-gray-600 dark:text-gray-400">
{plan.max_sites === 99999 ? 'Unlimited' : plan.max_sites} Sites
</span>
</li>
)}
{plan.max_users && (
<li className="flex items-start gap-2">
<Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
<span className="text-xs text-gray-600 dark:text-gray-400">
{plan.max_users === 99999 ? 'Unlimited' : plan.max_users} Team Members
</span>
</li>
)}
{plan.max_content_words && (
<li className="flex items-start gap-2">
<Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
<span className="text-xs text-gray-600 dark:text-gray-400">
{(plan.max_content_words / 1000).toLocaleString()}K Words/month
</span>
</li>
)}
{plan.max_content_ideas && (
<li className="flex items-start gap-2">
<Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
<span className="text-xs text-gray-600 dark:text-gray-400">
{plan.max_content_ideas} Ideas/month
</span>
</li>
)}
{plan.max_images_basic && (
<li className="flex items-start gap-2">
<Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
<span className="text-xs text-gray-600 dark:text-gray-400">
{plan.max_images_basic} Images/month
</span>
</li>
)}
{plan.included_credits && (
<li className="flex items-start gap-2">
<Check className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
<span className="text-xs text-gray-600 dark:text-gray-400">
{plan.included_credits.toLocaleString()} Credits/month
</span>
</li>
)}
</div>
)}
</ul>
<Button
variant={plan.highlighted ? 'primary' : 'outline'}
className="w-full"
onClick={() => onPlanSelect?.(plan)}
disabled={plan.disabled}
>
{plan.buttonText}
</Button>