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

docs & ux improvmeents

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-25 20:31:58 +00:00
parent 90e6e96b2b
commit 4bffede052
247 changed files with 6869 additions and 53517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/pages/Dashboard/Home.tsx
View File

@@ -8,6 +8,7 @@ import ComponentCard from "../../components/common/ComponentCard";
import PageHeader from "../../components/common/PageHeader";
import WorkflowGuide from "../../components/onboarding/WorkflowGuide";
import { useOnboardingStore } from "../../store/onboardingStore";
import { useBillingStore } from "../../store/billingStore";
import { Card } from "../../components/ui/card";
import { ProgressBar } from "../../components/ui/progress";
import { ApexOptions } from "apexcharts";
@@ -240,6 +241,7 @@ export default function Home() {
const { activeSector } = useSectorStore();
const { isGuideDismissed, showGuide, loadFromBackend } = useOnboardingStore();
const { user } = useAuthStore();
const { balance, loadBalance } = useBillingStore();
const [insights, setInsights] = useState<AppInsights | null>(null);
const [loading, setLoading] = useState(true);
@@ -272,6 +274,7 @@ export default function Home() {
// Load sites and guide state
useEffect(() => {
loadSites();
loadBalance();
loadFromBackend().catch(() => {
// Silently fail - local state will be used
});
@@ -890,15 +893,15 @@ export default function Home() {
/>
</div>
{/* Credit Balance & Usage - Improved Design */}
{/* Content Usage - Simplified Design */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<ComponentCard title="Credit Balance" desc="Current credit status and usage">
<ComponentCard title="Content This Month" desc="Your content generation allowance">
<div className="space-y-6">
<div className="text-center py-4">
<div className="text-4xl font-bold text-brand-600 dark:text-brand-400 mb-2">
{user?.account?.credits?.toLocaleString() || '0'}
{balance?.credits_remaining?.toLocaleString() || balance?.credits?.toLocaleString() || '0'}
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Current Credits</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Content Pieces Remaining</div>
</div>
<div className="space-y-4">
@@ -906,13 +909,13 @@ export default function Home() {
<div className="flex justify-between items-center mb-2">
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Used This Month</span>
<span className="text-sm font-semibold">
{user?.account?.credits ? '547' : '0'} / {user?.account?.credits ? '1000' : '0'}
{balance?.credits_used_this_month || '0'} / {balance?.plan_credits_per_month || '0'}
</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700">
<div
className="bg-brand-500 h-3 rounded-full transition-all"
style={{ width: `${user?.account?.credits ? 54.7 : 0}%` }}
style={{ width: `${balance?.plan_credits_per_month ? ((balance?.credits_used_this_month || 0) / balance.plan_credits_per_month) * 100 : 0}%` }}
/>
</div>
</div>
@@ -921,7 +924,7 @@ export default function Home() {
<div className="flex justify-between items-center">
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Remaining</span>
<span className="text-lg font-bold text-green-600 dark:text-green-400">
{user?.account?.credits?.toLocaleString() || '0'}
{balance?.credits_remaining?.toLocaleString() || balance?.credits?.toLocaleString() || '0'}
</span>
</div>
</div>