feat: add contact management functionality

- Implemented ContactForm component for creating and editing contacts.
- Added ProjectContactSelector component to manage project-specific contacts.
- Updated ProjectForm to include ProjectContactSelector for associating contacts with projects.
- Enhanced Card component with a new CardTitle subcomponent for better structure.
- Updated Navigation to include a link to the contacts page.
- Added translations for contact-related terms in the i18n module.
- Initialized contacts database schema and created necessary tables for contact management.
- Developed queries for CRUD operations on contacts, including linking and unlinking contacts to projects.
- Created a test script to validate contact queries against the database.

src/components/ProjectForm.js

@@ -8,6 +8,7 @@ import Button from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import { formatDateForInput } from "@/lib/utils";
 import { useTranslation } from "@/lib/i18n";
+import ProjectContactSelector from "@/components/ProjectContactSelector";
 
 const ProjectForm = forwardRef(function ProjectForm({ initialData = null }, ref) {
 	const { t } = useTranslation();
@@ -365,15 +366,8 @@ const ProjectForm = forwardRef(function ProjectForm({ initialData = null }, ref)
 							)}
 
 							<div className="md:col-span-2">
-								<label className="block text-sm font-medium text-gray-700 mb-2">
-									{t('projects.contact')}
-								</label>
-								<Input
-									type="text"
-									name="contact"
-									value={form.contact || ""}
-									onChange={handleChange}
-									placeholder={t('projects.placeholders.contact')}
+								<ProjectContactSelector 
+									projectId={initialData?.project_id}
 								/>
 							</div>