>({})
@@ -63,6 +64,7 @@ export default function ModuleComponentsConfigurationPage() {
const wastes = data?.wastes || []
const regulators = data?.regulators || []
const services = data?.services || []
+ const administrativeProcedures = data?.administrativeProcedures || []
const selectedComponentType = COMPONENT_TYPES.find(t => t.value === formData.type)
@@ -134,6 +136,8 @@ export default function ModuleComponentsConfigurationPage() {
lifetime: formData.lifetime,
regulators: formData.regulators || [],
services: formData.services || [],
+ administrativeProcedures: formData.administrativeProcedures || [],
+ regulationCharacteristicIds: formData.regulationCharacteristicIds || [],
createdAt: editingId ? components.find((c) => c.id === editingId)?.createdAt || new Date().toISOString() : new Date().toISOString(),
updatedAt: new Date().toISOString(),
}
@@ -264,6 +268,28 @@ export default function ModuleComponentsConfigurationPage() {
)
},
},
+ {
+ key: 'procedures',
+ header: 'Procedures',
+ render: (component: ModuleComponent) => {
+ if (!component.administrativeProcedures || component.administrativeProcedures.length === 0) {
+ return None
+ }
+ return (
+
+ {component.administrativeProcedures.map((assoc, idx) => {
+ const procedure = administrativeProcedures.find((p) => p.id === assoc.procedureId)
+ const procedureStatusVariant = assoc.status === 'done' ? 'success' : assoc.status === 'toDo' ? 'warning' : 'info'
+ return (
+
+ {procedure?.name || 'Unknown'}
+
+ )
+ })}
+
+ )
+ },
+ },
{
key: 'actions',
header: 'Actions',
@@ -875,6 +901,133 @@ export default function ModuleComponentsConfigurationPage() {
+ {/* Regulation Characteristics Section */}
+
+
Regulation Characteristics
+
+ Select regulation characteristics that this module component addresses. Configure characteristics in Regulation Characteristics page.
+
+
+ {regulationCharacteristics.map((char) => (
+
+ ))}
+ {regulationCharacteristics.length === 0 && (
+
No regulation characteristics configured. Add them in the Regulation Characteristics page.
+ )}
+
+
+
Associated Administrative Procedures
+
+ Add administrative procedures for this module component. Track the status of each procedure.
+
+
+ {(formData.administrativeProcedures || []).map((association, index) => {
+ const procedure = administrativeProcedures.find((p) => p.id === association.procedureId)
+ const procedureStatusOptions = [
+ { value: 'toDo', label: 'To Do' },
+ { value: 'done', label: 'Done' },
+ { value: 'na', label: 'N/A' },
+ ]
+ return (
+
+
+ )
+ })}
+
+
+
Costs (Annual)
diff --git a/src/pages/configuration/RegulationCharacteristicsConfigurationPage.css b/src/pages/configuration/RegulationCharacteristicsConfigurationPage.css
new file mode 100644
index 0000000..f7289c6
--- /dev/null
+++ b/src/pages/configuration/RegulationCharacteristicsConfigurationPage.css
@@ -0,0 +1,53 @@
+.regulation-characteristics-config-page {
+ max-width: 1400px;
+ margin: 0 auto;
+}
+
+.page-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: var(--text-primary);
+ margin-bottom: var(--spacing-2xl);
+}
+
+.page-content {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xl);
+}
+
+.form-card {
+ max-width: 100%;
+}
+
+.form-row {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: var(--spacing-lg);
+ margin-bottom: var(--spacing-md);
+}
+
+.form-actions {
+ display: flex;
+ gap: var(--spacing-md);
+ margin-top: var(--spacing-xl);
+ padding-top: var(--spacing-xl);
+ border-top: 1px solid var(--border);
+}
+
+.table-card {
+ margin-top: var(--spacing-xl);
+}
+
+.table-actions {
+ display: flex;
+ gap: var(--spacing-sm);
+}
+
+code {
+ background-color: var(--background-secondary);
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-family: var(--font-mono);
+ font-size: 0.875rem;
+}
diff --git a/src/pages/configuration/RegulationCharacteristicsConfigurationPage.tsx b/src/pages/configuration/RegulationCharacteristicsConfigurationPage.tsx
new file mode 100644
index 0000000..4b70683
--- /dev/null
+++ b/src/pages/configuration/RegulationCharacteristicsConfigurationPage.tsx
@@ -0,0 +1,258 @@
+import { useState } from 'react'
+import { useStorage } from '@/hooks/useStorage'
+import { RegulationCharacteristic } from '@/types'
+import Card from '@/components/base/Card'
+import Button from '@/components/base/Button'
+import Input from '@/components/base/Input'
+import Select from '@/components/base/Select'
+import Table from '@/components/base/Table'
+import { validateRequired } from '@/utils/validators'
+import './RegulationCharacteristicsConfigurationPage.css'
+
+export default function RegulationCharacteristicsConfigurationPage() {
+ const { data, addEntity, updateEntity, deleteEntity } = useStorage()
+ const [editingId, setEditingId] = useState
(null)
+ const [formData, setFormData] = useState>({
+ name: '',
+ code: '',
+ category: 'other',
+ description: '',
+ unit: '',
+ isBoolean: true,
+ minValue: undefined,
+ maxValue: undefined,
+ })
+ const [errors, setErrors] = useState>({})
+
+ const characteristics = data?.regulationCharacteristics || []
+
+ const categoryOptions = [
+ { value: 'nutrient', label: 'Nutrient' },
+ { value: 'heavyMetal', label: 'Heavy Metal' },
+ { value: 'biological', label: 'Biological' },
+ { value: 'chemical', label: 'Chemical' },
+ { value: 'biologicalProcess', label: 'Biological Process' },
+ { value: 'ph', label: 'pH' },
+ { value: 'other', label: 'Other' },
+ ]
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault()
+
+ const newErrors: Record = {}
+ newErrors.name = validateRequired(formData.name)
+ newErrors.code = validateRequired(formData.code)
+
+ // Check for duplicate code
+ const existingWithCode = characteristics.find((c) => c.code === formData.code && c.id !== editingId)
+ if (existingWithCode) {
+ newErrors.code = 'A characteristic with this code already exists'
+ }
+
+ setErrors(newErrors)
+
+ if (Object.values(newErrors).some((error) => error !== undefined)) {
+ return
+ }
+
+ const characteristic: RegulationCharacteristic = {
+ id: editingId || crypto.randomUUID(),
+ name: formData.name!,
+ code: formData.code!,
+ category: formData.category!,
+ description: formData.description,
+ unit: formData.unit,
+ isBoolean: formData.isBoolean ?? true,
+ minValue: formData.minValue,
+ maxValue: formData.maxValue,
+ createdAt: editingId ? characteristics.find((c) => c.id === editingId)?.createdAt || new Date().toISOString() : new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ }
+
+ if (editingId) {
+ updateEntity('regulationCharacteristics', editingId, characteristic)
+ } else {
+ addEntity('regulationCharacteristics', characteristic)
+ }
+
+ resetForm()
+ }
+
+ const resetForm = () => {
+ setFormData({
+ name: '',
+ code: '',
+ category: 'other',
+ description: '',
+ unit: '',
+ isBoolean: true,
+ minValue: undefined,
+ maxValue: undefined,
+ })
+ setEditingId(null)
+ setErrors({})
+ }
+
+ const handleEdit = (characteristic: RegulationCharacteristic) => {
+ setFormData(characteristic)
+ setEditingId(characteristic.id)
+ }
+
+ const handleDelete = (id: string) => {
+ if (confirm('Are you sure you want to delete this regulation characteristic?')) {
+ deleteEntity('regulationCharacteristics', id)
+ }
+ }
+
+ const tableColumns = [
+ {
+ key: 'name',
+ header: 'Name',
+ render: (char: RegulationCharacteristic) => char.name,
+ },
+ {
+ key: 'code',
+ header: 'Code',
+ render: (char: RegulationCharacteristic) => {char.code},
+ },
+ {
+ key: 'category',
+ header: 'Category',
+ render: (char: RegulationCharacteristic) => {
+ const categoryLabel = categoryOptions.find((opt) => opt.value === char.category)?.label || char.category
+ return categoryLabel
+ },
+ },
+ {
+ key: 'type',
+ header: 'Type',
+ render: (char: RegulationCharacteristic) => (char.isBoolean ? 'Boolean' : 'Numeric'),
+ },
+ {
+ key: 'unit',
+ header: 'Unit',
+ render: (char: RegulationCharacteristic) => char.unit || '-',
+ },
+ {
+ key: 'range',
+ header: 'Range',
+ render: (char: RegulationCharacteristic) => {
+ if (char.isBoolean) return '-'
+ if (char.minValue !== undefined && char.maxValue !== undefined) {
+ return `${char.minValue} - ${char.maxValue}`
+ }
+ if (char.minValue !== undefined) return `≥ ${char.minValue}`
+ if (char.maxValue !== undefined) return `≤ ${char.maxValue}`
+ return '-'
+ },
+ },
+ {
+ key: 'actions',
+ header: 'Actions',
+ render: (char: RegulationCharacteristic) => (
+
+
+
+
+ ),
+ },
+ ]
+
+ return (
+
+
Regulation Characteristics Configuration
+
+
+
+
+
+
+ ),
+ },
+ ]
+
+ return (
+
+ )
+}
+
diff --git a/src/pages/projects/TreatmentSitesPage.css b/src/pages/projects/TreatmentSitesPage.css
index 7088e6a..33044a8 100644
--- a/src/pages/projects/TreatmentSitesPage.css
+++ b/src/pages/projects/TreatmentSitesPage.css
@@ -109,4 +109,23 @@
height: 20px;
cursor: pointer;
accent-color: var(--primary-green);
+}
+
+.investors-list,
+.procedures-list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ margin-top: var(--spacing-md);
+}
+
+.investor-association-item,
+.procedure-association-item {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 2fr auto;
+ gap: var(--spacing-md);
+ align-items: flex-end;
+ padding: var(--spacing-sm);
+ border: 1px solid var(--border);
+ border-radius: 8px;
}
\ No newline at end of file
diff --git a/src/pages/projects/TreatmentSitesPage.tsx b/src/pages/projects/TreatmentSitesPage.tsx
index 6f96321..11b012b 100644
--- a/src/pages/projects/TreatmentSitesPage.tsx
+++ b/src/pages/projects/TreatmentSitesPage.tsx
@@ -1,6 +1,6 @@
import { useState } from 'react'
import { useStorage } from '@/hooks/useStorage'
-import { TreatmentSite, SiteStatus, SiteTransporterAssociation } from '@/types'
+import { TreatmentSite, SiteStatus, SiteTransporterAssociation, TreatmentSiteInvestorAssociation, TreatmentSiteProcedureAssociation, ProcedureStatus } from '@/types'
import Card from '@/components/base/Card'
import Button from '@/components/base/Button'
import Input from '@/components/base/Input'
@@ -21,12 +21,16 @@ export default function TreatmentSitesPage() {
monthlyTemperatures: Array(12).fill(0),
subscribedServices: [],
transporters: [],
+ investors: [],
+ administrativeProcedures: [],
})
const [errors, setErrors] = useState>({})
const sites = data?.treatmentSites || []
const services = data?.services || []
const transporters = data?.transporters || []
+ const investors = data?.investors || []
+ const administrativeProcedures = data?.administrativeProcedures || []
const statusOptions = [
{ value: 'toBeApproached', label: 'To be approached' },
@@ -64,6 +68,8 @@ export default function TreatmentSitesPage() {
monthlyTemperatures: formData.monthlyTemperatures!,
subscribedServices: formData.subscribedServices || [],
transporters: formData.transporters || [],
+ investors: formData.investors || [],
+ administrativeProcedures: formData.administrativeProcedures || [],
createdAt: editingId ? sites.find((s) => s.id === editingId)?.createdAt || new Date().toISOString() : new Date().toISOString(),
updatedAt: new Date().toISOString(),
}
@@ -86,6 +92,8 @@ export default function TreatmentSitesPage() {
monthlyTemperatures: Array(12).fill(0),
subscribedServices: [],
transporters: [],
+ investors: [],
+ administrativeProcedures: [],
})
setEditingId(null)
setErrors({})
@@ -155,6 +163,49 @@ export default function TreatmentSitesPage() {
)
},
},
+ {
+ key: 'investors',
+ header: 'Investors',
+ render: (site: TreatmentSite) => {
+ if (!site.investors || site.investors.length === 0) {
+ return None
+ }
+ return (
+
+ {site.investors.map((assoc, idx) => {
+ const investor = investors.find((i) => i.id === assoc.investorId)
+ return (
+
+ {investor?.name || 'Unknown'}
+
+ )
+ })}
+
+ )
+ },
+ },
+ {
+ key: 'procedures',
+ header: 'Procedures',
+ render: (site: TreatmentSite) => {
+ if (!site.administrativeProcedures || site.administrativeProcedures.length === 0) {
+ return None
+ }
+ return (
+
+ {site.administrativeProcedures.map((assoc, idx) => {
+ const procedure = administrativeProcedures.find((p) => p.id === assoc.procedureId)
+ const procedureStatusVariant = assoc.status === 'done' ? 'success' : assoc.status === 'toDo' ? 'warning' : 'info'
+ return (
+
+ {procedure?.name || 'Unknown'}
+
+ )
+ })}
+
+ )
+ },
+ },
{
key: 'actions',
header: 'Actions',
@@ -340,6 +391,210 @@ export default function TreatmentSitesPage() {
+ {/* Associated Investors Section */}
+
+
Associated Investors
+
+ Add investors for this treatment site. Specify the investment status and amount if known.
+
+
+ {(formData.investors || []).map((association, index) => {
+ const investor = investors.find((i) => i.id === association.investorId)
+ return (
+
+
+ )
+ })}
+
+
+
+
Associated Administrative Procedures
+
+ Add administrative procedures for this treatment site. Track the status of each procedure.
+
+
+ {(formData.administrativeProcedures || []).map((association, index) => {
+ const procedure = administrativeProcedures.find((p) => p.id === association.procedureId)
+ const procedureStatusOptions = [
+ { value: 'toDo', label: 'To Do' },
+ { value: 'done', label: 'Done' },
+ { value: 'na', label: 'N/A' },
+ ]
+ return (
+
+
+ )
+ })}
+
+
+