Admin/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Project Tasks and Task Templates pages with new UI components

Browse Source 
- 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
2025-06-02 23:41:49 +02:00
parent fb00c1d2d6
commit a1261b2169
11 changed files with 1283 additions and 1176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

358
src/app/projects/[id]/page.js
View File

@@ -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>
);
}

356
src/app/projects/page.js
View File

@@ -6,6 +6,10 @@ import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";
import { Input } from "@/components/ui/Input";
import PageContainer from "@/components/ui/PageContainer";
import PageHeader from "@/components/ui/PageHeader";
import SearchBar from "@/components/ui/SearchBar";
import { LoadingState } from "@/components/ui/States";
export default function ProjectListPage() {
const [projects, setProjects] = useState([]);
@@ -54,227 +58,151 @@ export default function ProjectListPage() {
setSearchTerm(e.target.value);
};
return (
<div className="min-h-screen bg-gray-50">
<div className="max-w-6xl mx-auto p-6">
<div className="flex justify-between items-center mb-8">
<div>
<h1 className="text-3xl font-bold text-gray-900">Projects</h1>
<p className="text-gray-600 mt-1">Manage and track your projects</p>
</div>
<Link href="/projects/new">
<Button variant="primary" size="lg">
<PageContainer>
<PageHeader title="Projects" description="Manage and track your projects">
<Link href="/projects/new">
<Button variant="primary" size="lg">
<svg
className="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 4v16m8-8H4"
/>
</svg>
Add Project
</Button>
</Link>
</PageHeader>
<SearchBar
searchTerm={searchTerm}
onSearchChange={handleSearchChange}
placeholder="Search by project name, WP, plot, or investment number..."
resultsCount={filteredProjects.length}
resultsText="projects"
/>
{filteredProjects.length === 0 && searchTerm ? (
<Card>
<CardContent className="text-center py-12">
<div className="text-gray-400 mb-4">
<svg
className="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
className="w-16 h-16 mx-auto"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 4v16m8-8H4"
fillRule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clipRule="evenodd"
/>
</svg>
Add Project
</Button>
</Link>{" "}
</div>{" "}
{/* Search Bar */}
<div className="mb-8">
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
<div className="flex items-center space-x-4">
<div className="flex-1 relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg
className="h-5 w-5 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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>
<Input
type="text"
placeholder="Search by project name, WP, plot, or investment number..."
value={searchTerm}
onChange={handleSearchChange}
className="pl-10 pr-10 w-full border-gray-300 focus:border-blue-500 focus:ring-blue-500"
/>
{searchTerm && (
<button
onClick={() => setSearchTerm("")}
className="absolute inset-y-0 right-0 pr-3 flex items-center"
>
<svg
className="h-5 w-5 text-gray-400 hover:text-gray-600 transition-colors"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
)}
</div>
</div>
{searchTerm && (
<div className="mt-3 pt-3 border-t border-gray-100">
<div className="flex items-center justify-between">
<p className="text-sm text-gray-600">
Found{" "}
<span className="font-medium text-gray-900">
{filteredProjects.length}
</span>{" "}
project
{filteredProjects.length !== 1 ? "s" : ""} matching
<span className="font-medium text-blue-600">
{" "}
&quot;{searchTerm}&quot;
</span>
</p>
{filteredProjects.length === 0 && (
<Button
variant="outline"
size="sm"
onClick={() => setSearchTerm("")}
>
Clear Search
</Button>
)}
</div>
</div>
)}
</div>
</div>
{filteredProjects.length === 0 && searchTerm ? (
<Card>
<CardContent className="text-center py-12">
<div className="text-gray-400 mb-4">
<svg
className="w-16 h-16 mx-auto"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clipRule="evenodd"
/>
</svg>
</div>
<h3 className="text-lg font-medium text-gray-900 mb-2">
No projects found
</h3>
<p className="text-gray-500 mb-6">
No projects match your search criteria. Try adjusting your
search terms.
</p>
<Button variant="outline" onClick={() => setSearchTerm("")}>
Clear Search
</Button>
</CardContent>
</Card>
) : projects.length === 0 ? (
<Card>
<CardContent className="text-center py-12">
<div className="text-gray-400 mb-4">
<svg
className="w-16 h-16 mx-auto"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
clipRule="evenodd"
/>
</svg>
</div>
<h3 className="text-lg font-medium text-gray-900 mb-2">
No projects yet
</h3>
<p className="text-gray-500 mb-6">
Get started by creating your first project
</p>
<Link href="/projects/new">
<Button variant="primary">Create First Project</Button>
</Link>
</CardContent>
</Card>
) : (
<div className="bg-white rounded-lg shadow overflow-hidden">
{/* Header Row */}
<div className="grid grid-cols-12 gap-4 p-4 bg-gray-100 border-b font-semibold text-sm text-gray-700">
{" "}
<div className="col-span-1">Number</div>
<div className="col-span-3">Project Name</div>
<div className="col-span-2">WP</div>
<div className="col-span-1">City</div>
<div className="col-span-2">Address</div>
<div className="col-span-1">Plot</div>{" "}
<div className="col-span-1">Finish Date</div>
<div className="col-span-1">Actions</div>
</div>{" "}
{/* Data Rows */}
{filteredProjects.map((project, index) => (
<div
key={project.project_id}
className={`grid grid-cols-12 gap-4 p-4 border-b hover:bg-gray-50 transition-colors items-center ${
index % 2 === 0 ? "bg-white" : "bg-gray-25"
}`}
<h3 className="text-lg font-medium text-gray-900 mb-2">
No projects found
</h3>
<p className="text-gray-500 mb-6">
No projects match your search criteria. Try adjusting your search
terms.
</p>
<Button variant="outline" onClick={() => setSearchTerm("")}>
Clear Search
</Button>
</CardContent>
</Card>
) : projects.length === 0 ? (
<Card>
<CardContent className="text-center py-12">
<div className="text-gray-400 mb-4">
<svg
className="w-16 h-16 mx-auto"
fill="currentColor"
viewBox="0 0 20 20"
>
<div className="col-span-1">
<Badge variant="primary" size="sm">
{project.project_number}
</Badge>
</div>{" "}
<div className="col-span-3">
<Link
href={`/projects/${project.project_id}`}
className="font-medium text-blue-600 hover:text-blue-800 transition-colors truncate block"
>
{project.project_name}
</Link>
</div>
<div className="col-span-2 text-sm text-gray-600 truncate">
{project.wp || "N/A"}
</div>
<div className="col-span-1 text-sm text-gray-600 truncate">
{project.city || "N/A"}
</div>
<div className="col-span-2 text-sm text-gray-600 truncate">
{project.address || "N/A"}
</div>
<div className="col-span-1 text-sm text-gray-600 truncate">
{project.plot || "N/A"}
</div>{" "}
<div className="col-span-1 text-sm text-gray-600 truncate">
{project.finish_date || "N/A"}
</div>
<div className="col-span-1">
<Link href={`/projects/${project.project_id}`}>
<Button variant="outline" size="sm">
View
</Button>
</Link>
</div>
<path
fillRule="evenodd"
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
clipRule="evenodd"
/>
</svg>
</div>
<h3 className="text-lg font-medium text-gray-900 mb-2">
No projects yet
</h3>
<p className="text-gray-500 mb-6">
Get started by creating your first project
</p>
<Link href="/projects/new">
<Button variant="primary">Create First Project</Button>
</Link>
</CardContent>
</Card>
) : (
<div className="bg-white rounded-lg shadow overflow-hidden">
{/* Header Row */}
<div className="grid grid-cols-12 gap-4 p-4 bg-gray-100 border-b font-semibold text-sm text-gray-700">
{" "}
<div className="col-span-1">Number</div>
<div className="col-span-3">Project Name</div>
<div className="col-span-2">WP</div>
<div className="col-span-1">City</div>
<div className="col-span-2">Address</div>
<div className="col-span-1">Plot</div>{" "}
<div className="col-span-1">Finish Date</div>
<div className="col-span-1">Actions</div>
</div>{" "}
{/* Data Rows */}
{filteredProjects.map((project, index) => (
<div
key={project.project_id}
className={`grid grid-cols-12 gap-4 p-4 border-b hover:bg-gray-50 transition-colors items-center ${
index % 2 === 0 ? "bg-white" : "bg-gray-25"
}`}
>
<div className="col-span-1">
<Badge variant="primary" size="sm">
{project.project_number}
</Badge>
</div>{" "}
<div className="col-span-3">
<Link
href={`/projects/${project.project_id}`}
className="font-medium text-blue-600 hover:text-blue-800 transition-colors truncate block"
>
{project.project_name}
</Link>
</div>
))}
</div>
)}
</div>
</div>
<div className="col-span-2 text-sm text-gray-600 truncate">
{project.wp || "N/A"}
</div>
<div className="col-span-1 text-sm text-gray-600 truncate">
{project.city || "N/A"}
</div>
<div className="col-span-2 text-sm text-gray-600 truncate">
{project.address || "N/A"}
</div>
<div className="col-span-1 text-sm text-gray-600 truncate">
{project.plot || "N/A"}
</div>{" "}
<div className="col-span-1 text-sm text-gray-600 truncate">
{project.finish_date || "N/A"}
</div>
<div className="col-span-1">
<Link href={`/projects/${project.project_id}`}>
<Button variant="outline" size="sm">
View
</Button>
</Link>
</div>{" "}
</div>
))}
</div>
)}
</PageContainer>
);
}