npm - mongo-scheduler-ui - Versions diffs - 1.0.0 - Mend

mongo-scheduler-ui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/.env.example +1 -0
package/README.md +122 -0
package/eslint.config.js +23 -0
package/index.html +13 -0
package/package.json +44 -0
package/postcss.config.js +6 -0
package/public/dashboard-preview.png +0 -0
package/public/favicon.svg +12 -0
package/src/App.css +42 -0
package/src/App.tsx +233 -0
package/src/components/JobDetails.tsx +124 -0
package/src/components/JobFilters.tsx +59 -0
package/src/components/JobFormModal.tsx +372 -0
package/src/components/JobList.tsx +171 -0
package/src/components/Pagination.tsx +107 -0
package/src/components/StatsCards.tsx +52 -0
package/src/index.css +29 -0
package/src/main.tsx +10 -0
package/src/services/api.ts +58 -0
package/src/types/job.ts +43 -0
package/src/utils/helpers.ts +31 -0
package/tailwind.config.js +8 -0
package/tsconfig.app.json +28 -0
package/tsconfig.json +7 -0
package/tsconfig.node.json +26 -0
package/vite.config.ts +7 -0

package/.env.example ADDED Viewed

	@@ -0,0 +1 @@
1	+ VITE_API_URL=http://localhost:3000

package/README.md ADDED Viewed

@@ -0,0 +1,122 @@
+# Mongo Scheduler UI
+![Dashboard Preview](public/dashboard-preview.png)
+Beautiful, responsive dashboard for managing jobs from `mongo-job-scheduler`.
+## 🚀 Quick Start
+### Prerequisites
+- Node.js 18+
+- MongoDB running locally or remote connection string
+- mongo-job-scheduler jobs in your database
+### 1. Frontend Setup
+```bash
+cd mongo-scheduler-ui
+npm install
+npm run dev
+```
+The UI will be available at `http://localhost:5173`
+### 2. Backend API Setup
+Clone and setup the **[Mongo Scheduler API](https://github.com/darshanpatel14/mongo-job-scheduler-api)** repository. Follow the instructions in its README to start the server at `http://localhost:3000`.
+The API will be available at `http://localhost:3000`
+## 📁 Project Structure
+```
+mongo-scheduler-ui/
+├── src/                    # React frontend
+│   ├── components/         # UI components
+│   ├── services/           # API client
+│   ├── types/              # TypeScript types
+│   └── utils/              # Helper functions
+└── package.json
+```
+## 🎨 Features
+- **📊 Real-time Dashboard** - Auto-refresh every 5 seconds
+- **🔍 Search & Filter** - Find jobs by name and status
+- **📈 Statistics** - Total, pending, running, completed, failed jobs
+- **🎯 Job Actions** - Delete, retry (failed), cancel (pending/running)
+- **📝 Job Details** - Full job information in a beautiful modal
+- **🎨 Modern Dark Theme** - Gradient-based design with glassmorphism
+- **📱 Responsive** - Works on mobile, tablet, and desktop
+## 🔌 API Endpoints
+See `server/README.md` for full API documentation.
+## 🎯 Usage
+1. Start MongoDB
+2. Start the backend API: `cd server && npm run dev`
+3. Start the frontend: `npm run dev`
+4. Open `http://localhost:5173` in your browser
+## 🔧 Configuration
+### Frontend (.env)
+```
+VITE_API_URL=http://localhost:3000
+```
+### Backend (server/.env)
+```
+MONGO_URL=mongodb://localhost:27017
+DB_NAME=scheduler
+PORT=3000
+```
+## 🎨 Customization
+### Add Job Handlers
+Edit `server/index.js`:
+```javascript
+handler: async (job) => {
+  if (job.name === "send-email") {
+    // Your email logic
+  } else if (job.name === "process-payment") {
+    // Your payment logic
+  }
+};
+```
+### Modify Theme
+Edit `src/index.css` for colors and styling.
+## 📦 Tech Stack
+- **Frontend**: React 18, Vite, TypeScript, Tailwind CSS
+- **Backend**: Express, mongo-job-scheduler, MongoDB
+- **Icons**: Lucide React
+- **Date Formatting**: date-fns
+## 🚢 Deployment
+### Frontend
+```bash
+npm run build
+# Deploy dist/ folder to Vercel, Netlify, etc.
+```
+### Backend
+Please refer to the **[Mongo Scheduler API](https://github.com/darshanpatel14/mongo-job-scheduler-api)** repository for deployment instructions.
+## 📄 License
+MIT

package/eslint.config.js ADDED Viewed

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mongo Scheduler UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,44 @@
+{
+  "name": "mongo-scheduler-ui",
+  "version": "1.0.0",
+  "description": "Modern React UI Dashboard for mongo-job-scheduler",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/darshanpatel14/mongo-job-scheduler-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/darshanpatel14/mongo-job-scheduler-ui/issues"
+  },
+  "homepage": "https://github.com/darshanpatel14/mongo-job-scheduler-ui#readme",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.2",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.4",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/postcss.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/public/dashboard-preview.png ADDED Viewed

Binary file

package/public/favicon.svg ADDED Viewed

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+  <line x1="16" y1="2" x2="16" y2="6"></line>
+  <line x1="8" y1="2" x2="8" y2="6"></line>
+  <line x1="3" y1="10" x2="21" y2="10"></line>
+  <path d="M8 14h.01"></path>
+  <path d="M12 14h.01"></path>
+  <path d="M16 14h.01"></path>
+  <path d="M8 18h.01"></path>
+  <path d="M12 18h.01"></path>
+  <path d="M16 18h.01"></path>
+</svg>

package/src/App.css ADDED Viewed

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,233 @@
+import { useState, useEffect } from 'react';
+import { Calendar, Plus } from 'lucide-react';
+import StatsCards from './components/StatsCards';
+import JobFilters from './components/JobFilters';
+import JobList from './components/JobList';
+import JobDetails from './components/JobDetails';
+import JobFormModal from './components/JobFormModal';
+import { jobsApi } from './services/api';
+import type { Job, JobStats } from './types/job';
+function App() {
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [filteredJobs, setFilteredJobs] = useState<Job[]>([]);
+  const [stats, setStats] = useState<JobStats | null>(null);
+  // Pagination State
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10);
+  // Modal States
+  const [selectedJob, setSelectedJob] = useState<Job | null>(null);
+  const [editingJob, setEditingJob] = useState<Job | null>(null);
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [filters, setFilters] = useState<{ status?: string; search?: string }>({});
+  // Fetch jobs
+  const fetchJobs = async () => {
+    try {
+      setLoading(true);
+      const data = await jobsApi.getJobs();
+      setJobs(data);
+      // We don't set filteredJobs here directly if we want to respect current filters
+      // But initial load or refresh usually resets or re-applies filters.
+      // let's rely on the useEffect dependency on 'jobs' to re-run the filter logic?
+      // Actually, the useEffect depends on [filters, jobs]. So setting jobs will trigger it.
+      // But we need to make sure we don't overwrite filteredJobs if filters exist.
+      // The useEffect below handles it.
+    } catch (error) {
+      console.error('Failed to fetch jobs:', error);
+      // Mock data logic removed for brevity as it's not the focus of this diff and was just for demo
+      setJobs([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+  // ... (fetchStats same as before)
+  const fetchStats = async () => {
+    try {
+      const data = await jobsApi.getStats();
+      setStats(data);
+    } catch (error) {
+      console.error('Failed to fetch stats:', error);
+    }
+  };
+  // Apply filters and Pagination Reset
+  useEffect(() => {
+    let filtered = jobs;
+    if (filters.status) {
+      filtered = filtered.filter(job => job.status === filters.status);
+    }
+    if (filters.search) {
+      filtered = filtered.filter(job =>
+        job.name.toLowerCase().includes(filters.search!.toLowerCase())
+      );
+    }
+    setFilteredJobs(filtered);
+    setCurrentPage(1); // Reset to page 1 on filter change
+  }, [filters, jobs]);
+  // Initial fetch
+  useEffect(() => {
+    fetchJobs();
+  }, []);
+  // Update stats when jobs change
+  useEffect(() => {
+    if (jobs.length > 0) {
+      fetchStats();
+    }
+  }, [jobs]);
+  // Auto-refresh every 30 seconds
+  useEffect(() => {
+    const interval = setInterval(fetchJobs, 30000);
+    return () => clearInterval(interval);
+  }, []);
+  // ... (Handlers: handleDelete, handleRetry, handleCancel, handleSaveJob, openCreateModal, openEditModal - same as before)
+  const handleDelete = async (id: string) => {
+    if (!confirm('Are you sure you want to delete this job?')) return;
+    try {
+      await jobsApi.deleteJob(id);
+      fetchJobs();
+    } catch (error) {
+      console.error('Failed to delete job:', error);
+    }
+  };
+  const handleRetry = async (id: string) => {
+    try {
+      await jobsApi.retryJob(id);
+      fetchJobs();
+    } catch (error) {
+      console.error('Failed to retry job:', error);
+    }
+  };
+  const handleCancel = async (id: string) => {
+    if (!confirm('Are you sure you want to cancel this job?')) return;
+    try {
+      await jobsApi.cancelJob(id);
+      fetchJobs();
+    } catch (error) {
+      console.error('Failed to cancel job:', error);
+    }
+  };
+  const handleSaveJob = async (jobData: Partial<Job>) => {
+    if (editingJob) {
+      await jobsApi.updateJob(editingJob._id, jobData);
+    } else {
+      await jobsApi.createJob(jobData);
+    }
+    fetchJobs();
+  };
+  const openCreateModal = () => {
+    setEditingJob(null);
+    setIsFormOpen(true);
+  };
+  const openEditModal = (job: Job) => {
+    setEditingJob(job);
+    setIsFormOpen(true);
+  };
+  // Pagination Logic
+  const totalPages = Math.ceil(filteredJobs.length / itemsPerPage);
+  const currentJobs = filteredJobs.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
+  return (
+    <div className="h-screen flex flex-col bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
+      {/* Header */}
+      <header className="flex-none bg-gradient-to-r from-gray-900/95 to-gray-800/95 backdrop-blur-sm border-b border-gray-700/50 z-40">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                <Calendar className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+                  Mongo Scheduler UI
+                </h1>
+                <p className="text-sm text-gray-400">Job Management Dashboard</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+                <div className="text-sm text-gray-400 hidden sm:block">
+                Auto-refresh: 30s
+                </div>
+                <button
+                onClick={openCreateModal}
+                className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium shadow-lg shadow-blue-500/20"
+                >
+                <Plus className="w-4 h-4" />
+                Create Job
+                </button>
+            </div>
+          </div>
+        </div>
+      </header>
+      {/* Main Content */}
+      <main className="flex-1 flex flex-col min-h-0 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full py-6 gap-6">
+        {/* Fixed Top Section: Stats & Filters */}
+        <div className="flex-none space-y-6">
+            <StatsCards stats={stats} />
+            <JobFilters onFilterChange={setFilters} />
+        </div>
+        {/* Scrollable List Section */}
+        <div className="flex-1 flex flex-col min-h-0 bg-gray-800/30 rounded-xl border border-gray-700/50 backdrop-blur-sm overflow-hidden">
+                <div className="flex-1 overflow-y-auto px-4 py-4 min-h-0 scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-transparent">
+                    <JobList
+                        jobs={currentJobs}
+                        loading={loading}
+                        onJobClick={setSelectedJob}
+                        onEdit={openEditModal}
+                        onRefresh={fetchJobs}
+                        onDelete={handleDelete}
+                        onRetry={handleRetry}
+                        onCancel={handleCancel}
+                        // Pagination Props
+                        currentPage={currentPage}
+                        totalPages={totalPages}
+                        onPageChange={setCurrentPage}
+                        itemsPerPage={itemsPerPage}
+                        onItemsPerPageChange={setItemsPerPage}
+                        totalItems={filteredJobs.length}
+                    />
+                </div>
+        </div>
+      </main>
+      {/* Job Details Modal */}
+      <JobDetails job={selectedJob} onClose={() => setSelectedJob(null)} />
+      {/* Create/Edit Job Modal */}
+      <JobFormModal
+        isOpen={isFormOpen}
+        onClose={() => setIsFormOpen(false)}
+        onSave={handleSaveJob}
+        job={editingJob}
+      />
+    </div>
+  );
+}
+export default App;

package/src/components/JobDetails.tsx ADDED Viewed

@@ -0,0 +1,124 @@
+import { X } from 'lucide-react';
+import type { Job } from '../types/job';
+import { formatDate, getStatusColor } from '../utils/helpers';
+interface JobDetailsProps {
+  job: Job | null;
+  onClose: () => void;
+}
+export default function JobDetails({ job, onClose }: JobDetailsProps) {
+  if (!job) return null;
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+      <div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-hidden border border-gray-700">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-700">
+          <div>
+            <h2 className="text-2xl font-bold text-white">{job.name}</h2>
+            <span className={`inline-block mt-2 px-3 py-1 rounded text-sm border ${getStatusColor(job.status)}`}>
+              {job.status}
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-lg hover:bg-gray-700/50 transition-colors"
+          >
+            <X className="w-6 h-6 text-gray-400" />
+          </button>
+        </div>
+        {/* Content */}
+        <div className="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
+          <div className="space-y-6">
+            {/* Basic Info */}
+            <div>
+              <h3 className="text-sm font-semibold text-gray-400 uppercase mb-3">Basic Info</h3>
+              <div className="grid grid-cols-2 gap-4">
+                <InfoItem label="ID" value={job._id} />
+                <InfoItem label="Attempts" value={job.attempts.toString()} />
+                <InfoItem label="Created" value={formatDate(job.createdAt)} />
+                <InfoItem label="Updated" value={formatDate(job.updatedAt)} />
+              </div>
+            </div>
+            {/* Schedule */}
+            {(job.nextRunAt || job.lastRunAt) && (
+              <div>
+                <h3 className="text-sm font-semibold text-gray-400 uppercase mb-3">Schedule</h3>
+                <div className="grid grid-cols-2 gap-4">
+                  {job.nextRunAt && <InfoItem label="Next Run" value={formatDate(job.nextRunAt)} />}
+                  {job.lastRunAt && <InfoItem label="Last Run" value={formatDate(job.lastRunAt)} />}
+                </div>
+              </div>
+            )}
+            {/* Repeat */}
+            {job.repeat && (
+              <div>
+                <h3 className="text-sm font-semibold text-gray-400 uppercase mb-3">Repeat</h3>
+                <div className="bg-gray-800/50 rounded-lg p-4">
+                  {job.repeat.cron && <InfoItem label="Cron" value={job.repeat.cron} />}
+                  {job.repeat.every && <InfoItem label="Every" value={`${job.repeat.every}ms`} />}
+                  {job.repeat.timezone && <InfoItem label="Timezone" value={job.repeat.timezone} />}
+                </div>
+              </div>
+            )}
+            {/* Retry */}
+            {job.retry && (
+              <div>
+                <h3 className="text-sm font-semibold text-gray-400 uppercase mb-3">Retry</h3>
+                <div className="bg-gray-800/50 rounded-lg p-4">
+                  <InfoItem label="Max Attempts" value={job.retry.maxAttempts.toString()} />
+                  <InfoItem label="Delay" value={typeof job.retry.delay === 'number' ? `${job.retry.delay}ms` : 'Dynamic'} />
+                </div>
+              </div>
+            )}
+            {/* Lock Info */}
+            {job.lockedBy && (
+              <div>
+                <h3 className="text-sm font-semibold text-gray-400 uppercase mb-3">Lock Info</h3>
+                <div className="bg-gray-800/50 rounded-lg p-4">
+                  <InfoItem label="Locked By" value={job.lockedBy} />
+                  {job.lockedAt && <InfoItem label="Locked At" value={formatDate(job.lockedAt)} />}
+                </div>
+              </div>
+            )}
+            {/* Error */}
+            {job.lastError && (
+              <div>
+                <h3 className="text-sm font-semibold text-gray-400 uppercase mb-3">Last Error</h3>
+                <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4 text-red-400 text-sm font-mono">
+                  {job.lastError}
+                </div>
+              </div>
+            )}
+            {/* Data */}
+            {job.data && (
+              <div>
+                <h3 className="text-sm font-semibold text-gray-400 uppercase mb-3">Data</h3>
+                <pre className="bg-gray-800/50 rounded-lg p-4 text-sm text-gray-300 overflow-x-auto">
+                  {JSON.stringify(job.data, null, 2)}
+                </pre>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+function InfoItem({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="mb-2">
+      <div className="text-xs text-gray-500 mb-1">{label}</div>
+      <div className="text-sm text-white">{value}</div>
+    </div>
+  );
+}

package/src/components/JobFilters.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+import { Search, Filter } from 'lucide-react';
+import { useState } from 'react';
+interface JobFiltersProps {
+  onFilterChange: (filters: { status?: string; search?: string }) => void;
+}
+export default function JobFilters({ onFilterChange }: JobFiltersProps) {
+  const [search, setSearch] = useState('');
+  const [selectedStatus, setSelectedStatus] = useState<string>('all');
+  const handleSearchChange = (value: string) => {
+    setSearch(value);
+    onFilterChange({ status: selectedStatus === 'all' ? undefined : selectedStatus, search: value });
+  };
+  const handleStatusChange = (status: string) => {
+    setSelectedStatus(status);
+    onFilterChange({ status: status === 'all' ? undefined : status, search });
+  };
+  const statuses = ['all', 'pending', 'running', 'completed', 'failed', 'cancelled'];
+  return (
+    <div className="mb-6 space-y-4">
+      {/* Search */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+        <input
+          type="text"
+          placeholder="Search jobs by name..."
+          value={search}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          className="w-full pl-10 pr-4 py-3 bg-gray-800/50 border border-gray-700/50 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/20 transition-all"
+        />
+      </div>
+      {/* Status Filter */}
+      <div className="flex items-center gap-3">
+        <Filter className="w-5 h-5 text-gray-400" />
+        <div className="flex flex-wrap gap-2">
+          {statuses.map((status) => (
+            <button
+              key={status}
+              onClick={() => handleStatusChange(status)}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                selectedStatus === status
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-gray-800/50 text-gray-400 hover:bg-gray-700/50'
+              }`}
+            >
+              {status.charAt(0).toUpperCase() + status.slice(1)}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}