Disease Management Plan for Your Crops

<div className="p 6 max w 4xl mx auto"> <h1 className="text 2xl font bold mb 4">Disease Management Plan for {crop}</h1> <p className="text gray 600 mb 6">Disease: {diseaseType}</p> {/* <Dialog open={openDialog} onOpenChange={setOpenDialog}> <DialogTrigger asChild> <Button variant="outline">Enter Farm Acreage</Button> </DialogTrigger> <DialogContent> <DialogHeader>Enter Farm Acreage</DialogHeader> <Input type="number" placeholder="Enter farm acreage" value={acre} onChange={(e) => setAcre(e.target.value)} className="w full" /> <DialogFooter> <Button onClick={handleGeneratePlan}>Generate Plan</Button> </DialogFooter> </DialogContent> </Dialog> */} <Dialog open={openDialog} onOpenChange={setOpenDialog}> <DialogTrigger asChild> <Button variant="outline">Enter Farm Acreage</Button> </DialogTrigger> <DialogContent> <DialogHeader> {/* Accessible DialogTitle */} <DialogTitle>Enter Farm Acreage</DialogTitle> </DialogHeader> <Input type="number" placeholder="Enter farm acreage" value={acre} onChange={(e) => setAcre(e.target.value)} className="w full" /> <DialogFooter> <Button onClick={handleGeneratePlan}>Generate Plan</Button> </DialogFooter> </DialogContent> </Dialog> <ScrollArea className="h [77vh] w full border rounded md p 4"> {aiResponse && ( <div> {/* Display Treatment Plan */} <section> <h2 className="text xl font semibold mb 4">Treatment Plan</h2> <div className="grid grid cols 1 sm:grid cols 2 gap 4"> {aiResponse.crop_disease_management_plan.treatment_plan.map((task, index) => ( <Card key={index}> <CardHeader> <CardTitle>Date {task.date}: {task.task}</CardTitle> </CardHeader> <CardContent> <p><strong>Materials Needed:</strong> {task.materials_needed.join(", ")}</p> <p><strong>Amount:</strong> {task.amount}</p> <p><strong>Cost:</strong> ₹{Object.values(task.cost_details).reduce((a, b) => a + b, 0)}</p> {task.alternative && <p><strong>Alternative:</strong> {task.alternative}</p>} <p><strong>Instructions:</strong> {task.instructions}</p> </CardContent> </Card> ))} </div> </section> {/* Display Budget Summary */} <section className="mt 6"> <h2 className="text xl font semibold mb 4">Budget Summary</h2> <Card> <CardContent> <p><strong>Total Material Cost:</strong> ₹{aiResponse.crop_disease_management_plan.budget_summary.total_material_cost}</p> <p><strong>Labor Cost:</strong> ₹{aiResponse.crop_disease_management_plan.budget_summary.labor_cost}</p> <p><strong>Total Budget:</strong> ₹{aiResponse.crop_disease_management_plan.budget_summary.total_budget}</p> </CardContent> </Card> </section> {/* Display Recommendations */} <section className="mt 6"> <h2 className="text xl font semibold mb 4">Recommendations</h2> <Card> <CardContent> <h3 className="font bold">Preventive Measures:</h3> <ul className="list disc ml 6"> {aiResponse.crop_disease_management_plan.recommendations.preventive_measures.map((measure, index) => ( <li key={index}>{measure}</li> ))} </ul> <h3 className="font bold mt 4">Traditional Beliefs:</h3> <ul className="list disc ml 6"> {aiResponse.crop_disease_management_plan.recommendations.traditional_beliefs.map((belief, index) => ( <li key={index}>{belief}</li> ))} </ul> </CardContent> </Card> </section> </div> )} </ScrollArea> make this dashboard Ui beutifull and look good use cards and in that show used various infographics or kpi to show the data add a calender also so user can select in calender date and that dates plan will be visible