feat: Sprint 2 — Visit history, topic selector, date picker, home dashboard with stats and FAB

2026-02-18 16:04:34 +08:00
parent 5ddfa9722b
commit 419865e8cf
6 changed files with 549 additions and 22 deletions
--- a/components/ui/DatePicker.tsx
+++ b/components/ui/DatePicker.tsx
@@ -0,0 +1,99 @@
+import { View, Text, TouchableOpacity, Modal, Platform } from 'react-native';
+import { useState } from 'react';
+import { Calendar } from 'lucide-react-native';
+
+interface Props {
+  label?: string;
+  value: number | null;
+  onChange: (timestamp: number) => void;
+}
+
+export function DatePicker({ label, value, onChange }: Props) {
+  const [show, setShow] = useState(false);
+
+  // Build a simple date selector (year/month/day dropdowns)
+  const selected = value ? new Date(value * 1000) : new Date();
+  const today = new Date();
+
+  const [year, setYear] = useState(selected.getFullYear());
+  const [month, setMonth] = useState(selected.getMonth());
+  const [day, setDay] = useState(selected.getDate());
+
+  const years = Array.from({ length: 3 }, (_, i) => today.getFullYear() - 1 + i);
+  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+
+  function handleConfirm() {
+    const d = new Date(year, month, day, 12, 0, 0);
+    onChange(Math.floor(d.getTime() / 1000));
+    setShow(false);
+  }
+
+  const displayDate = value
+    ? new Date(value * 1000).toLocaleDateString('en-PH', { year: 'numeric', month: 'short', day: 'numeric' })
+    : 'Select date';
+
+  return (
+    <View className="mb-4">
+      {label && <Text className="text-charcoal font-medium mb-1">{label}</Text>}
+      <TouchableOpacity
+        onPress={() => setShow(true)}
+        className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white"
+      >
+        <Calendar size={16} color="#1A6B72" />
+        <Text className={`ml-2 flex-1 ${value ? 'text-charcoal' : 'text-gray-400'}`}>{displayDate}</Text>
+      </TouchableOpacity>
+
+      <Modal visible={show} transparent animationType="fade">
+        <TouchableOpacity className="flex-1 bg-black/50 justify-end" onPress={() => setShow(false)}>
+          <View className="bg-white rounded-t-3xl p-6">
+            <Text className="text-charcoal font-semibold text-lg mb-4 text-center">Select Date</Text>
+
+            <View className="flex-row justify-center gap-4 mb-6">
+              {/* Month */}
+              <View className="flex-1">
+                <Text className="text-gray-500 text-xs text-center mb-2">Month</Text>
+                <View className="border border-gray-200 rounded-xl overflow-hidden">
+                  {months.map((m, i) => (
+                    <TouchableOpacity key={m} onPress={() => setMonth(i)} className={`py-2 px-3 ${month === i ? 'bg-primary' : ''}`}>
+                      <Text className={`text-center text-sm ${month === i ? 'text-white font-semibold' : 'text-charcoal'}`}>{m}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              </View>
+
+              {/* Day */}
+              <View style={{ width: 60 }}>
+                <Text className="text-gray-500 text-xs text-center mb-2">Day</Text>
+                <View className="border border-gray-200 rounded-xl overflow-hidden">
+                  {days.filter((_, i) => i < 10 || Math.abs(i - (day - 1)) < 3).map((d) => (
+                    <TouchableOpacity key={d} onPress={() => setDay(d)} className={`py-2 ${day === d ? 'bg-primary' : ''}`}>
+                      <Text className={`text-center text-sm ${day === d ? 'text-white font-semibold' : 'text-charcoal'}`}>{d}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              </View>
+
+              {/* Year */}
+              <View style={{ width: 70 }}>
+                <Text className="text-gray-500 text-xs text-center mb-2">Year</Text>
+                <View className="border border-gray-200 rounded-xl overflow-hidden">
+                  {years.map((y) => (
+                    <TouchableOpacity key={y} onPress={() => setYear(y)} className={`py-3 ${year === y ? 'bg-primary' : ''}`}>
+                      <Text className={`text-center text-sm ${year === y ? 'text-white font-semibold' : 'text-charcoal'}`}>{y}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              </View>
+            </View>
+
+            <TouchableOpacity onPress={handleConfirm} className="bg-primary rounded-xl py-4">
+              <Text className="text-white text-center font-semibold text-base">Confirm</Text>
+            </TouchableOpacity>
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  );
+}