Add activity detail, Jalali pickers, and customer/user profiles.

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

apps/web/src/layouts/AppLayout.vue

@@ -24,14 +24,6 @@ const showOwnRecordsBanner = computed(
 const roleLabel = computed(() =>
   auth.user?.role ? USER_ROLE_LABELS[auth.user.role] : '',
 );
-const userInitials = computed(() => {
-  const parts = auth.user?.fullName?.trim().split(/\s+/) ?? [];
-  if (!parts.length) return 'م';
-  return parts
-    .slice(0, 2)
-    .map((p) => p[0])
-    .join('');
-});
 const todayLabel = computed(() => formatJalaliShort(new Date()));
 
 const salesOpen = ref(false);
@@ -344,8 +336,14 @@ onUnmounted(() => {
       </p>
 
       <div class="sidebar-foot">
-        <div class="profile-card">
-          <span class="avatar">{{ userInitials }}</span>
+        <RouterLink
+          class="profile-card"
+          :to="{ name: 'profile' }"
+          @click="closeMenu"
+        >
+          <span class="avatar">
+            <img src="/brand/user-avatar.png" :alt="auth.user?.fullName || 'کاربر'" width="48" height="48" />
+          </span>
           <div class="profile-meta">
             <strong>{{ auth.user?.fullName }}</strong>
             <span>{{ roleLabel || 'کاربر' }}</span>
@@ -354,14 +352,17 @@ onUnmounted(() => {
               آنلاین
             </span>
           </div>
-        </div>
+        </RouterLink>
 
         <div class="promo-card">
           <span class="promo-icons" aria-hidden="true">
-            <UiIcon name="send" :size="16" />
-            <UiIcon name="sparkle" :size="14" />
+            <UiIcon name="send" :size="20" />
+            <UiIcon name="sparkle" :size="18" />
           </span>
-          <p>با منتو فروشات را چند برابر کن</p>
+          <p>
+            <span>با منتو فروشات را</span>
+            <span>چند برابر کن</span>
+          </p>
         </div>
 
         <button class="logout-link" type="button" @click="onLogout">خروج از حساب</button>
@@ -689,29 +690,46 @@ onUnmounted(() => {
 
 .profile-card {
   display: flex;
+  flex-direction: row-reverse;
   align-items: center;
   gap: 0.75rem;
   padding: 0.85rem 0.9rem;
   border-radius: 18px;
   background: #f8fafc;
+  color: inherit;
+}
+
+.profile-card:hover {
+  background: #f0fdfa;
+}
+
+.profile-card.router-link-active {
+  background: #ecfdf5;
 }
 
 .avatar {
-  width: 44px;
-  height: 44px;
+  position: relative;
+  width: 48px;
+  height: 48px;
   border-radius: 999px;
-  background: linear-gradient(145deg, #99f6e4, #5eead4);
-  color: #0f766e;
-  display: grid;
-  place-items: center;
-  font-weight: 800;
   flex-shrink: 0;
+  overflow: hidden;
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
 
 .profile-meta {
   min-width: 0;
+  flex: 1;
   display: grid;
   gap: 0.12rem;
+  text-align: right;
 }
 
 .profile-meta strong {
@@ -729,6 +747,7 @@ onUnmounted(() => {
 .online-label {
   display: inline-flex;
   align-items: center;
+  justify-content: flex-start;
   gap: 0.35rem;
   color: #64748b !important;
   font-size: 0.74rem !important;
@@ -745,7 +764,7 @@ onUnmounted(() => {
 .promo-card {
   display: flex;
   align-items: center;
-  gap: 0.7rem;
+  gap: 0.75rem;
   padding: 1.05rem 1.05rem;
   border-radius: 22px;
   background: linear-gradient(105deg, #c4e84a 0%, #2dd4bf 42%, #1d4ed8 100%);
@@ -755,17 +774,27 @@ onUnmounted(() => {
 
 .promo-icons {
   display: inline-flex;
+  flex-direction: column;
   align-items: center;
-  gap: 0.2rem;
+  justify-content: center;
+  gap: 0.35rem;
   flex-shrink: 0;
   opacity: 0.95;
 }
 
 .promo-card p {
   margin: 0;
-  font-size: 0.86rem;
-  font-weight: 700;
-  line-height: 1.45;
+  flex: 1;
+  min-width: 0;
+  font-size: 0.98rem;
+  font-weight: 800;
+  line-height: 1.5;
+  display: grid;
+  gap: 0.1rem;
+}
+
+.promo-card p span {
+  display: block;
 }
 
 .logout-link {