Add comprehensive admin features and multi-system integration
- Add admin dashboard with sync controls and data browser - Implement RMM, Auvik, and Addigy organization mappings - Add chunked ticket sync with progress tracking - Implement entity sync service with rate limiting - Add analytics engine and performance optimizer - Create data browser for all PSA entities - Add navigation components and UI improvements - Implement background processing and sync services - Add comprehensive documentation and migration scripts - Update configuration items with multi-system support - Enhance contact management and purchase history - Add issue type assignment and LLM analyzer - Improve error handling and logging utilities
This commit is contained in:
root
parent
e8462ef301
commit
6eee14f8af
171 changed files with 32671 additions and 621 deletions
184
app/admin/data-browser/projects/page.tsx
Normal file
184
app/admin/data-browser/projects/page.tsx
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import DataTable from '@/components/admin/DataTable';
|
||||
import DetailModal from '@/components/admin/DetailModal';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ArrowLeft, FolderKanban } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function ProjectsBrowserPage() {
|
||||
const [projects, setProjects] = useState([]);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize] = useState(50);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedProject, setSelectedProject] = useState<any>(null);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const fetchProjects = async (currentPage: number, search?: string, sortBy?: string, sortOrder?: string) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
limit: pageSize.toString(),
|
||||
offset: ((currentPage - 1) * pageSize).toString(),
|
||||
});
|
||||
|
||||
if (search) params.append('search', search);
|
||||
if (sortBy) params.append('sort', sortBy);
|
||||
if (sortOrder) params.append('order', sortOrder);
|
||||
|
||||
const response = await fetch(`/api/data/projects?${params}`);
|
||||
const result = await response.json();
|
||||
|
||||
setProjects(result.projects || []);
|
||||
setTotalCount(result.pagination?.total || 0);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch projects:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects(page);
|
||||
}, [page]);
|
||||
|
||||
const handleRowClick = (project: any) => {
|
||||
setSelectedProject(project);
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: 'id',
|
||||
label: 'ID',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: 'project_name',
|
||||
label: 'Project Name',
|
||||
sortable: true,
|
||||
render: (value: string) => (
|
||||
<div className="font-medium">{value}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'project_number',
|
||||
label: 'Project #',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: 'company_id',
|
||||
label: 'Company ID',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: 'Status',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
key: 'start_date_time',
|
||||
label: 'Start Date',
|
||||
sortable: true,
|
||||
render: (value: string) => (
|
||||
value ? new Date(value).toLocaleDateString() : '-'
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'completed_percentage',
|
||||
label: 'Progress',
|
||||
render: (value: number) => (
|
||||
<div>{value ? `${value}%` : '-'}</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const detailFields = [
|
||||
{ key: 'id', label: 'ID' },
|
||||
{ key: 'company_id', label: 'Company ID' },
|
||||
{ key: 'project_name', label: 'Project Name' },
|
||||
{ key: 'project_number', label: 'Project Number' },
|
||||
{ key: 'description', label: 'Description' },
|
||||
{ key: 'status', label: 'Status' },
|
||||
{ key: 'type', label: 'Type' },
|
||||
{ key: 'start_date_time', label: 'Start Date' },
|
||||
{ key: 'end_date_time', label: 'End Date' },
|
||||
{ key: 'estimated_time', label: 'Estimated Time' },
|
||||
{ key: 'actual_hours', label: 'Actual Hours' },
|
||||
{ key: 'completed_percentage', label: 'Completed %' },
|
||||
{ key: 'project_lead_resource_id', label: 'Project Lead ID' },
|
||||
{ key: 'owner_resource_id', label: 'Owner ID' },
|
||||
{ key: 'synced_at', label: 'Synced At' },
|
||||
{ key: 'is_deleted', label: 'Is Deleted' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/admin/data-browser">
|
||||
<Button variant="outline" size="sm" className="gap-2">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="h-8 w-px bg-border" />
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-950">
|
||||
<FolderKanban className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Projects</h1>
|
||||
<p className="text-sm text-muted-foreground">Manage and inspect project data</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary" className="w-fit">
|
||||
{totalCount} total records
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Data Table Card */}
|
||||
<Card className="border-none shadow-md">
|
||||
<CardHeader className="border-b bg-muted/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-lg">All Projects</CardTitle>
|
||||
<CardDescription className="mt-1">
|
||||
View and search through all projects in the system
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6">
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={projects}
|
||||
totalCount={totalCount}
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
onPageChange={setPage}
|
||||
onSort={(column, direction) => fetchProjects(page, undefined, column, direction)}
|
||||
onSearch={(query) => fetchProjects(1, query)}
|
||||
onRowClick={handleRowClick}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Detail Modal */}
|
||||
<DetailModal
|
||||
open={modalOpen}
|
||||
onOpenChange={setModalOpen}
|
||||
title={selectedProject?.project_name || 'Project Details'}
|
||||
data={selectedProject}
|
||||
fields={detailFields}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue