Leading The Way

</div>

</div>

</Col>

</Row>

<Row>

<Col span={24}>

<div className="flex flex-col gap-y-2">

<span className="font-semibold text-lg">Project Description:</span>

<div className="px-5 border border-primary/50 py-2.5 rounded-md min-h-32 whitespace-pre-wrap">

{project?.description ? parse(project?.description) : ""}

</div>

</div>

</Col>

</Row>

{/* Tabs */}

<Tabs defaultActiveKey="1" className="mt-8 border-none overflow-x-auto w-full custom-tabs">

<Tabs.TabPane tab="Applications" key="1">

<Row gutter={[16, 16]}>

{project?.applications?.length > 0 ? (

project.applications.map((app, index) => (

<Col xs={24} sm={12} lg={8} key={app.id || index}>

<Card className="rounded-xl border-secondary-100 shadow-sm hover:shadow-md transition-all">

<div className="flex items-center gap-3 mb-4">

<Avatar

src={app?.freelancer?.photoUrl}

icon={<UserOutlined />}

className="bg-primary/10 text-primary"

/>

<div>

<h4 className="font-semibold m-0">{app?.freelancer?.name}</h4>

<div className="flex items-center gap-1 text-yellow-500 text-xs">

<StarFilled />

<span>4.8 (12 reviews)</span>

</div>

</div>

</div>

<div className="mb-4">

<div className="text-xs text-gray-500 uppercase font-bold mb-1">PROPOSAL</div>

<p className="text-sm line-clamp-3 mb-2">{app?.proposal}</p>

<Link

href={`/project/application/${app._id}`}

className="text-primary text-xs font-semibold hover:underline"

>

View Full Proposal

</Link>

</div>

<div className="flex justify-between items-center mb-4">

<div>

<div className="text-xs text-gray-500">Bid</div>

<div className="font-bold text-secondary-900">${app?.bidAmount}</div>

</div>

<div className="text-right">

<div className="text-xs text-gray-500">Timeline</div>

<div className="font-bold text-secondary-900">{app?.deliveryTime} days</div>

</div>

</div>

<div className="flex gap-2">

<Button

type="primary"

className="flex-1 rounded-lg"

onClick={() => handleAccept(app._id)}

>

Accept

</Button>

<Button className="flex-1 rounded-lg border-red-500 text-red-500 hover:bg-red-50">

Decline

</Button>

</div>

</Card>

</Col>

))

) : (

<Col span={24}>

<div className="text-center py-12 bg-gray-50 rounded-xl border-2 border-dashed border-gray-200">

<div className="text-gray-400 mb-2">No applications yet</div>

<p className="text-sm text-gray-500">As soon as freelancers apply, they will appear here.</p>

</div>

</Col>

)}

</Row>

</Tabs.TabPane>

<Tabs.TabPane tab="Project Tasks" key="2">

<ProjectTaskDashboard projectId={id} milestones={project?.milestones || []} />

</Tabs.TabPane>

<Tabs.TabPane tab="Messages" key="3">

<div className="p-8 text-center text-gray-500 bg-gray-50 rounded-xl border border-gray-200">

Messages feature coming soon

</div>

</Tabs.TabPane>

<Tabs.TabPane tab="Payments" key="4">

<div className="p-8 text-center text-gray-500 bg-gray-50 rounded-xl border border-gray-200">

Payments feature coming soon

</div>

</Tabs.TabPane>

</Tabs>

</div>

);

};

export default ProjectDetails;

<ctrl61>

t-gray-500">Posted on {new Date(project?.createdAt).toLocaleDateString()}</span>

</div>

</div>

<div className="flex gap-3">

<Button icon={<EditOutlined />} className="rounded-full border-secondary-200 hover:text-primary hover:border-primary">

Edit Project

</Button>

<Button icon={<MoreOutlined />} className="rounded-full border-secondary-200" />

</div>

</div>

<Row gutter={[24, 24]} className="mb-8">

<Col xs={24} md={8}>

<Card className="h-full rounded-xl border-secondary-100 shadow-sm">

<div className="flex flex-col gap-4">

<div className="flex items-center gap-3">

<div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-blue-600">

<DollarOutlined style={{ fontSize: '20px' }} />

</div>

<div>

<div className="text-xs text-gray-500 uppercase tracking-wider font-bold">Budget</div>

<div className="text-xl font-bold text-secondary-900">${project?.budget}</div>

</div>

</div>

<Divider className="my-0" />

<div className="flex items-center gap-3">

<div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center text-green-600">

<CalendarOutlined style={{ fontSize: '20px' }} />

</div>

<div>

<div className="text-xs text-gray-500 uppercase tracking-wider font-bold">Deadline</div>

<div className="text-xl font-bold text-secondary-900">{new Date(project?.deadline).toLocaleDateString()}</div>

</div>

</div>

</div>

</Card>

</Col>

<Col xs={24} md={16}>

<div className="h-full p-6 bg-white rounded-xl border border-secondary-100 shadow-sm">

<h3 className="text-lg font-semibold mb-4 text-secondary-800">Required Skills</h3>

<div className="flex flex-wrap gap-2">

{project?.skills?.map((skill, index) => (

<Tag

key={index}

className="px-4 py-1.5 rounded-full bg-secondary-50 border-secondary-100 text-secondary-700 text-sm m-0"

>

{skill}

</Tag>

<ctrl63>