Polish businesses list: EN owner name, new themes, overflow actions menu.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-11 22:30:58 +04:30 · 2026-08-07 18:16:03 +03:30
parent c33cab40fe
commit 6771d75fae
8 changed files with 377 additions and 49 deletions
@@ -6,6 +6,10 @@ export const BUSINESS_PRIMARY_COLOR_IDS = [
  'purple',
  'light-blue',
  'dark-blue',
+  'brown',
+  'navy',
+  'dark-green',
+  'orange',
 ] as const

 export type BusinessPrimaryColorId = (typeof BUSINESS_PRIMARY_COLOR_IDS)[number]
@@ -106,7 +110,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
    ...CYAN_ACCENT,
  },
  'dark-blue': {
-    label: 'Dark Blue',
+    label: 'Blue',
    primary: '#3b82f6',
    primaryDark: '#2563eb',
    primaryLight: '#dbeafe',
@@ -115,6 +119,46 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
    primaryDarkRgb: '37 99 235',
    ...CYAN_ACCENT,
  },
+  brown: {
+    label: 'Brown',
+    primary: '#8b5e3c',
+    primaryDark: '#6f4a2f',
+    primaryLight: '#faf6f0',
+    primaryGlow: '#a67c52',
+    primaryRgb: '139 94 60',
+    primaryDarkRgb: '111 74 47',
+    ...CYAN_ACCENT,
+  },
+  navy: {
+    label: 'Dark Blue',
+    primary: '#1e3a8a',
+    primaryDark: '#172554',
+    primaryLight: '#e0e7ff',
+    primaryGlow: '#1e40af',
+    primaryRgb: '30 58 138',
+    primaryDarkRgb: '23 37 84',
+    ...CYAN_ACCENT,
+  },
+  'dark-green': {
+    label: 'Dark Green',
+    primary: '#166534',
+    primaryDark: '#14532d',
+    primaryLight: '#dcfce7',
+    primaryGlow: '#15803d',
+    primaryRgb: '22 101 52',
+    primaryDarkRgb: '20 83 45',
+    ...CYAN_ACCENT,
+  },
+  orange: {
+    label: 'Orange',
+    primary: '#ea580c',
+    primaryDark: '#c2410c',
+    primaryLight: '#ffedd5',
+    primaryGlow: '#f97316',
+    primaryRgb: '234 88 12',
+    primaryDarkRgb: '194 65 12',
+    ...PURPLE_ACCENT,
+  },
 }

 export function normalizeBusinessPrimaryColorId(value: unknown): BusinessPrimaryColorId {
@@ -6,6 +6,10 @@ export const BUSINESS_PRIMARY_COLOR_IDS = [
  'purple',
  'light-blue',
  'dark-blue',
+  'brown',
+  'navy',
+  'dark-green',
+  'orange',
 ] as const

 export type BusinessPrimaryColorId = (typeof BUSINESS_PRIMARY_COLOR_IDS)[number]
@@ -106,7 +110,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
    ...CYAN_ACCENT,
  },
  'dark-blue': {
-    label: 'Dark Blue',
+    label: 'Blue',
    primary: '#3b82f6',
    primaryDark: '#2563eb',
    primaryLight: '#dbeafe',
@@ -115,6 +119,46 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
    primaryDarkRgb: '37 99 235',
    ...CYAN_ACCENT,
  },
+  brown: {
+    label: 'Brown',
+    primary: '#8b5e3c',
+    primaryDark: '#6f4a2f',
+    primaryLight: '#faf6f0',
+    primaryGlow: '#a67c52',
+    primaryRgb: '139 94 60',
+    primaryDarkRgb: '111 74 47',
+    ...CYAN_ACCENT,
+  },
+  navy: {
+    label: 'Dark Blue',
+    primary: '#1e3a8a',
+    primaryDark: '#172554',
+    primaryLight: '#e0e7ff',
+    primaryGlow: '#1e40af',
+    primaryRgb: '30 58 138',
+    primaryDarkRgb: '23 37 84',
+    ...CYAN_ACCENT,
+  },
+  'dark-green': {
+    label: 'Dark Green',
+    primary: '#166534',
+    primaryDark: '#14532d',
+    primaryLight: '#dcfce7',
+    primaryGlow: '#15803d',
+    primaryRgb: '22 101 52',
+    primaryDarkRgb: '20 83 45',
+    ...CYAN_ACCENT,
+  },
+  orange: {
+    label: 'Orange',
+    primary: '#ea580c',
+    primaryDark: '#c2410c',
+    primaryLight: '#ffedd5',
+    primaryGlow: '#f97316',
+    primaryRgb: '234 88 12',
+    primaryDarkRgb: '194 65 12',
+    ...PURPLE_ACCENT,
+  },
 }

 export function normalizeBusinessPrimaryColorId(value: unknown): BusinessPrimaryColorId {
@@ -0,0 +1,75 @@
+.wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.trigger {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  transition: background 0.2s, color 0.2s;
+}
+
+.trigger:hover {
+  background: rgba(var(--primary-rgb) / 0.1);
+  color: var(--primary);
+}
+
+.triggerOpen {
+  background: rgba(var(--primary-rgb) / 0.1);
+  color: var(--primary);
+}
+
+.menu {
+  position: fixed;
+  z-index: 1200;
+  transform: translateX(-100%);
+  min-width: 168px;
+  padding: 6px;
+  border-radius: 10px;
+  border: 1px solid var(--glass-border);
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  box-shadow: var(--glass-shadow);
+  animation: menuIn 0.14s ease;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 9px 11px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-align: start;
+  transition: background 0.15s, color 0.15s;
+}
+
+.item:hover {
+  background: rgba(var(--primary-rgb) / 0.08);
+  color: var(--primary);
+}
+
+.itemDanger:hover {
+  background: rgba(239, 68, 68, 0.08);
+  color: #ef4444;
+}
+
+@keyframes menuIn {
+  from {
+    opacity: 0;
+    transform: translateX(-100%) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-100%) translateY(0);
+  }
+}
@@ -0,0 +1,156 @@
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Eraser, MoreHorizontal, Trash2, Users } from 'lucide-react'
+import styles from './BusinessActionsOverflowMenu.module.css'
+
+type PopoverPosition = {
+  top: number
+  left: number
+}
+
+interface BusinessActionsOverflowMenuProps {
+  businessName: string
+  onAllUsers: () => void
+  onWipeData: () => void
+  onRemove: () => void
+}
+
+export function BusinessActionsOverflowMenu({
+  businessName,
+  onAllUsers,
+  onWipeData,
+  onRemove,
+}: BusinessActionsOverflowMenuProps) {
+  const [open, setOpen] = useState(false)
+  const [popoverPos, setPopoverPos] = useState<PopoverPosition | null>(null)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+
+  function updatePopoverPosition() {
+    const rect = triggerRef.current?.getBoundingClientRect()
+    if (!rect) return
+
+    setPopoverPos({
+      top: rect.bottom + 8,
+      left: rect.right,
+    })
+  }
+
+  function toggleOpen() {
+    if (open) {
+      setOpen(false)
+      return
+    }
+
+    updatePopoverPosition()
+    setOpen(true)
+  }
+
+  useEffect(() => {
+    if (!open) return
+
+    function handleClickOutside(e: MouseEvent) {
+      const target = e.target as Node
+      if (wrapRef.current?.contains(target)) return
+      if (popoverRef.current?.contains(target)) return
+      setOpen(false)
+    }
+
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false)
+    }
+
+    function handleReposition() {
+      updatePopoverPosition()
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleEscape)
+    window.addEventListener('resize', handleReposition)
+    window.addEventListener('scroll', handleReposition, true)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+      window.removeEventListener('resize', handleReposition)
+      window.removeEventListener('scroll', handleReposition, true)
+    }
+  }, [open])
+
+  return (
+    <div className={styles.wrap} ref={wrapRef}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={`${styles.trigger} ${open ? styles.triggerOpen : ''}`}
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          toggleOpen()
+        }}
+        title="More actions"
+        aria-label={`More actions for ${businessName}`}
+        aria-haspopup="menu"
+        aria-expanded={open}
+      >
+        <MoreHorizontal size={16} />
+      </button>
+
+      {open &&
+        popoverPos &&
+        createPortal(
+          <div
+            ref={popoverRef}
+            className={styles.menu}
+            role="menu"
+            aria-label={`More actions for ${businessName}`}
+            style={{
+              top: popoverPos.top,
+              left: popoverPos.left,
+            }}
+          >
+            <button
+              type="button"
+              className={styles.item}
+              role="menuitem"
+              onClick={() => {
+                setOpen(false)
+                onAllUsers()
+              }}
+            >
+              <Users size={16} />
+              <span>All users</span>
+            </button>
+            <button
+              type="button"
+              className={`${styles.item} ${styles.itemDanger}`}
+              role="menuitem"
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                setOpen(false)
+                onWipeData()
+              }}
+            >
+              <Eraser size={16} />
+              <span>Wipe data</span>
+            </button>
+            <button
+              type="button"
+              className={`${styles.item} ${styles.itemDanger}`}
+              role="menuitem"
+              onClick={() => {
+                setOpen(false)
+                onRemove()
+              }}
+            >
+              <Trash2 size={16} />
+              <span>Remove</span>
+            </button>
+          </div>,
+          document.body,
+        )}
+    </div>
+  )
+}
@@ -43,8 +43,11 @@
  z-index: 1200;
  transform: translateX(-50%);
  display: flex;
+  flex-wrap: wrap;
  align-items: center;
+  justify-content: center;
  gap: 6px;
+  max-width: 280px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
@@ -462,13 +462,6 @@
  line-height: 1.3;
 }

-.ownerNameEn {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  line-height: 1.3;
-}
-
 .ownerPhone {
  font-size: 11px;
  font-weight: 500;
@@ -11,11 +11,10 @@ import {
  Plus,
  RotateCcw,
  Search,
-  Trash2,
  UserCog,
-  Users,
 } from 'lucide-react'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
+import { BusinessActionsOverflowMenu } from '../components/BusinessActionsOverflowMenu'
 import { ToggleSwitch } from '../components/ToggleSwitch'
 import { formatCellForDisplay, toE164CellNumber } from '../lib/cellNumber'
 import type {
@@ -962,12 +961,7 @@ export function BusinessesPage() {
                      </td>
                      <td className={styles.td}>
                        <div className={styles.ownerCell}>
-                          <div className={`${styles.ownerName} faText`} dir="rtl" lang="fa">
-                            {b.ownerName ?? '—'}
-                          </div>
-                          {b.ownerNameEn ? (
-                            <div className={styles.ownerNameEn}>{b.ownerNameEn}</div>
-                          ) : null}
+                          <div className={styles.ownerName}>{b.ownerNameEn || '—'}</div>
                          <div className={styles.ownerPhone}>
                            {b.ownerCellNumber ? formatCellForDisplay(b.ownerCellNumber) : '—'}
                          </div>
@@ -1027,15 +1021,6 @@ export function BusinessesPage() {
                          >
                            <UserCog size={16} />
                          </button>
-                          <button
-                            type="button"
-                            className={styles.controlBtn}
-                            onClick={() => goToBusinessUsers(b, 'all')}
-                            title="All users"
-                            aria-label="View all users"
-                          >
-                            <Users size={16} />
-                          </button>
                          <button
                            type="button"
                            className={styles.controlBtn}
@@ -1049,19 +1034,6 @@ export function BusinessesPage() {
                          >
                            <Database size={16} />
                          </button>
-                          <button
-                            type="button"
-                            className={`${styles.controlBtn} ${styles.controlBtnDanger}`}
-                            onClick={(e) => {
-                              e.preventDefault()
-                              e.stopPropagation()
-                              openPurge(b)
-                            }}
-                            title="Delete data"
-                            aria-label="Delete business data"
-                          >
-                            <Eraser size={16} />
-                          </button>
                          <button
                            type="button"
                            className={styles.controlBtn}
@@ -1080,15 +1052,12 @@ export function BusinessesPage() {
                          >
                            <Globe size={16} />
                          </button>
-                          <button
-                            type="button"
-                            className={`${styles.controlBtn} ${styles.controlBtnDanger}`}
-                            onClick={() => setRemoveTarget(b)}
-                            title="Remove"
-                            aria-label="Remove"
-                          >
-                            <Trash2 size={16} />
-                          </button>
+                          <BusinessActionsOverflowMenu
+                            businessName={b.name}
+                            onAllUsers={() => goToBusinessUsers(b, 'all')}
+                            onWipeData={() => openPurge(b)}
+                            onRemove={() => setRemoveTarget(b)}
+                          />
                        </div>
                      </td>
                    </tr>
@@ -6,6 +6,10 @@ export const BUSINESS_PRIMARY_COLOR_IDS = [
  'purple',
  'light-blue',
  'dark-blue',
+  'brown',
+  'navy',
+  'dark-green',
+  'orange',
 ] as const

 export type BusinessPrimaryColorId = (typeof BUSINESS_PRIMARY_COLOR_IDS)[number]
@@ -106,7 +110,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
    ...CYAN_ACCENT,
  },
  'dark-blue': {
-    label: 'Dark Blue',
+    label: 'Blue',
    primary: '#3b82f6',
    primaryDark: '#2563eb',
    primaryLight: '#dbeafe',
@@ -115,6 +119,46 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
    primaryDarkRgb: '37 99 235',
    ...CYAN_ACCENT,
  },
+  brown: {
+    label: 'Brown',
+    primary: '#8b5e3c',
+    primaryDark: '#6f4a2f',
+    primaryLight: '#faf6f0',
+    primaryGlow: '#a67c52',
+    primaryRgb: '139 94 60',
+    primaryDarkRgb: '111 74 47',
+    ...CYAN_ACCENT,
+  },
+  navy: {
+    label: 'Dark Blue',
+    primary: '#1e3a8a',
+    primaryDark: '#172554',
+    primaryLight: '#e0e7ff',
+    primaryGlow: '#1e40af',
+    primaryRgb: '30 58 138',
+    primaryDarkRgb: '23 37 84',
+    ...CYAN_ACCENT,
+  },
+  'dark-green': {
+    label: 'Dark Green',
+    primary: '#166534',
+    primaryDark: '#14532d',
+    primaryLight: '#dcfce7',
+    primaryGlow: '#15803d',
+    primaryRgb: '22 101 52',
+    primaryDarkRgb: '20 83 45',
+    ...CYAN_ACCENT,
+  },
+  orange: {
+    label: 'Orange',
+    primary: '#ea580c',
+    primaryDark: '#c2410c',
+    primaryLight: '#ffedd5',
+    primaryGlow: '#f97316',
+    primaryRgb: '234 88 12',
+    primaryDarkRgb: '194 65 12',
+    ...PURPLE_ACCENT,
+  },
 }

 export function normalizeBusinessPrimaryColorId(value: unknown): BusinessPrimaryColorId {