updated frontend user pannel

src/App.js

@@ -6,6 +6,7 @@ import Home from './pages/Home';
 import TeamResults from './pages/TeamResult';
 import Home2 from './pages/Home2';
 import GameList from './pages/GameList';
+import Faq from './pages/Faq';
 
 // Auth Context
 const AuthContext = React.createContext();
@@ -1059,8 +1060,10 @@ const App = () => {
             }
           />
           <Route path="/" element={<Home2 />} />
-          <Route path="/results" element={<GameList />} />
+          <Route path="/games" element={<GameList />} />
           <Route path="/res" element={<TeamResults />} />
+          <Route path="/faq" element={<Faq />} />
+
         </Routes>
       </AuthProvider>
     </Router>

src/pages/Faq.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { useState } from 'react';
+import Header from './Header';
+
+  const Faq = () =>  {
+     const [openIndex, setOpenIndex] = useState(null);
+    
+      const toggleFAQ = (index) => {
+        setOpenIndex(openIndex === index ? null : index);
+      };
+    
+      const faqs = [
+        { question: "HOW TO PLAY", answer: "Details about how to play." },
+        { question: "WHERE TO PLAY", answer: "Information on where to play." },
+        { question: "WINNING NUMBERS EMAIL", answer: "Sign up for emails." },
+      ];
+
+	return (
+	  <>
+      <Header/>
+        <div className="w-full bg-white text-black">
+        {/* FAQ Section */}
+        <div className="max-w-6xl mx-auto py-6">
+          {faqs.map((faq, index) => (
+            <div key={index} className="mb-2">
+              <button
+                className="w-full bg-red-600 text-white text-lg font-semibold py-3 px-4 flex justify-between items-center rounded-md"
+                onClick={() => toggleFAQ(index)}
+              >
+                {faq.question}
+                <span>{openIndex === index ? "▲" : "▼"}</span>
+              </button>
+              {openIndex === index && (
+                <div className="p-4 bg-gray-100 border border-gray-300">
+                  {faq.answer}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Footer Section */}
+        <footer className="bg-white border-t py-6 text-center">
+          <div className="max-w-3xl mx-auto text-gray-600 text-sm">
+            <p className="font-bold text-xl text-black flex items-center justify-center">
+              MATKA <span className="text-red-600"> SATTA</span>
+            </p>
+            <p className="mt-2">
+              The Multi-State Lottery Association makes every effort to ensure the
+              accuracy of winning numbers and other information. Official winning
+              numbers are those selected in the respective drawings and recorded
+              under the observation of an independent accounting firm.
+            </p>
+            <p className="mt-2">
+              In the event of a discrepancy, the official drawing results shall
+              prevail. All winning tickets must be redeemed in the
+              state/jurisdiction in which they are sold.
+            </p>
+            <p className="mt-4 flex justify-center space-x-4 text-black font-semibold">
+              <span>Media Center</span>
+              <span>Legal</span>
+              <span>Privacy</span>
+              <span>español</span>
+            </p>
+          </div>
+        </footer>
+      </div>
+      
+	  </>
+	);
+  }
+  
+  export default Faq;
+  

src/pages/Footer.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Faq from './Faq';
+const Footer = () => {
+
+    return (
+        <>
+            <div className="w-full bg-white text-black">
+                {/* FAQ Section */}
+                <Faq />
+
+                {/* Footer Section */}
+                <footer className="bg-white border-t py-6 text-center">
+                    <div className="max-w-3xl mx-auto text-gray-600 text-sm">
+                        <p className="font-bold text-xl text-black flex items-center justify-center">
+                            MATKA <span className="text-red-600"> SATTA</span>
+                        </p>
+                        <p className="mt-2">
+                            The Multi-State Lottery Association makes every effort to ensure the
+                            accuracy of winning numbers and other information. Official winning
+                            numbers are those selected in the respective drawings and recorded
+                            under the observation of an independent accounting firm.
+                        </p>
+                        <p className="mt-2">
+                            In the event of a discrepancy, the official drawing results shall
+                            prevail. All winning tickets must be redeemed in the
+                            state/jurisdiction in which they are sold.
+                        </p>
+                        <p className="mt-4 flex justify-center space-x-4 text-black font-semibold">
+                            <span>Media Center</span>
+                            <span>Legal</span>
+                            <span>Privacy</span>
+                            <span>español</span>
+                        </p>
+                    </div>
+                </footer>
+            </div>
+        </>
+    );
+}
+
+export default Footer;

src/pages/GameList.js

@@ -3,6 +3,8 @@ import { BarChart2, Calendar, RefreshCw, Clock, ChevronLeft, ChevronRight } from
 import axios from 'axios';
 import TodaysMatch from './TodaysMatch';
 import Today from './Today';
+import Header from './Header';
+import Footer from './Footer';
 
 const GameList = () => {
   const [teams, setTeams] = useState([]);
@@ -141,33 +143,41 @@ const GameList = () => {
   }, []);
 
   // Show chart for selected team
-  const handleViewChart = async (team) => {
+const handleViewChart = async (team) => {
-    try {
+  try {
-      setLoading(true);
+    setLoading(true);
-      // Get monthly results for the selected team
+    // Get monthly results for the selected team
-      const currentDate = new Date();
+    const currentDate = new Date();
-      const month = currentDate.getMonth() + 1;
+    const month = currentDate.getMonth() + 1;
-      const year = currentDate.getFullYear();
+    const year = currentDate.getFullYear();
     
-      const response = await axios.post(`${API_URL}/results/monthly`, {
+    const monthStr = `${year}-${month.toString().padStart(2, '0')}`;
-        team: team.name,
-        month: `${year}-${month.toString().padStart(2, '0')}`
-      });
     
-      setSelectedTeam({
+    console.log("Fetching chart data for:", team.name, "Month:", monthStr);
-        ...team,
-        chartData: response.data
-      });
     
-      setShowChartView(true);
+    const response = await axios.post(`${API_URL}/results/monthly`, {
-      setShowCalendar(false);
+      team: team.name,
-      setLoading(false);
+      month: monthStr
-    } catch (err) {
+    });
-      console.error("Error fetching chart data:", err);
+    
-      setError("Failed to load chart data. Please try again later.");
+    console.log("API Response:", response.data);
-      setLoading(false);
+    
-    }
+    // Keep the original data structure
-  };
+    setSelectedTeam({
+      ...team,
+      chartData: response.data
+    });
+    
+    setShowChartView(true);
+    setShowCalendar(false);
+    setLoading(false);
+  } catch (err) {
+    console.error("Error fetching chart data:", err);
+    setError("Failed to load chart data: " + (err.response?.data?.message || err.message));
+    setLoading(false);
+    setShowChartView(false);
+  }
+};
 
   // Load calendar data
   const loadCalendarData = async (year, month) => {
@@ -288,21 +298,9 @@ const GameList = () => {
     });
   };
 
-
-    const [openIndex, setOpenIndex] = useState(null);
-  
-    const toggleFAQ = (index) => {
-      setOpenIndex(openIndex === index ? null : index);
-    };
-  
-    const faqs = [
-      { question: "HOW TO PLAY", answer: "Details about how to play." },
-      { question: "WHERE TO PLAY", answer: "Information on where to play." },
-      { question: "WINNING NUMBERS EMAIL", answer: "Sign up for emails." },
-    ];
-
   return (
     <div className="bg-gray-200 min-h-screen">
+      <Header/>
   
 
       <div className="max-w-6xl mx-auto p-4">
@@ -322,14 +320,14 @@ const GameList = () => {
           <div className="text-lg font-semibold text-gray-800 mb-2 md:mb-0">Latest Results</div>
 
           <div className="flex gap-2">
-            <button
+            {/* <button
               className="bg-black text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-gray-800 transition"
               onClick={handleCalendarView}
               disabled={loading}
             >
               <Calendar size={16} />
               Calendar View
-            </button>
+            </button> */}
             <button
               className="bg-red-600 text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-red-700 transition"
               onClick={handleRefresh}
@@ -585,54 +583,7 @@ const GameList = () => {
           </div>
         )}
       </div>
-
+      <Footer/>
-      <div className="w-full bg-white text-black">
-        {/* FAQ Section */}
-        <div className="max-w-6xl mx-auto py-6">
-          {faqs.map((faq, index) => (
-            <div key={index} className="mb-2">
-              <button
-                className="w-full bg-red-600 text-white text-lg font-semibold py-3 px-4 flex justify-between items-center rounded-md"
-                onClick={() => toggleFAQ(index)}
-              >
-                {faq.question}
-                <span>{openIndex === index ? "▲" : "▼"}</span>
-              </button>
-              {openIndex === index && (
-                <div className="p-4 bg-gray-100 border border-gray-300">
-                  {faq.answer}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-
-        {/* Footer Section */}
-        <footer className="bg-white border-t py-6 text-center">
-          <div className="max-w-3xl mx-auto text-gray-600 text-sm">
-            <p className="font-bold text-xl text-black flex items-center justify-center">
-              MATKA <span className="text-red-600"> SATTA</span>
-            </p>
-            <p className="mt-2">
-              The Multi-State Lottery Association makes every effort to ensure the
-              accuracy of winning numbers and other information. Official winning
-              numbers are those selected in the respective drawings and recorded
-              under the observation of an independent accounting firm.
-            </p>
-            <p className="mt-2">
-              In the event of a discrepancy, the official drawing results shall
-              prevail. All winning tickets must be redeemed in the
-              state/jurisdiction in which they are sold.
-            </p>
-            <p className="mt-4 flex justify-center space-x-4 text-black font-semibold">
-              <span>Media Center</span>
-              <span>Legal</span>
-              <span>Privacy</span>
-              <span>español</span>
-            </p>
-          </div>
-        </footer>
-      </div>
     </div>
   );
 };

src/pages/Header.js

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { Menu, X } from "lucide-react";
+import { Link } from "react-router-dom";
+
+export default function Header() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <header className="bg-gray-600 text-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center py-4">
+          {/* Logo */}
+          <Link to="/" className="text-2xl font-bold"> <img
+            src="./logo.PNG"
+            alt="Advertisement"
+            className="w-12 h-30 m-auto"
+          /></Link>
+
+          {/* Desktop Menu */}
+          <nav className="hidden md:flex space-x-6">
+            <Link to="/faq" className="hover:text-gray-200 transition">FAQs</Link>
+            <Link to="/games" className="hover:text-gray-200 transition">Results</Link>
+          </nav>
+
+          {/* Mobile Menu Button */}
+          <button 
+            onClick={() => setIsOpen(!isOpen)} 
+            className="md:hidden text-white focus:outline-none"
+          >
+            {isOpen ? <X size={28} /> : <Menu size={28} />}
+          </button>
+        </div>
+
+        {/* Mobile Menu */}
+        {isOpen && (
+          <nav className="md:hidden flex flex-col space-y-4 pb-4">
+            <Link to="#" className="hover:text-gray-200 transition">FAQs</Link>
+            <Link to="/games" className="hover:text-gray-200 transition">Results</Link>
+          </nav>
+        )}
+      </div>
+    </header>
+  );
+}

src/pages/Home2.js

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { BarChart2, Calendar, RefreshCw, Clock, ChevronLeft, ChevronRight } from 'lucide-react';
 import axios from 'axios';
 import TodaysMatch from './TodaysMatch';
+import Footer from './Footer';
+import Header from './Header';
 
 const Home2 = () => {
   const [teams, setTeams] = useState([]);
@@ -302,6 +304,7 @@ const Home2 = () => {
 
   return (
     <div className="bg-gray-200 min-h-screen">
+      <Header/>
       <div className="w-full bg-white p-4 text-center text-white">
         {/* Header */}
         <h1 className="text-3xl md:text-4xl font-bold uppercase text-red-600">
@@ -351,55 +354,7 @@ const Home2 = () => {
         <TodaysMatch />
       </div>
 
-
+<Footer/>
-
-      <div className="w-full bg-white text-black">
-        {/* FAQ Section */}
-        <div className="max-w-6xl mx-auto py-6">
-          {faqs.map((faq, index) => (
-            <div key={index} className="mb-2">
-              <button
-                className="w-full bg-red-600 text-white text-lg font-semibold py-3 px-4 flex justify-between items-center rounded-md"
-                onClick={() => toggleFAQ(index)}
-              >
-                {faq.question}
-                <span>{openIndex === index ? "▲" : "▼"}</span>
-              </button>
-              {openIndex === index && (
-                <div className="p-4 bg-gray-100 border border-gray-300">
-                  {faq.answer}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-
-        {/* Footer Section */}
-        <footer className="bg-white border-t py-6 text-center">
-          <div className="max-w-3xl mx-auto text-gray-600 text-sm">
-            <p className="font-bold text-xl text-black flex items-center justify-center">
-              MATKA <span className="text-red-600"> SATTA</span>
-            </p>
-            <p className="mt-2">
-              The Multi-State Lottery Association makes every effort to ensure the
-              accuracy of winning numbers and other information. Official winning
-              numbers are those selected in the respective drawings and recorded
-              under the observation of an independent accounting firm.
-            </p>
-            <p className="mt-2">
-              In the event of a discrepancy, the official drawing results shall
-              prevail. All winning tickets must be redeemed in the
-              state/jurisdiction in which they are sold.
-            </p>
-            <p className="mt-4 flex justify-center space-x-4 text-black font-semibold">
-              <span>Media Center</span>
-              <span>Legal</span>
-              <span>Privacy</span>
-              <span>español</span>
-            </p>
-          </div>
-        </footer>
-      </div>
     </div>
   );
 };

src/pages/Home3.js

@@ -29,6 +29,8 @@ const Home2 = () => {
     }
   };
 
+  
+
   // Check if a match is upcoming
   const isUpcoming = (resultTime) => {
     try {

src/pages/TeamResult.js

@@ -49,13 +49,13 @@ const TeamResults = () => {
   return (
     <div className="p-4">
       <h2 className="text-xl font-bold mb-4">Game Results</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div className="w-1/3">
         {teams.map((team) => (
           <div key={team.id} className="border p-4 rounded-md shadow-md">
             <h3 className="text-lg font-semibold">{team.name}</h3>
-            <p className="text-sm text-gray-600">Time: {team.result_time}</p>
+            {/* <p className="text-sm text-gray-600">Time: {team.result_time}</p> */}
 
-            <div className="mt-2">
+            {/* <div className="mt-2">
               <h4 className="font-semibold">Results:</h4>
               {Object.keys(team.results).length > 0 ? (
                 <ul className="list-disc pl-4">
@@ -68,7 +68,7 @@ const TeamResults = () => {
               ) : (
                 <p className="text-gray-500">No results available</p>
               )}
-            </div>
+            </div> */}
           </div>
         ))}
       </div>