Add grid/list view toggle to Available Units page

- Add toggle buttons in filter bar to switch between views
- Grid view shows card layout (default)
- List view shows compact table with all unit details

src/App.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Routes, Route, Link, useLocation, Navigate } from 'react-router-dom';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, Area, AreaChart, ScatterChart, Scatter, ComposedChart, ReferenceLine } from 'recharts';
-import { TrendingUp, TrendingDown, Home, DollarSign, Calendar, MapPin, Activity, AlertCircle, Star, RefreshCw, Wifi, WifiOff, Bell, Target, Filter, Search, ArrowUp, ArrowDown, Zap, Clock, Eye } from 'lucide-react';
+import { TrendingUp, TrendingDown, Home, DollarSign, Calendar, MapPin, Activity, AlertCircle, Star, RefreshCw, Wifi, WifiOff, Bell, Target, Filter, Search, ArrowUp, ArrowDown, Zap, Clock, Eye, LayoutGrid, List } from 'lucide-react';
 
 const ApartmentDashboard = () => {
   // Router
@@ -21,6 +21,7 @@ const ApartmentDashboard = () => {
   const [bedroomFilter, setBedroomFilter] = useState('all');
   const [sortBy, setSortBy] = useState('alphabetical');
   const [watchedUnits, setWatchedUnits] = useState(new Set());
+  const [unitsViewMode, setUnitsViewMode] = useState('grid');
 
   // API Data state - using your working endpoints
   const [dailySummary, setDailySummary] = useState(null);
@@ -690,64 +691,138 @@ const ApartmentDashboard = () => {
                   <option value="daysAvailable">Days Available</option>
                   <option value="pricePerSqft">Price per Sqft</option>
                 </select>
+                <div className="flex items-center border rounded-md overflow-hidden ml-auto">
+                  <button
+                    onClick={() => setUnitsViewMode('grid')}
+                    className={`p-2 ${unitsViewMode === 'grid' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'}`}
+                    title="Grid view"
+                  >
+                    <LayoutGrid className="w-5 h-5" />
+                  </button>
+                  <button
+                    onClick={() => setUnitsViewMode('list')}
+                    className={`p-2 ${unitsViewMode === 'list' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'}`}
+                    title="List view"
+                  >
+                    <List className="w-5 h-5" />
+                  </button>
+                </div>
               </div>
             </div>
 
-            {/* Unit Cards */}
-            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
-              {filteredUnits.map((unit) => (
-                <div key={unit.unitCode} className={`bg-white rounded-lg shadow-md overflow-hidden ${watchedUnits.has(unit.unitCode) ? 'ring-2 ring-blue-400' : ''}`}>
-                  <div className="p-6">
-                    <div className="flex justify-between items-start mb-4">
-                      <div>
-                        <h3 className="text-lg font-bold">{unit.unitCode}</h3>
-                        <p className="text-gray-600">{unit.planName}</p>
+            {/* Unit Cards - Grid View */}
+            {unitsViewMode === 'grid' && (
+              <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+                {filteredUnits.map((unit) => (
+                  <div key={unit.unitCode} className={`bg-white rounded-lg shadow-md overflow-hidden ${watchedUnits.has(unit.unitCode) ? 'ring-2 ring-blue-400' : ''}`}>
+                    <div className="p-6">
+                      <div className="flex justify-between items-start mb-4">
+                        <div>
+                          <h3 className="text-lg font-bold">{unit.unitCode}</h3>
+                          <p className="text-gray-600">{unit.planName}</p>
+                        </div>
+                        <div className="text-right">
+                          <p className="text-2xl font-bold text-green-600">{formatPrice(unit.currentPrice)}</p>
+                          <p className="text-sm text-gray-500">
+                            ${((unit.currentPrice || 0) / (unit.area || 1)).toFixed(2)}/sqft
+                          </p>
+                        </div>
                       </div>
-                      <div className="text-right">
-                        <p className="text-2xl font-bold text-green-600">{formatPrice(unit.currentPrice)}</p>
-                        <p className="text-sm text-gray-500">
-                          ${((unit.currentPrice || 0) / (unit.area || 1)).toFixed(2)}/sqft
-                        </p>
-                      </div>
-                    </div>
 
-                    <div className="grid grid-cols-3 gap-4 mb-4">
-                      <div className="text-center p-3 bg-gray-50 rounded">
-                        <p className="text-sm text-gray-600">Bed/Bath</p>
-                        <p className="font-semibold">{unit.bedCount}/{unit.bathCount}</p>
+                      <div className="grid grid-cols-3 gap-4 mb-4">
+                        <div className="text-center p-3 bg-gray-50 rounded">
+                          <p className="text-sm text-gray-600">Bed/Bath</p>
+                          <p className="font-semibold">{unit.bedCount}/{unit.bathCount}</p>
+                        </div>
+                        <div className="text-center p-3 bg-gray-50 rounded">
+                          <p className="text-sm text-gray-600">Area</p>
+                          <p className="font-semibold">{unit.area} sqft</p>
+                        </div>
+                        <div className="text-center p-3 bg-gray-50 rounded">
+                          <p className="text-sm text-gray-600">Available</p>
+                          <p className="font-semibold">{unit.daysAvailable || 0} days</p>
+                        </div>
                       </div>
-                      <div className="text-center p-3 bg-gray-50 rounded">
-                        <p className="text-sm text-gray-600">Area</p>
-                        <p className="font-semibold">{unit.area} sqft</p>
-                      </div>
-                      <div className="text-center p-3 bg-gray-50 rounded">
-                        <p className="text-sm text-gray-600">Available</p>
-                        <p className="font-semibold">{unit.daysAvailable || 0} days</p>
-                      </div>
-                    </div>
 
-                    <div className="flex space-x-2">
-                      <button
-                        onClick={() => openUnitDetail(unit)}
-                        className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors"
-                      >
-                        View Details
-                      </button>
-                      <button 
-                        onClick={() => toggleWatchUnit(unit.unitCode)}
-                        className={`px-4 py-2 rounded-md transition-colors ${
-                          watchedUnits.has(unit.unitCode) 
-                            ? 'bg-yellow-500 text-white hover:bg-yellow-600' 
-                            : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-                        }`}
-                      >
-                        <Eye className="w-4 h-4" />
-                      </button>
+                      <div className="flex space-x-2">
+                        <button
+                          onClick={() => openUnitDetail(unit)}
+                          className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors"
+                        >
+                          View Details
+                        </button>
+                        <button
+                          onClick={() => toggleWatchUnit(unit.unitCode)}
+                          className={`px-4 py-2 rounded-md transition-colors ${
+                            watchedUnits.has(unit.unitCode)
+                              ? 'bg-yellow-500 text-white hover:bg-yellow-600'
+                              : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                          }`}
+                        >
+                          <Eye className="w-4 h-4" />
+                        </button>
+                      </div>
                     </div>
                   </div>
-                </div>
-              ))}
-            </div>
+                ))}
+              </div>
+            )}
+
+            {/* Unit Cards - List View */}
+            {unitsViewMode === 'list' && (
+              <div className="bg-white rounded-lg shadow-md overflow-hidden">
+                <table className="w-full">
+                  <thead className="bg-gray-50 border-b">
+                    <tr>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">Unit</th>
+                      <th className="text-left py-3 px-4 font-semibold text-gray-700">Plan</th>
+                      <th className="text-center py-3 px-4 font-semibold text-gray-700">Bed/Bath</th>
+                      <th className="text-center py-3 px-4 font-semibold text-gray-700">Area</th>
+                      <th className="text-right py-3 px-4 font-semibold text-gray-700">Price</th>
+                      <th className="text-right py-3 px-4 font-semibold text-gray-700">$/sqft</th>
+                      <th className="text-center py-3 px-4 font-semibold text-gray-700">Days</th>
+                      <th className="text-center py-3 px-4 font-semibold text-gray-700">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {filteredUnits.map((unit, index) => (
+                      <tr
+                        key={unit.unitCode}
+                        className={`border-b ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'} ${watchedUnits.has(unit.unitCode) ? 'ring-2 ring-inset ring-blue-400' : ''} hover:bg-blue-50`}
+                      >
+                        <td className="py-3 px-4 font-bold">{unit.unitCode}</td>
+                        <td className="py-3 px-4 text-gray-600">{unit.planName}</td>
+                        <td className="py-3 px-4 text-center">{unit.bedCount}/{unit.bathCount}</td>
+                        <td className="py-3 px-4 text-center">{unit.area} sqft</td>
+                        <td className="py-3 px-4 text-right font-bold text-green-600">{formatPrice(unit.currentPrice)}</td>
+                        <td className="py-3 px-4 text-right text-gray-500">${((unit.currentPrice || 0) / (unit.area || 1)).toFixed(2)}</td>
+                        <td className="py-3 px-4 text-center">{unit.daysAvailable || 0}</td>
+                        <td className="py-3 px-4">
+                          <div className="flex justify-center space-x-2">
+                            <button
+                              onClick={() => openUnitDetail(unit)}
+                              className="bg-blue-600 text-white py-1 px-3 rounded-md hover:bg-blue-700 transition-colors text-sm"
+                            >
+                              Details
+                            </button>
+                            <button
+                              onClick={() => toggleWatchUnit(unit.unitCode)}
+                              className={`p-1 rounded-md transition-colors ${
+                                watchedUnits.has(unit.unitCode)
+                                  ? 'bg-yellow-500 text-white hover:bg-yellow-600'
+                                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                              }`}
+                            >
+                              <Eye className="w-4 h-4" />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
 
             {filteredUnits.length === 0 && (
               <div className="text-center py-12">