feat(unified-mobile-desktop-ui): Complete US-507 - Selecție Companie/Perioadă în MobileDrawerMenu

Implemented by Ralph autonomous loop.
Iteration: 7

Co-Authored-By: Claude <noreply@anthropic.com>

src/shared/components/mobile/MobileDrawerMenu.vue

@@ -11,6 +11,94 @@
             </div>
           </div>
 
+          <!-- Company & Period Selection (below header, above navigation) -->
+          <div v-if="companiesStore" class="drawer-selectors">
+            <!-- Company Selector -->
+            <div class="selector-group">
+              <label class="selector-label">Firma</label>
+              <button
+                class="selector-trigger"
+                @click="toggleCompanyDropdown"
+                :aria-expanded="companyDropdownOpen"
+              >
+                <div class="selector-value">
+                  <span class="selector-main">{{ selectedCompanyName }}</span>
+                  <span v-if="selectedCompanyCode" class="selector-sub">{{ selectedCompanyCode }}</span>
+                </div>
+                <i class="pi pi-chevron-down" :class="{ 'rotate-180': companyDropdownOpen }"></i>
+              </button>
+              <!-- Company Dropdown Panel -->
+              <div v-if="companyDropdownOpen" class="selector-panel">
+                <div class="selector-search">
+                  <i class="pi pi-search"></i>
+                  <input
+                    ref="companySearchInput"
+                    type="text"
+                    v-model="companySearchQuery"
+                    placeholder="Caută firmă..."
+                    class="selector-search-input"
+                  />
+                </div>
+                <div class="selector-list">
+                  <div
+                    v-for="company in filteredCompanies"
+                    :key="company.id_firma"
+                    class="selector-item"
+                    :class="{ active: company.id_firma === companiesStore.selectedCompany?.id_firma }"
+                    @click="selectCompany(company)"
+                  >
+                    <div class="selector-item-content">
+                      <span class="selector-item-name">{{ company.name }}</span>
+                      <span v-if="company.fiscal_code" class="selector-item-sub">CUI: {{ company.fiscal_code }}</span>
+                    </div>
+                    <i v-if="company.id_firma === companiesStore.selectedCompany?.id_firma" class="pi pi-check"></i>
+                  </div>
+                  <div v-if="filteredCompanies.length === 0" class="selector-empty">
+                    <i class="pi pi-info-circle"></i>
+                    <span>Nu s-au găsit firme</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Period Selector -->
+            <div v-if="periodStore && companiesStore.selectedCompany" class="selector-group">
+              <label class="selector-label">Perioada</label>
+              <button
+                class="selector-trigger"
+                @click="togglePeriodDropdown"
+                :aria-expanded="periodDropdownOpen"
+              >
+                <div class="selector-value">
+                  <span class="selector-main">{{ selectedPeriodDisplay }}</span>
+                </div>
+                <i class="pi pi-chevron-down" :class="{ 'rotate-180': periodDropdownOpen }"></i>
+              </button>
+              <!-- Period Dropdown Panel -->
+              <div v-if="periodDropdownOpen" class="selector-panel">
+                <div class="selector-list">
+                  <div
+                    v-for="period in availablePeriods"
+                    :key="`${period.an}-${period.luna}`"
+                    class="selector-item"
+                    :class="{ active: isPeriodSelected(period) }"
+                    @click="selectPeriod(period)"
+                  >
+                    <span class="selector-item-name">{{ period.display_name }}</span>
+                    <i v-if="isPeriodSelected(period)" class="pi pi-check"></i>
+                  </div>
+                  <div v-if="availablePeriods.length === 0" class="selector-empty">
+                    <i class="pi pi-info-circle"></i>
+                    <span>Nu sunt perioade disponibile</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Section Divider after selectors -->
+          <div v-if="companiesStore" class="drawer-divider"></div>
+
           <!-- Navigation Sections (scrollable) -->
           <div class="drawer-sections">
             <!-- PRINCIPALE Section -->
@@ -122,24 +210,29 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 /**
- * MobileDrawerMenu - Material Design 3 inspired navigation drawer for mobile (v2)
+ * MobileDrawerMenu - Material Design 3 inspired navigation drawer for mobile (v3)
  *
  * Props:
  * - modelValue (v-model): Controls visibility of the drawer
  * - user: Optional user object with { username } for profile display
  * - onLogout: Optional callback function for logout action
+ * - companiesStore: Optional Pinia store instance for company selection
+ * - periodStore: Optional Pinia store instance for accounting period selection
  *
  * Events:
  * - update:modelValue: Emitted when visibility changes (for v-model support)
  * - logout: Emitted when logout is clicked (if no onLogout prop)
+ * - company-changed: Emitted when company selection changes
+ * - period-changed: Emitted when period selection changes
  *
  * Features:
  * - Slide-in animation from left
  * - Header with ROA2WEB logo
+ * - Company & Period selectors (below header, like desktop)
  * - Navigation organized into 4 category sections:
  *   - PRINCIPALE: Dashboard, Bonuri
  *   - RAPOARTE: Facturi, Balanță, Casa și Banca
@@ -176,15 +269,120 @@ const props = defineProps({
   onLogout: {
     type: Function,
     default: null
+  },
+  /**
+   * Companies store instance for company selection
+   * Expected: Pinia store with companies, selectedCompany, setSelectedCompany
+   */
+  companiesStore: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Accounting period store instance for period selection
+   * Expected: Pinia store with periods, selectedPeriod, setSelectedPeriod
+   */
+  periodStore: {
+    type: Object,
+    default: null
   }
 })
 
-const emit = defineEmits(['update:modelValue', 'logout'])
+const emit = defineEmits(['update:modelValue', 'logout', 'company-changed', 'period-changed'])
 
 const route = useRoute()
 const router = useRouter()
 const drawerRef = ref(null)
 
+// Company selector state
+const companyDropdownOpen = ref(false)
+const companySearchQuery = ref('')
+const companySearchInput = ref(null)
+
+// Period selector state
+const periodDropdownOpen = ref(false)
+
+// Computed properties for company selector
+const selectedCompanyName = computed(() => {
+  return props.companiesStore?.selectedCompany?.name || 'Selectare firmă'
+})
+
+const selectedCompanyCode = computed(() => {
+  const code = props.companiesStore?.selectedCompany?.fiscal_code
+  return code ? `CUI: ${code}` : ''
+})
+
+const filteredCompanies = computed(() => {
+  const companies = props.companiesStore?.companies || []
+  if (!companySearchQuery.value?.trim()) {
+    return companies
+  }
+  const query = companySearchQuery.value.toLowerCase().trim()
+  return companies.filter(
+    (company) =>
+      company.name?.toLowerCase().includes(query) ||
+      company.fiscal_code?.toLowerCase().includes(query)
+  )
+})
+
+// Computed properties for period selector
+const selectedPeriodDisplay = computed(() => {
+  return props.periodStore?.selectedPeriod?.display_name || 'Selectare perioadă'
+})
+
+const availablePeriods = computed(() => {
+  return props.periodStore?.periods || []
+})
+
+// Company selector methods
+const toggleCompanyDropdown = async () => {
+  companyDropdownOpen.value = !companyDropdownOpen.value
+  periodDropdownOpen.value = false // Close other dropdown
+  if (companyDropdownOpen.value) {
+    companySearchQuery.value = ''
+    await nextTick()
+    companySearchInput.value?.focus()
+  }
+}
+
+const selectCompany = (company) => {
+  if (props.companiesStore) {
+    props.companiesStore.setSelectedCompany(company)
+    emit('company-changed', company)
+  }
+  companyDropdownOpen.value = false
+  companySearchQuery.value = ''
+}
+
+// Period selector methods
+const togglePeriodDropdown = () => {
+  periodDropdownOpen.value = !periodDropdownOpen.value
+  companyDropdownOpen.value = false // Close other dropdown
+}
+
+const isPeriodSelected = (period) => {
+  const selected = props.periodStore?.selectedPeriod
+  if (!selected) return false
+  return period.an === selected.an && period.luna === selected.luna
+}
+
+const selectPeriod = (period) => {
+  if (props.periodStore) {
+    props.periodStore.setSelectedPeriod(period)
+    emit('period-changed', period)
+  }
+  periodDropdownOpen.value = false
+}
+
+// Close dropdowns when drawer closes
+watch(() => props.modelValue, (isOpen) => {
+  if (!isOpen) {
+    companyDropdownOpen.value = false
+    periodDropdownOpen.value = false
+    companySearchQuery.value = ''
+  }
+})
+
 /**
  * Navigation items organized by category
  * Based on US-308 acceptance criteria
@@ -320,6 +518,198 @@ const handleLogout = async () => {
   color: var(--text-color);
 }
 
+/* ================================================
+   Company & Period Selectors
+   ================================================ */
+
+.drawer-selectors {
+  padding: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  background: var(--surface-ground);
+}
+
+.selector-group {
+  position: relative;
+}
+
+.selector-label {
+  display: block;
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  color: var(--text-color-secondary);
+  margin-bottom: var(--space-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.selector-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--space-sm) var(--space-md);
+  background: var(--surface-card);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: border-color var(--transition-fast), background var(--transition-fast);
+  min-height: 48px;
+  text-align: left;
+}
+
+.selector-trigger:hover {
+  border-color: var(--color-primary);
+  background: var(--surface-hover);
+}
+
+.selector-value {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.selector-main {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.selector-sub {
+  font-size: var(--text-xs);
+  color: var(--text-color-secondary);
+  margin-top: 2px;
+}
+
+.selector-trigger .pi-chevron-down {
+  font-size: var(--text-xs);
+  color: var(--text-color-secondary);
+  transition: transform var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.selector-trigger .rotate-180 {
+  transform: rotate(180deg);
+}
+
+/* Selector Dropdown Panel */
+.selector-panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--space-xs);
+  background: var(--surface-card);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 10;
+  max-height: 250px;
+  overflow: hidden;
+}
+
+.selector-search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm);
+  border-bottom: 1px solid var(--surface-border);
+}
+
+.selector-search .pi-search {
+  color: var(--text-color-secondary);
+  font-size: var(--text-sm);
+}
+
+.selector-search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: var(--text-sm);
+  color: var(--text-color);
+  outline: none;
+}
+
+.selector-search-input::placeholder {
+  color: var(--text-color-secondary);
+}
+
+.selector-list {
+  max-height: 200px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.selector-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-sm) var(--space-md);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  min-height: 48px;
+  border-bottom: 1px solid var(--surface-border);
+}
+
+.selector-item:last-child {
+  border-bottom: none;
+}
+
+.selector-item:hover {
+  background: var(--surface-hover);
+}
+
+.selector-item.active {
+  background: var(--blue-50);
+  color: var(--color-primary);
+}
+
+.selector-item.active .pi-check {
+  color: var(--color-primary);
+}
+
+.selector-item-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.selector-item-name {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.selector-item-sub {
+  font-size: var(--text-xs);
+  color: var(--text-color-secondary);
+  margin-top: 2px;
+}
+
+.selector-item .pi-check {
+  font-size: var(--text-sm);
+  flex-shrink: 0;
+}
+
+.selector-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: var(--space-lg);
+  color: var(--text-color-secondary);
+  font-size: var(--text-sm);
+}
+
 /* ================================================
    Navigation Sections Container (scrollable)
    ================================================ */
@@ -543,6 +933,92 @@ const handleLogout = async () => {
   color: var(--text-color);
 }
 
+/* Dark mode: Selectors */
+[data-theme="dark"] .drawer-selectors {
+  background: var(--surface-ground);
+}
+
+[data-theme="dark"] .selector-label {
+  color: var(--text-color-secondary);
+}
+
+[data-theme="dark"] .selector-trigger {
+  background: var(--surface-card);
+  border-color: var(--surface-border);
+}
+
+[data-theme="dark"] .selector-trigger:hover {
+  background: var(--surface-hover);
+  border-color: var(--blue-400);
+}
+
+[data-theme="dark"] .selector-main {
+  color: var(--text-color);
+}
+
+[data-theme="dark"] .selector-sub {
+  color: var(--text-color-secondary);
+}
+
+[data-theme="dark"] .selector-trigger .pi-chevron-down {
+  color: var(--text-color-secondary);
+}
+
+[data-theme="dark"] .selector-panel {
+  background: var(--surface-card);
+  border-color: var(--surface-border);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .selector-search {
+  border-bottom-color: var(--surface-border);
+}
+
+[data-theme="dark"] .selector-search .pi-search {
+  color: var(--text-color-secondary);
+}
+
+[data-theme="dark"] .selector-search-input {
+  color: var(--text-color);
+}
+
+[data-theme="dark"] .selector-search-input::placeholder {
+  color: var(--text-color-secondary);
+}
+
+[data-theme="dark"] .selector-item {
+  border-bottom-color: var(--surface-border);
+}
+
+[data-theme="dark"] .selector-item:hover {
+  background: var(--surface-hover);
+}
+
+[data-theme="dark"] .selector-item.active {
+  background: var(--blue-900);
+  color: var(--blue-400);
+}
+
+[data-theme="dark"] .selector-item.active .pi-check {
+  color: var(--blue-400);
+}
+
+[data-theme="dark"] .selector-item-name {
+  color: var(--text-color);
+}
+
+[data-theme="dark"] .selector-item.active .selector-item-name {
+  color: var(--blue-400);
+}
+
+[data-theme="dark"] .selector-item-sub {
+  color: var(--text-color-secondary);
+}
+
+[data-theme="dark"] .selector-empty {
+  color: var(--text-color-secondary);
+}
+
 [data-theme="dark"] .drawer-link {
   color: var(--text-color);
 }
@@ -628,6 +1104,92 @@ const handleLogout = async () => {
     color: var(--text-color);
   }
 
+  /* Auto dark mode: Selectors */
+  :root:not([data-theme]) .drawer-selectors {
+    background: var(--surface-ground);
+  }
+
+  :root:not([data-theme]) .selector-label {
+    color: var(--text-color-secondary);
+  }
+
+  :root:not([data-theme]) .selector-trigger {
+    background: var(--surface-card);
+    border-color: var(--surface-border);
+  }
+
+  :root:not([data-theme]) .selector-trigger:hover {
+    background: var(--surface-hover);
+    border-color: var(--blue-400);
+  }
+
+  :root:not([data-theme]) .selector-main {
+    color: var(--text-color);
+  }
+
+  :root:not([data-theme]) .selector-sub {
+    color: var(--text-color-secondary);
+  }
+
+  :root:not([data-theme]) .selector-trigger .pi-chevron-down {
+    color: var(--text-color-secondary);
+  }
+
+  :root:not([data-theme]) .selector-panel {
+    background: var(--surface-card);
+    border-color: var(--surface-border);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  }
+
+  :root:not([data-theme]) .selector-search {
+    border-bottom-color: var(--surface-border);
+  }
+
+  :root:not([data-theme]) .selector-search .pi-search {
+    color: var(--text-color-secondary);
+  }
+
+  :root:not([data-theme]) .selector-search-input {
+    color: var(--text-color);
+  }
+
+  :root:not([data-theme]) .selector-search-input::placeholder {
+    color: var(--text-color-secondary);
+  }
+
+  :root:not([data-theme]) .selector-item {
+    border-bottom-color: var(--surface-border);
+  }
+
+  :root:not([data-theme]) .selector-item:hover {
+    background: var(--surface-hover);
+  }
+
+  :root:not([data-theme]) .selector-item.active {
+    background: var(--blue-900);
+    color: var(--blue-400);
+  }
+
+  :root:not([data-theme]) .selector-item.active .pi-check {
+    color: var(--blue-400);
+  }
+
+  :root:not([data-theme]) .selector-item-name {
+    color: var(--text-color);
+  }
+
+  :root:not([data-theme]) .selector-item.active .selector-item-name {
+    color: var(--blue-400);
+  }
+
+  :root:not([data-theme]) .selector-item-sub {
+    color: var(--text-color-secondary);
+  }
+
+  :root:not([data-theme]) .selector-empty {
+    color: var(--text-color-secondary);
+  }
+
   :root:not([data-theme]) .drawer-link {
     color: var(--text-color);
   }