feat: send one SMS from a person or lead and keep the dashboard inside the phone frame

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

apps/api/src/common/sms-text.ts

@@ -0,0 +1,35 @@
+import { jalaliMonthName, toJalali } from './jalali';
+import { applyMessageTemplate } from '../message-automations/message-automation.util';
+
+const FA_DIGITS = '۰۱۲۳۴۵۶۷۸۹';
+
+function toFaDigits(value: string | number) {
+  return String(value).replace(/\d/g, (d) => FA_DIGITS[Number(d)] ?? d);
+}
+
+function tehranJalaliLong(d: Date) {
+  const [gy, gm, gd] = new Intl.DateTimeFormat('en-CA', {
+    timeZone: 'Asia/Tehran',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+    .format(d)
+    .split('-')
+    .map(Number);
+  const j = toJalali(gy, gm, gd);
+  return `${toFaDigits(j.jd)} ${jalaliMonthName(j.jm)} ${toFaDigits(j.jy)}`;
+}
+
+export function renderSmsText(
+  text: string,
+  vars: { name?: string; phone?: string; title?: string; company?: string },
+) {
+  return applyMessageTemplate(text, {
+    name: vars.name,
+    phone: vars.phone,
+    title: vars.title,
+    company: vars.company,
+    date: tehranJalaliLong(new Date()),
+  }).trim();
+}

apps/api/src/contacts/people.controller.ts

@@ -110,6 +110,15 @@ export class PeopleController {
     return this.peopleService.birthdaysThisMonth(user);
   }
 
+  @Post(':id/sms')
+  sms(
+    @CurrentUser() user: Actor,
+    @Param('id') id: string,
+    @Body() dto: BirthdaySmsDto,
+  ) {
+    return this.peopleService.sendSms(user, id, dto.text);
+  }
+
   @Post(':id/birthday-sms')
   birthdaySms(
     @CurrentUser() user: Actor,

apps/api/src/contacts/people.service.ts

@@ -39,7 +39,8 @@ import { WebhooksService } from '../public-api/webhooks.service';
 import { GamificationService } from '../gamification/gamification.service';
 import { parseBirthDate } from '../common/excel';
 import { SmsService } from '../common/sms.service';
-import { fillBirthdaySmsText, selectMonthBirthdays } from './birthday-month';
+import { selectMonthBirthdays } from './birthday-month';
+import { renderSmsText } from '../common/sms-text';
 import { normalizeTags } from '../common/tags';
 import { buildSearchWhere, ci } from '../common/search';
 import {
@@ -467,6 +468,7 @@ export class PeopleService implements OnModuleInit {
         mobile: true,
         phone: true,
         birthDate: true,
+        company: { select: { name: true } },
       },
     });
     const selected = selectMonthBirthdays(
@@ -484,12 +486,14 @@ export class PeopleService implements OnModuleInit {
           : [],
       ),
     );
+    const companyById = new Map(rows.map((row) => [row.id, row.company?.name ?? '']));
     const toItem = (row: (typeof selected.items)[number]) => ({
       id: row.id,
       firstName: row.firstName,
       lastName: row.lastName,
       fullName: `${row.firstName} ${row.lastName}`.trim(),
       mobile: row.mobile,
+      company: companyById.get(row.id) ?? '',
       day: row.day,
     });
     return {
@@ -517,6 +521,7 @@ export class PeopleService implements OnModuleInit {
         phone: true,
         ownerId: true,
         birthDate: true,
+        company: { select: { name: true } },
       },
     });
     if (!person) throw new NotFoundException('مشتری پیدا نشد');
@@ -542,7 +547,40 @@ export class PeopleService implements OnModuleInit {
     }
     const mobile = person.mobile || person.phone;
     if (!mobile) throw new BadRequestException('برای این مشتری شماره موبایل ثبت نشده است.');
-    const message = fillBirthdaySmsText(body, person.firstName, person.lastName);
+    const fullName = `${person.firstName} ${person.lastName}`.trim();
+    const message = renderSmsText(body, {
+      name: fullName,
+      phone: mobile,
+      title: fullName,
+      company: person.company?.name ?? '',
+    });
+    if (!message) throw new BadRequestException('متن پیامک خالی است.');
+    const result = await this.sms.sendSmsDetailed(mobile, message);
+    if (!result.ok) {
+      throw new ServiceUnavailableException(
+        result.reason === 'SMS not configured'
+          ? 'ارسال پیامک روی سرور فعال نیست.'
+          : 'پیامک ارسال نشد. کمی بعد دوباره تلاش کنید.',
+      );
+    }
+    return { ok: true };
+  }
+
+  async sendSms(actor: Actor, personId: string, text: string) {
+    const body = text.trim();
+    if (!body || body.length > 500) {
+      throw new BadRequestException('متن پیامک را تا ۵۰۰ نویسه بنویسید.');
+    }
+    const person = await this.get(actor, personId);
+    const mobile = person.mobile || person.phone;
+    if (!mobile) throw new BadRequestException('برای این مشتری شماره موبایل ثبت نشده است.');
+    const message = renderSmsText(body, {
+      name: person.fullName,
+      phone: mobile,
+      title: person.fullName,
+      company: person.company?.name ?? '',
+    });
+    if (!message) throw new BadRequestException('متن پیامک خالی است.');
     const result = await this.sms.sendSmsDetailed(mobile, message);
     if (!result.ok) {
       throw new ServiceUnavailableException(

apps/api/src/leads/dto.ts

@@ -5,9 +5,17 @@ import {
   IsNumber,
   IsOptional,
   IsString,
+  MaxLength,
   MinLength,
 } from 'class-validator';
 
+export class LeadSmsDto {
+  @IsString()
+  @MinLength(1)
+  @MaxLength(500)
+  text!: string;
+}
+
 export class CreateLeadDto {
   @IsString()
   @MinLength(1)

apps/api/src/leads/leads.controller.ts

@@ -37,6 +37,7 @@ import {
   LeadCallLogDto,
   LeadFollowUpDto,
   LeadNoteDto,
+  LeadSmsDto,
   MoveLeadDto,
   ReorderLeadStagesDto,
   UpdateLeadDto,
@@ -346,6 +347,15 @@ export class LeadsController {
     return this.leads.move(user, id, dto.stageId, dto.position);
   }
 
+  @Post(':id/sms')
+  sms(
+    @CurrentUser() user: Actor,
+    @Param('id') id: string,
+    @Body() dto: LeadSmsDto,
+  ) {
+    return this.leads.sendSms(user, id, dto.text);
+  }
+
   @Post(':id/call')
   logCall(
     @CurrentUser() user: Actor,

apps/api/src/leads/leads.module.ts

@@ -5,11 +5,12 @@ import { LeadStagesService } from './lead-stages.service';
 import { LeadsController } from './leads.controller';
 import { LeadsImportService } from './leads-import.service';
 import { LeadsService } from './leads.service';
+import { SmsService } from '../common/sms.service';
 
 @Module({
   imports: [AuthModule, BillingModule],
   controllers: [LeadsController],
-  providers: [LeadsService, LeadStagesService, LeadsImportService],
+  providers: [LeadsService, LeadStagesService, LeadsImportService, SmsService],
   exports: [LeadsService, LeadStagesService],
 })
 export class LeadsModule {}

apps/api/src/leads/leads.service.ts

@@ -3,6 +3,7 @@ import {
   ConflictException,
   Injectable,
   NotFoundException,
+  ServiceUnavailableException,
 } from '@nestjs/common';
 import { Prisma } from '@prisma/client';
 import { parseBirthDate } from '../common/excel';
@@ -18,6 +19,8 @@ import type {
   PaginatedResponse,
 } from '@mento/shared';
 import { PrismaService } from '../prisma/prisma.service';
+import { SmsService } from '../common/sms.service';
+import { renderSmsText } from '../common/sms-text';
 import {
   type Actor,
   elevated,
@@ -81,6 +84,7 @@ export class LeadsService {
     private readonly stages: LeadStagesService,
     private readonly files: LocalFileStorage,
     private readonly game: GamificationService,
+    private readonly sms: SmsService,
   ) {}
 
   private gameEvent(
@@ -1203,6 +1207,34 @@ export class LeadsService {
     return this.toDto(row);
   }
 
+  async sendSms(actor: Actor, id: string, text: string) {
+    const body = text.trim();
+    if (!body || body.length > 500) {
+      throw new BadRequestException('متن پیامک را تا ۵۰۰ نویسه بنویسید.');
+    }
+    const lead = await this.findAccessible(actor, id);
+    const mobile = lead.mobile || lead.phone;
+    if (!mobile) throw new BadRequestException('برای این لید شماره موبایل ثبت نشده است.');
+    const name = (lead.contactName || lead.title).trim();
+    const message = renderSmsText(body, {
+      name,
+      phone: mobile,
+      title: lead.title,
+      company: lead.contactName ? lead.title : '',
+    });
+    if (!message) throw new BadRequestException('متن پیامک خالی است.');
+    const result = await this.sms.sendSmsDetailed(mobile, message);
+    if (!result.ok) {
+      throw new ServiceUnavailableException(
+        result.reason === 'SMS not configured'
+          ? 'ارسال پیامک روی سرور فعال نیست.'
+          : 'پیامک ارسال نشد. کمی بعد دوباره تلاش کنید.',
+      );
+    }
+    await this.addEvent(actor, id, 'note', 'پیامک ارسال شد', message);
+    return { ok: true };
+  }
+
   async openLogo(actor: Actor, id: string) {
     const existing = await this.findAccessible(actor, id);
     if (!existing.logoStorageKey) {

apps/web/src/components/SmsComposeModal.vue

@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import axios from 'axios';
+import { MESSAGE_AUTOMATION_FIELDS, MESSAGE_AUTOMATION_SMS_SEGMENT } from '@mento/shared';
+import { api } from '@/lib/api';
+import { formatJalaliDay, toFaDigits } from '@/lib/jalali';
+import { UiButton, UiModal } from '@/components/ui';
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean;
+    endpoint: string;
+    name: string;
+    phone: string;
+    recordTitle?: string;
+    company?: string;
+    title?: string;
+    defaultText?: string;
+    nest?: boolean;
+  }>(),
+  {
+    recordTitle: '',
+    company: '',
+    title: 'ارسال پیامک',
+    defaultText: 'سلام {نام} عزیز',
+    nest: false,
+  },
+);
+
+const emit = defineEmits<{
+  close: [];
+  sent: [];
+}>();
+
+const text = ref('');
+const busy = ref(false);
+const error = ref('');
+const done = ref('');
+const fieldsOpen = ref(false);
+const bodyEl = ref<HTMLTextAreaElement | null>(null);
+
+const preview = computed(() => fill(text.value));
+const count = computed(() => text.value.length);
+const parts = computed(() => (count.value === 0 ? 0 : Math.ceil(count.value / MESSAGE_AUTOMATION_SMS_SEGMENT)));
+
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) return;
+    text.value = props.defaultText;
+    error.value = '';
+    done.value = '';
+    fieldsOpen.value = false;
+    busy.value = false;
+  },
+);
+
+function fill(source: string) {
+  const map: Record<string, string> = {
+    نام: props.name,
+    name: props.name,
+    شماره: props.phone,
+    phone: props.phone,
+    تاریخ: formatJalaliDay(new Date()),
+    date: formatJalaliDay(new Date()),
+    عنوان: props.recordTitle || props.name,
+    title: props.recordTitle || props.name,
+    شرکت: props.company,
+    company: props.company,
+  };
+  return source.replace(/\{([^}]+)\}/g, (full, key: string) => {
+    const next = map[key.trim()];
+    return next === undefined ? full : next;
+  });
+}
+
+function insertField(token: string) {
+  const el = bodyEl.value;
+  const current = text.value;
+  if (!el) {
+    text.value = `${current}${token}`;
+  } else {
+    const start = el.selectionStart ?? current.length;
+    const end = el.selectionEnd ?? start;
+    text.value = `${current.slice(0, start)}${token}${current.slice(end)}`;
+    const caret = start + token.length;
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(caret, caret);
+    });
+  }
+  fieldsOpen.value = false;
+}
+
+function apiMessage(e: unknown, fallback: string) {
+  if (!axios.isAxiosError(e)) return fallback;
+  const msg = (e.response?.data as { message?: string | string[] })?.message;
+  if (Array.isArray(msg)) return msg.join('، ') || fallback;
+  if (typeof msg === 'string' && msg.trim()) return msg;
+  return fallback;
+}
+
+async function send() {
+  if (!props.endpoint || busy.value || done.value) return;
+  busy.value = true;
+  error.value = '';
+  try {
+    await api.post(props.endpoint, { text: text.value });
+    done.value = 'پیامک ارسال شد.';
+    emit('sent');
+  } catch (e) {
+    error.value = apiMessage(e, 'ارسال پیامک ناموفق بود.');
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <UiModal :open="open" :nest="nest" :title="title" @close="emit('close')">
+    <p class="who">
+      برای {{ name || 'این شخص' }}
+      <span v-if="phone" dir="ltr">{{ toFaDigits(phone) }}</span>
+      <span v-else class="warn">شماره موبایل ندارد</span>
+    </p>
+
+    <div class="tools">
+      <button type="button" class="pill" @click="fieldsOpen = !fieldsOpen">فیلدهای پویا</button>
+      <div v-if="fieldsOpen" class="fields">
+        <button
+          v-for="item in MESSAGE_AUTOMATION_FIELDS"
+          :key="item.token"
+          type="button"
+          @click="insertField(item.token)"
+        >
+          <code>{{ item.token }}</code>
+          <span>{{ item.label }}</span>
+        </button>
+      </div>
+    </div>
+
+    <textarea ref="bodyEl" v-model="text" rows="4" maxlength="500" placeholder="سلام {نام} عزیز" />
+    <p class="count">{{ toFaDigits(count) }} نویسه · {{ toFaDigits(parts) }} پیامک</p>
+
+    <div class="preview">
+      <span>پیش‌نمایش</span>
+      <p>{{ preview || 'متن پیام هنوز نوشته نشده است.' }}</p>
+    </div>
+
+    <p v-if="error" class="err">{{ error }}</p>
+    <p v-if="done" class="ok">{{ done }}</p>
+
+    <template #footer>
+      <UiButton variant="ghost" :disabled="busy" @click="emit('close')">بستن</UiButton>
+      <UiButton
+        variant="primary"
+        :loading="busy"
+        :disabled="busy || !!done || !phone || text.trim().length < 2"
+        @click="send"
+      >
+        ارسال پیامک
+      </UiButton>
+    </template>
+  </UiModal>
+</template>
+
+<style scoped>
+.who {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.7rem;
+  color: #0f172a;
+}
+
+.who span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #64748b;
+  font-size: 0.85rem;
+}
+
+.warn {
+  color: #b45309;
+}
+
+.tools {
+  position: relative;
+  margin-bottom: 0.45rem;
+}
+
+.pill,
+.fields button {
+  border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff);
+  background: var(--accent-subtle);
+  color: var(--accent-deep);
+  border-radius: 999px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.pill {
+  padding: 0.28rem 0.7rem;
+  font-size: 0.8rem;
+}
+
+.fields {
+  position: absolute;
+  z-index: 2;
+  top: calc(100% + 0.3rem);
+  inset-inline: 0;
+  display: grid;
+  gap: 0.25rem;
+  max-width: 100%;
+  padding: 0.4rem;
+  background: #fff;
+  border: 1px solid #e7eef2;
+  border-radius: 12px;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+
+.fields button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  border-radius: 8px;
+  padding: 0.35rem 0.5rem;
+  background: #fff;
+  text-align: start;
+}
+
+.fields code {
+  color: var(--accent-deep);
+}
+
+textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0.7rem 0.8rem;
+  font: inherit;
+  resize: vertical;
+  color: #0f172a;
+}
+
+.count {
+  margin: 0.35rem 0 0;
+  color: #94a3b8;
+  font-size: 0.75rem;
+}
+
+.preview {
+  margin-top: 0.75rem;
+  padding: 0.7rem 0.8rem;
+  border-radius: 12px;
+  background: var(--accent-subtle);
+}
+
+.preview span {
+  color: var(--accent-deep);
+  font-size: 0.75rem;
+}
+
+.preview p {
+  margin: 0.3rem 0 0;
+  color: #134e4a;
+  overflow-wrap: anywhere;
+}
+
+.err,
+.ok {
+  margin: 0.55rem 0 0;
+  font-size: 0.82rem;
+}
+
+.err {
+  color: #dc2626;
+}
+
+.ok {
+  color: #16a34a;
+}
+</style>

apps/web/src/components/dashboard/HomeBirthdayStrip.vue

@@ -1,11 +1,11 @@
 <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 { toFaDigits } from '@/lib/jalali';
 import UiIcon from '@/components/UiIcon.vue';
-import { UiButton, UiModal, UiTextarea } from '@/components/ui';
+import { UiButton, UiModal } from '@/components/ui';
+import SmsComposeModal from '@/components/SmsComposeModal.vue';
 
 type BirthdayItem = {
   id: string;
@@ -13,6 +13,7 @@ type BirthdayItem = {
   lastName: string;
   fullName: string;
   mobile: string | null;
+  company?: string;
   day: number;
 };
 
@@ -27,10 +28,6 @@ type BirthdayMonth = {
 const data = ref<BirthdayMonth | null>(null);
 const listOpen = ref(false);
 const smsTarget = ref<BirthdayItem | null>(null);
-const smsText = ref('');
-const smsBusy = ref(false);
-const smsError = ref('');
-const smsDone = ref('');
 
 const groups = computed(() => {
   const map = new Map<number, BirthdayItem[]>();
@@ -42,34 +39,8 @@ const groups = computed(() => {
   return [...map.entries()].sort((a, b) => a[0] - b[0]);
 });
 
-function apiMessage(e: unknown, fallback: string) {
-  if (!axios.isAxiosError(e)) return fallback;
-  const msg = (e.response?.data as { message?: string | string[] })?.message;
-  if (Array.isArray(msg)) return msg.join('، ') || fallback;
-  if (typeof msg === 'string' && msg.trim()) return msg;
-  return fallback;
-}
-
 function openSms(person: BirthdayItem) {
   smsTarget.value = person;
-  smsText.value = `${person.fullName} عزیز، تولدتان مبارک.`;
-  smsError.value = '';
-  smsDone.value = '';
-}
-
-async function sendSms() {
-  const person = smsTarget.value;
-  if (!person || smsBusy.value) return;
-  smsBusy.value = true;
-  smsError.value = '';
-  try {
-    await api.post(`/people/${person.id}/birthday-sms`, { text: smsText.value });
-    smsDone.value = `پیامک برای ${person.fullName} ارسال شد.`;
-  } catch (e) {
-    smsError.value = apiMessage(e, 'ارسال پیامک ناموفق بود.');
-  } finally {
-    smsBusy.value = false;
-  }
 }
 
 onMounted(async () => {
@@ -97,22 +68,28 @@ onMounted(async () => {
         v-for="person in data.preview"
         :key="person.id"
         class="chip"
+        :title="person.fullName"
         :to="{ name: 'person-detail', params: { id: person.id } }"
       >
-        <b>{{ toFaDigits(person.day) }} {{ data.monthName }}</b>
+        <b>{{ toFaDigits(person.day) }}</b>
         <span>{{ person.fullName }}</span>
       </RouterLink>
-      <button v-if="data.total > data.preview.length" type="button" class="more" @click="listOpen = true">
-        همه
-      </button>
-      <button v-else type="button" class="more" @click="listOpen = true">فهرست و پیامک</button>
     </div>
+    <button type="button" class="more" @click="listOpen = true">
+      {{ data.total > data.preview.length ? 'همه' : 'فهرست' }}
+    </button>
 
     <UiModal :open="listOpen" :title="`تولدهای ${data.monthName}`" @close="listOpen = false">
       <div class="days">
-        <section v-for="[day, people] in groups" :key="day" class="day">
+        <section
+          v-for="[day, people] in groups"
+          :key="day"
+          class="day"
+          :class="{ past: day < data.today, today: day === data.today }"
+        >
           <h3>
-            {{ toFaDigits(day) }} {{ data.monthName }}
+            <b>{{ toFaDigits(day) }}</b>
+            <span>{{ data.monthName }}</span>
             <em v-if="day < data.today">گذشته</em>
             <em v-else-if="day === data.today">امروز</em>
           </h3>
@@ -121,38 +98,32 @@ onMounted(async () => {
               <RouterLink :to="{ name: 'person-detail', params: { id: person.id } }" @click="listOpen = false">
                 {{ person.fullName }}
               </RouterLink>
-              <UiButton
+              <button
-                size="sm"
+                type="button"
-                variant="outline"
+                class="sms"
                 :disabled="!person.mobile"
                 @click="openSms(person)"
               >
                 {{ person.mobile ? 'پیامک تبریک' : 'بدون شماره' }}
-              </UiButton>
+              </button>
             </li>
           </ul>
         </section>
       </div>
     </UiModal>
 
-    <UiModal
+    <SmsComposeModal
-      :open="!!smsTarget"
       nest
+      :open="!!smsTarget"
       title="پیامک تبریک تولد"
+      :endpoint="smsTarget ? `/people/${smsTarget.id}/birthday-sms` : ''"
+      default-text="{نام} عزیز، تولدتان مبارک."
+      :name="smsTarget?.fullName ?? ''"
+      :phone="smsTarget?.mobile ?? ''"
+      :record-title="smsTarget?.fullName ?? ''"
+      :company="smsTarget?.company ?? ''"
       @close="smsTarget = null"
-    >
+    />
-      <p v-if="smsTarget" class="lead">برای {{ smsTarget.fullName }}</p>
-      <UiTextarea v-model="smsText" :rows="4" />
-      <p class="hint">می‌توانید متن را عوض کنید. عبارت {نام} با نام مشتری جایگزین می‌شود.</p>
-      <p v-if="smsError" class="err">{{ smsError }}</p>
-      <p v-if="smsDone" class="ok">{{ smsDone }}</p>
-      <template #footer>
-        <UiButton variant="ghost" :disabled="smsBusy" @click="smsTarget = null">بستن</UiButton>
-        <UiButton variant="primary" :loading="smsBusy" :disabled="smsBusy || !smsText.trim() || !!smsDone" @click="sendSms">
-          ارسال پیامک
-        </UiButton>
-      </template>
-    </UiModal>
   </section>
 </template>
 
@@ -160,112 +131,223 @@ onMounted(async () => {
 .birthdays {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.75rem;
-  background: #fff;
+  min-width: 0;
-  border: 1px solid #eef2f7;
+  max-width: 100%;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent 42%),
+    linear-gradient(100deg, var(--accent-subtle) 0%, #fff 58%, #fff7f4 100%);
+  border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff);
   border-radius: var(--radius);
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.05);
-  padding: 0.85rem 1rem;
+  padding: 0.55rem 0.75rem;
 }
 
 .head {
   display: flex;
   align-items: center;
-  gap: 0.7rem;
+  gap: 0.55rem;
   flex-shrink: 0;
 }
 
 .ico {
-  width: 40px;
+  width: 32px;
-  height: 40px;
+  height: 32px;
-  border-radius: 12px;
+  border-radius: 10px;
   display: grid;
   place-items: center;
-  background: #fff7ed;
+  background: #fff;
-  color: #ea580c;
+  color: #e11d48;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, #fff);
 }
 
 .head strong {
   display: block;
-  color: #0f172a;
+  color: var(--accent-deep);
+  font-size: 0.88rem;
+  font-weight: 700;
 }
 
 .head p {
-  margin: 0.15rem 0 0;
+  margin: 0.05rem 0 0;
-  color: #94a3b8;
+  color: #64748b;
-  font-size: 0.82rem;
+  font-size: 0.75rem;
 }
 
 .chips {
   display: flex;
-  flex-wrap: wrap;
+  flex: 1 1 auto;
-  gap: 0.45rem;
+  flex-wrap: nowrap;
+  gap: 0.35rem;
   min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
 }
 
-.chip,
+.chip {
-.more {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.35rem;
+  max-width: 11.5rem;
+  min-width: 0;
   border-radius: 999px;
-  border: 1px solid #fed7aa;
+  border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff);
-  background: #fff7ed;
+  background: rgba(255, 255, 255, 0.86);
-  color: #9a3412;
+  color: #134e4a;
-  padding: 0.35rem 0.7rem;
+  padding: 0.22rem 0.55rem 0.22rem 0.28rem;
   text-decoration: none;
-  font: inherit;
+  font-size: 0.78rem;
-  cursor: pointer;
 }
 
 .chip b {
+  flex-shrink: 0;
   font-weight: 700;
+  font-size: 0.72rem;
+  color: var(--accent-deep);
+  background: var(--accent-soft);
+  border-radius: 999px;
+  padding: 0.12rem 0.38rem;
+}
+
+.chip span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .more {
-  background: #0f172a;
+  flex-shrink: 0;
-  border-color: #0f172a;
+  border: 0;
+  border-radius: 999px;
+  background: var(--accent);
   color: #fff;
+  padding: 0.32rem 0.7rem;
+  font: inherit;
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+
+.more:hover {
+  background: var(--accent-hover);
 }
 
 .days {
   display: grid;
-  gap: 0.9rem;
+  gap: 0.85rem;
-  max-height: 60vh;
+  max-height: 62vh;
   overflow: auto;
+  padding-inline-end: 0.15rem;
+}
+
+.day {
+  background: #fff;
+  border: 1px solid #e7eef2;
+  border-radius: 14px;
+  overflow: hidden;
 }
 
 .day h3 {
-  margin: 0 0 0.4rem;
+  display: flex;
-  font-size: 0.92rem;
+  align-items: center;
-  color: #0f172a;
+  gap: 0.4rem;
+  margin: 0;
+  padding: 0.55rem 0.8rem;
+  background: var(--accent-subtle);
+  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, #fff);
+  font-size: 0.86rem;
+  font-weight: 600;
+  color: var(--accent-deep);
+}
+
+.day h3 b {
+  display: grid;
+  place-items: center;
+  min-width: 1.7rem;
+  height: 1.7rem;
+  padding: 0 0.3rem;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.78rem;
 }
 
 .day em {
-  margin-inline-start: 0.4rem;
+  margin-inline-start: auto;
   font-style: normal;
-  font-size: 0.75rem;
+  font-size: 0.72rem;
+  font-weight: 600;
   color: #94a3b8;
+  background: #fff;
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+}
+
+.day.today h3 {
+  background: color-mix(in srgb, var(--accent-soft) 70%, #fff);
+}
+
+.day.today em {
+  color: var(--accent-deep);
+}
+
+.day.past {
+  opacity: 0.82;
 }
 
 .day ul {
   list-style: none;
   margin: 0;
   padding: 0;
-  display: grid;
-  gap: 0.35rem;
 }
 
 .day li {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.6rem;
+  gap: 0.75rem;
+  padding: 0.62rem 0.85rem;
+  border-top: 1px solid #eef2f6;
+}
+
+.day li:first-child {
+  border-top: 0;
 }
 
 .day a {
+  flex: 1 1 auto;
   color: #0f172a;
   text-decoration: none;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.day a:hover {
+  color: var(--accent-deep);
+}
+
+.sms {
+  flex-shrink: 0;
+  border: 1px solid color-mix(in srgb, var(--accent) 35%, #fff);
+  background: #fff;
+  color: var(--accent-deep);
+  border-radius: 999px;
+  padding: 0.28rem 0.65rem;
+  font: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.sms:hover:not(:disabled) {
+  background: var(--accent-subtle);
+}
+
+.sms:disabled {
+  border-color: #e2e8f0;
+  color: #94a3b8;
+  cursor: default;
 }
 
 .lead {
@@ -293,8 +375,40 @@ onMounted(async () => {
 
 @media (max-width: 720px) {
   .birthdays {
-    align-items: flex-start;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.45rem 0.6rem;
+  }
+
+  .head {
+    min-width: 0;
+  }
+
+  .head p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .more {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .chips {
+    grid-column: 1 / -1;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .chips::-webkit-scrollbar {
+    display: none;
+  }
+
+  .day li {
+    gap: 0.45rem;
+    padding-inline: 0.7rem;
   }
 }
 </style>

apps/web/src/components/dashboard/HomeHero.vue

@@ -199,8 +199,10 @@ const shortcutLabel = computed(() =>
 
 .hero-body {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 0.75rem;
   min-width: 0;
+  max-width: 100%;
   padding-top: 0;
 }
 
@@ -208,6 +210,12 @@ const shortcutLabel = computed(() =>
   display: flex;
   align-items: center;
   gap: 0.9rem;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.greet-text {
+  min-width: 0;
 }
 
 .hero-avatar {
@@ -261,7 +269,8 @@ const shortcutLabel = computed(() =>
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.4rem;
-  max-width: 580px;
+  max-width: min(580px, 100%);
+  min-width: 0;
 }
 
 .chip {
@@ -330,8 +339,9 @@ const shortcutLabel = computed(() =>
 .hero-ask-wrap {
   display: grid;
   gap: 0.45rem;
-  max-width: 520px;
+  max-width: min(520px, 100%);
   width: 100%;
+  min-width: 0;
 }
 
 .hero-ask {
@@ -339,6 +349,8 @@ const shortcutLabel = computed(() =>
   align-items: center;
   gap: 0.55rem;
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
   background: #fff;
   color: #0f172a;
   border-radius: 999px;
@@ -425,19 +437,25 @@ const shortcutLabel = computed(() =>
   }
 
   .hero-chips {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
-    max-width: 420px;
+    max-width: min(420px, 100%);
   }
 }
 
 @media (max-width: 700px) {
   .hero {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     min-height: auto;
+    padding-inline: 0.85rem;
+    overflow: hidden;
   }
 
   .hero-bot {
     display: none;
   }
+
+  .hero-ask kbd {
+    display: none;
+  }
 }
 </style>

apps/web/src/views/HomeView.vue

@@ -228,7 +228,13 @@ onUnmounted(() => {
 <style scoped>
 .dashboard {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 1.15rem;
+  min-width: 0;
+}
+
+.dashboard > * {
+  min-width: 0;
 }
 
 .mid-grid {

apps/web/src/views/LeadDetailView.vue

@@ -19,6 +19,7 @@ import {
   UiTextarea,
 } from '@/components/ui';
 import RelatedTasksPanel from '@/components/routines/RelatedTasksPanel.vue';
+import SmsComposeModal from '@/components/SmsComposeModal.vue';
 import type {
   ActivityDto,
   ConvertLeadResult,
@@ -57,6 +58,7 @@ const followUpAt = ref('');
 const followUpBody = ref('');
 const editing = ref(false);
 const moreOpen = ref(false);
+const smsOpen = ref(false);
 const copied = ref(false);
 const narrow = ref(typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches);
 let narrowMq: MediaQueryList | null = null;
@@ -371,6 +373,15 @@ onBeforeUnmount(() => narrowMq?.removeEventListener('change', syncNarrow));
       :back-to="{ name: 'leads' }"
     >
       <template #actions>
+        <UiButton
+          v-if="lead && !editing"
+          variant="secondary"
+          size="sm"
+          :disabled="busy || !lead.mobile"
+          @click="smsOpen = true"
+        >
+          پیامک
+        </UiButton>
         <UiButton
           v-if="lead && !editing"
           variant="secondary"
@@ -444,10 +455,17 @@ onBeforeUnmount(() => narrowMq?.removeEventListener('change', syncNarrow));
               <UiIcon name="phone" :size="16" />
               تماس
             </a>
+            <button class="m-btn" type="button" @click="smsOpen = true">
+              <UiIcon name="chat" :size="16" />
+              پیامک
+            </button>
             <button class="m-btn" type="button" @click="startEdit">
               <UiIcon name="pencil" :size="16" />
               ویرایش
             </button>
+            <button class="m-btn icon" type="button" aria-label="بیشتر" @click="moreOpen = true">
+              <UiIcon name="dots" :size="18" />
+            </button>
             <button
               v-if="!lead.convertedPersonId"
               class="m-btn solid"
@@ -458,9 +476,6 @@ onBeforeUnmount(() => narrowMq?.removeEventListener('change', syncNarrow));
               <UiIcon name="user-plus" :size="16" />
               تبدیل به مشتری
             </button>
-            <button class="m-btn icon" type="button" aria-label="بیشتر" @click="moreOpen = true">
-              <UiIcon name="dots" :size="18" />
-            </button>
           </div>
         </article>
 
@@ -704,6 +719,11 @@ onBeforeUnmount(() => narrowMq?.removeEventListener('change', syncNarrow));
 
         <aside class="side">
           <button class="sheet-close" type="button" @click="moreOpen = false">بستن</button>
+          <UiCard title="پیامک">
+            <UiButton size="sm" :disabled="!lead.mobile" @click="smsOpen = true; moreOpen = false">
+              ارسال پیامک
+            </UiButton>
+          </UiCard>
           <UiCard title="تغییر وضعیت">
             <UiField label="وضعیت">
               <UiSelect v-model="stageId">
@@ -764,6 +784,16 @@ onBeforeUnmount(() => narrowMq?.removeEventListener('change', syncNarrow));
           </UiCard>
         </aside>
       </div>
+      <SmsComposeModal
+        :open="smsOpen"
+        title="ارسال پیامک"
+        :endpoint="`/leads/${lead.id}/sms`"
+        :name="lead.contactName || lead.title"
+        :phone="lead.mobile || lead.phone || ''"
+        :record-title="lead.title"
+        :company="lead.contactName ? lead.title : ''"
+        @close="smsOpen = false"
+      />
     </template>
   </section>
 </template>
@@ -1082,14 +1112,15 @@ onBeforeUnmount(() => narrowMq?.removeEventListener('change', syncNarrow));
     color: #94a3b8;
   }
 
-  .m-actions {
+  .m-actions,
+  .m-actions.converted {
     display: grid;
-    grid-template-columns: auto auto minmax(0, 1fr) 36px;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) 36px;
     gap: 0.35rem;
   }
 
-  .m-actions.converted {
+  .m-actions .solid {
-    grid-template-columns: 1fr 1fr auto;
+    grid-column: 1 / -1;
   }
 
   .m-btn {

apps/web/src/views/PersonProfileView.vue

@@ -19,6 +19,7 @@ import UiIcon from '@/components/UiIcon.vue';
 import CustomerMoodFace from '@/components/CustomerMoodFace.vue';
 import MentoAiAvatar from '@/components/brand/MentoAiAvatar.vue';
 import { brand } from '@mento/shared';
+import SmsComposeModal from '@/components/SmsComposeModal.vue';
 import MentoMemoryPanel from '@/components/MentoMemoryPanel.vue';
 import AskMentoPanel from '@/components/AskMentoPanel.vue';
 import ProfileEmptyState from '@/components/person-profile/ProfileEmptyState.vue';
@@ -104,6 +105,7 @@ const cards = ref<ProjectCardDto[]>([]);
 const tahesabMoshtariCode = ref<number | null>(null);
 
 const moreOpen = ref(false);
+const smsOpen = ref(false);
 const mobMoreOpen = ref(false);
 const filterOpen = ref(false);
 const historyFilter = ref<HistoryFilter>('all');
@@ -117,10 +119,12 @@ const moreItems = computed<ProfileMoreItem[]>(() => [
   { key: 'quote', label: 'پیش‌فاکتور جدید', to: { name: 'quote-new', query: { personId: id.value } } },
   { key: 'ticket', label: 'تیکت جدید', to: { name: 'ticket-new', query: { personId: id.value } } },
   { key: 'note', label: 'یادداشت جدید', to: { name: 'notes', query: { personId: id.value } } },
+  { key: 'sms', label: 'ارسال پیامک' },
   { key: 'delete', label: 'حذف شخص', danger: true },
 ]);
 
 function onMoreSelect(key: string) {
+  if (key === 'sms') smsOpen.value = true;
   if (key === 'delete') void removePerson();
 }
 
@@ -676,6 +680,10 @@ watch(() => route.query.tab, readTab, { immediate: true });
               <UiIcon name="phone" :size="15" />
               {{ phoneDisplay }}
             </a>
+            <button class="contact-pill sms" type="button" :disabled="!phoneNumber" @click="smsOpen = true">
+              <UiIcon name="chat" :size="15" />
+              پیامک
+            </button>
             <a v-if="person.email" class="contact-pill" :href="mailHref || undefined" dir="ltr">
               <UiIcon name="mail" :size="15" />
               {{ person.email }}
@@ -1033,6 +1041,18 @@ watch(() => route.query.tab, readTab, { immediate: true });
       </div>
     </template>
 
+    <SmsComposeModal
+      v-if="person"
+      :open="smsOpen"
+      title="ارسال پیامک"
+      :endpoint="`/people/${id}/sms`"
+      :name="fullName"
+      :phone="phoneNumber"
+      :record-title="fullName"
+      :company="person.company?.name ?? ''"
+      @close="smsOpen = false"
+    />
+
     <div v-if="person" class="dock">
       <button class="fab-item call" type="button" :disabled="!telHref" @click="goCall">
         <span class="fab-circle">
@@ -1275,6 +1295,17 @@ watch(() => route.query.tab, readTab, { immediate: true });
   background: #f0fdfa;
 }
 
+button.contact-pill {
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+button.contact-pill:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
 .facts-grid {
   margin: 0;
   display: grid;