refactor: Decouple frontend into a standalone SPA

This commit refactors the project architecture by separating the frontend from the backend API. The goal is to enable independent development, scaling, and deployment of both parts.

- Extracted the frontend into a separate directory with its own `package.json`, Vite configuration, and `index.html`.
- The backend is now a pure API service, responsible only for business logic and data.
- Added a Docker setup (`Dockerfile`, `docker-compose.yml`) to containerize the application environment.
- Configured Vite's dev server to proxy API requests (`/api`) to the backend container to ensure a smooth development experience.

Author: LexaFrontDev

.dockerignore

@@ -0,0 +1,32 @@
+**/*.log
+**/*.md
+**/*.php~
+**/*.dist.php
+**/*.dist
+**/*.cache
+**/._*
+**/.dockerignore
+**/.DS_Store
+**/.git/
+**/.gitattributes
+**/.gitignore
+**/.gitmodules
+**/docker-compose.*.yaml
+**/docker-compose.*.yml
+**/docker-compose.yaml
+**/docker-compose.yml
+**/Dockerfile
+**/Thumbs.db
+.github/
+.idea/
+data/
+docs/
+public/bundles/
+tests/
+var/
+vendor/
+.editorconfig
+#.env.*.local
+#.env.local
+#.env.local.php
+#.env.test

.env

@@ -1,10 +1,9 @@
-APP_ENV=prod
-APP_SECRET=
+APP_ENV=dev
+APP_SECRET=25aeff0645dafb0ce3dc54218fd03bed
+
+DATABASE_URL="pgsql://TimerAppUser:user123@db:5432/TimerAppDatabase?serverVersion=13&charset=utf8"
+
 
-DB_USER=your-database_user_name
-DB_PASS=your-database_password
-DB_HOST=your-database_host
-DB_NAME=Time
 
 MESSENGER_TRANSPORT_DSN=doctrine://default?auto_setup=0
 
@@ -20,12 +19,12 @@ MERCURE_JWT_SECRET="!ChangeThisMercureHubJWTSecretKey!"
 ###> lexik/jwt-authentication-bundle ###
 JWT_PRIVATE_KEY_PATH=%kernel.project_dir%/config/jwt/private.pem
 JWT_PUBLIC_KEY_PATH=%kernel.project_dir%/config/jwt/public.pem
-JWT_PASSPHRASE=
+JWT_PASSPHRASE=e357a5e49f1839042101695a96c07c9edfdf4939d4e91b1368d5c177153a71bc
 ###< lexik/jwt-authentication-bundle ###
 
-VITE_CACHE_DB_NAME=
-VITE_CACHE_STORE_NAME=
-VITE_GOOGLE_CLIENT_ID=
-VITE_GOOGLE_REDIRECT_URI=
-VITE_PUSH_PUBLIC_KEY=
-VITE_PUSH_PRIVATE_KEY=
+VITE_CACHE_DB_NAME=HabitAiCacheDev
+VITE_CACHE_STORE_NAME=cache
+VITE_GOOGLE_CLIENT_ID=643971601411-8n1r7vok0pk4v4q250dfpr4ibs17jfms.apps.googleusercontent.com
+VITE_GOOGLE_REDIRECT_URI=http://localhost:8000/api/auth/google/callback
+VITE_PUSH_PUBLIC_KEY=BGFRrWJKC5fnlb_eLwOIqa4bWlbBqRUIFvlDYQ1GX56Hl5Kv4KNopAIqZ2Tq6ohG4hIdLJoim4313yKUyNevXgo
+VITE_PUSH_PRIVATE_KEY=EE9lQvPuHsWctURErU3bC4VG9wLguK-JcLI5iTo7G94

Makefile

@@ -0,0 +1,78 @@
+# Executables (local)
+DOCKER_COMP = docker compose
+
+# Docker containers
+PHP_CONT = $(DOCKER_COMP) exec -e COMPOSER_MEMORY_LIMIT=-1 php
+
+# Executables
+PHP      = $(PHP_CONT) php -d memory_limit=-1
+COMPOSER = $(PHP_CONT) composer
+SYMFONY  = $(PHP) bin/console
+PHPUNIT  = $(PHP) bin/phpunit
+
+# Misc
+.DEFAULT_GOAL = help
+.PHONY        : help build up start down logs sh composer vendor sf cc
+
+## —— 🎵 🐳 The Symfony Docker Makefile 🐳 🎵 ——————————————————————————————————
+help: ## Outputs this help screen
+	@grep -E '(^[a-zA-Z0-9\./_-]+:.*?##.*$$)|(^##)' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}{printf "\033[32m%-30s\033[0m %s\n", $$1, $$2}' | sed -e 's/\[32m##/[33m/'
+
+## —— Docker 🐳 ————————————————————————————————————————————————————————————————
+build: ## Builds the Docker images
+	@$(DOCKER_COMP) -f docker-compose.yml -f docker-compose.dev.yml build #--pull --no-cache
+
+up: ## Start the docker hub in detached mode (no logs)
+	@$(DOCKER_COMP) -f docker-compose.yml -f docker-compose.dev.yml up --detach
+
+up-build: ## Start the docker hub in detached mode (no logs)
+	@$(DOCKER_COMP) -f docker-compose.yml -f docker-compose.dev.yml up --build --detach
+
+up-prod: ## Start the docker hub in detached mode (no logs)
+	@$(DOCKER_COMP) -f docker-compose.yml -f docker-compose.prod.yml up --detach
+
+up-prod-build: ## Start the docker hub in detached mode (no logs)
+	@$(DOCKER_COMP) -f docker-compose.yml -f docker-compose.prod.yml up --build --detach
+
+start: build up ## Build and start the containers
+
+stop: ## Stop the docker hub
+	@$(DOCKER_COMP) stop
+
+down: ## Stop the docker hub
+	@$(DOCKER_COMP) down --remove-orphans
+
+logs: ## Show live logs
+	@$(DOCKER_COMP) logs --tail=0 --follow
+
+sh: ## Connect to the PHP FPM container
+	@$(PHP_CONT) sh
+
+perms: ## Connect to the PHP FPM container
+	@$(PHP_CONT) chown www-data ./var/cache -R
+	@$(PHP_CONT) chmod 0777 ./var/cache -R
+
+remove-cache: ## Connect to the PHP FPM container
+	@$(PHP_CONT) rm -rf ./var/cache/dev
+	@$(PHP_CONT) rm -rf ./var/cache/prod
+
+## —— Composer 🧙 ——————————————————————————————————————————————————————————————
+composer: ## Run composer, pass the parameter "c=" to run a given command, example: make composer c='req symfony/orm-pack'
+	@$(eval c ?=)
+	@$(COMPOSER) $(c)
+
+vendor: ## Install vendors according to the current composer.lock file
+vendor: c=install --prefer-dist --no-dev --no-progress --no-scripts --no-interaction
+vendor: composer
+
+## —— Symfony 🎵 ———————————————————————————————————————————————————————————————
+phpunit: ## List all Symfony commands or pass the parameter "c=" to run a given command, example: make sf c=about
+	@$(PHPUNIT)
+
+## —— Symfony 🎵 ———————————————————————————————————————————————————————————————
+sf: ## List all Symfony commands or pass the parameter "c=" to run a given command, example: make sf c=about
+	@$(eval c ?=)
+	@$(SYMFONY) $(c)
+
+cc: c=c:c ## Clear the cache
+cc: sf

assets/react/App.tsx

@@ -20,7 +20,7 @@ const RouterDom = () => {
     const location = useLocation();
     const navigate = useNavigate();
 
-    // Сохраняем последнюю защищённую страницу
+
     useEffect(() => {
         const allowedPages = [
             '/tasks',
@@ -40,6 +40,8 @@ const RouterDom = () => {
         const checkAuth = async () => {
             try {
                 const res = await fetch('/api/auth/check');
+                const data = await res.json();
+                console.log(data);
                 const ok = res.ok;
                 setIsAuthenticated(ok);
 

assets/react/Router.tsx

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>React SPA</title>
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">
+
+    <!-- Собственные стили через Vite -->
+    <link rel="stylesheet" href="/styles/app.css">
+    <link rel="stylesheet" href="/styles/Main/main.css">
+    <!-- если есть Vite сборка -->
+
+    <!-- react-toastify стили -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/react-toastify/dist/ReactToastify.css">
+</head>
+<body>
+<div id="react-root"></div>
+
+
+<script type="module" src="./main.tsx"></script>
+
+<!-- Дополнительно сторонние скрипты -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/js/bootstrap-datepicker.min.js"></script>
+</body>
+</html>

assets/react/index.html

@@ -1,4 +1,3 @@
-// index.tsx
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './Services/Library/i18n';
@@ -7,12 +6,6 @@ import { I18nextProvider } from 'react-i18next';
 import i18n from './Services/Library/i18n';
 import 'react-toastify/dist/ReactToastify.css';
 
-if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/serviceWorker/ServiceWorker.js')
-        .then(registration => console.log('Service Worker зарегистрирован:', registration))
-        .catch(err => console.error('Не удалось зарегистрировать Service Worker:', err));
-}
-
 
 // @ts-ignore
 const root = ReactDOM.createRoot(document.getElementById('react-root'));

assets/react/main.tsx

@@ -49,6 +49,7 @@ const TasksPage: React.FC = () => {
         }
     });
     const [tasks, setTasks] = useState<Task[]>([]);
+    const [allTasks, setAllTasks] = useState<Task[]>([]);
     const [editingTask, setEditingTask] = useState<Task | null>(null);
     const [showEditModal, setShowEditModal] = useState<boolean>(false);
     const [loading, setLoading] = useState<boolean>(false);
@@ -136,30 +137,42 @@ const TasksPage: React.FC = () => {
     };
 
     useEffect(() => {
-        const fetchTasks = async () => {
+        const fetchAllTasks = async () => {
             try {
                 setLoading(true);
-                if (activePeriod === 'all') {
-                    const tasks = await tasksService.getTasksAll();
-                    if(!tasks) setTasks([]);
-                    console.log(tasks);
-                    // @ts-ignore
-                    setTasks(tasks || []);
-                } else {
-                    const date = getActiveDate();
-                    const tasks = await tasksService.getTasksFor(date);
-                    setTasks(tasks || []);
-                }
+                const allTasksResult = await tasksService.getTasksAll();
+                setAllTasks(Array.isArray(allTasksResult) ? allTasksResult : []);
+                console.log(allTasks)
             } catch (err: any) {
                 setError(err.message);
-                setTasks([]);
+                setAllTasks([]);
             } finally {
                 setLoading(false);
             }
         };
 
-        fetchTasks();
-    }, [activePeriod]);
+        fetchAllTasks();
+    }, []);
+
+    useEffect(() => {
+        if (activePeriod === 'all') {
+            setTasks(allTasks);
+        } else {
+            const activeDate = getActiveDate();
+            const filtered = allTasks.filter(task => {
+                if (!task.timeData?.date) return false;
+                const taskDate = new Date(task.timeData.date);
+                const taskDateStr = taskDate.toISOString().slice(0, 10).replace(/-/g, '');
+                return taskDateStr === activeDate;
+            });
+            setTasks(filtered);
+        }
+    }, [activePeriod, allTasks]);
+
+
+
+
+
 
     const handlePeriodChange = async (period: Period,  id: number) => {
         setActiveId(id)
@@ -173,9 +186,13 @@ const TasksPage: React.FC = () => {
     const getTasks = async (period: 'today' | 'tomorrow' | 'nextWeek' | 'nextMonth' | 'all') => {
         try {
             setLoading(true);
-            const allTasks = await tasksService.getTasksAll();
-            // @ts-ignore
-            setTasks(allTasks || []);
+            if (allTasks.length === 0) {
+                const fetchedTasks = await tasksService.getTasksAll();
+                const tasksArray: Task[] = Array.isArray(fetchedTasks) ? fetchedTasks : [];
+                setAllTasks(tasksArray);
+            }
+
+            setTasks(allTasks);
             setActivePeriod(period);
         } catch (err: any) {
             setError(err.message || t('tasks.mistakeGetAllTasks'));