@soildoctor/report

Reusable FullReport React component for Soil Doctor reports.

Install

npm i @soildoctor/report

Peer deps:

• react (>=18)
• react-dom (>=18)

Quick start (zero-config)

import '@soildoctor/report/styles.css'; // one-time CSS import
import { FullReport } from '@soildoctor/report';
import apiResponse from './api-response.json';

export default function App() {
	return (
		<div>
			<FullReport data={apiResponse} language="english" />
		</div>
	);
}

No Tailwind setup required. The package ships prebuilt CSS with Tailwind preflight disabled.

Props

interface FullReportProps {
	data: APIResponse;     // required
	language?: 'english' | 'hindi'; // default: 'english'
}

• data: full API response payload. The component renders strictly from this prop.
• language: UI translation; static labels are translated using built-in strings.

Data format (expected)

Minimal shape used by the component:

interface APIResponse {
	report: {
		name: string;
		mobile_no: string;
		address?: string;
		city?: string;
		state?: string;
		village?: string;
		farm_size?: string;
		farm_size_unit?: string; // e.g. 'Acres'
		previous_crop?: string;
		next_crop?: string;
		sample_code?: string;
		sample_type?: string; // e.g. 'SOIL'
		entity_name?: string; // association shown in header
		// soil values (strings are fine)
		ph?: string; ec?: string; oc?: string;
		nitrogen?: string; phosphorus?: string; potassium?: string;
		sulphur?: string; magnesium?: string; calcium?: string;
		zinc?: string; iron?: string; copper?: string; boron?: string;
	};
	recommData?: {
		recommendation?: {
			crop?: string;
			recommendations?: Array<{
				order: number;
				orderName: Record<string, string>; // multilingual
				prescription: Array<{
					input: Record<string, string>;
					perSessionDose: string | number;
					unit: Record<string, string>;
					method: Record<string, string>;
				}>;
			}>;
		};
	};
}

Notes:

• If a soil metric is missing or non-numeric, the UI shows - and a gray status dot.
• Fertilizer recommendations support multilingual fields; the library picks language, then english, then first available.

Translations

Static labels are translated for: english, hindi.

• Brand name "Soil Doctor" is not translated.
• Crop Tips JSONs bundled for: rice, wheat, maize, sugarcane, mustard, potato (English and Hindi).

Using Crop Tips

The component renders crop tips from bundled JSON when you pass a crop in data.recommData.recommendation.crop. Language fallback is English if the requested language is not present.

Build (library authoring)

npm run build:lib
# CSS is bundled automatically during publish via prepublishOnly.

Changelog

See CHANGELOG.md.