feat: edit SMS variable names in dashboard settings

Allow SuperAdmin to set sms.ir placeholder names for each template before saving.

src/views/settings/SettingsView.vue

@@ -14,7 +14,7 @@
         <div class="flex-grow-1">
           <h2 class="text-lg font-bold text-color m-0 mb-1">قالب‌های پیامک</h2>
           <p class="text-sm text-muted m-0 line-height-3">
-            شناسه قالب‌های sms.ir را وارد کنید. اگر قالبی در پایگاه داده نباشد، با ذخیره ایجاد می‌شود.
+            شناسه قالب و نام متغیرهای sms.ir را وارد کنید. نام متغیر باید دقیقاً با قالب پنل یکی باشد. اگر قالبی در پایگاه داده نباشد، با ذخیره ایجاد می‌شود.
           </p>
         </div>
       </div>
@@ -28,30 +28,52 @@
         <div
           v-for="template in smsTemplates"
           :key="template.key"
-          class="flex flex-column gap-2"
+          class="p-3 border-round surface-ground border-1 border-color flex flex-column gap-3"
         >
+          <template v-if="templateForm[template.key]">
           <label class="font-semibold text-sm text-color" :for="`sms-template-${template.key}`">
             {{ template.label }}
           </label>
           <InputText
             :id="`sms-template-${template.key}`"
-            v-model.trim="templateForm[template.key]"
+            v-model.trim="templateForm[template.key].templateId"
             class="w-full text-sm"
             dir="ltr"
             inputmode="numeric"
             placeholder="شناسه قالب sms.ir"
           />
-          <div class="flex flex-wrap align-items-center gap-2">
-            <span class="text-xs text-muted">متغیرها:</span>
-            <Tag
+          <div class="flex flex-column gap-2">
+            <span class="text-xs text-muted">نام متغیرها در قالب sms.ir</span>
+            <div
               v-for="variable in template.variables"
-              :key="variable"
-              :value="`#${variable}#`"
+              :key="variable.slot"
+              class="flex flex-column sm:flex-row sm:align-items-center gap-2"
+            >
+              <label
+                class="text-sm text-color sm:w-10rem flex-shrink-0"
+                :for="`sms-var-${template.key}-${variable.slot}`"
+              >
+                {{ variable.label }}
+              </label>
+              <div class="flex-grow-1 flex align-items-center gap-2">
+                <InputText
+                  :id="`sms-var-${template.key}-${variable.slot}`"
+                  v-model.trim="templateForm[template.key].variables[variable.slot]"
+                  class="w-full text-sm"
+                  dir="ltr"
+                  :placeholder="variable.defaultName"
+                  autocomplete="off"
+                />
+                <Tag
+                  :value="`#${templateForm[template.key].variables[variable.slot] || variable.defaultName}#`"
                   severity="secondary"
-              class="text-xs font-mono"
+                  class="text-xs flex-shrink-0"
                 />
               </div>
             </div>
+          </div>
+          </template>
+        </div>
 
         <div class="flex justify-content-end">
           <Button
@@ -289,6 +311,16 @@ const confirmImport = () => {
   });
 };
 
+const emptyFormEntry = (template) => ({
+  templateId: template?.templateId || '',
+  variables: Object.fromEntries(
+    (template?.variables || []).map((variable) => [
+      variable.slot,
+      variable.name || variable.defaultName || ''
+    ])
+  )
+});
+
 const applySmsTemplates = (payload) => {
   const data = payload?.data || payload || {};
   const templates = Array.isArray(data.smsTemplates) ? data.smsTemplates : [];
@@ -297,7 +329,7 @@ const applySmsTemplates = (payload) => {
     delete templateForm[key];
   });
   templates.forEach((template) => {
-    templateForm[template.key] = template.templateId || '';
+    templateForm[template.key] = emptyFormEntry(template);
   });
 };
 
@@ -316,11 +348,15 @@ const loadSettings = async () => {
 const saveSmsTemplates = async () => {
   isSavingSettings.value = true;
   try {
-    const smsTemplateIds = {};
+    const smsTemplatesPayload = {};
     smsTemplates.value.forEach((template) => {
-      smsTemplateIds[template.key] = templateForm[template.key] || '';
+      const entry = templateForm[template.key] || emptyFormEntry(template);
+      smsTemplatesPayload[template.key] = {
+        templateId: entry.templateId || '',
+        variables: { ...(entry.variables || {}) }
+      };
     });
-    const response = await settingsApi.save({ smsTemplates: smsTemplateIds });
+    const response = await settingsApi.save({ smsTemplates: smsTemplatesPayload });
     applySmsTemplates(response);
     showSuccess('قالب‌های پیامک ذخیره شدند.');
   } catch (err) {