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

feat: Implement mobile-friendly filter toggle and enhance project list filters

Browse Source
This commit is contained in:
RKWojs
2025-09-12 13:36:28 +02:00
parent adc348b61b
commit 551a0ea71a
2 changed files with 333 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -99,62 +99,140 @@ export default function ProjectViewPage() {
if (days <= 7) return "warning";
return "success";
};
return (
<PageContainer>
<PageHeader
title={project.project_name}
description={`${project.city} • ${project.address}`}
action={
<div className="flex items-center gap-3">
<ProjectStatusDropdown project={project} size="sm" />
{daysRemaining !== null && (
<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
{daysRemaining === 0
? "Termin dzisiaj"
: daysRemaining > 0
? `${daysRemaining} dni pozostało`
: `${Math.abs(daysRemaining)} dni po terminie`}
</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>
Powrót do projektów
</Button>
</Link>
<Link href={`/projects/${params.id}/edit`}>
<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>
Edytuj projekt
</Button>
</Link>
{/* Mobile: Full-width title, Desktop: Standard PageHeader */}
<div className="block sm:hidden mb-6">
{/* Mobile Layout */}
<div className="space-y-4">
{/* Full-width title */}
<div className="w-full">
<h1 className="text-2xl font-bold text-gray-900 break-words">
{project.project_name}
</h1>
<p className="text-sm text-gray-600 mt-1">
{project.city} • {project.address}
</p>
</div>
}
/>{" "}
{/* Mobile action bar */}
<div className="flex flex-col space-y-3">
{/* Status and deadline badges */}
<div className="flex items-center gap-2 flex-wrap">
<ProjectStatusDropdown project={project} size="sm" />
{daysRemaining !== null && (
<Badge variant={getDeadlineVariant(daysRemaining)} size="sm" className="text-xs">
{daysRemaining === 0
? "Termin dzisiaj"
: daysRemaining > 0
? `${daysRemaining} dni pozostało`
: `${Math.abs(daysRemaining)} dni po terminie`}
</Badge>
)}
</div>
{/* Action buttons - full width */}
<div className="flex gap-2 w-full">
<Link href="/projects" className="flex-1">
<Button variant="outline" size="sm" className="w-full text-xs">
<svg
className="w-4 h-4 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
Powrót
</Button>
</Link>
<Link href={`/projects/${params.id}/edit`} className="flex-1">
<Button variant="primary" size="sm" className="w-full text-xs">
<svg
className="w-4 h-4 mr-1"
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>
Edytuj
</Button>
</Link>
</div>
</div>
</div>
</div>
{/* Desktop: Standard PageHeader */}
<div className="hidden sm:block">
<PageHeader
title={project.project_name}
description={`${project.city} • ${project.address}`}
action={
<div className="flex items-center gap-3">
<ProjectStatusDropdown project={project} size="sm" />
{daysRemaining !== null && (
<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
{daysRemaining === 0
? "Termin dzisiaj"
: daysRemaining > 0
? `${daysRemaining} dni pozostało`
: `${Math.abs(daysRemaining)} dni po terminie`}
</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>
Powrót do projektów
</Button>
</Link>
<Link href={`/projects/${params.id}/edit`}>
<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>
Edytuj projekt
</Button>
</Link>
</div>
}
/>
</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">
@@ -446,7 +524,7 @@ export default function ProjectViewPage() {
</CardContent>
</Card>
</div>
</div>{" "}
</div>
{/* Project Location Map */}
{project.coordinates && (
<div className="mb-8">