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

feat: Integrate translation support for contract-related components and improve user feedback messages

Browse Source
This commit is contained in:
RKWojs
2025-09-16 11:20:14 +02:00
parent 43622f8e65
commit e5955a31fd
6 changed files with 128 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/ContractForm.js
View File

@@ -6,8 +6,10 @@ import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { formatDateForInput } from "@/lib/utils";
import { useTranslation } from "@/lib/i18n";
export default function ContractForm() {
const { t } = useTranslation();
const [form, setForm] = useState({
contract_number: "",
contract_name: "",
@@ -42,13 +44,11 @@ export default function ContractForm() {
const contract = await res.json();
router.push(`/contracts/${contract.contract_id}`);
} else {
alert(
"Failed to create contract. Please check the data and try again."
);
alert(t('contracts.failedToCreateContract'));
}
} catch (error) {
console.error("Error creating contract:", error);
alert("Failed to create contract. Please try again.");
alert(t('contracts.failedToCreateContract'));
} finally {
setLoading(false);
}
@@ -58,7 +58,7 @@ export default function ContractForm() {
<Card>
<CardHeader>
<h2 className="text-xl font-semibold text-gray-900">
Contract Details
{t('contracts.contractDetails')}
</h2>
</CardHeader>
<CardContent>
@@ -67,73 +67,73 @@ export default function ContractForm() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Contract Number <span className="text-red-500">*</span>
{t('contracts.contractNumber')} <span className="text-red-500">*</span>
</label>
<Input
type="text"
name="contract_number"
value={form.contract_number || ""}
onChange={handleChange}
placeholder="Enter contract number"
placeholder={t('contracts.enterContractNumber')}
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Contract Name
{t('contracts.contractName')}
</label>
<Input
type="text"
name="contract_name"
value={form.contract_name || ""}
onChange={handleChange}
placeholder="Enter contract name"
placeholder={t('contracts.enterContractName')}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Customer Contract Number
{t('contracts.customerContractNumber')}
</label>
<Input
type="text"
name="customer_contract_number"
value={form.customer_contract_number || ""}
onChange={handleChange}
placeholder="Enter customer contract number"
placeholder={t('contracts.enterCustomerContractNumber')}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Customer
{t('contracts.customer')}
</label>
<Input
type="text"
name="customer"
value={form.customer || ""}
onChange={handleChange}
placeholder="Enter customer name"
placeholder={t('contracts.enterCustomerName')}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Investor
{t('contracts.investor')}
</label>
<Input
type="text"
name="investor"
value={form.investor || ""}
onChange={handleChange}
placeholder="Enter investor name"
placeholder={t('contracts.enterInvestorName')}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Date Signed
{t('contracts.dateSigned')}
</label>{" "}
<Input
type="date"
@@ -145,7 +145,7 @@ export default function ContractForm() {
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-2">
Finish Date
{t('contracts.finishDate')}
</label>{" "}
<Input
type="date"
@@ -164,7 +164,7 @@ export default function ContractForm() {
onClick={() => router.back()}
disabled={loading}
>
Cancel
{t('common.cancel')}
</Button>
<Button type="submit" variant="primary" disabled={loading}>
{loading ? (
@@ -189,7 +189,7 @@ export default function ContractForm() {
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
Creating...
{t('common.creating')}
</>
) : (
<>
@@ -206,7 +206,7 @@ export default function ContractForm() {
d="M12 4v16m8-8H4"
/>
</svg>
Create Contract
{t('contracts.createContract')}
</>
)}
</Button>

14
src/components/FileAttachmentsList.js
View File

@@ -3,10 +3,12 @@
import { useState, useEffect } from "react";
import Button from "@/components/ui/Button";
import { formatDate } from "@/lib/utils";
import { useTranslation } from "@/lib/i18n";
export default function FileAttachmentsList({ entityType, entityId, onFilesChange }) {
const [files, setFiles] = useState([]);
const [loading, setLoading] = useState(true);
const { t } = useTranslation();
const fetchFiles = async () => {
try {
@@ -30,7 +32,7 @@ export default function FileAttachmentsList({ entityType, entityId, onFilesChang
}, [entityType, entityId]);
const handleDelete = async (fileId) => {
if (!confirm("Are you sure you want to delete this file?")) {
if (!confirm(t('contracts.confirmDeleteFile'))) {
return;
}
@@ -45,11 +47,11 @@ export default function FileAttachmentsList({ entityType, entityId, onFilesChang
onFilesChange(files.filter(file => file.file_id !== fileId));
}
} else {
alert("Failed to delete file");
alert(t('contracts.failedToDeleteFile'));
}
} catch (error) {
console.error("Error deleting file:", error);
alert("Failed to delete file");
alert(t('contracts.failedToDeleteFile'));
}
};
@@ -102,7 +104,7 @@ export default function FileAttachmentsList({ entityType, entityId, onFilesChang
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
</svg>
<span className="ml-2 text-gray-500">Loading files...</span>
<span className="ml-2 text-gray-500">{t('contracts.loadingFiles')}</span>
</div>
);
}
@@ -113,7 +115,7 @@ export default function FileAttachmentsList({ entityType, entityId, onFilesChang
<svg className="w-12 h-12 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<p className="text-gray-500">No documents uploaded yet</p>
<p className="text-gray-500">{t('contracts.noDocumentsUploaded')}</p>
</div>
);
}
@@ -156,7 +158,7 @@ export default function FileAttachmentsList({ entityType, entityId, onFilesChang
<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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Download
{t('contracts.download')}
</Button>
</a>
<Button

22
src/components/FileUploadModal.js
View File

@@ -2,6 +2,7 @@
import { useState, useRef } from "react";
import Button from "@/components/ui/Button";
import { useTranslation } from "@/lib/i18n";
export default function FileUploadModal({
isOpen,
@@ -14,6 +15,7 @@ export default function FileUploadModal({
const [uploading, setUploading] = useState(false);
const [description, setDescription] = useState("");
const fileInputRef = useRef(null);
const { t } = useTranslation();
const handleDrag = (e) => {
e.preventDefault();
@@ -67,11 +69,11 @@ export default function FileUploadModal({
onClose();
} else {
const error = await response.json();
alert(error.error || "Failed to upload file");
alert(error.error || t('contracts.failedToUploadFile'));
}
} catch (error) {
console.error("Upload error:", error);
alert("Failed to upload file");
alert(t('contracts.failedToUploadFile'));
} finally {
setUploading(false);
}
@@ -88,7 +90,7 @@ export default function FileUploadModal({
<div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
<div className="flex items-center justify-between mb-6">
<h3 className="text-lg font-semibold text-gray-900">
Upload Document
{t('contracts.uploadDocumentTitle')}
</h3>
<button
onClick={onClose}
@@ -105,13 +107,13 @@ export default function FileUploadModal({
{/* Description Input */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Description (optional)
{t('contracts.descriptionOptional')}
</label>
<input
type="text"
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Brief description of the document..."
placeholder={t('contracts.descriptionPlaceholder')}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
disabled={uploading}
/>
@@ -144,7 +146,7 @@ export default function FileUploadModal({
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
</svg>
<span className="text-sm text-gray-600">Uploading...</span>
<span className="text-sm text-gray-600">{t('contracts.uploading')}</span>
</div>
) : (
<div className="flex flex-col items-center">
@@ -152,10 +154,10 @@ export default function FileUploadModal({
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
<span className="text-sm font-medium text-gray-900 mb-2">
Drop files here or click to browse
{t('contracts.dropFilesHere')}
</span>
<span className="text-xs text-gray-500 mb-4">
PDF, DOC, XLS, Images up to 10MB
{t('contracts.supportedFiles')}
</span>
<Button
type="button"
@@ -163,7 +165,7 @@ export default function FileUploadModal({
onClick={onButtonClick}
disabled={uploading}
>
Choose File
{t('contracts.chooseFile')}
</Button>
</div>
)}
@@ -177,7 +179,7 @@ export default function FileUploadModal({
onClick={onClose}
disabled={uploading}
>
Cancel
{t('common.cancel')}
</Button>
</div>
</div>