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

refactor: Update user role display in navigation component to improve readability

Browse Source
This commit is contained in:
RKWojs
2025-09-12 12:12:33 +02:00
parent 49f97a9939
commit adc348b61b
2 changed files with 78 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/app/projects/page.js
View File

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

4
src/components/ui/Navigation.js
View File

@@ -164,9 +164,9 @@ const Navigation = () => {
</div> </div>
<div> <div>
<div className="text-sm font-medium text-gray-900">{session.user.name}</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('_', ' ')} {t(`userRoles.${session.user.role}`) || session.user.role?.replace('_', ' ')}
</div> </div> */}
</div> </div>
</div> </div>
<button <button