Complete i18n coverage for payroll UI pages

.github/workflows/build.yml

@@ -7,7 +7,7 @@ on:
     branches: ["main"]
     types: [opened, synchronize, reopened, ready_for_review]
 
-# Retention policy: Keep successful runs for 30 days, failed/cancelled for 7 days
+# Retention is a repo setting, not a workflow key. Artifact steps set their own retention-days.
 env:
   CARGO_TERM_COLOR: always
   PKG_CONFIG_PATH: /usr/lib/pkgconfig
@@ -113,6 +113,3 @@ jobs:
       - name: Run Tests
         working-directory: ./frontend
         run: npm test --if-present
-
-# Workflow run retention settings
-retention-days: 30

.github/workflows/contract-release.yml

@@ -5,7 +5,7 @@ on:
     tags:
       - "v*"
 
-# Retention policy: Keep successful runs for 90 days, failed/cancelled for 14 days
+# Retention is a repo setting, not a workflow key.
 permissions: # required permissions for the workflow
   id-token: write
   contents: write # in order to create releases
@@ -27,6 +27,3 @@ jobs:
       package: "..."
     secrets:
       release_token: ${{ secrets.GITHUB_TOKEN }}
-
-# Workflow run retention settings
-retention-days: 90

.github/workflows/dapp-ipfs.yml

@@ -9,7 +9,7 @@ on:
 
   workflow_dispatch:
 
-# Retention policy: Keep successful runs for 30 days, failed/cancelled for 7 days
+# Retention is a repo setting, not a workflow key.
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
   cancel-in-progress: true
@@ -65,6 +65,3 @@ jobs:
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "- CID: ${{ steps.storacha.outputs.cid }}" >> "$GITHUB_STEP_SUMMARY"
           echo "- URL: ${{ steps.storacha.outputs.url }}" >> "$GITHUB_STEP_SUMMARY"
-
-# Workflow run retention settings
-retention-days: 30

.github/workflows/secrets-check.yml

@@ -10,7 +10,7 @@ on:
     paths:
       - "k8s/**"
 
-# Retention policy: Keep successful runs for 30 days, failed/cancelled for 7 days
+# Retention is a repo setting, not a workflow key.
 jobs:
   check-secrets-placeholders:
     name: Verify no real secrets in k8s manifests
@@ -20,6 +20,3 @@ jobs:
 
       - name: Check backend-secret.yaml for non-placeholder values
         run: ./scripts/check-k8s-secrets.sh
-
-# Workflow run retention settings
-retention-days: 30

frontend/src/components/AppLayout.tsx

@@ -4,6 +4,7 @@ import ConnectAccount from '../components/ConnectAccount';
 import AppNav from './AppNav';
 import ThemeToggle from './ThemeToggle';
 import { WalletExtensionBanner } from './WalletExtensionBanner';
+import { useTranslation } from 'react-i18next';
 
 // ── Page Wrapper ───────────────────────
 const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
@@ -13,6 +14,7 @@ const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
 // ── Layout ────────────────────────────
 const AppLayout: React.FC = () => {
   const location = useLocation();
+  const { t } = useTranslation();
 
   return (
     <div
@@ -36,7 +38,7 @@ const AppLayout: React.FC = () => {
             Pay<span className="text-(--accent)">D</span>
           </span>
           <span className="text-[9px] font-normal font-mono text-(--muted) tracking-widest uppercase border border-(--border-hi) px-1.5 py-0.5 rounded ml-0.5">
-            BETA
+            {t('appLayout.beta')}
           </span>
         </NavLink>
 
@@ -69,19 +71,19 @@ const AppLayout: React.FC = () => {
         style={{ borderColor: 'var(--border)' }}
       >
         <span>
-          © {new Date().getFullYear()} PayD — Licensed under the{' '}
+          {t('footer.licensePrefix', { year: new Date().getFullYear() })}{' '}
           <a
             href="http://www.apache.org/licenses/LICENSE-2.0"
             target="_blank"
             rel="noopener noreferrer"
             className="text-(--link) hover:underline"
           >
-            Apache License 2.0
+            {t('footer.licenseName')}
           </a>
         </span>
         <div className="flex items-center gap-1.5">
           <div className="w-1.5 h-1.5 rounded-full bg-(--accent2)" />
-          STELLAR NETWORK · MAINNET
+          {t('footer.networkStatus')}
         </div>
       </footer>
     </div>

frontend/src/components/AppNav.tsx

@@ -15,8 +15,10 @@ import {
   TrendingUp,
 } from 'lucide-react';
 import { Avatar } from './Avatar';
+import { useTranslation } from 'react-i18next';
 
 const AppNav: React.FC = () => {
+  const { t } = useTranslation();
   const [mobileOpen, setMobileOpen] = useState(false);
 
   // Mock user data - replace with actual user context
@@ -42,7 +44,7 @@ const AppNav: React.FC = () => {
         <span className="opacity-70">
           <Wallet className="w-4 h-4" />
         </span>
-        <span className="hidden sm:inline">Payroll</span>
+        <span className="hidden sm:inline">{t('nav.payroll')}</span>
       </NavLink>
 
       <NavLink
@@ -59,7 +61,7 @@ const AppNav: React.FC = () => {
         <span className="opacity-70">
           <User className="w-4 h-4" />
         </span>
-        <span className="hidden sm:inline">Employees</span>
+        <span className="hidden sm:inline">{t('nav.employees')}</span>
       </NavLink>
 
       <NavLink
@@ -75,7 +77,7 @@ const AppNav: React.FC = () => {
         <span className="opacity-70">
           <LayoutDashboard className="w-4 h-4" />
         </span>
-        My Portal
+        {t('nav.myPortal')}
       </NavLink>
 
       <NavLink
@@ -92,7 +94,7 @@ const AppNav: React.FC = () => {
         <span className="opacity-70">
           <FileText className="w-4 h-4" />
         </span>
-        <span className="hidden sm:inline">Reports</span>
+        <span className="hidden sm:inline">{t('nav.reports')}</span>
       </NavLink>
 
       <NavLink
@@ -109,7 +111,7 @@ const AppNav: React.FC = () => {
         <span className="opacity-70">
           <TrendingUp className="w-4 h-4" />
         </span>
-        <span className="hidden sm:inline">Cash Flow</span>
+        <span className="hidden sm:inline">{t('nav.cashFlow')}</span>
       </NavLink>
 
       <NavLink
@@ -126,7 +128,7 @@ const AppNav: React.FC = () => {
         <span className="opacity-70">
           <Globe className="w-4 h-4" />
         </span>
-        <span className="hidden sm:inline">Cross-Asset</span>
+        <span className="hidden sm:inline">{t('nav.crossAsset')}</span>
       </NavLink>
 
       <NavLink
@@ -142,7 +144,7 @@ const AppNav: React.FC = () => {
         <span className="opacity-70">
           <Activity className="w-4 h-4" />
         </span>
-        History
+        {t('nav.history')}
       </NavLink>
 
       <NavLink
@@ -159,7 +161,7 @@ const AppNav: React.FC = () => {
         <span className="opacity-70">
           <BarChart2 className="w-4 h-4" />
         </span>
-        <span className="hidden sm:inline">Bulk Payments</span>
+        <span className="hidden sm:inline">{t('nav.bulkPayments')}</span>
       </NavLink>
 
       <div className="w-px h-5 bg-(--border-hi) mx-2" />
@@ -174,7 +176,7 @@ const AppNav: React.FC = () => {
         }
       >
         <ShieldAlert className="w-4 h-4" />
-        Admin
+        {t('nav.admin')}
       </NavLink>
 
       <NavLink
@@ -189,15 +191,15 @@ const AppNav: React.FC = () => {
         onClick={() => setMobileOpen(false)}
       >
         <Code className="w-4 h-4" />
-        <span className="hidden sm:inline">debugger</span>
+        <span className="hidden sm:inline">{t('nav.debugger')}</span>
       </NavLink>
 
       <Link
         to="/help"
         onClick={() => setMobileOpen(false)}
         className="text-(--link) text-[13px] font-semibold hover:text-(--accent) transition"
       >
-        Help
+        {t('nav.help')}
       </Link>
     </>
   );
@@ -210,7 +212,7 @@ const AppNav: React.FC = () => {
 
         {/* Mobile menu button */}
         <button
-          aria-label="Toggle menu"
+          aria-label={t('nav.toggleMenu')}
           aria-expanded={mobileOpen}
           onClick={() => setMobileOpen(!mobileOpen)}
           className="lg:hidden p-3 rounded-md hover:bg-(--surface-hi) transition touch-manipulation"
@@ -259,7 +261,7 @@ const AppNav: React.FC = () => {
                   </span>
                 </div>
                 <button
-                  aria-label="Close menu"
+                  aria-label={t('nav.closeMenu')}
                   onClick={() => setMobileOpen(false)}
                   className="p-2 rounded-md hover:bg-(--surface-hi) transition touch-manipulation"
                   style={{ minHeight: '44px', minWidth: '44px' }}