DONE: first init

fe/mobile/src/components/AssignedNumberAlert.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+import { View, Modal, Text, Button, StyleSheet, Dimensions } from 'react-native';
+import { Colors } from '../constants/colors';
+import { generateTicket } from '../services/fetchData';
+import { getExpoToken } from '../utils/tokenUtils';
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+export default function ({ visible, onClose, number }: { visible: any, onClose: any, number: number}) {
+
+  const [modalVisible, setModalVisible] = useState(visible);
+
+  useEffect(() => {
+
+    setModalVisible(visible);
+    if (visible) {
+      const timer = setTimeout(() => {
+        setModalVisible(false);
+        onClose();
+      }, 5000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [visible]);
+
+  if(number != 0 )
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => {
+        onClose();
+      }}
+    >
+      <View style={styles.modalContainer}>
+        <View style={styles.modalContent}>
+          <Text style={styles.message}>Vaš broj je:</Text>
+          <View style={styles.numberContainer}>
+            <Text style={styles.number}>{number}</Text>
+          </View>
+          <View style={styles.buttonContainer}>
+            <Button title="Dismiss" onPress={onClose} color={Colors.ACCENT} />
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    padding: windowWidth * 0.05, // Responsive padding
+    borderRadius: windowWidth * 0.05, // Responsive border radius
+    width: windowWidth * 0.8, // Responsive width
+    alignItems: 'center', // Center content horizontally
+  },
+  message: {
+    fontSize: windowWidth * 0.05, // Responsive font size
+    marginBottom: windowHeight * 0.02, // Responsive margin
+  },
+  numberContainer: {
+    marginBottom: windowHeight * 0.04, // Responsive margin
+  },
+  number: {
+    fontSize: windowWidth * 0.12, // Responsive font size
+    fontWeight: 'bold',
+  },
+  buttonContainer: {
+    marginTop: windowHeight * 0.02, // Responsive margin
+    alignSelf: 'flex-end', // Align button to the right
+  },
+});

fe/mobile/src/components/LoadingAnimation.tsx

@@ -0,0 +1,16 @@
+import { View } from "react-native";
+import React from "react";
+import LottieView from "lottie-react-native";
+
+export default function LoadingAnimation() {
+  return (
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <LottieView
+        source={require("../../assets/animations/loading.json")}
+        autoPlay
+        loop
+        style={{ width: 200, height: 200 }}
+      />
+    </View>
+  );
+}

fe/mobile/src/components/WelcomeMessage.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import {
+    View,
+    Text,
+    StyleSheet,
+    SafeAreaView,
+    Dimensions,
+    Animated,
+} from "react-native";
+import { Colors } from "../constants/colors";
+
+interface WelcomeMessageProps {
+    name: string;
+    welcome: string;
+    font: string;
+}
+
+export default function WelcomeMessage(params: WelcomeMessageProps) {
+    const screenWidth = Dimensions.get("window").width;
+    const fontSize = screenWidth * 0.09;
+
+    return (
+        <SafeAreaView style={styles.container}>
+            <Animated.Text style={[styles.title, { fontSize }]}>
+                {params.name}
+            </Animated.Text>
+            <View style={styles.borderContainer}>
+                <Text style={[styles.message, { fontFamily: params.font }]}>
+                    {params.welcome}
+                </Text>
+            </View>
+        </SafeAreaView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: "center",
+    },
+    title: {
+        color: Colors.PRIMARY,
+        fontWeight: "bold",
+        marginBottom: 30,
+    },
+    borderContainer: {
+        borderWidth: 1,
+        padding: 10,
+        width: "90%",
+        alignItems: "center",
+        borderColor: Colors.ACCENT,
+        borderRadius: 10,
+    },
+    message: {
+        textAlign: "center",
+        fontSize: 40,
+        color: Colors.PRIMARY,
+    },
+});