ui improvement

src/features/store-admin/pages/DispatchPage.tsx

@@ -22,6 +22,7 @@ import {
 import type { DeliveryRow, OrderRow, TenantLocation } from '@/api/types';
 import { KpiCard } from '@/components/KpiCard';
 import { useSelection, type Selection } from '@/components/useSelection';
+import { Panel } from '@/components/Panel';
 import { TablePager } from '@/components/TablePager';
 import { usePaged } from '@/components/usePaged';
 import { AssignBar } from '../AssignBar';
@@ -461,7 +462,7 @@ export function DispatchBoard({ scope }: { scope: DispatchScope }) {
                     : {})}
                 />
               ) : mode === 'riders' || mode === 'stores' ? (
-                <Card padding={0} elevation="low" className="dispatch-card-elevated">
+                <Card padding={0} className="dispatch-card-elevated">
                   <VStack gap={1.5} padding={2}>
                     {/* No banner over the map.
                         A title, a stop count, a payload total and a pulsing
@@ -516,7 +517,7 @@ export function DispatchBoard({ scope }: { scope: DispatchScope }) {
                   </VStack>
                 </Card>
               ) : (
-                <Card padding={0} elevation="low">
+                <Card padding={0}>
                   <VStack gap={1} padding={4} align="center">
                     <span style={{ color: 'var(--color-ink-4)' }}>
                       <MapPin size={28} />
@@ -785,7 +786,7 @@ function EnhancedGroupDetail({
       {assignBar}
 
       {showMap ? (
-        <Card padding={0} elevation="low" className="dispatch-map-card">
+        <Card padding={0} className="dispatch-map-card">
           <VStack gap={1.5} padding={2}>
             <GroupMap stops={group.stops} groupName={group.name} locations={locations} />
 
@@ -836,7 +837,12 @@ function EnhancedGroupDetail({
           </VStack>
         </Card>
       ) : (
-        <Card padding={0} elevation="low">
+        <Panel
+      title="Stops"
+      count={paged.total}
+      countLabel="stops"
+      footer={<TablePager paged={paged} label="stops" />}
+    >
           <div className="table-scroll">
             <table className="stops-table">
               <thead>
@@ -921,8 +927,7 @@ function EnhancedGroupDetail({
               </tbody>
             </table>
           </div>
-          <TablePager paged={paged} label="stops" />
-        </Card>
+    </Panel>
       )}
     </VStack>
   );