#67 feat: implement /phone-numbers

Implement the /phone-numbers. see the current db structure, phone_numbers are implemented.

Currently do now allow the phone number changes on shop, just list the shops and the assigned phone numbers (phone numbers assigned on store creaton).

• Keep the current style
• disable the add phone number button
• disable the Assign button

@fszontagh I'm starting work on this issue now!

I'll implement the /phone-numbers page with the following approach:

1. Check the current database structure for phone_numbers
2. Create a read-only phone numbers page that lists shops and their assigned phone numbers
3. Keep the existing UI style consistent with other pages
4. Disable the "Add Phone Number" button
5. Disable the "Assign" button

Let me start by examining the database structure and existing code.

✅ Implementation Complete!

I've successfully implemented the /phone-numbers page with the following features:

Changes Made

1. Real Data Integration

• Modified PhoneNumbersContent.tsx to fetch real store data from the database via the /api/stores endpoint
• Displays actual stores with their assigned phone numbers (linked via phone_number_id foreign key)
• Shows phone number details: country, location, type (Free/Premium), and price

2. UI States

• Loading state: Shows spinner while fetching data
• Empty state: Displays helpful message when no stores are connected, with a button to navigate to /webshops
• Error handling: Shows error alerts if API requests fail

3. Disabled Buttons (as requested)

• ✅ "Add Phone Number" button - Disabled with gray styling and cursor-not-allowed
• ✅ "Assign" button - Disabled for stores without phone numbers
• ✅ Settings button - Disabled for stores with phone numbers (read-only mode)

4. Data Display

• Store name (or URL if name is not available)
• Platform name (Shopify, WooCommerce, ShopRenter)
• Phone number in international format
• Country and location information
• Type badge (Free or Premium based on price)
• Status badge:
  • 🟢 Active - Store is active and has a phone number
  • 🟡 No Phone Number - Store is active but no phone number assigned
  • 🔴 Inactive - Store is not active

5. Style Consistency

• Maintained the existing dark theme (slate-900/slate-800 background)
• Kept the same card layouts and table structure
• Used consistent spacing and typography
• Preserved the "Coming Soon" sections (carriers and countries)

Database Query

The implementation uses the existing /api/stores endpoint which:

• Joins with phone_numbers table via stores_phone_number_id_fkey
• Filters stores by authenticated user's user_id
• Returns phone number details when assigned

Commit

✅ Committed and pushed to main branch (commit: a956bbc)

The page is now fully functional and displays real data from your database!