Add tests for grouped stock list behavior and improve stock view mode UI and API enhancements

src/api/stock.js

@@ -21,7 +21,24 @@ export async function searchItemDefinitions(store, query) {
 }
 
 export async function listStockEntries(store, filters = {}) {
-  const payload = await apiRequest(store, getPath('items'));
+  const query = {};
+  const searchName = filters.searchName || filters.search_name;
+  if (searchName) {
+    query.search_name = searchName;
+  }
+  if (filters.limit !== undefined && filters.limit !== null) {
+    query.limit = filters.limit;
+  }
+  if (filters.offset !== undefined && filters.offset !== null) {
+    query.offset = filters.offset;
+  }
+  if (filters.cursor) {
+    query.cursor = filters.cursor;
+  }
+
+  const payload = await apiRequest(store, getPath('items'), {
+    query,
+  });
 
   if (Array.isArray(payload)) {
     return payload;
@@ -30,9 +47,26 @@ export async function listStockEntries(store, filters = {}) {
   return payload?.data || payload?.entries || payload?.items || [];
 }
 
-export async function listGroupedStockEntries(store) {
+export async function listGroupedStockEntries(store, options = {}) {
+  const query = {};
+  const expanded = options.expanded ?? 1;
+  query.expanded = expanded;
+  const searchName = options.searchName || options.search_name;
+  if (searchName) {
+    query.search_name = searchName;
+  }
+  if (options.limit !== undefined && options.limit !== null) {
+    query.limit = options.limit;
+  }
+  if (options.offset !== undefined && options.offset !== null) {
+    query.offset = options.offset;
+  }
+  if (options.cursor) {
+    query.cursor = options.cursor;
+  }
+
   const payload = await apiRequest(store, `${getPath('items')}/grouped`, {
-    query: { expanded: 1 },
+    query,
   });
 
   if (Array.isArray(payload)) {

src/styles/app.css

@@ -315,9 +315,63 @@ body {
 }
 
 .stock-view-switch {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.65rem;
+}
+
+.stock-view-switch-wrap {
+  min-width: min(100%, 38rem);
+}
+
+.stock-view-tab {
+  display: grid;
+  align-content: start;
+  gap: 0.2rem;
+  text-align: left;
+  border: 1px solid var(--lonc-border);
+  border-radius: 0.9rem;
+  background: rgba(255, 255, 255, 0.66);
+  color: inherit;
+  padding: 0.65rem 0.85rem;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    background-color 160ms ease,
+    transform 160ms ease;
+}
+
+.stock-view-tab:hover {
+  transform: translateY(-1px);
+  border-color: rgba(31, 75, 153, 0.24);
+  box-shadow: 0 8px 16px rgba(24, 42, 79, 0.08);
+}
+
+.stock-view-tab:focus-visible {
+  outline: 2px solid rgba(31, 75, 153, 0.4);
+  outline-offset: 2px;
+}
+
+.stock-view-tab-active {
+  border-color: rgba(31, 75, 153, 0.42);
+  background: rgba(31, 75, 153, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(31, 75, 153, 0.18);
+}
+
+.stock-view-tab-title {
+  font-weight: 700;
+  font-size: 0.95rem;
+}
+
+.stock-view-tab-subtitle {
+  font-size: 0.78rem;
+  color: var(--lonc-muted);
+}
+
+@media (max-width: 767.98px) {
+  .stock-view-switch {
+    grid-template-columns: 1fr;
+  }
 }
 
 .overview-row-single-open > [class*='col-'] {
@@ -598,6 +652,28 @@ button.legend-card:focus-visible {
 
 .grouped-stock-summary-meta {
   align-items: center;
+  row-gap: 0.35rem;
+}
+
+.grouped-stock-secondary-details {
+  border-top: 1px dashed rgba(31, 39, 64, 0.14);
+  padding-top: 0.75rem;
+}
+
+.grouped-stock-secondary-toggle {
+  border-radius: 0.85rem;
+  border: 1px solid var(--lonc-border);
+  padding: 0.5rem 0.75rem;
+  background: rgba(255, 255, 255, 0.66);
+}
+
+.grouped-stock-secondary-toggle > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.grouped-stock-secondary-toggle > summary::-webkit-details-marker {
+  display: none;
 }
 
 .grouped-stock-toggle-label {