From 4411443fba2b0c9c0bae82fa5730e79b91fd89c2 Mon Sep 17 00:00:00 2001
From: safavimohadeseh78 <safavimohadeseh78@gmail.com>
Date: Wed, 5 Aug 2026 14:07:42 +0200
Subject: [PATCH] Fix toast dismiss, add delete confirms, and polish dashboard
 CTAs.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/ui/ToastContainer.vue          | 43 ++++++++++++++++---
 src/composables/useToast.ts                   |  9 ++--
 src/views/companies/CompaniesView.vue         | 12 +++++-
 .../dashboard/components/CompactDashboard.vue | 14 +++---
 .../dashboard/components/DesktopDashboard.vue | 16 ++++++-
 src/views/orders/OrderPricingView.vue         | 14 +++++-
 6 files changed, 89 insertions(+), 19 deletions(-)

diff --git a/src/components/ui/ToastContainer.vue b/src/components/ui/ToastContainer.vue
index 08bedae..e09dbc1 100644
--- a/src/components/ui/ToastContainer.vue
+++ b/src/components/ui/ToastContainer.vue
@@ -2,11 +2,17 @@
 import { useToast } from '@/composables/useToast'
 
 const { toasts, dismiss } = useToast()
+
+function onDismiss(id: string, event: MouseEvent) {
+  event.preventDefault()
+  event.stopPropagation()
+  dismiss(id)
+}
 </script>
 
 <template>
   <div class="toast-container" aria-live="polite" aria-relevant="additions">
-    <TransitionGroup name="toast">
+    <TransitionGroup name="toast" tag="div" class="toast-container__list">
       <div
         v-for="toast in toasts"
         :key="toast.id"
@@ -15,7 +21,12 @@ const { toasts, dismiss } = useToast()
         role="status"
       >
         <p class="toast__message">{{ toast.message }}</p>
-        <button type="button" class="toast__close" aria-label="بستن" @click="dismiss(toast.id)">
+        <button
+          type="button"
+          class="toast__close"
+          aria-label="بستن"
+          @click="onDismiss(toast.id, $event)"
+        >
           ×
         </button>
       </div>
@@ -28,11 +39,15 @@ const { toasts, dismiss } = useToast()
   position: fixed;
   top: calc(var(--header-height) + 12px);
   left: 16px;
-  z-index: 1100;
+  z-index: 1200;
+  width: min(360px, calc(100vw - 32px));
+  pointer-events: none;
+}
+
+.toast-container__list {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  width: min(360px, calc(100vw - 32px));
   pointer-events: none;
 }
 
@@ -77,18 +92,34 @@ const { toasts, dismiss } = useToast()
 }
 
 .toast__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin: -4px;
   border: none;
+  border-radius: 6px;
   background: transparent;
   color: var(--color-text-muted);
-  font-size: 1.125rem;
+  font-size: 1.25rem;
   line-height: 1;
   padding: 0;
   flex-shrink: 0;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.toast__close:hover {
+  background: rgba(15, 23, 42, 0.06);
+  color: var(--color-text);
 }
 
 .toast-enter-active,
 .toast-leave-active {
-  transition: opacity 0.18s ease, transform 0.18s ease;
+  transition:
+    opacity 0.18s ease,
+    transform 0.18s ease;
 }
 
 .toast-enter-from,
diff --git a/src/composables/useToast.ts b/src/composables/useToast.ts
index eb7e0c2..7e888bd 100644
--- a/src/composables/useToast.ts
+++ b/src/composables/useToast.ts
@@ -1,4 +1,4 @@
-import { reactive } from 'vue'
+import { reactive, toRef } from 'vue'
 
 export type ToastTone = 'success' | 'error' | 'info' | 'warning'
 
@@ -19,12 +19,15 @@ function push(message: string, tone: ToastTone) {
 }
 
 function dismiss(id: string) {
-  state.items = state.items.filter((item) => item.id !== id)
+  const index = state.items.findIndex((item) => item.id === id)
+  if (index !== -1) {
+    state.items.splice(index, 1)
+  }
 }
 
 export function useToast() {
   return {
-    toasts: state.items,
+    toasts: toRef(state, 'items'),
     dismiss,
     success: (message: string) => push(message, 'success'),
     error: (message: string) => push(message, 'error'),
diff --git a/src/views/companies/CompaniesView.vue b/src/views/companies/CompaniesView.vue
index ed867e2..7b049d7 100644
--- a/src/views/companies/CompaniesView.vue
+++ b/src/views/companies/CompaniesView.vue
@@ -7,6 +7,7 @@ import BaseEmptyState from '@/components/ui/BaseEmptyState.vue'
 import ActiveSwitchCell from '@/components/ui/ActiveSwitchCell.vue'
 import { companies as initialCompanies } from '@/data/mockData'
 import { useToast } from '@/composables/useToast'
+import { confirm } from '@/composables/useConfirm'
 import type { Company } from '@/types'
 
 const MAX_LOGO_SIZE = 2 * 1024 * 1024
@@ -95,7 +96,16 @@ function onLogoSelect(event: Event) {
   reader.readAsDataURL(file)
 }
 
-function removeLogo() {
+async function removeLogo() {
+  if (!logoPreview.value) return
+  const ok = await confirm({
+    title: 'حذف تصویر',
+    message: 'آیا از حذف لوگوی شرکت مطمئن هستید؟',
+    confirmLabel: 'حذف',
+    cancelLabel: 'انصراف',
+    tone: 'danger',
+  })
+  if (!ok) return
   resetLogo()
 }
 
diff --git a/src/views/dashboard/components/CompactDashboard.vue b/src/views/dashboard/components/CompactDashboard.vue
index c5ae059..ebc5855 100644
--- a/src/views/dashboard/components/CompactDashboard.vue
+++ b/src/views/dashboard/components/CompactDashboard.vue
@@ -71,8 +71,9 @@ const { checkDeadlines, dashboardStats, recentOrders, salesChartData, chartAxisL
             </div>
           </RouterLink>
         </div>
-        <button type="button" class="admin-link compact-dashboard__footer-link" @click="goOrders">
+        <button type="button" class="admin-btn admin-btn--primary admin-btn--sm compact-dashboard__footer-link" @click="goOrders">
           مشاهده همه سفارش‌ها
+          <AdminIcon name="chevron-left" :size="16" />
         </button>
       </section>
 
@@ -94,7 +95,10 @@ const { checkDeadlines, dashboardStats, recentOrders, salesChartData, chartAxisL
             <strong>{{ formatCurrency(item.amount) }}</strong>
           </li>
         </ul>
-        <RouterLink to="/checks" class="admin-link compact-dashboard__footer-link">مشاهده همه</RouterLink>
+        <RouterLink to="/checks" class="admin-btn admin-btn--outline admin-btn--sm compact-dashboard__footer-link">
+          مشاهده همه
+          <AdminIcon name="chevron-left" :size="16" />
+        </RouterLink>
       </section>
     </div>
   </div>
@@ -135,11 +139,9 @@ const { checkDeadlines, dashboardStats, recentOrders, salesChartData, chartAxisL
 }
 
 .compact-dashboard__footer-link {
-  display: inline-block;
+  display: inline-flex;
   margin-top: 12px;
-  background: none;
-  border: none;
-  padding: 0;
+  text-decoration: none;
 }
 
 .compact-dashboard__deadlines {
diff --git a/src/views/dashboard/components/DesktopDashboard.vue b/src/views/dashboard/components/DesktopDashboard.vue
index 2495d0f..1fc3fff 100644
--- a/src/views/dashboard/components/DesktopDashboard.vue
+++ b/src/views/dashboard/components/DesktopDashboard.vue
@@ -94,7 +94,10 @@ const { checkDeadlines, dashboardStats, recentOrders, salesChartData, chartAxisL
           </table>
         </div>
         <div class="dashboard__card-footer">
-          <button type="button" class="admin-link" @click="goOrders">مشاهده همه سفارش‌ها</button>
+          <button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="goOrders">
+            مشاهده همه سفارش‌ها
+            <AdminIcon name="chevron-left" :size="16" />
+          </button>
         </div>
       </div>
 
@@ -119,7 +122,10 @@ const { checkDeadlines, dashboardStats, recentOrders, salesChartData, chartAxisL
           </li>
         </ul>
         <div class="dashboard__card-footer">
-          <RouterLink to="/checks" class="admin-link">مشاهده همه</RouterLink>
+          <RouterLink to="/checks" class="admin-btn admin-btn--outline admin-btn--sm">
+            مشاهده همه
+            <AdminIcon name="chevron-left" :size="16" />
+          </RouterLink>
         </div>
       </div>
     </div>
@@ -212,11 +218,17 @@ const { checkDeadlines, dashboardStats, recentOrders, salesChartData, chartAxisL
 }
 
 .dashboard__card-footer {
+  display: flex;
+  justify-content: flex-start;
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--color-border-light);
 }
 
+.dashboard__card-footer .admin-btn {
+  text-decoration: none;
+}
+
 .dashboard__deadline-list {
   list-style: none;
   margin: 0;
diff --git a/src/views/orders/OrderPricingView.vue b/src/views/orders/OrderPricingView.vue
index fc61826..41aa3ed 100644
--- a/src/views/orders/OrderPricingView.vue
+++ b/src/views/orders/OrderPricingView.vue
@@ -6,6 +6,7 @@ import AdminIcon from '@/components/icons/AdminIcon.vue'
 import StatusBadge from '@/components/ui/StatusBadge.vue'
 import { orders } from '@/data/mockData'
 import { formatCurrency, formatNumber } from '@/utils/format'
+import { confirm } from '@/composables/useConfirm'
 import type { OrderItem } from '@/types'
 
 const route = useRoute()
@@ -41,7 +42,18 @@ function goBack() {
   router.push('/orders')
 }
 
-function removeItem(id: string) {
+async function removeItem(id: string) {
+  const item = items.value.find((entry) => entry.id === id)
+  const ok = await confirm({
+    title: 'حذف محصول',
+    message: item
+      ? `آیا از حذف «${item.productName}» از سفارش مطمئن هستید؟`
+      : 'آیا از حذف این محصول از سفارش مطمئن هستید؟',
+    confirmLabel: 'حذف',
+    cancelLabel: 'انصراف',
+    tone: 'danger',
+  })
+  if (!ok) return
   items.value = items.value.filter((i) => i.id !== id)
 }