@imksh/create 1.0.24 → 1.0.26

package/templates/production-fullstack/mobile/src/components/ui/navigation/ProgressStepper.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { View } from "react-native";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import { Ionicons } from "@expo/vector-icons";
+import { Txt } from "../../common/Typography";
+
+export interface ProgressStepperProps {
+  steps: string[];
+  currentStep: number;
+}
+
+export default function ProgressStepper({ steps, currentStep }: ProgressStepperProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", width: "100%", paddingHorizontal: 16 }}>
+      {steps.map((step, index) => {
+        const isCompleted = index < currentStep;
+        const isActive = index === currentStep;
+        
+        return (
+          <React.Fragment key={index}>
+            <View style={{ alignItems: "center", width: 40 }}>
+              <View
+                style={{
+                  width: 32,
+                  height: 32,
+                  borderRadius: 16,
+                  backgroundColor: isCompleted ? theme.success : isActive ? theme.primary : theme.base300,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  marginBottom: 8,
+                }}
+              >
+                {isCompleted ? (
+                  <Ionicons name="checkmark" size={16} color="#fff" />
+                ) : (
+                  <Txt color={isActive ? theme.primaryContent : theme.secondary} weight="bold">
+                    {index + 1}
+                  </Txt>
+                )}
+              </View>
+              <Txt color={isActive ? theme.primary : theme.secondary} variant="xs" align="center">
+                {step}
+              </Txt>
+            </View>
+            
+            {index < steps.length - 1 && (
+              <View
+                style={{
+                  flex: 1,
+                  height: 2,
+                  backgroundColor: index < currentStep ? theme.success : theme.base300,
+                  marginHorizontal: 4,
+                  marginTop: -20,
+                }}
+              />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </View>
+  );
+}

package/templates/production-fullstack/mobile/src/components/ui/navigation/Tabs.tsx

@@ -0,0 +1,173 @@
+import React, { useState } from "react";
+import { View, TouchableOpacity, ScrollView, LayoutChangeEvent } from "react-native";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../../constants/Colors";
+import { Txt } from "../../common/Typography";
+import Animated, { useAnimatedStyle, withTiming, useSharedValue, Easing } from "react-native-reanimated";
+
+export interface TabItem {
+  id: string;
+  label: string;
+}
+
+export type TabsSize = "xs" | "sm" | "base" | "md" | "lg";
+
+export interface TabsProps {
+  tabs: TabItem[];
+  activeTab: string;
+  onChange: (id: string) => void;
+  variant?: "button" | "underline";
+  scrollable?: boolean;
+  size?: TabsSize;
+}
+
+export default function Tabs({
+  tabs,
+  activeTab,
+  onChange,
+  variant = "underline",
+  scrollable = false,
+  size = "base",
+}: TabsProps) {
+  const { colorScheme } = useColorScheme();
+  const theme = Colors[colorScheme ?? "light"];
+
+  const getSizeStyles = (): {
+    py: number;
+    fontSize: number;
+  } => {
+    switch (size) {
+      case "xs":
+        return { py: variant === "button" ? 5 : 6, fontSize: 11 };
+      case "sm":
+        return { py: variant === "button" ? 7 : 8, fontSize: 12 };
+      case "base":
+        return { py: variant === "button" ? 9 : 10, fontSize: 14 };
+      case "md":
+        return { py: variant === "button" ? 11 : 12, fontSize: 15 };
+      case "lg":
+        return { py: variant === "button" ? 13 : 14, fontSize: 17 };
+      default:
+        return { py: variant === "button" ? 9 : 10, fontSize: 14 };
+    }
+  };
+
+  const sStyles = getSizeStyles();
+
+  const [tabWidths, setTabWidths] = useState<{ [key: string]: number }>({});
+  const [tabXs, setTabXs] = useState<{ [key: string]: number }>({});
+
+  const indicatorWidth = useSharedValue(0);
+  const indicatorPosition = useSharedValue(0);
+
+  React.useEffect(() => {
+    if (tabWidths[activeTab] !== undefined && tabXs[activeTab] !== undefined) {
+      const config = { duration: 250, easing: Easing.out(Easing.cubic) };
+      indicatorWidth.value = withTiming(tabWidths[activeTab], config);
+      indicatorPosition.value = withTiming(tabXs[activeTab], config);
+    }
+     
+  }, [activeTab, tabWidths, tabXs]);
+
+  const indicatorStyle = useAnimatedStyle(() => {
+    if (variant === "underline") {
+      return {
+        position: "absolute",
+        bottom: 0,
+        height: 2,
+        backgroundColor: theme.primary,
+        width: indicatorWidth.value,
+        transform: [{ translateX: indicatorPosition.value }],
+      };
+    } else {
+      return {
+        position: "absolute",
+        top: 4,
+        bottom: 4,
+        borderRadius: 12, // matched to rounded-xl in login
+        backgroundColor: theme.primary,
+        width: indicatorWidth.value,
+        transform: [{ translateX: indicatorPosition.value }],
+      };
+    }
+  });
+
+  const handleLayout = (id: string, e: LayoutChangeEvent) => {
+    const { width, x } = e.nativeEvent.layout;
+    setTabWidths((prev) => ({ ...prev, [id]: width }));
+    setTabXs((prev) => ({ ...prev, [id]: x }));
+  };
+
+  const content = (
+    <View
+      style={{
+        flexDirection: "row",
+        position: "relative",
+        ...(variant === "button"
+          ? {
+              backgroundColor: theme.base300 + "80", // like bg-base-300/50
+              borderRadius: 16, // rounded-2xl
+              padding: 4, // p-1
+              borderWidth: 1,
+              borderColor: theme.base300,
+            }
+          : {
+              borderBottomWidth: 1,
+              borderBottomColor: theme.base300,
+            }),
+      }}
+    >
+      <Animated.View style={indicatorStyle} />
+
+      {tabs.map((tab) => {
+        const isActive = activeTab === tab.id;
+        return (
+          <TouchableOpacity
+            key={tab.id}
+            onPress={() => onChange(tab.id)}
+            onLayout={(e) => handleLayout(tab.id, e)}
+            style={{
+              paddingVertical: sStyles.py,
+              paddingHorizontal: 16,
+              flex: scrollable ? undefined : 1,
+              alignItems: "center",
+              justifyContent: "center",
+              zIndex: 1,
+            }}
+          >
+            <Txt
+              variant="md"
+              style={{
+                fontSize: sStyles.fontSize,
+                fontWeight: isActive ? "600" : "500",
+                color:
+                  variant === "button" && isActive
+                    ? theme.primaryContent
+                    : isActive
+                    ? theme.primary
+                    : theme.baseContent,
+                opacity: !isActive && variant === "button" ? 0.7 : 1,
+              }}
+            >
+              {tab.label}
+            </Txt>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+
+  if (scrollable) {
+    return (
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ flexGrow: 1 }}
+      >
+        {content}
+      </ScrollView>
+    );
+  }
+
+  return content;
+}

package/templates/production-fullstack/mobile/src/config/sidebar.config.ts

@@ -0,0 +1,72 @@
+export interface SidebarMenuItem {
+  icon: string;
+  label: string;
+  route: string;
+}
+
+export const sidebarConfig: Record<string, SidebarMenuItem[]> = {
+  owner: [
+    { icon: "home-outline", label: "Dashboard", route: "/(owner)" },
+    {
+      icon: "business-outline",
+      label: "Properties",
+      route: "/(owner)/properties",
+    },
+    { icon: "card-outline", label: "Payments", route: "/(owner)/payments" },
+    { icon: "people-outline", label: "Tenants", route: "/(owner)/tenant" },
+    {
+      icon: "clipboard-outline",
+      label: "Requests",
+      route: "/(owner)/requests",
+    },
+    {
+      icon: "construct-outline",
+      label: "Maintenance",
+      route: "/(owner)/maintenance",
+    },
+    {
+      icon: "flask-outline",
+      label: "Test Notifications",
+      route: "/(owner)/test-notifications",
+    },
+  ],
+  tenant: [
+    
+    {
+      icon: "business-outline",
+      label: "My Units",
+      route: "/(tenant)/my-units",
+    },
+    { icon: "search-outline", label: "Explore", route: "/(tenant)/explore" },
+    { icon: "card-outline", label: "Payments", route: "/(tenant)/payments" },
+    {
+      icon: "construct-outline",
+      label: "Maintenance",
+      route: "/(tenant)/maintenance",
+    },
+    {
+      icon: "document-text-outline",
+      label: "Documents",
+      route: "/(tenant)/documents",
+    },
+    {
+      icon: "chatbubble-outline",
+      label: "Messages",
+      route: "/(tenant)/messages",
+    },
+    {
+      icon: "notifications-outline",
+      label: "Notifications",
+      route: "/(tenant)/notifications",
+    },
+    {
+      icon: "flask-outline",
+      label: "Test Notifications",
+      route: "/(tenant)/test-notifications",
+    },
+  ],
+  default: [
+    { icon: "home-outline", label: "Dashboard", route: "/" },
+    { icon: "person-outline", label: "Profile", route: "/profile" },
+  ],
+};

package/templates/production-fullstack/mobile/src/config/tabNavigation.ts

@@ -0,0 +1,64 @@
+import { Ionicons } from "@expo/vector-icons";
+
+export interface TabConfig {
+  name: string;
+  title: string;
+  baseIcon: keyof typeof Ionicons.glyphMap;
+}
+
+export const tabNavigationConfig: TabConfig[] = [
+  {
+    name: "index",
+    title: "Home",
+    baseIcon: "home",
+  },
+  {
+    name: "explore",
+    title: "Explore",
+    baseIcon: "compass",
+  },
+  {
+    name: "payments",
+    title: "Payments",
+    baseIcon: "wallet",
+  },
+  {
+    name: "notifications",
+    title: "Notifications",
+    baseIcon: "notifications",
+  },
+  {
+    name: "profile",
+    title: "Profile",
+    baseIcon: "person-circle",
+  },
+  {
+    name: "properties",
+    title: "Properties",
+    baseIcon: "business",
+  },
+  {
+    name: "tenant",
+    title: "Tenant",
+    baseIcon: "people",
+  },
+  {
+    name: "users",
+    title: "Users",
+    baseIcon: "people",
+  },
+  {
+    name: "requests",
+    title: "Requests",
+    baseIcon: "clipboard",
+  },
+  {
+    name: "more",
+    title: "More",
+    baseIcon: "ellipsis-horizontal",
+  },
+];
+
+export const getTabConfig = (routeName: string) => {
+  return tabNavigationConfig.find((tab) => tab.name === routeName);
+};

package/templates/production-fullstack/mobile/src/constants/Colors.ts

@@ -0,0 +1,71 @@
+export const Colors = {
+  light: {
+    // Surfaces
+    base100: "#FFFFFF",
+    base200: "#F8FAFC",
+    base300: "#E2E8F0",
+    baseContent: "#0F172A",
+
+    // Brand
+    primary: "#3B82F6",
+    primaryContent: "#FFFFFF",
+
+    secondary: "#64748B",
+    secondaryContent: "#FFFFFF",
+
+    accent: "#14B8A6",
+    accentContent: "#FFFFFF",
+
+    // Neutral
+    neutral: "#1E293B",
+    neutralContent: "#FFFFFF",
+
+    // Semantic
+    info: "#0EA5E9",
+    infoContent: "#FFFFFF",
+
+    success: "#22C55E",
+    successContent: "#FFFFFF",
+
+    warning: "#F59E0B",
+    warningContent: "#FFFFFF",
+
+    error: "#EF4444",
+    errorContent: "#FFFFFF",
+  },
+
+  dark: {
+    // Surfaces
+    base100: "#111827",
+    base200: "#1B2433",
+    base300: "#2A3445",
+    baseContent: "#F8FAFC",
+
+    // Brand
+    primary: "#60A5FA",
+    primaryContent: "#FFFFFF",
+
+    secondary: "#94A3B8",
+    secondaryContent: "#111827",
+
+    accent: "#2DD4BF",
+    accentContent: "#111827",
+
+    // Neutral
+    neutral: "#F8FAFC",
+    neutralContent: "#111827",
+
+    // Semantic
+    info: "#38BDF8",
+    infoContent: "#111827",
+
+    success: "#4ADE80",
+    successContent: "#111827",
+
+    warning: "#FBBF24",
+    warningContent: "#111827",
+
+    error: "#F87171",
+    errorContent: "#FFFFFF",
+  },
+} as const;

package/templates/production-fullstack/mobile/src/db/index.ts

@@ -0,0 +1,9 @@
+import { drizzle } from 'drizzle-orm/expo-sqlite';
+import * as SQLite from 'expo-sqlite';
+import * as schema from './schema';
+
+// Open the local database. If it doesn't exist, it will be created.
+const expoDb = SQLite.openDatabaseSync('imksh.db');
+
+// Pass the database instance to Drizzle
+export const db = drizzle(expoDb, { schema });

package/templates/production-fullstack/mobile/src/db/schema.ts

@@ -0,0 +1,14 @@
+import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
+
+export const users = sqliteTable('users', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  email: text('email').notNull().unique(),
+  name: text('name'),
+  role: text('role').default('user'),
+  createdAt: text('created_at').notNull().default('CURRENT_TIMESTAMP'),
+});
+
+export const preferences = sqliteTable('preferences', {
+  key: text('key').primaryKey(),
+  value: text('value').notNull(),
+});

package/templates/production-fullstack/mobile/src/features/auth/api/auth.service.ts

@@ -0,0 +1,35 @@
+import { api } from "../../../lib/axios";
+
+export const authService = {
+  sendOtp: (email: string) => api.post("/auth/send-signup-otp", { email }),
+
+  signup: (
+    name: string,
+    email: string,
+    password: string,
+    otp: string,
+    role = "user",
+  ) => api.post("/auth/signup", { name, email, password, otp, role }),
+
+  login: (email: string, password: string) =>
+    api.post("/auth/login", { email, password }),
+
+  getMe: () => api.get("/auth/me"),
+
+  updateMe: (data: any) => api.put("/auth/me", data),
+
+  logout: () => api.post("/auth/logout"),
+
+  savePushToken: (token: string) => api.post("/auth/push-token", { token }),
+
+  genOtp: (email: string) => api.post("/auth/forgot-password/otp", { email }),
+
+  verifyOtp: (email: string, otp: string) =>
+    api.post("/auth/forgot-password/verify-otp", { email, otp }),
+
+  resetPassword: (newPassword: string) =>
+    api.post("/auth/reset-password", { newPassword }),
+
+  changePassword: (oldPassword: string, newPassword: string) =>
+    api.post("/auth/change-password", { oldPassword, newPassword }),
+};