ubkerp.transport.module 0.1.0

package/src/screens/StudentRouteDetails/StudentRouteDetailsScreen.tsx

@@ -0,0 +1,284 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Linking,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Image,
+} from 'react-native';
+import {useTransport} from '../../providers/useTransport';
+import {getStudentRouteDetails} from '../../services/transport/studentRouteDetails';
+import type {StudentRouteDetails} from '../../types/transport';
+
+export type StudentRouteDetailsScreenProps = {
+  renderTop?: () => React.ReactNode;
+};
+
+function buildDriverImageUrl(args: {fileBaseUrl?: string; driverImage?: string}) {
+  if (!args.fileBaseUrl || !args.driverImage) return undefined;
+  const base = args.fileBaseUrl.endsWith('/')
+    ? args.fileBaseUrl.slice(0, -1)
+    : args.fileBaseUrl;
+  const img = args.driverImage.startsWith('/')
+    ? args.driverImage.slice(1)
+    : args.driverImage;
+  return `${base}/staff/document/${img}`;
+}
+
+export function StudentRouteDetailsScreen({renderTop}: StudentRouteDetailsScreenProps) {
+  const {api, fileBaseUrl} = useTransport();
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState<StudentRouteDetails | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const driverImageUrl = useMemo(() => {
+    return buildDriverImageUrl({
+      fileBaseUrl,
+      driverImage: data?.driver_image,
+    });
+  }, [data?.driver_image, fileBaseUrl]);
+
+  const load = useCallback(async () => {
+    try {
+      setLoading(true);
+      setLoadError(null);
+      const res = await getStudentRouteDetails(api);
+      const first = Array.isArray(res.data) ? res.data[0] : undefined;
+      setData(first ?? null);
+    } catch (e) {
+      setData(null);
+      setLoadError('Failed to load transport route details');
+    } finally {
+      setLoading(false);
+    }
+  }, [api]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleCall = useCallback(async () => {
+    const phone = data?.contact_number;
+    if (!phone) {
+      Alert.alert('Error', 'Contact number not available');
+      return;
+    }
+
+    const phoneNumber = phone.toString().replace(/[^0-9+]/g, '');
+    const url = `tel:${phoneNumber}`;
+    const supported = await Linking.canOpenURL(url);
+    if (!supported) {
+      Alert.alert('Error', 'Phone calls are not supported on this device');
+      return;
+    }
+    await Linking.openURL(url);
+  }, [data?.contact_number]);
+
+  if (loading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  if (!data?.route_title) {
+    return (
+      <View style={styles.center}>
+        {loadError ? (
+          <Text style={styles.errorText}>{loadError}</Text>
+        ) : (
+          <Text style={styles.noDataText}>No Data Found</Text>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {renderTop ? renderTop() : null}
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={styles.routeTitleCard}>
+          <Text style={styles.routeTitle}>{data.route_title}</Text>
+          <Text style={styles.routeSubtitle}>Route Details</Text>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.cardTitle}>Vehicle Information</Text>
+
+          <View style={styles.detailRow}>
+            <Text style={styles.detailLabel}>Vehicle No:</Text>
+            <Text style={styles.detailValue}>{data.vehicle_no ?? '-'}</Text>
+          </View>
+          <View style={styles.detailRow}>
+            <Text style={styles.detailLabel}>Model:</Text>
+            <Text style={styles.detailValue}>{data.vehicle_model ?? '-'}</Text>
+          </View>
+          <View style={styles.detailRow}>
+            <Text style={styles.detailLabel}>Stop Name:</Text>
+            <Text style={styles.detailValue}>{data.stop_name ?? '-'}</Text>
+          </View>
+          <View style={styles.detailRow}>
+            <Text style={styles.detailLabel}>Pick Up:</Text>
+            <Text style={[styles.detailValue, styles.pickup]}>
+              {data.pickup_time ?? '-'}
+            </Text>
+          </View>
+          <View style={styles.detailRow}>
+            <Text style={styles.detailLabel}>Drop Time:</Text>
+            <Text style={[styles.detailValue, styles.drop]}>
+              {data.drop_time ?? '-'}
+            </Text>
+          </View>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.cardTitle}>Driver Information</Text>
+
+          <View style={styles.driverContainer}>
+            <View style={styles.driverImageContainer}>
+              {driverImageUrl ? (
+                <Image style={styles.driverImage} source={{uri: driverImageUrl}} />
+              ) : (
+                <View style={styles.driverImageFallback} />
+              )}
+            </View>
+
+            <View style={styles.driverInfo}>
+              <Text style={styles.driverLabel}>Driver Name</Text>
+              <Text style={styles.driverName}>{data.driver ?? '-'}</Text>
+            </View>
+
+            <TouchableOpacity onPress={handleCall} style={styles.callButton}>
+              <Text style={styles.callText}>Call</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+  },
+  noDataText: {
+    fontSize: 16,
+    color: '#6B7280',
+  },
+  errorText: {
+    fontSize: 16,
+    color: '#DC2626',
+    textAlign: 'center',
+    paddingHorizontal: 24,
+  },
+  routeTitleCard: {
+    margin: 16,
+    borderRadius: 16,
+    padding: 16,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center',
+  },
+  routeTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827',
+  },
+  routeSubtitle: {
+    marginTop: 6,
+    fontSize: 12,
+    color: '#6B7280',
+  },
+  card: {
+    marginHorizontal: 16,
+    marginBottom: 16,
+    borderRadius: 16,
+    padding: 16,
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+  },
+  cardTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#111827',
+    marginBottom: 12,
+  },
+  detailRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 6,
+  },
+  detailLabel: {
+    fontSize: 14,
+    color: '#374151',
+  },
+  detailValue: {
+    fontSize: 14,
+    color: '#111827',
+    fontWeight: '600',
+  },
+  pickup: {
+    color: '#16A34A',
+  },
+  drop: {
+    color: '#DC2626',
+  },
+  driverContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  driverImageContainer: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    overflow: 'hidden',
+    backgroundColor: '#F3F4F6',
+  },
+  driverImage: {
+    width: 56,
+    height: 56,
+  },
+  driverImageFallback: {
+    width: 56,
+    height: 56,
+    backgroundColor: '#E5E7EB',
+  },
+  driverInfo: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  driverLabel: {
+    fontSize: 12,
+    color: '#6B7280',
+  },
+  driverName: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#111827',
+    marginTop: 2,
+  },
+  callButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 10,
+    backgroundColor: '#DCFCE7',
+  },
+  callText: {
+    color: '#16A34A',
+    fontWeight: '700',
+  },
+});
+

package/src/screens/TransportDashboard/TransportDashboard.tsx

@@ -0,0 +1,93 @@
+import React, {useMemo} from 'react';
+import {
+  FlatList,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type ListRenderItem,
+} from 'react-native';
+
+export type TransportDashboardItem = {
+  id: string;
+  title: string;
+  onPress: () => void;
+  icon?: React.ReactNode;
+};
+
+export type TransportDashboardProps = {
+  items?: TransportDashboardItem[];
+};
+
+export function TransportDashboard({items}: TransportDashboardProps) {
+  const data = useMemo(() => items ?? [], [items]);
+
+  const renderItem: ListRenderItem<TransportDashboardItem> = ({item}) => {
+    return (
+      <Pressable onPress={item.onPress} style={styles.card}>
+        <View style={styles.iconContainer}>{item.icon ?? null}</View>
+        <Text style={styles.title}>{item.title}</Text>
+      </Pressable>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={data}
+        renderItem={renderItem}
+        numColumns={2}
+        contentContainerStyle={styles.listContainer}
+        keyExtractor={item => item.id}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  listContainer: {
+    padding: 16,
+    paddingTop: 30,
+  },
+  card: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    margin: 10,
+    borderRadius: 20,
+    paddingVertical: 24,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
+    borderWidth: 1,
+    borderColor: '#F0F0F0',
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    backgroundColor: '#E3F2FD',
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#111827',
+    textAlign: 'center',
+    letterSpacing: 0.5,
+  },
+});
+

package/src/services/api/createApiClient.ts

@@ -0,0 +1,170 @@
+import axios from 'axios';
+import type {AxiosError, AxiosRequestConfig} from 'axios';
+import type {ApiClient, ApiError} from './types';
+import type {
+  GetAuthToken,
+  RefreshAuthToken,
+  TransportHeaders,
+} from '../../providers/types';
+
+type CreateApiClientArgs = {
+  baseUrl: string;
+  authToken?: string;
+  getAuthToken?: GetAuthToken;
+  headers?: TransportHeaders;
+  refreshAuthToken?: RefreshAuthToken;
+  onApiError?: (error: ApiError) => void;
+  retry?: {
+    retries?: number;
+    retryDelayMs?: number;
+    retryOnStatuses?: number[];
+  };
+};
+
+type InternalAxiosRequestConfig = AxiosRequestConfig & {
+  __retryCount?: number;
+  __isRetryAfterRefresh?: boolean;
+};
+
+function normalizeAxiosError(err: AxiosError): ApiError {
+  return {
+    message: err.message,
+    status: err.response?.status,
+    code: err.code,
+    url: err.config?.url,
+    method: err.config?.method,
+    data: err.response?.data,
+    raw: err,
+  };
+}
+
+async function resolveToken(args: {
+  authToken?: string;
+  getAuthToken?: GetAuthToken;
+}) {
+  if (args.authToken) return args.authToken;
+  if (!args.getAuthToken) return undefined;
+  const token = await args.getAuthToken();
+  return token ?? undefined;
+}
+
+function delay(ms: number) {
+  return new Promise<void>(resolve => setTimeout(() => resolve(), ms));
+}
+
+export function createApiClient(args: CreateApiClientArgs): ApiClient {
+  const baseUrl = args.baseUrl.endsWith('/')
+    ? args.baseUrl.slice(0, -1)
+    : args.baseUrl;
+  const instance = axios.create({
+    baseURL: baseUrl,
+  });
+
+  const retryConfig = {
+    retries: args.retry?.retries ?? 1,
+    retryDelayMs: args.retry?.retryDelayMs ?? 500,
+    retryOnStatuses: args.retry?.retryOnStatuses ?? [408, 429, 500, 502, 503, 504],
+  };
+
+  let refreshPromise: Promise<string | null | undefined> | null = null;
+
+  instance.interceptors.request.use(async (config: any) => {
+    const headers: Record<string, string> = {
+      ...(args.headers ?? {}),
+      ...(config.headers as Record<string, string> | undefined),
+    };
+
+    const hasAuthorizationHeader =
+      typeof headers.Authorization === 'string' && headers.Authorization.length > 0;
+
+    if (!hasAuthorizationHeader) {
+      const token = await resolveToken({
+        authToken: args.authToken,
+        getAuthToken: args.getAuthToken,
+      });
+      if (token) {
+        headers.Authorization = token;
+      }
+    }
+
+    config.headers = headers as any;
+    return config;
+  });
+
+  instance.interceptors.response.use(
+    res => res,
+    async (error: AxiosError) => {
+      const normalized = normalizeAxiosError(error);
+      const config = (error.config ?? {}) as InternalAxiosRequestConfig;
+      const status = error.response?.status;
+
+      const shouldRefresh =
+        status === 401 && !!args.refreshAuthToken && !config.__isRetryAfterRefresh;
+
+      if (shouldRefresh && args.refreshAuthToken) {
+        const currentToken = await resolveToken({
+          authToken: args.authToken,
+          getAuthToken: args.getAuthToken,
+        });
+
+        if (!refreshPromise) {
+          refreshPromise = args.refreshAuthToken({
+            failedRequest: {
+              url: config.url,
+              method: config.method,
+              status,
+            },
+            currentToken: currentToken ?? null,
+          }).finally(() => {
+            refreshPromise = null;
+          });
+        }
+
+        const newToken = await refreshPromise;
+        if (newToken) {
+          config.__isRetryAfterRefresh = true;
+          config.headers = {
+            ...(config.headers as Record<string, string> | undefined),
+            Authorization: newToken,
+          };
+          return instance.request(config);
+        }
+      }
+
+      const shouldRetry =
+        (status && retryConfig.retryOnStatuses.includes(status)) ||
+        (!status && Boolean(error.code));
+
+      if (shouldRetry) {
+        config.__retryCount = (config.__retryCount ?? 0) + 1;
+        if (config.__retryCount <= retryConfig.retries) {
+          await delay(retryConfig.retryDelayMs);
+          return instance.request(config);
+        }
+      }
+
+      args.onApiError?.(normalized);
+      return Promise.reject(error);
+    },
+  );
+
+  return {
+    instance,
+    request<T = unknown>(config: AxiosRequestConfig) {
+      return instance.request<T>(config);
+    },
+    async get<T = unknown>(url: string, config?: AxiosRequestConfig) {
+      const res = await instance.get<T>(url, config);
+      return res.data;
+    },
+    async post<T = unknown>(
+      url: string,
+      data?: unknown,
+      config?: AxiosRequestConfig,
+    ) {
+      const res = await instance.post<T>(url, data, config);
+      return res.data;
+    },
+  };
+}
+

package/src/services/api/types.ts

@@ -0,0 +1,30 @@
+import type {
+  AxiosError,
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
+} from 'axios';
+
+export type ApiRequestConfig = AxiosRequestConfig;
+
+export type ApiError = {
+  message: string;
+  status?: number;
+  code?: string;
+  url?: string;
+  method?: string;
+  data?: unknown;
+  raw?: AxiosError;
+};
+
+export type ApiClient = {
+  instance: AxiosInstance;
+  request<T = unknown>(config: ApiRequestConfig): Promise<AxiosResponse<T>>;
+  get<T = unknown>(url: string, config?: ApiRequestConfig): Promise<T>;
+  post<T = unknown>(
+    url: string,
+    data?: unknown,
+    config?: ApiRequestConfig,
+  ): Promise<T>;
+};
+

package/src/services/index.ts

@@ -0,0 +1,2 @@
+export {};
+

package/src/services/transport/studentRouteDetails.ts

@@ -0,0 +1,10 @@
+import type {ApiClient} from '../api/types';
+import type {StudentRouteDetails} from '../../types/transport';
+import type {ApiEnvelope} from './types';
+
+export async function getStudentRouteDetails(api: ApiClient) {
+  return api.get<ApiEnvelope<StudentRouteDetails[]>>(
+    '/student/studentAPP/TransportDetails/studentRoutedetails',
+  );
+}
+

package/src/services/transport/types.ts

@@ -0,0 +1,7 @@
+export type ApiEnvelope<T> = {
+  Status?: string;
+  Message?: string;
+  message?: string;
+  data?: T;
+};
+

package/src/store/index.ts

@@ -0,0 +1,2 @@
+export {};
+

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export type {StudentRouteDetails} from './transport';
+

package/src/types/transport.ts

@@ -0,0 +1,12 @@
+export type StudentRouteDetails = {
+  route_title?: string;
+  vehicle_no?: string;
+  vehicle_model?: string;
+  stop_name?: string;
+  pickup_time?: string;
+  drop_time?: string;
+  driver?: string;
+  driver_image?: string;
+  contact_number?: string | number;
+};
+

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export {};
+