feat: Integrate translation support for contract-related components and improve user feedback messages
This commit is contained in:
@@ -12,6 +12,7 @@ import { LoadingState } from "@/components/ui/States";
|
|||||||
import { formatDate } from "@/lib/utils";
|
import { formatDate } from "@/lib/utils";
|
||||||
import FileUploadModal from "@/components/FileUploadModal";
|
import FileUploadModal from "@/components/FileUploadModal";
|
||||||
import FileAttachmentsList from "@/components/FileAttachmentsList";
|
import FileAttachmentsList from "@/components/FileAttachmentsList";
|
||||||
|
import { useTranslation } from "@/lib/i18n";
|
||||||
|
|
||||||
export default function ContractDetailsPage() {
|
export default function ContractDetailsPage() {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
@@ -21,6 +22,7 @@ export default function ContractDetailsPage() {
|
|||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [showUploadModal, setShowUploadModal] = useState(false);
|
const [showUploadModal, setShowUploadModal] = useState(false);
|
||||||
const [attachments, setAttachments] = useState([]);
|
const [attachments, setAttachments] = useState([]);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchContractDetails() {
|
async function fetchContractDetails() {
|
||||||
@@ -67,7 +69,7 @@ export default function ContractDetailsPage() {
|
|||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<PageContainer>
|
<PageContainer>
|
||||||
<LoadingState message="Loading contract details..." />
|
<LoadingState message={t('contracts.loadingContractDetails')} />
|
||||||
</PageContainer>
|
</PageContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -77,9 +79,9 @@ export default function ContractDetailsPage() {
|
|||||||
<PageContainer>
|
<PageContainer>
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent className="text-center py-12">
|
<CardContent className="text-center py-12">
|
||||||
<p className="text-red-600 text-lg mb-4">Contract not found.</p>
|
<p className="text-red-600 text-lg mb-4">{t('contracts.contractNotFound')}</p>
|
||||||
<Link href="/contracts">
|
<Link href="/contracts">
|
||||||
<Button variant="primary">Back to Contracts</Button>
|
<Button variant="primary">{t('contracts.backToContracts')}</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -89,8 +91,8 @@ export default function ContractDetailsPage() {
|
|||||||
return (
|
return (
|
||||||
<PageContainer>
|
<PageContainer>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title={`Contract ${contract.contract_number}`}
|
title={`${t('contracts.contract')} ${contract.contract_number}`}
|
||||||
description={contract.contract_name || "Contract Details"}
|
description={contract.contract_name || t('contracts.contractInformation')}
|
||||||
action={
|
action={
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Link href="/contracts">
|
<Link href="/contracts">
|
||||||
@@ -108,7 +110,7 @@ export default function ContractDetailsPage() {
|
|||||||
d="M15 19l-7-7 7-7"
|
d="M15 19l-7-7 7-7"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Back to Contracts
|
{t('contracts.backToContracts')}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href={`/projects/new?contract_id=${contractId}`}>
|
<Link href={`/projects/new?contract_id=${contractId}`}>
|
||||||
@@ -126,7 +128,7 @@ export default function ContractDetailsPage() {
|
|||||||
d="M12 4v16m8-8H4"
|
d="M12 4v16m8-8H4"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Add Project
|
{t('contracts.addProject')}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
@@ -139,14 +141,14 @@ export default function ContractDetailsPage() {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<h2 className="text-xl font-semibold text-gray-900">
|
<h2 className="text-xl font-semibold text-gray-900">
|
||||||
Contract Information
|
{t('contracts.contractInformation')}
|
||||||
</h2>
|
</h2>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-6">
|
<CardContent className="space-y-6">
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Contract Number
|
{t('contracts.contractNumber')}
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900 font-medium">
|
<p className="text-gray-900 font-medium">
|
||||||
{contract.contract_number}
|
{contract.contract_number}
|
||||||
@@ -155,7 +157,7 @@ export default function ContractDetailsPage() {
|
|||||||
{contract.contract_name && (
|
{contract.contract_name && (
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Contract Name
|
{t('contracts.contractName')}
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900 font-medium">
|
<p className="text-gray-900 font-medium">
|
||||||
{contract.contract_name}
|
{contract.contract_name}
|
||||||
@@ -165,7 +167,7 @@ export default function ContractDetailsPage() {
|
|||||||
{contract.customer_contract_number && (
|
{contract.customer_contract_number && (
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Customer Contract Number
|
{t('contracts.customerContractNumber')}
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900 font-medium">
|
<p className="text-gray-900 font-medium">
|
||||||
{contract.customer_contract_number}
|
{contract.customer_contract_number}
|
||||||
@@ -175,7 +177,7 @@ export default function ContractDetailsPage() {
|
|||||||
{contract.customer && (
|
{contract.customer && (
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Customer
|
{t('contracts.customer')}
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900 font-medium">
|
<p className="text-gray-900 font-medium">
|
||||||
{contract.customer}
|
{contract.customer}
|
||||||
@@ -185,7 +187,7 @@ export default function ContractDetailsPage() {
|
|||||||
{contract.investor && (
|
{contract.investor && (
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Investor
|
{t('contracts.investor')}
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900 font-medium">
|
<p className="text-gray-900 font-medium">
|
||||||
{contract.investor}
|
{contract.investor}
|
||||||
@@ -195,7 +197,7 @@ export default function ContractDetailsPage() {
|
|||||||
{contract.date_signed && (
|
{contract.date_signed && (
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Date Signed
|
{t('contracts.dateSigned')}
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900 font-medium">
|
<p className="text-gray-900 font-medium">
|
||||||
{formatDate(contract.date_signed)}
|
{formatDate(contract.date_signed)}
|
||||||
@@ -205,7 +207,7 @@ export default function ContractDetailsPage() {
|
|||||||
{contract.finish_date && (
|
{contract.finish_date && (
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Finish Date
|
{t('contracts.finishDate')}
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900 font-medium">
|
<p className="text-gray-900 font-medium">
|
||||||
{formatDate(contract.finish_date)}
|
{formatDate(contract.finish_date)}
|
||||||
@@ -221,22 +223,22 @@ export default function ContractDetailsPage() {
|
|||||||
<div>
|
<div>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<h2 className="text-lg font-semibold text-gray-900">Summary</h2>
|
<h2 className="text-lg font-semibold text-gray-900">{t('contracts.summary')}</h2>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500 block mb-2">
|
<span className="text-sm font-medium text-gray-500 block mb-2">
|
||||||
Projects Count
|
{t('contracts.projectsCount')}
|
||||||
</span>
|
</span>
|
||||||
<Badge variant="primary" size="lg">
|
<Badge variant="primary" size="lg">
|
||||||
{projects.length} Projects
|
{projects.length} {t('contracts.projects')}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{contract.finish_date && (
|
{contract.finish_date && (
|
||||||
<div className="border-t pt-4">
|
<div className="border-t pt-4">
|
||||||
<span className="text-sm font-medium text-gray-500 block mb-2">
|
<span className="text-sm font-medium text-gray-500 block mb-2">
|
||||||
Contract Status
|
{t('contracts.contractStatus')}
|
||||||
</span>
|
</span>
|
||||||
<Badge
|
<Badge
|
||||||
variant={
|
variant={
|
||||||
@@ -247,8 +249,8 @@ export default function ContractDetailsPage() {
|
|||||||
size="md"
|
size="md"
|
||||||
>
|
>
|
||||||
{new Date(contract.finish_date) > new Date()
|
{new Date(contract.finish_date) > new Date()
|
||||||
? "Active"
|
? t('contracts.active')
|
||||||
: "Expired"}
|
: t('contracts.expired')}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -262,7 +264,7 @@ export default function ContractDetailsPage() {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
<h2 className="text-xl font-semibold text-gray-900">
|
<h2 className="text-xl font-semibold text-gray-900">
|
||||||
Contract Documents ({attachments.length})
|
{t('contracts.contractDocuments')} ({attachments.length})
|
||||||
</h2>
|
</h2>
|
||||||
<Button
|
<Button
|
||||||
variant="primary"
|
variant="primary"
|
||||||
@@ -282,7 +284,7 @@ export default function ContractDetailsPage() {
|
|||||||
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"
|
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>
|
</svg>
|
||||||
Upload Document
|
{t('contracts.uploadDocument')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
@@ -300,7 +302,7 @@ export default function ContractDetailsPage() {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex justify-between items-center">
|
||||||
<h2 className="text-xl font-semibold text-gray-900">
|
<h2 className="text-xl font-semibold text-gray-900">
|
||||||
Associated Projects ({projects.length})
|
{t('contracts.associatedProjects')} ({projects.length})
|
||||||
</h2>
|
</h2>
|
||||||
<Link href={`/projects/new?contract_id=${contractId}`}>
|
<Link href={`/projects/new?contract_id=${contractId}`}>
|
||||||
<Button variant="outline" size="sm">
|
<Button variant="outline" size="sm">
|
||||||
@@ -317,7 +319,7 @@ export default function ContractDetailsPage() {
|
|||||||
d="M12 4v16m8-8H4"
|
d="M12 4v16m8-8H4"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Add Project
|
{t('contracts.addProject')}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
@@ -339,13 +341,13 @@ export default function ContractDetailsPage() {
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||||
No projects yet
|
{t('contracts.noProjectsYet')}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-gray-500 mb-6">
|
<p className="text-gray-500 mb-6">
|
||||||
Get started by creating your first project for this contract
|
{t('contracts.getStartedMessage')}
|
||||||
</p>
|
</p>
|
||||||
<Link href={`/projects/new?contract_id=${contractId}`}>
|
<Link href={`/projects/new?contract_id=${contractId}`}>
|
||||||
<Button variant="primary">Create First Project</Button>
|
<Button variant="primary">{t('contracts.createFirstProject')}</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@@ -411,22 +413,22 @@ export default function ContractDetailsPage() {
|
|||||||
size="sm"
|
size="sm"
|
||||||
>
|
>
|
||||||
{project.project_status === "registered"
|
{project.project_status === "registered"
|
||||||
? "Registered"
|
? t('projectStatus.registered')
|
||||||
: project.project_status === "in_progress_design"
|
: project.project_status === "in_progress_design"
|
||||||
? "In Progress (Design)"
|
? t('projectStatus.in_progress_design')
|
||||||
: project.project_status ===
|
: project.project_status ===
|
||||||
"in_progress_construction"
|
"in_progress_construction"
|
||||||
? "In Progress (Construction)"
|
? t('projectStatus.in_progress_construction')
|
||||||
: project.project_status === "fulfilled"
|
: project.project_status === "fulfilled"
|
||||||
? "Completed"
|
? t('projectStatus.fulfilled')
|
||||||
: "Unknown"}
|
: t('projectStatus.unknown')}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Link href={`/projects/${project.project_id}`}>
|
<Link href={`/projects/${project.project_id}`}>
|
||||||
<Button variant="outline" size="sm">
|
<Button variant="outline" size="sm">
|
||||||
View Details
|
{t('contracts.viewDetails')}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,15 +1,19 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import ContractForm from "@/components/ContractForm";
|
import ContractForm from "@/components/ContractForm";
|
||||||
import PageContainer from "@/components/ui/PageContainer";
|
import PageContainer from "@/components/ui/PageContainer";
|
||||||
import PageHeader from "@/components/ui/PageHeader";
|
import PageHeader from "@/components/ui/PageHeader";
|
||||||
import Button from "@/components/ui/Button";
|
import Button from "@/components/ui/Button";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { useTranslation } from "@/lib/i18n";
|
||||||
|
|
||||||
export default function NewContractPage() {
|
export default function NewContractPage() {
|
||||||
|
const { t } = useTranslation();
|
||||||
return (
|
return (
|
||||||
<PageContainer>
|
<PageContainer>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="Create New Contract"
|
title={t('contracts.createNewContract')}
|
||||||
description="Add a new contract to your portfolio"
|
description={t('contracts.addNewContractDescription')}
|
||||||
action={
|
action={
|
||||||
<Link href="/contracts">
|
<Link href="/contracts">
|
||||||
<Button variant="outline" size="sm">
|
<Button variant="outline" size="sm">
|
||||||
@@ -26,7 +30,7 @@ export default function NewContractPage() {
|
|||||||
d="M15 19l-7-7 7-7"
|
d="M15 19l-7-7 7-7"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Back to Contracts
|
{t('contracts.backToContracts')}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,8 +6,10 @@ import { Card, CardHeader, CardContent } from "@/components/ui/Card";
|
|||||||
import Button from "@/components/ui/Button";
|
import Button from "@/components/ui/Button";
|
||||||
import { Input } from "@/components/ui/Input";
|
import { Input } from "@/components/ui/Input";
|
||||||
import { formatDateForInput } from "@/lib/utils";
|
import { formatDateForInput } from "@/lib/utils";
|
||||||
|
import { useTranslation } from "@/lib/i18n";
|
||||||
|
|
||||||
export default function ContractForm() {
|
export default function ContractForm() {
|
||||||
|
const { t } = useTranslation();
|
||||||
const [form, setForm] = useState({
|
const [form, setForm] = useState({
|
||||||
contract_number: "",
|
contract_number: "",
|
||||||
contract_name: "",
|
contract_name: "",
|
||||||
@@ -42,13 +44,11 @@ export default function ContractForm() {
|
|||||||
const contract = await res.json();
|
const contract = await res.json();
|
||||||
router.push(`/contracts/${contract.contract_id}`);
|
router.push(`/contracts/${contract.contract_id}`);
|
||||||
} else {
|
} else {
|
||||||
alert(
|
alert(t('contracts.failedToCreateContract'));
|
||||||
"Failed to create contract. Please check the data and try again."
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error creating contract:", error);
|
console.error("Error creating contract:", error);
|
||||||
alert("Failed to create contract. Please try again.");
|
alert(t('contracts.failedToCreateContract'));
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
@@ -58,7 +58,7 @@ export default function ContractForm() {
|
|||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<h2 className="text-xl font-semibold text-gray-900">
|
<h2 className="text-xl font-semibold text-gray-900">
|
||||||
Contract Details
|
{t('contracts.contractDetails')}
|
||||||
</h2>
|
</h2>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
@@ -67,73 +67,73 @@ export default function ContractForm() {
|
|||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<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>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
name="contract_number"
|
name="contract_number"
|
||||||
value={form.contract_number || ""}
|
value={form.contract_number || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
placeholder="Enter contract number"
|
placeholder={t('contracts.enterContractNumber')}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
Contract Name
|
{t('contracts.contractName')}
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
name="contract_name"
|
name="contract_name"
|
||||||
value={form.contract_name || ""}
|
value={form.contract_name || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
placeholder="Enter contract name"
|
placeholder={t('contracts.enterContractName')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
Customer Contract Number
|
{t('contracts.customerContractNumber')}
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
name="customer_contract_number"
|
name="customer_contract_number"
|
||||||
value={form.customer_contract_number || ""}
|
value={form.customer_contract_number || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
placeholder="Enter customer contract number"
|
placeholder={t('contracts.enterCustomerContractNumber')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
Customer
|
{t('contracts.customer')}
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
name="customer"
|
name="customer"
|
||||||
value={form.customer || ""}
|
value={form.customer || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
placeholder="Enter customer name"
|
placeholder={t('contracts.enterCustomerName')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
Investor
|
{t('contracts.investor')}
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
name="investor"
|
name="investor"
|
||||||
value={form.investor || ""}
|
value={form.investor || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
placeholder="Enter investor name"
|
placeholder={t('contracts.enterInvestorName')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
Date Signed
|
{t('contracts.dateSigned')}
|
||||||
</label>{" "}
|
</label>{" "}
|
||||||
<Input
|
<Input
|
||||||
type="date"
|
type="date"
|
||||||
@@ -145,7 +145,7 @@ export default function ContractForm() {
|
|||||||
|
|
||||||
<div className="md:col-span-2">
|
<div className="md:col-span-2">
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
Finish Date
|
{t('contracts.finishDate')}
|
||||||
</label>{" "}
|
</label>{" "}
|
||||||
<Input
|
<Input
|
||||||
type="date"
|
type="date"
|
||||||
@@ -164,7 +164,7 @@ export default function ContractForm() {
|
|||||||
onClick={() => router.back()}
|
onClick={() => router.back()}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
Cancel
|
{t('common.cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="submit" variant="primary" disabled={loading}>
|
<Button type="submit" variant="primary" disabled={loading}>
|
||||||
{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"
|
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>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
Creating...
|
{t('common.creating')}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
@@ -206,7 +206,7 @@ export default function ContractForm() {
|
|||||||
d="M12 4v16m8-8H4"
|
d="M12 4v16m8-8H4"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
Create Contract
|
{t('contracts.createContract')}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -3,10 +3,12 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import Button from "@/components/ui/Button";
|
import Button from "@/components/ui/Button";
|
||||||
import { formatDate } from "@/lib/utils";
|
import { formatDate } from "@/lib/utils";
|
||||||
|
import { useTranslation } from "@/lib/i18n";
|
||||||
|
|
||||||
export default function FileAttachmentsList({ entityType, entityId, onFilesChange }) {
|
export default function FileAttachmentsList({ entityType, entityId, onFilesChange }) {
|
||||||
const [files, setFiles] = useState([]);
|
const [files, setFiles] = useState([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const fetchFiles = async () => {
|
const fetchFiles = async () => {
|
||||||
try {
|
try {
|
||||||
@@ -30,7 +32,7 @@ export default function FileAttachmentsList({ entityType, entityId, onFilesChang
|
|||||||
}, [entityType, entityId]);
|
}, [entityType, entityId]);
|
||||||
|
|
||||||
const handleDelete = async (fileId) => {
|
const handleDelete = async (fileId) => {
|
||||||
if (!confirm("Are you sure you want to delete this file?")) {
|
if (!confirm(t('contracts.confirmDeleteFile'))) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -45,11 +47,11 @@ export default function FileAttachmentsList({ entityType, entityId, onFilesChang
|
|||||||
onFilesChange(files.filter(file => file.file_id !== fileId));
|
onFilesChange(files.filter(file => file.file_id !== fileId));
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
alert("Failed to delete file");
|
alert(t('contracts.failedToDeleteFile'));
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error deleting file:", 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" />
|
<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" />
|
<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>
|
</svg>
|
||||||
<span className="ml-2 text-gray-500">Loading files...</span>
|
<span className="ml-2 text-gray-500">{t('contracts.loadingFiles')}</span>
|
||||||
</div>
|
</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">
|
<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" />
|
<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>
|
</svg>
|
||||||
<p className="text-gray-500">No documents uploaded yet</p>
|
<p className="text-gray-500">{t('contracts.noDocumentsUploaded')}</p>
|
||||||
</div>
|
</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">
|
<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" />
|
<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>
|
</svg>
|
||||||
Download
|
{t('contracts.download')}
|
||||||
</Button>
|
</Button>
|
||||||
</a>
|
</a>
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
import { useState, useRef } from "react";
|
import { useState, useRef } from "react";
|
||||||
import Button from "@/components/ui/Button";
|
import Button from "@/components/ui/Button";
|
||||||
|
import { useTranslation } from "@/lib/i18n";
|
||||||
|
|
||||||
export default function FileUploadModal({
|
export default function FileUploadModal({
|
||||||
isOpen,
|
isOpen,
|
||||||
@@ -14,6 +15,7 @@ export default function FileUploadModal({
|
|||||||
const [uploading, setUploading] = useState(false);
|
const [uploading, setUploading] = useState(false);
|
||||||
const [description, setDescription] = useState("");
|
const [description, setDescription] = useState("");
|
||||||
const fileInputRef = useRef(null);
|
const fileInputRef = useRef(null);
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const handleDrag = (e) => {
|
const handleDrag = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -67,11 +69,11 @@ export default function FileUploadModal({
|
|||||||
onClose();
|
onClose();
|
||||||
} else {
|
} else {
|
||||||
const error = await response.json();
|
const error = await response.json();
|
||||||
alert(error.error || "Failed to upload file");
|
alert(error.error || t('contracts.failedToUploadFile'));
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Upload error:", error);
|
console.error("Upload error:", error);
|
||||||
alert("Failed to upload file");
|
alert(t('contracts.failedToUploadFile'));
|
||||||
} finally {
|
} finally {
|
||||||
setUploading(false);
|
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="bg-white rounded-lg p-6 w-full max-w-md mx-4">
|
||||||
<div className="flex items-center justify-between mb-6">
|
<div className="flex items-center justify-between mb-6">
|
||||||
<h3 className="text-lg font-semibold text-gray-900">
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
Upload Document
|
{t('contracts.uploadDocumentTitle')}
|
||||||
</h3>
|
</h3>
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
@@ -105,13 +107,13 @@ export default function FileUploadModal({
|
|||||||
{/* Description Input */}
|
{/* Description Input */}
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
Description (optional)
|
{t('contracts.descriptionOptional')}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={description}
|
value={description}
|
||||||
onChange={(e) => setDescription(e.target.value)}
|
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"
|
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}
|
disabled={uploading}
|
||||||
/>
|
/>
|
||||||
@@ -144,7 +146,7 @@ export default function FileUploadModal({
|
|||||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
<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" />
|
<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>
|
</svg>
|
||||||
<span className="text-sm text-gray-600">Uploading...</span>
|
<span className="text-sm text-gray-600">{t('contracts.uploading')}</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col items-center">
|
<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" />
|
<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>
|
</svg>
|
||||||
<span className="text-sm font-medium text-gray-900 mb-2">
|
<span className="text-sm font-medium text-gray-900 mb-2">
|
||||||
Drop files here or click to browse
|
{t('contracts.dropFilesHere')}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-gray-500 mb-4">
|
<span className="text-xs text-gray-500 mb-4">
|
||||||
PDF, DOC, XLS, Images up to 10MB
|
{t('contracts.supportedFiles')}
|
||||||
</span>
|
</span>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -163,7 +165,7 @@ export default function FileUploadModal({
|
|||||||
onClick={onButtonClick}
|
onClick={onButtonClick}
|
||||||
disabled={uploading}
|
disabled={uploading}
|
||||||
>
|
>
|
||||||
Choose File
|
{t('contracts.chooseFile')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -177,7 +179,7 @@ export default function FileUploadModal({
|
|||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
disabled={uploading}
|
disabled={uploading}
|
||||||
>
|
>
|
||||||
Cancel
|
{t('common.cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -198,6 +198,7 @@ const translations = {
|
|||||||
contracts: {
|
contracts: {
|
||||||
title: "Umowy",
|
title: "Umowy",
|
||||||
subtitle: "---",
|
subtitle: "---",
|
||||||
|
contract: "Umowa",
|
||||||
newContract: "Nowa umowa",
|
newContract: "Nowa umowa",
|
||||||
editContract: "Edytuj umowę",
|
editContract: "Edytuj umowę",
|
||||||
deleteContract: "Usuń umowę",
|
deleteContract: "Usuń umowę",
|
||||||
@@ -226,7 +227,50 @@ const translations = {
|
|||||||
signedOn: "Zawarcie:",
|
signedOn: "Zawarcie:",
|
||||||
finishOn: "Zakończenie:",
|
finishOn: "Zakończenie:",
|
||||||
customerLabel: "Zleceniodawca:",
|
customerLabel: "Zleceniodawca:",
|
||||||
investorLabel: "Inwestor:"
|
investorLabel: "Inwestor:",
|
||||||
|
loadingContractDetails: "Ładowanie szczegółów umowy...",
|
||||||
|
contractNotFound: "Umowa nie została znaleziona.",
|
||||||
|
backToContracts: "Powrót do umów",
|
||||||
|
addProject: "Dodaj projekt",
|
||||||
|
contractInformation: "Informacje o umowie",
|
||||||
|
contractNumber: "Numer umowy",
|
||||||
|
contractName: "Nazwa umowy",
|
||||||
|
customerContractNumber: "Numer umowy klienta",
|
||||||
|
customer: "Klient",
|
||||||
|
investor: "Inwestor",
|
||||||
|
dateSigned: "Data zawarcia",
|
||||||
|
finishDate: "Data zakończenia",
|
||||||
|
summary: "Podsumowanie",
|
||||||
|
projectsCount: "Liczba projektów",
|
||||||
|
projects: "projektów",
|
||||||
|
contractStatus: "Status umowy",
|
||||||
|
active: "Aktywna",
|
||||||
|
expired: "Przeterminowana",
|
||||||
|
contractDocuments: "Dokumenty umowy",
|
||||||
|
uploadDocument: "Prześlij dokument",
|
||||||
|
associatedProjects: "Powiązane projekty",
|
||||||
|
noProjectsYet: "Brak projektów",
|
||||||
|
getStartedMessage: "Rozpocznij od utworzenia pierwszego projektu dla tej umowy",
|
||||||
|
createFirstProject: "Utwórz pierwszy projekt",
|
||||||
|
viewDetails: "Zobacz szczegóły",
|
||||||
|
createNewContract: "Utwórz nową umowę",
|
||||||
|
addNewContractDescription: "Dodaj nową umowę do swojego portfolio",
|
||||||
|
contractDetails: "Szczegóły umowy",
|
||||||
|
failedToCreateContract: "Nie udało się utworzyć umowy. Sprawdź dane i spróbuj ponownie.",
|
||||||
|
// File upload translations
|
||||||
|
uploadDocumentTitle: "Prześlij dokument",
|
||||||
|
descriptionOptional: "Opis (opcjonalny)",
|
||||||
|
descriptionPlaceholder: "Krótki opis dokumentu...",
|
||||||
|
uploading: "Przesyłanie...",
|
||||||
|
dropFilesHere: "Upuść pliki tutaj lub kliknij, aby przeglądać",
|
||||||
|
supportedFiles: "PDF, DOC, XLS, Obrazy do 10MB",
|
||||||
|
chooseFile: "Wybierz plik",
|
||||||
|
failedToUploadFile: "Nie udało się przesłać pliku",
|
||||||
|
loadingFiles: "Ładowanie plików...",
|
||||||
|
noDocumentsUploaded: "Brak przesłanych dokumentów",
|
||||||
|
download: "Pobierz",
|
||||||
|
confirmDeleteFile: "Czy na pewno chcesz usunąć ten plik?",
|
||||||
|
failedToDeleteFile: "Nie udało się usunąć pliku"
|
||||||
},
|
},
|
||||||
|
|
||||||
// Tasks
|
// Tasks
|
||||||
|
|||||||
Reference in New Issue
Block a user