Remove watch button from units page and detail view

Display 'Now' for soonest dates in the past
Add soonest column to list view
2026-01-21 12:00:46 -07:00 · 2026-01-21 11:56:28 -07:00 · 2026-01-21 11:53:51 -07:00 · 2026-01-21 11:45:48 -07:00 · 2026-01-21 11:15:05 -07:00 · 2026-01-21 11:14:22 -07:00
1 changed files with 199 additions and 73 deletions
--- a/src/App.jsx
+++ b/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
@ -19,8 +19,10 @@ const ApartmentDashboard = () => {
  // Filters
  const [priceFilter, setPriceFilter] = useState({ min: 0, max: 10000 });
  const [bedroomFilter, setBedroomFilter] = useState('all');
-  const [sortBy, setSortBy] = useState('alphabetical');
+  const [sortBy, setSortBy] = useState('unitCode');
+  const [sortDirection, setSortDirection] = useState('asc');
  const [watchedUnits, setWatchedUnits] = useState(new Set());
+  const [unitsViewMode, setUnitsViewMode] = useState('list');

  // API Data state - using your working endpoints
  const [dailySummary, setDailySummary] = useState(null);
@ -370,19 +372,32 @@ const ApartmentDashboard = () => {

  const insights = calculateInsights();

+  // Sort handler for column headers
+  const handleSort = (field) => {
+    if (sortBy === field) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortBy(field);
+      setSortDirection('asc');
+    }
+  };
+
  // Filter function for units
  const filteredUnits = availableUnits.filter(unit => {
    const matchesPrice = (unit.currentPrice || 0) >= priceFilter.min && (unit.currentPrice || 0) <= priceFilter.max;
    const matchesBedroom = bedroomFilter === 'all' || (unit.bedCount != null && unit.bedCount.toString() === bedroomFilter);
    return matchesPrice && matchesBedroom;
  }).sort((a, b) => {
+    const dir = sortDirection === 'asc' ? 1 : -1;
    switch (sortBy) {
-      case 'alphabetical': return (a.unitCode || '').localeCompare(b.unitCode || '');
-      case 'price': return (a.currentPrice || 0) - (b.currentPrice || 0);
-      case 'priceDesc': return (b.currentPrice || 0) - (a.currentPrice || 0);
-      case 'size': return (b.area || 0) - (a.area || 0);
-      case 'daysAvailable': return (b.daysAvailable || 0) - (a.daysAvailable || 0);
-      case 'pricePerSqft': return ((a.currentPrice || 0) / (a.area || 1)) - ((b.currentPrice || 0) / (b.area || 1));
+      case 'unitCode': return dir * (a.unitCode || '').localeCompare(b.unitCode || '');
+      case 'planName': return dir * (a.planName || '').localeCompare(b.planName || '');
+      case 'bedCount': return dir * ((a.bedCount || 0) - (b.bedCount || 0));
+      case 'area': return dir * ((a.area || 0) - (b.area || 0));
+      case 'price': return dir * ((a.currentPrice || 0) - (b.currentPrice || 0));
+      case 'pricePerSqft': return dir * (((a.currentPrice || 0) / (a.area || 1)) - ((b.currentPrice || 0) / (b.area || 1)));
+      case 'daysAvailable': return dir * ((a.daysAvailable || 0) - (b.daysAvailable || 0));
+      case 'soonest': return dir * (a.soonest || '').localeCompare(b.soonest || '');
      default: return 0;
    }
  });
@ -679,75 +694,199 @@ const ApartmentDashboard = () => {
                  <option value="2">2 BR</option>
                </select>
                <select
-                  value={sortBy}
-                  onChange={(e) => setSortBy(e.target.value)}
+                  value={`${sortBy}-${sortDirection}`}
+                  onChange={(e) => {
+                    const [field, dir] = e.target.value.split('-');
+                    setSortBy(field);
+                    setSortDirection(dir);
+                  }}
                  className="border rounded-md px-3 py-2"
                >
-                  <option value="alphabetical">Alphabetical</option>
-                  <option value="price">Price: Low to High</option>
-                  <option value="priceDesc">Price: High to Low</option>
-                  <option value="size">Size: Large to Small</option>
-                  <option value="daysAvailable">Days Available</option>
-                  <option value="pricePerSqft">Price per Sqft</option>
+                  <option value="unitCode-asc">Unit: A to Z</option>
+                  <option value="unitCode-desc">Unit: Z to A</option>
+                  <option value="price-asc">Price: Low to High</option>
+                  <option value="price-desc">Price: High to Low</option>
+                  <option value="area-asc">Size: Small to Large</option>
+                  <option value="area-desc">Size: Large to Small</option>
+                  <option value="daysAvailable-asc">Days: Low to High</option>
+                  <option value="daysAvailable-desc">Days: High to Low</option>
+                  <option value="pricePerSqft-asc">$/sqft: Low to High</option>
+                  <option value="pricePerSqft-desc">$/sqft: High to Low</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"
+                        className="w-full 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>
+            )}
+
+            {/* 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 cursor-pointer hover:bg-gray-100 select-none"
+                        onClick={() => handleSort('unitCode')}
+                      >
+                        <span className="flex items-center">
+                          Unit
+                          {sortBy === 'unitCode' && (sortDirection === 'asc' ? <ArrowUp className="w-4 h-4 ml-1" /> : <ArrowDown className="w-4 h-4 ml-1" />)}
+                        </span>
+                      </th>
+                      <th
+                        className="text-left py-3 px-4 font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 select-none"
+                        onClick={() => handleSort('planName')}
+                      >
+                        <span className="flex items-center">
+                          Plan
+                          {sortBy === 'planName' && (sortDirection === 'asc' ? <ArrowUp className="w-4 h-4 ml-1" /> : <ArrowDown className="w-4 h-4 ml-1" />)}
+                        </span>
+                      </th>
+                      <th
+                        className="text-center py-3 px-4 font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 select-none"
+                        onClick={() => handleSort('bedCount')}
+                      >
+                        <span className="flex items-center justify-center">
+                          Bed/Bath
+                          {sortBy === 'bedCount' && (sortDirection === 'asc' ? <ArrowUp className="w-4 h-4 ml-1" /> : <ArrowDown className="w-4 h-4 ml-1" />)}
+                        </span>
+                      </th>
+                      <th
+                        className="text-center py-3 px-4 font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 select-none"
+                        onClick={() => handleSort('area')}
+                      >
+                        <span className="flex items-center justify-center">
+                          Area
+                          {sortBy === 'area' && (sortDirection === 'asc' ? <ArrowUp className="w-4 h-4 ml-1" /> : <ArrowDown className="w-4 h-4 ml-1" />)}
+                        </span>
+                      </th>
+                      <th
+                        className="text-right py-3 px-4 font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 select-none"
+                        onClick={() => handleSort('price')}
+                      >
+                        <span className="flex items-center justify-end">
+                          Price
+                          {sortBy === 'price' && (sortDirection === 'asc' ? <ArrowUp className="w-4 h-4 ml-1" /> : <ArrowDown className="w-4 h-4 ml-1" />)}
+                        </span>
+                      </th>
+                      <th
+                        className="text-right py-3 px-4 font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 select-none"
+                        onClick={() => handleSort('pricePerSqft')}
+                      >
+                        <span className="flex items-center justify-end">
+                          $/sqft
+                          {sortBy === 'pricePerSqft' && (sortDirection === 'asc' ? <ArrowUp className="w-4 h-4 ml-1" /> : <ArrowDown className="w-4 h-4 ml-1" />)}
+                        </span>
+                      </th>
+                      <th
+                        className="text-center py-3 px-4 font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 select-none"
+                        onClick={() => handleSort('daysAvailable')}
+                      >
+                        <span className="flex items-center justify-center">
+                          Days
+                          {sortBy === 'daysAvailable' && (sortDirection === 'asc' ? <ArrowUp className="w-4 h-4 ml-1" /> : <ArrowDown className="w-4 h-4 ml-1" />)}
+                        </span>
+                      </th>
+                      <th
+                        className="text-center py-3 px-4 font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 select-none"
+                        onClick={() => handleSort('soonest')}
+                      >
+                        <span className="flex items-center justify-center">
+                          Soonest
+                          {sortBy === 'soonest' && (sortDirection === 'asc' ? <ArrowUp className="w-4 h-4 ml-1" /> : <ArrowDown className="w-4 h-4 ml-1" />)}
+                        </span>
+                      </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 text-center">{unit.soonest ? (new Date(unit.soonest) <= new Date() ? 'Now' : formatDate(unit.soonest)) : '-'}</td>
+                        <td className="py-3 px-4 text-center">
+                          <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>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}

            {filteredUnits.length === 0 && (
              <div className="text-center py-12">
@ -1107,19 +1246,6 @@ const ApartmentDashboard = () => {
                    </div>
                  )}
                </div>
-
-                <div className="flex space-x-2">
-                  <button 
-                    onClick={() => toggleWatchUnit(selectedUnit.unitCode)}
-                    className={`flex-1 py-2 px-4 rounded-md transition-colors ${
-                      watchedUnits.has(selectedUnit.unitCode) 
-                        ? 'bg-yellow-500 text-white hover:bg-yellow-600' 
-                        : 'bg-blue-600 text-white hover:bg-blue-700'
-                    }`}
-                  >
-                    {watchedUnits.has(selectedUnit.unitCode) ? 'Stop Watching' : 'Watch This Unit'}
-                  </button>
-                </div>
              </div>
            </div>
          </div>
Author	SHA1	Message	Date
Stephen Minakian	431f2bf82f	Remove watch button from units page and detail view	2026-01-21 12:00:46 -07:00
Stephen Minakian	69542f08cd	Display 'Now' for soonest dates in the past	2026-01-21 11:56:28 -07:00
Stephen Minakian	e79f28f52b	Add soonest column to list view	2026-01-21 11:53:51 -07:00
Stephen Minakian	b3f607b0fc	Add sortable columns to list view - Click column headers to sort by that field - Click again to toggle ascending/descending - Arrow indicators show current sort direction - Dropdown filter stays in sync with column sorting	2026-01-21 11:45:48 -07:00
Stephen Minakian	a137946a92	Set list view as default for Available Units	2026-01-21 11:15:05 -07:00
Stephen Minakian	462dccffba	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	2026-01-21 11:14:22 -07:00