Refactor project and contract forms for improved UI and functionality
- Updated NewProjectPage to use PageContainer and PageHeader for better layout. - Enhanced ProjectListPage to display project data in a responsive table format. - Refactored ContractForm to use Card components and improved loading state handling. - Refactored ProjectForm to use Card components, added loading state, and improved form structure and styling.
This commit is contained in:
Chop
@@ -145,83 +145,128 @@ export default function ProjectListPage() {
|
||||
</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"
|
||||
<table className="w-full table-fixed">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b">
|
||||
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-16">
|
||||
No.
|
||||
</th>
|
||||
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700">
|
||||
Project Name
|
||||
</th>
|
||||
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
|
||||
WP
|
||||
</th>
|
||||
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
|
||||
City
|
||||
</th>
|
||||
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-32">
|
||||
Address
|
||||
</th>
|
||||
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
|
||||
Plot
|
||||
</th>
|
||||
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-24">
|
||||
Finish
|
||||
</th>
|
||||
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-12">
|
||||
Type
|
||||
</th>
|
||||
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-24">
|
||||
Status
|
||||
</th>
|
||||
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>{" "}
|
||||
<tbody>
|
||||
{filteredProjects.map((project, index) => (
|
||||
<tr
|
||||
key={project.project_id}
|
||||
className={`border-b hover:bg-gray-50 transition-colors ${
|
||||
index % 2 === 0 ? "bg-white" : "bg-gray-25"
|
||||
}`}
|
||||
>
|
||||
{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 text-sm text-gray-600 truncate">
|
||||
{project.project_type === "design"
|
||||
? "Projektowanie"
|
||||
: project.project_type === "construction"
|
||||
? "Realizacja"
|
||||
: project.project_type === "design+construction"
|
||||
? "Projektowanie + Realizacja"
|
||||
: "-"}
|
||||
</div>
|
||||
<div className="col-span-1 text-sm text-gray-600 truncate">
|
||||
{project.project_status === "registered"
|
||||
? "Zarejestrowany"
|
||||
: project.project_status === "in_progress_design"
|
||||
? "W realizacji (projektowanie)"
|
||||
: project.project_status === "in_progress_construction"
|
||||
? "W realizacji (realizacja)"
|
||||
: project.project_status === "fulfilled"
|
||||
? "Zakończony"
|
||||
: "-"}
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<Link href={`/projects/${project.project_id}`}>
|
||||
<Button variant="outline" size="sm">
|
||||
View
|
||||
</Button>
|
||||
</Link>
|
||||
</div>{" "}
|
||||
</div>
|
||||
))}
|
||||
<td className="px-2 py-3">
|
||||
<Badge variant="primary" size="sm" className="text-xs">
|
||||
{project.project_number}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-2 py-3">
|
||||
<Link
|
||||
href={`/projects/${project.project_id}`}
|
||||
className="font-medium text-blue-600 hover:text-blue-800 transition-colors text-sm truncate block"
|
||||
title={project.project_name}
|
||||
>
|
||||
{project.project_name}
|
||||
</Link>
|
||||
</td>
|
||||
<td
|
||||
className="px-2 py-3 text-xs text-gray-600 truncate"
|
||||
title={project.wp}
|
||||
>
|
||||
{project.wp || "N/A"}
|
||||
</td>
|
||||
<td
|
||||
className="px-2 py-3 text-xs text-gray-600 truncate"
|
||||
title={project.city}
|
||||
>
|
||||
{project.city || "N/A"}
|
||||
</td>
|
||||
<td
|
||||
className="px-2 py-3 text-xs text-gray-600 truncate"
|
||||
title={project.address}
|
||||
>
|
||||
{project.address || "N/A"}
|
||||
</td>
|
||||
<td
|
||||
className="px-2 py-3 text-xs text-gray-600 truncate"
|
||||
title={project.plot}
|
||||
>
|
||||
{project.plot || "N/A"}
|
||||
</td>
|
||||
<td
|
||||
className="px-2 py-3 text-xs text-gray-600 truncate"
|
||||
title={project.finish_date}
|
||||
>
|
||||
{project.finish_date || "N/A"}
|
||||
</td>
|
||||
<td className="px-2 py-3 text-xs text-gray-600 text-center font-semibold">
|
||||
{project.project_type === "design"
|
||||
? "P"
|
||||
: project.project_type === "construction"
|
||||
? "R"
|
||||
: project.project_type === "design+construction"
|
||||
? "P+R"
|
||||
: "-"}
|
||||
</td>
|
||||
<td className="px-2 py-3 text-xs text-gray-600 truncate">
|
||||
{project.project_status === "registered"
|
||||
? "Zarejestr."
|
||||
: project.project_status === "in_progress_design"
|
||||
? "W real. (P)"
|
||||
: project.project_status === "in_progress_construction"
|
||||
? "W real. (R)"
|
||||
: project.project_status === "fulfilled"
|
||||
? "Zakończony"
|
||||
: "-"}
|
||||
</td>
|
||||
<td className="px-2 py-3">
|
||||
<Link href={`/projects/${project.project_id}`}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-xs px-2 py-1"
|
||||
>
|
||||
View
|
||||
</Button>
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</PageContainer>
|
||||
|
||||
Reference in New Issue
Block a user