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

Phase 0: Add credit costs display to Credits page

Browse Source 
- Added credit costs reference table to Credits page
- Shows cost per operation type with descriptions
- Consistent with Usage page credit costs display
- Helps users understand credit consumption
This commit is contained in:
IGNY8 VPS (Salman)
2025-11-16 19:06:48 +00:00
parent d0e6b342b5
commit ab6b6cc4be
1 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/pages/Billing/Credits.tsx
View File

@@ -5,6 +5,19 @@ import { fetchCreditBalance, CreditBalance } from '../../services/api';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
// Credit costs per operation (Phase 0: Credit-only system)
const CREDIT_COSTS: Record<string, { cost: number | string; description: string }> = {
clustering: { cost: 10, description: 'Per clustering request' },
idea_generation: { cost: 15, description: 'Per cluster → ideas request' },
content_generation: { cost: '1 per 100 words', description: 'Per 100 words generated' },
image_prompt_extraction: { cost: 2, description: 'Per content piece' },
image_generation: { cost: 5, description: 'Per image generated' },
linking: { cost: 8, description: 'Per content piece' },
optimization: { cost: '1 per 200 words', description: 'Per 200 words optimized' },
site_structure_generation: { cost: 50, description: 'Per site blueprint' },
site_page_generation: { cost: 20, description: 'Per page generated' },
};
export default function Credits() {
const toast = useToast();
const [balance, setBalance] = useState<CreditBalance | null>(null);
@@ -88,6 +101,35 @@ export default function Credits() {
</Card>
</div>
)}
{/* Credit Costs Reference */}
<div className="mt-8">
<Card className="p-6">
<h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Costs per Operation</h2>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
Understanding how credits are consumed for each operation type
</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{Object.entries(CREDIT_COSTS).map(([operation, info]) => (
<div key={operation} className="flex items-start justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div className="flex-1">
<div className="font-medium text-gray-900 dark:text-white capitalize">
{operation.replace(/_/g, ' ')}
</div>
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
{info.description}
</div>
</div>
<div className="ml-4 text-right">
<Badge variant="light" color="primary" className="font-semibold">
{typeof info.cost === 'number' ? `${info.cost} credits` : info.cost}
</Badge>
</div>
</div>
))}
</div>
</Card>
</div>
</div>
);
}