drawer and upload

src/features/store-admin/PeopleDrawers.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, type FormEvent } from 'react';
+import { useState, type FormEvent } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Button } from '@astryxdesign/core/Button';
 import { HStack } from '@astryxdesign/core/HStack';
@@ -6,11 +6,12 @@ import { Selector } from '@astryxdesign/core/Selector';
 import { Text } from '@astryxdesign/core/Text';
 import { TextInput } from '@astryxdesign/core/TextInput';
 import { VStack } from '@astryxdesign/core/VStack';
-import { AlertTriangle, Check, Copy, X } from 'lucide-react';
+import { AlertTriangle, Check, Copy } from 'lucide-react';
 import { errorMessage } from '@/api/client';
 import { normaliseMobile, posUsersApi, staffApi, weekdayLabel } from '@/api/people';
 import type { PosRole, PosUser, StaffInfo, StaffShift, TenantLocation } from '@/api/types';
 import { queryKeys } from '@/queries/keys';
+import { Drawer } from './Drawer';
 import { branchLabel } from './format';
 
 /* ── Shell ───────────────────────────────────────────────────────────────── */
@@ -34,102 +35,17 @@ function Sheet({
   children: React.ReactNode;
   footer: React.ReactNode;
 }) {
-  useEffect(() => {
-    function onKeyDown(event: KeyboardEvent) {
-      if (event.key === 'Escape') onClose();
-    }
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [onClose]);
-
   return (
-    <div
-      role="dialog"
-      aria-modal="true"
-      aria-label={title}
-      style={{
-        position: 'fixed',
-        inset: 0,
-        zIndex: 70,
-        display: 'flex',
-        justifyContent: 'flex-end',
-      }}
+    <Drawer
+      title={title}
+      width={440}
+      onClose={onClose}
+      footer={footer}
+      isFooterSpread
+      {...(subtitle ? { subtitle } : {})}
     >
-      <button
-        type="button"
-        aria-label="Close"
-        onClick={onClose}
-        style={{
-          position: 'absolute',
-          inset: 0,
-          border: 0,
-          background: 'rgb(15 23 42 / .32)',
-          cursor: 'pointer',
-        }}
-      />
-      <div
-        className="dialog-panel"
-        style={{
-          position: 'relative',
-          width: 440,
-          maxWidth: '92vw',
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          background: 'var(--color-surface)',
-          borderLeft: '1px solid var(--color-line)',
-          boxShadow: '-24px 0 56px -12px rgb(15 23 42 / .18)',
-        }}
-      >
-        <HStack
-          justify="between"
-          align="start"
-          gap={1}
-          style={{ padding: 20, borderBottom: '1px solid var(--color-line)', flex: 'none' }}
-        >
-          <VStack gap={0}>
-            <Text type="label" size="lg" weight="semibold">
-              {title}
-            </Text>
-            {subtitle ? (
-              <Text type="body" size="xsm" color="secondary">
-                {subtitle}
-              </Text>
-            ) : null}
-          </VStack>
-          <button
-            type="button"
-            aria-label="Close"
-            onClick={onClose}
-            style={{
-              width: 30,
-              height: 30,
-              borderRadius: 10,
-              border: 0,
-              flex: 'none',
-              display: 'grid',
-              placeItems: 'center',
-              background: 'var(--color-surface-sunken)',
-              color: 'var(--color-ink-3)',
-              cursor: 'pointer',
-            }}
-          >
-            <X size={15} />
-          </button>
-        </HStack>
-
-        <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>{children}</div>
-
-        <HStack
-          justify="between"
-          align="center"
-          gap={1}
-          style={{ padding: 16, borderTop: '1px solid var(--color-line)', flex: 'none' }}
-        >
-          {footer}
-        </HStack>
-      </div>
-    </div>
+      {children}
+    </Drawer>
   );
 }