You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
537 lines
25 KiB
TypeScript
537 lines
25 KiB
TypeScript
import { useState } from 'react'
|
|
import { useNavigate, useParams } from 'react-router-dom'
|
|
import { formatINR, fromRupees } from '@sims/domain'
|
|
import { Badge, Button, DataTable, EmptyState, Field, Notice, PageHeader, StatCard, Stats, Toolbar } from '@sims/ui'
|
|
import {
|
|
assignClientModule, getClient, getClientModules, getLedger, getModules,
|
|
patchClient, patchClientModule, recordPayment,
|
|
role, getRecurringPlans, createRecurringPlan, deactivateRecurringPlan,
|
|
getAmc, createAmc, deactivateAmc, generateAmcRenewalInvoice,
|
|
getInteractions, getInteractionTypes, createInteraction, updateInteraction,
|
|
CLIENT_MODULE_STATUSES, CLIENT_STATUSES, KIND_LABEL, PAYMENT_MODES,
|
|
type AmcPaidStatus, type ClientModule, type ClientModuleStatus, type ClientStatus,
|
|
type InteractionType, type Kind, type Module, type Outcome, type PaymentMode,
|
|
} from '../api'
|
|
import { CLIENT_TONE, DOC_TONE, useData } from './Clients'
|
|
|
|
const inr = (p: number) => formatINR(p, { symbol: false })
|
|
const today = () => new Date().toISOString().slice(0, 10)
|
|
|
|
const AMC_TONE: Record<AmcPaidStatus, 'ok' | 'warn' | 'err'> = { paid: 'ok', unpaid: 'err', unbilled: 'warn' }
|
|
const OUTCOME_TONE: Record<Outcome, 'ok' | 'warn' | 'err'> = { positive: 'ok', neutral: 'warn', negative: 'err' }
|
|
|
|
/** Client 360° — header, modules, documents, payments & dues (14-SPEC §Client registry). */
|
|
export function ClientDetail() {
|
|
const id = useParams()['id'] ?? ''
|
|
const nav = useNavigate()
|
|
const client = useData(() => getClient(id), [id])
|
|
const modules = useData(getModules, [])
|
|
const cms = useData(() => getClientModules(id), [id])
|
|
const ledger = useData(() => getLedger(id), [id])
|
|
const plans = useData(() => getRecurringPlans(id), [id])
|
|
const amc = useData(() => getAmc(id), [id])
|
|
const interactions = useData(() => getInteractions(id), [id])
|
|
const types = useData(getInteractionTypes, [])
|
|
const isOwner = role() === 'owner'
|
|
const [actionErr, setActionErr] = useState<string | undefined>()
|
|
|
|
const c = client.data
|
|
if (client.error !== undefined) return <Notice tone="err">{client.error}</Notice>
|
|
if (c === undefined) return <EmptyState>Loading…</EmptyState>
|
|
|
|
const moduleName = (moduleId: string) =>
|
|
modules.data?.find((m) => m.id === moduleId)?.name ?? moduleId
|
|
|
|
return (
|
|
<div className="wf-page">
|
|
<PageHeader
|
|
title={c.name} badge={c.code}
|
|
desc={`State ${c.stateCode}${c.gstin !== undefined && c.gstin !== '' ? ` · GSTIN ${c.gstin}` : ''}${c.address !== '' ? ` · ${c.address}` : ''}`}
|
|
actions={
|
|
<select
|
|
className="wf" value={c.status}
|
|
onChange={(e) => {
|
|
setActionErr(undefined)
|
|
patchClient(id, { status: e.target.value as ClientStatus })
|
|
.then(client.reload).catch((err: Error) => setActionErr(err.message))
|
|
}}
|
|
>
|
|
{CLIENT_STATUSES.map((s) => <option key={s} value={s}>{s}</option>)}
|
|
</select>
|
|
}
|
|
/>
|
|
<Toolbar>
|
|
<Badge tone={CLIENT_TONE[c.status]}>{c.status}</Badge>
|
|
{c.contacts.map((ct, i) => (
|
|
<Badge key={i}>{[ct.name, ct.email, ct.phone].filter((x) => x !== undefined && x !== '').join(' · ')}</Badge>
|
|
))}
|
|
</Toolbar>
|
|
{actionErr !== undefined && <Notice tone="err">{actionErr}</Notice>}
|
|
|
|
<h3>Modules</h3>
|
|
{modules.data !== undefined && (
|
|
<AssignModuleForm
|
|
modules={modules.data}
|
|
onAssign={(moduleId, kind) => {
|
|
setActionErr(undefined)
|
|
assignClientModule(id, { moduleId, kind })
|
|
.then(() => { cms.reload(); ledger.reload() })
|
|
.catch((err: Error) => setActionErr(err.message))
|
|
}}
|
|
/>
|
|
)}
|
|
{cms.error !== undefined && <Notice tone="err">{cms.error}</Notice>}
|
|
{cms.data === undefined || cms.data.length === 0
|
|
? <EmptyState>No modules assigned yet.</EmptyState>
|
|
: (
|
|
<DataTable
|
|
columns={[
|
|
{ key: 'module', label: 'Module' }, { key: 'kind', label: 'Kind' },
|
|
{ key: 'status', label: 'Status' },
|
|
{ key: 'installed', label: 'Installed' }, { key: 'completed', label: 'Completed' },
|
|
{ key: 'trained', label: 'Trained' },
|
|
{ key: 'billed', label: 'Billed', numeric: true },
|
|
{ key: 'settled', label: 'Settled', numeric: true },
|
|
]}
|
|
rows={cms.data.map((cm) => {
|
|
const paid = ledger.data?.modulePaid.find((mp) => mp.moduleId === cm.moduleId)
|
|
return {
|
|
module: moduleName(cm.moduleId),
|
|
kind: KIND_LABEL[cm.kind],
|
|
status: (
|
|
<ClientModuleStatusSelect
|
|
cm={cm}
|
|
onPatched={() => cms.reload()}
|
|
onError={setActionErr}
|
|
/>
|
|
),
|
|
installed: <RowDate cm={cm} field="installedOn" onPatched={() => cms.reload()} onError={setActionErr} />,
|
|
completed: <RowDate cm={cm} field="completedOn" onPatched={() => cms.reload()} onError={setActionErr} />,
|
|
trained: <RowDate cm={cm} field="trainedOn" onPatched={() => cms.reload()} onError={setActionErr} />,
|
|
billed: paid !== undefined ? inr(paid.billedPaise) : '—',
|
|
settled: paid !== undefined ? inr(paid.settledPaise) : '—',
|
|
}
|
|
})}
|
|
/>
|
|
)}
|
|
|
|
<h3 style={{ marginTop: 20 }}>Documents</h3>
|
|
{ledger.error !== undefined && <Notice tone="err">{ledger.error}</Notice>}
|
|
{ledger.data === undefined || ledger.data.documents.length === 0
|
|
? <EmptyState>No documents yet — compose one from New Document.</EmptyState>
|
|
: (
|
|
<DataTable
|
|
columns={[
|
|
{ key: 'no', label: 'No' }, { key: 'type', label: 'Type' },
|
|
{ key: 'date', label: 'Date' }, { key: 'payable', label: 'Payable', numeric: true },
|
|
{ key: 'status', label: 'Status' },
|
|
]}
|
|
onRowClick={(_row, i) => nav(`/documents/${ledger.data!.documents[i]!.id}`)}
|
|
rows={ledger.data.documents.map((d) => ({
|
|
no: d.docNo ?? <Badge tone="warn">draft</Badge>,
|
|
type: d.docType, date: d.docDate,
|
|
payable: inr(d.payablePaise),
|
|
status: <Badge tone={DOC_TONE[d.status]}>{d.status}</Badge>,
|
|
}))}
|
|
/>
|
|
)}
|
|
|
|
<h3 style={{ marginTop: 20 }}>Payments & dues</h3>
|
|
{ledger.data !== undefined && (
|
|
<Stats>
|
|
<StatCard label="Advance on account" value={formatINR(ledger.data.advancePaise)} hint="unallocated payments" />
|
|
</Stats>
|
|
)}
|
|
<PaymentForm
|
|
clientId={id}
|
|
onDone={() => { ledger.reload(); cms.reload() }}
|
|
/>
|
|
{ledger.data !== undefined && ledger.data.payments.length > 0 && (
|
|
<DataTable
|
|
columns={[
|
|
{ key: 'on', label: 'Received' }, { key: 'mode', label: 'Mode' },
|
|
{ key: 'ref', label: 'Reference' },
|
|
{ key: 'amount', label: 'Amount', numeric: true },
|
|
{ key: 'tds', label: 'TDS', numeric: true },
|
|
]}
|
|
rows={ledger.data.payments.map((p) => ({
|
|
on: p.receivedOn, mode: p.mode, ref: p.reference !== '' ? p.reference : '—',
|
|
amount: inr(p.amountPaise), tds: p.tdsPaise > 0 ? inr(p.tdsPaise) : '—',
|
|
}))}
|
|
/>
|
|
)}
|
|
|
|
<h3 style={{ marginTop: 20 }}>Recurring plans</h3>
|
|
{isOwner && cms.data !== undefined && (
|
|
<NewRecurringForm
|
|
clientId={id}
|
|
options={cms.data.filter((cm) => cm.active).map((cm) => ({
|
|
id: cm.id, label: `${moduleName(cm.moduleId)} · ${KIND_LABEL[cm.kind]}`,
|
|
}))}
|
|
onDone={() => plans.reload()}
|
|
/>
|
|
)}
|
|
{plans.error !== undefined && <Notice tone="err">{plans.error}</Notice>}
|
|
{plans.data === undefined || plans.data.length === 0
|
|
? <EmptyState>No recurring plans.</EmptyState>
|
|
: (
|
|
<DataTable
|
|
columns={[
|
|
{ key: 'module', label: 'Module' }, { key: 'cadence', label: 'Cadence' },
|
|
{ key: 'amount', label: 'Amount', numeric: true }, { key: 'next', label: 'Next run' },
|
|
{ key: 'policy', label: 'Policy' }, { key: 'active', label: 'Active' }, { key: 'act', label: '' },
|
|
]}
|
|
rows={plans.data.map((plan) => {
|
|
const cm = cms.data?.find((x) => x.id === plan.clientModuleId)
|
|
return {
|
|
module: cm !== undefined ? moduleName(cm.moduleId) : '—',
|
|
cadence: plan.cadence,
|
|
amount: plan.amountPaise !== null ? inr(plan.amountPaise) : 'price book',
|
|
next: plan.nextRun,
|
|
policy: <Badge tone={plan.policy === 'auto' ? 'accent' : 'warn'}>{plan.policy}</Badge>,
|
|
active: plan.active ? 'yes' : 'no',
|
|
act: plan.active ? (
|
|
<Button onClick={() => {
|
|
setActionErr(undefined)
|
|
deactivateRecurringPlan(plan.id)
|
|
.then(() => plans.reload()).catch((err: Error) => setActionErr(err.message))
|
|
}}>Deactivate</Button>
|
|
) : '—',
|
|
}
|
|
})}
|
|
/>
|
|
)}
|
|
|
|
<h3 style={{ marginTop: 20 }}>AMC contracts</h3>
|
|
{isOwner && <NewAmcForm clientId={id} onDone={() => amc.reload()} />}
|
|
{amc.error !== undefined && <Notice tone="err">{amc.error}</Notice>}
|
|
{amc.data === undefined || amc.data.length === 0
|
|
? <EmptyState>No AMC contracts.</EmptyState>
|
|
: (
|
|
<DataTable
|
|
columns={[
|
|
{ key: 'coverage', label: 'Coverage' }, { key: 'period', label: 'Period' },
|
|
{ key: 'amount', label: 'Amount', numeric: true },
|
|
{ key: 'days', label: 'Reminder days', numeric: true },
|
|
{ key: 'paid', label: 'Paid' }, { key: 'act', label: '' },
|
|
]}
|
|
rows={amc.data.map((a) => ({
|
|
coverage: a.coverage !== '' ? a.coverage : '—',
|
|
period: `${a.periodFrom} → ${a.periodTo}`,
|
|
amount: inr(a.amountPaise),
|
|
days: a.renewalReminderDays,
|
|
paid: <Badge tone={AMC_TONE[a.paidStatus]}>{a.paidStatus}</Badge>,
|
|
act: (
|
|
<div style={{ display: 'flex', gap: 6 }}>
|
|
{a.paidStatus !== 'unpaid' && (
|
|
<Button tone="primary" onClick={() => {
|
|
setActionErr(undefined)
|
|
generateAmcRenewalInvoice(a.id)
|
|
.then((doc) => nav(`/documents/${doc.id}`)).catch((err: Error) => setActionErr(err.message))
|
|
}}>Generate renewal invoice</Button>
|
|
)}
|
|
{a.active && (
|
|
<Button onClick={() => {
|
|
setActionErr(undefined)
|
|
deactivateAmc(a.id)
|
|
.then(() => amc.reload()).catch((err: Error) => setActionErr(err.message))
|
|
}}>Deactivate</Button>
|
|
)}
|
|
</div>
|
|
),
|
|
}))}
|
|
/>
|
|
)}
|
|
|
|
<h3 style={{ marginTop: 20 }}>Interactions</h3>
|
|
{types.data !== undefined && (
|
|
<LogInteractionForm clientId={id} types={types.data} onDone={() => interactions.reload()} />
|
|
)}
|
|
{interactions.error !== undefined && <Notice tone="err">{interactions.error}</Notice>}
|
|
{interactions.data === undefined || interactions.data.length === 0
|
|
? <EmptyState>No interactions logged yet.</EmptyState>
|
|
: (
|
|
<DataTable
|
|
columns={[
|
|
{ key: 'on', label: 'Date' }, { key: 'type', label: 'Type' },
|
|
{ key: 'notes', label: 'Notes' }, { key: 'outcome', label: 'Outcome' },
|
|
{ key: 'follow', label: 'Follow-up' },
|
|
]}
|
|
rows={interactions.data.map((i) => ({
|
|
on: i.onDate,
|
|
type: types.data?.find((t) => t.code === i.typeCode)?.label ?? i.typeCode,
|
|
notes: i.notes !== '' ? i.notes : '—',
|
|
outcome: i.outcome !== null ? <Badge tone={OUTCOME_TONE[i.outcome]}>{i.outcome}</Badge> : '—',
|
|
follow: (
|
|
<input
|
|
type="date" className="wf" style={{ width: 140 }}
|
|
value={i.followUpOn ?? ''}
|
|
onChange={(e) => {
|
|
setActionErr(undefined)
|
|
updateInteraction(i.id, { followUpOn: e.target.value !== '' ? e.target.value : null })
|
|
.then(() => interactions.reload()).catch((err: Error) => setActionErr(err.message))
|
|
}}
|
|
/>
|
|
),
|
|
}))}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/** Owner-only: create a recurring plan on one of the client's modules. */
|
|
function NewRecurringForm(props: {
|
|
clientId: string; options: { id: string; label: string }[]; onDone: () => void
|
|
}) {
|
|
const [f, setF] = useState({ clientModuleId: '', cadence: 'monthly', amountRs: '', nextRun: today(), policy: 'manual' })
|
|
const [error, setError] = useState<string | undefined>()
|
|
const [saving, setSaving] = useState(false)
|
|
const set = (k: keyof typeof f) => (e: { target: { value: string } }) =>
|
|
setF((p) => ({ ...p, [k]: e.target.value }))
|
|
|
|
const save = () => {
|
|
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)) {
|
|
setError('Amount must be a positive rupee value (or blank for the price book)'); return
|
|
}
|
|
setError(undefined)
|
|
setSaving(true)
|
|
createRecurringPlan(props.clientId, {
|
|
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() })
|
|
.catch((e: Error) => setError(e.message))
|
|
.finally(() => setSaving(false))
|
|
}
|
|
|
|
return (
|
|
<div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: 12, margin: '10px 0' }}>
|
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
|
<Field label="Module">
|
|
<select className="wf" 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">
|
|
<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">
|
|
<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>
|
|
{error !== undefined && <Notice tone="err">{error}</Notice>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/** Owner-only: create an AMC contract — amount entered in rupees, stored in paise. */
|
|
function NewAmcForm(props: { clientId: string; onDone: () => void }) {
|
|
const [f, setF] = useState({ coverage: '', periodFrom: today(), periodTo: '', amountRs: '', reminderDays: '30' })
|
|
const [error, setError] = useState<string | undefined>()
|
|
const [saving, setSaving] = useState(false)
|
|
const set = (k: keyof typeof f) => (e: { target: { value: string } }) =>
|
|
setF((p) => ({ ...p, [k]: e.target.value }))
|
|
|
|
const save = () => {
|
|
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 }
|
|
const days = Number(f.reminderDays)
|
|
if (!Number.isInteger(days) || days < 0) { setError('Reminder days must be a non-negative integer'); return }
|
|
setError(undefined)
|
|
setSaving(true)
|
|
createAmc(props.clientId, {
|
|
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() })
|
|
.catch((e: Error) => setError(e.message))
|
|
.finally(() => setSaving(false))
|
|
}
|
|
|
|
return (
|
|
<div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: 12, margin: '10px 0' }}>
|
|
<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>
|
|
{error !== undefined && <Notice tone="err">{error}</Notice>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/** All roles: log a call / visit / training …; a follow-up date feeds the daily scan. */
|
|
function LogInteractionForm(props: { clientId: string; types: InteractionType[]; onDone: () => void }) {
|
|
const [f, setF] = useState({ typeCode: '', onDate: today(), notes: '', outcome: '', followUpOn: '' })
|
|
const [error, setError] = useState<string | undefined>()
|
|
const [saving, setSaving] = useState(false)
|
|
const set = (k: keyof typeof f) => (e: { target: { value: string } }) =>
|
|
setF((p) => ({ ...p, [k]: e.target.value }))
|
|
|
|
const save = () => {
|
|
if (f.typeCode === '') { setError('Pick an interaction type'); return }
|
|
setError(undefined)
|
|
setSaving(true)
|
|
createInteraction(props.clientId, {
|
|
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() })
|
|
.catch((e: Error) => setError(e.message))
|
|
.finally(() => setSaving(false))
|
|
}
|
|
|
|
return (
|
|
<div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: 12, margin: '10px 0' }}>
|
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
|
<Field label="Type">
|
|
<select className="wf" 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">
|
|
<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>
|
|
{error !== undefined && <Notice tone="err">{error}</Notice>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function AssignModuleForm(props: { modules: Module[]; onAssign: (moduleId: string, kind: Kind) => void }) {
|
|
const [moduleId, setModuleId] = useState('')
|
|
const mod = props.modules.find((m) => m.id === moduleId)
|
|
const [kind, setKind] = useState<Kind | ''>('')
|
|
return (
|
|
<Toolbar>
|
|
<select
|
|
className="wf" value={moduleId}
|
|
onChange={(e) => { setModuleId(e.target.value); setKind('') }}
|
|
>
|
|
<option value="">Assign module…</option>
|
|
{props.modules.filter((m) => m.active).map((m) => <option key={m.id} value={m.id}>{m.name}</option>)}
|
|
</select>
|
|
{mod !== undefined && (
|
|
<select className="wf" value={kind} onChange={(e) => setKind(e.target.value as Kind)}>
|
|
<option value="">Kind…</option>
|
|
{mod.allowedKinds.map((k) => <option key={k} value={k}>{KIND_LABEL[k]}</option>)}
|
|
</select>
|
|
)}
|
|
<Button
|
|
tone="primary"
|
|
onClick={() => { if (moduleId !== '' && kind !== '') { props.onAssign(moduleId, kind); setModuleId(''); setKind('') } }}
|
|
>
|
|
Assign
|
|
</Button>
|
|
</Toolbar>
|
|
)
|
|
}
|
|
|
|
function ClientModuleStatusSelect(props: {
|
|
cm: ClientModule; onPatched: () => void; onError: (msg: string) => void
|
|
}) {
|
|
return (
|
|
<select
|
|
className="wf" value={props.cm.status}
|
|
onChange={(e) => {
|
|
patchClientModule(props.cm.id, { status: e.target.value as ClientModuleStatus })
|
|
.then(props.onPatched).catch((err: Error) => props.onError(err.message))
|
|
}}
|
|
>
|
|
{CLIENT_MODULE_STATUSES.map((s) => <option key={s} value={s}>{s}</option>)}
|
|
</select>
|
|
)
|
|
}
|
|
|
|
function RowDate(props: {
|
|
cm: ClientModule; field: 'installedOn' | 'completedOn' | 'trainedOn'
|
|
onPatched: () => void; onError: (msg: string) => void
|
|
}) {
|
|
return (
|
|
<input
|
|
type="date" className="wf" style={{ width: 140 }}
|
|
value={props.cm[props.field] ?? ''}
|
|
onChange={(e) => {
|
|
patchClientModule(props.cm.id, { [props.field]: e.target.value !== '' ? e.target.value : null })
|
|
.then(props.onPatched).catch((err: Error) => props.onError(err.message))
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Record a payment against the client — amounts entered in rupees, stored in
|
|
* integer paise via fromRupees. Shared with DocumentView's "Record payment".
|
|
*/
|
|
export function PaymentForm(props: { clientId: string; onDone: () => void }) {
|
|
const [f, setF] = useState({ amountRs: '', tdsRs: '', mode: 'bank' as PaymentMode, reference: '', receivedOn: today() })
|
|
const [error, setError] = useState<string | undefined>()
|
|
const [saving, setSaving] = useState(false)
|
|
const set = (k: keyof typeof f) => (e: { target: { value: string } }) =>
|
|
setF((p) => ({ ...p, [k]: e.target.value }))
|
|
|
|
const save = () => {
|
|
const amount = Number(f.amountRs)
|
|
if (!Number.isFinite(amount) || amount <= 0) { setError('Enter a payment amount in rupees'); return }
|
|
const tds = f.tdsRs === '' ? 0 : Number(f.tdsRs)
|
|
if (!Number.isFinite(tds) || tds < 0) { setError('TDS must be a non-negative rupee amount'); return }
|
|
setError(undefined)
|
|
setSaving(true)
|
|
recordPayment({
|
|
clientId: props.clientId, receivedOn: f.receivedOn, mode: f.mode, reference: f.reference,
|
|
amountPaise: fromRupees(amount), tdsPaise: fromRupees(tds),
|
|
})
|
|
.then(() => { setF({ amountRs: '', tdsRs: '', mode: 'bank', reference: '', receivedOn: today() }); props.onDone() })
|
|
.catch((e: Error) => setError(e.message))
|
|
.finally(() => setSaving(false))
|
|
}
|
|
|
|
return (
|
|
<div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: 12, margin: '10px 0' }}>
|
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
|
<Field label="Amount (₹)"><input className="wf num" style={{ width: 120 }} value={f.amountRs} onChange={set('amountRs')} /></Field>
|
|
<Field label="TDS (₹)"><input className="wf num" style={{ width: 100 }} value={f.tdsRs} onChange={set('tdsRs')} /></Field>
|
|
<Field label="Mode">
|
|
<select className="wf" value={f.mode} onChange={set('mode')}>
|
|
{PAYMENT_MODES.map((m) => <option key={m} value={m}>{m}</option>)}
|
|
</select>
|
|
</Field>
|
|
<Field label="Reference"><input className="wf" value={f.reference} onChange={set('reference')} /></Field>
|
|
<Field label="Received on"><input type="date" className="wf" value={f.receivedOn} onChange={set('receivedOn')} /></Field>
|
|
<Button tone="primary" onClick={save}>{saving ? 'Recording…' : 'Record payment'}</Button>
|
|
</div>
|
|
{error !== undefined && <Notice tone="err">{error}</Notice>}
|
|
</div>
|
|
)
|
|
}
|