Add shared empty states, customer product filters, and SSO handoff across dashboards.

Standardize list empty UI, searchable country fields, customer-products filter row, password/login polish, and one-time business dashboard handoff from the customer app.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/pages/InstructionListPage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Play, Plus } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { EmptyState } from '../components/EmptyState'
 import { PageTitle } from '../components/PageTitle'
 import { InstructionCard } from '../components/InstructionCard'
 import { InstructionCommentsModal } from '../components/InstructionCommentsModal'
@@ -158,21 +159,12 @@ export function InstructionListPage() {
       {isLoading ? (
         <p className={styles.empty}>{t('instruction.list.loading')}</p>
       ) : videos.length === 0 ? (
-        <div className={styles.emptyState}>
-          <div className={styles.emptyIcon} aria-hidden="true">
-            <Play size={28} strokeWidth={1.75} />
-          </div>
-          <h3 className={styles.emptyTitle}>{t('instruction.list.empty')}</h3>
-          <p className={styles.emptyHint}>{t('instruction.list.emptyHint')}</p>
-          <button
-            type="button"
-            className={styles.emptyCta}
-            onClick={() => navigate('/instructions/new')}
-          >
-            <Plus size={18} strokeWidth={2.25} />
-            {t('instruction.list.emptyCta')}
-          </button>
-        </div>
+        <EmptyState
+          icon={Play}
+          message={t('instruction.list.empty')}
+          actionLabel={t('instruction.list.emptyCta')}
+          actionTo="/instructions/new"
+        />
       ) : (
         <>
           <div className={pageStyles.grid}>