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/customer/src/pages/AddMyProductPage.tsx

@@ -2,8 +2,6 @@ import { useEffect, useRef, useState } from 'react'
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import { Check, ClipboardList, Images, SlidersHorizontal } from 'lucide-react'
 import {
-  getLocationOptionLabel,
-  useLocale,
   useToast,
   type CityOption,
 } from '@meshkee/dashboard-ui'
@@ -94,7 +92,6 @@ function isPriceCurrency(
 
 export function AddMyProductPage() {
   const t = useT()
-  const { locale } = useLocale()
   const navigate = useNavigate()
   const { id } = useParams<{ id?: string }>()
   const isEdit = Boolean(id)
@@ -117,7 +114,6 @@ export function AddMyProductPage() {
 
   const [countries, setCountries] = useState<CityOption[]>([])
   const [cities, setCities] = useState<CityOption[]>([])
-  const [countrySlug, setCountrySlug] = useState('')
   const [countryId, setCountryId] = useState('')
   const [cityId, setCityId] = useState('')
   const [deliveryNote, setDeliveryNote] = useState('')
@@ -218,7 +214,6 @@ export function AddMyProductPage() {
             : 'IRT',
         )
         setPriceByExpert(product.priceByExpert === true)
-        setCountrySlug(product.countrySlug)
         setCountryId(product.countryId)
         setCityId(product.cityId)
         setDeliveryNote(product.deliveryNote ?? '')
@@ -280,9 +275,10 @@ export function AddMyProductPage() {
     return () => controller.abort()
   }, [categoryId, t])
 
-  async function handleCountryChange(nextSlug: string) {
-    setCountrySlug(nextSlug)
-    setCountryId(countries.find((item) => item.slug === nextSlug)?.id ?? '')
+  async function handleCountryChange(nextCountryId: string) {
+    setCountryId(nextCountryId)
+    const country = countries.find((item) => item.id === nextCountryId)
+    const nextSlug = country?.slug ?? ''
     setCityId('')
     setCities([])
     if (!nextSlug) return
@@ -657,19 +653,16 @@ export function AddMyProductPage() {
                   <div className={styles.locationRow}>
                     <div className={`${styles.field} ${styles.col2}`}>
                       <label htmlFor="add-country">{t('myProducts.fields.country')}</label>
-                      <select
+                      <CitySearchSelect
                         id="add-country"
-                        value={countrySlug}
+                        options={countries}
+                        value={countryId}
+                        onChange={(nextId) => void handleCountryChange(nextId)}
                         disabled={loadingLocations}
-                        onChange={(e) => void handleCountryChange(e.target.value)}
-                      >
-                        <option value="">{t('myProducts.fields.selectCountry')}</option>
-                        {countries.map((country) => (
-                          <option key={country.id} value={country.slug}>
-                            {getLocationOptionLabel(country, locale)}
-                          </option>
-                        ))}
-                      </select>
+                        placeholder={t('myProducts.fields.searchCountry')}
+                        noResultsLabel={t('myProducts.fields.noCountries')}
+                        clearLabel={t('myProducts.fields.clearCountry')}
+                      />
                     </div>
 
                     <div className={`${styles.field} ${styles.col4}`}>
@@ -679,7 +672,7 @@ export function AddMyProductPage() {
                         options={cities}
                         value={cityId}
                         onChange={setCityId}
-                        disabled={!countrySlug || loadingLocations}
+                        disabled={!countryId || loadingLocations}
                         placeholder={t('myProducts.fields.searchCity')}
                       />
                     </div>