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

feat: Implement internationalization for task management components

Browse Source 
- Added translation support for task-related strings in ProjectTaskForm and ProjectTasksSection components.
- Integrated translation for navigation items in the Navigation component.
- Created ProjectCalendarWidget component with Polish translations for project statuses and deadlines.
- Developed Tooltip component for enhanced user experience with tooltips.
- Established a field change history logging system in the database with associated queries.
- Enhanced task update logging to include translated status and priority changes.
- Introduced server-side translations for system messages to improve localization.
This commit is contained in:
RKWojs
2025-09-11 15:49:07 +02:00
parent 50adc50a24
commit 0dd988730f
24 changed files with 1945 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,33 +18,68 @@ export default function ProjectListPage() {
const [projects, setProjects] = useState([]);
const [searchTerm, setSearchTerm] = useState("");
const [filteredProjects, setFilteredProjects] = useState([]);
const [filters, setFilters] = useState({
status: 'all',
type: 'all',
customer: 'all'
});
const [customers, setCustomers] = useState([]);
useEffect(() => {
fetch("/api/projects")
.then((res) => res.json())
.then((data) => {
setProjects(data);
setFilteredProjects(data);
// Extract unique customers for filter
const uniqueCustomers = [...new Set(data.map(p => p.customer).filter(Boolean))];
setCustomers(uniqueCustomers);
});
}, []);
// Filter projects based on search term
// Filter projects based on search term and filters
useEffect(() => {
if (!searchTerm.trim()) {
setFilteredProjects(projects);
} else {
const filtered = projects.filter((project) => {
const searchLower = searchTerm.toLowerCase();
let filtered = projects;
// Apply status filter
if (filters.status !== 'all') {
if (filters.status === 'not_finished') {
filtered = filtered.filter(project => project.project_status !== 'fulfilled');
} else {
filtered = filtered.filter(project => project.project_status === filters.status);
}
}
// Apply type filter
if (filters.type !== 'all') {
filtered = filtered.filter(project => project.project_type === filters.type);
}
// Apply customer filter
if (filters.customer !== 'all') {
filtered = filtered.filter(project => project.customer === filters.customer);
}
// Apply search term
if (searchTerm.trim()) {
const searchLower = searchTerm.toLowerCase();
filtered = filtered.filter((project) => {
return (
project.project_name?.toLowerCase().includes(searchLower) ||
project.wp?.toLowerCase().includes(searchLower) ||
project.plot?.toLowerCase().includes(searchLower) ||
project.investment_number?.toLowerCase().includes(searchLower) ||
project.address?.toLowerCase().includes(searchLower)
project.address?.toLowerCase().includes(searchLower) ||
project.customer?.toLowerCase().includes(searchLower) ||
project.investor?.toLowerCase().includes(searchLower)
);
});
setFilteredProjects(filtered);
}
}, [searchTerm, projects]);
setFilteredProjects(filtered);
}, [searchTerm, projects, filters]);
async function handleDelete(id) {
const confirmed = confirm(t('projects.deleteConfirm'));
@@ -61,6 +96,41 @@ export default function ProjectListPage() {
const handleSearchChange = (e) => {
setSearchTerm(e.target.value);
};
const handleFilterChange = (filterType, value) => {
setFilters(prev => ({
...prev,
[filterType]: value
}));
};
const clearAllFilters = () => {
setFilters({
status: 'all',
type: 'all',
customer: 'all'
});
setSearchTerm('');
};
const getStatusLabel = (status) => {
switch(status) {
case "registered": return t('projectStatus.registered');
case "in_progress_design": return t('projectStatus.in_progress_design');
case "in_progress_construction": return t('projectStatus.in_progress_construction');
case "fulfilled": return t('projectStatus.fulfilled');
default: return "-";
}
};
const getTypeLabel = (type) => {
switch(type) {
case "design": return t('projectType.design');
case "construction": return t('projectType.construction');
case "design+construction": return t('projectType.design+construction');
default: return "-";
}
};
return (
<PageContainer>
<PageHeader title={t('projects.title')} description={t('projects.subtitle')}>
@@ -80,7 +150,7 @@ export default function ProjectListPage() {
d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
/>
</svg>
Widok mapy
{t('projects.mapView') || 'Widok mapy'}
</Button>
</Link>
<Link href="/projects/new">
@@ -109,8 +179,76 @@ export default function ProjectListPage() {
onSearchChange={handleSearchChange}
placeholder={t('projects.searchPlaceholder')}
resultsCount={filteredProjects.length}
resultsText="projektów"
resultsText={t('projects.projects') || 'projektów'}
/>
{/* 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>
<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"
>
<option value="all">{t('common.all')}</option>
<option value="not_finished">{t('projects.notFinished') || 'Nie zakończone'}</option>
<option value="registered">{t('projectStatus.registered')}</option>
<option value="in_progress_design">{t('projectStatus.in_progress_design')}</option>
<option value="in_progress_construction">{t('projectStatus.in_progress_construction')}</option>
<option value="fulfilled">{t('projectStatus.fulfilled')}</option>
</select>
</div>
<div className="flex items-center gap-2">
<label className="text-sm font-medium text-gray-700">{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"
>
<option value="all">{t('common.all')}</option>
<option value="design">{t('projectType.design')}</option>
<option value="construction">{t('projectType.construction')}</option>
<option value="design+construction">{t('projectType.design+construction')}</option>
</select>
</div>
<div className="flex items-center gap-2">
<label className="text-sm font-medium text-gray-700">{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"
>
<option value="all">{t('common.all')}</option>
{customers.map((customer) => (
<option key={customer} value={customer}>
{customer}
</option>
))}
</select>
</div>
{(filters.status !== 'all' || filters.type !== 'all' || filters.customer !== 'all' || searchTerm) && (
<Button
variant="outline"
size="sm"
onClick={clearAllFilters}
className="text-xs"
>
{t('common.clearAllFilters') || 'Wyczyść wszystkie filtry'}
</Button>
)}
<div className="text-sm text-gray-500 ml-auto">
{t('projects.showingResults', { shown: filteredProjects.length, total: projects.length }) || `Wyświetlono ${filteredProjects.length} z ${projects.length} projektów`}
</div>
</div>
</CardContent>
</Card>
{filteredProjects.length === 0 && searchTerm ? (
<Card>
<CardContent className="text-center py-12">
@@ -131,10 +269,10 @@ export default function ProjectListPage() {
{t('common.noResults')}
</h3>
<p className="text-gray-500 mb-6">
Brak projektów pasujących do kryteriów wyszukiwania. Spróbuj zmienić wyszukiwane frazy.
{t('projects.noMatchingResults') || 'Brak projektów pasujących do kryteriów wyszukiwania. Spróbuj zmienić wyszukiwane frazy.'}
</p>
<Button variant="outline" onClick={() => setSearchTerm("")}>
Wyczyść wyszukiwanie
{t('common.clearSearch') || 'Wyczyść wyszukiwanie'}
</Button>
</CardContent>
</Card>
@@ -161,7 +299,7 @@ export default function ProjectListPage() {
{t('projects.noProjectsMessage')}
</p>
<Link href="/projects/new">
<Button variant="primary">Utwórz pierwszy projekt</Button>
<Button variant="primary">{t('projects.createFirstProject') || 'Utwórz pierwszy projekt'}</Button>
</Link>
</CardContent>
</Card>
@@ -192,13 +330,13 @@ export default function ProjectListPage() {
{t('projects.finishDate')}
</th>
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-12">
Typ
{t('common.type') || 'Typ'}
</th>
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-24">
Status
{t('common.status') || 'Status'}
</th>
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
Akcje
{t('common.actions') || 'Akcje'}
</th>
</tr>
</thead>
@@ -266,15 +404,7 @@ export default function ProjectListPage() {
: "-"}
</td>
<td className="px-2 py-3 text-xs text-gray-600 truncate">
{project.project_status === "registered"
? "Zarejestr."
: project.project_status === "in_progress_design"
? "W real. (P)"
: project.project_status === "in_progress_construction"
? "W real. (R)"
: project.project_status === "fulfilled"
? "Zakończony"
: "-"}
{getStatusLabel(project.project_status)}
</td>
<td className="px-2 py-3">
<Link href={`/projects/${project.project_id}`}>
@@ -283,7 +413,7 @@ export default function ProjectListPage() {
size="sm"
className="text-xs px-2 py-1"
>
Wyświetl
{t('common.view') || 'Wyświetl'}
</Button>
</Link>
</td>