setOpen(false)} />}
);
}
function BottomNavigation({ role, t }) {
const items = visibleNavItems(role).slice(0, 5);
return (
);
}
function PreviewToggle({ viewMode, setViewMode, t }) {
return (
{previewModes.map((mode) => (
))}
);
}
function SectionHeader({ title, subtitle, action }) {
return (
{title}
{subtitle &&
{subtitle}
}
{action &&
{action}
}
);
}
function BiLabel({ th, en, inline = false }) {
return (
{th}
{en}
);
}
function DashboardCard({ label, value, unit, icon, tone = "bg-white text-goodseed-800" }) {
return (
);
}
function MiniMetric({ label, value, danger }) {
return
;
}
function windDirectionText(degrees = 0) {
const directions = ["เหนือ", "ตะวันออกเฉียงเหนือ", "ตะวันออก", "ตะวันออกเฉียงใต้", "ใต้", "ตะวันตกเฉียงใต้", "ตะวันตก", "ตะวันตกเฉียงเหนือ"];
return directions[Math.round(degrees / 45) % 8];
}
function getWeatherAdvice(weather = fallbackWeather) {
const water = weather.rainChance >= 60 || weather.rainAmount >= 5 ? ["ต้องระวัง", "มีโอกาสฝน ควรลดรอบรดน้ำ"] : weather.temperature >= 34 ? ["เหมาะ", "อากาศร้อน ควรรดน้ำช่วงเช้าหรือเย็น"] : ["เหมาะ", "รดน้ำตามแผนปกติ"];
const planting = weather.uvIndex >= 9 || weather.temperature >= 36 ? ["ต้องระวัง", "แดดแรง ควรปลูกช่วงเช้าหรือเย็น"] : ["เหมาะ", "เหมาะกับการปลูกและย้ายกล้า"];
const spray = weather.windSpeed >= 20 || weather.rainChance >= 50 ? ["ไม่เหมาะ", "หลีกเลี่ยงการพ่นปุ๋ย/พ่นยา"] : ["เหมาะ", "พ่นได้ แต่ควรติดตามลมก่อนเริ่มงาน"];
const risks = [
weather.rainAmount >= 10 || weather.rainChance >= 70 ? "เสี่ยงฝนตกหนัก" : null,
weather.windSpeed >= 20 ? "เสี่ยงลมแรง" : null,
weather.uvIndex >= 8 ? "UV สูง ระวังแดดจัด" : null,
].filter(Boolean);
return { water, planting, spray, risks: risks.length ? risks : ["ไม่มีความเสี่ยงรุนแรง"], daily: "ตรวจความชื้นดินก่อนรดน้ำ และวางงานพ่นช่วงลมนิ่ง" };
}
function RiskBadge({ status, language = "th" }) {
const cls = status === "เหมาะ" ? "bg-goodseed-100 text-goodseed-800 ring-goodseed-200" : status === "ต้องระวัง" ? "bg-amber-100 text-amber-800 ring-amber-200" : "bg-red-100 text-red-700 ring-red-200";
const label = language === "en" ? ({ "เหมาะ": "Good", "ต้องระวัง": "Caution", "ไม่เหมาะ": "Avoid" }[status] || status) : status;
return
{label};
}
function KpiCard({ label, value, unit, hint, icon, tone, danger }) {
return (
{label}
{value} {unit}
{hint}
);
}
function DashboardPanel({ id, title, action, children, className = "" }) {
return (
{title}
{action &&
{action}
}
{children}
);
}
function ProgressRow({ label, value, total, color }) {
const percent = Math.min(100, Math.round((value / total) * 100));
return (
{label}
{value.toLocaleString("th-TH")} ต้น
);
}
function MaterialTable({ viewMode }) {
const rows = [
["ปุ๋ยคอก", "1,200 กก.", "350 กก.", "850 กก."],
["ปุ๋ยเคมี 15-15-15", "500 กก.", "200 กก.", "300 กก."],
["ดินปลูก", "2.5 ตัน", "1 ตัน", "1.5 ตัน"],
["สารเคมีกำจัดแมลง", "30 ลิตร", "10 ลิตร", "20 ลิตร"],
["น้ำหมักชีวภาพ", "60 ลิตร", "25 ลิตร", "35 ลิตร"],
];
if (viewMode === "mobile") {
return (
{rows.map(([name, inStock, used, remain]) => (
{name}
นำเข้า
{inStock}
เบิกใช้
{used}
คงเหลือ
{remain}
))}
);
}
return (
{["รายการ", "นำเข้า", "เบิกใช้", "คงเหลือ"].map((head) => | {head} | )}
{rows.map((row) => {row.map((cell, index) => | {cell} | )}
)}
);
}
function MiniCalendar() {
const days = Array.from({ length: 35 }, (_, index) => index + 1);
const marked = { 5: "bg-goodseed-100 text-goodseed-800", 12: "bg-blue-100 text-blue-700", 20: "bg-goodseed-700 text-white", 24: "bg-amber-100 text-amber-800", 30: "bg-red-100 text-red-700" };
return (
{["จ", "อ", "พ", "พฤ", "ศ", "ส", "อา"].map((day) => {day})}
{days.map((day) => {day <= 31 ? day : ""})}
งานวันนี้
งานสำคัญ
นัดหมาย
ปัญหา
);
}
function DonutChart() {
return (
เสร็จแล้ว 125 (86%)
กำลังทำ 21 (14%)
ค้าง 19 (13%)
);
}
function BarChart() {
const months = [["ม.ค.", 54, 38], ["ก.พ.", 62, 42], ["มี.ค.", 69, 45], ["เม.ย.", 74, 48], ["พ.ค.", 86, 52], ["มิ.ย.", 78, 46]];
return (
{months.map(([month, income, expense]) => (
))}
);
}
function DashboardQuickActions({ role }) {
const exportDate = formatTopbarDate("th");
const actions = [
["บันทึกรายงานประจำวัน", "file", "daily-report"],
["สแกน QR", "qr", "tree-management"],
["เพิ่มงานใหม่", "check", "daily-work"],
["นำเข้าวัสดุ", "truck", "inventory"],
["เบิกใช้วัสดุ", "box", "inventory"],
["รายงานผู้จัดการ", "camera", "owner-review"],
].filter(([, , id]) => canAccess(role, id));
const canExport = ["owner", "admin", "manager"].includes(role);
return (
{actions.map(([label, icon, id]) => (
{label}
))}
{canExport && ["PDF", "Excel", "Word"].map((label) => (
))}
);
}
function DashboardTaskTable({ tasks }) {
return (
{["ลำดับ", "งานที่ต้องทำ", "แปลง", "ผู้รับผิดชอบ", "สถานะ"].map((head) => | {head} | )}
{tasks.map((task, index) => | {index + 1} | {task.duty} | {task.area} | {task.owner} | |
)}
);
}
function TaskSummaryCards({ tasks }) {
return (
{tasks.map((task, index) => (
{task.duty}
แปลง: {task.area}
ผู้รับผิดชอบ: {task.owner}
))}
);
}
function ControlCard({ label, value, unit, hint, icon, tone, href, onOpen }) {
const content = (
<>
{label}
{value} {unit}
{hint}
);
const className = "group flex h-full items-start gap-4 rounded-lg border border-goodseed-100 bg-white p-4 text-left shadow-soft transition hover:-translate-y-0.5 hover:border-goodseed-300 hover:shadow-lg";
if (href) return
{content};
return
;
}
function ControlWidget({ title, action, children, className = "", onOpen }) {
return (
{action &&
{action}
}
{children}
);
}
function SmartFarmDetailModal({ detail, onClose }) {
if (!detail) return null;
return (
Detail On Demand
{detail.title}
{detail.subtitle}
{detail.items.map((item) => (
{item.label}
{item.value}
{item.note &&
{item.note}
}
))}
{detail.href &&
เปิดหน้า Detail}
);
}
function DashboardMiniTaskList({ tasks }) {
return (
);
}
function MiniDonut({ center = "42", label = "แปลง" }) {
return (
ตรวจแล้ว 32 (76%)
ยังไม่ตรวจ 8 (19%)
มีปัญหา 2 (5%)
);
}
function OnlineTeamWidget({ onOpen, activeUsers }) {
return (
{activeUsers.slice(0, 3).map((user) => (
{user.name}
{user.activity}
))}
);
}
function Dashboard({ reports, tasks, viewMode, role, rdExperiments, authProfile }) {
const [detail, setDetail] = useState(null);
const [syncTime, setSyncTime] = useState(() => new Date());
const [pendingAccessCount, setPendingAccessCount] = useState(0);
const [activeUsers, setActiveUsers] = useState(() => authProfile ? [{
id: authProfile.id || authProfile.email,
name: profileDisplayName(authProfile),
email: authProfile.email || "",
role: roleInfo(role).label,
activity: `กำลังดู Dashboard / ${roleInfo(role).label}`,
page: "dashboard",
lastSeen: new Date().toISOString(),
}] : []);
const [presenceStatus, setPresenceStatus] = useState("mock");
const latestReport = reports[0];
const dashboardWeather = latestReport.weatherSnapshot || fallbackWeather;
const weatherAdvice = getWeatherAdvice(dashboardWeather);
const rdSummary = getRdSummary(rdExperiments);
const currentUserName = profileDisplayName(authProfile);
const syncLabel = syncTime.toLocaleTimeString("th-TH", { hour: "2-digit", minute: "2-digit" });
const todayReportCount = reports.filter((report) => report.date === latestReport.date).length;
const completed = tasks.filter((task) => task.status === "เสร็จแล้ว").length;
const doing = tasks.filter((task) => task.status === "กำลังทำ").length;
const pending = tasks.filter((task) => task.status === "รอดำเนินการ").length;
const issueTasks = tasks.filter((task) => task.status === "มีปัญหา").length;
useEffect(() => {
const timer = window.setInterval(() => setSyncTime(new Date()), 60000);
return () => window.clearInterval(timer);
}, []);
useEffect(() => {
let isActive = true;
const client = getSupabaseClient({ silent: true });
const fallbackUser = authProfile ? [{
id: authProfile.id || authProfile.email,
name: profileDisplayName(authProfile),
email: authProfile.email || "",
role: roleInfo(role).label,
activity: `กำลังดู Dashboard / ${roleInfo(role).label}`,
page: "dashboard",
lastSeen: new Date().toISOString(),
}] : [];
const loadPresence = async () => {
if (!client || !canUseBackendPresence(role)) {
if (isActive) {
setActiveUsers(fallbackUser);
setPresenceStatus(client ? "restricted" : "mock");
}
return;
}
try {
const { data, error } = await client
.from("user_presence")
.select("user_id,email,full_name,role,current_page,last_seen_at,status,updated_at,created_at")
.eq("status", "online")
.gte("last_seen_at", activePresenceCutoff(2))
.order("last_seen_at", { ascending: false });
if (error) throw error;
if (!isActive) return;
const rows = (data || []).map(normalizePresenceRow);
setActiveUsers(rows.length ? rows : fallbackUser);
setPresenceStatus("live");
} catch (error) {
console.warn("GoodSeed active users realtime load failed", error);
if (isActive) {
setActiveUsers(fallbackUser);
setPresenceStatus("setup-needed");
}
}
};
loadPresence();
if (!client || !canUseBackendPresence(role)) return () => { isActive = false; };
const channel = client
.channel("goodseed-user-presence-dashboard")
.on("postgres_changes", { event: "*", schema: "public", table: "user_presence" }, loadPresence)
.subscribe();
const timer = window.setInterval(loadPresence, 30000);
return () => {
isActive = false;
window.clearInterval(timer);
client.removeChannel?.(channel);
};
}, [authProfile?.id, authProfile?.email, role]);
useEffect(() => {
let isActive = true;
if (!isOwnerRole(role)) {
setPendingAccessCount(0);
return () => { isActive = false; };
}
const client = getSupabaseClient({ silent: true });
if (!client) return () => { isActive = false; };
client
.from("profiles")
.select("id", { count: "exact", head: true })
.in("approval_status", ["pending", "pending-approval", "pending-review"])
.neq("requested_role", "customer")
.then(({ count, error }) => {
if (!isActive || error) return;
setPendingAccessCount(count || 0);
});
return () => { isActive = false; };
}, [role]);
const smartDetails = {
trees: { title: "Tree Management", subtitle: "รายละเอียดต้นไม้ทั้งหมด เปิดดูข้อมูลลึกจากหน้า Tree Management", href: "#tree-management", items: [{ label: "จำนวนต้นไม้ปัจจุบัน", value: "3,354 ต้น", note: "รอบปลูก A-C" }, { label: "เป้าหมายหลังขยาย", value: "6,942 ต้น", note: "รวมรอบปลูก D-F" }, { label: "ข้อมูลที่จะเห็นในหน้า Detail", value: "Tree ID / อายุ / โซน / QR / ประวัติ", note: "โหลดเมื่อเข้า Tree Management" }] },
tasks: { title: "Task Management", subtitle: "รายการงานทั้งหมด ผู้รับผิดชอบ Deadline และหลักฐาน", href: "#daily-work", items: [{ label: "งานค้าง", value: "23 งาน", note: "รอดำเนินการและต้องติดตาม" }, { label: "กำลังทำ", value: `${doing} งาน`, note: "จากข้อมูลตัวอย่างวันนี้" }, { label: "มีปัญหา", value: `${issueTasks} งาน`, note: "ควรตรวจสอบจากหน้าตารางงาน" }] },
alerts: { title: "Notification Center", subtitle: "แจ้งเตือนย้อนหลัง Filter Priority และผู้รับผิดชอบ", href: "#alerts", items: alerts.map((alert) => ({ label: alert.level, value: alert.title, note: alert.detail })) },
team: { title: "Team Monitoring", subtitle: presenceStatus === "live" ? "สถานะทีมออนไลน์จาก Supabase Realtime และ last_seen จริง" : "กำลังใช้ข้อมูล session ปัจจุบันจนกว่าจะรัน supabase/user_presence.sql", href: "#people-hr", items: activeUsers.length ? activeUsers.map((user) => ({ label: user.role, value: user.name, note: user.email || user.activity })) : [{ label: "ออนไลน์", value: "0 คน", note: "ยังไม่มี session ที่ล็อกอิน" }] },
reports: { title: "Manager Reports", subtitle: "รายงานตรวจแปลงและข้อมูล QR ล่าสุด", href: "#daily-report", items: [{ label: "รายงานวันนี้", value: `${todayReportCount} ฉบับ`, note: `ล่าสุดโดย ${latestReport.reporter}` }, { label: "ปัญหาจาก QR", value: latestReport.qrIssue || "ไม่พบปัญหา", note: latestReport.treeId || latestReport.area }, { label: "รูปประกอบ", value: latestReport.photos, note: latestReport.summaryPhoto }] },
rd: { title: "Experiment & R&D", subtitle: "สรุปสั้นจากงานทดลองทั้งหมด กดเข้าเมนูเพื่อดูหน้าเต็ม", href: "#experiment-rd", items: [{ label: "จำนวนการทดลองทั้งหมด", value: `${rdSummary.total} รายการ`, note: "รองรับการทดลองหลายประเภท ไม่จำกัดแค่มันญี่ปุ่น" }, { label: "กำลังดำเนินการ", value: `${rdSummary.active} รายการ`, note: "รายการที่ยังติดตามผลอยู่" }, { label: "ผลทดลองล่าสุด", value: rdSummary.latestResult, note: `ปัญหาที่พบ: ${rdSummary.issueText}` }] },
};
const kpis = [
{ label: "แปลงทั้งหมด", value: "42", unit: "แปลง", hint: "เพิ่มขึ้น 3 จากเดือนก่อน", icon: "map", tone: "bg-goodseed-100 text-goodseed-800", href: "#plots" },
{ label: "ต้นไม้ทั้งหมด", value: "3,354", unit: "ต้น", hint: "รอบปลูก A-C / กดดู Tree Management", icon: "tree", tone: "bg-green-100 text-green-800", onOpen: () => setDetail(smartDetails.trees) },
{ label: "งานเสร็จแล้ว", value: "128", unit: "งาน", hint: "เดือนนี้ / Overview only", icon: "check", tone: "bg-blue-100 text-blue-700", href: "#daily-work" },
{ label: "งานค้าง", value: "23", unit: "งาน", hint: "กดดู Task Management", icon: "calendar", tone: "bg-amber-100 text-amber-800", onOpen: () => setDetail(smartDetails.tasks) },
{ label: "ผลการทดลอง", value: rdSummary.total, unit: "การทดลอง", hint: `กำลังดำเนินการ ${rdSummary.active} / กดเปิด R&D`, icon: "wrench", tone: "bg-violet-100 text-violet-700", href: "#experiment-rd" },
{ label: "ปัญหาสำคัญ", value: "3", unit: "รายการ", hint: "แสดงล่าสุด 3-5 รายการ", icon: "bell", tone: "bg-red-100 text-red-700", onOpen: () => setDetail(smartDetails.alerts) },
];
return (
setDetail(null)} />
หน้าหลัก / Smart Farm Control Center
สวัสดีครับ, {currentUserName}
ภาพรวมทั้งฟาร์มแบบ Real-time แสดงเฉพาะข้อมูลสำคัญ กดแต่ละ Widget เพื่อดูรายละเอียด
Weather
{Math.round(dashboardWeather.temperature)}°C
{isOwnerRole(role) && pendingAccessCount > 0 && (
มีคำขอเข้าใช้งาน Backend รออนุมัติ
มีผู้สมัครใหม่ {pendingAccessCount} รายการ กรุณาเปิด User Management เพื่ออนุมัติหรือปฏิเสธสิทธิ์
ไปหน้าอนุมัติ
)}
{kpis.map((kpi) => )}
setDetail({ title: "Farm Overview", subtitle: "พื้นที่ปลูก แหล่งน้ำ โรงเรือน และแผนขยาย", href: "#plots", items: [{ label: "แปลงทั้งหมด", value: "42 แปลง", note: "แสดงเฉพาะภาพรวมบน Dashboard" }, { label: "พื้นที่ไม้ล้อม", value: "30 ไร่", note: "รอบปลูก A-C" }, { label: "พื้นที่เกษตรผสมผสาน", value: "12 ไร่", note: "โครงข่ายกระจายน้ำและพืชเสริม" }] })}>
{[["แปลงปลูก", "32 แปลง", "map"], ["บ่อ / แหล่งน้ำ", "4 บ่อ", "leaf"], ["โรงเรือน", "3 หลัง", "building"]].map(([label, value, icon]) => (
))}
ดูรายงาน} onOpen={() => setDetail(smartDetails.reports)}>
ดูรายงานการตรวจแปลง
setDetail(smartDetails.alerts)} className="text-sm font-black text-goodseed-700">ดูทั้งหมด} onOpen={() => setDetail(smartDetails.alerts)}>
{alerts.slice(0, 4).map((alert, index) => (
))}
{latestReport.summary}
{[
["เพิ่มงาน", "check", "#daily-work"],
["สแกน QR", "qr", "#daily-report"],
["รายงานวันนี้", "file", "#daily-report"],
["วัสดุคงคลัง", "box", "#inventory"],
["ทีมออนไลน์", "users", null],
["ปฏิทินงาน", "calendar", "#responsibility"],
].map(([label, icon, href]) => href ? (
{label}
) : (
))}
0} />
เปิด Experiment & R&D
ดูทั้งหมด}>
Download Center
{["PDF", "Excel", "Word", "รูปภาพ (ZIP)"].map((label) => (
))}
);
}
function DailyReportCenter({ role }) {
const [reportRows, setReportRows] = useState([]);
const [notificationRows, setNotificationRows] = useState([]);
const [filters, setFilters] = useState({ date: "", plantingRound: "ทั้งหมด", irrigationZone: "ทั้งหมด", employee: "", status: "ทั้งหมด" });
const [status, setStatus] = useState("loading");
const canReview = isOwnerRole(role) || ["admin", "manager", "developer"].includes(role);
const loadReportCenter = async () => {
const client = getSupabaseClient({ silent: true });
if (!client || !canReview) {
setStatus("missing");
return;
}
try {
let reportQuery = client.from("daily_reports").select("*").order("updated_at", { ascending: false }).limit(80);
if (filters.date) reportQuery = reportQuery.eq("report_date", filters.date);
if (filters.plantingRound !== "ทั้งหมด") reportQuery = reportQuery.eq("planting_round", filters.plantingRound);
if (filters.irrigationZone !== "ทั้งหมด") reportQuery = reportQuery.eq("irrigation_zone", Number(filters.irrigationZone));
if (filters.status !== "ทั้งหมด") reportQuery = reportQuery.eq("status", filters.status);
if (filters.employee.trim()) reportQuery = reportQuery.ilike("employee_name", `%${filters.employee.trim()}%`);
const [{ data: reportsData, error: reportsError }, { data: notificationsData, error: notificationsError }] = await Promise.all([
reportQuery,
client.from("notifications").select("*").eq("type", "daily_report_submitted").order("created_at", { ascending: false }).limit(20),
]);
if (reportsError || notificationsError) throw reportsError || notificationsError;
setReportRows(reportsData || []);
setNotificationRows(notificationsData || []);
setStatus("ready");
} catch (error) {
console.warn("GoodSeed Report Center load failed", error);
setStatus("error");
}
};
useEffect(() => {
loadReportCenter();
}, [role, filters.date, filters.plantingRound, filters.irrigationZone, filters.employee, filters.status]);
useEffect(() => {
const client = getSupabaseClient({ silent: true });
if (!client || !canReview) return undefined;
const channel = client
.channel("goodseed-daily-report-center")
.on("postgres_changes", { event: "*", schema: "public", table: "daily_reports" }, loadReportCenter)
.on("postgres_changes", { event: "*", schema: "public", table: "notifications" }, loadReportCenter)
.subscribe();
return () => { client.removeChannel(channel); };
}, [role, canReview]);
const updateReportStatus = async (reportId, nextStatus) => {
const client = getSupabaseClient({ silent: true });
if (!client) return;
const { data: userData } = await client.auth.getUser();
const { error } = await client.from("daily_reports").update({
status: nextStatus,
reviewed_by: userData?.user?.id || null,
reviewed_at: ["approved", "need_revision", "rejected", "under_review"].includes(nextStatus) ? new Date().toISOString() : null,
updated_by: userData?.user?.id || null,
}).eq("id", reportId);
if (!error) loadReportCenter();
};
const today = todayInputValue();
const counts = {
today: reportRows.filter((report) => report.report_date === today).length,
pendingReview: reportRows.filter((report) => ["submitted", "under_review"].includes(report.status)).length,
approved: reportRows.filter((report) => report.status === "approved").length,
needRevision: reportRows.filter((report) => report.status === "need_revision").length,
history: reportRows.length,
unread: notificationRows.filter((notification) => notification.status === "unread").length,
};
if (!canReview) return null;
return (
{counts.unread} unread notification}>
{status === "error" && ยังโหลด Report Center ไม่ได้ กรุณารัน supabase/daily_report_schedule.sql เวอร์ชันล่าสุดใน Supabase SQL Editor
}
{[["รายงานวันนี้", counts.today], ["รายงานรอตรวจ", counts.pendingReview], ["อนุมัติแล้ว", counts.approved], ["ต้องแก้ไข", counts.needRevision], ["รายงานย้อนหลัง", counts.history]].map(([label, value]) => (
))}
setFilters((current) => ({ ...current, date: value }))} />
{["Report ID", "Employee", "Role", "รอบปลูก", "โซนน้ำ", "Report Date", "Submit DateTime", "Status", "Review"].map((head) => | {head} | )}
{reportRows.map((report) => (
| {report.report_code || report.id.slice(0, 8)} |
{report.employee_name || "-"} {String(report.employee_id || "").slice(0, 8)} |
{report.employee_role || "-"} |
{report.planting_round} |
{report.irrigation_zone} |
{report.report_date} |
{report.submit_datetime ? new Date(report.submit_datetime).toLocaleString("th-TH", { dateStyle: "medium", timeStyle: "short" }) : "-"} |
{dailyReportStatusLabels[report.status] || report.status} |
|
))}
{reportRows.length === 0 && ยังไม่มีรายงานตามเงื่อนไขค้นหา
}
);
}
function HomeHero() {
return (
);
}
function OrganizationGoals() {
const [active, setActive] = useState(organizationGoalImages[0]);
return (
Vision 2026}
/>
{active.title}
{active.detail}
เป้าหมายผลิตภัณฑ์ปี 2026
สร้างรายได้จากวัสดุหมุนเวียนในฟาร์ม เช่น ไบโอชา น้ำส้มควันไม้ แหนแดง ถั่วบราซิล มันญี่ปุ่น และชุดเกษตรยั่งยืน
{organizationGoalImages.map((item) => (
))}
);
}
function ContentManagementActions({ role }) {
if (!["owner", "admin", "manager"].includes(role)) return null;
return (
{["เพิ่มข่าวสาร", "แก้ไข", "ลบ", "เผยแพร่ / ซ่อน", "เพิ่มรูปภาพ", "เพิ่มลิงก์", "ตั้งวันที่เผยแพร่"].map((label) => (
))}
);
}
function NewsPromotionPage({ role }) {
const editable = ["owner", "admin", "manager"].includes(role);
return (
);
}
function CompanyProfilePage({ role }) {
const editable = ["owner", "admin", "manager"].includes(role);
return (
About Us / Company Profile
GOODSEED FARM
ฟาร์มไม้ล้อมและเกษตรผสมผสานสมัยใหม่ เพื่อเกษตรยั่งยืน
{["Premium Nursery", "Modern Farm", "Sustainable Agriculture"].map((item) => (
{item}
))}
}
subtitle="ตัวตนของฟาร์มไม้ล้อมที่เริ่มจากการวางระบบจริงในพื้นที่จริง"
action={editable ? : Published Profile}
/>
GOODSEED Farm คือฟาร์มไม้ล้อมและเกษตรผสมผสาน ตั้งอยู่ที่อำเภอโคกเจริญ จังหวัดลพบุรี เริ่มต้นในปี 2026 มุ่งเน้นการพัฒนาไม้ล้อมคุณภาพสูง ควบคู่กับการจัดการดิน น้ำ และระบบรากอย่างเป็นระบบ
{[
{ title: "วิสัยทัศน์", en: "Vision", icon: "leaf", text: "สร้างฟาร์มไม้ล้อมมาตรฐานสูง ควบคู่กับเกษตรยั่งยืน ฟื้นฟูดิน และใช้ทรัพยากรในฟาร์มให้เกิดประโยชน์สูงสุด" },
{ title: "ภารกิจ", en: "Mission", icon: "check", text: "ปลูกและดูแลไม้ล้อมให้ได้คุณภาพ ส่งมอบข้อมูลตรวจสอบย้อนกลับ พัฒนาระบบ QR และยกระดับฟาร์มสู่ตลาดในประเทศและส่งออก" },
].map((item) => (
{item.title}
{item.en}
{item.text}
))}
ฟาร์มของเราวางผังการปลูกเป็นรอบและโซนอย่างชัดเจน เพื่อให้สามารถบริหารจัดการ ตรวจสอบ และขยายกำลังการผลิตได้อย่างเป็นระบบ
{aboutMasterPlans.map((plan) => (
{plan.title}
Planting Round / Blueprint Zone
))}
{[aboutImages.treesLandscape, aboutImages.forestTrees].map((src, index) => (
))}
เราคัดเลือกและดูแลไม้ล้อมตั้งแต่ระยะเริ่มต้น เพื่อให้ได้ต้นไม้ที่แข็งแรง ระบบรากดี ลำต้นสมบูรณ์ และพร้อมสำหรับงานภูมิทัศน์ โครงการจัดสวน และการพัฒนาสู่ตลาดส่งออกในอนาคต
{landscapeTreeTypes.map((tree) => (
{tree}
))}
}
subtitle="ฟื้นฟูดิน ลดสารเคมี และใช้ระบบน้ำเพื่อให้ฟาร์มเติบโตอย่างมั่นคง"
/>
GOODSEED Farm ให้ความสำคัญกับการฟื้นฟูดิน ลดการใช้สารเคมี ใช้ระบบน้ำ โครงข่ายกระจายน้ำภายในฟาร์ม พืชคลุมดิน และการจัดการฟาร์มแบบยั่งยืน เพื่อให้การผลิตไม้ล้อมมีคุณภาพทั้งต้นไม้ ดิน น้ำ และระบบนิเวศรอบฟาร์ม
{["ลดการใช้สารเคมี", "ฟื้นฟูดินอินทรีย์", "ระบบน้ำและโครงข่ายกระจายน้ำ", "พืชคลุมดินและหมุนเวียนทรัพยากร"].map((item) => (
{item}
))}
{[aboutImages.sustainable, aboutImages.farmGoals].map((src) => (
))}
{supportingProductNames.map((name) => (
{name}
ผลิตภัณฑ์เสริมจากระบบหมุนเวียนทรัพยากรของฟาร์ม
))}
“ต้นไม้ที่แข็งแรง เริ่มต้นจากรากฐานที่ดี และคุณภาพที่แท้จริง ต้องเติบโตอย่างยั่งยืนในทุกขั้นตอน”
GOODSEED Farm
);
}
function FarmMapGallery() {
const [active, setActive] = useState(farmMapImages[0]);
return (
GoodSeed Farm}
/>
{active.title}
{active.detail}
GoodSeed Farm
ต้นไม้รวมปัจจุบัน 3,354 ต้น จาก 129 แถว
{farmMapImages.map((item) => (
))}
);
}
function PlantingTreeSummary() {
const totalTrees = plantingRoundSummary.reduce((sum, round) => sum + round.total, 0);
const totalRows = plantingRoundSummary.reduce((sum, round) => sum + round.rows, 0);
return (
{plantingRoundSummary.map((round) => (
{round.round}
{round.ranges.join(", ")} | {round.rows} แถว
{round.total.toLocaleString("th-TH")} ต้น
{round.species.map((item) => (
{item.name}
{item.count.toLocaleString("th-TH")} ต้น
แถว {item.rows}
))}
))}
สรุปจำนวนตามชนิดต้นไม้ทั้งหมด
{totalTreeBySpecies.map((item) => (
{item.name}
{item.count.toLocaleString("th-TH")} ต้น
))}
);
}
function ReportForm({ onSave, role = "owner", authProfile, language = "th" }) {
const [weatherData, setWeatherData] = useState(fallbackWeather);
const [weatherLoading, setWeatherLoading] = useState(true);
const [attachmentReport, setAttachmentReport] = useState(null);
const [ownerSummaryNotice, setOwnerSummaryNotice] = useState("");
const [ownerSummarySaving, setOwnerSummarySaving] = useState(false);
const [form, setForm] = useState({
date: "2026-05-24", reporter: "คุณหวาน", weather: "แดดจัด มีลมอ่อน", area: "แปลง A1", work: "รดน้ำ, ตรวจระบบน้ำ, ตรวจโรคแมลง", issue: "พบเพลี้ยอ่อน 2 จุด", normal: "1232", abnormal: "18", workType: "Tree Inspection", workStatus: "Done", plotId: "A1", rowId: "B17", rowsInspected: "36", treesPlanted: "220", laborCount: "5", hoursWorked: "8", materialUsed: "ปุ๋ย GS-03", materialQty: "12", dailyCost: "6800", progressPercent: "88", growthRate: "8.4", survivalRate: "98.6", photoEvidence: "ภาพงาน 6 รูป", water: "ให้น้ำครบทุกโซน", fertilizer: "ใส่ปุ๋ย GS-03 เสร็จ 78%", disease: "เพลี้ยอ่อนเล็กน้อย", experiment: "ต้นไม้กลุ่มทดลองโตเฉลี่ย +8.4%", photos: "ภาพแปลง 8 รูป", summary: "แปลง A1 โดยรวมปกติ ต้องติดตามเพลี้ยอ่อน", summaryPhoto: "ภาพสรุป 2 รูป", qrType: "QR ต้นไม้", treeId: "TREE-A1-00482", plotZone: "A1 / Zone 1", treeSpecies: "จามจุรีทอง", treeStatus: "ต้องติดตาม", qrIssue: "พบเพลี้ยอ่อนและใบเหลือง", qrPhoto: "ภาพ QR และใบ 3 รูป", qrNote: "ติดตามซ้ำใน 24 ชั่วโมง", soilCondition: "ดินชื้น", standingWater: "ไม่มีน้ำขัง", fieldWeatherNote: "ลมอ่อน เหมาะกับงานตรวจแปลงช่วงเช้า", weatherPhoto: "ภาพสภาพดิน 2 รูป",
});
const [saved, setSaved] = useState(false);
const update = (key, value) => setForm((current) => ({ ...current, [key]: value }));
const ensureAttachmentReport = async () => {
const client = getSupabaseClient({ silent: true });
if (!client) throw new Error("ยังไม่พบ Supabase env จึงอัปโหลดไฟล์จริงไม่ได้");
const report = await ensureDailyReportForAttachments(client, form, authProfile, role);
setAttachmentReport(report);
return { client, report };
};
const generateOwnerSummary = () => {
const lines = [
`วันที่: ${form.date}`,
`ผู้รายงาน: ${form.reporter}`,
`พื้นที่: ${form.area}`,
`งานวันนี้: ${form.work}`,
`ปัญหา: ${form.issue || "ไม่มี"}`,
`สภาพแปลง: ต้นไม้ปกติ ${form.normal} ต้น / ผิดปกติ ${form.abnormal} ต้น`,
];
update("summary", lines.join("\n"));
setOwnerSummaryNotice("สร้างสรุปเจ้าของฟาร์มจากข้อมูลรายงานแล้ว สามารถแก้ไขข้อความก่อน Submit to Owner ได้");
};
const submitAttachmentsToOwner = async () => {
setOwnerSummarySaving(true);
setOwnerSummaryNotice("");
try {
const { client, report } = await ensureAttachmentReport();
const { data: userData } = await client.auth.getUser();
const userId = userData?.user?.id || authProfile?.id;
const submitTime = new Date().toISOString();
const { error: reportError } = await client
.from("daily_reports")
.update({
status: "submitted",
submit_datetime: submitTime,
submitted_by: userId,
submitted_name: form.reporter || authProfile?.fullName || authProfile?.email || "",
submitted_role: roleInfo(role).label || role,
completed_summary: form.summary || "",
unfinished_or_problem_summary: form.issue || "",
updated_by: userId,
})
.eq("id", report.id);
if (reportError) throw reportError;
await client
.from("daily_report_attachments")
.update({ status: "submitted" })
.eq("report_id", report.id)
.eq("section_name", "owner-summary");
await client.from("notifications").insert({
type: "daily_report_owner_summary",
title: "Owner Summary Submitted",
message: `${form.reporter || "พนักงาน"} ส่งสรุปรายงานประจำวันพร้อมไฟล์แนบให้ Owner`,
target_role: "owner",
related_table: "daily_reports",
related_id: report.id,
payload: { report_id: report.id, report_date: form.date, has_attachments: true, section_name: "owner-summary" },
created_by: userId,
});
setAttachmentReport((current) => ({ ...(current || report), status: "submitted", submit_datetime: submitTime }));
setOwnerSummaryNotice("ส่งสรุปและไฟล์แนบเข้า Owner Dashboard แล้ว");
} catch (error) {
console.warn("GoodSeed owner summary submit failed", error);
setOwnerSummaryNotice(`ส่งให้ Owner ไม่สำเร็จ: ${supabaseAuthMessage(error)}`);
} finally {
setOwnerSummarySaving(false);
}
};
useEffect(() => {
let active = true;
const url = `https://api.open-meteo.com/v1/forecast?latitude=${farmWeatherLocation.latitude}&longitude=${farmWeatherLocation.longitude}¤t=temperature_2m,relative_humidity_2m,precipitation,rain,cloud_cover,pressure_msl,wind_speed_10m,wind_direction_10m,uv_index&daily=temperature_2m_max,temperature_2m_min,precipitation_probability_max,precipitation_sum,uv_index_max&timezone=Asia%2FBangkok`;
fetch(url)
.then((response) => response.json())
.then((data) => {
if (!active) return;
const current = data.current || {};
const daily = data.daily || {};
const forecastRows = (daily.time || []).slice(0, 7).map((date, index) => {
const rainChance = daily.precipitation_probability_max?.[index] ?? fallbackWeather.rainChance;
const maxTemp = daily.temperature_2m_max?.[index] ?? fallbackWeather.maxTemp;
const minTemp = daily.temperature_2m_min?.[index] ?? fallbackWeather.minTemp;
const uvIndex = daily.uv_index_max?.[index] ?? fallbackWeather.uvIndex;
const labelDate = new Date(`${date}T00:00:00+07:00`);
return {
date,
label: labelDate.toLocaleDateString("th-TH", { weekday: "short", day: "numeric", month: "short" }),
rainChance,
maxTemp,
minTemp,
windSpeed: current.wind_speed_10m ?? fallbackWeather.windSpeed,
humidity: current.relative_humidity_2m ?? fallbackWeather.humidity,
uvIndex,
advice: rainChance >= 60 ? "เตรียมแผนลดน้ำและเลี่ยงงานพ่น" : uvIndex >= 8 || maxTemp >= 35 ? "จัดงานกลางแจ้งช่วงเช้าหรือเย็น" : "ทำงานฟาร์มได้ตามแผน",
};
});
const nextWeather = {
temperature: current.temperature_2m ?? fallbackWeather.temperature,
maxTemp: daily.temperature_2m_max?.[0] ?? fallbackWeather.maxTemp,
minTemp: daily.temperature_2m_min?.[0] ?? fallbackWeather.minTemp,
humidity: current.relative_humidity_2m ?? fallbackWeather.humidity,
rainChance: daily.precipitation_probability_max?.[0] ?? fallbackWeather.rainChance,
rainAmount: daily.precipitation_sum?.[0] ?? current.rain ?? fallbackWeather.rainAmount,
windSpeed: current.wind_speed_10m ?? fallbackWeather.windSpeed,
windDirection: windDirectionText(current.wind_direction_10m),
uvIndex: current.uv_index ?? daily.uv_index_max?.[0] ?? fallbackWeather.uvIndex,
pressure: current.pressure_msl ?? fallbackWeather.pressure,
cloudCover: current.cloud_cover ?? fallbackWeather.cloudCover,
condition: (current.cloud_cover ?? 0) > 70 ? "เมฆมาก" : (current.rain ?? 0) > 0 ? "มีฝน" : "มีเมฆบางส่วน",
updatedAt: current.time ? new Date(current.time).toLocaleString("th-TH", { dateStyle: "medium", timeStyle: "short" }) : fallbackWeather.updatedAt,
forecastRows: forecastRows.length ? forecastRows : createFallbackForecastRows(fallbackWeather),
};
setWeatherData(nextWeather);
addWeatherHistoryRecord(nextWeather);
})
.catch(() => {
const nextWeather = { ...fallbackWeather, forecastRows: createFallbackForecastRows(fallbackWeather) };
setWeatherData(nextWeather);
addWeatherHistoryRecord(nextWeather);
})
.finally(() => active && setWeatherLoading(false));
return () => { active = false; };
}, []);
const submit = (event) => {
event.preventDefault();
const numericFields = ["normal", "abnormal", "rowsInspected", "treesPlanted", "laborCount", "hoursWorked", "materialQty", "dailyCost", "progressPercent", "growthRate", "survivalRate"];
const payload = numericFields.reduce((current, key) => ({ ...current, [key]: Number(form[key]) || 0 }), { ...form });
onSave({ ...payload, weatherSnapshot: weatherData, id: Date.now(), createdAt: new Date().toLocaleTimeString("th-TH", { hour: "2-digit", minute: "2-digit" }) + " น." });
setSaved(true);
window.location.hash = "dashboard";
};
return (