ui phase 9

client/src/app/[locale]/(private-routes)/(customer)/addresses/page.tsx

@@ -2,8 +2,8 @@
 import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
-import { Box, Dialog, DialogActions, DialogContent, DialogTitle, Skeleton, Stack, Typography } from '@mui/material';
-import { AppButton, EmptyState } from '@/components';
+import { Box, Skeleton, Stack, Typography } from '@mui/material';
+import { AppButton, ConfirmDialog, EmptyState, ErrorState, FormDialogShell } from '@/components';
 import { AddressCard, AddressForm } from '@/components/geography';
 import {
   useAddresses,
@@ -16,9 +16,9 @@ import type { CreateAddressInput, CustomerAddress } from '@/services/addresses/t
 
 /**
  * The customer address book — a cached, invalidate-on-mutation list of the customer's saved
- * addresses with add/edit (the cascading dropdowns + map pin in a dialog), soft-delete (confirm),
- * and set-primary (exactly one badge). Loading skeleton + empty state both handled. The chosen
- * address later feeds the f7 booking request.
+ * addresses with add/edit (the cascading dropdowns + map pin in a full-screen-on-mobile dialog),
+ * soft-delete (confirm), and set-primary (exactly one badge). Loading skeleton, error (with
+ * retry), and empty states are all handled. The chosen address later feeds the f7 booking request.
  */
 export default function AddressesPage() {
   const t = useTranslations('address');
@@ -26,13 +26,14 @@ export default function AddressesPage() {
   const locale = useLocale();
   const { enqueueSnackbar } = useSnackbar();
 
-  const { data, isLoading } = useAddresses();
+  const { data, isLoading, isError, refetch } = useAddresses();
   const createAddress = useCreateAddress();
   const updateAddress = useUpdateAddress();
   const deleteAddress = useDeleteAddress();
   const setPrimary = useSetPrimaryAddress();
 
   const [formOpen, setFormOpen] = useState(false);
+  const [formDirty, setFormDirty] = useState(false);
   const [editing, setEditing] = useState<CustomerAddress | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<CustomerAddress | null>(null);
 
@@ -78,7 +79,7 @@ export default function AddressesPage() {
   };
 
   const addresses = data?.items ?? [];
-  const isEmpty = !isLoading && addresses.length === 0;
+  const isEmpty = !isLoading && !isError && addresses.length === 0;
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
@@ -91,7 +92,7 @@ export default function AddressesPage() {
             {t('subtitle')}
           </Typography>
         </Box>
-        {!isEmpty ? (
+        {!isEmpty && !isError ? (
           <AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ flexShrink: 0 }}>
             {t('add')}
           </AppButton>
@@ -104,6 +105,8 @@ export default function AddressesPage() {
             <Skeleton key={key} variant="rounded" height={104} />
           ))}
         </Stack>
+      ) : isError ? (
+        <ErrorState message={t('load_error')} retryLabel={tc('retry')} onRetry={() => refetch()} />
       ) : isEmpty ? (
         <EmptyState
           icon="location"
@@ -125,6 +128,9 @@ export default function AddressesPage() {
               addressLine={address.addressLine}
               isPrimary={address.isPrimary}
               primaryLabel={t('primary')}
+              hasPin={address.latitude != null && address.longitude != null}
+              pinSetLabel={t('pin_set')}
+              pinMissingLabel={t('pin_missing')}
               onEdit={() => openEdit(address)}
               onDelete={() => setDeleteTarget(address)}
               onSetPrimary={() =>
@@ -142,50 +148,50 @@ export default function AddressesPage() {
         </Stack>
       )}
 
-      <Dialog open={formOpen} onClose={closeForm} fullWidth maxWidth="sm">
-        <DialogTitle>{editing ? t('edit_title') : t('add_title')}</DialogTitle>
-        <DialogContent>
-          <Box sx={{ pt: 1 }}>
-            <AddressForm
-              key={editing?.id ?? 'new'}
-              initial={
-                editing
-                  ? {
-                      title: editing.title,
-                      provinceId: editing.provinceId,
-                      cityId: editing.cityId,
-                      districtId: editing.districtId,
-                      addressLine: editing.addressLine,
-                      latitude: editing.latitude,
-                      longitude: editing.longitude,
-                      isPrimary: editing.isPrimary,
-                    }
-                  : undefined
-              }
-              submitting={createAddress.isPending || updateAddress.isPending}
-              onSubmit={handleSubmit}
-              onCancel={closeForm}
-            />
-          </Box>
-        </DialogContent>
-      </Dialog>
+      <FormDialogShell
+        open={formOpen}
+        title={editing ? t('edit_title') : t('add_title')}
+        dirty={formDirty}
+        onClose={closeForm}
+        closeLabel={tc('close')}
+        discardTitle={tc('discard_title')}
+        discardBody={tc('discard_body')}
+        discardConfirmLabel={tc('discard_confirm')}
+        discardCancelLabel={tc('cancel')}
+      >
+        <AddressForm
+          key={editing?.id ?? 'new'}
+          initial={
+            editing
+              ? {
+                  title: editing.title,
+                  provinceId: editing.provinceId,
+                  cityId: editing.cityId,
+                  districtId: editing.districtId,
+                  addressLine: editing.addressLine,
+                  latitude: editing.latitude,
+                  longitude: editing.longitude,
+                  isPrimary: editing.isPrimary,
+                }
+              : undefined
+          }
+          submitting={createAddress.isPending || updateAddress.isPending}
+          onSubmit={handleSubmit}
+          onCancel={closeForm}
+          onDirtyChange={setFormDirty}
+        />
+      </FormDialogShell>
 
-      <Dialog open={Boolean(deleteTarget)} onClose={() => setDeleteTarget(null)}>
-        <DialogTitle>{t('delete_title')}</DialogTitle>
-        <DialogContent>
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {t('delete_body')}
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <AppButton variant="text" onClick={() => setDeleteTarget(null)}>
-            {tc('cancel')}
-          </AppButton>
-          <AppButton color="error" variant="contained" onClick={confirmDelete}>
-            {t('delete_confirm')}
-          </AppButton>
-        </DialogActions>
-      </Dialog>
+      <ConfirmDialog
+        open={Boolean(deleteTarget)}
+        title={t('delete_title')}
+        body={t('delete_body')}
+        confirmLabel={t('delete_confirm')}
+        cancelLabel={tc('cancel')}
+        confirmColor="error"
+        onClose={() => setDeleteTarget(null)}
+        onConfirm={confirmDelete}
+      />
     </Box>
   );
 }