Pls check the following react code for any potential errors:

// src/App.js
import React, { useState, useEffect } from 'react';
import { db } from './db';

import { AiFillHome } from 'react-icons/ai';
import { FaUsers, FaEdit, FaTrash, FaCheck, FaUndo, FaSave } from 'react-icons/fa';

function App() {
  const [customers, setCustomers] = useState([]);
  const [selectedCustomer, setSelectedCustomer] = useState(null);
  const [input, setInput] = useState('');
  const [newCustomer, setNewCustomer] = useState('');
  const [editingCustomer, setEditingCustomer] = useState(null);
  const [editName, setEditName] = useState('');
  const [editingTodoIndex, setEditingTodoIndex] = useState(null);
  const [editTodoText, setEditTodoText] = useState('');
  const [customerSearchTerm, setCustomerSearchTerm] = useState('');
  const [todoFilter, setTodoFilter] = useState('all');
  const [isDarkMode, setIsDarkMode] = useState(() => {
    const storedThemePreference = localStorage.getItem('isDarkMode');
    return storedThemePreference ? JSON.parse(storedThemePreference) : false;
  });
  const [activeTab, setActiveTab] = useState('home');
  const [expandedCustomerIds, setExpandedCustomerIds] = useState([]);
  const [editingTodoInCustomersTab, setEditingTodoInCustomersTab] = useState(null);
  const [editTodoTextInCustomersTab, setEditTodoTextInCustomersTab] = useState('');
  const [deletingCustomerId, setDeletingCustomerId] = useState(null);
  const [deletingTodoIndex, setDeletingTodoIndex] = useState(null);
  const [deletingTodoInCustomersTab, setDeletingTodoInCustomersTab] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(10);

  useEffect(() => {
    loadCustomers();
  }, []);

  useEffect(() => {
    
    localStorage.setItem('isDarkMode', JSON.stringify(isDarkMode));
  }, [isDarkMode]);

  useEffect(() => {
    setCurrentPage(1);
  }, [customerSearchTerm, todoFilter]);

  const toggleDarkMode = () => {
    setIsDarkMode((prevMode) => !prevMode);
  };

  const paginate = (items) => {
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    return items.slice(indexOfFirstItem, indexOfLastItem);
  };
  
  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  const Pagination = ({ currentPage, totalPages, onPageChange, isDarkMode }) => {
    const pageNumbers = [];
    for (let i = 1; i <= totalPages; i++) {
      pageNumbers.push(i);
    }
  
    return (
      <div className="flex justify-center mt-4 space-x-2">
        <button
          className={`px-3 py-1 rounded-lg ${
            currentPage === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-600'
          } ${isDarkMode ? 'bg-blue-500 text-white' : 'bg-blue-500 text-white'}`}
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
        >
          Previous
        </button>
        {pageNumbers.map(number => (
          <button
            key={number}
            className={`px-3 py-1 rounded-lg ${
              currentPage === number
                ? 'bg-blue-600 text-white'
                : isDarkMode
                ? 'bg-gray-700 text-white hover:bg-blue-600'
                : 'bg-gray-200 text-gray-900 hover:bg-blue-600 hover:text-white'
            }`}
            onClick={() => onPageChange(number)}
          >
            {number}
          </button>
        ))}
        <button
          className={`px-3 py-1 rounded-lg ${
            currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-600'
          } ${isDarkMode ? 'bg-blue-500 text-white' : 'bg-blue-500 text-white'}`}
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
        >
          Next
        </button>
      </div>
    );
  };

  const loadCustomers = async () => {
    try {
      const allCustomers = await db.customers.toArray();
      setCustomers(allCustomers);
      if (allCustomers.length > 0) {
        
        const currentCustomer = allCustomers.find(
          (c) => c.id === selectedCustomer?.id
        );
        setSelectedCustomer(currentCustomer || null);
        
      } else {
        setSelectedCustomer(null);
      }
    } catch (error) {
      console.error('Error loading customers:', error);
    }
  };

  const addCustomer = async () => {
    if (newCustomer.trim()) {
      try {
        await db.customers.add({ name: newCustomer, todos: [] });
        await loadCustomers();
        setNewCustomer('');
      } catch (error) {
        console.error('Error adding customer:', error);
      }
    }
  };

  const startEditingCustomer = (customer) => {
    setEditingCustomer(customer);
    setEditName(customer.name);
  };

  const saveCustomerEdit = async () => {
    if (editName.trim() && editingCustomer) {
      try {
        await db.customers.update(editingCustomer.id, { name: editName });
        const updatedCustomer = { ...editingCustomer, name: editName };

        if (selectedCustomer && selectedCustomer.id === updatedCustomer.id) {
          setSelectedCustomer(updatedCustomer);
        }

        setCustomers((prevCustomers) =>
          prevCustomers.map((customer) =>
            customer.id === updatedCustomer.id ? updatedCustomer : customer
          )
        );

        setEditingCustomer(null);
        setEditName('');
      } catch (error) {
        console.error('Error updating customer:', error);
      }
    }
  };

  const toggleComplete = async (index) => {
    if (selectedCustomer) {
      try {
        const updatedTodos = selectedCustomer.todos.map((todo, i) =>
          i === index ? { ...todo, completed: !todo.completed } : todo
        );
        const updatedCustomer = { ...selectedCustomer, todos: updatedTodos };

        await db.customers.update(selectedCustomer.id, {
          todos: updatedTodos,
        });

        setSelectedCustomer(updatedCustomer);

        setCustomers((prevCustomers) =>
          prevCustomers.map((customer) =>
            customer.id === updatedCustomer.id ? updatedCustomer : customer
          )
        );
      } catch (error) {
        console.error('Error toggling todo:', error);
      }
    }
  };

  const addTodo = async () => {
    if (input.trim() && selectedCustomer) {
      try {
        const updatedTodos = [
          ...selectedCustomer.todos,
          { text: input, completed: false },
        ];
        const updatedCustomer = { ...selectedCustomer, todos: updatedTodos };

        await db.customers.update(selectedCustomer.id, {
          todos: updatedTodos,
        });

        setSelectedCustomer(updatedCustomer);

        setCustomers((prevCustomers) =>
          prevCustomers.map((customer) =>
            customer.id === updatedCustomer.id ? updatedCustomer : customer
          )
        );

        setInput('');
      } catch (error) {
        console.error('Error adding todo:', error);
      }
    }
  };

  const deleteTodo = async (index) => {
    if (selectedCustomer) {
      try {
        const updatedTodos = selectedCustomer.todos.filter(
          (_, i) => i !== index
        );
        const updatedCustomer = {
          ...selectedCustomer,
          todos: updatedTodos,
        };

        await db.customers.update(selectedCustomer.id, {
          todos: updatedTodos,
        });

        setSelectedCustomer(updatedCustomer);

        setCustomers((prevCustomers) =>
          prevCustomers.map((customer) =>
            customer.id === updatedCustomer.id ? updatedCustomer : customer
          )
        );

        setDeletingTodoIndex(null); 
      } catch (error) {
        console.error('Error deleting todo:', error);
      }
    }
  };

  const startEditingTodo = (index) => {
    setEditingTodoIndex(index);
    setEditTodoText(selectedCustomer.todos[index].text);
  };

  const saveTodoEdit = async () => {
    if (selectedCustomer && editingTodoIndex !== null) {
      try {
        const updatedTodos = selectedCustomer.todos.map((todo, i) =>
          i === editingTodoIndex ? { ...todo, text: editTodoText } : todo
        );
        const updatedCustomer = { ...selectedCustomer, todos: updatedTodos };

        await db.customers.update(selectedCustomer.id, {
          todos: updatedTodos,
        });

        setSelectedCustomer(updatedCustomer);

        setCustomers((prevCustomers) =>
          prevCustomers.map((customer) =>
            customer.id === updatedCustomer.id ? updatedCustomer : customer
          )
        );

        setEditingTodoIndex(null);
        setEditTodoText('');
      } catch (error) {
        console.error('Error editing todo:', error);
      }
    }
  };

  const deleteCustomer = async (customerId) => {
    try {
      await db.customers.delete(customerId);
      await loadCustomers();
      if (selectedCustomer?.id === customerId) {
        setSelectedCustomer(null);
      }
      
      setExpandedCustomerIds((prevState) =>
        prevState.filter((id) => id !== customerId)
      );
      setDeletingCustomerId(null); 
    } catch (error) {
      console.error('Error deleting customer:', error);
    }
  };

  const selectCustomerById = async (id) => {
    if (id) {
      try {
        const customer = await db.customers.get(Number(id));
        setSelectedCustomer(customer);
      } catch (error) {
        console.error('Error selecting customer:', error);
      }
    } else {
      setSelectedCustomer(null);
    }
  };

  const toggleCustomerExpansion = (customerId) => {
    setExpandedCustomerIds((prevState) =>
      prevState.includes(customerId)
        ? prevState.filter((id) => id !== customerId)
        : [...prevState, customerId]
    );
  };

  const startEditingTodoInCustomersTab = (customerId, index, todoText) => {
    setEditingTodoInCustomersTab({ customerId, index });
    setEditTodoTextInCustomersTab(todoText);
  };

  const saveTodoEditInCustomersTab = async () => {
    if (editingTodoInCustomersTab) {
      const { customerId, index } = editingTodoInCustomersTab;
      try {
        const customer = await db.customers.get(customerId);
        if (customer) {
          const updatedTodos = customer.todos.map((todo, i) =>
            i === index ? { ...todo, text: editTodoTextInCustomersTab } : todo
          );
          const updatedCustomer = { ...customer, todos: updatedTodos };

          await db.customers.update(customerId, {
            todos: updatedTodos,
          });

          setCustomers((prevCustomers) =>
            prevCustomers.map((c) =>
              c.id === customerId ? updatedCustomer : c
            )
          );

          if (selectedCustomer && selectedCustomer.id === customerId) {
            setSelectedCustomer(updatedCustomer);
          }

          setEditingTodoInCustomersTab(null);
          setEditTodoTextInCustomersTab('');
        }
      } catch (error) {
        console.error('Error editing todo:', error);
      }
    }
  };

  const toggleCompleteInCustomersTab = async (customerId, index) => {
    try {
      const customer = await db.customers.get(customerId);
      if (customer) {
        const updatedTodos = customer.todos.map((todo, i) =>
          i === index ? { ...todo, completed: !todo.completed } : todo
        );
        const updatedCustomer = { ...customer, todos: updatedTodos };

        await db.customers.update(customerId, {
          todos: updatedTodos,
        });

        setCustomers((prevCustomers) =>
          prevCustomers.map((c) =>
            c.id === customerId ? updatedCustomer : c
          )
        );

        if (selectedCustomer && selectedCustomer.id === customerId) {
          setSelectedCustomer(updatedCustomer);
        }
      }
    } catch (error) {
      console.error('Error toggling todo completion:', error);
    }
  };

  const exportDataToJson = () => {
    try {
      const timestamp = new Date().toISOString().split('.')[0].replace(/[:]/g, '-');
      
      const jsonData = JSON.stringify(customers, null, 2);
      
      const blob = new Blob([jsonData], { type: 'application/json' });
      
      const url = URL.createObjectURL(blob);
      
      const link = document.createElement('a');
      link.href = url;
      
      const filename = `trackify-export-${timestamp}.json`;
      link.download = filename;
      
      document.body.appendChild(link);
      link.click();
      
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error('Error exporting data:', error);
    }
  };

  const deleteTodoInCustomersTab = async (customerId, index) => {
    try {
      const customer = await db.customers.get(customerId);
      if (customer) {
        const updatedTodos = customer.todos.filter((_, i) => i !== index);
        const updatedCustomer = { ...customer, todos: updatedTodos };

        await db.customers.update(customerId, {
          todos: updatedTodos,
        });

        setCustomers((prevCustomers) =>
          prevCustomers.map((c) =>
            c.id === customerId ? updatedCustomer : c
          )
        );

        if (selectedCustomer && selectedCustomer.id === customerId) {
          setSelectedCustomer(updatedCustomer);
        }

        setDeletingTodoInCustomersTab(null); 
      }
    } catch (error) {
      console.error('Error deleting todo:', error);
    }
  };

  return (
    <div
      className={`min-h-screen ${
        isDarkMode ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-900'
      }`}
    >
      <div
        className={`p-4 md:p-6 max-w-full md:max-w-lg lg:max-w-2xl mx-auto ${
          isDarkMode ? 'bg-gray-800' : 'bg-white'
        }`}
      >
        {/* Theme Toggle Button and Heading */}
        <div className="flex justify-between mb-4">
          <h1 className="text-2xl font-bold">Trackify</h1>
          <div className="flex items-center space-x-2">
            <button
              className={`p-2 rounded-lg hover:bg-blue-600 ${
                isDarkMode ? 'bg-blue-500 text-white' : 'bg-blue-500 text-white'
              }`}
              onClick={exportDataToJson}
              aria-label="Export Data"
            >
              Export Data
            </button>
            <button
              className="p-2 rounded-full focus:outline-none"
              onClick={toggleDarkMode}
              aria-label="Toggle Dark Mode"
            >
              {isDarkMode ? '🌞' : '🌜'}
            </button>
          </div>
        </div>

        {/* Tab Navigation */}
        <div className="mb-4">
          <nav className="flex">
            <button
              className={`flex-1 p-2 text-center flex items-center justify-center ${
                activeTab === 'home'
                  ? 'border-b-2 border-blue-500 font-bold text-blue-500'
                  : 'border-b-2 border-transparent'
              }`}
              onClick={() => setActiveTab('home')}
              aria-label="Home Tab"
            >
              <AiFillHome
                className="mr-2"
                size={24}
                color={
                  activeTab === 'home'
                    ? '#3B82F6'
                    : isDarkMode
                    ? '#FFFFFF'
                    : '#000000'
                }
              />
              Home
            </button>
            <button
              className={`flex-1 p-2 text-center flex items-center justify-center ${
                activeTab === 'customers'
                  ? 'border-b-2 border-blue-500 font-bold text-blue-500'
                  : 'border-b-2 border-transparent'
              }`}
              onClick={() => setActiveTab('customers')}
              aria-label="Customers Tab"
            >
              <FaUsers
                className="mr-2"
                size={24}
                color={
                  activeTab === 'customers'
                    ? '#3B82F6'
                    : isDarkMode
                    ? '#FFFFFF'
                    : '#000000'
                }
              />
              Customers
            </button>
          </nav>
        </div>

        {/* Content Area */}
        <div className="overflow-auto">
          {/* Tab Content */}
          {activeTab === 'home' && (
            <>
              {/* Add Customer Section */}
              <div className="mb-4">
                <label
                  className={`block ${
                    isDarkMode ? 'text-white' : 'text-gray-700'
                  }`}
                >
                  Add Customer:
                </label>
                <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-2 mb-2">
                  <input
                    type="text"
                    className={`p-2 border rounded-lg focus:outline-none flex-grow ${
                      isDarkMode
                        ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
                        : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'
                    }`}
                    value={newCustomer}
                    onChange={(e) => setNewCustomer(e.target.value)}
                    placeholder="Enter customer name"
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        e.preventDefault();
                        addCustomer();
                      }
                    }}
                  />
                  <button
                    className={`p-2 rounded-lg hover:bg-blue-600 ${
                      isDarkMode
                        ? 'bg-blue-500 text-white'
                        : 'bg-blue-500 text-white'
                    }`}
                    onClick={addCustomer}
                  >
                    Add
                  </button>
                </div>

                {/* Select Customer Dropdown */}
                {customers.length > 0 && (
                  <>
                    <label
                      className={`block ${
                        isDarkMode ? 'text-white' : 'text-gray-700'
                      }`}
                    >
                      Select Customer:
                    </label>
                    <select
                      className={`w-full p-2 border rounded-lg focus:outline-none ${
                        isDarkMode
                          ? 'bg-gray-700 border-gray-600 text-white'
                          : 'bg-white border-gray-300 text-gray-900'
                      }`}
                      value={selectedCustomer ? selectedCustomer.id : ''}
                      onChange={(e) => selectCustomerById(e.target.value)}
                    >
                      <option value="">-- Select a customer --</option>
                      {customers.map((customer) => (
                        <option key={customer.id} value={customer.id}>
                          {customer.name}
                        </option>
                      ))}
                    </select>
                  </>
                )}
              </div>

              {/* Todo Section */}
              {selectedCustomer && (
                <div>
                  {/* Add Todo Input */}
                  <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-2 mb-4">
                    <input
                      type="text"
                      className={`p-2 border rounded-lg focus:outline-none flex-grow ${
                        isDarkMode
                          ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
                          : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'
                      }`}
                      value={input}
                      onChange={(e) => setInput(e.target.value)}
                      placeholder="Add a new todo"
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') {
                          e.preventDefault();
                          addTodo();
                        }
                      }}
                    />
                    <button
                      className={`p-2 rounded-lg hover:bg-blue-600 ${
                        isDarkMode
                          ? 'bg-blue-500 text-white'
                          : 'bg-blue-500 text-white'
                      }`}
                      onClick={addTodo}
                    >
                      Add
                    </button>
                  </div>

                  {/* Todo Filter Controls */}
                  <div className="mb-4">
                    <label
                      className={`block ${
                        isDarkMode ? 'text-white' : 'text-gray-700'
                      }`}
                    >
                      Filter Todos:
                    </label>
                    <div className="flex flex-wrap space-x-0 space-y-2 md:space-y-0 md:space-x-2">
                      {['all', 'completed', 'pending'].map((filter) => (
                        <button
                          key={filter}
                          className={`p-2 rounded-lg focus:outline-none ${
                            todoFilter === filter
                              ? 'bg-blue-500 text-white'
                              : isDarkMode
                              ? 'bg-gray-700 text-white'
                              : 'bg-gray-200 text-gray-900'
                          }`}
                          onClick={() => setTodoFilter(filter)}
                        >
                          {filter.charAt(0).toUpperCase() + filter.slice(1)}
                        </button>
                      ))}
                    </div>
                  </div>

                  {/* Filtered Todos List */}
                    {(() => {
                      let filteredTodos = selectedCustomer.todos;
                      if (todoFilter === 'completed') {
                        filteredTodos = filteredTodos.filter((todo) => todo.completed);
                      } else if (todoFilter === 'pending') {
                        filteredTodos = filteredTodos.filter((todo) => !todo.completed);
                      }
                      const paginatedTodos = paginate(filteredTodos);
                      
                      return (
                        <>
                          <ul>
                            {paginatedTodos.map((todo, index) => (
                              <li
                                key={`${selectedCustomer.id}-${index}-${todo.text}`}
                                className={`flex items-center justify-between p-2 border-b ${
                                  isDarkMode ? 'border-gray-600' : 'border-gray-200'
                                }`}
                              >
                                {editingTodoIndex === index ? (
                                  <div className="flex items-center flex-grow">
                                    <input
                                      type="text"
                                      className={`flex-grow p-1 border rounded focus:outline-none ${
                                        isDarkMode
                                          ? 'bg-gray-700 border-gray-600 text-white'
                                          : 'bg-white border-gray-300 text-gray-900'
                                      }`}
                                      value={editTodoText}
                                      onChange={(e) => setEditTodoText(e.target.value)}
                                      onKeyDown={(e) => {
                                        if (e.key === 'Enter') {
                                          e.preventDefault();
                                          saveTodoEdit();
                                        }
                                      }}
                                    />
                                    <button
                                      className="text-green-500 ml-2 hover:text-green-600"
                                      onClick={saveTodoEdit}
                                      aria-label="Save Todo"
                                    >
                                      <FaSave />
                                    </button>
                                  </div>
                                ) : (
                                  <>
                                    <span
                                      className={`flex-grow ${
                                        todo.completed ? 'line-through text-gray-500' : ''
                                      }`}
                                    >
                                      {todo.text}
                                    </span>
                                    {deletingTodoIndex === index ? (
                                      <div className="flex items-center space-x-2">
                                        <span>Confirm delete?</span>
                                        <button
                                          className="text-green-500 hover:text-green-600"
                                          onClick={() => deleteTodo(index)}
                                        >
                                          Yes
                                        </button>
                                        <button
                                          className="text-red-500 hover:text-red-600"
                                          onClick={() => setDeletingTodoIndex(null)}
                                        >
                                          No
                                        </button>
                                      </div>
                                    ) : (
                                      <div className="flex items-center space-x-2">
                                        <button
                                          className="text-blue-500 hover:text-blue-600"
                                          onClick={() => startEditingTodo(index)}
                                          aria-label="Edit Todo"
                                        >
                                          <FaEdit />
                                        </button>
                                        <button
                                          className="text-green-500 hover:text-green-600"
                                          onClick={() => toggleComplete(index)}
                                          aria-label={todo.completed ? 'Undo Todo' : 'Complete Todo'}
                                        >
                                          {todo.completed ? <FaUndo /> : <FaCheck />}
                                        </button>
                                        <button
                                          className="text-red-500 hover:text-red-600"
                                          onClick={() => setDeletingTodoIndex(index)}
                                          aria-label="Delete Todo"
                                        >
                                          <FaTrash />
                                        </button>
                                      </div>
                                    )}
                                  </>
                                )}
                              </li>
                            ))}
                          </ul>
                          <Pagination
                            currentPage={currentPage}
                            totalPages={Math.ceil(filteredTodos.length / itemsPerPage)}
                            onPageChange={handlePageChange}
                            isDarkMode={isDarkMode}
                          />
                        </>
                      );
                    })()}
                </div>
              )}
            </>
          )}

          {activeTab === 'customers' && (
            <>
              <div className="mt-4">
                {/* Customer Search Input */}
                {customers.length > 0 && (
                  <div className="mb-4">
                    <label
                      className={`block ${
                        isDarkMode ? 'text-white' : 'text-gray-700'
                      }`}
                    >
                      Search Customer:
                    </label>
                    <input
                      type="text"
                      className={`w-full p-2 border rounded-lg focus:outline-none mb-2 ${
                        isDarkMode
                          ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
                          : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'
                      }`}
                      placeholder="Search by customer name"
                      value={customerSearchTerm}
                      onChange={(e) => setCustomerSearchTerm(e.target.value)}
                    />
                  </div>
                )}

                {/* Filtered Customers List */}
                  <ul>
                    {paginate(
                      customers.filter((customer) =>
                        customer.name.toLowerCase().includes(customerSearchTerm.toLowerCase())
                      )
                    ).map((customer) => {
                      const totalTodos = customer.todos.length;
                      const pendingTodos = customer.todos.filter(
                        (todo) => !todo.completed
                      ).length;

                      return (
                        <li
                          key={customer.id}
                          className={`p-2 border-b ${
                            isDarkMode ? 'border-gray-600' : 'border-gray-200'
                          }`}
                        >
                          {editingCustomer && editingCustomer.id === customer.id ? (
                            <div className="flex items-center flex-grow mr-2">
                              <input
                                type="text"
                                className={`flex-grow p-1 border rounded focus:outline-none ${
                                  isDarkMode
                                    ? 'bg-gray-700 border-gray-600 text-white'
                                    : 'bg-white border-gray-300 text-gray-900'
                                }`}
                                value={editName}
                                onChange={(e) => setEditName(e.target.value)}
                                onKeyDown={(e) => {
                                  if (e.key === 'Enter') {
                                    e.preventDefault();
                                    saveCustomerEdit();
                                  }
                                }}
                              />
                              <button
                                className="text-green-500 ml-2 hover:text-green-600"
                                onClick={saveCustomerEdit}
                                aria-label="Save Customer"
                              >
                                <FaSave />
                              </button>
                            </div>
                          ) : (
                            <>
                              <div className="flex items-center justify-between flex-wrap">
                                <div className="flex items-center space-x-2">
                                  <span className="font-medium">{customer.name}</span>
                                  <span
                                    className={`text-sm ${
                                      isDarkMode ? 'text-gray-400' : 'text-gray-600'
                                    }`}
                                  >
                                    ({pendingTodos} pending / {totalTodos} total)
                                  </span>
                                </div>
                                <div className="flex items-center space-x-2">
                                  <button
                                    className="text-blue-500 hover:text-blue-600"
                                    onClick={() => startEditingCustomer(customer)}
                                    aria-label="Edit Customer"
                                  >
                                    <FaEdit />
                                  </button>
                                  <button
                                    className="text-blue-500 hover:text-blue-600"
                                    onClick={() => toggleCustomerExpansion(customer.id)}
                                    aria-label={
                                      expandedCustomerIds.includes(customer.id)
                                        ? 'Collapse Customer'
                                        : 'Expand Customer'
                                    }
                                  >
                                    {expandedCustomerIds.includes(customer.id) ? '-' : '+'}
                                  </button>
                                  {deletingCustomerId === customer.id ? (
                                    <div className="flex items-center space-x-2">
                                      <span>Confirm delete?</span>
                                      <button
                                        className="text-green-500 hover:text-green-600"
                                        onClick={() => deleteCustomer(customer.id)}
                                      >
                                        Yes
                                      </button>
                                      <button
                                        className="text-red-500 hover:text-red-600"
                                        onClick={() => setDeletingCustomerId(null)}
                                      >
                                        No
                                      </button>
                                    </div>
                                  ) : (
                                    <button
                                      className="text-red-500 hover:text-red-600"
                                      onClick={() => setDeletingCustomerId(customer.id)}
                                      aria-label="Delete Customer"
                                    >
                                      <FaTrash />
                                    </button>
                                  )}
                                </div>
                              </div>
                              {expandedCustomerIds.includes(customer.id) && (
                                <div className="mt-2">
                                  <ul className="space-y-1">
                                    {customer.todos.map((todo, index) => (
                                      <li
                                        key={index}
                                        className={`flex items-center justify-between p-2 rounded ${
                                          isDarkMode ? 'bg-gray-700' : 'bg-gray-100'
                                        }`}
                                      >
                                        {editingTodoInCustomersTab?.customerId === customer.id &&
                                        editingTodoInCustomersTab?.index === index ? (
                                          <div className="flex items-center flex-grow">
                                            <input
                                              type="text"
                                              className={`flex-grow p-1 border rounded focus:outline-none ${
                                                isDarkMode
                                                  ? 'bg-gray-600 border-gray-500 text-white'
                                                  : 'bg-white border-gray-300 text-gray-900'
                                              }`}
                                              value={editTodoTextInCustomersTab}
                                              onChange={(e) =>
                                                setEditTodoTextInCustomersTab(e.target.value)
                                              }
                                              onKeyDown={(e) => {
                                                if (e.key === 'Enter') {
                                                  e.preventDefault();
                                                  saveTodoEditInCustomersTab();
                                                }
                                              }}
                                            />
                                            <button
                                              className="text-green-500 ml-2 hover:text-green-600"
                                              onClick={saveTodoEditInCustomersTab}
                                              aria-label="Save Todo"
                                            >
                                              <FaSave />
                                            </button>
                                          </div>
                                        ) : (
                                          <>
                                            <span
                                              className={
                                                todo.completed ? 'line-through text-gray-500' : ''
                                              }
                                            >
                                              {todo.text}
                                            </span>
                                            {deletingTodoInCustomersTab?.customerId ===
                                              customer.id &&
                                            deletingTodoInCustomersTab?.index === index ? (
                                              <div className="flex items-center space-x-2">
                                                <span>Confirm delete?</span>
                                                <button
                                                  className="text-green-500 hover:text-green-600"
                                                  onClick={() =>
                                                    deleteTodoInCustomersTab(customer.id, index)
                                                  }
                                                >
                                                  Yes
                                                </button>
                                                <button
                                                  className="text-red-500 hover:text-red-600"
                                                  onClick={() =>
                                                    setDeletingTodoInCustomersTab(null)
                                                  }
                                                >
                                                  No
                                                </button>
                                              </div>
                                            ) : (
                                              <div className="flex items-center space-x-2">
                                                <button
                                                  className="text-blue-500 hover:text-blue-600"
                                                  onClick={() =>
                                                    startEditingTodoInCustomersTab(
                                                      customer.id,
                                                      index,
                                                      todo.text
                                                    )
                                                  }
                                                  aria-label="Edit Todo"
                                                >
                                                  <FaEdit />
                                                </button>
                                                <button
                                                  className="text-green-500 hover:text-green-600"
                                                  onClick={() =>
                                                    toggleCompleteInCustomersTab(
                                                      customer.id,
                                                      index
                                                    )
                                                  }
                                                  aria-label={
                                                    todo.completed
                                                      ? 'Undo Todo'
                                                      : 'Complete Todo'
                                                  }
                                                >
                                                  {todo.completed ? <FaUndo /> : <FaCheck />}
                                                </button>
                                                <button
                                                  className="text-red-500 hover:text-red-600"
                                                  onClick={() =>
                                                    setDeletingTodoInCustomersTab({
                                                      customerId: customer.id,
                                                      index,
                                                    })
                                                  }
                                                  aria-label="Delete Todo"
                                                >
                                                  <FaTrash />
                                                </button>
                                              </div>
                                            )}
                                          </>
                                        )}
                                      </li>
                                    ))}
                                  </ul>
                                </div>
                              )}
                            </>
                          )}
                        </li>
                      );
                    })}
                  </ul>
                  <Pagination
                    currentPage={currentPage}
                    totalPages={Math.ceil(
                      customers.filter((customer) =>
                        customer.name.toLowerCase().includes(customerSearchTerm.toLowerCase())
                      ).length / itemsPerPage
                    )}
                    onPageChange={handlePageChange}
                    isDarkMode={isDarkMode}
                  />
                  </div>
                  </>
                  )}
                  </div>
                  </div>
                  </div>
                  );
                  }

                  export default App;