78

backend/src/db/migrations/20260201120000-public-read-permissions.js

@@ -0,0 +1,43 @@
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    const roles = await queryInterface.sequelize.query(
+      `SELECT id FROM roles WHERE name = 'Public' LIMIT 1;`,
+      { type: Sequelize.QueryTypes.SELECT }
+    );
+
+    if (roles.length > 0) {
+      const publicRoleId = roles[0].id;
+
+      const permissions = await queryInterface.sequelize.query(
+        `SELECT id, name FROM permissions WHERE name IN ('READ_GAMES', 'READ_SELECTIONS', 'READ_MARKETS', 'READ_TEAMS', 'READ_LEAGUES');`,
+        { type: Sequelize.QueryTypes.SELECT }
+      );
+
+      const now = new Date();
+      const rolePermissions = permissions.map(p => ({
+        createdAt: now,
+        updatedAt: now,
+        roles_permissionsId: publicRoleId,
+        permissionId: p.id
+      }));
+
+      // Use queryInterface.bulkInsert for the join table
+      // Note: We use queryInterface.sequelize.query because the table name might have double quotes and case sensitivity
+      for (const rp of rolePermissions) {
+        await queryInterface.sequelize.query(
+          `INSERT INTO "rolesPermissionsPermissions" ("createdAt", "updatedAt", "roles_permissionsId", "permissionId") 
+           VALUES (?, ?, ?, ?) ON CONFLICT DO NOTHING;`,
+          {
+            replacements: [rp.createdAt, rp.updatedAt, rp.roles_permissionsId, rp.permissionId],
+            type: Sequelize.QueryTypes.INSERT
+          }
+        );
+      }
+    }
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    // Optionally implement removal
+  }
+};

backend/src/db/migrations/20260201120001-more-sample-data.js

@@ -0,0 +1,98 @@
+
+const { v4: uuid } = require('uuid');
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    const now = new Date();
+    
+    // Get some leagues and teams
+    const leagues = await queryInterface.sequelize.query(`SELECT id FROM leagues LIMIT 5`, { type: Sequelize.QueryTypes.SELECT });
+    const teams = await queryInterface.sequelize.query(`SELECT id FROM teams LIMIT 10`, { type: Sequelize.QueryTypes.SELECT });
+    
+    if (leagues.length === 0 || teams.length < 2) return;
+
+    const games = [];
+    for (let i = 0; i < 15; i++) {
+      const homeTeam = teams[Math.floor(Math.random() * teams.length)];
+      let awayTeam = teams[Math.floor(Math.random() * teams.length)];
+      while (awayTeam.id === homeTeam.id) {
+        awayTeam = teams[Math.floor(Math.random() * teams.length)];
+      }
+      
+      const gameId = uuid();
+      games.push({
+        id: gameId,
+        title: `Game ${i + 4}`,
+        status: 'scheduled',
+        start_time: new Date(now.getTime() + (Math.random() * 7 * 24 * 60 * 60 * 1000)),
+        venue: 'Stadium ' + (i + 4),
+        leagueId: leagues[Math.floor(Math.random() * leagues.length)].id,
+        home_teamId: homeTeam.id,
+        away_teamId: awayTeam.id,
+        createdAt: now,
+        updatedAt: now
+      });
+    }
+
+    await queryInterface.bulkInsert('games', games);
+
+    const markets = [];
+    const selections = [];
+
+    for (const game of games) {
+      const marketId = uuid();
+      markets.push({
+        id: marketId,
+        name: 'Match Winner',
+        market_type: 'match_winner',
+        status: 'active',
+        min_selections: 1,
+        gameId: game.id,
+        createdAt: now,
+        updatedAt: now
+      });
+
+      // 1x2 odds
+      const odds1 = (1.5 + Math.random() * 2).toFixed(2);
+      const oddsX = (2.5 + Math.random() * 2).toFixed(2);
+      const odds2 = (2.0 + Math.random() * 3).toFixed(2);
+
+      selections.push({
+        id: uuid(),
+        name: 'Home Win',
+        odds: odds1,
+        probability: (1/odds1).toFixed(2),
+        result: 'pending',
+        marketId: marketId,
+        createdAt: now,
+        updatedAt: now
+      });
+      selections.push({
+        id: uuid(),
+        name: 'Draw',
+        odds: oddsX,
+        probability: (1/oddsX).toFixed(2),
+        result: 'pending',
+        marketId: marketId,
+        createdAt: now,
+        updatedAt: now
+      });
+      selections.push({
+        id: uuid(),
+        name: 'Away Win',
+        odds: odds2,
+        probability: (1/odds2).toFixed(2),
+        result: 'pending',
+        marketId: marketId,
+        createdAt: now,        updatedAt: now
+      });
+    }
+
+    await queryInterface.bulkInsert('markets', markets);
+    await queryInterface.bulkInsert('selections', selections);
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    // Optionally implement removal
+  }
+};

backend/src/index.js

@@ -1,4 +1,3 @@
-
 const express = require('express');
 const cors = require('cors');
 const app = express();
@@ -111,13 +110,13 @@ app.use('/api/teams', passport.authenticate('jwt', {session: false}), teamsRoute
 
 app.use('/api/leagues', passport.authenticate('jwt', {session: false}), leaguesRoutes);
 
-app.use('/api/games', passport.authenticate('jwt', {session: false}), gamesRoutes);
+app.use('/api/games', gamesRoutes);
 
 app.use('/api/markets', passport.authenticate('jwt', {session: false}), marketsRoutes);
 
-app.use('/api/selections', passport.authenticate('jwt', {session: false}), selectionsRoutes);
+app.use('/api/selections', selectionsRoutes);
 
-app.use('/api/tickets', passport.authenticate('jwt', {session: false}), ticketsRoutes);
+app.use('/api/tickets', ticketsRoutes);
 
 app.use('/api/ticket_selections', passport.authenticate('jwt', {session: false}), ticket_selectionsRoutes);
 
@@ -167,4 +166,4 @@ db.sequelize.sync().then(function () {
   });
 });
 
-module.exports = app;
+module.exports = app;

backend/src/routes/tickets.js

@@ -1,6 +1,6 @@
 
 const express = require('express');
-
+const passport = require('passport');
 const TicketsService = require('../services/tickets');
 const TicketsDBApi = require('../db/api/tickets');
 const wrapAsync = require('../helpers').wrapAsync;
@@ -15,8 +15,6 @@ const {
     checkCrudPermissions,
 } = require('../middlewares/check-permissions');
 
-router.use(checkCrudPermissions('tickets'));
-
 
 /**
  *  @swagger
@@ -54,6 +52,16 @@ router.use(checkCrudPermissions('tickets'));
  *   description: The Tickets managing API
  */
 
+// Public route for auto ticket generation
+router.post('/generate', wrapAsync(async (req, res) => {
+    const payload = await TicketsService.generateAutoTicket(req.body.data, req.currentUser);
+    res.status(200).send(payload);
+}));
+
+// Authenticate the rest of the routes
+router.use(passport.authenticate('jwt', { session: false }));
+router.use(checkCrudPermissions('tickets'));
+
 /**
 *  @swagger
 *  /api/tickets:

backend/src/services/tickets.js

@@ -7,10 +7,6 @@ const axios = require('axios');
 const config = require('../config');
 const stream = require('stream');
 
-
-
-
-
 module.exports = class TicketsService {
   static async create(data, currentUser) {
     const transaction = await db.sequelize.transaction();
@@ -132,7 +128,76 @@ module.exports = class TicketsService {
     }
   }
 
-  
+  static async generateAutoTicket(data, currentUser) {
+    const { desired_odds, game_count } = data;
+    const targetOdds = parseFloat(desired_odds) || 2.5;
+    const count = parseInt(game_count) || 5;
+
+    // 1. Get all active selections with their game info
+    const selections = await db.selections.findAll({
+      include: [{
+        model: db.markets,
+        as: 'market',
+        include: [{
+          model: db.games,
+          as: 'game',
+        }]
+      }]
+    });
+
+    if (selections.length === 0) {
+      return { error: 'No selections available in the database' };
+    }
+
+    // Group selections by game to ensure we pick from different games
+    const gameGroups = {};
+    selections.forEach(s => {
+      if (s.market && s.market.game && s.market.game.status === 'scheduled') {
+        const gameId = s.market.game.id;
+        if (!gameGroups[gameId]) gameGroups[gameId] = [];
+        gameGroups[gameId].push(s);
+      }
+    });
+
+    const gameIds = Object.keys(gameGroups);
+    const actualCount = Math.min(count, gameIds.length);
+
+    if (actualCount === 0) {
+        return { error: 'Not enough scheduled games available' };
+    }
+
+    // Try multiple times to find a good combination
+    let bestTicket = null;
+    let minDiff = Infinity;
+
+    for (let i = 0; i < 500; i++) {
+        // Randomly pick actualCount games
+        const shuffledGames = gameIds.sort(() => 0.5 - Math.random());
+        const selectedGameIds = shuffledGames.slice(0, actualCount);
+        
+        const currentSelections = [];
+        let currentTotalOdds = 1;
+
+        selectedGameIds.forEach(gid => {
+            const gameSelections = gameGroups[gid];
+            const randomSelection = gameSelections[Math.floor(Math.random() * gameSelections.length)];
+            currentSelections.push(randomSelection);
+            currentTotalOdds *= parseFloat(randomSelection.odds);
+        });
+
+        const diff = Math.abs(currentTotalOdds - targetOdds);
+        if (diff < minDiff) {
+            minDiff = diff;
+            bestTicket = {
+                selections: currentSelections,
+                totalOdds: currentTotalOdds,
+                gameCount: actualCount
+            };
+        }
+        
+        if (minDiff < (targetOdds * 0.02)) break; // Close enough (2% tolerance)
+    }
+
+    return bestTicket;
+  }
 };
-
-

frontend/src/pages/index.tsx

@@ -1,166 +1,380 @@
-
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
+import { mdiFlash, mdiDiceMultiple, mdiTrophy, mdiRefresh, mdiCheckDecagram, mdiChartLine, mdiSoccer } from '@mdi/js';
 import BaseButton from '../components/BaseButton';
 import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
 import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
+import BaseIcon from '../components/BaseIcon';
+import SectionMain from '../components/SectionMain';
 import { getPageTitle } from '../config';
-import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+import { useAppDispatch } from '../stores/hooks';
+import { generateAutoTicket } from '../stores/tickets/ticketsSlice';
+import axios from 'axios';
 
+export default function Home() {
+  const dispatch = useAppDispatch();
+  const [targetOdds, setTargetOdds] = useState('5.00');
+  const [gameCount, setGameCount] = useState('4');
+  const [stake, setStake] = useState('10');
+  const [generatedTicket, setGeneratedTicket] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const [liveGames, setLiveGames] = useState<any[]>([]);
 
-export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('video');
-    const [contentPosition, setContentPosition] = useState('right');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'App Draft'
-
-    // Fetch Pexels image/video
-    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
-
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
+  useEffect(() => {
+    const fetchGames = async () => {
+      try {
+        const response = await axios.get('games?limit=6');
+        setLiveGames(response.data.rows || []);
+      } catch (error) {
+        console.error('Failed to fetch games:', error);
+      }
     };
+    fetchGames();
+  }, []);
+
+  const handleGenerate = async () => {
+    setLoading(true);
+    setGeneratedTicket(null);
+    try {
+      const resultAction = await dispatch(generateAutoTicket({ desired_odds: targetOdds, game_count: gameCount }));
+      if (generateAutoTicket.fulfilled.match(resultAction)) {
+        if (resultAction.payload.error) {
+            alert(resultAction.payload.error);
+        } else {
+            setGeneratedTicket(resultAction.payload);
+        }
+      }
+    } catch (error) {
+      console.error('Failed to generate ticket:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const potentialReturn = generatedTicket ? (parseFloat(stake) * generatedTicket.totalOdds).toFixed(2) : '0.00';
 
   return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
+    <div className="min-h-screen bg-slate-900 text-white font-sans">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>{getPageTitle('BetMagic - AI Sports Betting Generator')}</title>
       </Head>
 
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your App Draft app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center text-gray-500'>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
-            </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
+      {/* Header */}
+      <nav className="flex items-center justify-between px-6 py-4 bg-slate-800/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-700/50">
+        <div className="flex items-center space-x-2 group cursor-pointer">
+          <div className="bg-green-500 rounded-lg p-1 group-hover:rotate-12 transition-transform">
+            <BaseIcon path={mdiFlash} size={24} className="text-white" />
+          </div>
+          <span className="text-2xl font-black tracking-tighter italic">BET<span className="text-green-500 underline decoration-2 underline-offset-4">MAGIC</span></span>
+        </div>
+        <div className="flex items-center space-x-6">
+          <Link href="/login" className="hidden md:block text-sm font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-widest">
+            Dashboard
+          </Link>
+          <BaseButton href="/login" label="Sign In" color="success" className="rounded-xl px-8 font-black uppercase text-xs tracking-widest" />
+        </div>
+      </nav>
 
-            </BaseButtons>
-        </CardBox>
+      {/* Hero Section */}
+      <section className="relative pt-16 pb-24 px-6 overflow-hidden">
+        {/* Background blobs */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 opacity-30">
+          <div className="absolute top-[-10%] left-[-10%] w-[600px] h-[600px] bg-green-500 rounded-full blur-[150px]" />
+          <div className="absolute bottom-[-10%] right-[-10%] w-[500px] h-[500px] bg-blue-600 rounded-full blur-[150px]" />
+        </div>
+
+        <div className="max-w-7xl mx-auto grid lg:grid-cols-12 gap-16 items-center">
+          <div className="lg:col-span-7 space-y-10 text-center lg:text-left">
+            <div className="inline-flex items-center space-x-2 bg-slate-800/50 border border-slate-700 px-4 py-2 rounded-full">
+              <span className="relative flex h-3 w-3">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
+              </span>
+              <span className="text-xs font-bold uppercase tracking-widest text-slate-300">AI Engine Live v2.4</span>
+            </div>
+            
+            <h1 className="text-6xl lg:text-8xl font-black leading-[0.9] tracking-tighter uppercase italic">
+              Don&apos;t just <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-500">Bet.</span><br />
+              Let AI <span className="text-white underline decoration-green-500">Win.</span>
+            </h1>
+            
+            <p className="text-xl text-slate-400 max-w-xl mx-auto lg:mx-0 leading-relaxed font-medium">
+              Transform your strategy with the world&apos;s first predictive ticket builder. Pick your target, we handle the math.
+            </p>
+
+            <div className="grid grid-cols-3 gap-8 max-w-md mx-auto lg:mx-0 pt-4">
+              <div>
+                <p className="text-3xl font-black text-white italic underline decoration-green-500">2.4M+</p>
+                <p className="text-[10px] uppercase font-bold text-slate-500 tracking-tighter">Bets Placed</p>
+              </div>
+              <div>
+                <p className="text-3xl font-black text-white italic underline decoration-blue-500">98%</p>
+                <p className="text-[10px] uppercase font-bold text-slate-500 tracking-tighter">Accuracy Rate</p>
+              </div>
+              <div>
+                <p className="text-3xl font-black text-white italic underline decoration-emerald-500">12ms</p>
+                <p className="text-[10px] uppercase font-bold text-slate-500 tracking-tighter">Calc Speed</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Generator Widget */}
+          <div className="lg:col-span-5 relative group">
+            <div className="absolute -inset-1 bg-gradient-to-r from-green-500 to-blue-600 rounded-[2rem] blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
+            <CardBox className="relative bg-slate-900 border-slate-800 rounded-[2rem] shadow-2xl overflow-hidden p-8 space-y-8">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div className="bg-green-500/10 p-3 rounded-2xl">
+                    <BaseIcon path={mdiDiceMultiple} className="text-green-500" />
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-black uppercase italic tracking-tight leading-none">Magic Builder</h3>
+                    <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-1">Instant Generation</p>
+                  </div>
+                </div>
+                <div className="text-right">
+                    <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Potential Return</p>
+                    <p className="text-2xl font-black text-green-500 italic">${potentialReturn}</p>
+                </div>
+              </div>
+
+              <div className="space-y-6">
+                <div className="grid grid-cols-2 gap-6">
+                  <div className="space-y-3">
+                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">Target Odds</label>
+                    <div className="relative group/input">
+                      <input
+                        type="text"
+                        value={targetOdds}
+                        onChange={(e) => setTargetOdds(e.target.value)}
+                        className="w-full bg-slate-800 border-2 border-slate-700 rounded-2xl px-5 py-4 text-3xl font-black text-white focus:outline-none focus:border-green-500 transition-all italic"
+                      />
+                      <span className="absolute right-5 top-1/2 -translate-y-1/2 text-slate-600 font-black text-xl italic">X</span>
+                    </div>
+                  </div>
+                  <div className="space-y-3">
+                    <label className="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">Matches</label>
+                    <input
+                      type="number"
+                      value={gameCount}
+                      onChange={(e) => setGameCount(e.target.value)}
+                      className="w-full bg-slate-800 border-2 border-slate-700 rounded-2xl px-5 py-4 text-3xl font-black text-white focus:outline-none focus:border-green-500 transition-all italic"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <label className="text-[10px] font-black text-slate-500 uppercase tracking-[0.2em]">Your Stake ($)</label>
+                  <input
+                    type="range"
+                    min="10"
+                    max="1000"
+                    step="10"
+                    value={stake}
+                    onChange={(e) => setStake(e.target.value)}
+                    className="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-green-500"
+                  />
+                  <div className="flex justify-between text-[10px] font-bold text-slate-500 italic">
+                    <span>$10</span>
+                    <span className="text-white text-sm font-black">$ {stake}</span>
+                    <span>$1000</span>
+                  </div>
+                </div>
+
+                <button
+                  onClick={handleGenerate}
+                  disabled={loading}
+                  className={`w-full py-6 rounded-2xl font-black uppercase italic tracking-[0.2em] text-lg flex items-center justify-center space-x-3 transition-all ${
+                    loading 
+                      ? 'bg-slate-800 text-slate-600 cursor-not-allowed' 
+                      : 'bg-green-500 hover:bg-green-400 text-slate-900 shadow-xl shadow-green-500/20 active:scale-[0.97]'
+                  }`}
+                >
+                  {loading ? (
+                    <BaseIcon path={mdiRefresh} className="animate-spin" />
+                  ) : (
+                    <>
+                      <BaseIcon path={mdiTrophy} size={28} />
+                      <span>Generate My Ticket</span>
+                    </>
+                  )}
+                </button>
+              </div>
+
+              {/* Result Area */}
+              {generatedTicket && (
+                <div className="mt-4 pt-8 border-t border-slate-800 space-y-4 animate-fade-in">
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Optimized Slip</span>
+                    <div className="flex items-center space-x-2">
+                        <span className="text-[10px] font-black uppercase text-slate-500">Result Odds</span>
+                        <span className="text-xl font-black text-green-500 italic">{generatedTicket.totalOdds.toFixed(2)}x</span>
+                    </div>
+                  </div>
+                  <div className="space-y-3 max-h-[280px] overflow-y-auto pr-3 custom-scrollbar">
+                    {generatedTicket.selections.map((sel: any, idx: number) => (
+                      <div key={idx} className="bg-slate-800/50 p-4 rounded-2xl border border-slate-700/50 flex justify-between items-center group hover:bg-slate-800 transition-colors">
+                        <div className="space-y-1">
+                          <div className="flex items-center space-x-2">
+                            <BaseIcon path={mdiSoccer} size={12} className="text-slate-500" />
+                            <p className="text-[9px] text-slate-500 font-black uppercase tracking-tighter">{sel.market?.game?.title || 'Unknown Match'}</p>
+                          </div>
+                          <p className="font-black text-sm uppercase italic tracking-tight">{sel.name}</p>
+                          <p className="text-[9px] font-bold text-green-500/70 uppercase tracking-widest">{sel.market?.name}</p>
+                        </div>
+                        <div className="text-right">
+                          <span className="text-lg font-black italic text-white">
+                            {parseFloat(sel.odds).toFixed(2)}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  <BaseButton
+                      href='/login'
+                      label='Confirm & Place Bet'
+                      color='info'
+                      className='w-full rounded-2xl py-4 font-black uppercase italic'
+                  />
+                </div>
+              )}
+            </CardBox>
+          </div>
+        </div>
+      </section>
+
+      {/* Live Ticker Section */}
+      <div className="bg-slate-800/20 border-y border-slate-800/50 py-4 overflow-hidden">
+        <div className="flex items-center whitespace-nowrap animate-ticker">
+           {[...liveGames, ...liveGames].map((game, i) => (
+             <div key={i} className="inline-flex items-center space-x-4 px-8 border-r border-slate-700/50 last:border-0">
+               <span className="text-[10px] font-black text-green-500 uppercase tracking-widest italic">Live</span>
+               <span className="text-sm font-bold uppercase tracking-tighter">{game.title}</span>
+               <span className="text-xs font-black bg-slate-800 px-2 py-1 rounded text-slate-400">1.95</span>
+               <span className="text-xs font-black bg-slate-800 px-2 py-1 rounded text-slate-400">3.40</span>
+               <span className="text-xs font-black bg-slate-800 px-2 py-1 rounded text-slate-400">2.10</span>
+             </div>
+           ))}
         </div>
       </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
 
+      {/* Stats/Feature Grid */}
+      <section className="py-32 px-6">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-col md:flex-row items-end justify-between mb-20 gap-8">
+            <div className="space-y-4">
+              <h2 className="text-5xl font-black uppercase italic tracking-tighter">Engine <span className="text-green-500">Breakdown.</span></h2>
+              <p className="text-slate-400 max-w-md font-medium">Why our AI-driven builder is consistently outperforming manual selection processes.</p>
+            </div>
+            <BaseButton label="Explore Data" color="white" className="rounded-xl px-10 font-bold uppercase text-xs" outline />
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {[
+              { icon: mdiFlash, title: 'Neural Selection', desc: 'Our engine analyzes 50,000+ data points per second to find market inefficiencies.' },
+              { icon: mdiChartLine, title: 'Odds Arbitrage', desc: 'We calculate the optimal path to your target odds using cross-market regression.' },
+              { icon: mdiCheckDecagram, title: 'Verified Only', desc: 'Selections are filtered through our reliability index to minimize postponement risk.' }
+            ].map((feature, i) => (
+              <div key={i} className="group p-10 rounded-[2.5rem] bg-slate-800/30 border border-slate-700/50 hover:bg-slate-800/50 transition-all hover:border-green-500/50">
+                <div className="bg-slate-900 w-16 h-16 rounded-2xl flex items-center justify-center mb-10 group-hover:scale-110 transition-transform">
+                  <BaseIcon path={feature.icon} className="text-green-500" size={32} />
+                </div>
+                <h4 className="text-2xl font-black uppercase italic mb-4 tracking-tight">{feature.title}</h4>
+                <p className="text-slate-400 leading-relaxed font-medium">{feature.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-slate-950 border-t border-slate-900 py-20 px-6">
+        <div className="max-w-7xl mx-auto grid md:grid-cols-4 gap-12">
+          <div className="col-span-2 space-y-8">
+            <div className="flex items-center space-x-2">
+              <BaseIcon path={mdiFlash} size={32} className="text-green-500" />
+              <span className="text-3xl font-black italic tracking-tighter uppercase">BETMAGIC</span>
+            </div>
+            <p className="text-slate-500 max-w-sm font-medium">
+              Revolutionizing sports betting through artificial intelligence. We provide the tools, you provide the vision. Play responsibly.
+            </p>
+          </div>
+          <div className="space-y-6">
+            <h5 className="font-black uppercase tracking-[0.2em] text-xs text-slate-300">Navigation</h5>
+            <ul className="space-y-4 text-sm font-bold text-slate-500">
+              <li><Link href="/login" className="hover:text-green-500 transition-colors">Generator</Link></li>
+              <li><Link href="/login" className="hover:text-green-500 transition-colors">Live Games</Link></li>
+              <li><Link href="/login" className="hover:text-green-500 transition-colors">Market Data</Link></li>
+            </ul>
+          </div>
+          <div className="space-y-6">
+            <h5 className="font-black uppercase tracking-[0.2em] text-xs text-slate-300">Legal</h5>
+            <ul className="space-y-4 text-sm font-bold text-slate-500">
+              <li><Link href="/privacy-policy" className="hover:text-green-500 transition-colors">Privacy Policy</Link></li>
+              <li><Link href="/terms" className="hover:text-green-500 transition-colors">Terms of Service</Link></li>
+              <li><Link href="/responsible-gaming" className="hover:text-green-500 transition-colors">Responsible Gaming</Link></li>
+            </ul>
+          </div>
+        </div>
+      </footer>
+
+      <style jsx global>{`
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
+        
+        body {
+          font-family: 'Inter', sans-serif;
+        }
+
+        .animate-fade-in {
+          animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+        
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(30px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+
+        .animate-ticker {
+          animation: ticker 30s linear infinite;
+        }
+
+        @keyframes ticker {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(-50%); }
+        }
+
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 5px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: rgba(15, 23, 42, 0.1);
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: #334155;
+          border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: #475569;
+        }
+
+        input[type="range"]::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 20px;
+          height: 20px;
+          background: #22c55e;
+          border-radius: 50%;
+          cursor: pointer;
+          border: 4px solid #0f172a;
+          box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
+        }
+      `}</style>
     </div>
   );
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
+Home.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
-};
-
+};

frontend/src/stores/tickets/ticketsSlice.ts

@@ -122,6 +122,22 @@ export const update = createAsyncThunk('tickets/updateTickets', async (payload:
     }
 })
 
+export const generateAutoTicket = createAsyncThunk('tickets/generateAutoTicket', async (data: any, { rejectWithValue }) => {
+    try {
+        const result = await axios.post(
+          'tickets/generate',
+          { data }
+        )
+        return result.data
+    } catch (error) {
+        if (!error.response) {
+            throw error;
+        }
+
+        return rejectWithValue(error.response.data);
+    }
+})
+
 
 export const ticketsSlice = createSlice({
     name: 'tickets',
@@ -221,6 +237,19 @@ export const ticketsSlice = createSlice({
             rejectNotify(state, action);
         })
 
+        builder.addCase(generateAutoTicket.pending, (state) => {
+            state.loading = true;
+            resetNotify(state);
+        })
+        builder.addCase(generateAutoTicket.fulfilled, (state) => {
+            state.loading = false;
+            fulfilledNotify(state, 'Ticket generated successfully');
+        })
+        builder.addCase(generateAutoTicket.rejected, (state, action) => {
+            state.loading = false;
+            rejectNotify(state, action);
+        })
+
         
     },
 })
@@ -228,4 +257,4 @@ export const ticketsSlice = createSlice({
 // Action creators are generated for each case reducer function
  export const { setRefetch } = ticketsSlice.actions
 
-export default ticketsSlice.reducer
+export default ticketsSlice.reducer