Redesign of the SMS automation page

apps/web/public/brand/mento-logo.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
-  <defs>
-    <linearGradient id="mentoLogoBg" x1="8" y1="8" x2="56" y2="56">
-      <stop offset="0%" stop-color="#5eead4"/>
-      <stop offset="100%" stop-color="#14b8a6"/>
-    </linearGradient>
-  </defs>
-  <rect x="4" y="4" width="56" height="56" rx="16" fill="url(#mentoLogoBg)"/>
-  <rect x="14" y="16" width="8" height="32" rx="4" fill="#fff" opacity="0.95"/>
-  <path d="M17 17.5c1-1.6 3.5-1.8 4.8-.5L36 30l4.3-4c1.4-1.3 3.6-1.2 4.7.4L44 27.5 33 37.5c-1.1 1-2.8 1-3.9 0L16.5 24.5 17 17.5Z" fill="#134e4a"/>
-  <path d="M27.5 32 38 21.5c1.3-1.3 3.4-1.2 4.6.2L50 29.5l-2.6 2.6L40 25.5 31 34c-1 1-2.8 1-3.8-.1l-.7-.9Z" fill="#ecfdf5"/>
-  <rect x="42" y="16" width="8" height="32" rx="4" fill="#134e4a"/>
-  <path d="M41 17.5c1.3-1.4 3.5-1.3 4.7.2l1.6 1.8-7 6.6-2.1-2c-1.2-1.1-.9-3.2 2.8-6.6Z" fill="#ecfdf5"/>
-</svg>

apps/web/src/components/UiIcon.vue

@@ -32,6 +32,7 @@ defineProps<{
     | 'chevron'
     | 'star'
     | 'filter'
+    | 'funnel'
     | 'lightbulb'
     | 'building'
     | 'user'
@@ -58,7 +59,9 @@ defineProps<{
     | 'crown'
     | 'gift'
     | 'medal'
-    | 'logout';
+    | 'logout'
+    | 'pulse'
+    | 'sliders';
   size?: number;
 }>();
 </script>
@@ -221,6 +224,9 @@ defineProps<{
     <template v-else-if="name === 'filter'">
       <path d="M4 6h16M7 12h10M10 18h4" />
     </template>
+    <template v-else-if="name === 'funnel'">
+      <path d="M4 4.5h16l-6.2 8.2V19l-3.6 2v-8.3L4 4.5Z" />
+    </template>
     <template v-else-if="name === 'lightbulb'">
       <path d="M9 18h6" />
       <path d="M10 21h4" />
@@ -346,6 +352,13 @@ defineProps<{
       <path d="M16 17l5-5-5-5" />
       <path d="M21 12H9" />
     </template>
+    <template v-else-if="name === 'pulse'">
+      <path d="M3 12h3.2l2-6.5L12 19l2.4-7.5H21" />
+    </template>
+    <template v-else-if="name === 'sliders'">
+      <path d="M4 7h16M4 17h16" />
+      <path d="M8 4.5v5M16 14.5v5" />
+    </template>
   </svg>
 </template>
 

apps/web/src/layouts/AppLayout.vue

@@ -48,9 +48,10 @@ const salesActive = computed(() =>
 const activitiesActive = computed(() => pathIn(['/activities']));
 const notesActive = computed(() => route.path === '/notes' || route.path.startsWith('/notes/'));
 const supportActive = computed(() => pathIn(['/tickets']));
-const automationsActive = computed(() => route.path.startsWith('/settings/automations'));
-const messageAutomationsActive = computed(() =>
-  route.path.startsWith('/settings/message-automations'),
+const automationsActive = computed(
+  () =>
+    route.path.startsWith('/settings/automations') ||
+    route.path.startsWith('/settings/message-automations'),
 );
 const toolsActive = computed(() =>
   pathIn(['/settings/lead-forms', '/projects', '/project-cards', '/inventory', '/cheques', '/attachments']),
@@ -403,28 +404,24 @@ onUnmounted(() => {
             <UiIcon name="chart" :size="collapsed ? 20 : 18" />
             <span>گزارش‌ها</span>
           </RouterLink>
-          <RouterLink
+          <div
             v-if="canSettings"
-            to="/settings/automations"
-            class="nav-item"
-            title="اتوماسیون"
-            :class="{ 'router-link-active': automationsActive }"
-            @click="closeHub(); closeMenu()"
+            class="nav-fold"
+            :class="{ active: automationsActive || openHubKey === 'automations' }"
           >
-            <UiIcon name="layers" :size="collapsed ? 20 : 18" />
-            <span>اتوماسیون</span>
-          </RouterLink>
-          <RouterLink
-            v-if="canSettings"
-            to="/settings/message-automations"
-            class="nav-item"
-            title="پیام خودکار"
-            :class="{ 'router-link-active': messageAutomationsActive }"
-            @click="closeHub(); closeMenu()"
-          >
-            <UiIcon name="mail" :size="collapsed ? 20 : 18" />
-            <span>پیام خودکار</span>
-          </RouterLink>
+            <button
+              class="nav-item nav-fold-btn"
+              type="button"
+              title="اتوماسیون"
+              :class="{ 'router-link-active': automationsActive || openHubKey === 'automations', 'hub-on': openHubKey === 'automations' }"
+              :aria-expanded="openHubKey === 'automations'"
+              @click="onHubClick('automations')"
+            >
+              <UiIcon name="layers" :size="collapsed ? 20 : 18" />
+              <span>اتوماسیون</span>
+              <i class="chev" aria-hidden="true" />
+            </button>
+          </div>
         </div>
 
         <div class="nav-sep" aria-hidden="true" />

apps/web/src/lib/nav-hubs.ts

@@ -3,6 +3,7 @@ export type NavHubKey =
   | 'sales'
   | 'activities'
   | 'support'
+  | 'automations'
   | 'tools'
   | 'settings';
 
@@ -15,6 +16,8 @@ export type NavIconName =
   | 'document'
   | 'box'
   | 'mail'
+  | 'send'
+  | 'sparkle'
   | 'dollar'
   | 'target'
   | 'check'
@@ -190,6 +193,35 @@ export const NAV_HUBS: NavHubDef[] = [
       },
     ],
   },
+  {
+    key: 'automations',
+    title: 'اتوماسیون',
+    desc: 'قوانین خودکار برای گردش کار و پیامک',
+    icon: 'sparkle',
+    tint: 'violet',
+    shortcuts: [
+      { to: '/settings/automations', title: 'قانون گردش کار', icon: 'layers' },
+      { to: '/settings/message-automations', title: 'قانون پیامک', icon: 'send' },
+    ],
+    cards: [
+      {
+        to: '/settings/automations',
+        title: 'اتوماسیون گردش کار',
+        desc: 'اگر این شد، آن کارها را پشت‌سرهم انجام بده',
+        icon: 'layers',
+        tint: 'violet',
+        admin: true,
+      },
+      {
+        to: '/settings/message-automations',
+        title: 'اتوماسیون پیامک‌ها',
+        desc: 'پیامک و ناتیف با تأخیر و تکرار',
+        icon: 'send',
+        tint: 'sky',
+        admin: true,
+      },
+    ],
+  },
   {
     key: 'tools',
     title: 'ابزارها',
@@ -292,14 +324,6 @@ export const NAV_HUBS: NavHubDef[] = [
         icon: 'lightbulb',
         tint: 'rose',
       },
-      {
-        to: '/settings/message-automations',
-        title: 'پیام خودکار',
-        desc: 'پیامک و ناتیف با زمان‌بندی تکرار',
-        icon: 'mail',
-        tint: 'sky',
-        admin: true,
-      },
     ],
   },
 ];

apps/web/src/views/AutomationsSettingsView.vue

@@ -282,7 +282,7 @@ watch(trigger, (next) => {
   <section class="page">
     <header class="page-head">
       <div class="head-copy">
-        <h1>اتوماسیون</h1>
+        <h1>اتوماسیون گردش کار</h1>
         <p class="lead">
           مثل یک بوم کاری: گره «اگر» را به چند عمل پشت‌سرهم وصل کنید.
         </p>