modify the code to optimize for all screens (mobile and desktop)

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

// Import Icons
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('');

  // New state variables for search, filter, theme, and tabs
  const [customerSearchTerm, setCustomerSearchTerm] = useState('');
  const [todoFilter, setTodoFilter] = useState('all');
  const [isDarkMode, setIsDarkMode] = useState(() => {
    const storedThemePreference = localStorage.getItem('isDarkMode');
    return storedThemePreference ? JSON.parse(storedThemePreference) : false;
  });

  // New state variable for active tab
  const [activeTab, setActiveTab] = useState('home'); // 'home' or 'customers'

  // New state variable for expanded customers
  const [expandedCustomerIds, setExpandedCustomerIds] = useState([]);

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

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

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

  const loadCustomers = async () => {
    try {
      const allCustomers = await db.customers.toArray();
      setCustomers(allCustomers);
      if (allCustomers.length > 0) {
        // Preserve the selected customer if possible
        const currentCustomer = allCustomers.find(
          (c) => c.id === selectedCustomer?.id
        );
        setSelectedCustomer(currentCustomer || null);
        // Do not automatically select the first customer
      } 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 (window.confirm('Are you sure you want to delete this todo item?')) {
      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
            )
          );
        } 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) => {
    if (window.confirm('Are you sure you want to delete this customer?')) {
      try {
        await db.customers.delete(customerId);
        await loadCustomers();
        if (selectedCustomer?.id === customerId) {
          setSelectedCustomer(null);
        }
        // Remove customer from expanded list if needed
        setExpandedCustomerIds((prevState) =>
          prevState.filter((id) => id !== customerId)
        );
      } 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);
    }
  };

  // Function to toggle customer expansion
  const toggleCustomerExpansion = (customerId) => {
    setExpandedCustomerIds((prevState) =>
      prevState.includes(customerId)
        ? prevState.filter((id) => id !== customerId)
        : [...prevState, customerId]
    );
  };

  return (
    <div
      className={`min-h-screen flex items-center justify-center ${
        isDarkMode ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-900'
      }`}
    >
      <div
        className={`p-6 rounded-lg shadow-lg w-full max-w-md ${
          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>
          <button
            className="p-2 rounded-full focus:outline-none"
            onClick={toggleDarkMode}
            aria-label="Toggle Dark Mode"
          >
            {isDarkMode ? '🌞' : '🌜'}
          </button>
        </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>

        {/* Fixed Height Content Area */}
        <div className="min-h-[500px]">
          {/* 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="flex mb-2">
                  <input
                    type="text"
                    className={`flex-grow p-2 border rounded-l-lg focus:outline-none ${
                      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-r-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="flex mb-4">
                    <input
                      type="text"
                      className={`flex-grow p-2 border rounded-l-lg focus:outline-none ${
                        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-r-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 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
                      );
                    }

                    return (
                      <ul>
                        {filteredTodos.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>
                                <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={() => deleteTodo(index)}
                                    aria-label="Delete Todo"
                                  >
                                    <FaTrash />
                                  </button>
                                </div>
                              </>
                            )}
                          </li>
                        ))}
                      </ul>
                    );
                  })()}
                </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>
                  {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">
                                <span
                                  onClick={() =>
                                    toggleCustomerExpansion(customer.id)
                                  }
                                  className="cursor-pointer"
                                >
                                  {customer.name}{' '}
                                  <span className="text-gray-500">
                                    ({totalTodos} total, {pendingTodos}{' '}
                                    pending)
                                  </span>
                                </span>
                                <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-red-500 hover:text-red-600"
                                    onClick={() =>
                                      deleteCustomer(customer.id)
                                    }
                                    aria-label="Delete Customer"
                                  >
                                    <FaTrash />
                                  </button>
                                </div>
                              </div>

                              {/* Render Todos When Customer Is Expanded */}
                              {expandedCustomerIds.includes(customer.id) && (
                                <div className="ml-4 mt-2">
                                  <ul>
                                    {customer.todos.map((todo, index) => (
                                      <li
                                        key={index}
                                        className={`flex items-center p-1 border-b ${
                                          isDarkMode
                                            ? 'border-gray-600 text-gray-400'
                                            : 'border-gray-200 text-gray-500'
                                        }`}
                                      >
                                        <span>&bull; </span>
                                        <span
                                          className={`${
                                            todo.completed
                                              ? 'line-through text-gray-500'
                                              : ''
                                          }`}
                                        >
                                          {todo.text}
                                        </span>
                                      </li>
                                    ))}
                                  </ul>
                                </div>
                              )}
                            </>
                          )}
                        </li>
                      );
                    })}
                </ul>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default App;