various changes
This commit is contained in:
493
src/components/TRip/RequestManagement.jsx
Normal file
493
src/components/TRip/RequestManagement.jsx
Normal file
@@ -0,0 +1,493 @@
|
||||
import React, { useState, useEffect, Suspense, lazy } from "react";
|
||||
import { toast } from 'react-toastify';
|
||||
import { DataTable } from "primereact/datatable";
|
||||
import { Column } from "primereact/column";
|
||||
import { Dropdown } from "primereact/dropdown";
|
||||
import { Button } from "@mui/joy";
|
||||
import { Dialog } from "primereact/dialog";
|
||||
import { confirmDialog, ConfirmDialog } from "primereact/confirmdialog";
|
||||
import BreadcrumbNav from "./BreadcrumbNav";
|
||||
|
||||
|
||||
const STATUS_OPTIONS = ["Pending", "Completed", "Failed"];
|
||||
const TYPE_OPTIONS = ["Artist", "Album", "Track"];
|
||||
|
||||
const initialRequests = [
|
||||
{
|
||||
id: 1,
|
||||
type: "Artist",
|
||||
artist: "Bring Me The Horizon",
|
||||
album: "",
|
||||
track: "",
|
||||
status: "Pending",
|
||||
details: {
|
||||
requestedBy: "codey",
|
||||
timestamp: "2025-07-01T12:00:00Z",
|
||||
comments: "",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: "Track",
|
||||
artist: "We Butter The Bread With Butter",
|
||||
album: "Das Album",
|
||||
track: "20 km/h",
|
||||
status: "Failed",
|
||||
details: {
|
||||
requestedBy: "codey",
|
||||
timestamp: "2025-06-11T09:00:00Z",
|
||||
comments: "Track not found in external database.",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: "Track",
|
||||
artist: "We Butter The Bread With Butter",
|
||||
album: "Das Album",
|
||||
track: "20 km/h",
|
||||
status: "Completed",
|
||||
details: {
|
||||
requestedBy: "codey",
|
||||
timestamp: "2025-06-11T09:00:00Z",
|
||||
comments: "Track retrieved successfully.",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export default function RequestManagement() {
|
||||
const [requests, setRequests] = useState(initialRequests);
|
||||
const [filterType, setFilterType] = useState(null);
|
||||
const [filterStatus, setFilterStatus] = useState(null);
|
||||
const [filteredRequests, setFilteredRequests] = useState(initialRequests);
|
||||
const [selectedRequest, setSelectedRequest] = useState(null);
|
||||
const [isDialogVisible, setIsDialogVisible] = useState(false);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
let filtered = [...requests];
|
||||
if (filterType) {
|
||||
filtered = filtered.filter((r) => r.type === filterType);
|
||||
}
|
||||
if (filterStatus) {
|
||||
filtered = filtered.filter((r) => r.status === filterStatus);
|
||||
}
|
||||
setFilteredRequests(filtered);
|
||||
}, [filterType, filterStatus, requests]);
|
||||
|
||||
const getStatusTextColor = (status) => {
|
||||
switch (status) {
|
||||
case "Pending":
|
||||
return "text-yellow-500";
|
||||
case "Completed":
|
||||
return "text-green-500";
|
||||
case "Failed":
|
||||
return "text-red-500";
|
||||
default:
|
||||
return "text-neutral-500";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const confirmDelete = (requestId) => {
|
||||
confirmDialog({
|
||||
message: "Are you sure you want to delete this request?",
|
||||
header: "Confirm Delete",
|
||||
icon: "pi pi-exclamation-triangle",
|
||||
accept: () => deleteRequest(requestId),
|
||||
});
|
||||
};
|
||||
|
||||
const deleteRequest = (requestId) => {
|
||||
setRequests((prev) => prev.filter((r) => r.id !== requestId));
|
||||
toast.success("Request deleted");
|
||||
};
|
||||
|
||||
const statusBodyTemplate = (rowData) => {
|
||||
let colorClass = "";
|
||||
|
||||
switch (rowData.status) {
|
||||
case "Pending":
|
||||
colorClass = "bg-yellow-300 text-yellow-900";
|
||||
break;
|
||||
case "Completed":
|
||||
colorClass = "bg-green-300 text-green-900";
|
||||
break;
|
||||
case "Failed":
|
||||
colorClass = "bg-red-300 text-red-900";
|
||||
break;
|
||||
default:
|
||||
colorClass = "bg-gray-300 text-gray-900";
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`inline-block px-3 py-1 rounded-full font-semibold text-sm ${colorClass}`}
|
||||
aria-label={`Status: ${rowData.status}`}
|
||||
>
|
||||
{rowData.status}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData) => {
|
||||
return (
|
||||
<Button
|
||||
color="danger"
|
||||
size="sm"
|
||||
onClick={() => confirmDelete(rowData.id)}
|
||||
variant="outlined"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-white dark:bg-neutral-900 dark:text-neutral-100 rounded-xl shadow-md border border-neutral-200 dark:border-neutral-700 p-6 space-y-6"
|
||||
style={{ display: "inline-block" }}
|
||||
>
|
||||
<style>{`
|
||||
.p-datatable {
|
||||
background-color: white;
|
||||
color: #1a1a1a;
|
||||
border-color: #ccc;
|
||||
}
|
||||
.p-datatable-header {
|
||||
background-color: #f9f9f9;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.p-datatable-thead > tr > th {
|
||||
background-color: #f0f0f0;
|
||||
color: #222;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.p-datatable-tbody > tr > td {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Dark mode improvements with brighter text */
|
||||
[data-theme="dark"] .p-datatable {
|
||||
background-color: #121212;
|
||||
color: #f0f0f0; /* brighter text */
|
||||
border-color: #333;
|
||||
}
|
||||
[data-theme="dark"] .p-datatable-header {
|
||||
background-color: #1f1f1f;
|
||||
color: #f5f5f5; /* brighter */
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
[data-theme="dark"] .p-datatable-thead > tr > th {
|
||||
background-color: #222222;
|
||||
color: #f5f5f5; /* brighter */
|
||||
border-bottom: 1px solid #555;
|
||||
}
|
||||
[data-theme="dark"] .p-datatable-tbody > tr {
|
||||
background-color: #1a1a1a;
|
||||
border-bottom: 1px solid #333;
|
||||
transition: background-color 0.2s ease;
|
||||
color: #f0f0f0; /* brighter text */
|
||||
}
|
||||
/* Zebra stripes */
|
||||
[data-theme="dark"] .p-datatable-tbody > tr:nth-child(odd) {
|
||||
background-color: #181818;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
/* Hover effect */
|
||||
[data-theme="dark"] .p-datatable-tbody > tr:hover {
|
||||
background-color: #333333;
|
||||
cursor: pointer;
|
||||
color: #fff; /* brightest on hover */
|
||||
}
|
||||
|
||||
/* Dropdown inside dark mode */
|
||||
[data-theme="dark"] .p-dropdown,
|
||||
[data-theme="dark"] .p-dropdown-label,
|
||||
[data-theme="dark"] .p-dropdown-panel,
|
||||
[data-theme="dark"] .p-dropdown-item {
|
||||
background-color: #2a2a2a !important;
|
||||
color: #f0f0f0 !important; /* brighter */
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
[data-theme="dark"] .p-button {
|
||||
background-color: transparent !important;
|
||||
color: #f0f0f0 !important; /* brighter */
|
||||
border-color: #555 !important;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
[data-theme="dark"] .p-button:hover {
|
||||
background-color: #555 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
[data-theme="dark"] .p-button.p-button-danger {
|
||||
border-color: #ff4d4f !important;
|
||||
color: #ff4d4f !important;
|
||||
}
|
||||
[data-theme="dark"] .p-button.p-button-danger:hover {
|
||||
background-color: #ff4d4f !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
/* ===== PrimeReact Paginator Light Mode ===== */
|
||||
.p-paginator {
|
||||
background-color: #fff;
|
||||
color: #1a1a1a;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.p-paginator .p-paginator-page,
|
||||
.p-paginator .p-paginator-next,
|
||||
.p-paginator .p-paginator-prev {
|
||||
color: #1a1a1a;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
.p-paginator .p-highlight {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* ===== PrimeReact Paginator Dark Mode ===== */
|
||||
[data-theme="dark"] .p-paginator {
|
||||
background-color: #121212;
|
||||
color: #f0f0f0;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
[data-theme="dark"] .p-paginator .p-paginator-page,
|
||||
[data-theme="dark"] .p-paginator .p-paginator-next,
|
||||
[data-theme="dark"] .p-paginator .p-paginator-prev {
|
||||
color: #ccc;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
[data-theme="dark"] .p-paginator .p-paginator-page:hover,
|
||||
[data-theme="dark"] .p-paginator .p-paginator-next:hover,
|
||||
[data-theme="dark"] .p-paginator .p-paginator-prev:hover {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
[data-theme="dark"] .p-paginator .p-highlight {
|
||||
background-color: #3b82f6; /* Tailwind blue-500 */
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.p-paginator .p-paginator-first,
|
||||
.p-paginator .p-paginator-last {
|
||||
color: #1a1a1a;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.p-paginator .p-paginator-first:hover,
|
||||
.p-paginator .p-paginator-last:hover {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Dark Mode: First/Last page buttons */
|
||||
[data-theme="dark"] .p-paginator .p-paginator-first,
|
||||
[data-theme="dark"] .p-paginator .p-paginator-last {
|
||||
color: #ccc;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
[data-theme="dark"] .p-paginator .p-paginator-first:hover,
|
||||
[data-theme="dark"] .p-paginator .p-paginator-last:hover {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
/* ConfirmDialog - Light Theme */
|
||||
.p-confirm-dialog {
|
||||
background-color: #ffffff;
|
||||
color: #1a1a1a;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.p-confirm-dialog .p-dialog-header {
|
||||
background-color: #f5f5f5;
|
||||
color: #222;
|
||||
}
|
||||
.p-confirm-dialog .p-dialog-content {
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
}
|
||||
.p-confirm-dialog .p-dialog-footer {
|
||||
background-color: #fafafa;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.p-confirm-dialog .p-button {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* ConfirmDialog - Dark Theme */
|
||||
[data-theme='dark'] .p-confirm-dialog {
|
||||
background-color: #2a2a2a;
|
||||
color: #e5e5e5;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
[data-theme='dark'] .p-confirm-dialog .p-dialog-header {
|
||||
background-color: #1f1f1f;
|
||||
color: #ddd;
|
||||
}
|
||||
[data-theme='dark'] .p-confirm-dialog .p-dialog-content {
|
||||
background-color: #2a2a2a;
|
||||
color: #ccc;
|
||||
}
|
||||
[data-theme='dark'] .p-confirm-dialog .p-dialog-footer {
|
||||
background-color: #242424;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
[data-theme='dark'] .p-confirm-dialog .p-button {
|
||||
background-color: transparent !important;
|
||||
color: #ddd !important;
|
||||
border-color: #555 !important;
|
||||
}
|
||||
[data-theme='dark'] .p-confirm-dialog .p-button.p-button-danger {
|
||||
color: #ff4d4f !important;
|
||||
border-color: #ff4d4f !important;
|
||||
}
|
||||
[data-theme='dark'] .p-dialog-title {
|
||||
color: #eee;
|
||||
}
|
||||
[data-theme='dark'] .p-dialog-header-icon {
|
||||
color: #ccc;
|
||||
}
|
||||
/* PrimeReact Dialog Theming */
|
||||
.p-dialog {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .p-dialog {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .p-dialog .p-dialog-header {
|
||||
background-color: #1e1e1e;
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .p-dialog .p-dialog-content {
|
||||
background-color: #2a2a2a;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .p-dialog .p-dialog-footer {
|
||||
background-color: #1e1e1e;
|
||||
border-top: 1px solid #444;
|
||||
}
|
||||
|
||||
|
||||
`}</style>
|
||||
<BreadcrumbNav currentPage="management" />
|
||||
<h2 className="text-3xl font-semibold" style={{ marginTop: 0 }}>
|
||||
Media Request Management
|
||||
</h2>
|
||||
|
||||
<div className="flex flex-wrap gap-6 mb-6">
|
||||
<Dropdown
|
||||
value={filterType}
|
||||
options={[
|
||||
{ label: "All Types", value: null },
|
||||
...TYPE_OPTIONS.map((t) => ({ label: t, value: t })),
|
||||
]}
|
||||
onChange={(e) => setFilterType(e.value)}
|
||||
placeholder="Filter by Type"
|
||||
className="min-w-[180px]"
|
||||
/>
|
||||
<Dropdown
|
||||
value={filterStatus}
|
||||
options={[
|
||||
{ label: "All Statuses", value: null },
|
||||
...STATUS_OPTIONS.map((s) => ({ label: s, value: s })),
|
||||
]}
|
||||
onChange={(e) => setFilterStatus(e.value)}
|
||||
placeholder="Filter by Status"
|
||||
className="min-w-[180px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
value={filteredRequests}
|
||||
paginator
|
||||
rows={10}
|
||||
removableSort
|
||||
sortMode="multiple"
|
||||
emptyMessage="No requests found."
|
||||
rowClassName="!py-4"
|
||||
className="min-w-full bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100"
|
||||
onRowClick={(e) => {
|
||||
setSelectedRequest(e.data);
|
||||
setIsDialogVisible(true);
|
||||
}}
|
||||
>
|
||||
<Column field="id" header="ID" sortable style={{ width: "5rem" }} />
|
||||
<Column field="type" header="Type" sortable />
|
||||
<Column field="artist" header="Artist" sortable />
|
||||
<Column field="album" header="Album" sortable />
|
||||
<Column field="track" header="Track" sortable />
|
||||
<Column
|
||||
field="status"
|
||||
header="Status"
|
||||
body={statusBodyTemplate}
|
||||
style={{ width: "10rem", textAlign: "center" }}
|
||||
sortable
|
||||
/>
|
||||
<Column
|
||||
body={actionBodyTemplate}
|
||||
header="Actions"
|
||||
style={{ width: "9rem", textAlign: "center" }}
|
||||
/>
|
||||
</DataTable>
|
||||
<ConfirmDialog />
|
||||
<Dialog
|
||||
header="Request Details"
|
||||
visible={isDialogVisible}
|
||||
style={{ width: "500px" }}
|
||||
onHide={() => setIsDialogVisible(false)}
|
||||
breakpoints={{ '960px': '95vw' }}
|
||||
modal
|
||||
dismissableMask
|
||||
>
|
||||
{selectedRequest && (
|
||||
<div className="space-y-4 text-sm">
|
||||
<p><strong>ID:</strong> {selectedRequest.id}</p>
|
||||
<p><strong>Type:</strong> {selectedRequest.type}</p>
|
||||
<p><strong>Artist:</strong> {selectedRequest.artist}</p>
|
||||
{selectedRequest.album && <p><strong>Album:</strong> {selectedRequest.album}</p>}
|
||||
{selectedRequest.track && <p><strong>Track:</strong> {selectedRequest.track}</p>}
|
||||
<p className="text-sm flex items-center gap-2">
|
||||
<span className="font-semibold">Status:</span>
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded-full text-xs font-bold ${selectedRequest.status === "Pending"
|
||||
? "bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100"
|
||||
: selectedRequest.status === "Completed"
|
||||
? "bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100"
|
||||
: "bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100"
|
||||
}`}
|
||||
>
|
||||
{selectedRequest.status}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
|
||||
{selectedRequest.details && (
|
||||
<>
|
||||
<p><strong>Requested By:</strong> {selectedRequest.details.requestedBy}</p>
|
||||
<p><strong>Timestamp:</strong> {new Date(selectedRequest.details.timestamp).toLocaleString()}</p>
|
||||
{selectedRequest.details.comments && (
|
||||
<p><strong>Comments:</strong> {selectedRequest.details.comments}</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Dialog>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user