Update API Keys and fix frontend bugs
This commit is contained in:
+1038
-1038
File diff suppressed because it is too large
Load Diff
+340
-338
@@ -1,338 +1,340 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import API_BASE_URL from './config';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { FiSearch, FiSettings, FiHelpCircle, FiChevronLeft, FiChevronRight, FiLogOut, FiArrowLeft, FiArrowRight } from 'react-icons/fi';
|
||||
import { HiOutlineDocumentText, HiOutlineUserGroup } from 'react-icons/hi';
|
||||
|
||||
const DashboardPage = () => {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [users, setUsers] = useState([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/dashboard/users`);
|
||||
const data = await res.json();
|
||||
setUsers(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch users", err);
|
||||
}
|
||||
};
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
const handleLogout = () => {
|
||||
// Here you would clear any persisted auth state if it existed
|
||||
navigate('/admin');
|
||||
};
|
||||
const [showSupportModal, setShowSupportModal] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState('reports');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const ITEMS_PER_PAGE = 8;
|
||||
|
||||
// Settings state
|
||||
const [settings, setSettings] = useState({
|
||||
siteName: 'Limelite Face Analyzer',
|
||||
adminEmail: 'olivia@limelite.com',
|
||||
whatsappNotifications: true,
|
||||
autoArchive: false
|
||||
});
|
||||
|
||||
|
||||
// Load users from backend
|
||||
const reports = users.map(user => ({
|
||||
id: user.phone,
|
||||
name: user.name,
|
||||
phone: user.phone,
|
||||
report: 'View Link',
|
||||
link: user.lastLink
|
||||
}));
|
||||
|
||||
const filteredReports = reports.filter(report =>
|
||||
report.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
report.phone.includes(searchTerm)
|
||||
);
|
||||
|
||||
const totalPages = Math.ceil(filteredReports.length / ITEMS_PER_PAGE);
|
||||
const paginatedReports = filteredReports.slice(
|
||||
(currentPage - 1) * ITEMS_PER_PAGE,
|
||||
currentPage * ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
const handlePageChange = (newPage) => {
|
||||
if (newPage >= 1 && newPage <= totalPages) {
|
||||
setCurrentPage(newPage);
|
||||
}
|
||||
};
|
||||
|
||||
const renderPageNumbers = () => {
|
||||
const pages = [];
|
||||
if (totalPages <= 7) {
|
||||
for (let i = 1; i <= totalPages; i++) pages.push(i);
|
||||
} else {
|
||||
if (currentPage <= 4) {
|
||||
pages.push(1, 2, 3, 4, 5, '...', totalPages);
|
||||
} else if (currentPage >= totalPages - 3) {
|
||||
pages.push(1, '...', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
|
||||
} else {
|
||||
pages.push(1, '...', currentPage - 1, currentPage, currentPage + 1, '...', totalPages);
|
||||
}
|
||||
}
|
||||
|
||||
return pages.map((page, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => typeof page === 'number' && handlePageChange(page)}
|
||||
className={`min-w-[40px] h-10 flex items-center justify-center text-sm font-semibold transition-all duration-200 rounded-lg ${currentPage === page
|
||||
? 'bg-gray-50 text-gray-900'
|
||||
: typeof page === 'number'
|
||||
? 'text-gray-500 hover:text-gray-900 hover:bg-gray-50'
|
||||
: 'text-gray-400 cursor-default'
|
||||
}`}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
));
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-[#F8F9FA] font-sans">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 bg-limelite-red text-white flex flex-col shrink-0">
|
||||
<div className="p-6 mb-4">
|
||||
<img src={process.env.PUBLIC_URL + '/assets/images/logo.jpg'} alt="LIMELITE" className="h-10 w-auto brightness-0 invert" />
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-0 mt-4">
|
||||
<div
|
||||
onClick={() => setActiveTab('reports')}
|
||||
className={`flex items-center gap-3 px-6 py-4 cursor-pointer transition-colors ${activeTab === 'reports' ? 'bg-white text-limelite-red' : 'text-white hover:bg-white/10'}`}
|
||||
>
|
||||
<HiOutlineDocumentText className="text-xl" />
|
||||
<span className="font-bold uppercase tracking-wider text-xs">Reports</span>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setShowSupportModal(true)}
|
||||
className="text-white hover:bg-white/10 flex items-center gap-3 px-6 py-4 transition-colors cursor-pointer"
|
||||
>
|
||||
<FiHelpCircle className="text-xl" />
|
||||
<span className="font-bold uppercase tracking-wider text-xs">Support</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="px-0 space-y-0 mb-6 border-t border-white/10">
|
||||
<div
|
||||
onClick={() => setActiveTab('settings')}
|
||||
className={`flex items-center gap-3 px-6 py-4 cursor-pointer transition-colors ${activeTab === 'settings' ? 'bg-white text-limelite-red' : 'text-white hover:bg-white/10'}`}
|
||||
>
|
||||
<FiSettings className="text-xl" />
|
||||
<span className="font-bold uppercase tracking-wider text-xs">Settings</span>
|
||||
</div>
|
||||
<div className="hover:bg-white/10 text-white flex items-center gap-3 px-6 py-5 transition-colors cursor-pointer border-t border-white/10">
|
||||
<div className="flex items-center gap-3 w-full">
|
||||
<div className="w-10 h-10 bg-limelite-maroon rounded-full flex items-center justify-center overflow-hidden border border-white/30 text-white font-bold text-sm">
|
||||
LA
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-[13px] font-bold truncate">Limelite Admin</p>
|
||||
<p className="text-[10px] text-white/70 truncate tracking-wide">8778913301</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-lg opacity-70 hover:opacity-100 transition-opacity p-1 ml-auto"
|
||||
title="Logout"
|
||||
>
|
||||
<FiLogOut />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
{/* Header */}
|
||||
<header className="h-16 bg-white border-b flex items-center justify-between px-8 shrink-0">
|
||||
<h1 className="text-xl font-bold text-gray-800">
|
||||
{activeTab === 'reports' ? 'Welcome back, Admin' : 'System Settings'}
|
||||
</h1>
|
||||
|
||||
{activeTab === 'reports' && (
|
||||
<div className="relative w-80">
|
||||
<FiSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:ring-1 focus:ring-limelite-red text-sm text-gray-900"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 overflow-auto p-8">
|
||||
{activeTab === 'reports' ? (
|
||||
<div className="bg-white border border-gray-200 shadow-sm overflow-hidden flex flex-col min-h-[600px]">
|
||||
<div className="p-6 border-b flex items-center justify-between">
|
||||
<h2 className="text-lg font-bold text-gray-800">Reports</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex-1 overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead className="bg-[#F9FAFB] border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider w-16">S.No</th>
|
||||
<th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">Name</th>
|
||||
<th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">Mobile Number</th>
|
||||
<th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">Report</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{paginatedReports.map((report, index) => (
|
||||
<tr key={report.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-6 py-4 text-sm text-gray-500 font-medium">{(currentPage - 1) * ITEMS_PER_PAGE + index + 1}</td>
|
||||
<td className="px-6 py-4 text-sm font-medium text-gray-700">{report.name}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">{report.phone}</td>
|
||||
<td className="px-6 py-4 text-sm text-limelite-red font-semibold truncate max-w-[200px]">
|
||||
<a href={report.link} target="_blank" rel="noopener noreferrer" className="hover:underline">
|
||||
{report.link ? report.link.substring(report.link.indexOf('result')) : '-'}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="p-6 border-t flex items-center justify-between bg-white shrink-0">
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-gray-200 rounded-lg text-sm font-bold text-black hover:bg-gray-50 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
|
||||
>
|
||||
<FiArrowLeft className="text-lg" />
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{renderPageNumbers()}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-gray-200 rounded-lg text-sm font-bold text-black hover:bg-gray-50 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
|
||||
>
|
||||
Next
|
||||
<FiArrowRight className="text-lg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white border border-gray-200 shadow-sm p-8 max-w-2xl">
|
||||
<h2 className="text-xl font-bold text-gray-800 mb-8 pb-4 border-b">General Settings</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<label className="text-sm font-bold text-gray-700 uppercase">Site Name</label>
|
||||
<input
|
||||
type="text"
|
||||
className="col-span-2 border-b-2 py-2 focus:outline-none focus:border-limelite-red transition-colors"
|
||||
value={settings.siteName}
|
||||
onChange={(e) => setSettings({ ...settings, siteName: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<label className="text-sm font-bold text-gray-700 uppercase">Admin Email</label>
|
||||
<input
|
||||
type="email"
|
||||
className="col-span-2 border-b-2 py-2 focus:outline-none focus:border-[#C7372C] transition-colors"
|
||||
value={settings.adminEmail}
|
||||
onChange={(e) => setSettings({ ...settings, adminEmail: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-4 border-t">
|
||||
<div>
|
||||
<p className="font-bold text-gray-800">WhatsApp Notifications</p>
|
||||
<p className="text-sm text-gray-500">Send automatic alerts for new analysis signups</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSettings({ ...settings, whatsappNotifications: !settings.whatsappNotifications })}
|
||||
className={`w-12 h-6 rounded-full transition-colors relative ${settings.whatsappNotifications ? 'bg-green-500' : 'bg-gray-300'}`}
|
||||
>
|
||||
<div className={`absolute top-1 bg-white w-4 h-4 rounded-full transition-transform ${settings.whatsappNotifications ? 'translate-x-7' : 'translate-x-1'}`}></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-4 border-t">
|
||||
<div>
|
||||
<p className="font-bold text-gray-800">Auto-Archive Reports</p>
|
||||
<p className="text-sm text-gray-500">Automatically archive reports older than 30 days</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSettings({ ...settings, autoArchive: !settings.autoArchive })}
|
||||
className={`w-12 h-6 rounded-full transition-colors relative ${settings.autoArchive ? 'bg-limelite-red' : 'bg-gray-300'}`}
|
||||
>
|
||||
<div className={`absolute top-1 bg-white w-4 h-4 rounded-full transition-transform ${settings.autoArchive ? 'translate-x-7' : 'translate-x-1'}`}></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pt-6">
|
||||
<button className="bg-limelite-red text-white px-8 py-3 font-bold uppercase tracking-widest hover:bg-limelite-maroon transition-colors">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Support Modal */}
|
||||
{showSupportModal && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
||||
<div className="bg-white w-full max-w-lg p-10 relative shadow-2xl animate-[fadeIn_0.2s_ease-out] rounded-none">
|
||||
<div className="flex justify-between items-center mb-10">
|
||||
<h2 className="text-4xl font-bold text-[#18181b]">Help</h2>
|
||||
<button
|
||||
onClick={() => setShowSupportModal(false)}
|
||||
className="text-gray-900 hover:text-black transition-colors"
|
||||
>
|
||||
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-2 h-2 rounded-full bg-gray-500 mt-2.5 shrink-0"></div>
|
||||
<p className="text-xl text-gray-600 leading-relaxed">
|
||||
To access previous reports, please contact us at <i className="text-gray-800 font-medium">hello@limelite.com</i>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-2 h-2 rounded-full bg-gray-500 mt-2.5 shrink-0"></div>
|
||||
<p className="text-xl text-gray-600 leading-relaxed">
|
||||
If you experience any technical issues, please contact us at <i className="text-gray-800 font-medium">support@example.com</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardPage;
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import API_BASE_URL from './config';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { FiSearch, FiSettings, FiHelpCircle, FiChevronLeft, FiChevronRight, FiLogOut, FiArrowLeft, FiArrowRight } from 'react-icons/fi';
|
||||
import { HiOutlineDocumentText, HiOutlineUserGroup } from 'react-icons/hi';
|
||||
|
||||
const DashboardPage = () => {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [users, setUsers] = useState([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/dashboard/users`);
|
||||
const data = await res.json();
|
||||
setUsers(data);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch users", err);
|
||||
}
|
||||
};
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
const handleLogout = () => {
|
||||
// Here you would clear any persisted auth state if it existed
|
||||
navigate('/admin');
|
||||
};
|
||||
const [showSupportModal, setShowSupportModal] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState('reports');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const ITEMS_PER_PAGE = 8;
|
||||
|
||||
// Settings state
|
||||
const [settings, setSettings] = useState({
|
||||
siteName: 'Limelite Face Analyzer',
|
||||
adminEmail: 'olivia@limelite.com',
|
||||
whatsappNotifications: true,
|
||||
autoArchive: false
|
||||
});
|
||||
|
||||
|
||||
// Load users from backend
|
||||
const reports = users.map(user => ({
|
||||
id: user.phone,
|
||||
name: user.name,
|
||||
phone: user.phone,
|
||||
report: 'View Link',
|
||||
link: user.lastLink
|
||||
}));
|
||||
|
||||
const filteredReports = reports.filter(report =>
|
||||
report.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
report.phone.includes(searchTerm)
|
||||
);
|
||||
|
||||
const totalPages = Math.ceil(filteredReports.length / ITEMS_PER_PAGE);
|
||||
const paginatedReports = filteredReports.slice(
|
||||
(currentPage - 1) * ITEMS_PER_PAGE,
|
||||
currentPage * ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
const handlePageChange = (newPage) => {
|
||||
if (newPage >= 1 && newPage <= totalPages) {
|
||||
setCurrentPage(newPage);
|
||||
}
|
||||
};
|
||||
|
||||
const renderPageNumbers = () => {
|
||||
const pages = [];
|
||||
if (totalPages <= 7) {
|
||||
for (let i = 1; i <= totalPages; i++) pages.push(i);
|
||||
} else {
|
||||
if (currentPage <= 4) {
|
||||
pages.push(1, 2, 3, 4, 5, '...', totalPages);
|
||||
} else if (currentPage >= totalPages - 3) {
|
||||
pages.push(1, '...', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
|
||||
} else {
|
||||
pages.push(1, '...', currentPage - 1, currentPage, currentPage + 1, '...', totalPages);
|
||||
}
|
||||
}
|
||||
|
||||
return pages.map((page, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => typeof page === 'number' && handlePageChange(page)}
|
||||
className={`min-w-[40px] h-10 flex items-center justify-center text-sm font-semibold transition-all duration-200 rounded-lg ${currentPage === page
|
||||
? 'bg-gray-50 text-gray-900'
|
||||
: typeof page === 'number'
|
||||
? 'text-gray-500 hover:text-gray-900 hover:bg-gray-50'
|
||||
: 'text-gray-400 cursor-default'
|
||||
}`}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
));
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-[#F8F9FA] font-sans">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 bg-limelite-red text-white flex flex-col shrink-0">
|
||||
<div className="p-6 mb-4">
|
||||
<img src={process.env.PUBLIC_URL + '/assets/images/logo.jpg'} alt="LIMELITE" className="h-10 w-auto brightness-0 invert" />
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-0 mt-4">
|
||||
<div
|
||||
onClick={() => setActiveTab('reports')}
|
||||
className={`flex items-center gap-3 px-6 py-4 cursor-pointer transition-colors ${activeTab === 'reports' ? 'bg-white text-limelite-red' : 'text-white hover:bg-white/10'}`}
|
||||
>
|
||||
<HiOutlineDocumentText className="text-xl" />
|
||||
<span className="font-bold uppercase tracking-wider text-xs">Reports</span>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setShowSupportModal(true)}
|
||||
className="text-white hover:bg-white/10 flex items-center gap-3 px-6 py-4 transition-colors cursor-pointer"
|
||||
>
|
||||
<FiHelpCircle className="text-xl" />
|
||||
<span className="font-bold uppercase tracking-wider text-xs">Support</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="px-0 space-y-0 mb-6 border-t border-white/10">
|
||||
<div
|
||||
onClick={() => setActiveTab('settings')}
|
||||
className={`flex items-center gap-3 px-6 py-4 cursor-pointer transition-colors ${activeTab === 'settings' ? 'bg-white text-limelite-red' : 'text-white hover:bg-white/10'}`}
|
||||
>
|
||||
<FiSettings className="text-xl" />
|
||||
<span className="font-bold uppercase tracking-wider text-xs">Settings</span>
|
||||
</div>
|
||||
<div className="hover:bg-white/10 text-white flex items-center gap-3 px-6 py-5 transition-colors cursor-pointer border-t border-white/10">
|
||||
<div className="flex items-center gap-3 w-full">
|
||||
<div className="w-10 h-10 bg-limelite-maroon rounded-full flex items-center justify-center overflow-hidden border border-white/30 text-white font-bold text-sm">
|
||||
LA
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-[13px] font-bold truncate">Limelite Admin</p>
|
||||
<p className="text-[10px] text-white/70 truncate tracking-wide">8778913301</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-lg opacity-70 hover:opacity-100 transition-opacity p-1 ml-auto"
|
||||
title="Logout"
|
||||
>
|
||||
<FiLogOut />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
{/* Header */}
|
||||
<header className="h-16 bg-white border-b flex items-center justify-between px-8 shrink-0">
|
||||
<h1 className="text-xl font-bold text-gray-800">
|
||||
{activeTab === 'reports' ? 'Welcome back, Admin' : 'System Settings'}
|
||||
</h1>
|
||||
|
||||
{activeTab === 'reports' && (
|
||||
<div className="relative w-80">
|
||||
<FiSearch className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
className="w-full bg-gray-50 border border-gray-200 rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:ring-1 focus:ring-limelite-red text-sm text-gray-900"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 overflow-auto p-8">
|
||||
{activeTab === 'reports' ? (
|
||||
<div className="bg-white border border-gray-200 shadow-sm overflow-hidden flex flex-col min-h-[600px]">
|
||||
<div className="p-6 border-b flex items-center justify-between">
|
||||
<h2 className="text-lg font-bold text-gray-800">Reports</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex-1 overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead className="bg-[#F9FAFB] border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider w-16">S.No</th>
|
||||
<th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">Name</th>
|
||||
<th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">Mobile Number</th>
|
||||
<th className="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">Report</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{paginatedReports.map((report, index) => (
|
||||
<tr key={report.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-6 py-4 text-sm text-gray-500 font-medium">{(currentPage - 1) * ITEMS_PER_PAGE + index + 1}</td>
|
||||
<td className="px-6 py-4 text-sm font-medium text-gray-700">{report.name}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">{report.phone}</td>
|
||||
<td className="px-6 py-4 text-sm text-limelite-red font-semibold truncate max-w-[200px]">
|
||||
{report.link ? (
|
||||
<a href={report.link.startsWith('http') ? report.link : `${API_BASE_URL}${report.link}`} target="_blank" rel="noopener noreferrer" className="hover:underline">
|
||||
View Report
|
||||
</a>
|
||||
) : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="p-6 border-t flex items-center justify-between bg-white shrink-0">
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-gray-200 rounded-lg text-sm font-bold text-black hover:bg-gray-50 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
|
||||
>
|
||||
<FiArrowLeft className="text-lg" />
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{renderPageNumbers()}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages || totalPages === 0}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-gray-200 rounded-lg text-sm font-bold text-black hover:bg-gray-50 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
|
||||
>
|
||||
Next
|
||||
<FiArrowRight className="text-lg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white border border-gray-200 shadow-sm p-8 max-w-2xl">
|
||||
<h2 className="text-xl font-bold text-gray-800 mb-8 pb-4 border-b">General Settings</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<label className="text-sm font-bold text-gray-700 uppercase">Site Name</label>
|
||||
<input
|
||||
type="text"
|
||||
className="col-span-2 border-b-2 py-2 focus:outline-none focus:border-limelite-red transition-colors"
|
||||
value={settings.siteName}
|
||||
onChange={(e) => setSettings({ ...settings, siteName: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 items-center gap-4">
|
||||
<label className="text-sm font-bold text-gray-700 uppercase">Admin Email</label>
|
||||
<input
|
||||
type="email"
|
||||
className="col-span-2 border-b-2 py-2 focus:outline-none focus:border-[#C7372C] transition-colors"
|
||||
value={settings.adminEmail}
|
||||
onChange={(e) => setSettings({ ...settings, adminEmail: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-4 border-t">
|
||||
<div>
|
||||
<p className="font-bold text-gray-800">WhatsApp Notifications</p>
|
||||
<p className="text-sm text-gray-500">Send automatic alerts for new analysis signups</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSettings({ ...settings, whatsappNotifications: !settings.whatsappNotifications })}
|
||||
className={`w-12 h-6 rounded-full transition-colors relative ${settings.whatsappNotifications ? 'bg-green-500' : 'bg-gray-300'}`}
|
||||
>
|
||||
<div className={`absolute top-1 bg-white w-4 h-4 rounded-full transition-transform ${settings.whatsappNotifications ? 'translate-x-7' : 'translate-x-1'}`}></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-4 border-t">
|
||||
<div>
|
||||
<p className="font-bold text-gray-800">Auto-Archive Reports</p>
|
||||
<p className="text-sm text-gray-500">Automatically archive reports older than 30 days</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSettings({ ...settings, autoArchive: !settings.autoArchive })}
|
||||
className={`w-12 h-6 rounded-full transition-colors relative ${settings.autoArchive ? 'bg-limelite-red' : 'bg-gray-300'}`}
|
||||
>
|
||||
<div className={`absolute top-1 bg-white w-4 h-4 rounded-full transition-transform ${settings.autoArchive ? 'translate-x-7' : 'translate-x-1'}`}></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="pt-6">
|
||||
<button className="bg-limelite-red text-white px-8 py-3 font-bold uppercase tracking-widest hover:bg-limelite-maroon transition-colors">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Support Modal */}
|
||||
{showSupportModal && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
||||
<div className="bg-white w-full max-w-lg p-10 relative shadow-2xl animate-[fadeIn_0.2s_ease-out] rounded-none">
|
||||
<div className="flex justify-between items-center mb-10">
|
||||
<h2 className="text-4xl font-bold text-[#18181b]">Help</h2>
|
||||
<button
|
||||
onClick={() => setShowSupportModal(false)}
|
||||
className="text-gray-900 hover:text-black transition-colors"
|
||||
>
|
||||
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-2 h-2 rounded-full bg-gray-500 mt-2.5 shrink-0"></div>
|
||||
<p className="text-xl text-gray-600 leading-relaxed">
|
||||
To access previous reports, please contact us at <i className="text-gray-800 font-medium">hello@limelite.com</i>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-2 h-2 rounded-full bg-gray-500 mt-2.5 shrink-0"></div>
|
||||
<p className="text-xl text-gray-600 leading-relaxed">
|
||||
If you experience any technical issues, please contact us at <i className="text-gray-800 font-medium">support@example.com</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardPage;
|
||||
|
||||
Reference in New Issue
Block a user