added admin page dataset
This commit is contained in:
suryacp23
parent
d36f16d5bb
commit
ddbb81b400
@ -45,8 +45,9 @@ function App() {
|
||||
<Route path="reports/:reportType" element={<ReportPage />} />
|
||||
<Route path="sales-report" element={<DailySalesReportPage />} />
|
||||
|
||||
<Route path="admin/datasets" element={<DatasetsPage />} />
|
||||
<Route path="admin/datasets/:id" element={<DatasetItemsPage />} />
|
||||
<Route path="admin/datasets" element={<DatasetsPage />}>
|
||||
<Route path=":id" element={<DatasetItemsPage />} />
|
||||
</Route>
|
||||
|
||||
<Route path="*" element={<Navigate to="/orders" replace />} />
|
||||
</Route>
|
||||
|
||||
@ -21,31 +21,34 @@ export function DailySalesReportPage() {
|
||||
const [reportData, setReportData] = useState<any>(null);
|
||||
|
||||
const downloadPDF = () => {
|
||||
const doc = new jsPDF();
|
||||
const doc = new jsPDF({ orientation: 'landscape' });
|
||||
const pageWidth = doc.internal.pageSize.getWidth();
|
||||
const centerX = pageWidth / 2;
|
||||
const rightX = pageWidth - 14;
|
||||
|
||||
// Headers
|
||||
doc.setFontSize(16);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Krishna Flour Mills (Bangalore) Pvt. Limited', 105, 15, { align: 'center' });
|
||||
doc.text('Krishna Flour Mills (Bangalore) Pvt. Limited', centerX, 15, { align: 'center' });
|
||||
|
||||
doc.setFontSize(11);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text('19, Platform Road, Bengaluru - 560 020', 105, 22, { align: 'center' });
|
||||
doc.text('19, Platform Road, Bengaluru - 560 020', centerX, 22, { align: 'center' });
|
||||
|
||||
doc.setFontSize(12);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('DAILY ORDER REPORT', 105, 30, { align: 'center' });
|
||||
doc.text('DAILY ORDER REPORT', centerX, 30, { align: 'center' });
|
||||
|
||||
// Simple underline for DAILY ORDER REPORT
|
||||
const textWidth = doc.getTextWidth('DAILY ORDER REPORT');
|
||||
doc.setLineWidth(0.5);
|
||||
doc.line(105 - textWidth / 2, 31, 105 + textWidth / 2, 31);
|
||||
doc.line(centerX - textWidth / 2, 31, centerX + textWidth / 2, 31);
|
||||
|
||||
// Meta Info
|
||||
doc.setFontSize(10);
|
||||
doc.text(`Distributor Name : ${distributor}`, 14, 40);
|
||||
doc.text(`Date : ${date}`, 196, 40, { align: 'right' });
|
||||
doc.text(`SO Name : ${soName}`, 196, 45, { align: 'right' });
|
||||
doc.text(`Date : ${date}`, rightX, 40, { align: 'right' });
|
||||
doc.text(`SO Name : ${soName}`, rightX, 45, { align: 'right' });
|
||||
|
||||
// Table
|
||||
autoTable(doc, {
|
||||
@ -60,31 +63,34 @@ export function DailySalesReportPage() {
|
||||
};
|
||||
|
||||
const printReport = async () => {
|
||||
const doc = new jsPDF();
|
||||
const doc = new jsPDF({ orientation: 'landscape' });
|
||||
const pageWidth = doc.internal.pageSize.getWidth();
|
||||
const centerX = pageWidth / 2;
|
||||
const rightX = pageWidth - 14;
|
||||
|
||||
// Headers
|
||||
doc.setFontSize(16);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Krishna Flour Mills (Bangalore) Pvt. Limited', 105, 15, { align: 'center' });
|
||||
doc.text('Krishna Flour Mills (Bangalore) Pvt. Limited', centerX, 15, { align: 'center' });
|
||||
|
||||
doc.setFontSize(11);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text('19, Platform Road, Bengaluru - 560 020', 105, 22, { align: 'center' });
|
||||
doc.text('19, Platform Road, Bengaluru - 560 020', centerX, 22, { align: 'center' });
|
||||
|
||||
doc.setFontSize(12);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('DAILY ORDER REPORT', 105, 30, { align: 'center' });
|
||||
doc.text('DAILY ORDER REPORT', centerX, 30, { align: 'center' });
|
||||
|
||||
// Simple underline for DAILY ORDER REPORT
|
||||
const textWidth = doc.getTextWidth('DAILY ORDER REPORT');
|
||||
doc.setLineWidth(0.5);
|
||||
doc.line(105 - textWidth / 2, 31, 105 + textWidth / 2, 31);
|
||||
doc.line(centerX - textWidth / 2, 31, centerX + textWidth / 2, 31);
|
||||
|
||||
// Meta Info
|
||||
doc.setFontSize(10);
|
||||
doc.text(`Distributor Name : ${distributor}`, 14, 40);
|
||||
doc.text(`Date : ${date}`, 196, 40, { align: 'right' });
|
||||
doc.text(`SO Name : ${soName}`, 196, 45, { align: 'right' });
|
||||
doc.text(`Date : ${date}`, rightX, 40, { align: 'right' });
|
||||
doc.text(`SO Name : ${soName}`, rightX, 45, { align: 'right' });
|
||||
|
||||
// Table
|
||||
autoTable(doc, {
|
||||
|
||||
@ -19,6 +19,7 @@ export function DatasetItemsPage() {
|
||||
|
||||
// Local state for items editing
|
||||
const [items, setItems] = useState<any[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (id) fetchDataset(id);
|
||||
@ -220,90 +221,113 @@ export function DatasetItemsPage() {
|
||||
const isString = dataset.data_type === 'string';
|
||||
const hasChanges = JSON.stringify(items) !== JSON.stringify(dataset.items || []);
|
||||
|
||||
const filteredIndices = items
|
||||
.map((item, idx) => ({ item, idx }))
|
||||
.filter(({ item }) => {
|
||||
if (!searchTerm) return true;
|
||||
const lowerSearch = searchTerm.toLowerCase();
|
||||
if (isString) {
|
||||
return (typeof item === 'string') && item.toLowerCase().includes(lowerSearch);
|
||||
} else {
|
||||
return dataset?.keys?.some(k =>
|
||||
item[k] && typeof item[k] === 'string' && item[k].toLowerCase().includes(lowerSearch)
|
||||
);
|
||||
}
|
||||
})
|
||||
.map(({ idx }) => idx);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
<header className="flex items-center justify-between">
|
||||
<div className="flex flex-col h-full bg-transparent">
|
||||
<header className="flex items-center justify-between p-4 bg-[var(--z-block-bg)] border-b border-slate-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => navigate('/admin/datasets')}
|
||||
className="p-2 -ml-2 rounded-full hover:bg-slate-200 text-slate-500 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-800 m-0 flex items-center gap-2">
|
||||
<Database className="text-brand-base" /> {dataset.name}
|
||||
<span className="text-sm font-normal text-slate-500 bg-slate-100 px-2.5 py-0.5 rounded-full border border-slate-200 ml-1">
|
||||
{items.length} {isString ? 'Items' : 'Rows'}
|
||||
<h1 className="text-lg font-bold text-brand-700 m-0 flex items-center gap-2">
|
||||
<Database size={20} /> {dataset.name}
|
||||
<span className={`text-[10px] uppercase font-bold px-1.5 py-0.5 rounded flex items-center gap-1 ${
|
||||
!isString ? 'bg-purple-100 text-purple-700' : 'bg-emerald-100 text-emerald-700'
|
||||
}`}>
|
||||
{!isString ? 'Table' : 'List'}
|
||||
</span>
|
||||
<span className="text-sm font-normal text-slate-500 ml-2">
|
||||
{items.length} items {dataset.keys?.length ? `- ${dataset.keys.length} cols` : ''}
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">Manage items for this dataset</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative">
|
||||
<input type="file" accept=".csv" onChange={handleFileUpload} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" title="Import CSV" />
|
||||
<Button variant="outline" size="sm" className="rounded-full"><Upload size={14} className="mr-1.5" /> Import CSV</Button>
|
||||
<Button variant="outline" size="sm" className="rounded font-medium"><Upload size={14} className="mr-1.5" /> Import</Button>
|
||||
</div>
|
||||
{selectedRows.size > 0 && (
|
||||
<Button variant="danger" size="sm" onClick={handleMultiDelete} className="rounded-full font-semibold px-3 flex items-center">
|
||||
<Button variant="danger" size="sm" onClick={handleMultiDelete} className="rounded font-semibold px-3 flex items-center">
|
||||
<Trash2 size={14} className="mr-1.5" /> Delete Selected ({selectedRows.size})
|
||||
</Button>
|
||||
)}
|
||||
{hasChanges && (
|
||||
<Button variant="secondary" size="sm" onClick={handleReset} disabled={saving} className="rounded-full font-semibold">
|
||||
<Button variant="secondary" size="sm" onClick={handleReset} disabled={saving} className="rounded font-semibold">
|
||||
Reset Changes
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" onClick={handleSave} disabled={saving || !hasChanges} className="flex items-center gap-2 rounded-full">
|
||||
<Save size={16} /> {saving ? 'Saving...' : 'Save Changes'}
|
||||
<Button size="sm" onClick={handleSave} disabled={saving || !hasChanges} className="flex items-center gap-2 rounded bg-slate-100 text-slate-600 hover:bg-slate-200 border border-slate-200">
|
||||
<Save size={16} /> {saving ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{error && <div className="p-4 bg-red-50 text-red-600 rounded-md border border-red-100 font-medium">{error}</div>}
|
||||
|
||||
<div className="p-0">
|
||||
<div className="flex-1 p-6">
|
||||
{isString ? (
|
||||
<>
|
||||
<div className="px-4 py-3 border border-b-0 border-slate-300 bg-[#FFFBF4]">
|
||||
<h3 className="text-sm font-semibold text-slate-700 m-0">
|
||||
{dataset.name}
|
||||
</h3>
|
||||
<div className="bg-[var(--z-block-bg)] border border-slate-200 rounded-lg shadow-sm">
|
||||
<div className="p-4 border-b border-slate-100 flex items-center justify-between">
|
||||
<div className="relative w-64">
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search rows..."
|
||||
className="w-full text-sm pl-8 pr-4 py-2 border border-slate-200 rounded-md focus:outline-none focus:ring-1 focus:ring-brand-500"
|
||||
/>
|
||||
<svg className="absolute left-2.5 top-2.5 h-4 w-4 text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="overflow-x-auto border border-slate-300">
|
||||
<table className="min-w-full table-auto text-left text-sm whitespace-nowrap border-collapse border-2 border-slate-300 bg-[#FFFBF4]">
|
||||
<thead className="bg-emerald-900 border-b-2 border-emerald-950">
|
||||
<div className="text-sm text-slate-500">{items.length} rows</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full table-auto text-left text-sm whitespace-nowrap bg-[var(--z-block-bg)]">
|
||||
<thead className="bg-slate-50 border-b border-slate-200">
|
||||
<tr>
|
||||
<th className="px-4 py-3 font-semibold text-white w-10 text-center border-r border-emerald-800">
|
||||
<input type="checkbox" checked={selectedRows.size === items.length && items.length > 0} onChange={toggleSelectAll} className="rounded border-emerald-800 text-emerald-600 focus:ring-emerald-500 cursor-pointer" />
|
||||
<th className="px-4 py-3 font-semibold text-slate-600 w-10 text-center border-r border-slate-100">
|
||||
<input type="checkbox" checked={selectedRows.size === items.length && items.length > 0} onChange={toggleSelectAll} className="rounded border-slate-300 text-brand-600 focus:ring-brand-500 cursor-pointer" />
|
||||
</th>
|
||||
<th className="px-4 py-3 font-semibold text-white w-10 text-center border-r border-emerald-800">#</th>
|
||||
<th className="px-4 py-3 font-semibold text-white border-r border-emerald-800">Value</th>
|
||||
<th className="px-4 py-3 font-semibold text-white text-center w-16">Actions</th>
|
||||
<th className="px-4 py-3 font-bold text-xs uppercase text-slate-700 w-10 text-center border-r border-slate-100">#</th>
|
||||
<th className="px-4 py-3 font-bold text-xs uppercase text-slate-700 border-r border-slate-100">VALUE</th>
|
||||
<th className="px-4 py-3 font-bold text-xs uppercase text-slate-700 text-center w-16">ACTIONS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y-2 divide-slate-300">
|
||||
{items.map((val, idx) => (
|
||||
<tr key={idx} className={`bg-[#FFFBF4] hover:bg-emerald-50 transition-colors ${selectedRows.has(idx) ? '!bg-emerald-100' : ''}`}>
|
||||
<td className="px-4 py-2 text-center border-r border-slate-300">
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{filteredIndices.map((idx) => {
|
||||
const val = items[idx];
|
||||
return (
|
||||
<tr key={idx} className={`bg-[var(--z-block-bg)] hover:bg-slate-50 transition-colors ${selectedRows.has(idx) ? '!bg-brand-50' : ''}`}>
|
||||
<td className="px-4 py-2 text-center border-r border-slate-100">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedRows.has(idx)}
|
||||
onChange={() => toggleRowSelection(idx)}
|
||||
className="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500 cursor-pointer"
|
||||
className="rounded border-slate-300 text-brand-600 focus:ring-brand-500 cursor-pointer"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-slate-500 font-mono text-center text-xs border-r border-slate-300">{idx + 1}</td>
|
||||
<td className="px-0 py-0 relative border-r border-slate-300 min-w-[150px]">
|
||||
<div className="invisible px-4 py-2 text-sm whitespace-pre" aria-hidden="true">
|
||||
<td className="px-4 py-2 text-slate-400 font-mono text-center text-xs border-r border-slate-100">{idx + 1}</td>
|
||||
<td className="px-0 py-0 relative border-r border-slate-100 min-w-[150px]">
|
||||
<div className="invisible px-4 py-3 text-sm whitespace-pre" aria-hidden="true">
|
||||
{val || 'Enter value'}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={val}
|
||||
onChange={(e) => handleStringChange(idx, e.target.value)}
|
||||
className="absolute inset-0 w-full h-full px-4 py-2 border-none bg-transparent text-sm focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500 transition-colors"
|
||||
className="absolute inset-0 w-full h-full px-4 py-2 border-none bg-transparent text-sm text-brand-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500 transition-colors"
|
||||
placeholder="Enter value"
|
||||
/>
|
||||
</td>
|
||||
@ -317,7 +341,8 @@ export function DatasetItemsPage() {
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
{items.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-5 py-10 text-center text-slate-500 italic font-medium">
|
||||
@ -328,59 +353,72 @@ export function DatasetItemsPage() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
<Button variant="primary" size="sm" onClick={handleAddString} className="rounded-full">
|
||||
<Plus size={16} className="mr-1.5" /> Add Item
|
||||
<div className="p-4 border-t border-slate-100 bg-[var(--z-block-bg)] flex justify-between items-center text-xs text-slate-500 rounded-b-lg">
|
||||
<Button variant="primary" size="sm" onClick={handleAddString} className="font-semibold px-4 flex items-center">
|
||||
<Plus size={16} className="mr-1.5" /> Add Row
|
||||
</Button>
|
||||
<div>{items.length} rows</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="px-4 py-3 border border-b-0 border-slate-300 bg-[#FFFBF4]">
|
||||
<h3 className="text-sm font-semibold text-slate-700 m-0">
|
||||
{dataset.name}
|
||||
</h3>
|
||||
<div className="bg-[var(--z-block-bg)] border border-slate-200 rounded-lg shadow-sm">
|
||||
<div className="p-4 border-b border-slate-100 flex items-center justify-between">
|
||||
<div className="relative w-64">
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search rows..."
|
||||
className="w-full text-sm pl-8 pr-4 py-2 border border-slate-200 rounded-md focus:outline-none focus:ring-1 focus:ring-brand-500"
|
||||
/>
|
||||
<svg className="absolute left-2.5 top-2.5 h-4 w-4 text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="overflow-x-auto border border-slate-300">
|
||||
<table className="min-w-full table-auto text-left text-sm whitespace-nowrap border-collapse border-2 border-slate-300 bg-[#FFFBF4]">
|
||||
<thead className="bg-emerald-900 border-b-2 border-emerald-950">
|
||||
<div className="text-sm text-slate-500">{items.length} rows</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full table-auto text-left text-sm whitespace-nowrap bg-[var(--z-block-bg)]">
|
||||
<thead className="bg-slate-50 border-b border-slate-200">
|
||||
<tr>
|
||||
<th className="px-4 py-3 font-semibold text-white w-10 text-center border-r border-emerald-800">
|
||||
<input type="checkbox" checked={selectedRows.size === items.length && items.length > 0} onChange={toggleSelectAll} className="rounded border-emerald-800 text-emerald-600 focus:ring-emerald-500 cursor-pointer" />
|
||||
<th className="px-4 py-3 font-semibold text-slate-600 w-10 text-center border-r border-slate-100">
|
||||
<input type="checkbox" checked={selectedRows.size === items.length && items.length > 0} onChange={toggleSelectAll} className="rounded border-slate-300 text-brand-600 focus:ring-brand-500 cursor-pointer" />
|
||||
</th>
|
||||
<th className="px-4 py-3 font-semibold text-white w-10 text-center border-r border-emerald-800">#</th>
|
||||
<th className="px-4 py-3 font-bold text-xs uppercase text-slate-700 w-10 text-center border-r border-slate-100">#</th>
|
||||
{dataset.keys?.map(k => (
|
||||
<th key={k} className="px-4 py-3 font-semibold text-white border-r border-emerald-800">{k}</th>
|
||||
<th key={k} className="px-4 py-3 font-bold text-xs uppercase text-slate-700 border-r border-slate-100">{k}</th>
|
||||
))}
|
||||
<th className="px-4 py-3 font-semibold text-white text-center w-16">Actions</th>
|
||||
<th className="px-4 py-3 font-bold text-xs uppercase text-slate-700 text-center w-16">ACTIONS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y-2 divide-slate-300">
|
||||
{items.map((rowObj, idx) => (
|
||||
<tr key={idx} className={`bg-[#FFFBF4] hover:bg-emerald-50 transition-colors ${selectedRows.has(idx) ? '!bg-emerald-100' : ''}`}>
|
||||
<td className="px-4 py-2 text-center border-r border-slate-300">
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{filteredIndices.map((idx) => {
|
||||
const rowObj = items[idx];
|
||||
return (
|
||||
<tr key={idx} className={`bg-[var(--z-block-bg)] hover:bg-slate-50 transition-colors ${selectedRows.has(idx) ? '!bg-brand-50' : ''}`}>
|
||||
<td className="px-4 py-2 text-center border-r border-slate-100">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedRows.has(idx)}
|
||||
onChange={() => toggleRowSelection(idx)}
|
||||
className="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500 cursor-pointer"
|
||||
className="rounded border-slate-300 text-brand-600 focus:ring-brand-500 cursor-pointer"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-slate-500 font-mono text-center text-xs border-r border-slate-300">{idx + 1}</td>
|
||||
<td className="px-4 py-2 text-slate-400 font-mono text-center text-xs border-r border-slate-100">{idx + 1}</td>
|
||||
{dataset.keys?.map(k => {
|
||||
const isInvalid = invalidCells.has(`${idx}-${k}`);
|
||||
return (
|
||||
<td key={k} className="px-0 py-0 relative border-r border-slate-300 min-w-[150px]">
|
||||
<div className="invisible px-4 py-2 text-sm whitespace-pre" aria-hidden="true">
|
||||
<td key={k} className="px-0 py-0 relative border-r border-slate-100 min-w-[150px]">
|
||||
<div className="invisible px-4 py-3 text-sm whitespace-pre" aria-hidden="true">
|
||||
{rowObj[k] || `Enter ${k}`}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={rowObj[k] || ''}
|
||||
onChange={(e) => handleObjectChange(idx, k, e.target.value)}
|
||||
className={`absolute inset-0 w-full h-full px-4 py-2 border-none bg-transparent text-sm focus:outline-none transition-colors ${isInvalid
|
||||
? 'ring-2 ring-inset ring-red-400 bg-red-50/50 focus:ring-red-500'
|
||||
: 'focus:ring-2 focus:ring-inset focus:ring-emerald-500'
|
||||
className={`absolute inset-0 w-full h-full px-4 py-2 border-none bg-transparent text-sm text-brand-700 transition-colors ${isInvalid
|
||||
? 'ring-2 ring-inset ring-red-400 bg-red-50/50 focus:ring-red-500 focus:outline-none'
|
||||
: 'focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500'
|
||||
}`}
|
||||
placeholder={`Enter ${k}`}
|
||||
/>
|
||||
@ -397,7 +435,8 @@ export function DatasetItemsPage() {
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
{items.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={(dataset.keys?.length || 0) + 3} className="px-5 py-10 text-center text-slate-500 italic font-medium">
|
||||
@ -408,12 +447,13 @@ export function DatasetItemsPage() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
<Button variant="primary" size="sm" onClick={handleAddObject} className="rounded-full">
|
||||
<div className="p-4 border-t border-slate-100 bg-[var(--z-block-bg)] flex justify-between items-center text-xs text-slate-500 rounded-b-lg">
|
||||
<Button variant="primary" size="sm" onClick={handleAddObject} className="font-semibold px-4 flex items-center">
|
||||
<Plus size={16} className="mr-1.5" /> Add Row
|
||||
</Button>
|
||||
<div>{items.length} rows - {dataset.keys?.length || 0} cols</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { orderBookingClient } from '../../api/clients';
|
||||
import type { Dataset } from '../../api/types';
|
||||
import { Card } from '../../components/reusable/Card';
|
||||
import { Button } from '../../components/buttons/Button';
|
||||
import { Spinner } from '../../components/reusable/Spinner';
|
||||
import { Database, List } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Database, LayoutList, Table2 } from 'lucide-react';
|
||||
import { useNavigate, useLocation, Outlet, useParams } from 'react-router-dom';
|
||||
|
||||
export function DatasetsPage() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
|
||||
const [datasets, setDatasets] = useState<Dataset[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
@ -23,6 +24,11 @@ export function DatasetsPage() {
|
||||
const res = await orderBookingClient.getDatasets();
|
||||
setDatasets(res);
|
||||
setError('');
|
||||
|
||||
// Auto-select first dataset if none selected and on base path
|
||||
if (res.length > 0 && location.pathname.endsWith('/admin/datasets')) {
|
||||
navigate(`/admin/datasets/${res[0].id}`, { replace: true });
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to fetch datasets');
|
||||
} finally {
|
||||
@ -30,56 +36,70 @@ export function DatasetsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="p-10 flex justify-center"><Spinner /></div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div className="p-4 bg-red-50 text-red-600 rounded-md border border-red-100 font-medium">{error}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
<header className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-slate-800 m-0 flex items-center gap-2">
|
||||
<Database className="text-brand-base" /> Datasets
|
||||
</h1>
|
||||
<div className="flex h-[calc(100vh-80px)] -m-4 bg-[var(--z-block-bg)] rounded-lg overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 border-r border-slate-200 flex flex-col bg-[var(--z-block-bg)]">
|
||||
<div className="p-4 border-b border-slate-200 flex items-center gap-2">
|
||||
<Database size={18} className="text-slate-400" />
|
||||
<h2 className="text-sm font-bold text-slate-700 tracking-wide">DATASETS</h2>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<ul className="flex flex-col py-2">
|
||||
{datasets.map((ds) => {
|
||||
const isActive = id === String(ds.id);
|
||||
const isTable = ds.data_type === 'object';
|
||||
return (
|
||||
<li key={ds.id}>
|
||||
<button
|
||||
onClick={() => navigate(`/admin/datasets/${ds.id}`)}
|
||||
className={`w-full text-left px-4 py-3 flex flex-col gap-1 border-l-4 transition-colors ${
|
||||
isActive
|
||||
? 'border-brand-base bg-brand-50'
|
||||
: 'border-transparent hover:bg-slate-100'
|
||||
}`}
|
||||
>
|
||||
<div className={`font-medium text-sm truncate ${isActive ? 'text-brand-700' : 'text-slate-700'}`}>
|
||||
{ds.name}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-[10px] uppercase font-bold px-1.5 py-0.5 rounded flex items-center gap-1 ${
|
||||
isTable ? 'bg-purple-100 text-purple-700' : 'bg-emerald-100 text-emerald-700'
|
||||
}`}>
|
||||
{isTable ? 'Table' : 'List'}
|
||||
</span>
|
||||
<span className="text-xs text-slate-500 font-medium">
|
||||
{ds.item_count || 0} items
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div className="h-px bg-slate-200 mx-4" />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
{error && <div className="p-4 bg-red-50 text-red-600 rounded-md border border-red-100 font-medium">{error}</div>}
|
||||
|
||||
<Card className="p-0 overflow-hidden shadow-sm border border-slate-200">
|
||||
{loading ? (
|
||||
<div className="p-10 flex justify-center"><Spinner /></div>
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 bg-[var(--z-block-bg)] overflow-y-auto">
|
||||
{id ? (
|
||||
<Outlet />
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm whitespace-nowrap">
|
||||
<thead className="bg-slate-50 border-b border-slate-200">
|
||||
<tr>
|
||||
<th className="px-5 py-3 font-semibold text-slate-600">Name</th>
|
||||
<th className="px-5 py-3 font-semibold text-slate-600">Items</th>
|
||||
<th className="px-5 py-3 font-semibold text-slate-600 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{datasets.map((ds) => (
|
||||
<tr key={ds.id} className="hover:bg-slate-50/50 transition-colors">
|
||||
<td className="px-5 py-4 text-slate-900 font-bold">{ds.name}</td>
|
||||
<td className="px-5 py-4 text-slate-600 font-medium">{ds.item_count || 0}</td>
|
||||
<td className="px-5 py-4 text-right flex items-center justify-end gap-2">
|
||||
<Button variant="secondary" onClick={() => navigate(`/admin/datasets/${ds.id}`)} className="px-3 py-1.5 text-xs">
|
||||
<List size={14} className="mr-1.5" /> Items
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{datasets.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={3} className="px-5 py-10 text-center text-slate-500 italic font-medium">No datasets found.</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="h-full flex items-center justify-center text-slate-400">
|
||||
Select a dataset to view its contents
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user