[WIP] Merge changes from dev/wattanachai into main

.gitignore

@@ -11,7 +11,8 @@ venv/
 htmlcov/
 
 # ===== Environment =====
-!.env.example
+
+.env.example
 
 # ===== Node =====
 node_modules/
@@ -33,5 +34,5 @@ npm-debug.log*
 
 reports
 
+# .gitignore
 .env
-.env.example

client/src/components/ui/ErrorAlert.jsx

@@ -1,4 +1,4 @@
-export function ErrorAlert({ title = 'เกิดข้อผิดพลาด', message, onRetry }) {
+export function ErrorAlert({ title = 'An error occurred', message, onRetry }) {
   return (
     <div
       role="alert"
@@ -11,7 +11,7 @@ export function ErrorAlert({ title = 'เกิดข้อผิดพลาด
           onClick={onRetry}
           className="mt-2 text-sm text-red-700 underline hover:no-underline focus-visible:outline-none"
         >
-          ลองใหม่อีกครั้ง
+          Try again
         </button>
       )}
     </div>

client/src/components/ui/LoadingSpinner.jsx

@@ -1,4 +1,4 @@
-export function LoadingSpinner({ message = 'กำลังโหลด...' }) {
+export function LoadingSpinner({ message = 'Loading...' }) {
   return (
     <div className="flex flex-col items-center gap-3 py-10" role="status" aria-live="polite">
       <div className="w-9 h-9 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin" />

client/src/pages/UsersPage.jsx

@@ -12,7 +12,7 @@ export function UsersPage() {
           Users
         </h1>
 
-        {loading && <LoadingSpinner message="กำลังโหลดข้อมูล..." />}
+        {loading && <LoadingSpinner message="Loading data..." />}
 
         {error && <ErrorAlert message={error} onRetry={refetch} />}
 

client/src/pages/backoffice/PatrolAreasPage.jsx

@@ -218,7 +218,7 @@ export function PatrolAreasPage() {
         <div>
           <h1 className="text-2xl font-bold text-gray-900">Patrol Areas</h1>
           <p className="mt-1 text-sm text-gray-500">
-            จัดการจุด Location ในป่า ว่าจุดไหนอยู่ตรงไหน และจุดนั้นคืออะไร
+            Manage forest location points, including where they are and what each point represents.
           </p>
         </div>
         <Button onClick={openCreateForm} className="gap-2">
@@ -264,7 +264,7 @@ export function PatrolAreasPage() {
               <input
                 value={query}
                 onChange={(event) => setQuery(event.target.value)}
-                placeholder="ค้นหาจากชื่อจุด, รหัส, sector หรือประเภท"
+                placeholder="Search by point name, ID, sector, or type"
                 className="h-10 w-full rounded-lg border border-gray-300 py-2 pl-10 pr-10 text-sm text-gray-800 outline-none transition focus:border-blue-500"
               />
               {query && (
@@ -337,7 +337,7 @@ export function PatrolAreasPage() {
                 {filteredLocations.length === 0 ? (
                   <tr>
                     <td className="px-4 py-10 text-center text-gray-500" colSpan={5}>
-                      ยังไม่พบ Location ที่ตรงกับเงื่อนไขค้นหา
+                      No locations match your search criteria.
                     </td>
                   </tr>
                 ) : (
@@ -398,7 +398,7 @@ export function PatrolAreasPage() {
         <aside className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm xl:col-span-4">
           <h2 className="mb-4 text-lg font-semibold text-gray-900">Location Details</h2>
           {!selectedLocation ? (
-            <p className="text-sm text-gray-500">เลือก Location จากตารางเพื่อดูรายละเอียด</p>
+            <p className="text-sm text-gray-500">Select a location from the table to view details.</p>
           ) : (
             <div className="space-y-4">
               <div>
@@ -477,7 +477,7 @@ export function PatrolAreasPage() {
                 {editingLocationId ? 'Update Location Point' : 'Create Location Point'}
               </h3>
               <p className="mt-1 text-sm text-gray-500">
-                ระบุว่า location จุดนี้คืออะไร อยู่ sector ไหน และพิกัดอะไร
+                Specify what this location is, which sector it belongs to, and its coordinates.
               </p>
             </div>
 
@@ -579,7 +579,7 @@ export function PatrolAreasPage() {
                   </MapContainer>
                 </div>
                 <p className="mt-2 text-xs text-gray-500">
-                  Tip: ลากหมุดเพื่อระบุตำแหน่ง หรือพิมพ์พิกัดในรูปแบบ lat, lng ได้
+                  Tip: Drag the marker to set the location, or enter coordinates in lat, lng format.
                 </p>
               </div>
 
@@ -590,7 +590,7 @@ export function PatrolAreasPage() {
                   value={formData.description}
                   onChange={(event) => setFormData({ ...formData, description: event.target.value })}
                   className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-blue-500"
-                  placeholder="รายละเอียดของจุดนี้ เช่น ข้อควรระวัง หรือวัตถุประสงค์ของจุด"
+                  placeholder="Describe this point, such as cautions or operational purpose"
                 />
               </div>
 

client/src/pages/field-ops/mockData.js

@@ -84,7 +84,7 @@ export const mapPoints = [
     eta: '45 MIN',
     position: [14.4386, 101.3724], // พิกัดโซนเขาใหญ่
     coordinates: '14.4386° N, 101.3724° E',
-    notes: 'จุดพักยามประจำทิศเหนือ มีชุดปฐมพยาบาลและวิทยุสื่อสารสำรอง'
+    notes: 'North-side guard rest point with first-aid kits and backup radios.'
   },
   {
     id: 'pt-02',
@@ -96,7 +96,7 @@ export const mapPoints = [
     eta: '1 HR 20 MIN',
     position: [14.4453, 101.3810], // พิกัดโซนเขาใหญ่
     coordinates: '14.4453° N, 101.3810° E',
-    notes: 'แหล่งน้ำธรรมชาติ ตรวจพบร่องรอยสัตว์ป่าสงวนเมื่อ 2 วันก่อน'
+    notes: 'Natural water source; signs of protected wildlife were observed two days ago.'
   },
   {
     id: 'pt-03',
@@ -108,6 +108,6 @@ export const mapPoints = [
     eta: '2 HR 45 MIN',
     position: [14.4291, 101.3619], // พิกัดโซนเขาใหญ่
     coordinates: '14.4291° N, 101.3619° E',
-    notes: 'พื้นที่ดินถล่มจากพายุสัปดาห์ก่อน ห้ามเข้าใกล้ขอบหน้าผาเด็ดขาด'
+    notes: 'Recent landslide area from last week\'s storm; avoid cliff edges at all times.'
   }
 ];