@varunindiit/create-rn-starter 1.0.1

package/template/src/components/Common/DriverTripCard.tsx

@@ -0,0 +1,308 @@
+import React from "react";
+import type { TFunction } from "i18next";
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+import Svg, { Circle, Path } from "react-native-svg";
+import { moderateScale } from "react-native-size-matters";
+import Card from "./Card";
+import StatusBadge from "./StatusBadge";
+import RNText from "../Text/RNText";
+import { CheckCircleIcon } from "../Icon/SvgIcons";
+import { THEME } from "../../theme";
+import { useLanguage } from "../../localization";
+import { Trip, TripStatus } from "../../redux/slice/trip";
+
+interface DriverTripCardProps {
+  trip: Trip;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Filled circle with a white ✕ — used for the Cancelled badge. */
+const FilledXCircle: React.FC<{ size: number; color: string }> = ({
+  size,
+  color,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx={12} cy={12} r={10} fill={color} />
+    <Path
+      d="M8.5 8.5l7 7M15.5 8.5l-7 7"
+      stroke="#FFFFFF"
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+type Variant = {
+  /** Color of the timeline dots. */
+  dotColor: string;
+  /** Whether the route/header text is dimmed. */
+  muted: boolean;
+  /** Inline status icon + label (renders instead of the pill badge). */
+  badge?: { icon: React.ReactNode; label: string; color: string };
+  /** Footer (divider + label); omitted means no footer. */
+  footer?: { label: string; color: string };
+};
+
+const buildVariant = (trip: Trip, t: TFunction): Variant => {
+  const iconSize = moderateScale(16);
+  const seatsLeft = Math.max(trip.totalSeats - trip.bookedSeats, 0);
+  const seatLabel = t("common.seatsLeftCount", { count: seatsLeft });
+
+  switch (trip.status) {
+    case "completed":
+      return {
+        dotColor: THEME.success,
+        muted: false,
+        badge: {
+          icon: <CheckCircleIcon size={iconSize} color={THEME.primary} />,
+          label: t("tripStatus.completed"),
+          color: THEME.primary,
+        },
+      };
+    case "cancelled":
+      return {
+        dotColor: THEME.primaryLight,
+        muted: true,
+        badge: {
+          icon: <FilledXCircle size={iconSize} color={THEME.text} />,
+          label: t("tripStatus.cancelled"),
+          color: THEME.text,
+        },
+      };
+    case "confirmed":
+      return {
+        dotColor: THEME.primary,
+        muted: false,
+        badge: {
+          icon: <CheckCircleIcon size={iconSize} color={THEME.success} />,
+          label: t("tripStatus.confirmed"),
+          color: THEME.success,
+        },
+        footer: { label: seatLabel, color: THEME.primary },
+      };
+    default:
+      // available / fully_booked / in_progress
+      return {
+        dotColor: THEME.primary,
+        muted: false,
+        footer: { label: seatLabel, color: THEME.primary },
+      };
+  }
+};
+
+const STATUS_BADGE_TONE: Record<
+  TripStatus,
+  "success" | "warning" | "danger" | "info" | "primary"
+> = {
+  available: "info",
+  fully_booked: "warning",
+  confirmed: "success",
+  in_progress: "primary",
+  completed: "success",
+  cancelled: "danger",
+};
+
+/** Localized status label, falling back to the English literal where no key exists. */
+const statusLabel = (t: TFunction, status: TripStatus): string => {
+  switch (status) {
+    case "confirmed":
+      return t("tripStatus.confirmed");
+    case "completed":
+      return t("tripStatus.completed");
+    case "cancelled":
+      return t("tripStatus.cancelled");
+    case "available":
+      return t("tripStatus.available");
+    case "fully_booked":
+      return t("tripStatus.fullyBooked");
+    case "in_progress":
+      return t("tripStatus.inProgress");
+    default:
+      return status;
+  }
+};
+
+const DriverTripCard: React.FC<DriverTripCardProps> = ({
+  trip,
+  onPress,
+  style,
+}) => {
+  const { t } = useLanguage();
+  const variant = buildVariant(trip, t);
+  const textColor = variant.muted ? THEME.textMuted : THEME.text;
+  const timeColor = variant.muted ? THEME.textMuted : THEME.textSecondary;
+
+  return (
+    <TouchableOpacity onPress={onPress} activeOpacity={0.9} disabled={!onPress}>
+      <Card shadow padding={moderateScale(16)} style={[styles.card, style]}>
+        {/* Header: date + status */}
+        <View style={styles.headerRow}>
+          <RNText font="bold" size={17} color={textColor}>
+            {trip.date}, {trip.weekday}
+          </RNText>
+          {variant.badge ? (
+            <View style={styles.statusRow}>
+              {variant.badge.icon}
+              <RNText
+                font="semibold"
+                size={14}
+                color={variant.badge.color}
+                style={styles.statusLabel}
+              >
+                {variant.badge.label}
+              </RNText>
+            </View>
+          ) : (
+            <StatusBadge
+              label={statusLabel(t, trip.status)}
+              tone={STATUS_BADGE_TONE[trip.status]}
+            />
+          )}
+        </View>
+
+        <View style={styles.divider} />
+
+        {/* Route timeline */}
+        <View style={styles.timelineWrap}>
+          <View style={styles.timelineRow}>
+            <RNText
+              font="medium"
+              size={14}
+              color={timeColor}
+              style={styles.timelineTime}
+            >
+              {trip.from.time || "--:--"}
+            </RNText>
+            <View
+              style={[styles.timelineDot, { backgroundColor: variant.dotColor }]}
+            />
+            <RNText
+              font="medium"
+              size={15}
+              color={textColor}
+              style={styles.timelinePlace}
+            >
+              {trip.from.city}
+              {trip.from.area ? `, ${trip.from.area}` : ""}
+            </RNText>
+          </View>
+
+          <View style={styles.timelineConnector}>
+            <View style={styles.timeColSpacer} />
+            <View style={styles.timelineDashCol}>
+              {Array.from({ length: 4 }).map((_, i) => (
+                <View
+                  key={i}
+                  style={[
+                    styles.timelineDashSegment,
+                    { backgroundColor: variant.dotColor },
+                  ]}
+                />
+              ))}
+            </View>
+          </View>
+
+          <View style={styles.timelineRow}>
+            <RNText
+              font="medium"
+              size={14}
+              color={timeColor}
+              style={styles.timelineTime}
+            >
+              {trip.to.time || "--:--"}
+            </RNText>
+            <View
+              style={[styles.timelineDot, { backgroundColor: variant.dotColor }]}
+            />
+            <RNText
+              font="medium"
+              size={15}
+              color={textColor}
+              style={styles.timelinePlace}
+            >
+              {trip.to.city}
+              {trip.to.area ? `, ${trip.to.area}` : ""}
+            </RNText>
+          </View>
+        </View>
+
+        {/* Footer (only when there are seats to show) */}
+        {variant.footer ? (
+          <>
+            <View style={styles.divider} />
+            <RNText font="semibold" size={15} color={variant.footer.color}>
+              {variant.footer.label}
+            </RNText>
+          </>
+        ) : null}
+      </Card>
+    </TouchableOpacity>
+  );
+};
+
+export default DriverTripCard;
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: moderateScale(20),
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  statusRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  statusLabel: {
+    marginLeft: moderateScale(5),
+  },
+  divider: {
+    height: 1,
+    backgroundColor: THEME.divider,
+    marginVertical: moderateScale(14),
+  },
+  timelineWrap: {},
+  timelineRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  timelineTime: {
+    width: moderateScale(48),
+  },
+  timelinePlace: {
+    flex: 1,
+    marginLeft: moderateScale(14),
+  },
+  timelineDot: {
+    width: moderateScale(10),
+    height: moderateScale(10),
+    borderRadius: moderateScale(5),
+  },
+  timelineConnector: {
+    flexDirection: "row",
+  },
+  timeColSpacer: {
+    width: moderateScale(48),
+  },
+  timelineDashCol: {
+    width: moderateScale(10),
+    alignItems: "center",
+    paddingVertical: moderateScale(3),
+  },
+  timelineDashSegment: {
+    width: moderateScale(1.5),
+    height: moderateScale(3),
+    marginVertical: moderateScale(1.5),
+    opacity: 0.6,
+  },
+});

package/template/src/components/Common/Dropdown.tsx

@@ -0,0 +1,161 @@
+import React, { useCallback, useState } from "react";
+import {
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { SPACING, THEME } from "../../theme";
+import RNText from "../Text/RNText";
+import BottomSheet from "../BottomSheet/BottomSheet";
+import ArrowDownSvg from "../../assets/svg/arrowDown.svg";
+
+export interface DropdownOption {
+  label: string;
+  value: string;
+}
+
+interface DropdownProps {
+  value?: string | null;
+  options: DropdownOption[];
+  onChange: (value: string) => void;
+  placeholder?: string;
+  title?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  disabled?: boolean;
+  error?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  triggerStyle?: StyleProp<ViewStyle>;
+}
+
+const Dropdown: React.FC<DropdownProps> = ({
+  value,
+  options,
+  onChange,
+  placeholder = "Select",
+  title,
+  leftIcon,
+  rightIcon,
+  disabled,
+  error,
+  containerStyle,
+  triggerStyle,
+}) => {
+  const [visible, setVisible] = useState(false);
+
+  const selected = options.find((o) => o.value === value);
+
+  const open = useCallback(() => {
+    if (!disabled) setVisible(true);
+  }, [disabled]);
+  const close = useCallback(() => setVisible(false), []);
+
+  const handleSelect = useCallback(
+    (val: string) => {
+      onChange(val);
+      setVisible(false);
+    },
+    [onChange],
+  );
+
+  return (
+    <View style={containerStyle}>
+      <TouchableOpacity
+        activeOpacity={0.85}
+        onPress={open}
+        disabled={disabled}
+        style={[
+          styles.trigger,
+          { borderColor: error ? THEME.danger : THEME.inputBorder },
+          triggerStyle,
+        ]}
+      >
+        {leftIcon ? <View style={styles.left}>{leftIcon}</View> : null}
+        <RNText
+          size={14}
+          font="regular"
+          color={selected ? THEME.text : THEME.textPlaceholder}
+          style={styles.triggerText}
+        >
+          {selected ? selected.label : placeholder}
+        </RNText>
+        {rightIcon ?? (
+          <ArrowDownSvg
+            width={moderateScale(18)}
+            height={moderateScale(18)}
+          />
+        )}
+      </TouchableOpacity>
+
+      {error ? (
+        <RNText size={11} color={THEME.danger} style={styles.errorText}>
+          {error}
+        </RNText>
+      ) : null}
+
+      <BottomSheet visible={visible} onClose={close}>
+        {title ? (
+          <RNText
+            font="semibold"
+            size={18}
+            color={THEME.text}
+            style={styles.sheetTitle}
+          >
+            {title}
+          </RNText>
+        ) : null}
+
+        {options.map((opt) => {
+          const active = opt.value === value;
+          return (
+            <Pressable
+              key={opt.value}
+              onPress={() => handleSelect(opt.value)}
+              style={({ pressed }) => [
+                styles.option,
+                pressed && { backgroundColor: THEME.primaryFaint },
+              ]}
+            >
+              <RNText
+                size={15}
+                font={active ? "semibold" : "regular"}
+                color={active ? THEME.primary : THEME.text}
+              >
+                {opt.label}
+              </RNText>
+            </Pressable>
+          );
+        })}
+      </BottomSheet>
+    </View>
+  );
+};
+
+export default Dropdown;
+
+const styles = StyleSheet.create({
+  trigger: {
+    height: moderateScale(50),
+    borderRadius: SPACING.radiusPill,
+    borderWidth: 1,
+    backgroundColor: THEME.surface,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: moderateScale(18),
+  },
+  left: { marginRight: moderateScale(10) },
+  triggerText: { flex: 1 },
+  errorText: { marginTop: moderateScale(6) },
+  sheetTitle: {
+    marginBottom: moderateScale(12),
+  },
+  option: {
+    paddingVertical: moderateScale(14),
+    borderBottomWidth: 1,
+    borderBottomColor: THEME.divider,
+  },
+});

package/template/src/components/Common/EmptyState.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { SPACING, THEME } from "../../theme";
+import RNText from "../Text/RNText";
+
+interface EmptyStateProps {
+  title?: string;
+  description?: string;
+  icon?: React.ReactNode;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({ title, description, icon }) => (
+  <View style={styles.wrap}>
+    {icon ? <View style={styles.icon}>{icon}</View> : null}
+    {title ? (
+      <RNText
+        font="semibold"
+        size={16}
+        color={THEME.text}
+        textAlign="center"
+        style={styles.title}
+      >
+        {title}
+      </RNText>
+    ) : null}
+    {description ? (
+      <RNText
+        size={13}
+        color={THEME.textMuted}
+        textAlign="center"
+        style={styles.desc}
+      >
+        {description}
+      </RNText>
+    ) : null}
+  </View>
+);
+
+export default EmptyState;
+
+const styles = StyleSheet.create({
+  wrap: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: SPACING.xxl,
+  },
+  icon: { marginBottom: moderateScale(12) },
+  title: { marginBottom: moderateScale(6) },
+  desc: { maxWidth: "80%" },
+});

package/template/src/components/Common/FAB.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { THEME } from "../../theme";
+import { PlusIcon } from "../Icon/SvgIcons";
+
+interface FABProps {
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  size?: number;
+  children?: React.ReactNode;
+}
+
+const FAB: React.FC<FABProps> = ({ onPress, style, size = 56, children }) => {
+  const dim = moderateScale(size);
+  const ringPad = moderateScale(6);
+  const outerDim = dim + ringPad * 2;
+  return (
+    <View
+      style={[
+        styles.halo,
+        {
+          width: outerDim,
+          height: outerDim,
+          borderRadius: outerDim / 2,
+          padding: ringPad,
+        },
+        style,
+      ]}
+    >
+      <Pressable
+        onPress={onPress}
+        style={[
+          styles.fab,
+          {
+            width: dim,
+            height: dim,
+            borderRadius: dim / 2,
+            backgroundColor: THEME.primary,
+          },
+        ]}
+      >
+        {children ?? (
+          <PlusIcon size={moderateScale(24)} color={THEME.textOnPrimary} />
+        )}
+      </Pressable>
+    </View>
+  );
+};
+
+export default FAB;
+
+const styles = StyleSheet.create({
+  halo: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(242, 107, 42, 0.18)",
+  },
+  fab: {
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: "#F26B2A",
+    shadowOpacity: 0.35,
+    shadowRadius: 14,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 8,
+  },
+});

package/template/src/components/Common/HeaderLocation.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import {
+  ActivityIndicator,
+  Linking,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { FONT_SIZE, THEME } from "../../theme";
+import { PinIcon } from "../Icon/SvgIcons";
+import RNText from "../Text/RNText";
+import { useLanguage } from "../../localization";
+import type { LocationStatus } from "../../redux/slice/location";
+
+interface HeaderLocationProps {
+  status: LocationStatus;
+  label?: string;
+  /** Retry the location fetch (used for the error state). */
+  onRetry?: () => void;
+  /** Text colour — lets each Home match its header palette. */
+  textColor?: string;
+}
+
+/**
+ * Compact, reusable header element that surfaces the device's current
+ * location. Reacts to the global location slice status: shows a spinner while
+ * resolving, the resolved city once granted, and tappable affordances for the
+ * denied / error states.
+ */
+const HeaderLocation: React.FC<HeaderLocationProps> = ({
+  status,
+  label,
+  onRetry,
+  textColor = THEME.textSecondary,
+}) => {
+  const { t } = useLanguage();
+  if (status === "loading" || status === "idle") {
+    return (
+      <View style={styles.row}>
+        <ActivityIndicator size="small" color={THEME.primary} />
+        <RNText size={FONT_SIZE.sm} color={textColor} style={styles.text}>
+          {t("location.gettingLocation")}
+        </RNText>
+      </View>
+    );
+  }
+
+  if (status === "denied") {
+    return (
+      <TouchableOpacity
+        style={styles.row}
+        activeOpacity={0.7}
+        hitSlop={moderateScale(8)}
+        onPress={() => Linking.openSettings()}
+      >
+        <PinIcon size={moderateScale(13)} color={THEME.danger} />
+        <RNText size={FONT_SIZE.sm} color={THEME.danger} style={styles.text}>
+          {t("location.enableAccess")}
+        </RNText>
+      </TouchableOpacity>
+    );
+  }
+
+  if (status === "error") {
+    return (
+      <TouchableOpacity
+        style={styles.row}
+        activeOpacity={0.7}
+        hitSlop={moderateScale(8)}
+        onPress={onRetry}
+      >
+        <PinIcon size={moderateScale(13)} color={THEME.warning} />
+        <RNText size={FONT_SIZE.sm} color={THEME.warning} style={styles.text}>
+          {t("location.unavailableRetry")}
+        </RNText>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <View style={styles.row}>
+      <PinIcon size={moderateScale(13)} color={THEME.primary} />
+      <RNText
+        size={FONT_SIZE.sm}
+        color={textColor}
+        style={styles.text}
+        numberOfLines={1}
+      >
+        {label || t("location.current")}
+      </RNText>
+    </View>
+  );
+};
+
+export default HeaderLocation;
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: moderateScale(4),
+  },
+  text: {
+    marginLeft: moderateScale(5),
+    flexShrink: 1,
+  },
+});