Add salesperson commissions on issued invoices and a cheque register.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/layouts/AppLayout.vue

@@ -36,7 +36,7 @@ const settingsOpen = ref(false);
 const globalSearch = ref('');
 const activityBadge = ref(0);
 
-const salesPaths = ['/quotes', '/invoices', '/inventory', '/sales/forecast', '/reports', '/notes', '/tickets'];
+const salesPaths = ['/quotes', '/invoices', '/inventory', '/cheques', '/commissions', '/sales/forecast', '/reports', '/notes', '/tickets'];
 const morePaths = ['/activities/calendar', '/projects', '/project-cards', '/loyalty'];
 const settingsPaths = [
   '/settings/team',
@@ -64,6 +64,8 @@ const extraActive = computed(() =>
     '/quotes',
     '/invoices',
     '/inventory',
+    '/cheques',
+    '/commissions',
     '/sales/forecast',
     '/notes',
     '/tickets',
@@ -392,6 +394,8 @@ onUnmounted(() => {
               @click="closeMenu"
             >فاکتورها</RouterLink>
             <RouterLink to="/inventory" @click="closeMenu">انبار</RouterLink>
+            <RouterLink to="/cheques" @click="closeMenu">چک‌ها</RouterLink>
+            <RouterLink to="/commissions" @click="closeMenu">پورسانت</RouterLink>
             <RouterLink to="/sales/forecast" @click="closeMenu">هدف و پیش‌بینی</RouterLink>
             <RouterLink to="/notes" @click="closeMenu">یادداشت‌ها</RouterLink>
             <RouterLink to="/tickets" @click="closeMenu">تیکت‌ها</RouterLink>
@@ -480,6 +484,8 @@ onUnmounted(() => {
           @click="closeMenu"
         >فاکتورها</RouterLink>
         <RouterLink to="/inventory" @click="closeMenu">انبار</RouterLink>
+        <RouterLink to="/cheques" @click="closeMenu">چک‌ها</RouterLink>
+        <RouterLink to="/commissions" @click="closeMenu">پورسانت</RouterLink>
         <RouterLink to="/sales/forecast" @click="closeMenu">هدف و پیش‌بینی</RouterLink>
         <RouterLink to="/notes" @click="closeMenu">یادداشت‌ها</RouterLink>
         <RouterLink to="/tickets" @click="closeMenu">تیکت‌ها</RouterLink>

apps/web/src/router/index.ts

@@ -128,6 +128,16 @@ export const router = createRouter({
           name: 'inventory',
           component: () => import('@/views/InventoryView.vue'),
         },
+        {
+          path: 'cheques',
+          name: 'cheques',
+          component: () => import('@/views/ChequesView.vue'),
+        },
+        {
+          path: 'commissions',
+          name: 'commissions',
+          component: () => import('@/views/CommissionsView.vue'),
+        },
         {
           path: 'pipeline',
           name: 'pipeline',

apps/web/src/views/ChequesView.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { RouterLink } from 'vue-router';
+import axios from 'axios';
+import { api } from '@/lib/api';
+import { formatMoney } from '@/lib/money';
+import { formatJalaliNumeric } from '@/lib/jalali';
+import UiButton from '@/components/ui/UiButton.vue';
+import type { ChequeDto, ChequeStatus } from '@mento/shared';
+
+const loading = ref(false);
+const error = ref('');
+const items = ref<ChequeDto[]>([]);
+const status = ref('');
+const q = ref('');
+const savingId = ref('');
+
+const statusLabel: Record<ChequeStatus, string> = {
+  pending: 'در جریان',
+  cleared: 'وصول شد',
+  bounced: 'برگشت',
+};
+
+const filtered = computed(() => items.value);
+
+async function load() {
+  loading.value = true;
+  error.value = '';
+  try {
+    const { data } = await api.get<ChequeDto[]>('/cheques', {
+      params: { status: status.value || undefined, q: q.value || undefined },
+    });
+    items.value = data;
+  } catch (e) {
+    error.value = axios.isAxiosError(e)
+      ? 'بارگذاری چک‌ها ناموفق بود.'
+      : 'بارگذاری چک‌ها ناموفق بود.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function setStatus(row: ChequeDto, next: ChequeStatus) {
+  if (row.status === next) return;
+  savingId.value = row.id;
+  try {
+    const { data } = await api.patch<ChequeDto>(`/cheques/${row.id}`, {
+      status: next,
+    });
+    items.value = items.value.map((item) => (item.id === row.id ? data : item));
+  } catch {
+    error.value = 'تغییر وضعیت چک ناموفق بود.';
+  } finally {
+    savingId.value = '';
+  }
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <section class="page" dir="rtl">
+    <header class="head">
+      <div>
+        <h1>چک‌ها</h1>
+        <p class="sub">دفتر چک‌های دریافتی وصل به فاکتور؛ وضعیت فقط برای پیگیری است</p>
+      </div>
+      <UiButton variant="ghost" type="button" :disabled="loading" @click="load">
+        بروزرسانی
+      </UiButton>
+    </header>
+
+    <div class="toolbar">
+      <input v-model="q" type="search" placeholder="شماره چک، بانک یا فاکتور" @keyup.enter="load" />
+      <select v-model="status" @change="load">
+        <option value="">همه وضعیت‌ها</option>
+        <option value="pending">در جریان</option>
+        <option value="cleared">وصول شد</option>
+        <option value="bounced">برگشت</option>
+      </select>
+      <UiButton type="button" @click="load">اعمال</UiButton>
+    </div>
+
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-else-if="loading && !items.length" class="muted">در حال بارگذاری…</p>
+    <p v-else-if="!filtered.length" class="muted">چکی ثبت نشده.</p>
+    <div v-else class="table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th>شماره</th>
+            <th>بانک</th>
+            <th>سررسید</th>
+            <th>مبلغ</th>
+            <th>فاکتور</th>
+            <th>طرف‌حساب</th>
+            <th>وضعیت</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in filtered" :key="row.id">
+            <td>{{ row.number }}</td>
+            <td>{{ row.bank }}</td>
+            <td>{{ formatJalaliNumeric(new Date(row.dueDate)) }}</td>
+            <td>{{ formatMoney(row.amount, row.currency) }}</td>
+            <td>
+              <RouterLink :to="{ name: 'invoice-detail', params: { id: row.invoiceId } }">
+                {{ row.invoiceNumber }}
+              </RouterLink>
+            </td>
+            <td>{{ row.personName || '—' }}</td>
+            <td>
+              <select
+                :value="row.status"
+                :disabled="savingId === row.id"
+                @change="setStatus(row, ($event.target as HTMLSelectElement).value as ChequeStatus)"
+              >
+                <option value="pending">{{ statusLabel.pending }}</option>
+                <option value="cleared">{{ statusLabel.cleared }}</option>
+                <option value="bounced">{{ statusLabel.bounced }}</option>
+              </select>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.page { display: grid; gap: 1rem; }
+.head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
+h1 { margin: 0; font-size: 1.25rem; }
+.sub, .muted { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.88rem; }
+.error { color: var(--danger, #dc2626); font-weight: 600; }
+.toolbar {
+  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
+}
+.toolbar input, .toolbar select {
+  min-height: var(--control-h); border: 1px solid var(--line); border-radius: var(--radius);
+  padding: 0 0.75rem; background: #fff;
+}
+.table-wrap { overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
+table { width: 100%; border-collapse: collapse; min-width: 720px; }
+th, td { padding: 0.7rem 0.65rem; border-bottom: 1px solid #eef2f7; text-align: right; }
+th { background: #f8fafc; color: #64748b; font-size: 0.82rem; }
+select {
+  min-height: var(--control-h); border: 1px solid var(--line); border-radius: var(--radius);
+  padding: 0 0.55rem; background: #fff;
+}
+a { color: #0f766e; font-weight: 700; }
+</style>

apps/web/src/views/CommissionsView.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { RouterLink } from 'vue-router';
+import { api } from '@/lib/api';
+import { formatMoney } from '@/lib/money';
+import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
+import UiButton from '@/components/ui/UiButton.vue';
+import type { CommissionEntryDto } from '@mento/shared';
+
+const loading = ref(false);
+const error = ref('');
+const items = ref<CommissionEntryDto[]>([]);
+
+const posted = computed(() => items.value.filter((r) => r.status === 'posted'));
+const total = computed(() => posted.value.reduce((sum, r) => sum + r.amount, 0));
+
+async function load() {
+  loading.value = true;
+  error.value = '';
+  try {
+    const { data } = await api.get<CommissionEntryDto[]>('/commissions');
+    items.value = data;
+  } catch {
+    error.value = 'بارگذاری پورسانت‌ها ناموفق بود.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <section class="page" dir="rtl">
+    <header class="head">
+      <div>
+        <h1>پورسانت فروش</h1>
+        <p class="sub">با صدور هر فاکتور برای کارشناس مالک فاکتور ثبت می‌شود</p>
+      </div>
+      <UiButton variant="ghost" type="button" :disabled="loading" @click="load">
+        بروزرسانی
+      </UiButton>
+    </header>
+
+    <article class="kpi">
+      <span>جمع پورسانت ثبت‌شده</span>
+      <strong>{{ formatMoney(total) }}</strong>
+      <small>{{ toFaDigits(String(posted.length)) }} فاکتور</small>
+    </article>
+
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-else-if="loading && !items.length" class="muted">در حال بارگذاری…</p>
+    <p v-else-if="!items.length" class="muted">هنوز پورسانتی ثبت نشده.</p>
+    <div v-else class="table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th>کارشناس</th>
+            <th>فاکتور</th>
+            <th>درصد</th>
+            <th>مبلغ</th>
+            <th>وضعیت</th>
+            <th>تاریخ</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in items" :key="row.id">
+            <td>{{ row.userName }}</td>
+            <td>
+              <RouterLink :to="{ name: 'invoice-detail', params: { id: row.invoiceId } }">
+                {{ row.invoiceNumber }}
+              </RouterLink>
+              <small>{{ row.invoiceTitle }}</small>
+            </td>
+            <td>{{ toFaDigits(String(row.percent)) }}٪</td>
+            <td>{{ formatMoney(row.amount, row.currency) }}</td>
+            <td>{{ row.status === 'posted' ? 'ثبت‌شده' : 'باطل' }}</td>
+            <td>{{ formatJalaliNumeric(new Date(row.createdAt)) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.page { display: grid; gap: 1rem; }
+.head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
+h1 { margin: 0; font-size: 1.25rem; }
+.sub, .muted { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.88rem; }
+.error { color: var(--danger, #dc2626); font-weight: 600; }
+.kpi {
+  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
+  padding: 1rem 1.1rem; width: fit-content; min-width: 16rem;
+}
+.kpi span, .kpi small { display: block; color: var(--muted); font-size: 0.8rem; }
+.kpi strong { display: block; margin: 0.25rem 0; font-size: 1.15rem; }
+.table-wrap { overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
+table { width: 100%; border-collapse: collapse; min-width: 720px; }
+th, td { padding: 0.7rem 0.65rem; border-bottom: 1px solid #eef2f7; text-align: right; vertical-align: top; }
+th { background: #f8fafc; color: #64748b; font-size: 0.82rem; }
+td small { display: block; color: var(--muted); font-size: 0.78rem; }
+a { color: #0f766e; font-weight: 700; }
+</style>

apps/web/src/views/InvoiceFormView.vue

@@ -14,6 +14,7 @@ import MoneyInput from '@/components/MoneyInput.vue';
 import UiIcon from '@/components/UiIcon.vue';
 import BrandName from '@/components/brand/BrandName.vue';
 import { brand } from '@mento/shared';
+import { useAuthStore } from '@/stores/auth';
 import type {
   CreateInvoiceRequest,
   CreatePaymentRequest,
@@ -24,6 +25,7 @@ import type {
   InvoiceInstallmentInput,
   InvoiceStatus,
   OrganizationDto,
+  OrgUserDto,
   PaginatedResponse,
   PaymentMethod,
   PersonDto,
@@ -125,6 +127,15 @@ const payMethod = ref<PaymentMethod>('transfer');
 const payNotes = ref('');
 const payInstallmentId = ref('');
 const payDate = ref(formatLocalDateInput(new Date()));
+const chequeNumber = ref('');
+const chequeBank = ref('');
+const chequeDue = ref('');
+const chequeStatus = ref<'pending' | 'cleared' | 'bounced'>('pending');
+const commissionMode = ref<'percent' | 'amount'>('percent');
+const commissionPercent = ref('');
+const commissionFixedAmount = ref('');
+const defaultCommissionPercent = ref(0);
+const auth = useAuthStore();
 
 const invoiceStatusLabel: Record<InvoiceStatus, string> = {
   draft: 'پیش‌نویس',
@@ -249,6 +260,16 @@ const payableAmount = computed(() =>
   docMode.value === 'credit' ? -payableSigned.value : payableSigned.value,
 );
 
+const commissionPreview = computed(() => {
+  const base = Math.abs(payableAmount.value);
+  if (commissionMode.value === 'amount') {
+    const n = Number(commissionFixedAmount.value);
+    return Number.isFinite(n) ? n : 0;
+  }
+  const n = Number(commissionPercent.value || defaultCommissionPercent.value);
+  return Number.isFinite(n) ? Math.round((base * n) / 100) : 0;
+});
+
 function formatMoney(amount: number) {
   return formatMoneyLib(amount, currency.value);
 }
@@ -461,6 +482,9 @@ async function load() {
     loadedInvoiceKind.value = null;
     installments.value = [];
     lines.value = [];
+    commissionMode.value = 'percent';
+    commissionPercent.value = '';
+    commissionFixedAmount.value = '';
     validityMode.value = 'days';
     validityDays.value = 30;
 
@@ -473,6 +497,16 @@ async function load() {
     ]);
     people.value = peopleRes.data.items;
     products.value = productsRes.data;
+    try {
+      const { data: team } = await api.get<OrgUserDto[]>('/users');
+      const me = team.find((u) => u.id === auth.user?.id);
+      defaultCommissionPercent.value = Number(me?.commissionPercent ?? 0);
+      if (!commissionPercent.value && defaultCommissionPercent.value) {
+        commissionPercent.value = String(defaultCommissionPercent.value);
+      }
+    } catch {
+      /* optional */
+    }
     enabledCurrencies.value = orgRes.data.enabledCurrencies?.length
       ? orgRes.data.enabledCurrencies
       : [orgRes.data.baseCurrency || 'IRR'];
@@ -525,6 +559,18 @@ async function load() {
         if (data.remainingAmount > 0) {
           payAmount.value = String(data.remainingAmount);
         }
+        if (data.commissionFixedAmount != null) {
+          commissionMode.value = 'amount';
+          commissionFixedAmount.value = String(data.commissionFixedAmount);
+          commissionPercent.value = String(
+            data.commissionPercent ?? defaultCommissionPercent.value,
+          );
+        } else {
+          commissionMode.value = 'percent';
+          commissionPercent.value = String(
+            data.commissionPercent ?? defaultCommissionPercent.value,
+          );
+        }
       }
       if (!lines.value.length) lines.value = [newLine()];
     } else {
@@ -570,6 +616,18 @@ function invoicePayload(): CreateInvoiceRequest {
     lineItems: toLineInputs(),
     installments: toInstallmentInputs(),
     currency: currency.value || 'IRR',
+    commissionPercent:
+      commissionMode.value === 'percent'
+        ? commissionPercent.value === ''
+          ? null
+          : Number(commissionPercent.value)
+        : null,
+    commissionFixedAmount:
+      commissionMode.value === 'amount'
+        ? commissionFixedAmount.value === ''
+          ? null
+          : Number(commissionFixedAmount.value)
+        : null,
   };
 }
 
@@ -671,6 +729,10 @@ async function submitPayment() {
     error.value = 'مبلغ پرداخت را وارد کنید.';
     return;
   }
+  if (payMethod.value === 'check' && (!chequeNumber.value.trim() || !chequeBank.value.trim() || !chequeDue.value)) {
+    error.value = 'شماره، بانک و سررسید چک را وارد کنید.';
+    return;
+  }
   paying.value = true;
   error.value = '';
   try {
@@ -680,6 +742,15 @@ async function submitPayment() {
       notes: payNotes.value || undefined,
       paidAt: payDate.value ? new Date(payDate.value).toISOString() : undefined,
       installmentId: payInstallmentId.value || null,
+      cheque:
+        payMethod.value === 'check'
+          ? {
+              number: chequeNumber.value.trim(),
+              bank: chequeBank.value.trim(),
+              dueDate: new Date(chequeDue.value).toISOString(),
+              status: chequeStatus.value,
+            }
+          : undefined,
     };
     const { data } = await api.post<InvoiceDto>(
       `/invoices/${id.value}/payments`,
@@ -688,6 +759,10 @@ async function submitPayment() {
     invoice.value = data;
     payNotes.value = '';
     payInstallmentId.value = '';
+    chequeNumber.value = '';
+    chequeBank.value = '';
+    chequeDue.value = '';
+    chequeStatus.value = 'pending';
     await load();
   } catch (e) {
     error.value = axiosMessage(e, 'ثبت پرداخت ناموفق بود');
@@ -1128,6 +1203,45 @@ onMounted(load);
                 <span>مبلغ قابل پرداخت</span>
                 <strong>{{ formatMoney(payableAmount) }}</strong>
               </div>
+              <div v-if="docMode === 'invoice'" class="commission-box">
+                <div class="days-row">
+                  <button
+                    type="button"
+                    :class="{ on: commissionMode === 'percent' }"
+                    @click="commissionMode = 'percent'"
+                  >
+                    درصد
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ on: commissionMode === 'amount' }"
+                    @click="commissionMode = 'amount'"
+                  >
+                    مبلغ ثابت
+                  </button>
+                </div>
+                <label v-if="commissionMode === 'percent'" class="field">
+                  <span>پورسانت کارشناس (%)</span>
+                  <input
+                    v-model="commissionPercent"
+                    type="number"
+                    min="0"
+                    max="100"
+                    step="0.1"
+                    :placeholder="String(defaultCommissionPercent || 0)"
+                  />
+                </label>
+                <label v-else class="field">
+                  <span>مبلغ پورسانت</span>
+                  <MoneyInput v-model="commissionFixedAmount" :decimals="0" />
+                </label>
+                <p class="muted-sm">
+                  برآورد پورسانت: {{ formatMoney(commissionPreview) }}
+                  <template v-if="invoice?.commission?.status === 'posted'">
+                    · ثبت‌شده {{ formatMoney(invoice.commission.amount) }}
+                  </template>
+                </p>
+              </div>
             </div>
           </section>
 
@@ -1210,6 +1324,16 @@ onMounted(load);
                   </option>
                 </select>
                 <input v-model="payNotes" placeholder="یادداشت پرداخت" />
+                <div v-if="payMethod === 'check'" class="cheque-fields">
+                  <input v-model="chequeNumber" placeholder="شماره چک" />
+                  <input v-model="chequeBank" placeholder="بانک" />
+                  <JalaliDateInput v-model="chequeDue" placeholder="سررسید چک" />
+                  <select v-model="chequeStatus">
+                    <option value="pending">در جریان</option>
+                    <option value="cleared">وصول شد</option>
+                    <option value="bounced">برگشت</option>
+                  </select>
+                </div>
                 <button
                   class="btn primary"
                   type="button"
@@ -1230,6 +1354,9 @@ onMounted(load);
                     <strong>{{ formatMoney(p.amount) }}</strong>
                     <span class="muted">
                       · {{ methodLabel[p.method as PaymentMethod] || p.method }}
+                      <template v-if="p.cheque">
+                        · چک {{ p.cheque.number }} / {{ p.cheque.bank }}
+                      </template>
                       · {{ p.paidAt.slice(0, 10) }}
                     </span>
                   </div>
@@ -1547,6 +1674,19 @@ onMounted(load);
                 <span>مبلغ قابل پرداخت</span>
                 <strong>{{ formatMoney(payableAmount) }}</strong>
               </div>
+              <div v-if="docMode === 'invoice'" class="commission-box">
+                <label class="field">
+                  <span>پورسانت کارشناس (%)</span>
+                  <input
+                    v-model="commissionPercent"
+                    type="number"
+                    min="0"
+                    max="100"
+                    step="0.1"
+                  />
+                </label>
+                <p class="muted-sm">برآورد: {{ formatMoney(commissionPreview) }}</p>
+              </div>
             </div>
           </section>
 
@@ -2366,6 +2506,19 @@ h1 {
   gap: 0.5rem;
 }
 
+.cheque-fields,
+.commission-box {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: 0.45rem;
+}
+
+.commission-box {
+  margin-top: 0.45rem;
+  padding-top: 0.55rem;
+  border-top: 1px dashed var(--line);
+}
+
 .pay-list {
   display: grid;
   gap: 0.45rem;

apps/web/src/views/TeamSettingsView.vue

@@ -131,6 +131,24 @@ async function invite() {
   }
 }
 
+async function changeCommission(user: OrgUserDto, raw: string) {
+  if (!canInvite.value) return;
+  const next = Number(raw);
+  if (!Number.isFinite(next) || next === Number(user.commissionPercent ?? 0)) return;
+  error.value = '';
+  try {
+    await api.patch(`/users/${user.id}/commission`, { commissionPercent: next });
+    await load();
+  } catch (e) {
+    if (axios.isAxiosError(e)) {
+      const msg = (e.response?.data as { message?: string | string[] })?.message;
+      error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ذخیره پورسانت ناموفق بود');
+    } else {
+      error.value = 'ذخیره پورسانت ناموفق بود';
+    }
+  }
+}
+
 async function changeRole(user: OrgUserDto, next: string) {
   const nextRole = next as UserRole;
   if (nextRole === user.role) return;
@@ -157,7 +175,7 @@ onMounted(load);
       <div class="head-copy">
         <h1>تیم و نقش‌ها</h1>
         <p class="lead">
-          زمینه فعالیت سازمان و کاربران را اینجا مدیریت کنید. تنظیمات سازمانی فقط برای مالک و مدیر است.
+          زمینه فعالیت سازمان، نقش‌ها و درصد پیش‌فرض پورسانت هر کارشناس را اینجا مدیریت کنید.
         </p>
       </div>
     </header>
@@ -224,6 +242,18 @@ onMounted(load);
           <p class="muted">{{ user.email }}</p>
         </div>
         <div class="role-cell">
+          <label class="comm-field">
+            <span>پورسانت %</span>
+            <input
+              type="number"
+              min="0"
+              max="100"
+              step="0.1"
+              :value="user.commissionPercent ?? 0"
+              :disabled="!canInvite"
+              @change="changeCommission(user, ($event.target as HTMLInputElement).value)"
+            />
+          </label>
           <template v-if="canInvite">
             <select
               :value="user.role"
@@ -373,6 +403,24 @@ select {
   margin: 0.2rem 0 0;
 }
 
+.role-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.comm-field {
+  display: grid;
+  gap: 0.15rem;
+  font-size: 0.75rem;
+  color: #64748b;
+}
+
+.comm-field input {
+  width: 4.8rem;
+  padding: 0 0.45rem;
+}
+
 .role-pill {
   background: #f0fdfa;
   color: #0f766e;