103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import MobileMockup from './MobileMockup.tsx';
|
|
import { Screen } from '../types/common.ts';
|
|
import { MobileIcon } from './icons/Icons.tsx';
|
|
import { useAppContext } from '../context/AppContext.tsx';
|
|
import RoleSection from './mobile/shared/RoleSection.tsx';
|
|
import MockupContainer from './mobile/shared/MockupContainer.tsx';
|
|
|
|
const MobileAppPage: React.FC = () => {
|
|
const {
|
|
kpis,
|
|
alerts,
|
|
coopZones,
|
|
behaviorAnomalies,
|
|
weightStats,
|
|
manualWeighingData,
|
|
feedingEvents,
|
|
multiCoopSummaryData,
|
|
} = useAppContext();
|
|
|
|
const managerScreens: { title: string; screen: Screen }[] = [
|
|
{ title: 'Ringkasan Eksekutif', screen: 'managerDashboard' },
|
|
{ title: 'Perbandingan Bobot Kandang', screen: 'multiCoopWeight' },
|
|
{ title: 'Data Timbangan Manual', screen: 'manualWeighing' },
|
|
];
|
|
|
|
const operatorScreens: { title: string; screen: Screen }[] = [
|
|
{ title: 'Dasbor & Notifikasi', screen: 'home' },
|
|
{ title: 'Jadwal Pakan Hari Ini', screen: 'feedScheduling' },
|
|
{ title: 'Detail Penanganan Mortalitas', screen: 'mortalityDetail' },
|
|
];
|
|
|
|
const vetScreens: { title: string; screen: Screen }[] = [
|
|
{ title: 'Dasbor Kesehatan Hewan', screen: 'vetHealthDashboard' },
|
|
{ title: 'Semua Notifikasi', screen: 'alerts' },
|
|
{ title: 'Detail Kepadatan', screen: 'overcrowdingDetail' },
|
|
];
|
|
|
|
const commonProps = {
|
|
kpis,
|
|
alerts,
|
|
coopZones,
|
|
behaviorAnomalies,
|
|
weightStats,
|
|
manualWeighingData,
|
|
feedingEvents,
|
|
multiCoopSummaryData,
|
|
};
|
|
|
|
return (
|
|
<main className="px-4 sm:px-6 lg:px-8 pb-8 bg-gray-50">
|
|
<div className="flex items-center mb-8">
|
|
<MobileIcon className="text-3xl text-red-600 mr-4" />
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-800">Desain & Prototipe Aplikasi Mobile</h1>
|
|
<p className="mt-1 text-gray-600">
|
|
Visualisasi alur pengguna dan antarmuka untuk setiap peran di aplikasi pendamping
|
|
mobile.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<RoleSection
|
|
title="Manajer Peternakan"
|
|
icon={<i className="fa-solid fa-user-tie"></i>}
|
|
borderColor="border-red-500"
|
|
>
|
|
{managerScreens.map(({ title, screen }) => (
|
|
<MockupContainer key={screen} title={title}>
|
|
<MobileMockup {...commonProps} initialScreen={screen} />
|
|
</MockupContainer>
|
|
))}
|
|
</RoleSection>
|
|
|
|
<RoleSection
|
|
title="Operator Kandang"
|
|
icon={<i className="fa-solid fa-hard-hat"></i>}
|
|
borderColor="border-blue-500"
|
|
>
|
|
{operatorScreens.map(({ title, screen }) => (
|
|
<MockupContainer key={screen} title={title}>
|
|
<MobileMockup {...commonProps} initialScreen={screen} />
|
|
</MockupContainer>
|
|
))}
|
|
</RoleSection>
|
|
|
|
<RoleSection
|
|
title="Dokter Hewan"
|
|
icon={<i className="fa-solid fa-user-md"></i>}
|
|
borderColor="border-green-500"
|
|
>
|
|
{vetScreens.map(({ title, screen }) => (
|
|
<MockupContainer key={screen} title={title}>
|
|
<MobileMockup {...commonProps} initialScreen={screen} />
|
|
</MockupContainer>
|
|
))}
|
|
</RoleSection>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default MobileAppPage;
|