Refactor Project Tasks and Task Templates pages with new UI components
- Introduced PageContainer and PageHeader components for consistent layout. - Added SearchBar and FilterBar components for improved task filtering and searching. - Implemented LoadingState component for better loading indication. - Updated ProjectTasksPage to utilize new components and enhance user experience. - Refactored TaskTemplatesPage to use PageContainer and PageHeader for better structure. - Created FilterBar component to manage filter options dynamically. - Added SearchBar component for searching tasks with clear functionality. - Introduced States component for loading and error states.
This commit is contained in:
Chop
@@ -9,6 +9,8 @@ import Button from "@/components/ui/Button";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
import Link from "next/link";
|
||||
import { differenceInCalendarDays, parseISO } from "date-fns";
|
||||
import PageContainer from "@/components/ui/PageContainer";
|
||||
import PageHeader from "@/components/ui/PageHeader";
|
||||
|
||||
export default async function ProjectViewPage({ params }) {
|
||||
const project = getProjectWithContract(params.id);
|
||||
@@ -17,10 +19,9 @@ export default async function ProjectViewPage({ params }) {
|
||||
parseISO(project.finish_date),
|
||||
new Date()
|
||||
);
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<PageContainer>
|
||||
<Card>
|
||||
<CardContent className="text-center py-8">
|
||||
<p className="text-red-600 text-lg">Project not found.</p>
|
||||
@@ -29,7 +30,7 @@ export default async function ProjectViewPage({ params }) {
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -38,197 +39,186 @@ export default async function ProjectViewPage({ params }) {
|
||||
if (days <= 7) return "warning";
|
||||
return "success";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="max-w-6xl mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/projects">
|
||||
<Button variant="outline" size="sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
Back to Projects
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/projects/${params.id}/edit`}>
|
||||
<Button variant="secondary">Edit Project</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<h1 className="text-3xl font-bold text-gray-900">
|
||||
{project.project_name}
|
||||
</h1>
|
||||
<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
|
||||
{daysRemaining === 0
|
||||
? "Due Today"
|
||||
: daysRemaining > 0
|
||||
? `${daysRemaining} days left`
|
||||
: `${Math.abs(daysRemaining)} days overdue`}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Project Information
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Location
|
||||
</span>
|
||||
<p className="text-gray-900">{project.city}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Address
|
||||
</span>
|
||||
<p className="text-gray-900">{project.address}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Plot
|
||||
</span>
|
||||
<p className="text-gray-900">{project.plot}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
District
|
||||
</span>
|
||||
<p className="text-gray-900">{project.district}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Unit
|
||||
</span>
|
||||
<p className="text-gray-900">{project.unit}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Deadline
|
||||
</span>
|
||||
<p className="text-gray-900">{project.finish_date}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">WP</span>
|
||||
<p className="text-gray-900">{project.wp}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Investment Number
|
||||
</span>
|
||||
<p className="text-gray-900">{project.investment_number}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Contact
|
||||
</span>
|
||||
<p className="text-gray-900">{project.contact}</p>
|
||||
</div>
|
||||
{project.notes && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Notes
|
||||
</span>
|
||||
<p className="text-gray-900">{project.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Contract Details
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Contract Number
|
||||
</span>
|
||||
<p className="text-gray-900">{project.contract_number}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Contract Name
|
||||
</span>
|
||||
<p className="text-gray-900">{project.contract_name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Customer
|
||||
</span>
|
||||
<p className="text-gray-900">{project.customer}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Investor
|
||||
</span>
|
||||
<p className="text-gray-900">{project.investor}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<ProjectTasksSection projectId={params.id} />
|
||||
<PageContainer>
|
||||
<PageHeader
|
||||
title={project.project_name}
|
||||
description={`${project.city} • ${project.address}`}
|
||||
action={
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
|
||||
{daysRemaining === 0
|
||||
? "Due Today"
|
||||
: daysRemaining > 0
|
||||
? `${daysRemaining} days left`
|
||||
: `${Math.abs(daysRemaining)} days overdue`}
|
||||
</Badge>
|
||||
<Link href="/projects">
|
||||
<Button variant="outline" size="sm">
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
Back to Projects
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/projects/${params.id}/edit`}>
|
||||
<Button variant="secondary">Edit Project</Button>
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">Notes</h2>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Project Information
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="mb-6">
|
||||
<NoteForm projectId={params.id} />
|
||||
</div>
|
||||
{notes.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="text-gray-400 mb-2">
|
||||
<svg
|
||||
className="w-12 h-12 mx-auto"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-1H8v1a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v4a1 1 0 001 1h1a1 1 0 100-2v-1a2 2 0 00-2-2H7a1 1 0 000 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-500">No notes yet.</p>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Location
|
||||
</span>
|
||||
<p className="text-gray-900">{project.city}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{notes.map((n) => (
|
||||
<div
|
||||
key={n.note_id}
|
||||
className="border border-gray-200 p-4 rounded-lg bg-gray-50"
|
||||
>
|
||||
<p className="text-sm text-gray-500 mb-2">{n.note_date}</p>
|
||||
<p className="text-gray-900">{n.note}</p>
|
||||
</div>
|
||||
))}
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Address
|
||||
</span>
|
||||
<p className="text-gray-900">{project.address}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">Plot</span>
|
||||
<p className="text-gray-900">{project.plot}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
District
|
||||
</span>
|
||||
<p className="text-gray-900">{project.district}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">Unit</span>
|
||||
<p className="text-gray-900">{project.unit}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Deadline
|
||||
</span>
|
||||
<p className="text-gray-900">{project.finish_date}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">WP</span>
|
||||
<p className="text-gray-900">{project.wp}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Investment Number
|
||||
</span>
|
||||
<p className="text-gray-900">{project.investment_number}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">Contact</span>
|
||||
<p className="text-gray-900">{project.contact}</p>
|
||||
</div>
|
||||
{project.notes && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">Notes</span>
|
||||
<p className="text-gray-900">{project.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Contract Details
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Contract Number
|
||||
</span>
|
||||
<p className="text-gray-900">{project.contract_number}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Contract Name
|
||||
</span>
|
||||
<p className="text-gray-900">{project.contract_name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Customer
|
||||
</span>
|
||||
<p className="text-gray-900">{project.customer}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Investor
|
||||
</span>
|
||||
<p className="text-gray-900">{project.investor}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProjectTasksSection projectId={params.id} />
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">Notes</h2>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="mb-6">
|
||||
<NoteForm projectId={params.id} />
|
||||
</div>
|
||||
{notes.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="text-gray-400 mb-2">
|
||||
<svg
|
||||
className="w-12 h-12 mx-auto"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-1H8v1a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v4a1 1 0 001 1h1a1 1 0 100-2v-1a2 2 0 00-2-2H7a1 1 0 000 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-500">No notes yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{notes.map((n) => (
|
||||
<div
|
||||
key={n.note_id}
|
||||
className="border border-gray-200 p-4 rounded-lg bg-gray-50"
|
||||
>
|
||||
<p className="text-sm text-gray-500 mb-2">{n.note_date}</p>
|
||||
<p className="text-gray-900">{n.note}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user