|
|
|
|
@ -1,11 +1,12 @@
|
|
|
|
|
import { useState } from 'react'
|
|
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
|
import { fromRupees } from '@sims/domain'
|
|
|
|
|
import { Button, Field, Notice, Toolbar } from '@sims/ui'
|
|
|
|
|
import { Button, Dialog, Field, FormField, FormGrid, Notice, Toolbar, useToast } from '@sims/ui'
|
|
|
|
|
import {
|
|
|
|
|
createAmc, createInteraction, createRecurringPlan, patchClientModule, recordPayment,
|
|
|
|
|
updateAmc, updateInteraction, updateRecurringPlan,
|
|
|
|
|
CLIENT_MODULE_STATUSES, KIND_LABEL, PAYMENT_MODES,
|
|
|
|
|
type ClientModule, type ClientModuleStatus, type Employee, type InteractionType,
|
|
|
|
|
type Kind, type Module, type PaymentMode,
|
|
|
|
|
type AmcContract, type ClientModule, type ClientModuleStatus, type Employee, type Interaction,
|
|
|
|
|
type InteractionType, type Kind, type Module, type PaymentMode, type RecurringPlan,
|
|
|
|
|
} from '../api'
|
|
|
|
|
|
|
|
|
|
const today = () => new Date().toISOString().slice(0, 10)
|
|
|
|
|
@ -35,17 +36,33 @@ export function AccountOwnerSelect(props: {
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** Owner-only: create a recurring plan on one of the client's modules. */
|
|
|
|
|
export function NewRecurringForm(props: {
|
|
|
|
|
clientId: string; options: { id: string; label: string }[]; onDone: () => void
|
|
|
|
|
/** Owner-only: create or edit a recurring plan on one of the client's modules. */
|
|
|
|
|
export function PlanDialog(props: {
|
|
|
|
|
open: boolean; onClose: () => void; clientId: string
|
|
|
|
|
options: { id: string; label: string }[]; initial?: RecurringPlan; onDone: () => void
|
|
|
|
|
}) {
|
|
|
|
|
const toast = useToast()
|
|
|
|
|
const editing = props.initial !== undefined
|
|
|
|
|
const [f, setF] = useState({ clientModuleId: '', cadence: 'monthly', amountRs: '', nextRun: today(), policy: 'manual' })
|
|
|
|
|
const [error, setError] = useState<string | undefined>()
|
|
|
|
|
const [saving, setSaving] = useState(false)
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!props.open) return
|
|
|
|
|
const p = props.initial
|
|
|
|
|
setError(undefined)
|
|
|
|
|
setF({
|
|
|
|
|
clientModuleId: p?.clientModuleId ?? '', cadence: p?.cadence ?? 'monthly',
|
|
|
|
|
amountRs: p?.amountPaise !== null && p?.amountPaise !== undefined ? String(p.amountPaise / 100) : '',
|
|
|
|
|
nextRun: p?.nextRun ?? today(), policy: p?.policy ?? 'manual',
|
|
|
|
|
})
|
|
|
|
|
}, [props.open, props.initial])
|
|
|
|
|
|
|
|
|
|
const set = (k: keyof typeof f) => (e: { target: { value: string } }) =>
|
|
|
|
|
setF((p) => ({ ...p, [k]: e.target.value }))
|
|
|
|
|
|
|
|
|
|
const save = () => {
|
|
|
|
|
if (saving) return
|
|
|
|
|
if (f.clientModuleId === '') { setError('Pick a subscribed module'); return }
|
|
|
|
|
const amount = f.amountRs === '' ? undefined : Number(f.amountRs)
|
|
|
|
|
if (amount !== undefined && (!Number.isFinite(amount) || amount <= 0)) {
|
|
|
|
|
@ -53,54 +70,82 @@ export function NewRecurringForm(props: {
|
|
|
|
|
}
|
|
|
|
|
setError(undefined)
|
|
|
|
|
setSaving(true)
|
|
|
|
|
createRecurringPlan(props.clientId, {
|
|
|
|
|
const body = {
|
|
|
|
|
clientModuleId: f.clientModuleId, cadence: f.cadence, nextRun: f.nextRun, policy: f.policy,
|
|
|
|
|
...(amount !== undefined ? { amountPaise: fromRupees(amount) } : {}),
|
|
|
|
|
})
|
|
|
|
|
.then(() => { setF({ clientModuleId: '', cadence: 'monthly', amountRs: '', nextRun: today(), policy: 'manual' }); props.onDone() })
|
|
|
|
|
}
|
|
|
|
|
const call = editing ? updateRecurringPlan(props.initial!.id, body) : createRecurringPlan(props.clientId, body)
|
|
|
|
|
call
|
|
|
|
|
.then(() => { toast.ok('Plan saved'); props.onDone(); props.onClose() })
|
|
|
|
|
.catch((e: Error) => setError(e.message))
|
|
|
|
|
.finally(() => setSaving(false))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="wf-card">
|
|
|
|
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
|
|
|
|
<Field label="Module">
|
|
|
|
|
<select className="wf" value={f.clientModuleId} onChange={set('clientModuleId')}>
|
|
|
|
|
<Dialog
|
|
|
|
|
open={props.open}
|
|
|
|
|
onClose={() => { if (!saving) props.onClose() }}
|
|
|
|
|
title={editing ? 'Edit recurring plan' : 'New recurring plan'}
|
|
|
|
|
footer={
|
|
|
|
|
<>
|
|
|
|
|
<Button pill onClick={() => { if (!saving) props.onClose() }}>Cancel</Button>
|
|
|
|
|
<Button pill tone="primary" onClick={save}>{saving ? 'Saving…' : editing ? 'Save changes' : 'New recurring plan'}</Button>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<FormGrid>
|
|
|
|
|
<FormField label="Module">
|
|
|
|
|
<select className="wf" autoFocus value={f.clientModuleId} onChange={set('clientModuleId')}>
|
|
|
|
|
<option value="">Module…</option>
|
|
|
|
|
{props.options.map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
|
|
|
|
|
</select>
|
|
|
|
|
</Field>
|
|
|
|
|
<Field label="Cadence">
|
|
|
|
|
</FormField>
|
|
|
|
|
<FormField label="Cadence">
|
|
|
|
|
<select className="wf" value={f.cadence} onChange={set('cadence')}>
|
|
|
|
|
<option value="monthly">monthly</option>
|
|
|
|
|
<option value="yearly">yearly</option>
|
|
|
|
|
</select>
|
|
|
|
|
</Field>
|
|
|
|
|
<Field label="Amount (₹, optional)"><input className="wf num" style={{ width: 120 }} value={f.amountRs} onChange={set('amountRs')} /></Field>
|
|
|
|
|
<Field label="Next run"><input type="date" className="wf" value={f.nextRun} onChange={set('nextRun')} /></Field>
|
|
|
|
|
<Field label="Policy">
|
|
|
|
|
</FormField>
|
|
|
|
|
<FormField label="Amount (₹, optional)"><input className="wf num" value={f.amountRs} onChange={set('amountRs')} /></FormField>
|
|
|
|
|
<FormField label="Next run"><input type="date" className="wf" value={f.nextRun} onChange={set('nextRun')} /></FormField>
|
|
|
|
|
<FormField label="Policy">
|
|
|
|
|
<select className="wf" value={f.policy} onChange={set('policy')}>
|
|
|
|
|
<option value="manual">manual</option>
|
|
|
|
|
<option value="auto">auto</option>
|
|
|
|
|
</select>
|
|
|
|
|
</Field>
|
|
|
|
|
<Button tone="primary" onClick={save}>{saving ? 'Saving…' : 'New recurring plan'}</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</FormField>
|
|
|
|
|
</FormGrid>
|
|
|
|
|
{error !== undefined && <Notice tone="err">{error}</Notice>}
|
|
|
|
|
</div>
|
|
|
|
|
</Dialog>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** Owner-only: create an AMC contract — amount entered in rupees, stored in paise. */
|
|
|
|
|
export function NewAmcForm(props: { clientId: string; onDone: () => void }) {
|
|
|
|
|
/** Owner-only: create or edit an AMC contract — amount entered in rupees, stored in paise. */
|
|
|
|
|
export function AmcDialog(props: {
|
|
|
|
|
open: boolean; onClose: () => void; clientId: string; initial?: AmcContract; onDone: () => void
|
|
|
|
|
}) {
|
|
|
|
|
const toast = useToast()
|
|
|
|
|
const editing = props.initial !== undefined
|
|
|
|
|
const [f, setF] = useState({ coverage: '', periodFrom: today(), periodTo: '', amountRs: '', reminderDays: '30' })
|
|
|
|
|
const [error, setError] = useState<string | undefined>()
|
|
|
|
|
const [saving, setSaving] = useState(false)
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!props.open) return
|
|
|
|
|
const a = props.initial
|
|
|
|
|
setError(undefined)
|
|
|
|
|
setF({
|
|
|
|
|
coverage: a?.coverage ?? '', periodFrom: a?.periodFrom ?? today(), periodTo: a?.periodTo ?? '',
|
|
|
|
|
amountRs: a !== undefined ? String(a.amountPaise / 100) : '',
|
|
|
|
|
reminderDays: a !== undefined ? String(a.renewalReminderDays) : '30',
|
|
|
|
|
})
|
|
|
|
|
}, [props.open, props.initial])
|
|
|
|
|
|
|
|
|
|
const set = (k: keyof typeof f) => (e: { target: { value: string } }) =>
|
|
|
|
|
setF((p) => ({ ...p, [k]: e.target.value }))
|
|
|
|
|
|
|
|
|
|
const save = () => {
|
|
|
|
|
if (saving) return
|
|
|
|
|
const amount = Number(f.amountRs)
|
|
|
|
|
if (!Number.isFinite(amount) || amount <= 0) { setError('Enter the contract amount in rupees'); return }
|
|
|
|
|
if (f.periodTo === '') { setError('Pick the period end date'); return }
|
|
|
|
|
@ -108,78 +153,115 @@ export function NewAmcForm(props: { clientId: string; onDone: () => void }) {
|
|
|
|
|
if (!Number.isInteger(days) || days < 0) { setError('Reminder days must be a non-negative integer'); return }
|
|
|
|
|
setError(undefined)
|
|
|
|
|
setSaving(true)
|
|
|
|
|
createAmc(props.clientId, {
|
|
|
|
|
const body = {
|
|
|
|
|
coverage: f.coverage, periodFrom: f.periodFrom, periodTo: f.periodTo,
|
|
|
|
|
amountPaise: fromRupees(amount), renewalReminderDays: days,
|
|
|
|
|
})
|
|
|
|
|
.then(() => { setF({ coverage: '', periodFrom: today(), periodTo: '', amountRs: '', reminderDays: '30' }); props.onDone() })
|
|
|
|
|
}
|
|
|
|
|
const call = editing ? updateAmc(props.initial!.id, body) : createAmc(props.clientId, body)
|
|
|
|
|
call
|
|
|
|
|
.then(() => { toast.ok('AMC saved'); props.onDone(); props.onClose() })
|
|
|
|
|
.catch((e: Error) => setError(e.message))
|
|
|
|
|
.finally(() => setSaving(false))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="wf-card">
|
|
|
|
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
|
|
|
|
<Field label="Coverage"><input className="wf" value={f.coverage} onChange={set('coverage')} /></Field>
|
|
|
|
|
<Field label="Period from"><input type="date" className="wf" value={f.periodFrom} onChange={set('periodFrom')} /></Field>
|
|
|
|
|
<Field label="Period to"><input type="date" className="wf" value={f.periodTo} onChange={set('periodTo')} /></Field>
|
|
|
|
|
<Field label="Amount (₹)"><input className="wf num" style={{ width: 120 }} value={f.amountRs} onChange={set('amountRs')} /></Field>
|
|
|
|
|
<Field label="Reminder days"><input className="wf num" style={{ width: 80 }} value={f.reminderDays} onChange={set('reminderDays')} /></Field>
|
|
|
|
|
<Button tone="primary" onClick={save}>{saving ? 'Saving…' : 'New AMC'}</Button>
|
|
|
|
|
</div>
|
|
|
|
|
<Dialog
|
|
|
|
|
open={props.open}
|
|
|
|
|
onClose={() => { if (!saving) props.onClose() }}
|
|
|
|
|
title={editing ? 'Edit AMC contract' : 'New AMC contract'}
|
|
|
|
|
footer={
|
|
|
|
|
<>
|
|
|
|
|
<Button pill onClick={() => { if (!saving) props.onClose() }}>Cancel</Button>
|
|
|
|
|
<Button pill tone="primary" onClick={save}>{saving ? 'Saving…' : editing ? 'Save changes' : 'New AMC'}</Button>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<FormGrid>
|
|
|
|
|
<FormField label="Coverage" wide><input className="wf" autoFocus value={f.coverage} onChange={set('coverage')} /></FormField>
|
|
|
|
|
<FormField label="Period from"><input type="date" className="wf" value={f.periodFrom} onChange={set('periodFrom')} /></FormField>
|
|
|
|
|
<FormField label="Period to"><input type="date" className="wf" value={f.periodTo} onChange={set('periodTo')} /></FormField>
|
|
|
|
|
<FormField label="Amount (₹)"><input className="wf num" value={f.amountRs} onChange={set('amountRs')} /></FormField>
|
|
|
|
|
<FormField label="Reminder days"><input className="wf num" value={f.reminderDays} onChange={set('reminderDays')} /></FormField>
|
|
|
|
|
</FormGrid>
|
|
|
|
|
{error !== undefined && <Notice tone="err">{error}</Notice>}
|
|
|
|
|
</div>
|
|
|
|
|
</Dialog>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** All roles: log a call / visit / training …; a follow-up date feeds the daily scan. */
|
|
|
|
|
export function LogInteractionForm(props: { clientId: string; types: InteractionType[]; onDone: () => void }) {
|
|
|
|
|
/** All roles: log or edit a call / visit / training …; a follow-up date feeds the daily scan. */
|
|
|
|
|
export function InteractionDialog(props: {
|
|
|
|
|
open: boolean; onClose: () => void; clientId: string
|
|
|
|
|
types: InteractionType[]; initial?: Interaction; onDone: () => void
|
|
|
|
|
}) {
|
|
|
|
|
const toast = useToast()
|
|
|
|
|
const editing = props.initial !== undefined
|
|
|
|
|
const [f, setF] = useState({ typeCode: '', onDate: today(), notes: '', outcome: '', followUpOn: '' })
|
|
|
|
|
const [error, setError] = useState<string | undefined>()
|
|
|
|
|
const [saving, setSaving] = useState(false)
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!props.open) return
|
|
|
|
|
const i = props.initial
|
|
|
|
|
setError(undefined)
|
|
|
|
|
setF({
|
|
|
|
|
typeCode: i?.typeCode ?? '', onDate: i?.onDate ?? today(), notes: i?.notes ?? '',
|
|
|
|
|
outcome: i?.outcome ?? '', followUpOn: i?.followUpOn ?? '',
|
|
|
|
|
})
|
|
|
|
|
}, [props.open, props.initial])
|
|
|
|
|
|
|
|
|
|
const set = (k: keyof typeof f) => (e: { target: { value: string } }) =>
|
|
|
|
|
setF((p) => ({ ...p, [k]: e.target.value }))
|
|
|
|
|
|
|
|
|
|
const save = () => {
|
|
|
|
|
if (saving) return
|
|
|
|
|
if (f.typeCode === '') { setError('Pick an interaction type'); return }
|
|
|
|
|
setError(undefined)
|
|
|
|
|
setSaving(true)
|
|
|
|
|
createInteraction(props.clientId, {
|
|
|
|
|
const body = {
|
|
|
|
|
typeCode: f.typeCode, onDate: f.onDate, notes: f.notes,
|
|
|
|
|
...(f.outcome !== '' ? { outcome: f.outcome } : {}),
|
|
|
|
|
...(f.followUpOn !== '' ? { followUpOn: f.followUpOn } : {}),
|
|
|
|
|
})
|
|
|
|
|
.then(() => { setF({ typeCode: '', onDate: today(), notes: '', outcome: '', followUpOn: '' }); props.onDone() })
|
|
|
|
|
}
|
|
|
|
|
const call = editing ? updateInteraction(props.initial!.id, body) : createInteraction(props.clientId, body)
|
|
|
|
|
call
|
|
|
|
|
.then(() => { toast.ok('Interaction saved'); props.onDone(); props.onClose() })
|
|
|
|
|
.catch((e: Error) => setError(e.message))
|
|
|
|
|
.finally(() => setSaving(false))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="wf-card">
|
|
|
|
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
|
|
|
|
<Field label="Type">
|
|
|
|
|
<select className="wf" value={f.typeCode} onChange={set('typeCode')}>
|
|
|
|
|
<Dialog
|
|
|
|
|
open={props.open}
|
|
|
|
|
onClose={() => { if (!saving) props.onClose() }}
|
|
|
|
|
title={editing ? 'Edit interaction' : 'Log interaction'}
|
|
|
|
|
footer={
|
|
|
|
|
<>
|
|
|
|
|
<Button pill onClick={() => { if (!saving) props.onClose() }}>Cancel</Button>
|
|
|
|
|
<Button pill tone="primary" onClick={save}>{saving ? (editing ? 'Saving…' : 'Logging…') : editing ? 'Save changes' : 'Log interaction'}</Button>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<FormGrid>
|
|
|
|
|
<FormField label="Type">
|
|
|
|
|
<select className="wf" autoFocus value={f.typeCode} onChange={set('typeCode')}>
|
|
|
|
|
<option value="">Type…</option>
|
|
|
|
|
{props.types.map((t) => <option key={t.code} value={t.code}>{t.label}</option>)}
|
|
|
|
|
</select>
|
|
|
|
|
</Field>
|
|
|
|
|
<Field label="On"><input type="date" className="wf" value={f.onDate} onChange={set('onDate')} /></Field>
|
|
|
|
|
<Field label="Outcome">
|
|
|
|
|
</FormField>
|
|
|
|
|
<FormField label="On"><input type="date" className="wf" value={f.onDate} onChange={set('onDate')} /></FormField>
|
|
|
|
|
<FormField label="Outcome">
|
|
|
|
|
<select className="wf" value={f.outcome} onChange={set('outcome')}>
|
|
|
|
|
<option value="">—</option>
|
|
|
|
|
<option value="positive">positive</option>
|
|
|
|
|
<option value="neutral">neutral</option>
|
|
|
|
|
<option value="negative">negative</option>
|
|
|
|
|
</select>
|
|
|
|
|
</Field>
|
|
|
|
|
<Field label="Follow-up on"><input type="date" className="wf" value={f.followUpOn} onChange={set('followUpOn')} /></Field>
|
|
|
|
|
<Button tone="primary" onClick={save}>{saving ? 'Logging…' : 'Log interaction'}</Button>
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{ marginTop: 8 }}>
|
|
|
|
|
<Field label="Notes"><textarea className="wf" rows={2} style={{ width: '100%' }} value={f.notes} onChange={set('notes')} /></Field>
|
|
|
|
|
</div>
|
|
|
|
|
</FormField>
|
|
|
|
|
<FormField label="Follow-up on"><input type="date" className="wf" value={f.followUpOn} onChange={set('followUpOn')} /></FormField>
|
|
|
|
|
<FormField label="Notes" wide><textarea className="wf" rows={2} value={f.notes} onChange={set('notes')} /></FormField>
|
|
|
|
|
</FormGrid>
|
|
|
|
|
{error !== undefined && <Notice tone="err">{error}</Notice>}
|
|
|
|
|
</div>
|
|
|
|
|
</Dialog>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
Thomas Joise
5 days ago