improvement: newly created organization's subscriptions flow improved.

frontend/src/app/(dashboard)/billing/page.tsx

@@ -5,6 +5,8 @@ import { Search, Filter, Plus } from 'lucide-react';
 import { Button } from '@/components/ui/common/Button';
 import { Input } from '@/components/ui/common/Input';
 import { Badge } from '@/components/ui/common/Badge';
+import { useAuth } from '@/lib/hooks/useAuth';
+import { hasPermission } from '@/shared/permissions';
 // Mock data matching your design
 const invoices = [
     { id: '#123456', patient: 'Ali Rahmani', date: '24/9/2026', service: 'Hygiene', amount: 300, paid: 0, status: 'unpaid' },
@@ -25,8 +27,10 @@ interface StatCardProps {
     color: StatCardColor;
 }
 export default function BillingPage() {
+    const { currentOrganization } = useAuth();
     const [search, setSearch] = useState('');
     const [statusFilter, setStatusFilter] = useState('all');
+    const canEditBilling = hasPermission(currentOrganization, 'TAB_BILLING_EDIT');
     const stats = {
         total: { count: 235, amount: 80900 },
         unpaid: { count: 30, amount: 2800 },
@@ -38,7 +42,12 @@ export default function BillingPage() {
             {/* Header */}
             <div className="flex justify-between items-center">
                 <h1 className="text-2xl font-semibold text-text-primary">Billing</h1>
-                <Button variant="primary" className="flex items-center gap-2">
+                <Button
+                    variant="primary"
+                    className="flex items-center gap-2"
+                    disabled={!canEditBilling}
+                    title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
+                >
                     <Plus className="h-4 w-4 icon-flat" />
                     New Invoice
                 </Button>
@@ -158,7 +167,11 @@ export default function BillingPage() {
                                     </Badge>
                                 </td>
                                 <td className="px-6 py-4">
-                                    <button className="text-primary hover:opacity-90 text-sm">
+                                    <button
+                                        className={`text-sm ${canEditBilling ? 'text-primary hover:opacity-90' : 'text-text-muted cursor-not-allowed'}`}
+                                        disabled={!canEditBilling}
+                                        title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
+                                    >
                                         Edit
                                     </button>
                                 </td>