feat(rbac): gate pages and action buttons in the UI by permission

Nav already hides pages a role can't view (NAV_REQUIRED_PERMISSION). This wraps
the sensitive/CRUD action controls in <Can permission> so users only see what
they can do (server still enforces):

- POS/orders: void → VoidOrder, cancel → VoidOrder, transfer → EditOrder,
  pay/split → HandlePayments
- menu/inventory/coupons/customers/reservations/expenses/taxes/branches:
  add/edit/delete buttons → the matching Create/Edit/Delete permission
- reports CSV export → ExportReports; SMS send → SendSms, settings → ManageSmsSettings
- home dashboard: revenue/orders KPI queries gated on ViewReports so non-report
  roles don't 403 on the landing page

(Refund/discount/comp/cash-drawer have no UI control yet — no buttons to gate.)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/dashboard/src/components/branches/branches-screen.tsx

@@ -24,6 +24,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { cn } from "@/lib/utils";
+import { Can } from "@/components/auth/can";
 
 type Branch = {
   id: string;
@@ -266,6 +267,7 @@ export function BranchesScreen() {
                       <Eye className="h-3.5 w-3.5 me-1.5" />
                       {t("review")}
                     </Button>
+                    <Can permission="DeleteBranch">
                       <Button
                         type="button"
                         size="sm"
@@ -279,6 +281,7 @@ export function BranchesScreen() {
                         <Trash2 className="h-3.5 w-3.5 me-1.5" />
                         {t("delete")}
                       </Button>
+                    </Can>
                   </div>
                 </li>
               ))}
@@ -327,6 +330,7 @@ export function BranchesScreen() {
                 />
               </LabeledField>
             </div>
+            <Can permission="CreateBranch">
               <Button
                 type="submit"
                 className="bg-[#0F6E56] hover:bg-[#0c5a46]"
@@ -334,6 +338,7 @@ export function BranchesScreen() {
               >
                 {createBranch.isPending ? "..." : t("add")}
               </Button>
+            </Can>
             <p className="text-xs text-muted-foreground">{t("masterPlanHint")}</p>
           </form>
           <p className="text-xs text-muted-foreground">{t("branchSelectHint")}</p>

web/dashboard/src/components/coupons/coupons-screen.tsx

@@ -16,6 +16,7 @@ import { LabeledField } from "@/components/ui/labeled-field";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
+import { Can } from "@/components/auth/can";
 
 export function CouponsScreen() {
   const t = useTranslations("coupons");
@@ -68,10 +69,12 @@ export function CouponsScreen() {
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <h2 className="text-xl font-bold">{t("title")}</h2>
+        <Can permission="CreateCoupon">
           <Button onClick={() => setShowForm(!showForm)}>
             <Plus className="h-4 w-4" />
             {t("addCoupon")}
           </Button>
+        </Can>
       </div>
 
       {showForm && (
@@ -148,6 +151,7 @@ export function CouponsScreen() {
                   {c.usageLimit ? ` / ${formatNumber(c.usageLimit)}` : ""}
                 </p>
                 <div className="mt-2 flex justify-end">
+                  <Can permission="DeleteCoupon">
                     <Button
                       type="button"
                       size="sm"
@@ -158,6 +162,7 @@ export function CouponsScreen() {
                       <Trash2 className="me-1.5 size-4" />
                       {tCommon("delete")}
                     </Button>
+                  </Can>
                 </div>
               </CardContent>
             </Card>

web/dashboard/src/components/crm/crm-screen.tsx

@@ -17,6 +17,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { CustomerWizard, type CustomerWizardMode } from "@/components/crm/customer-wizard";
+import { Can } from "@/components/auth/can";
 
 export function CrmScreen() {
   const t = useTranslations("crm");
@@ -67,6 +68,7 @@ export function CrmScreen() {
     <div className="space-y-4">
       <div className="flex flex-wrap items-center justify-between gap-3">
         <h2 className="text-xl font-bold">{t("title")}</h2>
+        <Can permission="CreateCustomer">
           <Button
             className="bg-[#0F6E56] hover:bg-[#0c5a46]"
             onClick={() => openWizard("create")}
@@ -74,6 +76,7 @@ export function CrmScreen() {
             <Plus className="me-2 h-4 w-4" />
             {t("addCustomer")}
           </Button>
+        </Can>
       </div>
 
       <div className="flex flex-wrap items-end gap-2">
@@ -120,6 +123,7 @@ export function CrmScreen() {
                   </p>
                 </div>
                 <div className="flex gap-2">
+                  <Can permission="EditCustomer">
                     <Button
                       size="sm"
                       variant="outline"
@@ -129,6 +133,8 @@ export function CrmScreen() {
                       <Pencil className="me-1 h-3.5 w-3.5" />
                       {tCommon("edit")}
                     </Button>
+                  </Can>
+                  <Can permission="DeleteCustomer">
                     <Button
                       size="sm"
                       variant="outline"
@@ -138,6 +144,7 @@ export function CrmScreen() {
                     >
                       <Trash2 className="h-3.5 w-3.5" />
                     </Button>
+                  </Can>
                 </div>
               </CardContent>
             </Card>

web/dashboard/src/components/expenses/expenses-screen.tsx

@@ -15,6 +15,7 @@ import { MoneyInput } from "@/components/ui/money-input";
 import { JalaliDateField } from "@/components/ui/jalali-date-field";
 import { LabeledField } from "@/components/ui/labeled-field";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Can } from "@/components/auth/can";
 type Branch = { id: string; name: string };
 
 type ShiftDto = {
@@ -146,6 +147,7 @@ export function ExpensesScreen() {
         title={t("title")}
         subtitle={t("subtitle")}
         action={
+          <Can permission="CreateExpense">
             <Button
               className="bg-[#0F6E56] hover:bg-[#0d5e49]"
               onClick={() => setShowModal(true)}
@@ -154,6 +156,7 @@ export function ExpensesScreen() {
               <Plus className="ms-2 h-4 w-4" />
               {t("addExpense")}
             </Button>
+          </Can>
         }
       />
 
@@ -236,6 +239,7 @@ export function ExpensesScreen() {
                     </td>
                     {canDelete ? (
                       <td className="py-2.5 text-end">
+                        <Can permission="DeleteExpense">
                           <Button
                             variant="ghost"
                             size="icon"
@@ -246,6 +250,7 @@ export function ExpensesScreen() {
                           >
                             <Trash2 className="h-4 w-4" />
                           </Button>
+                        </Can>
                       </td>
                     ) : null}
                   </tr>

web/dashboard/src/components/inventory/inventory-screen.tsx

@@ -21,6 +21,7 @@ import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { notify } from "@/lib/notify";
 import { useApiError } from "@/lib/use-api-error";
+import { Can } from "@/components/auth/can";
 
 type Ingredient = {
   id: string;
@@ -369,6 +370,7 @@ export function InventoryScreen() {
               <LabeledField label={t("reorderLevel")}>
                 <Input value={reorder} onChange={(e) => setReorder(e.target.value)} dir="ltr" className="text-end" />
               </LabeledField>
+              <Can permission="CreateInventory">
                 <Button
                   className="bg-[#0F6E56] hover:bg-[#0c5a46] self-end"
                   disabled={!name.trim()}
@@ -376,6 +378,7 @@ export function InventoryScreen() {
                 >
                   {tCommon("save")}
                 </Button>
+              </Can>
             </CardContent>
           </Card>
 
@@ -458,6 +461,7 @@ export function InventoryScreen() {
                             {t("quantityEditHint")}
                           </p>
                           <div className="flex gap-2">
+                            <Can permission="EditInventory">
                               <Button
                                 size="sm"
                                 className="bg-[#0F6E56] hover:bg-[#0c5a46]"
@@ -466,6 +470,7 @@ export function InventoryScreen() {
                               >
                                 {tCommon("save")}
                               </Button>
+                            </Can>
                             <Button
                               size="sm"
                               variant="outline"
@@ -483,6 +488,7 @@ export function InventoryScreen() {
                               {ing.isLowStock ? (
                                 <Badge variant="outline">{t("lowStock")}</Badge>
                               ) : null}
+                              <Can permission="EditInventory">
                                 <Button
                                   type="button"
                                   size="icon"
@@ -493,6 +499,8 @@ export function InventoryScreen() {
                                 >
                                   <Pencil className="size-4" />
                                 </Button>
+                              </Can>
+                              <Can permission="DeleteInventory">
                                 <Button
                                   type="button"
                                   size="icon"
@@ -503,6 +511,7 @@ export function InventoryScreen() {
                                 >
                                   <Trash2 className="size-4" />
                                 </Button>
+                              </Can>
                             </div>
                           </div>
                           <p className="text-sm font-medium text-[#0F6E56]">
@@ -540,6 +549,7 @@ export function InventoryScreen() {
                                   />
                                 </LabeledField>
                               ) : null}
+                              <Can permission="EditInventory">
                                 <Button
                                   size="sm"
                                   variant="outline"
@@ -563,6 +573,7 @@ export function InventoryScreen() {
                                 >
                                   {t("adjust")}
                                 </Button>
+                              </Can>
                             </div>
                             {parseFloat(adjustQty[ing.id] ?? "0") > 0 ? (
                               <p className="text-[11px] text-muted-foreground">{t("purchaseHint")}</p>

web/dashboard/src/components/menu/menu-admin-screen.tsx

@@ -41,6 +41,7 @@ import { MenuItemMedia } from "@/components/menu/menu-item-media";
 import { buildCategoryNameMap, inferMenuItemKind } from "@/lib/menu-item-image";
 import { menuItemMatchesSearch } from "@/lib/menu-display";
 import { BranchMenuOverrides } from "@/components/menu/branch-menu-overrides";
+import { Can } from "@/components/auth/can";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -565,6 +566,7 @@ export function MenuAdminScreen() {
                     </span>
                   </button>
                   {/* Edit category button */}
+                  <Can permission="EditMenuItem">
                     <button
                       type="button"
                       aria-label={t("editCategory")}
@@ -573,11 +575,13 @@ export function MenuAdminScreen() {
                     >
                       <Pencil className="size-3" />
                     </button>
+                  </Can>
                 </div>
               ))}
 
               {/* Add category button */}
               <div className="mt-1 border-t border-border/60 pt-1">
+                <Can permission="CreateMenuItem">
                   <button
                     type="button"
                     onClick={openAddCategory}
@@ -586,6 +590,7 @@ export function MenuAdminScreen() {
                     <Plus className="size-4 shrink-0" />
                     {t("addCategory")}
                   </button>
+                </Can>
               </div>
             </div>
           </aside>
@@ -632,6 +637,7 @@ export function MenuAdminScreen() {
                   </span>
                 </button>
               ))}
+              <Can permission="CreateMenuItem">
                 <button
                   type="button"
                   onClick={openAddCategory}
@@ -640,6 +646,7 @@ export function MenuAdminScreen() {
                   <Plus className="size-3" />
                   {t("addCategory")}
                 </button>
+              </Can>
             </div>
 
             {/* Search + Add bar */}
@@ -665,6 +672,7 @@ export function MenuAdminScreen() {
                   </Button>
                 ) : null}
               </div>
+              <Can permission="CreateMenuItem">
                 <Button
                   onClick={openAddItem}
                   className="shrink-0 bg-[#0F6E56] hover:bg-[#0c5a46]"
@@ -673,6 +681,7 @@ export function MenuAdminScreen() {
                   <Plus className="me-1.5 size-4" />
                   {t("newItem")}
                 </Button>
+              </Can>
             </div>
 
             {/* Items grid */}
@@ -690,6 +699,7 @@ export function MenuAdminScreen() {
                   {itemSearch ? t("noItemsMatchSearch") : t("noItemsInCategory")}
                 </p>
                 {!itemSearch ? (
+                  <Can permission="CreateMenuItem">
                     <Button
                       variant="outline"
                       size="sm"
@@ -699,6 +709,7 @@ export function MenuAdminScreen() {
                       <Plus className="me-1.5 size-4" />
                       {t("addItem")}
                     </Button>
+                  </Can>
                 ) : null}
               </div>
             ) : (
@@ -730,6 +741,7 @@ export function MenuAdminScreen() {
 
                         {/* Hover overlay — edit button */}
                         <div className="absolute inset-0 flex items-center justify-center bg-black/0 transition-all group-hover:bg-black/25">
+                          <Can permission="EditMenuItem">
                             <Button
                               size="sm"
                               className="translate-y-2 opacity-0 shadow-lg transition-all group-hover:translate-y-0 group-hover:opacity-100"
@@ -738,6 +750,7 @@ export function MenuAdminScreen() {
                               <Pencil className="me-1.5 size-3.5" />
                               {t("editItem")}
                             </Button>
+                          </Can>
                         </div>
 
                         {/* Discount badge */}
@@ -933,6 +946,7 @@ export function MenuAdminScreen() {
           {/* Actions */}
           <div className="flex items-center justify-between gap-2 border-t border-border pt-4">
             {editingItem ? (
+              <Can permission="DeleteMenuItem">
                 <Button
                   type="button"
                   variant="ghost"
@@ -948,6 +962,7 @@ export function MenuAdminScreen() {
                   <Trash2 className="me-1.5 size-4" />
                   {tCommon("delete")}
                 </Button>
+              </Can>
             ) : (
               <span />
             )}
@@ -999,6 +1014,7 @@ export function MenuAdminScreen() {
 
           <div className="flex items-center justify-between gap-2 border-t border-border pt-4">
             {editingCategory ? (
+              <Can permission="DeleteMenuItem">
                 <Button
                   type="button"
                   variant="ghost"
@@ -1014,6 +1030,7 @@ export function MenuAdminScreen() {
                   <Trash2 className="me-1.5 size-4" />
                   {tCommon("delete")}
                 </Button>
+              </Can>
             ) : (
               <span />
             )}

web/dashboard/src/components/overview/overview-screen.tsx

@@ -19,6 +19,7 @@ import {
 import { Link } from "@/i18n/routing";
 import { apiGet } from "@/lib/api/client";
 import { useAuthStore } from "@/lib/stores/auth.store";
+import { useHasPermission } from "@/lib/permissions";
 import { useLiveClock } from "@/lib/hooks/use-live-clock";
 import {
   addDaysIso,
@@ -100,6 +101,9 @@ export function OverviewScreen() {
   const cafeId = useAuthStore((s) => s.user?.cafeId);
   const branchId = useAuthStore((s) => s.user?.branchId ?? null);
   const role = useAuthStore((s) => s.user?.role);
+  // KPI cards surface revenue/orders/net income — report data. Don't fetch (and
+  // 403) for roles without ViewReports; the cards simply stay empty for them.
+  const canViewReports = useHasPermission("ViewReports");
 
   const clock = useLiveClock(10_000);
 
@@ -122,7 +126,7 @@ export function OverviewScreen() {
       apiGet<DailyReportSnapshot[]>(
         `/api/cafes/${cafeId}/reports/daily/range?from=${sevenDaysAgo}&to=${today}`
       ),
-    enabled: !!cafeId,
+    enabled: !!cafeId && canViewReports,
     staleTime: 60_000,
   });
 
@@ -132,7 +136,7 @@ export function OverviewScreen() {
       apiGet<DailyReportSnapshot[]>(
         `/api/cafes/${cafeId}/reports/daily/range?from=${yesterday}&to=${yesterday}`
       ),
-    enabled: !!cafeId,
+    enabled: !!cafeId && canViewReports,
     staleTime: 300_000,
   });
 

web/dashboard/src/components/pos/pos-pay-panel.tsx

@@ -13,6 +13,7 @@ import { formatCurrency, formatNumber } from "@/lib/format";
 import { formatPosOrderLabel } from "@/lib/pos-order-label";
 import { formatOrderNumber } from "@/lib/order-number";
 import { PosTableBoard } from "@/components/pos/pos-table-board";
+import { Can } from "@/components/auth/can";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { LabeledField } from "@/components/ui/labeled-field";
@@ -613,6 +614,7 @@ export function PosPayPanel({ cafeId, numberLocale, branchId = null }: PosPayPan
                   className="h-9"
                   maxLength={500}
                 />
+                <Can permission="VoidOrder">
                   <Button
                     type="button"
                     variant="outline"
@@ -631,6 +633,7 @@ export function PosPayPanel({ cafeId, numberLocale, branchId = null }: PosPayPan
                   >
                     {cancelOrder.isPending ? "..." : t("cancelOrder")}
                   </Button>
+                </Can>
                 <form
                   className="w-full"
                   onSubmit={(e) => {
@@ -640,6 +643,7 @@ export function PosPayPanel({ cafeId, numberLocale, branchId = null }: PosPayPan
                     }
                   }}
                 >
+                  <Can permission="HandlePayments">
                     <Button
                       type="submit"
                       className="w-full"
@@ -647,6 +651,7 @@ export function PosPayPanel({ cafeId, numberLocale, branchId = null }: PosPayPan
                     >
                       {payOrder.isPending ? "..." : payButtonLabel}
                     </Button>
+                  </Can>
                 </form>
               </div>
             </>

web/dashboard/src/components/pos/pos-screen.tsx

@@ -51,6 +51,7 @@ import {
   buildCategoryNameMap,
   inferMenuItemKind,
 } from "@/lib/menu-item-image";
+import { Can } from "@/components/auth/can";
 import { PosPayPanel } from "@/components/pos/pos-pay-panel";
 import { PosTableBoard } from "@/components/pos/pos-table-board";
 import { PosCustomerPicker } from "@/components/pos/pos-customer-picker";
@@ -1174,6 +1175,7 @@ export function PosScreen() {
 
                 {/* Transfer table (for table orders with active session) */}
                 {activeOrderId && tableId ? (
+                  <Can permission="EditOrder">
                     <Button
                       type="button"
                       variant="outline"
@@ -1183,6 +1185,7 @@ export function PosScreen() {
                     >
                       {t("transferTable")}
                     </Button>
+                  </Can>
                 ) : null}
 
                 {/* Assign table button (for counter orders) */}
@@ -1248,6 +1251,7 @@ export function PosScreen() {
                           line.orderItemId &&
                           !line.isVoided &&
                           activeOrderId ? (
+                            <Can permission="VoidOrder">
                               <button
                                 type="button"
                                 className="cursor-pointer text-[10px] text-destructive hover:underline"
@@ -1256,6 +1260,7 @@ export function PosScreen() {
                               >
                                 {t("void")}
                               </button>
+                            </Can>
                           ) : null}
                           {!line.isVoided ? (
                             <>
@@ -1443,6 +1448,7 @@ export function PosScreen() {
                   ) : null}
 
                   <div className="flex flex-col gap-2 pt-0.5">
+                    <Can permission="HandlePayments">
                       <Button
                         size="sm"
                         className="w-full"
@@ -1453,6 +1459,7 @@ export function PosScreen() {
                           ? "..."
                           : t("submitOrderAndPay")}
                       </Button>
+                    </Can>
                     <div className="flex gap-2">
                       <Button
                         size="sm"

web/dashboard/src/components/pos2/pos2-prototype.tsx

@@ -15,6 +15,7 @@ import {
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { notify } from "@/lib/notify";
+import { Can } from "@/components/auth/can";
 
 type Item = { id: string; name: string; price: number; cat: string };
 type Line = { item: Item; qty: number };
@@ -402,18 +403,22 @@ function Ticket({
           className="flex min-h-[56px] items-center justify-center gap-2 rounded-xl bg-primary text-base font-bold text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-40 active:scale-[0.98]">
           <Send className="size-5" /> ارسال
         </button>
+        <Can permission="HandlePayments">
           <button type="button" disabled={!count} onClick={onPay}
             className="flex min-h-[56px] items-center justify-center gap-2 rounded-xl border-2 border-primary text-base font-bold text-primary transition-colors hover:bg-primary/10 disabled:opacity-40 active:scale-[0.98]">
             <CreditCard className="size-5" /> پرداخت
           </button>
+        </Can>
         <button type="button" disabled={!count} onClick={onHold}
           className="flex min-h-[48px] items-center justify-center gap-1.5 rounded-xl bg-muted text-sm font-medium text-muted-foreground hover:bg-accent disabled:opacity-40">
           <Pause className="size-4" /> نگه‌داشتن
         </button>
+        <Can permission="HandlePayments">
           <button type="button" disabled={!count} onClick={onSplit}
             className="flex min-h-[48px] items-center justify-center gap-1.5 rounded-xl bg-muted text-sm font-medium text-muted-foreground hover:bg-accent disabled:opacity-40">
             <SplitSquareHorizontal className="size-4" /> تقسیم
           </button>
+        </Can>
       </div>
     </div>
   );

web/dashboard/src/components/pos2/pos2-screen.tsx

@@ -25,6 +25,7 @@ import { apiGet, apiPost, ApiClientError } from "@/lib/api/client";
 import { submitOrderToApi, orderAmountDue, isLocalOrder } from "@/lib/pos/submit-order";
 import { requestPosPayment, posDeviceErrorMessage } from "@/lib/api/pos-device";
 import { PosCustomerPicker } from "@/components/pos/pos-customer-picker";
+import { Can } from "@/components/auth/can";
 import type { Customer, MenuItem, Order, TableBoardItem } from "@/lib/api/types";
 import { usePos2Categories, usePos2Menu, usePos2Tables, useMenuById } from "@/lib/pos2/use-pos2";
 
@@ -729,17 +730,21 @@ function Ticket({
           className="flex min-h-[56px] items-center justify-center gap-2 rounded-xl bg-primary text-base font-bold text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-40 active:scale-[0.98]">
           <Send className="size-5" /> ارسال{pendingCount > 0 ? ` (${fmt(pendingCount)})` : ""}
         </button>
+        <Can permission="HandlePayments">
           <button type="button" disabled={count === 0} onClick={onPay}
             className="flex min-h-[56px] items-center justify-center gap-2 rounded-xl border-2 border-primary text-base font-bold text-primary transition-colors hover:bg-primary/10 disabled:opacity-40 active:scale-[0.98]">
             <CreditCard className="size-5" /> پرداخت
           </button>
+        </Can>
         <button type="button" disabled className="flex min-h-[48px] items-center justify-center gap-1.5 rounded-xl bg-muted text-sm font-medium text-muted-foreground opacity-50">
           <Pause className="size-4" /> نگه‌داشتن
         </button>
+        <Can permission="HandlePayments">
           <button type="button" disabled={count === 0} onClick={onSplit}
             className="flex min-h-[48px] items-center justify-center gap-1.5 rounded-xl bg-muted text-sm font-medium text-muted-foreground hover:bg-accent disabled:opacity-40">
             <SplitSquareHorizontal className="size-4" /> تقسیم
           </button>
+        </Can>
       </div>
     </div>
   );

web/dashboard/src/components/reports/reports-screen.tsx

@@ -33,6 +33,7 @@ import { ReportsChartsFallback } from "@/components/reports/reports-charts-fallb
 import type { ReportsChartsProps } from "@/components/reports/reports-charts.types";
 import { PaymentCorrectionsTab } from "@/components/reports/payment-corrections-tab";
 import { AuditLogsTab } from "@/components/reports/audit-logs-tab";
+import { Can } from "@/components/auth/can";
 
 const LazyReportsCharts = lazy(() =>
   import("@/components/reports/reports-charts").then((m) => ({
@@ -218,6 +219,7 @@ export function ReportsScreen() {
         subtitle={t("subtitle")}
         action={
           tab === "performance" ? (
+            <Can permission="ExportReports">
               <Button
                 variant="outline"
                 className="border-[#0F6E56]/40"
@@ -227,6 +229,7 @@ export function ReportsScreen() {
                 <Download className="ms-2 h-4 w-4" />
                 {t("exportCsv")}
               </Button>
+            </Can>
           ) : undefined
         }
       />

web/dashboard/src/components/reservations/reservations-screen.tsx

@@ -19,6 +19,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import type { Table } from "@/lib/api/types";
+import { Can } from "@/components/auth/can";
 
 type ReservationStatus =
   | "Pending"
@@ -194,12 +195,14 @@ export function ReservationsScreen() {
             />
           </LabeledField>
           <div className="sm:col-span-2 lg:col-span-3">
+            <Can permission="CreateReservation">
               <Button
                 onClick={() => createReservation.mutate()}
                 disabled={!guestName.trim() || createReservation.isPending}
               >
                 {createReservation.isPending ? "..." : t("create")}
               </Button>
+            </Can>
           </div>
         </CardContent>
       </Card>
@@ -228,12 +231,15 @@ export function ReservationsScreen() {
                   <div className="flex flex-wrap gap-2">
                     {r.status === "Pending" && (
                       <>
+                        <Can permission="EditReservation">
                           <Button
                             size="sm"
                             onClick={() => updateStatus.mutate({ id: r.id, status: "Confirmed" })}
                           >
                             {t("confirm")}
                           </Button>
+                        </Can>
+                        <Can permission="EditReservation">
                           <Button
                             size="sm"
                             variant="outline"
@@ -241,6 +247,7 @@ export function ReservationsScreen() {
                           >
                             {t("cancel")}
                           </Button>
+                        </Can>
                       </>
                     )}
                     {(r.status === "Confirmed" || r.status === "Seated") && (
@@ -249,6 +256,7 @@ export function ReservationsScreen() {
                       </Button>
                     )}
                     {r.status === "Seated" && (
+                      <Can permission="EditReservation">
                         <Button
                           size="sm"
                           variant="outline"
@@ -256,7 +264,9 @@ export function ReservationsScreen() {
                         >
                           {t("markCompleted")}
                         </Button>
+                      </Can>
                     )}
+                    <Can permission="DeleteReservation">
                       <Button
                         size="sm"
                         variant="ghost"
@@ -266,6 +276,7 @@ export function ReservationsScreen() {
                       >
                         <Trash2 className="size-4" />
                       </Button>
+                    </Can>
                   </div>
                 </CardContent>
               </Card>

web/dashboard/src/components/sms/sms-screen.tsx

@@ -14,6 +14,7 @@ import { Input } from "@/components/ui/input";
 import { LabeledField } from "@/components/ui/labeled-field";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
+import { Can } from "@/components/auth/can";
 
 const GROUPS: (CustomerGroup | "all")[] = ["all", "Regular", "Vip", "New", "Employee"];
 const MANAGER_ROLES = new Set(["Owner", "Manager"]);
@@ -195,6 +196,7 @@ export function SmsScreen() {
           </LabeledField>
 
           {/* Send button */}
+          <Can permission="SendSms">
             <Button
               className="w-full"
               disabled={!message.trim() || sendCampaign.isPending || !isConfigured}
@@ -202,6 +204,7 @@ export function SmsScreen() {
             >
               {sendCampaign.isPending ? t("sending") : t("send")}
             </Button>
+          </Can>
 
           {/* Result banner */}
           {result && (
@@ -314,6 +317,7 @@ function ProviderSettingsCard({
           <p className="text-[11px] text-muted-foreground">
             {settings?.isConfigured ? t("configured") : t("notConfigured")}
           </p>
+          <Can permission="ManageSmsSettings">
             <Button
               size="sm"
               disabled={!canSave || save.isPending}
@@ -321,6 +325,7 @@ function ProviderSettingsCard({
             >
               {save.isPending ? t("saving") : t("save")}
             </Button>
+          </Can>
         </div>
       </CardContent>
     </Card>

web/dashboard/src/components/taxes/taxes-screen.tsx

@@ -15,6 +15,7 @@ import { LabeledField } from "@/components/ui/labeled-field";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { useConfirm } from "@/components/providers/confirm-provider";
+import { Can } from "@/components/auth/can";
 
 interface TaxRow {
   id: string;
@@ -89,6 +90,7 @@ export function TaxesScreen() {
         subtitle={t("subtitle")}
         action={
           canEdit ? (
+            <Can permission="CreateTax">
               <Button
                 className="bg-[#0F6E56] hover:bg-[#0c5a46]"
                 disabled={!name.trim() || !rate}
@@ -97,6 +99,7 @@ export function TaxesScreen() {
                 <Plus className="me-2 h-4 w-4" />
                 {t("addTax")}
               </Button>
+            </Can>
           ) : undefined
         }
       />
@@ -152,6 +155,7 @@ export function TaxesScreen() {
                   </Button>
                 ) : null}
                 {canEdit ? (
+                  <Can permission="DeleteTax">
                     <Button
                       size="sm"
                       variant="ghost"
@@ -162,6 +166,7 @@ export function TaxesScreen() {
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
+                  </Can>
                 ) : null}
               </div>
             </li>