change page

src/app/page.tsx

@@ -18,25 +18,29 @@ import MedicalInformationIcon from '@mui/icons-material/MedicalInformation'
 import HealthAndSafetyIcon from '@mui/icons-material/HealthAndSafety'
 import LocalHospitalIcon from '@mui/icons-material/LocalHospital'
 
-const exampleSymptoms = [
-  'Headache',
-  'Fever',
-  'Cough',
-  'Fatigue',
-  'Nausea'
+const contohGejala = [
+  'Sakit Kepala',
+  'Demam',
+  'Batuk',
+  'Kelelahan',
+  'Mual',
+  'Pilek',
+  'Nyeri Otot'
 ]
 
-const exampleHistory = [
-  'Hypertension',
+const contohRiwayat = [
+  'Hipertensi',
   'Diabetes',
-  'Asthma',
-  'Allergies'
+  'Asma',
+  'Alergi',
+  'Jantung',
+  'Maag'
 ]
 
 export default function Home() {
-  const [symptoms, setSymptoms] = useState('')
-  const [medicalHistory, setMedicalHistory] = useState('')
-  const [recommendation, setRecommendation] = useState('')
+  const [gejala, setGejala] = useState('')
+  const [riwayatMedis, setRiwayatMedis] = useState('')
+  const [rekomendasi, setRekomendasi] = useState('')
   const [loading, setLoading] = useState(false)
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -49,24 +53,27 @@ export default function Home() {
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ symptoms, medicalHistory }),
+        body: JSON.stringify({ 
+          symptoms: gejala, 
+          medicalHistory: riwayatMedis 
+        }),
       })
 
       const data = await response.json()
-      setRecommendation(data.recommendation)
+      setRekomendasi(data.recommendation)
     } catch (error) {
-      console.error('Failed to get recommendation:', error)
+      console.error('Gagal mendapatkan rekomendasi:', error)
     } finally {
       setLoading(false)
     }
   }
 
-  const addExampleSymptom = (symptom: string) => {
-    setSymptoms(prev => prev ? `${prev}, ${symptom}` : symptom)
+  const tambahGejala = (gejala: string) => {
+    setGejala(prev => prev ? `${prev}, ${gejala}` : gejala)
   }
 
-  const addExampleHistory = (history: string) => {
-    setMedicalHistory(prev => prev ? `${prev}, ${history}` : history)
+  const tambahRiwayat = (riwayat: string) => {
+    setRiwayatMedis(prev => prev ? `${prev}, ${riwayat}` : riwayat)
   }
 
   return (
@@ -75,12 +82,12 @@ export default function Home() {
         <Box display="flex" alignItems="center" gap={2} mb={4}>
           <LocalHospitalIcon color="primary" sx={{ fontSize: 40 }} />
           <Typography variant="h4" component="h1" fontWeight="bold">
-            AI Drug Recommendation System
+            Sistem Rekomendasi Obat
           </Typography>
         </Box>
 
         <Alert severity="info" sx={{ mb: 4 }}>
-          This is an AI-powered tool to assist healthcare professionals. All recommendations should be reviewed by a qualified medical practitioner.
+          Ini adalah alat berbasis AI untuk membantu tenaga kesehatan. Semua rekomendasi harus ditinjau oleh praktisi medis yang berkualifikasi.
         </Alert>
 
         <form onSubmit={handleSubmit}>
@@ -88,25 +95,25 @@ export default function Home() {
             <Box>
               <Typography variant="h6" display="flex" alignItems="center" gap={1} mb={2}>
                 <MedicalInformationIcon />
-                Symptoms
+                Gejala Pasien
               </Typography>
               <TextField
                 fullWidth
                 multiline
                 rows={4}
-                value={symptoms}
-                onChange={(e) => setSymptoms(e.target.value)}
-                placeholder="Enter patient symptoms..."
+                value={gejala}
+                onChange={(e) => setGejala(e.target.value)}
+                placeholder="Masukkan gejala pasien..."
                 required
               />
               <Box mt={2}>
-                <Typography variant="subtitle2" mb={1}>Example symptoms:</Typography>
+                <Typography variant="subtitle2" mb={1}>Contoh gejala:</Typography>
                 <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
-                  {exampleSymptoms.map((symptom) => (
+                  {contohGejala.map((gejala) => (
                     <Chip
-                      key={symptom}
-                      label={symptom}
-                      onClick={() => addExampleSymptom(symptom)}
+                      key={gejala}
+                      label={gejala}
+                      onClick={() => tambahGejala(gejala)}
                       clickable
                     />
                   ))}
@@ -117,25 +124,25 @@ export default function Home() {
             <Box>
               <Typography variant="h6" display="flex" alignItems="center" gap={1} mb={2}>
                 <HealthAndSafetyIcon />
-                Medical History
+                Riwayat Medis
               </Typography>
               <TextField
                 fullWidth
                 multiline
                 rows={4}
-                value={medicalHistory}
-                onChange={(e) => setMedicalHistory(e.target.value)}
-                placeholder="Enter patient medical history..."
+                value={riwayatMedis}
+                onChange={(e) => setRiwayatMedis(e.target.value)}
+                placeholder="Masukkan riwayat medis pasien..."
                 required
               />
               <Box mt={2}>
-                <Typography variant="subtitle2" mb={1}>Example conditions:</Typography>
+                <Typography variant="subtitle2" mb={1}>Contoh kondisi:</Typography>
                 <Stack direction="row" spacing={1} flexWrap="wrap" gap={1}>
-                  {exampleHistory.map((history) => (
+                  {contohRiwayat.map((riwayat) => (
                     <Chip
-                      key={history}
-                      label={history}
-                      onClick={() => addExampleHistory(history)}
+                      key={riwayat}
+                      label={riwayat}
+                      onClick={() => tambahRiwayat(riwayat)}
                       clickable
                     />
                   ))}
@@ -150,20 +157,20 @@ export default function Home() {
               disabled={loading}
               startIcon={loading ? <CircularProgress size={20} /> : null}
             >
-              {loading ? 'Generating Recommendation...' : 'Get Recommendation'}
+              {loading ? 'Menghasilkan Rekomendasi...' : 'Dapatkan Rekomendasi'}
             </Button>
           </Stack>
         </form>
 
-        {recommendation && (
+        {rekomendasi && (
           <Box mt={4}>
             <Divider sx={{ my: 4 }} />
             <Typography variant="h6" gutterBottom>
-              Recommendation
+              Rekomendasi Pengobatan
             </Typography>
             <Paper variant="outlined" sx={{ p: 3, bgcolor: 'background.default' }}>
               <Typography whiteSpace="pre-wrap">
-                {recommendation}
+                {rekomendasi}
               </Typography>
             </Paper>
           </Box>