project setup

2025-11-02 10:08:56 +01:00
commit 568838003e
174 changed files with 27100 additions and 0 deletions
@@ -0,0 +1,112 @@
+import { View, Text, ScrollView } from "react-native";
+import { Badge, IconButton } from "react-native-paper";
+import { useState } from "react";
+import { Ionicons } from "@expo/vector-icons";
+
+import { TodoDetailsModal } from "@/components/features/todos/TodoDetailsModal";
+import { Todo } from "@/store/models/Todo.model";
+import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
+import { SizeEnum } from "@/constants/sizeEnum";
+import { TodoStatusColors } from "@/constants/todoStatusEnum";
+import { formatDateMDY, formatTime } from "@/utils/dateUtils";
+
+interface MobileAdminTodoTableProps {
+  todos: Todo[];
+  onEdit: (todo: Todo) => void;
+  onDelete: (todo: Todo) => void;
+}
+
+export const MobileAdminTodosTable = ({
+  todos,
+  onEdit,
+  onDelete,
+}: MobileAdminTodoTableProps) => {
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);
+
+  const openDetails = (todo: Todo) => {
+    setSelectedTodo(todo);
+    setDetailsOpen(true);
+  };
+
+  const closeDetails = () => setDetailsOpen(false);
+
+  return (
+    <View className="flex-1">
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{ paddingBottom: 16 }}
+      >
+        {todos.map((todo) => {
+          const taskPreview =
+            todo.task && todo.task.length > 50
+              ? `${todo.task.slice(0, 50)}...`
+              : todo.task;
+          return (
+            <View
+              key={todo.id}
+              className="mb-3 p-4 bg-white rounded-md shadow-sm"
+            >
+              <View className="flex-row justify-between items-center mb-3">
+                <View className="mr-2">
+                  <Badge
+                    size={16}
+                    style={{ backgroundColor: TodoStatusColors[todo.status] }}
+                  />
+                </View>
+                <Text className="font-bold flex-1 flex-wrap" numberOfLines={0}>
+                  {todo.title}
+                </Text>
+                <View className="ml-2 flex-row items-center">
+                  <PriorityIndicator
+                    priority={todo.priority}
+                    size={SizeEnum.Small}
+                  />
+                </View>
+              </View>
+              <View className="flex-row items-center mb-2">
+                <Ionicons name="calendar-outline" size={14} color="#6b7280" />
+                <Text className="text-xs text-gray-500 ml-1">
+                  {`${formatDateMDY(todo.createdAt)} ${formatTime(
+                    todo.createdAt
+                  )}`}
+                </Text>
+              </View>
+              <Text className="text-sm mb-3 text-gray-600" numberOfLines={0}>
+                {taskPreview}
+              </Text>
+              <View className="flex-row justify-end border-t border-gray-200 pt-3">
+                <IconButton
+                  icon="eye-outline"
+                  size={20}
+                  onPress={() => openDetails(todo)}
+                />
+                <IconButton
+                  icon="pencil-outline"
+                  size={20}
+                  onPress={() => {
+                    onEdit(todo);
+                  }}
+                />
+                <IconButton
+                  icon="delete-outline"
+                  size={20}
+                  onPress={() => {
+                    onDelete(todo);
+                  }}
+                />
+              </View>
+            </View>
+          );
+        })}
+      </ScrollView>
+      {selectedTodo && (
+        <TodoDetailsModal
+          visible={detailsOpen}
+          todo={selectedTodo}
+          onClose={closeDetails}
+        />
+      )}
+    </View>
+  );
+};