From adc348b61b1d243503fba853928f6a624b247ef6 Mon Sep 17 00:00:00 2001
From: RKWojs <rkwojs@gmail.com>
Date: Fri, 12 Sep 2025 12:12:33 +0200
Subject: [PATCH] refactor: Update user role display in navigation component to
 improve readability

---
 src/app/projects/page.js        | 136 ++++++++++++++++++--------------
 src/components/ui/Navigation.js |   4 +-
 2 files changed, 78 insertions(+), 62 deletions(-)

diff --git a/src/app/projects/page.js b/src/app/projects/page.js
index 0795b91..674157b 100644
--- a/src/app/projects/page.js
+++ b/src/app/projects/page.js
@@ -135,9 +135,9 @@ export default function ProjectListPage() {
 	return (
 		<PageContainer>
 			<PageHeader title={t('projects.title')} description={t('projects.subtitle')}>
-				<div className="flex gap-2">
-					<Link href="/projects/map">
-						<Button variant="outline" size="lg">
+				<div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 sm:gap-2">
+					<Link href="/projects/map" className="w-full sm:w-auto">
+						<Button variant="outline" size="lg" className="w-full">
 							<svg
 								className="w-5 h-5 mr-2"
 								fill="none"
@@ -154,8 +154,8 @@ export default function ProjectListPage() {
 							{t('projects.mapView') || 'Widok mapy'}
 						</Button>
 					</Link>
-					<Link href="/projects/new">
-						<Button variant="primary" size="lg">
+					<Link href="/projects/new" className="w-full sm:w-auto">
+						<Button variant="primary" size="lg" className="w-full">
 							<svg
 								className="w-5 h-5 mr-2"
 								fill="none"
@@ -186,13 +186,15 @@ export default function ProjectListPage() {
 			{/* Filters */}
 			<Card className="mb-6">
 				<CardContent className="p-4">
-					<div className="flex flex-wrap gap-4 items-center">
-						<div className="flex items-center gap-2">
-							<label className="text-sm font-medium text-gray-700">{t('common.status') || 'Status'}:</label>
+					<div className="flex flex-col space-y-4 md:flex-row md:flex-wrap md:gap-4 md:space-y-0 md:items-center">
+						<div className="flex flex-col space-y-2 md:flex-row md:items-center md:space-y-0 md:space-x-2">
+							<label className="text-sm font-medium text-gray-700 md:text-xs md:whitespace-nowrap">
+								{t('common.status') || 'Status'}:
+							</label>
 							<select
 								value={filters.status}
 								onChange={(e) => handleFilterChange('status', e.target.value)}
-								className="px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+								className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 md:px-3 md:py-1 md:text-sm"
 							>
 								<option value="all">{t('common.all')}</option>
 								<option value="not_finished">{t('projects.notFinished') || 'Nie zakończone'}</option>
@@ -203,12 +205,14 @@ export default function ProjectListPage() {
 							</select>
 						</div>
 
-						<div className="flex items-center gap-2">
-							<label className="text-sm font-medium text-gray-700">{t('common.type') || 'Typ'}:</label>
+						<div className="flex flex-col space-y-2 md:flex-row md:items-center md:space-y-0 md:space-x-2">
+							<label className="text-sm font-medium text-gray-700 md:text-xs md:whitespace-nowrap">
+								{t('common.type') || 'Typ'}:
+							</label>
 							<select
 								value={filters.type}
 								onChange={(e) => handleFilterChange('type', e.target.value)}
-								className="px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+								className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 md:px-3 md:py-1 md:text-sm"
 							>
 								<option value="all">{t('common.all')}</option>
 								<option value="design">{t('projectType.design')}</option>
@@ -217,12 +221,14 @@ export default function ProjectListPage() {
 							</select>
 						</div>
 
-						<div className="flex items-center gap-2">
-							<label className="text-sm font-medium text-gray-700">{t('contracts.customer') || 'Klient'}:</label>
+						<div className="flex flex-col space-y-2 md:flex-row md:items-center md:space-y-0 md:space-x-2">
+							<label className="text-sm font-medium text-gray-700 md:text-xs md:whitespace-nowrap">
+								{t('contracts.customer') || 'Klient'}:
+							</label>
 							<select
 								value={filters.customer}
 								onChange={(e) => handleFilterChange('customer', e.target.value)}
-								className="px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+								className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 md:px-3 md:py-1 md:text-sm"
 							>
 								<option value="all">{t('common.all')}</option>
 								{customers.map((customer) => (
@@ -238,13 +244,13 @@ export default function ProjectListPage() {
 								variant="outline" 
 								size="sm" 
 								onClick={clearAllFilters}
-								className="text-xs"
+								className="text-xs self-start md:self-auto"
 							>
 								{t('common.clearAllFilters') || 'Wyczyść wszystkie filtry'}
 							</Button>
 						)}
 
-						<div className="text-sm text-gray-500 ml-auto">
+						<div className="text-sm text-gray-500 md:ml-auto md:text-right">
 							{t('projects.showingResults', { shown: filteredProjects.length, total: projects.length }) || `Wyświetlono ${filteredProjects.length} z ${projects.length} projektów`}
 						</div>
 					</div>
@@ -306,41 +312,43 @@ export default function ProjectListPage() {
 				</Card>
 			) : (
 				<div className="bg-white rounded-lg shadow overflow-hidden">
-					<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-32">
-									Nr.
-								</th>
-								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700">
-									{t('projects.projectName')}
-								</th>
-								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-40">
-									WP
-								</th>
-								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
-									{t('projects.city')}
-								</th>
-								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-40">
-									{t('projects.address')}
-								</th>
-								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
-									{t('projects.plot')}
-								</th>
-								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-24">
-									{t('projects.finishDate')}
-								</th>
-								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-12">
-									{t('common.type') || 'Typ'}
-								</th>
-								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-24">
-									{t('common.status') || 'Status'}
-								</th>
-								<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
-									{t('common.actions') || 'Akcje'}
-								</th>
-							</tr>
-						</thead>
+					{/* Mobile scroll container */}
+					<div className="overflow-x-auto">
+						<table className="w-full min-w-[800px] 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-24 md:w-32">
+										Nr.
+									</th>
+									<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 min-w-[200px]">
+										{t('projects.projectName')}
+									</th>
+									<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20 md:w-40 hidden sm:table-cell">
+										WP
+									</th>
+									<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-16 md:w-20 hidden md:table-cell">
+										{t('projects.city')}
+									</th>
+									<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-24 md:w-40 hidden lg:table-cell">
+										{t('projects.address')}
+									</th>
+									<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-16 md:w-20 hidden sm:table-cell">
+										{t('projects.plot')}
+									</th>
+									<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20 md:w-24 hidden md:table-cell">
+										{t('projects.finishDate')}
+									</th>
+									<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-12">
+										{t('common.type') || 'Typ'}
+									</th>
+									<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20 md:w-24">
+										{t('common.status') || 'Status'}
+									</th>
+									<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-16 md:w-20">
+										{t('common.actions') || 'Akcje'}
+									</th>
+								</tr>
+							</thead>
 						<tbody>
 							{filteredProjects.map((project, index) => (
 								<tr
@@ -360,35 +368,42 @@ export default function ProjectListPage() {
 											className="font-medium text-blue-600 hover:text-blue-800 transition-colors text-sm truncate block"
 											title={project.project_name}
 										>
-											{project.project_name}
+											<span className="block sm:hidden">
+												{project.project_name.length > 30 
+													? `${project.project_name.substring(0, 30)}...` 
+													: project.project_name}
+											</span>
+											<span className="hidden sm:block">
+												{project.project_name}
+											</span>
 										</Link>
 									</td>
 									<td
-										className="px-2 py-3 text-xs text-gray-600 truncate"
+										className="px-2 py-3 text-xs text-gray-600 truncate hidden sm:table-cell"
 										title={project.wp}
 									>
 										{project.wp || "N/A"}
 									</td>
 									<td
-										className="px-2 py-3 text-xs text-gray-600 truncate"
+										className="px-2 py-3 text-xs text-gray-600 truncate hidden md:table-cell"
 										title={project.city}
 									>
 										{project.city || "N/A"}
 									</td>
 									<td
-										className="px-2 py-3 text-xs text-gray-600 truncate"
+										className="px-2 py-3 text-xs text-gray-600 truncate hidden lg:table-cell"
 										title={project.address}
 									>
 										{project.address || "N/A"}
 									</td>
 									<td
-										className="px-2 py-3 text-xs text-gray-600 truncate"
+										className="px-2 py-3 text-xs text-gray-600 truncate hidden sm:table-cell"
 										title={project.plot}
 									>
 										{project.plot || "N/A"}
-									</td>{" "}
+									</td>
 									<td
-										className="px-2 py-3 text-xs text-gray-600 truncate"
+										className="px-2 py-3 text-xs text-gray-600 truncate hidden md:table-cell"
 										title={project.finish_date}
 									>
 										{project.finish_date
@@ -412,7 +427,7 @@ export default function ProjectListPage() {
 											<Button
 												variant="outline"
 												size="sm"
-												className="text-xs px-2 py-1"
+												className="text-xs px-2 py-1 w-full sm:w-auto"
 											>
 												{t('common.view') || 'Wyświetl'}
 											</Button>
@@ -422,6 +437,7 @@ export default function ProjectListPage() {
 							))}
 						</tbody>
 					</table>
+					</div>
 				</div>
 			)}
 		</PageContainer>
diff --git a/src/components/ui/Navigation.js b/src/components/ui/Navigation.js
index 550cc01..11ed80b 100644
--- a/src/components/ui/Navigation.js
+++ b/src/components/ui/Navigation.js
@@ -164,9 +164,9 @@ const Navigation = () => {
 									</div>
 									<div>
 										<div className="text-sm font-medium text-gray-900">{session.user.name}</div>
-										<div className="text-xs text-gray-500 capitalize">
+										{/* <div className="text-xs text-gray-500 capitalize">
 											{t(`userRoles.${session.user.role}`) || session.user.role?.replace('_', ' ')}
-										</div>
+										</div> */}
 									</div>
 								</div>
 								<button