fix: roadmap fixes.

fezcode · fezcode · commit 6188575c1467 · 2025-11-29T19:54:19.000+03:00
diff --git a/src/components/roadmap/RoadmapView.js b/src/components/roadmap/RoadmapView.js
@@ -1,8 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
 import RoadmapCard from './RoadmapCard';
 import { getOnlyBgStatusColor, statusTextColor } from '../../utils/roadmapHelpers';
+import { EyeIcon, EyeSlashIcon } from '@phosphor-icons/react'; // Import eye icons
 
 const RoadmapView = ({ issuesData = [] }) => {
+  const [hiddenColumns, setHiddenColumns] = useState([]); // State to track hidden columns
+
+  const toggleColumnVisibility = (status) => {
+    if (hiddenColumns.includes(status)) {
+      setHiddenColumns(hiddenColumns.filter((s) => s !== status)); // Show column
+    } else {
+      setHiddenColumns([...hiddenColumns, status]); // Hide column
+    }
+  };
+
   const groupedApps = issuesData.reduce((acc, app) => {
     const status = app.status || 'Planned'; // Default to Planned if not specified
     if (!acc[status]) {
@@ -16,23 +27,37 @@ const RoadmapView = ({ issuesData = [] }) => {
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-      {statusOrder.map((status) => (
-        <div key={status} className="bg-gray-900/70 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-gray-800">
-          <h3
-            className={`text-lg font-mono tracking-wider mb-4 flex items-center gap-2 text-white`}
-          >
-            <span
-              className={`w-3 h-3 rounded-full ${getOnlyBgStatusColor(status)} ${statusTextColor(status)}`}
-            ></span>
-            {status} ({groupedApps[status]?.length || 0})
-          </h3>
-          <div className="space-y-4">
-            {groupedApps[status]?.map((app, appIndex) => (
-              <RoadmapCard key={app.id} app={app} index={appIndex} />
-            ))}
+      {statusOrder.map((status) => {
+        const isHidden = hiddenColumns.includes(status);
+        return (
+          <div key={status} className="bg-gray-900/70 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-gray-800">
+            <h3
+              className={`text-lg font-mono tracking-wider mb-4 flex items-center justify-between text-white`}
+            >
+              <span className="flex items-center gap-2">
+                <span
+                  className={`w-3 h-3 rounded-full ${getOnlyBgStatusColor(status)} ${statusTextColor(status)}`}
+                ></span>
+                {status} ({groupedApps[status]?.length || 0})
+              </span>
+              <button
+                onClick={() => toggleColumnVisibility(status)}
+                className="text-gray-400 hover:text-white transition-colors"
+                title={isHidden ? 'Show column' : 'Hide column'}
+              >
+                {isHidden ? <EyeSlashIcon size={20} /> : <EyeIcon size={20} />}
+              </button>
+            </h3>
+            {!isHidden && (
+              <div className="space-y-4">
+                {groupedApps[status]?.map((app, appIndex) => (
+                  <RoadmapCard key={app.id} app={app} index={appIndex} />
+                ))}
+              </div>
+            )}
           </div>
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 };
diff --git a/src/components/roadmap/TableView.js b/src/components/roadmap/TableView.js
@@ -6,7 +6,7 @@ import { getStatusClasses, getPriorityClasses, statusTextColor } from '../../uti
 const TableView = ({ issuesData = [] }) => {
   const [sortBy, setSortBy] = useState('title');
   const [sortOrder, setSortOrder] = useState('asc'); // 'asc' or 'desc'
-  const [activeFilters, setActiveFilters] = useState([]); // Changed filterStatus to activeFilters
+  const [activeFilters, setActiveFilters] = useState(['Planned', 'In Progress', 'On Hold', 'Completed']); // Changed filterStatus to activeFilters
 
   const handleFilterChange = (status) => {
     if (activeFilters.includes(status)) {
