many fixes

frontend/src/pages/admin/AdminCreditPackagesPage.tsx

@@ -7,12 +7,32 @@ import { useState, useEffect } from 'react';
 import { Plus, Loader2, AlertCircle, Edit, Trash } from 'lucide-react';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
-import { getAdminCreditPackages, type CreditPackage } from '../../services/billing.api';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import {
+  getAdminCreditPackages,
+  createAdminCreditPackage,
+  updateAdminCreditPackage,
+  deleteAdminCreditPackage,
+  type CreditPackage,
+} from '../../services/billing.api';
 
 export default function AdminCreditPackagesPage() {
+  const toast = useToast();
   const [packages, setPackages] = useState<CreditPackage[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string>('');
+  const [saving, setSaving] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [form, setForm] = useState({
+    name: '',
+    credits: '',
+    price: '',
+    discount_percentage: '',
+    description: '',
+    is_active: true,
+    is_featured: false,
+    sort_order: '',
+  });
 
   useEffect(() => {
     loadPackages();
@@ -25,11 +45,86 @@ export default function AdminCreditPackagesPage() {
       setPackages(data.results || []);
     } catch (err: any) {
       setError(err.message || 'Failed to load credit packages');
+      toast?.error?.(err.message || 'Failed to load credit packages');
     } finally {
       setLoading(false);
     }
   };
 
+  const resetForm = () => {
+    setEditingId(null);
+    setForm({
+      name: '',
+      credits: '',
+      price: '',
+      discount_percentage: '',
+      description: '',
+      is_active: true,
+      is_featured: false,
+      sort_order: '',
+    });
+  };
+
+  const startEdit = (pkg: CreditPackage) => {
+    setEditingId(pkg.id);
+    setForm({
+      name: pkg.name || '',
+      credits: pkg.credits?.toString?.() || '',
+      price: pkg.price?.toString?.() || '',
+      discount_percentage: pkg.discount_percentage?.toString?.() || '',
+      description: pkg.description || '',
+      is_active: pkg.is_active ?? true,
+      is_featured: pkg.is_featured ?? false,
+      sort_order: (pkg.sort_order ?? pkg.display_order ?? '').toString(),
+    });
+  };
+
+  const handleSubmit = async () => {
+    if (!form.name.trim() || !form.credits || !form.price) {
+      setError('Name, credits, and price are required');
+      return;
+    }
+    try {
+      setSaving(true);
+      const payload = {
+        name: form.name,
+        credits: Number(form.credits),
+        price: form.price,
+        discount_percentage: form.discount_percentage ? Number(form.discount_percentage) : 0,
+        description: form.description || undefined,
+        is_active: form.is_active,
+        is_featured: form.is_featured,
+        sort_order: form.sort_order ? Number(form.sort_order) : undefined,
+      };
+      if (editingId) {
+        await updateAdminCreditPackage(editingId, payload);
+        toast?.success?.('Package updated');
+      } else {
+        await createAdminCreditPackage(payload);
+        toast?.success?.('Package created');
+      }
+      resetForm();
+      await loadPackages();
+    } catch (err: any) {
+      setError(err.message || 'Failed to save package');
+      toast?.error?.(err.message || 'Failed to save package');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!confirm('Delete this credit package?')) return;
+    try {
+      await deleteAdminCreditPackage(id);
+      toast?.success?.('Package deleted');
+      await loadPackages();
+    } catch (err: any) {
+      setError(err.message || 'Failed to delete package');
+      toast?.error?.(err.message || 'Failed to delete package');
+    }
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
@@ -47,12 +142,116 @@ export default function AdminCreditPackagesPage() {
             Manage credit packages available for purchase
           </p>
         </div>
-        <button className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
-          <Plus className="w-4 h-4" />
-          Add Package
-        </button>
       </div>
 
+      {/* Form */}
+      <Card className="p-4 mb-6">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <Plus className="w-4 h-4 text-blue-600" />
+            <h2 className="text-lg font-semibold">{editingId ? 'Edit Package' : 'Add Package'}</h2>
+          </div>
+          {editingId && (
+            <button
+              className="text-sm text-blue-600 hover:underline"
+              onClick={resetForm}
+            >
+              Cancel edit
+            </button>
+          )}
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
+            <input
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.name}
+              onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
+              placeholder="Starter Pack"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Credits</label>
+            <input
+              type="number"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.credits}
+              onChange={(e) => setForm((p) => ({ ...p, credits: e.target.value }))}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Price</label>
+            <input
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.price}
+              onChange={(e) => setForm((p) => ({ ...p, price: e.target.value }))}
+              placeholder="99.00"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Discount %</label>
+            <input
+              type="number"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.discount_percentage}
+              onChange={(e) => setForm((p) => ({ ...p, discount_percentage: e.target.value }))}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sort Order</label>
+            <input
+              type="number"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.sort_order}
+              onChange={(e) => setForm((p) => ({ ...p, sort_order: e.target.value }))}
+              placeholder="e.g., 1"
+            />
+          </div>
+          <div className="md:col-span-3">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
+            <textarea
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.description}
+              onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
+              placeholder="Optional description"
+            />
+          </div>
+          <div className="flex items-center gap-3">
+            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+              <input
+                type="checkbox"
+                checked={form.is_active}
+                onChange={(e) => setForm((p) => ({ ...p, is_active: e.target.checked }))}
+              />
+              Active
+            </label>
+            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+              <input
+                type="checkbox"
+                checked={form.is_featured}
+                onChange={(e) => setForm((p) => ({ ...p, is_featured: e.target.checked }))}
+              />
+              Featured
+            </label>
+          </div>
+        </div>
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800"
+            onClick={resetForm}
+          >
+            Reset
+          </button>
+          <button
+            className="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-60"
+            onClick={handleSubmit}
+            disabled={saving}
+          >
+            {saving ? 'Saving...' : editingId ? 'Update Package' : 'Create Package'}
+          </button>
+        </div>
+      </Card>
+
       {error && (
         <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
           <AlertCircle className="w-5 h-5 text-red-600" />
@@ -92,11 +291,17 @@ export default function AdminCreditPackagesPage() {
             )}
 
             <div className="flex gap-2 mt-4">
-              <button className="flex-1 flex items-center justify-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+              <button
+                className="flex-1 flex items-center justify-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
+                onClick={() => startEdit(pkg)}
+              >
                 <Edit className="w-4 h-4" />
                 Edit
               </button>
-              <button className="px-3 py-2 border border-red-300 dark:border-red-600 text-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20">
+              <button
+                className="px-3 py-2 border border-red-300 dark:border-red-600 text-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
+                onClick={() => handleDelete(pkg.id)}
+              >
                 <Trash className="w-4 h-4" />
               </button>
             </div>

frontend/src/pages/admin/AdminSystemDashboard.tsx

@@ -6,7 +6,8 @@
 import { useState, useEffect } from 'react';
 import { 
   Users, DollarSign, TrendingUp, AlertCircle, 
-  CheckCircle, Clock, Activity, Loader2 
+  CheckCircle, Clock, Activity, Loader2, ExternalLink,
+  Globe, Database, Folder, Server, GitBranch, FileText
 } from 'lucide-react';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
@@ -16,6 +17,23 @@ export default function AdminSystemDashboard() {
   const [loading, setLoading] = useState(true);
   const [stats, setStats] = useState<any>(null);
   const [error, setError] = useState<string>('');
+  const issuedCredits = Number(stats?.credits_issued_30d || 0);
+  const usedCredits = Number(stats?.credits_used_30d || 0);
+  const creditScale = Math.max(issuedCredits, usedCredits, 1);
+  const issuedPct = Math.min(100, Math.round((issuedCredits / creditScale) * 100));
+  const usedPct = Math.min(100, Math.round((usedCredits / creditScale) * 100));
+
+  const adminLinks = [
+    { label: 'Marketing Site', url: 'https://igny8.com', icon: <Globe className="w-5 h-5 text-blue-600" />, note: 'Public marketing site' },
+    { label: 'IGNY8 App', url: 'https://app.igny8.com', icon: <Globe className="w-5 h-5 text-green-600" />, note: 'Main SaaS UI' },
+    { label: 'Django Admin', url: 'https://api.igny8.com/admin', icon: <Server className="w-5 h-5 text-indigo-600" />, note: 'Backend admin UI' },
+    { label: 'PgAdmin', url: 'http://31.97.144.105:5050/', icon: <Database className="w-5 h-5 text-amber-600" />, note: 'Postgres console' },
+    { label: 'File Manager', url: 'https://files.igny8.com', icon: <Folder className="w-5 h-5 text-teal-600" />, note: 'File manager UI' },
+    { label: 'Portainer', url: 'http://31.97.144.105:9443', icon: <Server className="w-5 h-5 text-purple-600" />, note: 'Container management' },
+    { label: 'API Docs (Swagger)', url: 'https://api.igny8.com/api/docs/', icon: <FileText className="w-5 h-5 text-orange-600" />, note: 'Swagger UI' },
+    { label: 'API Docs (ReDoc)', url: 'https://api.igny8.com/api/redoc/', icon: <FileText className="w-5 h-5 text-rose-600" />, note: 'ReDoc docs' },
+    { label: 'Gitea Repo', url: 'https://git.igny8.com/salman/igny8', icon: <GitBranch className="w-5 h-5 text-gray-700" />, note: 'Source control' },
+  ];
 
   useEffect(() => {
     loadStats();
@@ -93,7 +111,7 @@ export default function AdminSystemDashboard() {
             <div>
               <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Revenue This Month</div>
               <div className="text-3xl font-bold text-gray-900 dark:text-white">
-                ${stats?.revenue_this_month || '0.00'}
+                ${Number(stats?.revenue_this_month || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
               </div>
               <div className="text-sm text-green-600 mt-1">
                 <TrendingUp className="w-4 h-4 inline" /> +12% vs last month
@@ -152,25 +170,55 @@ export default function AdminSystemDashboard() {
             <div>
               <div className="flex justify-between items-center mb-1">
                 <span className="text-sm text-gray-600 dark:text-gray-400">Issued (30 days)</span>
-                <span className="font-semibold">{stats?.credits_issued_30d?.toLocaleString() || 0}</span>
+                <span className="font-semibold">{issuedCredits.toLocaleString()}</span>
               </div>
               <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-                <div className="bg-blue-600 h-2 rounded-full" style={{ width: '75%' }}></div>
+                <div className="bg-blue-600 h-2 rounded-full" style={{ width: `${issuedPct}%` }}></div>
               </div>
             </div>
             <div>
               <div className="flex justify-between items-center mb-1">
                 <span className="text-sm text-gray-600 dark:text-gray-400">Used (30 days)</span>
-                <span className="font-semibold">{stats?.credits_used_30d?.toLocaleString() || 0}</span>
+                <span className="font-semibold">{usedCredits.toLocaleString()}</span>
               </div>
               <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-                <div className="bg-green-600 h-2 rounded-full" style={{ width: '60%' }}></div>
+                <div className="bg-green-600 h-2 rounded-full" style={{ width: `${usedPct}%` }}></div>
               </div>
             </div>
           </div>
         </Card>
       </div>
 
+      {/* Admin Quick Access */}
+      <Card className="p-6 mb-6">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h2 className="text-lg font-semibold">Admin Quick Access</h2>
+            <p className="text-sm text-gray-500 dark:text-gray-400">Open common admin tools directly</p>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          {adminLinks.map((link) => (
+            <a
+              key={link.url}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start justify-between rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 hover:shadow-md transition-shadow"
+            >
+              <div className="flex items-start gap-3">
+                <div className="mt-0.5">{link.icon}</div>
+                <div>
+                  <p className="text-sm font-semibold text-gray-900 dark:text-white">{link.label}</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{link.note}</p>
+                </div>
+              </div>
+              <ExternalLink className="w-4 h-4 text-gray-400" />
+            </a>
+          ))}
+        </div>
+      </Card>
+
       {/* Recent Activity */}
       <Card className="p-6">
         <h2 className="text-lg font-semibold mb-4">Recent Activity</h2>