From e6c5d3bb08728c540cc35f0f7f28fbfa80ae0bdb Mon Sep 17 00:00:00 2001
From: "Sven (AAMOS AI)" <sven@wavult.com>
Date: Fri, 14 Aug 2026 01:47:33 +0700
Subject: [PATCH] =?UTF-8?q?feat(mobile):=20veckoplan-sk=C3=A4rm=20scaffold?=
 =?UTF-8?q?=20(m=C3=A5nadsheader=20+=20veckostrip=20+=20dagsvy)=20+=20flik?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/mobile/src/app/(tabs)/_layout.tsx |   7 ++
 apps/mobile/src/app/(tabs)/plan.tsx    | 133 +++++++++++++++++++++++++
 2 files changed, 140 insertions(+)
 create mode 100644 apps/mobile/src/app/(tabs)/plan.tsx

diff --git a/apps/mobile/src/app/(tabs)/_layout.tsx b/apps/mobile/src/app/(tabs)/_layout.tsx
index e24bf2a..ce6bc76 100644
--- a/apps/mobile/src/app/(tabs)/_layout.tsx
+++ b/apps/mobile/src/app/(tabs)/_layout.tsx
@@ -86,6 +86,13 @@ export default function TabsLayout() {
           tabBarIcon: ({ focused }) => <TabIcon glyph="📊" focused={focused} />,
         }}
       />
+      <Tabs.Screen
+        name="plan"
+        options={{
+          title: t("tabs.plan"),
+          tabBarIcon: ({ focused }) => <TabIcon glyph="📅" focused={focused} />,
+        }}
+      />
       <Tabs.Screen
         name="home"
         options={{
diff --git a/apps/mobile/src/app/(tabs)/plan.tsx b/apps/mobile/src/app/(tabs)/plan.tsx
new file mode 100644
index 0000000..4d73829
--- /dev/null
+++ b/apps/mobile/src/app/(tabs)/plan.tsx
@@ -0,0 +1,133 @@
+import { useMemo, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { getLanguageTag, t } from "@/lib/i18n";
+import { colors, radius, spacing } from "@/lib/theme";
+import { EmptyState, Screen, Small, Title } from "@/components/ui";
+
+/** Veckoplanerare (spec §25): dagsvy + veckostrip. Data kopplas in i nästa steg. */
+
+/** Lokalt datum YYYY-MM-DD (undviker UTC-skift från toISOString). */
+function toKey(d: Date): string {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+function addDays(d: Date, n: number): Date {
+  const copy = new Date(d);
+  copy.setDate(copy.getDate() + n);
+  return copy;
+}
+
+/** Måndag som veckostart. */
+function startOfWeekMonday(d: Date): Date {
+  const copy = new Date(d);
+  const dow = (copy.getDay() + 6) % 7; // 0 = måndag
+  copy.setDate(copy.getDate() - dow);
+  copy.setHours(0, 0, 0, 0);
+  return copy;
+}
+
+function cap(s: string): string {
+  return s.length ? s[0]!.toUpperCase() + s.slice(1) : s;
+}
+
+export default function PlanScreen() {
+  const locale = getLanguageTag();
+  const [selectedKey, setSelectedKey] = useState<string>(() => toKey(new Date()));
+  const todayKey = toKey(new Date());
+
+  const selected = useMemo(() => new Date(`${selectedKey}T00:00:00`), [selectedKey]);
+  const weekDays = useMemo(() => {
+    const monday = startOfWeekMonday(selected);
+    return Array.from({ length: 7 }, (_, i) => addDays(monday, i));
+  }, [selected]);
+
+  const monthLabel = cap(
+    new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(selected),
+  );
+  const dayHeader = cap(
+    new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long" }).format(
+      selected,
+    ),
+  );
+  const weekdayShort = new Intl.DateTimeFormat(locale, { weekday: "short" });
+
+  return (
+    <Screen>
+      <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+        <Pressable onPress={() => setSelectedKey(toKey(addDays(selected, -7)))} hitSlop={8}>
+          <Text style={{ fontSize: 22, color: colors.textMuted, paddingHorizontal: spacing.sm }}>
+            ‹
+          </Text>
+        </Pressable>
+        <Title>{monthLabel}</Title>
+        <Pressable onPress={() => setSelectedKey(toKey(addDays(selected, 7)))} hitSlop={8}>
+          <Text style={{ fontSize: 22, color: colors.textMuted, paddingHorizontal: spacing.sm }}>
+            ›
+          </Text>
+        </Pressable>
+      </View>
+
+      <Pressable
+        onPress={() => setSelectedKey(todayKey)}
+        style={{ alignSelf: "flex-start", paddingVertical: spacing.xs }}
+      >
+        <Text style={{ color: colors.primary, fontSize: 13, fontWeight: "600" }}>
+          {t("plan.today")}
+        </Text>
+      </Pressable>
+
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginVertical: spacing.sm,
+        }}
+      >
+        {weekDays.map((d) => {
+          const key = toKey(d);
+          const isSelected = key === selectedKey;
+          const isToday = key === todayKey;
+          return (
+            <Pressable
+              key={key}
+              onPress={() => setSelectedKey(key)}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isSelected }}
+              style={{
+                flex: 1,
+                alignItems: "center",
+                paddingVertical: spacing.xs,
+                marginHorizontal: 2,
+                borderRadius: radius.md,
+                backgroundColor: isSelected
+                  ? colors.primary
+                  : isToday
+                    ? colors.primarySoft
+                    : "transparent",
+              }}
+            >
+              <Text style={{ fontSize: 12, color: isSelected ? colors.surface : colors.textMuted }}>
+                {cap(weekdayShort.format(d))}
+              </Text>
+              <Text
+                style={{
+                  fontSize: 16,
+                  fontWeight: isSelected || isToday ? "700" : "500",
+                  color: isSelected ? colors.surface : colors.text,
+                }}
+              >
+                {d.getDate()}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+
+      <Small>{dayHeader}</Small>
+      <EmptyState text={t("plan.emptyDay")} />
+    </Screen>
+  );
+}