ui phase 1

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

@@ -2,18 +2,8 @@
 import { useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
-import {
-  Box,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Paper,
-  Skeleton,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { AppButton, AppIcon } from '@/components';
+import { Box, Dialog, DialogActions, DialogContent, DialogTitle, Skeleton, Stack, Typography } from '@mui/material';
+import { AppButton, EmptyState } from '@/components';
 import { AddressCard, AddressForm } from '@/components/geography';
 import {
   useAddresses,
@@ -115,31 +105,16 @@ export default function AddressesPage() {
           ))}
         </Stack>
       ) : isEmpty ? (
-        <Paper
-          elevation={0}
-          sx={{
-            p: 4,
-            textAlign: 'center',
-            border: '1px dashed',
-            borderColor: 'divider',
-            borderRadius: 2,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: 1.5,
-          }}
-        >
-          <AppIcon icon="location" size={40} color="var(--bal-primary)" />
-          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-            {t('empty_title')}
-          </Typography>
-          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {t('empty_body')}
-          </Typography>
-          <AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ mt: 1 }}>
-            {t('add')}
-          </AppButton>
-        </Paper>
+        <EmptyState
+          icon="location"
+          title={t('empty_title')}
+          body={t('empty_body')}
+          action={
+            <AppButton color="primary" variant="contained" startIcon="add" onClick={openAdd} sx={{ mt: 1 }}>
+              {t('add')}
+            </AppButton>
+          }
+        />
       ) : (
         <Stack sx={{ gap: 1.5 }}>
           {addresses.map((address) => (