feat: billing system — service plans, wallet, cost calculation
- Backend: billing module with ServicePlan, PricingRule, Wallet, WalletTransaction entities - Admin can CRUD service plans with hourly/monthly/yearly billing cycles - Each plan has flexible pricing rules (base_fee, cpu, memory, storage, db addon) - Wallet system: auto-created per user, charge, deduct, refund, transaction history - Cost calculation endpoint: cross-cycle conversion (hourly*720=monthly, monthly*12=yearly) - Frontend: admin billing management page (/dashboard/admin/billing) - Frontend: user wallet page with balance, quick-charge, transaction history - Deploy page: cost breakdown shown in Review step (hourly/monthly/yearly) - Navigation: Wallet link for users, Billing Plans link for admins
This commit is contained in:
keyhan
@@ -0,0 +1,295 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import api from '@/lib/api';
|
||||
import { toast } from 'react-toastify';
|
||||
import type { ServicePlan, BillingCycle, PricingResourceType } from '@/types';
|
||||
import { DollarSign, Plus, Trash2, Edit2, ToggleLeft, ToggleRight, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
|
||||
const cycleLabels: Record<BillingCycle, string> = {
|
||||
hourly: 'ساعتی',
|
||||
monthly: 'ماهانه',
|
||||
yearly: 'سالانه',
|
||||
};
|
||||
|
||||
const resourceLabels: Record<PricingResourceType, string> = {
|
||||
base_fee: 'هزینه پایه',
|
||||
cpu_per_core: 'CPU (هر هسته)',
|
||||
memory_per_gb: 'حافظه (هر GB)',
|
||||
storage_per_gb: 'دیسک (هر GB)',
|
||||
database_addon: 'افزونه دیتابیس',
|
||||
};
|
||||
|
||||
const allResourceTypes: PricingResourceType[] = ['base_fee', 'cpu_per_core', 'memory_per_gb', 'storage_per_gb', 'database_addon'];
|
||||
|
||||
interface RuleForm {
|
||||
resourceType: PricingResourceType;
|
||||
unitPrice: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const emptyRule = (): RuleForm => ({ resourceType: 'base_fee', unitPrice: '', description: '' });
|
||||
|
||||
export default function AdminBillingPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [expandedPlan, setExpandedPlan] = useState<string | null>(null);
|
||||
const [formName, setFormName] = useState('');
|
||||
const [formDesc, setFormDesc] = useState('');
|
||||
const [formCycle, setFormCycle] = useState<BillingCycle>('monthly');
|
||||
const [rules, setRules] = useState<RuleForm[]>([emptyRule()]);
|
||||
|
||||
const { data: plans = [], isLoading } = useQuery<ServicePlan[]>({
|
||||
queryKey: ['billing-plans'],
|
||||
queryFn: () => api.get('/billing/plans').then((r) => r.data),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: any) => editingId
|
||||
? api.patch(`/billing/plans/${editingId}`, data)
|
||||
: api.post('/billing/plans', data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['billing-plans'] });
|
||||
toast.success(editingId ? 'پلن بروزرسانی شد' : 'پلن ایجاد شد');
|
||||
resetForm();
|
||||
},
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'خطا'),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: string) => api.delete(`/billing/plans/${id}`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['billing-plans'] });
|
||||
toast.success('پلن حذف شد');
|
||||
},
|
||||
onError: () => toast.error('خطا در حذف پلن'),
|
||||
});
|
||||
|
||||
const toggleMutation = useMutation({
|
||||
mutationFn: ({ id, isActive }: { id: string; isActive: boolean }) =>
|
||||
api.patch(`/billing/plans/${id}`, { isActive }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['billing-plans'] });
|
||||
},
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
setShowForm(false);
|
||||
setEditingId(null);
|
||||
setFormName('');
|
||||
setFormDesc('');
|
||||
setFormCycle('monthly');
|
||||
setRules([emptyRule()]);
|
||||
};
|
||||
|
||||
const startEdit = (plan: ServicePlan) => {
|
||||
setEditingId(plan.id);
|
||||
setFormName(plan.name);
|
||||
setFormDesc(plan.description || '');
|
||||
setFormCycle(plan.billingCycle);
|
||||
setRules(
|
||||
plan.pricingRules.map((r) => ({
|
||||
resourceType: r.resourceType,
|
||||
unitPrice: String(r.unitPrice),
|
||||
description: r.description || '',
|
||||
})),
|
||||
);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!formName.trim()) return toast.error('نام پلن الزامی است');
|
||||
const validRules = rules.filter((r) => r.unitPrice && Number(r.unitPrice) > 0);
|
||||
if (validRules.length === 0) return toast.error('حداقل یک قاعده قیمتگذاری اضافه کنید');
|
||||
|
||||
createMutation.mutate({
|
||||
name: formName,
|
||||
description: formDesc || undefined,
|
||||
billingCycle: formCycle,
|
||||
pricingRules: validRules.map((r) => ({
|
||||
resourceType: r.resourceType,
|
||||
unitPrice: Number(r.unitPrice),
|
||||
description: r.description || undefined,
|
||||
})),
|
||||
});
|
||||
};
|
||||
|
||||
const addRule = () => setRules([...rules, emptyRule()]);
|
||||
const removeRule = (i: number) => setRules(rules.filter((_, idx) => idx !== i));
|
||||
const updateRule = (i: number, field: keyof RuleForm, value: string) => {
|
||||
const updated = [...rules];
|
||||
updated[i] = { ...updated[i], [field]: value };
|
||||
setRules(updated);
|
||||
};
|
||||
|
||||
const formatPrice = (n: number) => Number(n).toLocaleString('fa-IR');
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6 animate-fade-in">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="page-title flex items-center gap-2"><DollarSign className="w-6 h-6" /> مدیریت پلنها و قیمتگذاری</h1>
|
||||
<p className="page-subtitle">تعریف سرویسها و هزینهها برای هر نوع اپلیکیشن</p>
|
||||
</div>
|
||||
{!showForm && (
|
||||
<button onClick={() => setShowForm(true)} className="btn-primary flex items-center gap-2">
|
||||
<Plus className="w-4 h-4" /> پلن جدید
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Create / Edit Form */}
|
||||
{showForm && (
|
||||
<div className="card space-y-4">
|
||||
<h2 className="text-lg font-semibold">{editingId ? 'ویرایش پلن' : 'ایجاد پلن جدید'}</h2>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">نام پلن</label>
|
||||
<input className="input-field" placeholder="مثال: Node.js پایه" value={formName} onChange={(e) => setFormName(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">دوره پرداخت</label>
|
||||
<select className="input-field" value={formCycle} onChange={(e) => setFormCycle(e.target.value as BillingCycle)}>
|
||||
<option value="hourly">ساعتی</option>
|
||||
<option value="monthly">ماهانه</option>
|
||||
<option value="yearly">سالانه</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">توضیحات (اختیاری)</label>
|
||||
<input className="input-field" placeholder="توضیحات درباره پلن" value={formDesc} onChange={(e) => setFormDesc(e.target.value)} />
|
||||
</div>
|
||||
|
||||
{/* Pricing Rules */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="text-sm font-semibold text-gray-700">قواعد قیمتگذاری</label>
|
||||
<button onClick={addRule} className="btn-secondary text-xs flex items-center gap-1">
|
||||
<Plus className="w-3 h-3" /> افزودن
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{rules.map((rule, i) => (
|
||||
<div key={i} className="flex items-center gap-2 p-3 bg-gray-50 rounded-lg">
|
||||
<select
|
||||
className="input-field flex-1 text-sm"
|
||||
value={rule.resourceType}
|
||||
onChange={(e) => updateRule(i, 'resourceType', e.target.value)}
|
||||
>
|
||||
{allResourceTypes.map((rt) => (
|
||||
<option key={rt} value={rt}>{resourceLabels[rt]}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
className="input-field w-32 text-sm"
|
||||
type="number"
|
||||
placeholder="قیمت (تومان)"
|
||||
value={rule.unitPrice}
|
||||
onChange={(e) => updateRule(i, 'unitPrice', e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className="input-field flex-1 text-sm"
|
||||
placeholder="توضیح (اختیاری)"
|
||||
value={rule.description}
|
||||
onChange={(e) => updateRule(i, 'description', e.target.value)}
|
||||
/>
|
||||
{rules.length > 1 && (
|
||||
<button onClick={() => removeRule(i)} className="text-red-500 hover:text-red-700 p-1">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<button onClick={resetForm} className="btn-ghost">انصراف</button>
|
||||
<button onClick={handleSubmit} disabled={createMutation.isPending} className="btn-primary disabled:opacity-50">
|
||||
{createMutation.isPending ? 'در حال ذخیره...' : editingId ? 'بروزرسانی' : 'ایجاد پلن'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Plans List */}
|
||||
{isLoading ? (
|
||||
<div className="text-center py-12 text-gray-400">در حال بارگذاری...</div>
|
||||
) : plans.length === 0 ? (
|
||||
<div className="text-center py-12 text-gray-400">هنوز پلنی ایجاد نشده</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{plans.map((plan) => (
|
||||
<div key={plan.id} className="card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setExpandedPlan(expandedPlan === plan.id ? null : plan.id)}
|
||||
className="p-1 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{expandedPlan === plan.id ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
||||
</button>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">{plan.name}</h3>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<span className="badge badge-blue">{cycleLabels[plan.billingCycle]}</span>
|
||||
{plan.description && <span>— {plan.description}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => toggleMutation.mutate({ id: plan.id, isActive: !plan.isActive })}
|
||||
className={`p-1 transition-colors ${plan.isActive ? 'text-green-500' : 'text-gray-400'}`}
|
||||
title={plan.isActive ? 'غیرفعال کردن' : 'فعال کردن'}
|
||||
>
|
||||
{plan.isActive ? <ToggleRight className="w-5 h-5" /> : <ToggleLeft className="w-5 h-5" />}
|
||||
</button>
|
||||
<button onClick={() => startEdit(plan)} className="p-1 text-blue-500 hover:text-blue-700">
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { if (confirm('حذف این پلن؟')) deleteMutation.mutate(plan.id); }}
|
||||
className="p-1 text-red-500 hover:text-red-700"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded pricing rules */}
|
||||
{expandedPlan === plan.id && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-100">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-gray-500 text-xs">
|
||||
<th className="text-right pb-2">نوع منبع</th>
|
||||
<th className="text-right pb-2">قیمت واحد (تومان)</th>
|
||||
<th className="text-right pb-2">توضیحات</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{plan.pricingRules.map((rule) => (
|
||||
<tr key={rule.id} className="border-t border-gray-50">
|
||||
<td className="py-2 font-medium">{resourceLabels[rule.resourceType]}</td>
|
||||
<td className="py-2 text-green-700 font-mono">{formatPrice(rule.unitPrice)}</td>
|
||||
<td className="py-2 text-gray-500">{rule.description || '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user