Add customer edit modal with form validation

[steve8708]

Purpose

Implement the customers tab dashboard functionality as requested in BUI-2303. The user wanted a three-dots menu that opens a modal for editing customer details through a form interface.

Code changes

• Added EditCustomerModal component (src/crm/components/EditCustomerModal.tsx):

  • Created comprehensive form modal with Material-UI components
  • Implemented nested form handling for complex User object structure
  • Added form validation, loading states, and error handling
  • Organized fields into Personal Information and Address Information sections
  • Supports editing name, email, gender, phone, and full address details

• Enhanced Customers dashboard (src/crm/pages/Customers.tsx):

  • Integrated DataGrid with server-side pagination and sorting
  • Added search functionality with debounced input
  • Implemented customer stats cards with real API data
  • Added three-dots action button that opens the edit modal
  • Connected modal to API for saving customer updates
  • Added proper error handling and loading states

• Key features:

  • Real-time search and filtering
  • Sortable columns (name, location, age, etc.)
  • Avatar display and customer status chips
  • Responsive design with mobile-friendly layout
  • API integration for CRUD operationsTo clone this PR locally use the Github CLI with command gh pr checkout 26

🔗 Edit in Builder.io

👀 Preview Link

[builder-io-integration]

You can tag me at @builderio-bot for anything you want me to fix or change

[steve8708]

@builderio-bot always use import { useState } from React and not React.useState throughout

[builder-io-integration]

I will get right to work! You can track my progress in Builder.io

[builder-io-integration]

✅ Updated React import pattern across both files

Changes made:

• src/crm/pages/Customers.tsx: Updated to import { useState, useCallback, useMemo, useEffect } and use them directly
• src/crm/components/EditCustomerModal.tsx: Updated to import { useState, useEffect } and use them directly

Both files now follow the proper React import pattern using destructured imports instead of React.useState, React.useEffect, etc.