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
@@ -1,4 +1,8 @@
|
||||
import ProjectForm from "@/components/ProjectForm";
|
||||
import PageContainer from "@/components/ui/PageContainer";
|
||||
import PageHeader from "@/components/ui/PageHeader";
|
||||
import Button from "@/components/ui/Button";
|
||||
import Link from "next/link";
|
||||
|
||||
export default async function EditProjectPage({ params }) {
|
||||
const { id } = await params;
|
||||
@@ -7,10 +11,68 @@ export default async function EditProjectPage({ params }) {
|
||||
});
|
||||
const project = await res.json();
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<PageContainer>
|
||||
<div className="text-center py-12">
|
||||
<p className="text-red-600 text-lg mb-4">Project not found.</p>
|
||||
<Link href="/projects">
|
||||
<Button variant="primary">Back to Projects</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-2xl mx-auto">
|
||||
<h1 className="text-xl font-bold mb-4">Edit Project</h1>
|
||||
<ProjectForm initialData={project} />
|
||||
</div>
|
||||
<PageContainer>
|
||||
<PageHeader
|
||||
title="Edit Project"
|
||||
description={`Editing: ${project.project_name || "Untitled Project"}`}
|
||||
action={
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href={`/projects/${id}`}>
|
||||
<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="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
Cancel
|
||||
</Button>
|
||||
</Link>
|
||||
<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>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div className="max-w-2xl">
|
||||
<ProjectForm initialData={project} />
|
||||
</div>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ export default async function ProjectViewPage({ params }) {
|
||||
const { id } = await params;
|
||||
const project = getProjectWithContract(id);
|
||||
const notes = getNotesForProject(id);
|
||||
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<PageContainer>
|
||||
@@ -34,7 +34,7 @@ export default async function ProjectViewPage({ params }) {
|
||||
);
|
||||
}
|
||||
|
||||
const daysRemaining = project.finish_date
|
||||
const daysRemaining = project.finish_date
|
||||
? differenceInCalendarDays(parseISO(project.finish_date), new Date())
|
||||
: null;
|
||||
|
||||
@@ -50,13 +50,16 @@ export default async function ProjectViewPage({ params }) {
|
||||
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">
|
||||
{daysRemaining !== null && (
|
||||
<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"
|
||||
@@ -75,167 +78,346 @@ export default async function ProjectViewPage({ params }) {
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/projects/${id}/edit`}>
|
||||
<Button variant="secondary">Edit Project</Button>
|
||||
<Button variant="primary">
|
||||
<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||
/>
|
||||
</svg>
|
||||
Edit Project
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
/>{" "}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||
{/* Main Project Information */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Project Information
|
||||
</h2>
|
||||
<Badge
|
||||
variant={
|
||||
project.project_type === "design"
|
||||
? "secondary"
|
||||
: project.project_type === "construction"
|
||||
? "primary"
|
||||
: project.project_type === "design+construction"
|
||||
? "success"
|
||||
: "default"
|
||||
}
|
||||
size="sm"
|
||||
>
|
||||
{project.project_type === "design"
|
||||
? "Design (P)"
|
||||
: project.project_type === "construction"
|
||||
? "Construction (R)"
|
||||
: project.project_type === "design+construction"
|
||||
? "Design + Construction (P+R)"
|
||||
: "Unknown"}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Location
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.city || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Address
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.address || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Plot
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.plot || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
District
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.district || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Unit
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.unit || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Deadline
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.finish_date || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
WP
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.wp || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Investment Number
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.investment_number || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
</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">
|
||||
{project.contact && (
|
||||
<div className="border-t pt-4">
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Contact
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">{project.contact}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{project.coordinates && (
|
||||
<div className="border-t pt-4">
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Coordinates
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium font-mono text-sm">
|
||||
{project.coordinates}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{project.notes && (
|
||||
<div className="border-t pt-4">
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Notes
|
||||
</span>
|
||||
<p className="text-gray-900">{project.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Contract Details */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Contract Details
|
||||
</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 block mb-1">
|
||||
Contract Number
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.contract_number || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Contract Name
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.contract_name || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Customer
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.customer || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Investor
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{project.investor || "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Status Sidebar */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
Project Status
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Location
|
||||
<span className="text-sm font-medium text-gray-500 block mb-2">
|
||||
Current Status
|
||||
</span>
|
||||
<p className="text-gray-900">{project.city}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant={
|
||||
project.project_status === "fulfilled"
|
||||
? "success"
|
||||
: project.project_status === "registered"
|
||||
? "secondary"
|
||||
: "primary"
|
||||
}
|
||||
size="md"
|
||||
>
|
||||
{project.project_status === "registered"
|
||||
? "Registered"
|
||||
: project.project_status === "in_progress_design"
|
||||
? "In Progress (Design)"
|
||||
: project.project_status === "in_progress_construction"
|
||||
? "In Progress (Construction)"
|
||||
: project.project_status === "fulfilled"
|
||||
? "Completed"
|
||||
: "Unknown"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<ProjectStatusDropdown project={project} />
|
||||
</div>
|
||||
</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.coordinates && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">Coordinates</span>
|
||||
<p className="text-gray-900">{project.coordinates}</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>
|
||||
)}
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Typ projektu
|
||||
</span>
|
||||
<p className="text-gray-900">
|
||||
{project.project_type === "design"
|
||||
? "Projektowanie"
|
||||
: project.project_type === "construction"
|
||||
? "Realizacja"
|
||||
: project.project_type === "design+construction"
|
||||
? "Projektowanie + Realizacja"
|
||||
: "-"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
Status projektu
|
||||
</span>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-gray-900">
|
||||
{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"
|
||||
: "-"}
|
||||
</span>
|
||||
<ProjectStatusDropdown project={project} />
|
||||
</div>
|
||||
</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> {/* Project Location Map */}
|
||||
|
||||
{daysRemaining !== null && (
|
||||
<div className="border-t pt-4">
|
||||
<span className="text-sm font-medium text-gray-500 block mb-2">
|
||||
Timeline
|
||||
</span>
|
||||
<div className="text-center">
|
||||
<Badge
|
||||
variant={getDeadlineVariant(daysRemaining)}
|
||||
size="lg"
|
||||
>
|
||||
{daysRemaining === 0
|
||||
? "Due Today"
|
||||
: daysRemaining > 0
|
||||
? `${daysRemaining} days remaining`
|
||||
: `${Math.abs(daysRemaining)} days overdue`}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
Quick Actions
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Link href={`/projects/${id}/edit`} className="block">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full justify-start"
|
||||
>
|
||||
<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||
/>
|
||||
</svg>
|
||||
Edit Project
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/projects" className="block">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full justify-start"
|
||||
>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>{" "}
|
||||
{/* Project Location Map */}
|
||||
{project.coordinates && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Project Location
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ProjectMap
|
||||
coordinates={project.coordinates}
|
||||
projectName={project.project_name}
|
||||
showLayerControl={true}
|
||||
mapHeight="h-80"
|
||||
defaultLayer="Polish Geoportal Orthophoto"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="mb-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Project Location
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ProjectMap
|
||||
coordinates={project.coordinates}
|
||||
projectName={project.project_name}
|
||||
showLayerControl={true}
|
||||
mapHeight="h-80"
|
||||
defaultLayer="Polish Geoportal Orthophoto"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ProjectTasksSection projectId={id} />
|
||||
|
||||
{/* Project Tasks Section */}
|
||||
<div className="mb-8">
|
||||
<ProjectTasksSection projectId={id} />
|
||||
</div>
|
||||
{/* Notes Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">Notes</h2>
|
||||
@@ -245,8 +427,8 @@ export default async function ProjectViewPage({ params }) {
|
||||
<NoteForm projectId={id} />
|
||||
</div>
|
||||
{notes.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="text-gray-400 mb-2">
|
||||
<div className="text-center py-12">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg
|
||||
className="w-12 h-12 mx-auto"
|
||||
fill="currentColor"
|
||||
@@ -258,17 +440,26 @@ export default async function ProjectViewPage({ params }) {
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-500">No notes yet.</p>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||
No notes yet
|
||||
</h3>
|
||||
<p className="text-gray-500">
|
||||
Add your first note using the form above.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-4">
|
||||
{notes.map((n) => (
|
||||
<div
|
||||
key={n.note_id}
|
||||
className="border border-gray-200 p-4 rounded-lg bg-gray-50"
|
||||
className="border border-gray-200 p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<p className="text-sm text-gray-500 mb-2">{n.note_date}</p>
|
||||
<p className="text-gray-900">{n.note}</p>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
{n.note_date}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-900 leading-relaxed">{n.note}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user