history page

frontend/src/pages/History/History.js

@@ -22,6 +22,10 @@ const History = () => {
   const [selectedPropertyDetails, setSelectedPropertyDetails] = useState(null);
   const [dateFilter, setDateFilter] = useState('all'); // all, today, week, month
   const [sortBy, setSortBy] = useState('date'); // date, area, duration
+  const [statusFilter, setStatusFilter] = useState('all'); // all, completed, archived
+  const [propertyFilter, setPropertyFilter] = useState('all');
+  const [productFilter, setProductFilter] = useState('all');
+  const [showFilters, setShowFilters] = useState(false);
 
   // Calculate coverage percentage based on GPS tracking and equipment specifications
   const calculateCoverage = (application, log) => {
@@ -66,15 +70,21 @@ const History = () => {
     try {
       setLoading(true);
       
-      // Fetch completed applications (plans with completed status)
-      const plansResponse = await applicationsAPI.getPlans({ status: 'completed' });
-      const completedPlans = plansResponse.data.data.plans || [];
+      // Fetch completed and archived applications
+      const [completedResponse, archivedResponse] = await Promise.all([
+        applicationsAPI.getPlans({ status: 'completed' }),
+        applicationsAPI.getPlans({ status: 'archived' })
+      ]);
+      
+      const completedPlans = completedResponse.data.data.plans || [];
+      const archivedPlans = archivedResponse.data.data.plans || [];
+      const allHistoryApplications = [...completedPlans, ...archivedPlans];
       
       // Fetch application logs for additional details
       const logsResponse = await applicationsAPI.getLogs();
       const logs = logsResponse.data.data.logs || [];
       
-      setCompletedApplications(completedPlans);
+      setCompletedApplications(allHistoryApplications);
       setApplicationLogs(logs);
       
     } catch (error) {
@@ -95,25 +105,48 @@ const History = () => {
     }
   };
 
-  // Filter applications based on date filter
+  // Get unique values for filter options
+  const uniqueProperties = [...new Set(completedApplications.map(app => app.propertyName))].filter(Boolean);
+  const uniqueProducts = [...new Set(
+    completedApplications.flatMap(app => 
+      app.products ? app.products.map(p => p.productName) : []
+    )
+  )].filter(Boolean);
+
+  // Filter applications based on all filters
   const filteredApplications = completedApplications.filter(app => {
-    if (dateFilter === 'all') return true;
+    // Date filter
+    if (dateFilter !== 'all') {
+      const appDate = new Date(app.plannedDate);
+      const now = new Date();
       
-    const appDate = new Date(app.plannedDate);
-    const now = new Date();
-    
-    switch (dateFilter) {
-      case 'today':
-        return appDate.toDateString() === now.toDateString();
-      case 'week':
-        const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-        return appDate >= weekAgo;
-      case 'month':
-        const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
-        return appDate >= monthAgo;
-      default:
-        return true;
+      switch (dateFilter) {
+        case 'today':
+          if (appDate.toDateString() !== now.toDateString()) return false;
+          break;
+        case 'week':
+          const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+          if (appDate < weekAgo) return false;
+          break;
+        case 'month':
+          const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+          if (appDate < monthAgo) return false;
+          break;
+      }
     }
+
+    // Status filter
+    if (statusFilter !== 'all' && app.status !== statusFilter) return false;
+
+    // Property filter
+    if (propertyFilter !== 'all' && app.propertyName !== propertyFilter) return false;
+
+    // Product filter
+    if (productFilter !== 'all') {
+      if (!app.products || !app.products.some(p => p.productName === productFilter)) return false;
+    }
+
+    return true;
   });
 
   // Sort applications
@@ -195,47 +228,138 @@ const History = () => {
       </div>
 
       {/* Filters and Sort */}
-      <div className="bg-white p-4 rounded-lg shadow mb-6">
-        <div className="flex flex-wrap gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Time Period
-            </label>
-            <select
-              value={dateFilter}
-              onChange={(e) => setDateFilter(e.target.value)}
-              className="border border-gray-300 rounded px-3 py-2 text-sm"
+      <div className="bg-white rounded-lg shadow mb-6">
+        <div className="p-4 border-b border-gray-200">
+          <button
+            onClick={() => setShowFilters(!showFilters)}
+            className="flex items-center justify-between w-full text-left"
+          >
+            <h3 className="text-lg font-medium text-gray-900">Filters & Sorting</h3>
+            <svg
+              className={`h-5 w-5 transform transition-transform ${showFilters ? 'rotate-180' : ''}`}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
             >
-              <option value="all">All Time</option>
-              <option value="today">Today</option>
-              <option value="week">Last Week</option>
-              <option value="month">Last Month</option>
-            </select>
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Sort By
-            </label>
-            <select
-              value={sortBy}
-              onChange={(e) => setSortBy(e.target.value)}
-              className="border border-gray-300 rounded px-3 py-2 text-sm"
-            >
-              <option value="date">Date</option>
-              <option value="area">Area Size</option>
-              <option value="duration">Duration</option>
-            </select>
-          </div>
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
         </div>
+        
+        {showFilters && (
+          <div className="p-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Time Period
+                </label>
+                <select
+                  value={dateFilter}
+                  onChange={(e) => setDateFilter(e.target.value)}
+                  className="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <option value="all">All Time</option>
+                  <option value="today">Today</option>
+                  <option value="week">Last Week</option>
+                  <option value="month">Last Month</option>
+                </select>
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Status
+                </label>
+                <select
+                  value={statusFilter}
+                  onChange={(e) => setStatusFilter(e.target.value)}
+                  className="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <option value="all">All Status</option>
+                  <option value="completed">Completed</option>
+                  <option value="archived">Archived</option>
+                </select>
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Property
+                </label>
+                <select
+                  value={propertyFilter}
+                  onChange={(e) => setPropertyFilter(e.target.value)}
+                  className="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <option value="all">All Properties</option>
+                  {uniqueProperties.map(property => (
+                    <option key={property} value={property}>{property}</option>
+                  ))}
+                </select>
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Product
+                </label>
+                <select
+                  value={productFilter}
+                  onChange={(e) => setProductFilter(e.target.value)}
+                  className="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <option value="all">All Products</option>
+                  {uniqueProducts.map(product => (
+                    <option key={product} value={product}>{product}</option>
+                  ))}
+                </select>
+              </div>
+              
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Sort By
+                </label>
+                <select
+                  value={sortBy}
+                  onChange={(e) => setSortBy(e.target.value)}
+                  className="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <option value="date">Date</option>
+                  <option value="area">Area Size</option>
+                  <option value="duration">Duration</option>
+                </select>
+              </div>
+            </div>
+            
+            <div className="mt-4 pt-4 border-t border-gray-200">
+              <button
+                onClick={() => {
+                  setDateFilter('all');
+                  setStatusFilter('all');
+                  setPropertyFilter('all');
+                  setProductFilter('all');
+                  setSortBy('date');
+                }}
+                className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-300 rounded hover:bg-gray-50"
+              >
+                Clear All Filters
+              </button>
+            </div>
+          </div>
+        )}
       </div>
 
       {/* Applications List */}
       {sortedApplications.length === 0 ? (
         <div className="text-center py-12">
           <CalendarIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-          <h3 className="text-lg font-medium text-gray-900 mb-2">No completed applications</h3>
-          <p className="text-gray-500">Complete some applications to see them here.</p>
+          <h3 className="text-lg font-medium text-gray-900 mb-2">
+            {statusFilter === 'completed' ? 'No completed applications' :
+             statusFilter === 'archived' ? 'No archived applications' :
+             'No completed or archived applications'}
+          </h3>
+          <p className="text-gray-500">
+            {statusFilter === 'completed' ? 'Complete some applications to see them here.' :
+             statusFilter === 'archived' ? 'Archive some completed applications to see them here.' :
+             'Complete and archive applications to see them here.'}
+          </p>
         </div>
       ) : (
         <div className="grid gap-4">
@@ -250,8 +374,12 @@ const History = () => {
                       <h3 className="text-lg font-semibold text-gray-900">
                         {application.propertyName} - {application.sectionNames}
                       </h3>
-                      <span className="px-3 py-1 text-sm font-medium rounded-full bg-green-100 text-green-800">
-                        Completed
+                      <span className={`px-3 py-1 text-sm font-medium rounded-full ${
+                        application.status === 'archived' 
+                          ? 'bg-gray-100 text-gray-800' 
+                          : 'bg-green-100 text-green-800'
+                      }`}>
+                        {application.status === 'archived' ? 'Archived' : 'Completed'}
                       </span>
                     </div>