Hydrate option stores; inventory UI refactor

Replace loadInitialOptions with hydrate() and improve OptionCacheStore (async API loads, query handling, cache subscription and clear). Comment initial loader calls and update AppInitializer to use hydrate. Normalize warehouse option mapping. Simplify compatibility tab imports and remove unused OnChanges. Move/clean basic-info section markup. Large refactor of inventory tab (HTML + TS): introduce local signal state, computed helpers, add/remove warehouse flow with restore-from-cache, inline editing, toggles, improved layout/styling and footer docs; remove tableHeaders dependency. Remove stray debug logs in sidebar and workspace.

Author: aledguedes

src/app/core/initialization/app-initializer.service.ts

@@ -22,12 +22,12 @@ export class AppInitializerService {
   async initialize(): Promise<void> {
     await Promise.all([
       this.oemCodeStore.loadInitial(),
-      this.statusStore.loadInitialOptions(),
-      this.unitSaleStore.loadInitialOptions(),
-      this.categoryStore.loadInitialOptions(),
-      this.warehouseStore.loadInitialOptions(),
-      this.partOriginStore.loadInitialOptions(),
-      this.manufacturerStore.loadInitialOptions(),
+      this.statusStore.hydrate(),
+      this.unitSaleStore.hydrate(),
+      this.categoryStore.hydrate(),
+      this.warehouseStore.hydrate(),
+      this.partOriginStore.hydrate(),
+      this.manufacturerStore.hydrate(),
     ]);
   }
 }

src/app/core/services/inital-loader-service.ts

@@ -12,8 +12,7 @@ export class InitialDataLoader {
   // etc.
 
   load(): void {
-    this.manufacturerStore.loadInitialOptions();
-
+    // this.manufacturerStore.loadInitialOptions();
     // this.categoryStore.loadInitialOptions();
     // this.countryStore.loadInitialOptions();
     // ...

src/app/core/store/base/option-cache-store.ts

@@ -15,12 +15,21 @@ export abstract class OptionCacheStore<TOption, TQueryCache> {
   protected abstract readonly INITIAL_KEY: string;
   protected abstract readonly QUERY_KEY: string;
 
+  /**
+   * Responsável por buscar as opções na API.
+   *
+   * O Store concreto pode sobrescrever o retorno do serviço,
+   * realizando aqui a adaptação necessária para TOption.
+   */
   protected abstract fetchOptions(query: GeneralOptionQuery): Observable<getAllResponse<TOption[]>>;
 
   protected readonly _options = signal<getAllResponse<TOption[]> | null>(null);
 
   readonly options = this._options.asReadonly();
 
+  /**
+   * Lista pronta para ser consumida pela aplicação.
+   */
   readonly optionList = computed(() => this._options()?.data ?? []);
 
   protected readonly defaultQuery = createDefaultQuery();
@@ -41,39 +50,50 @@ export abstract class OptionCacheStore<TOption, TQueryCache> {
   }
 
   /**
-   * Fluxo utilizado pelo carregamento inicial da aplicação.
+   * Hidrata o Store ao iniciar a aplicação.
+   *
+   * 1. Procura os dados iniciais no IndexedDB.
+   * 2. Se encontrar, popula o Signal.
+   * 3. Se não encontrar, busca na API e grava no cache.
    */
-  async loadInitialOptions(): Promise<void> {
+  async hydrate(): Promise<void> {
     const cached = await this.cache.get<getAllResponse<TOption[]>>(this.INITIAL_KEY);
 
     if (cached) {
       this._options.set(cached);
       return;
     }
 
-    this.loadFromApi(this.defaultQuery, this.INITIAL_KEY);
+    await this.loadFromApi(this.defaultQuery, this.INITIAL_KEY);
   }
 
   /**
-   * Fluxo público utilizado pelos componentes.
+   * Fluxo utilizado para buscas filtradas.
+   *
+   * Quando a consulta é a consulta padrão, volta a utilizar
+   * os dados iniciais.
    */
   async loadOptions(query: GeneralOptionQuery): Promise<void> {
     this.currentQuery = query;
 
     if (isDefaultQuery(query)) {
       await this.cache.remove(this.QUERY_KEY);
-      await this.loadInitialOptions();
+      await this.hydrate();
       return;
     }
 
     await this.loadQuery(query);
   }
 
+  /**
+   * Carrega uma consulta específica.
+   */
   private async loadQuery(query: GeneralOptionQuery): Promise<void> {
     const cached = await this.cache.get<TQueryCache>(this.QUERY_KEY);
 
     if (cached && this.isSameCachedQuery(cached, query)) {
       this._options.set(this.getCachedResponse(cached));
+
       return;
     }
 
@@ -92,7 +112,10 @@ export abstract class OptionCacheStore<TOption, TQueryCache> {
     });
   }
 
-  private loadFromApi(query: GeneralOptionQuery, cacheKey: string): void {
+  /**
+   * Busca dados na API e persiste no cache.
+   */
+  private async loadFromApi(query: GeneralOptionQuery, cacheKey: string): Promise<void> {
     this.fetchOptions(query).subscribe({
       next: async (response) => {
         this._options.set(response);
@@ -106,6 +129,10 @@ export abstract class OptionCacheStore<TOption, TQueryCache> {
     });
   }
 
+  /**
+   * Mantém o Signal sincronizado quando outra instância da
+   * aplicação altera o cache inicial.
+   */
   private subscribeToCacheChanges(): void {
     this.cache.subscribe(this.INITIAL_KEY, async () => {
       if (!isDefaultQuery(this.currentQuery)) {
@@ -120,6 +147,9 @@ export abstract class OptionCacheStore<TOption, TQueryCache> {
     });
   }
 
+  /**
+   * Limpa o estado do Store e os respectivos caches.
+   */
   async clear(): Promise<void> {
     this._options.set(null);
 

src/app/core/store/warehouse/warehouse-store.ts

@@ -25,8 +25,10 @@ export class WarehouseStore extends OptionCacheStore<SelectOption, WarehouseQuer
       map((response: getAllResponse<GeneralOption[]>) => {
         return {
           ...response,
-          data: response.data.map((option: GeneralOption) => ({
-            ...option,
+          data: response.data.map((option: any) => ({
+            value: option.id ?? option.value,
+            label: option.label,
+            sublabel: option.description ?? option.sublabel ?? '',
             disabled: false,
           })),
         };

src/app/features/catalog/components/product-form/compatibility-tab/compatibility-tab.ts

@@ -1,13 +1,4 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  output,
-  signal,
-  OnChanges,
-  SimpleChanges,
-} from '@angular/core';
+import { Component, ChangeDetectionStrategy, computed, input, output, signal } from '@angular/core';
 import { ButtonComponent } from '../../../../../design-system/button/button';
 import { AppIconComponent } from '../../../../../design-system/icon/app-icon';
 import { PaginationComponent } from '../../../../../design-system/pagination/pagination';
@@ -28,10 +19,7 @@ import { ManufacturerOption } from '../../../../../core/models/manufactureres/ma
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './compatibility-tab.html',
 })
-export class ProductCompatibilityTabComponent implements OnChanges {
-  ngOnChanges(changes: SimpleChanges): void {
-    console.log('[ProductCompatibilityTabComponent] ngOnChanges', changes);
-  }
+export class ProductCompatibilityTabComponent {
   readonly activeTab = input.required<FormTab>();
   readonly oemCodes = input<OemCode[]>([]);
   readonly selectedOemCodeIds = input<string[]>([]);

src/app/features/catalog/components/product-form/general-tab/sections/basic-info-section.ts

@@ -30,9 +30,17 @@ import { InputComponent } from '../../../../../../design-system/input/input';
           [error]="errors()['name']"
           (valueChange)="fieldChange.emit({ field: 'name', value: $event })"
         />
+        <!-- Descrição Curta -->
+        <app-input
+          label="Descrição Curta"
+          placeholder="Resumo comercial do produto em poucas palavras..."
+          [value]="formShortDescription()"
+          [disabled]="isReadOnly()"
+          (valueChange)="fieldChange.emit({ field: 'short_description', value: $event })"
+        />
 
         <!-- Slug -->
-        @if (!isCreateMode()) {
+        <!-- @if (!isCreateMode()) {
           <app-input
             label="Slug (URL amigável)"
             placeholder="Ex.: jogo-de-pastilhas-de-freio-dianteira"
@@ -41,18 +49,9 @@ import { InputComponent } from '../../../../../../design-system/input/input';
             helperText="Gerado automaticamente ou personalizável"
             (valueChange)="fieldChange.emit({ field: 'slug', value: $event })"
           />
-        }
+        } -->
       </div>
 
-      <!-- Descrição Curta -->
-      <app-input
-        label="Descrição Curta"
-        placeholder="Resumo comercial do produto em poucas palavras..."
-        [value]="formShortDescription()"
-        [disabled]="isReadOnly()"
-        (valueChange)="fieldChange.emit({ field: 'short_description', value: $event })"
-      />
-
       <!-- Descrição Detalhada -->
       <div>
         <label