ui phase 1

client/src/app/[locale]/(private-routes)/nurse/bank/page.tsx

@@ -2,8 +2,8 @@
 import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useSnackbar } from 'notistack';
-import { Box, Paper, Stack, TextField, Typography } from '@mui/material';
-import { AppButton, AppIcon, AppLoading, BankStatusPanel } from '@/components';
+import { Box, Stack, TextField, Typography } from '@mui/material';
+import { AppButton, AppLoading, BankStatusPanel, EmptyState } from '@/components';
 import { useNurseBankAccounts, useAddNurseBankAccount, useSetPrimaryBankAccount } from '@/services/nurse';
 import { isValidSheba } from '@/services/nurse/iban';
 import { deriveBankStatus } from '@/services/nurse/types';
@@ -102,18 +102,7 @@ export default function NurseBankPage() {
       })}
 
       {!isLoading && accounts.length === 0 ? (
-        <Paper
-          elevation={0}
-          sx={{ p: 3, textAlign: 'center', border: '1px dashed', borderColor: 'divider', borderRadius: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}
-        >
-          <AppIcon icon="bank" size={36} 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>
-        </Paper>
+        <EmptyState icon="bank" title={t('empty_title')} body={t('empty_body')} />
       ) : null}
 
       {showFormNow ? (