benwebsite626/bazar2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated

Browse Source
This commit is contained in:
shivam 2025-04-07 17:36:19 +05:30
parent ca923cc17e
commit 1b8b39478d
20 changed files with 1846 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@ -25,6 +25,15 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'en,hi',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
@ -39,5 +48,7 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>

10
src/App.js
View File

@ -7,7 +7,8 @@ import TeamResults from './pages/TeamResult';
import Home2 from './pages/Home2';
import GameList from './pages/GameList';
import Faq from './pages/Faq';
import MatkaResultsDashboard from './pages/Today';
import Homenew from './User/Home';
// Auth Context
const AuthContext = React.createContext();
@ -1046,8 +1047,11 @@ const ProtectedRoute = ({ children }) => {
// App
const App = () => {
return (
<Router>
<AuthProvider>
<Routes>
<Route path="/login" element={<Login />} />
@ -1060,8 +1064,12 @@ const App = () => {
}
/>
<Route path="/" element={<Home2 />} />
<Route path="/user" element={<Homenew/>}/>
<Route path="/games" element={<GameList />} />
<Route path="/res" element={<TeamResults />} />
<Route path="/monthlyChart" element={<MatkaResultsDashboard />} />
<Route path="/faq" element={<Faq />} />
</Routes>

67
src/Translate.js Normal file
View File

@ -0,0 +1,67 @@
import { useState } from "react";
import { Menu, X, Globe } from "lucide-react";
import { Link } from "react-router-dom";
export default function Translate() {
const [isOpen, setIsOpen] = useState(false);
const [currentLanguage, setCurrentLanguage] = useState("English");
// Function to handle language change
const changeLanguage = (language) => {
setCurrentLanguage(language);
// This would integrate with Google Translate API
// For actual implementation, you would need to use the Google Translate Element
if (language === "English") {
// Set to English
if (window.googleTranslateElementInit) {
const selectElement = document.querySelector('.goog-te-combo');
if (selectElement) {
selectElement.value = 'en';
selectElement.dispatchEvent(new Event('change'));
}
}
} else if (language === "Hindi") {
// Set to Hindi
if (window.googleTranslateElementInit) {
const selectElement = document.querySelector('.goog-te-combo');
if (selectElement) {
selectElement.value = 'hi';
selectElement.dispatchEvent(new Event('change'));
}
}
}
};
return (
<>
{/* Translation Bar */}
<div className="bg-gray-800 text-white py-1">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div className="flex items-center">
<Globe size={18} className="mr-2" />
<span className="text-sm">Translate:</span>
</div>
<div className="flex space-x-4">
<button
onClick={() => changeLanguage("English")}
className={`text-sm px-2 py-1 rounded ${currentLanguage === "English" ? "bg-blue-600" : "hover:bg-gray-700"}`}
>
English
</button>
<button
onClick={() => changeLanguage("Hindi")}
className={`text-sm px-2 py-1 rounded ${currentLanguage === "Hindi" ? "bg-blue-600" : "hover:bg-gray-700"}`}
>
हिन्दी
</button>
{/* Hidden div for Google Translate Element */}
<div id="google_translate_element" className="hidden"></div>
</div>
</div>
</div>
{/* Header */}
</>
);
}

47
src/User/Faq.js Normal file
View File

@ -0,0 +1,47 @@
import React from 'react';
import { useState } from 'react';
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 (
<>
<div className="w-full bg-white text-black ">
{/* FAQ Section */}
<div className="max-w-6xl p-12">
{faqs.map((faq, index) => (
<div key={index} className=" m-4">
<button
className=" bg-red-600 text-white text-lg font-semibold py-3 px-4 flex justify-between items-center rounded-md m-2"
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>
</div>
</>
);
}
export default Faq;

46
src/User/Footer.js Normal file
View File

@ -0,0 +1,46 @@
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>
<h1 className="text-3xl md:text-4xl font-bold uppercase text-red-600">
<img
src="./logo.PNG"
alt="Advertisement"
className="w-28 h-30 m-auto"
/>
</h1>
<p>
At *Matka Satta Daily.com*, we provide accurate results, expert tips, and daily charts for all major Matka games. Whether you're looking for Desawar Matka results at 5:00 AM or Gali Matka results at 11:30 PM, we’ve got you covered. Stay ahead of the game with our live updates and expert strategies.
</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;

49
src/User/Header.js Normal file
View File

@ -0,0 +1,49 @@
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 */}
<header className="bg-[#182633] 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="h-24 m-auto"
/>
</Link>
{/* Desktop Menu */}
<nav className="hidden md:flex space-x-6">
<Link to="/games" className="hover:text-gray-200 transition">Results</Link>
<Link to="/" className="hover:text-gray-200 transition">FAQs</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>
</>
);
}

293
src/User/Herosection.js Normal file
View File

@ -0,0 +1,293 @@
import React, { useState, useEffect } from 'react';
import { RefreshCw, Clock, ChevronRight, ChevronLeft } from 'lucide-react';
import axios from 'axios';
import TeamTime from './TeamTime';
const HeroSection = () => {
const [todaysMatches, setTodaysMatches] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [currentDate, setCurrentDate] = useState('');
const [activeTeamIndex, setActiveTeamIndex] = useState(0);
// API URL
const API_URL = 'http://localhost:5500/api';
// Format time
const formatTime = (timeString) => {
try {
const date = new Date(timeString);
return date.toLocaleTimeString("en-US", { hour: '2-digit', minute: '2-digit', hour12: true });
} catch (e) {
return "XX:XX";
}
};
// Fetch today's matches
useEffect(() => {
const fetchTodaysMatches = async () => {
try {
setLoading(true);
// Get today's date for display
const today = new Date();
setCurrentDate(today.toLocaleDateString('en-US', {
weekday: 'short',
month: 'long',
day: 'numeric',
year: 'numeric'
}));
// Get today's results
const todayResultsResponse = await axios.get(`${API_URL}/today`);
const todayResults = todayResultsResponse.data;
// Group by team
const teamResults = {};
todayResults.forEach(result => {
if (!teamResults[result.team]) {
teamResults[result.team] = [];
}
teamResults[result.team].push({
result: result.visible_result,
time: formatTime(result.result_time),
upcoming: new Date(result.result_time) > new Date()
});
});
// Convert to array for display
const groupedResults = Object.entries(teamResults).map(([team, results]) => ({
team,
results: results.sort((a, b) => a.upcoming - b.upcoming)
}));
setTodaysMatches(groupedResults);
setLoading(false);
} catch (err) {
console.error("Error fetching today's matches:", err);
setError("Failed to load today's match data. Please try again later.");
setLoading(false);
}
};
fetchTodaysMatches();
}, []);
// Navigation handlers
const handleNext = () => {
if (todaysMatches.length > 0) {
setActiveTeamIndex((prevIndex) =>
prevIndex === todaysMatches.length - 1 ? 0 : prevIndex + 1
);
}
};
const handlePrev = () => {
if (todaysMatches.length > 0) {
setActiveTeamIndex((prevIndex) =>
prevIndex === 0 ? todaysMatches.length - 1 : prevIndex - 1
);
}
};
// Refresh data
const handleRefresh = () => {
setLoading(true);
setError(null);
const fetchData = async () => {
try {
const todayResultsResponse = await axios.get(`${API_URL}/today`);
const todayResults = todayResultsResponse.data;
const teamResults = {};
todayResults.forEach(result => {
if (!teamResults[result.team]) {
teamResults[result.team] = [];
}
teamResults[result.team].push({
result: result.visible_result,
time: formatTime(result.result_time),
upcoming: new Date(result.result_time) > new Date()
});
});
const groupedResults = Object.entries(teamResults).map(([team, results]) => ({
team,
results: results.sort((a, b) => a.upcoming - b.upcoming)
}));
setTodaysMatches(groupedResults);
setLoading(false);
} catch (err) {
setError("Failed to refresh match data. Please try again later.");
setLoading(false);
}
};
fetchData();
};
// Render boxes similar to lottery design
return (
<div className="flex flex-col md:flex-row gap-4">
{/* Today's Matches Box */}
<div className="bg-gray-200 rounded-lg shadow-lg overflow-hidden w-full md:w-1/3">
<div className="bg-white p-4 rounded-t-lg">
<h2 className="text-center font-bold text-xl text-gray-800">Winning Numbers</h2>
</div>
<div className="p-4 text-center">
<h3 className="font-medium text-lg mb-4">{currentDate}</h3>
{loading ? (
<div className="flex justify-center p-6">
<RefreshCw size={24} className="animate-spin text-red-600" />
</div>
) : error ? (
<div className="bg-red-100 border border-red-400 text-red-700 p-3 rounded">
<p>{error}</p>
</div>
) : todaysMatches.length > 0 ? (
<div className="relative">
{/* Navigation buttons */}
<button
onClick={handlePrev}
className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-1 z-10"
>
<ChevronLeft size={20} />
</button>
<button
onClick={handleNext}
className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-1 z-10"
>
<ChevronRight size={20} />
</button>
{/* Current team results */}
<div className="py-2">
<div className="bg-gray-800 text-white p-2 font-semibold rounded-t mb-2">
{todaysMatches[activeTeamIndex]?.team || "No Team"}
</div>
<div className="overflow-y-auto max-h-48">
{todaysMatches[activeTeamIndex]?.results.map((result, idx) => (
<div key={idx} className="flex justify-between items-center bg-white p-3 mb-2 rounded shadow">
<div className="flex items-center gap-2">
<Clock size={16} className="text-gray-500" />
<span>{result.time}</span>
</div>
<div className={`text-xl font-bold ${result.upcoming ? 'text-gray-400' : 'text-red-600'}`}>
{result.upcoming ? "Upcoming" : result.result}
</div>
</div>
))}
</div>
</div>
{/* Team indicators */}
<div className="flex justify-center gap-1 mt-2">
{todaysMatches.map((_, idx) => (
<div
key={idx}
className={`h-2 w-2 rounded-full ${idx === activeTeamIndex ? 'bg-red-600' : 'bg-gray-400'}`}
/>
))}
</div>
</div>
) : (
<div className="text-center p-6 text-gray-500">
No match results available for today.
</div>
)}
<button
className="bg-red-600 text-white px-6 py-2 rounded-full font-bold mt-4 hover:bg-red-700 transition"
onClick={handleRefresh}
>
PLay Now
</button>
{/* <div className="mt-4 grid gap-2">
<button className="bg-gray-800 text-white p-3 rounded font-medium">
VIEW RESULTS
</button>
<button className="bg-gray-800 text-white p-3 rounded font-medium">
CHECK YOUR NUMBERS
</button>
</div> */}
</div>
</div>
{/* Next Drawing Box */}
<div className="bg-gray-200 rounded-lg shadow-lg overflow-hidden w-full md:w-1/3">
<div className="bg-white p-4 rounded-t-lg">
<h2 className="text-center font-bold text-xl text-gray-800">Next Drawing</h2>
</div>
<div className="p-4 text-center">
<h3 className="font-medium text-lg mb-4">Sat, Mar 22, 2025</h3>
<div className="flex justify-center gap-2 my-4">
<div className="bg-gray-800 text-white w-12 h-12 flex items-center justify-center rounded">
<div className="text-xl font-bold">67</div>
</div>
<div className="bg-gray-800 text-white w-12 h-12 flex items-center justify-center rounded">
<div className="text-xl font-bold">58</div>
</div>
<div className="bg-gray-800 text-white w-12 h-12 flex items-center justify-center rounded">
<div className="text-xl font-bold">11</div>
</div>
</div>
<div className="flex justify-center gap-2 text-xs text-gray-600 mb-4">
<div className="text-center w-12">HOURS</div>
<div className="text-center w-12">MINUTES</div>
<div className="text-center w-12">SECONDS</div>
</div>
<div className="bg-gray-800 text-yellow-400 p-2 font-bold mb-2">
ESTIMATED JACKPOT
</div>
<div className="text-red-600 text-4xl font-bold mb-4">
$444 Million
</div>
</div>
</div>
{/* Winners Box */}
<div className="bg-gray-200 rounded-lg shadow-lg overflow-hidden w-full md:w-1/3">
<div className="bg-white p-4 rounded-t-lg">
<h2 className="text-center font-bold text-xl text-gray-800">Today's Timing </h2>
</div>
<div className="p-4">
{/* <h3 className="font-medium text-lg mb-4">{currentDate}</h3> */}
{/* <div className="text-center mb-4">
<div className="font-bold">Team Alpha</div>
<div className="text-2xl font-bold">JACKPOT WINNERS</div>
<div className="text-red-600 text-xl">None</div>
</div>
<div className="text-center mb-4">
<div className="font-bold">Team Beta</div>
<div className="text-2xl font-bold">$2 MILLION WINNERS</div>
<div className="text-red-600 text-xl">CO, TX</div>
</div>
<div className="text-center">
<div className="font-bold">MATCH 5</div>
<div className="text-2xl font-bold">$1 MILLION WINNERS</div>
<div className="text-red-600 text-xl">None</div>
</div> */}
<TeamTime/>
</div>
</div>
</div>
);
};
export default HeroSection;

207
src/User/Home.js Normal file
View File

@ -0,0 +1,207 @@
import React, { useState, useEffect } from 'react';
import { BarChart2, Calendar, RefreshCw, Clock, ChevronLeft, ChevronRight } from 'lucide-react';
import axios from 'axios';
import Footer from './Footer';
import Header from './Header';
import Translate from './Translate';
import HeroSection from './Herosection';
const Home = () => {
const [teams, setTeams] = useState([]);
const [dates, setDates] = useState([]);
const [selectedTeam, setSelectedTeam] = useState(null);
const [showChartView, setShowChartView] = useState(false);
const [showCalendar, setShowCalendar] = useState(false);
const [currentTime, setCurrentTime] = useState("");
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [calendarData, setCalendarData] = useState([]);
const [currentMonth, setCurrentMonth] = useState(new Date());
const [upcomingMatches, setUpcomingMatches] = useState([]);
// API URL
const API_URL = 'http://localhost:5500/api';
// Format time
const formatTime = (timeString) => {
try {
const date = new Date(timeString);
return date.toLocaleTimeString("en-US", { hour: '2-digit', minute: '2-digit', hour12: true });
} catch (e) {
return "XX:XX";
}
};
// Check if a match is upcoming
const isUpcoming = (resultTime) => {
try {
const now = new Date();
const matchTime = new Date(resultTime);
return matchTime > now;
} catch (e) {
return false;
}
};
// Fetch teams data
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
// Get all teams
const teamsResponse = await axios.get(`${API_URL}/teams`);
// Get today's date and format it
const today = new Date();
const todayFormatted = today.toISOString().split('T')[0];
// Get yesterday's date and format it
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
const yesterdayFormatted = yesterday.toISOString().split('T')[0];
// Set dates for display
setDates([yesterdayFormatted, todayFormatted]);
// Get today's results
const todayResultsResponse = await axios.get(`${API_URL}/results/daily?date=${todayFormatted}`);
const todayResults = todayResultsResponse.data;
// Get yesterday's results
const yesterdayResultsResponse = await axios.get(`${API_URL}/results/daily?date=${yesterdayFormatted}`);
const yesterdayResults = yesterdayResultsResponse.data;
// Process upcoming matches
const upcoming = todayResults.filter(result => isUpcoming(result.result_time));
setUpcomingMatches(upcoming);
// Combine team data with results
const teamsWithResults = teamsResponse.data.map(team => {
// Get all results for this team
const yesterdayTeamResults = yesterdayResults.filter(r => r.team === team.name);
const todayTeamResults = todayResults.filter(r => r.team === team.name);
// Create result arrays for both days
const yesterdayResultsArr = yesterdayTeamResults.map(r => ({
result: r.visible_result,
time: formatTime(r.result_time)
}));
const todayResultsArr = todayTeamResults
.filter(r => !isUpcoming(r.result_time))
.map(r => ({
result: r.visible_result,
time: formatTime(r.result_time)
}));
// Extract latest scheduled time
let latestTime = "XX:XX";
const latestTodayResult = todayTeamResults
.sort((a, b) => new Date(b.result_time) - new Date(a.result_time))
.find(r => r.result_time);
if (latestTodayResult) {
latestTime = formatTime(latestTodayResult.result_time);
}
return {
id: team.id,
name: team.name,
time: latestTime,
results: {
[yesterdayFormatted]: yesterdayResultsArr,
[todayFormatted]: todayResultsArr
}
};
});
setTeams(teamsWithResults);
setLoading(false);
} catch (err) {
console.error("Error fetching data:", err);
setError("Failed to load team data. Please try again later.");
setLoading(false);
}
};
fetchData();
// Update current time every minute
const interval = setInterval(() => {
const now = new Date();
const formattedTime = now.toLocaleString("en-IN", { timeZone: "Asia/Kolkata" });
setCurrentTime(formattedTime);
}, 60000);
// Set initial time
const now = new Date();
const formattedTime = now.toLocaleString("en-IN", { timeZone: "Asia/Kolkata" });
setCurrentTime(formattedTime);
return () => clearInterval(interval);
}, []);
return (
<div className="bg-gray-200 min-h-screen">
<Translate/>
<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">
<img
src="./logo.PNG"
alt="Advertisement"
className="w-28 h-30 m-auto"
/>
</h1> */}
{/* Advertisement Banner */}
{/* <div className="mt-4 flex justify-center items- border w-full lg:w-3/4 m-auto">
<img
src="./add.png"
alt="Advertisement"
className="w-auto max-w-4xl h-14"
/>
</div> */}
{/* Disclaimer */}
<p className="mt-4 text-black text-sm p-1 w-full lg:w-3/4 m-auto">
Welcome to *Matka Satta Daily.com, your ultimate destination for accurate and timely Matka Satta results. We provide live updates, expert tips, and daily charts for all major Matka games, including **Desawar, **Delhi Bazar, **Shri Ganesh, **Faridabad, **Ghaziabad, and **Gali Matka*. Whether you're looking for results, guessing strategies, or historical data, we’ve got you covered.
</p>
{/* Informational Text */}
<p className="mt-2 text-red-400 text-sm font-medium bg-gray-900 p-2 rounded w-full lg:w-3/4 m-auto">
Matka Satta Daily Results 2025: Desawar, Delhi Bazar, Shri Ganesh, Faridabad, Ghaziabad, and Gali Matka Live Updates
</p>
{/* Warning Message */}
<p className="mt-2 text-white font-bold bg-red-700 p-2 rounded w-full lg:w-3/4 m-auto">
Please note, do not give any money to anyone in the name of leaked game, neither before nor after - Thank you
</p>
{/* Contact Link */}
<p className="mt-2 text-white font-medium bg-gray-800 p-2 rounded w-full lg:w-3/4 m-auto">
Click to contact us ➡ <a href="#" className="underline text-red-400 hover:text-red-300">Click Here</a>
</p>
{/* Timestamp */}
<p className="mt-2 text-red-400 text-lg text-bold">
Updated: {currentTime} IST.
</p>
</div>
<div className="max-w-6xl mx-auto p-4">
<HeroSection />
</div>
<Footer />
</div>
);
};
export default Home;

36
src/User/TeamTime.js Normal file
View File

@ -0,0 +1,36 @@
import { useState } from "react";
const TeamTime = () => {
const [teams, setTeams] = useState([
{ name: "GALI MATKA", time: "6:00 PM" },
{ name: "GHAZIABAD MATKA", time: "4:00 PM" },
{ name: "FARIDABAD MATKA", time: "12:30 PM" },
{ name: "SHRI GANESH MATKA", time: "11:00 AM" },
{ name: "DELHI BAZAR MATKA", time: "9:30 AM" },
{ name: "DESAWAR MATKA", time: "5:00 AM" },
]);
return (
<div className="container mx-auto p-4">
{/* <h2 className="text-2xl font-bold mb-4">Team Match Schedule</h2> */}
<table className="table-auto w-full border border-gray-900">
<thead>
<tr className="bg-gray-300">
<th className="border px-4 py-2">Team Name</th>
<th className="border px-4 py-2">Timing</th>
</tr>
</thead>
<tbody>
{teams.map((team, index) => (
<tr key={index} className="border">
<td className="border px-4 py-2">{team.name}</td>
<td className="border px-4 py-2">{team.time}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default TeamTime;

64
src/User/Translate.js Normal file
View File

@ -0,0 +1,64 @@
import { useState } from "react";
import { Globe } from "lucide-react";
export default function Translate() {
const [currentLanguage, setCurrentLanguage] = useState("English");
// Function to handle language change
const changeLanguage = (language) => {
setCurrentLanguage(language);
// This would integrate with Google Translate API
// For actual implementation, you would need to use the Google Translate Element
if (language === "English") {
// Set to English
if (window.googleTranslateElementInit) {
const selectElement = document.querySelector('.goog-te-combo');
if (selectElement) {
selectElement.value = 'en';
selectElement.dispatchEvent(new Event('change'));
}
}
} else if (language === "Hindi") {
// Set to Hindi
if (window.googleTranslateElementInit) {
const selectElement = document.querySelector('.goog-te-combo');
if (selectElement) {
selectElement.value = 'hi';
selectElement.dispatchEvent(new Event('change'));
}
}
}
};
return (
<>
{/* Translation Bar */}
<div className="bg-gray-800 text-white py-1">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div className="flex items-center">
<Globe size={18} className="mr-2" />
<span className="text-sm">Translate:</span>
</div>
<div className="flex space-x-4">
<button
onClick={() => changeLanguage("English")}
className={`text-sm px-2 py-1 rounded ${currentLanguage === "English" ? "bg-blue-600" : "hover:bg-gray-700"}`}
>
English
</button>
<button
onClick={() => changeLanguage("Hindi")}
className={`text-sm px-2 py-1 rounded ${currentLanguage === "Hindi" ? "bg-blue-600" : "hover:bg-gray-700"}`}
>
हिन्दी
</button>
{/* Hidden div for Google Translate Element */}
<div id="google_translate_element" className="hidden"></div>
</div>
</div>
</div>
</>
);
}

2
src/pages/Faq.js
View File

@ -20,7 +20,7 @@ import { useState } from 'react';
{/* FAQ Section */}
<div className="max-w-6xl mx-auto py-6">
{faqs.map((faq, index) => (
<div key={index} className="mb-2">
<div key={index} className="m-4">
<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)}

8
src/pages/Footer.js
View File

@ -21,11 +21,9 @@ const Footer = () => {
className="w-28 h-30 m-auto"
/>
</h1>
<p className="mt-2">
The Multi-State 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>
At *Matka Satta Daily.com*, we provide accurate results, expert tips, and daily charts for all major Matka games. Whether you're looking for Desawar Matka results at 5:00 AM or Gali Matka results at 11:30 PM, we’ve got you covered. Stay ahead of the game with our live updates and expert strategies.
</p>
<p className="mt-2">
In the event of a discrepancy, the official drawing results shall

187
src/pages/GameList.js
View File

@ -143,7 +143,7 @@ const GameList = () => {
}, []);
// Show chart for selected team
const handleViewChart = async (team) => {
const handleViewChart = async (team) => {
try {
setLoading(true);
// Get monthly results for the selected team
@ -162,10 +162,47 @@ const handleViewChart = async (team) => {
console.log("API Response:", response.data);
// Keep the original data structure
// Process data to group by date - handle multiple results per day
const processedData = [];
const resultsMap = new Map();
if (Array.isArray(response.data)) {
// Group results by date
response.data.forEach(item => {
if (!item.result_date) return;
const dateKey = new Date(item.result_date).toISOString().split('T')[0];
if (!resultsMap.has(dateKey)) {
resultsMap.set(dateKey, []);
}
resultsMap.get(dateKey).push({
result_date: item.result_date,
result_time: item.result_time,
result: item.visible_result || item.result
});
});
// Convert map to array and sort by date
resultsMap.forEach((dayResults, dateKey) => {
// Sort results by time for each day
dayResults.sort((a, b) => new Date(a.result_time) - new Date(b.result_time));
// Add each result to the processed data
dayResults.forEach(result => {
processedData.push(result);
});
});
// Sort the final array by date
processedData.sort((a, b) => new Date(a.result_date) - new Date(b.result_date));
}
// Keep the original data structure but use processed data
setSelectedTeam({
...team,
chartData: response.data
chartData: processedData.length > 0 ? processedData : response.data
});
setShowChartView(true);
@ -177,7 +214,7 @@ const handleViewChart = async (team) => {
setLoading(false);
setShowChartView(false);
}
};
};
// Load calendar data
const loadCalendarData = async (year, month) => {
@ -298,10 +335,32 @@ const handleViewChart = async (team) => {
});
};
// Group chart data by date for display
const getGroupedChartData = () => {
if (!selectedTeam || !selectedTeam.chartData || !Array.isArray(selectedTeam.chartData)) {
return [];
}
const groupedData = new Map();
selectedTeam.chartData.forEach(item => {
if (!item.result_date) return;
const dateKey = new Date(item.result_date).toISOString().split('T')[0];
if (!groupedData.has(dateKey)) {
groupedData.set(dateKey, []);
}
groupedData.get(dateKey).push(item);
});
return groupedData;
};
return (
<div className="bg-gray-200 min-h-screen">
<Header/>
<Header />
<div className="max-w-6xl mx-auto p-4">
{error && (
@ -309,7 +368,7 @@ const handleViewChart = async (team) => {
<p>{error}</p>
</div>
)}
<Today/>
<Today />
<div className="bg-red-600 p-4 text-white text-center text-xl font-bold rounded-t-lg shadow-lg">
Satta Result of {dates.length > 1 && formatDate(dates[1])} & {dates.length > 0 && formatDate(dates[0])}
@ -320,14 +379,6 @@ const handleViewChart = async (team) => {
<div className="text-lg font-semibold text-gray-800 mb-2 md:mb-0">Latest Results</div>
<div className="flex gap-2">
{/* <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
className="bg-red-600 text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-red-700 transition"
onClick={handleRefresh}
@ -377,7 +428,7 @@ const handleViewChart = async (team) => {
</div>
)}
{/* Chart View */}
{/* Chart View - FIXED TO HANDLE MULTIPLE RESULTS PER DAY */}
{!loading && showChartView && selectedTeam && (
<div className="bg-white p-4 mb-4 rounded shadow">
<h2 className="text-lg font-semibold mb-4 text-red-600">Monthly Chart: {selectedTeam.name}</h2>
@ -391,14 +442,21 @@ const handleViewChart = async (team) => {
</tr>
</thead>
<tbody>
{selectedTeam.chartData && selectedTeam.chartData.map((item, index) => (
{selectedTeam.chartData && selectedTeam.chartData.length > 0 ? (
selectedTeam.chartData.map((item, index) => (
<tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
<td className="border border-gray-300 p-2">{new Date(item.result_date).toLocaleDateString()}</td>
<td className="border border-gray-300 p-2 text-center">{formatTime(item.result_time)}</td>
<td className="border border-gray-300 p-2 text-right font-bold">{item.result}</td>
<td className="border border-gray-300 p-2">
{item.result_time ? new Date(item.result_time).toLocaleDateString() : "N/A"}
</td>
<td className="border border-gray-300 p-2 text-center">
{item.result_time ? formatTime(item.result_time) : "N/A"}
</td>
<td className="border border-gray-300 p-2 text-right font-bold">
{item.visible_result || item.result || "N/A"}
</td>
</tr>
))}
{(!selectedTeam.chartData || selectedTeam.chartData.length === 0) && (
))
) : (
<tr>
<td colSpan="3" className="border border-gray-300 p-2 text-center">No chart data available</td>
</tr>
@ -522,7 +580,6 @@ const handleViewChart = async (team) => {
<tr key={team.id} className="border-b hover:bg-gray-50">
<td className="p-3">
<div className="font-semibold text-red-600">{team.name}</div>
<div className="text-sm text-gray-500">at {team.time}</div>
<div className="text-xs text-black underline mt-1 cursor-pointer hover:text-red-600" onClick={() => handleViewChart(team)}>Record Chart</div>
</td>
@ -583,7 +640,89 @@ const handleViewChart = async (team) => {
</div>
)}
</div>
<Footer/>
<div className="max-w-6xl mx-auto p-6 bg-white rounded-lg shadow-lg ">
{/* Section 7 */}
<section className="mb-10">
<div className="border-l-4 border-red-600 pl-4">
<h2 className="text-2xl font-bold text-red-600 mb-4">Expert Matka Satta Daily Tips for 2025</h2>
</div>
<div className="mt-4 bg-gray-50 p-6 rounded-lg">
<p className="mb-3">Here are some expert tips to improve your Matka Satta game:</p>
<ul className="space-y-2">
<li className="flex items-start">
<span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0 mt-0.5">1</span>
<span><strong>Follow the Charts:</strong> Use daily charts to identify patterns and trends.</span>
</li>
<li className="flex items-start">
<span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0 mt-0.5">2</span>
<span><strong>Analyze Historical Data:</strong> Study past results to predict future outcomes.</span>
</li>
<li className="flex items-start">
<span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0 mt-0.5">3</span>
<span><strong>Use Expert Tips:</strong> Follow our daily tips and strategies for better results.</span>
</li>
<li className="flex items-start">
<span className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0 mt-0.5">4</span>
<span><strong>Stay Updated:</strong> Check our platform for live updates and accurate results.</span>
</li>
</ul>
</div>
</section>
{/* Divider */}
<hr className="my-8 border-gray-200" />
{/* Section 8 */}
<section className="mb-10">
<div className="border-l-4 border-red-600 pl-4">
<h2 className="text-2xl font-bold text-red-600 mb-4">Matka Satta Daily Chart for 2025</h2>
</div>
<div className="mt-4 bg-gray-50 p-6 rounded-lg">
<p className="leading-relaxed">
Our <strong className="text-green-600">Matka Satta daily chart</strong> provides historical data and trends
for all major games, including Desawar, Delhi Bazar, Shri Ganesh, Faridabad, Ghaziabad,
and Gali Matka. Use the chart to improve your guessing accuracy and win more often.
</p>
{/* Sample chart preview */}
<div className="mt-6 bg-white p-4 border border-gray-200 rounded-lg shadow-sm">
<div className="flex justify-between items-center mb-4">
<h3 className="font-medium">Popular Matka Games</h3>
<span className="text-sm text-gray-500">Last Updated: March 24, 2025</span>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
{["Desawar", "Delhi Bazar", "Shri Ganesh", "Faridabad", "Ghaziabad", "Gali Matka"].map((game) => (
<div key={game} className="p-3 bg-blue-50 rounded border border-blue-100 text-center">
<p className="font-medium text-blue-700">{game}</p>
{/* <p className="text-sm text-gray-600 mt-1">View Chart</p> */}
</div>
))}
</div>
</div>
</div>
</section>
{/* Divider */}
<hr className="my-8 border-gray-200" />
{/* Conclusion */}
{/* <section className="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-6 rounded-lg">
<h2 className="text-xl font-bold mb-4">Conclusion</h2>
<p className="leading-relaxed">
At <strong>Matka Satta Daily.com</strong>, we provide accurate results, expert tips, and daily charts
for all major Matka games. Whether you're looking for Desawar Matka results at 5:00 AM or
Gali Matka results at 11:30 PM, we've got you covered. Stay ahead of the game with our
live updates and expert strategies.
</p>
</section> */}
</div>
<br></br>
<Footer />
</div>
);
};

39
src/pages/Header.js
View File

@ -5,16 +5,48 @@ import { Link } from "react-router-dom";
export default function Header() {
const [isOpen, setIsOpen] = useState(false);
// Add this effect to your App.js or index.js instead
/*
useEffect(() => {
const script = document.createElement('script');
script.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
script.async = true;
document.body.appendChild(script);
window.googleTranslateElementInit = () => {
new window.google.translate.TranslateElement(
{ pageLanguage: 'en', includedLanguages: 'en,hi' },
'google_translate_element'
);
};
return () => {
document.body.removeChild(script);
};
}, []);
*/
return (
<>
{/* Translation Bar */}
{/* <div className="bg-gray-800 text-white py-2">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div id="google_translate_element"></div>
</div>
</div> */}
{/* Header */}
<header className="bg-[#182633] 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
<Link to="/" className="text-2xl font-bold">
<img
src="./logo.PNG"
alt="Advertisement"
className=" h-24 m-auto"
/></Link>
className="h-28 m-auto"
/>
</Link>
{/* Desktop Menu */}
<nav className="hidden md:flex space-x-6">
@ -40,5 +72,6 @@ export default function Header() {
)}
</div>
</header>
</>
);
}

23
src/pages/Home2.js
View File

@ -4,6 +4,7 @@ import axios from 'axios';
import TodaysMatch from './TodaysMatch';
import Footer from './Footer';
import Header from './Header';
import Translate from '../Translate';
const Home2 = () => {
const [teams, setTeams] = useState([]);
@ -304,7 +305,8 @@ const Home2 = () => {
return (
<div className="bg-gray-200 min-h-screen">
<Header/>
<Translate/>
<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">
@ -323,25 +325,26 @@ const Home2 = () => {
className="w-auto max-w-4xl h-14"
/>
</div> */}
{/* Disclaimer */}
<p className="mt-4 text-black text-sm p-1 w-full lg:w-3/4 m-auto">
Welcome to *Matka Satta Daily.com, your ultimate destination for accurate and timely Matka Satta results. We provide live updates, expert tips, and daily charts for all major Matka games, including **Desawar, **Delhi Bazar, **Shri Ganesh, **Faridabad, **Ghaziabad, and **Gali Matka*. Whether you're looking for results, guessing strategies, or historical data, we’ve got you covered.
</p>
{/* Informational Text */}
<p className="mt-4 text-black text-sm p-1 w-full lg:w-3/4 m-auto">
Delhi Diamond Satta Result And Monthly Satta Chart of March 2025 With Combined Chart of Gali, Desawar, Ghaziabad, Faridabad And Shri Ganesh from Matka Satta Fast, Matka Satta Result, Matka Satta Chart, Black Matka Satta and Matka Satta 786.
<p className="mt-2 text-red-400 text-sm font-medium bg-gray-900 p-2 rounded w-full lg:w-3/4 m-auto">
Matka Satta Daily Results 2025: Desawar, Delhi Bazar, Shri Ganesh, Faridabad, Ghaziabad, and Gali Matka Live Updates
</p>
{/* Disclaimer */}
<p className="mt-2 text-red-400 text-sm font-medium bg-gray-900 p-2 rounded w-full lg:w-3/4 m-auto">
Matka-Satta .com is the most popular gaming discussion forum for players to use freely and we are not in partnership with any gaming company.
</p>
{/* Warning Message */}
<p className="mt-2 text-white font-bold bg-red-700 p-2 rounded w-full lg:w-3/4 m-auto">
कृपया ध्यान दें, लीक गेम के नाम पर किसी को कोई पैसा न दें, ना पहले ना बाद में - धन्यवाद
Please note, do not give any money to anyone in the name of leaked game, neither before nor after - Thank you
</p>
{/* Contact Link */}
<p className="mt-2 text-white font-medium bg-gray-800 p-2 rounded w-full lg:w-3/4 m-auto">
हमसे संपर्क करने के लिए ➡ <a href="#" className="underline text-red-400 hover:text-red-300">यहाँ क्लिक करें</a>
Click to contact us ➡ <a href="#" className="underline text-red-400 hover:text-red-300">Click Here</a>
</p>
{/* Timestamp */}
@ -354,7 +357,7 @@ const Home2 = () => {
<TodaysMatch />
</div>
<Footer/>
<Footer />
</div>
);
};

309
src/pages/Random.js Normal file
View File

@ -0,0 +1,309 @@
import React, { useState, useEffect } from 'react';
import { RefreshCw, Clock, ChevronDown, ChevronUp, Calendar, AlertTriangle } from 'lucide-react';
const MatkaResultsDashboard = () => {
const [todaysResults, setTodaysResults] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [currentDate, setCurrentDate] = useState('');
const [expandedTeams, setExpandedTeams] = useState({});
// Matka teams and their scheduled times
const matkaTeams = [
{
team: "Desawar Matka",
time: "5:00 AM",
description: "Start your day with the latest Desawar Matka results at 5:00 AM. Our platform provides real-time updates and accurate results to help you stay ahead.",
tip: "Analyze the Desawar Matka chart to identify patterns and trends for better predictions."
},
{
team: "Delhi Bazar Matka",
time: "3:00 PM",
description: "Get the Delhi Bazar Matka results at 3:00 PM every day. Our live updates ensure you never miss a result.",
tip: "Follow the Delhi Bazar Matka chart to track historical results and predict future outcomes."
},
{
team: "Shri Ganesh Matka",
time: "4:30 PM",
description: "Stay updated with the Shri Ganesh Matka results at 4:30 PM. Our platform offers live updates, daily charts, and expert tips to help you make the right decisions.",
tip: "Use the Shri Ganesh Matka chart to analyze trends and improve your guessing accuracy."
},
{
team: "Faridabad Matka",
time: "6:00 PM",
description: "The Faridabad Matka results are declared at 6:00 PM every day. Check our platform for live updates, daily charts, and expert tips.",
tip: "Combine historical data with our expert tips for better predictions."
},
{
team: "Ghaziabad Matka",
time: "9:30 PM",
description: "Get the latest Ghaziabad Matka results at 9:30 PM. Our platform provides real-time updates, daily charts, and expert tips to help you stay ahead.",
tip: "Follow the Ghaziabad Matka chart to identify patterns and trends."
},
{
team: "Gali Matka",
time: "11:30 PM",
description: "End your day with the Gali Matka results at 11:30 PM. Our platform offers live updates, daily charts, and expert tips to help you make informed decisions.",
tip: "Use the Gali Matka chart to track historical results and improve your guessing accuracy."
}
];
// Format time
const formatTime = (timeString) => {
return timeString;
};
// Toggle team expansion
const toggleTeamExpansion = (team) => {
setExpandedTeams(prev => ({
...prev,
[team]: !prev[team]
}));
};
// Generate mock results based on current time
useEffect(() => {
const generateMockResults = () => {
try {
setLoading(true);
// Get today's date for display
const today = new Date();
setCurrentDate(today.toLocaleDateString('en-US', {
weekday: 'short',
month: 'long',
day: 'numeric',
year: 'numeric'
}));
// Generate mock results for each team
const results = matkaTeams.map(teamData => {
// Parse the time
const [hours, minutes] = teamData.time.split(':');
const ampm = teamData.time.includes('PM') ? 'PM' : 'AM';
const hour = parseInt(hours) + (ampm === 'PM' && parseInt(hours) !== 12 ? 12 : 0);
// Create timestamp for today with the result time
const resultTime = new Date();
resultTime.setHours(hour, parseInt(minutes), 0);
// Generate random result for completed games
const isUpcoming = resultTime > today;
const result = isUpcoming ? null : `${Math.floor(Math.random() * 100)}-${Math.floor(Math.random() * 10)}`;
return {
team: teamData.team,
results: [{
result,
time: teamData.time,
timestamp: resultTime,
upcoming: isUpcoming,
description: teamData.description,
tip: teamData.tip
}],
upcomingCount: isUpcoming ? 1 : 0,
completedCount: isUpcoming ? 0 : 1
};
});
// Set all teams expanded by default
const expandedState = {};
matkaTeams.forEach(team => {
expandedState[team.team] = true;
});
setExpandedTeams(expandedState);
setTodaysResults(results);
setLoading(false);
} catch (err) {
console.error("Error generating mock results:", err);
setError("Failed to load today's match data. Please try again later.");
setLoading(false);
}
};
generateMockResults();
}, []);
// Refresh data
const handleRefresh = () => {
setLoading(true);
setError(null);
// Generate new mock results
setTimeout(() => {
const today = new Date();
// Update results - simulate some changes
const updatedResults = todaysResults.map(teamData => {
const resultTime = new Date(teamData.results[0].timestamp);
const isUpcoming = resultTime > today;
const result = isUpcoming ? null : `${Math.floor(Math.random() * 100)}-${Math.floor(Math.random() * 10)}`;
return {
...teamData,
results: [{
...teamData.results[0],
result,
upcoming: isUpcoming
}],
upcomingCount: isUpcoming ? 1 : 0,
completedCount: isUpcoming ? 0 : 1
};
});
setTodaysResults(updatedResults);
setLoading(false);
}, 1000);
};
// Get status badge
const getStatusBadge = (result) => {
if (result.upcoming) {
return (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
Upcoming
</span>
);
}
return (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
Completed
</span>
);
};
return (
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
{/* Header */}
<div className="bg-gradient-to-r from-red-600 to-red-800 p-4 text-white">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Today's Matka Results</h1>
<div className="flex items-center space-x-2">
<Calendar className="h-5 w-5" />
<span className="font-medium">{currentDate}</span>
</div>
</div>
</div>
{/* Controls */}
<div className="bg-gray-50 p-4 flex justify-between items-center border-b">
<div className="text-sm font-medium text-gray-500">
{todaysResults.length > 0 ?
`${todaysResults.length} Matka results today` :
"No results scheduled"}
</div>
<button
className="bg-red-600 text-white px-4 py-2 rounded-md flex items-center gap-2 hover:bg-red-700 transition shadow-sm"
onClick={handleRefresh}
disabled={loading}
>
<RefreshCw size={16} className={loading ? "animate-spin" : ""} />
{loading ? "Refreshing..." : "Refresh"}
</button>
</div>
{/* Loading indicator */}
{loading && (
<div className="p-8 flex justify-center items-center">
<div className="flex items-center gap-2">
<RefreshCw size={24} className="animate-spin text-red-600" />
<span className="text-gray-600 font-medium">Loading Matka results...</span>
</div>
</div>
)}
{/* Error message */}
{error && (
<div className="bg-red-50 border-l-4 border-red-500 p-4 m-4">
<div className="flex">
<div className="flex-shrink-0">
<AlertTriangle className="h-5 w-5 text-red-400" />
</div>
<div className="ml-3">
<p className="text-sm text-red-700">{error}</p>
</div>
</div>
</div>
)}
{/* Results display */}
{!loading && !error && (
<div className="p-4">
{todaysResults.length > 0 ? (
<div className="space-y-4">
{todaysResults.map((teamData, index) => (
<div key={index} className="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
{/* Team header - clickable to expand/collapse */}
<div
className="bg-gradient-to-r from-gray-800 to-gray-700 text-white p-3 flex justify-between items-center cursor-pointer hover:from-gray-700 hover:to-gray-600 transition"
onClick={() => toggleTeamExpansion(teamData.team)}
>
<div className="font-bold text-lg">{teamData.team}</div>
<div className="flex items-center space-x-4">
<div className="text-xs bg-opacity-20 bg-white px-2 py-1 rounded-full">
{teamData.results[0].time}
</div>
{expandedTeams[teamData.team] ? (
<ChevronUp size={20} />
) : (
<ChevronDown size={20} />
)}
</div>
</div>
{/* Team results */}
{expandedTeams[teamData.team] && (
<div>
{teamData.results.map((result, idx) => (
<div key={idx}>
<div className={`p-4 flex justify-between items-center ${result.upcoming ? "bg-blue-50" : "bg-white"}`}>
<div className="flex items-center space-x-3">
<Clock size={16} className="text-gray-400" />
<span className="font-medium">{result.time}</span>
{getStatusBadge(result)}
</div>
<div className="text-xl font-bold">
{result.upcoming ? (
<span className="text-gray-400">--</span>
) : (
<span className="text-gray-800">{result.result}</span>
)}
</div>
</div>
{/* Description */}
<div className="px-4 py-3 bg-gray-50 border-t border-gray-100">
<p className="text-sm text-gray-700">{result.description}</p>
</div>
{/* Pro Tip */}
<div className="px-4 py-3 bg-yellow-50 border-t border-yellow-100">
<p className="text-sm text-yellow-800">
<span className="font-bold">Pro Tip:</span> {result.tip}
</p>
</div>
</div>
))}
</div>
)}
</div>
))}
</div>
) : (
<div className="text-center p-8">
<div className="mx-auto h-12 w-12 text-gray-400">
<Calendar className="h-12 w-12" />
</div>
<h3 className="mt-2 text-sm font-medium text-gray-900">No results today</h3>
<p className="mt-1 text-sm text-gray-500">There are no Matka results scheduled for today.</p>
</div>
)}
</div>
)}
</div>
);
};
export default MatkaResultsDashboard;

36
src/pages/Teams.js Normal file
View File

@ -0,0 +1,36 @@
import { useState } from "react";
const TeamMatchTable = () => {
const [teams, setTeams] = useState([
{ name: "GALI MATKA", time: "6:00 PM" },
{ name: "GHAZIABAD MATKA", time: "4:00 PM" },
{ name: "FARIDABAD MATKA", time: "12:30 PM" },
{ name: "SHRI GANESH MATKA", time: "11:00 AM" },
{ name: "DELHI BAZAR MATKA", time: "9:30 AM" },
{ name: "DESAWAR MATKA", time: "5:00 AM" },
]);
return (
<div className="container mx-auto p-4">
{/* <h2 className="text-2xl font-bold mb-4">Team Match Schedule</h2> */}
<table className="table-auto w-full border border-gray-900">
<thead>
<tr className="bg-gray-300">
<th className="border px-4 py-2">Team Name</th>
<th className="border px-4 py-2">Timing</th>
</tr>
</thead>
<tbody>
{teams.map((team, index) => (
<tr key={index} className="border">
<td className="border px-4 py-2">{team.name}</td>
<td className="border px-4 py-2">{team.time}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default TeamMatchTable;

105
src/pages/Today.js
View File

@ -1,9 +1,9 @@
import React, { useState, useEffect } from 'react';
import { RefreshCw, Clock, ChevronDown, ChevronUp, Calendar } from 'lucide-react';
import { RefreshCw, Clock, ChevronDown, ChevronUp, Calendar, AlertTriangle } from 'lucide-react';
import axios from 'axios';
const Today = () => {
const [todaysMatches, setTodaysMatches] = useState([]);
const MatkaResultsDashboard = () => {
const [todaysResults, setTodaysResults] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [currentDate, setCurrentDate] = useState('');
@ -12,6 +12,34 @@ const Today = () => {
// API URL
const API_URL = 'http://localhost:5500/api';
// Matka team descriptions and tips
const matkaTeamInfo = {
"Desawar Matka": {
description: "Start your day with the latest Desawar Matka results at 5:00 AM. Our platform provides real-time updates and accurate results to help you stay ahead.",
tip: "Analyze the Desawar Matka chart to identify patterns and trends for better predictions."
},
"Delhi Bazar Matka": {
description: "Get the Delhi Bazar Matka results at 3:00 PM every day. Our live updates ensure you never miss a result.",
tip: "Follow the Delhi Bazar Matka chart to track historical results and predict future outcomes."
},
"Shri Ganesh Matka": {
description: "Stay updated with the Shri Ganesh Matka results at 4:30 PM. Our platform offers live updates, daily charts, and expert tips to help you make the right decisions.",
tip: "Use the Shri Ganesh Matka chart to analyze trends and improve your guessing accuracy."
},
"Faridabad Matka": {
description: "The Faridabad Matka results are declared at 6:00 PM every day. Check our platform for live updates, daily charts, and expert tips.",
tip: "Combine historical data with our expert tips for better predictions."
},
"Ghaziabad Matka": {
description: "Get the latest Ghaziabad Matka results at 9:30 PM. Our platform provides real-time updates, daily charts, and expert tips to help you stay ahead.",
tip: "Follow the Ghaziabad Matka chart to identify patterns and trends."
},
"Gali Matka": {
description: "End your day with the Gali Matka results at 11:30 PM. Our platform offers live updates, daily charts, and expert tips to help you make informed decisions.",
tip: "Use the Gali Matka chart to track historical results and improve your guessing accuracy."
}
};
// Format time
const formatTime = (timeString) => {
try {
@ -30,9 +58,9 @@ const Today = () => {
}));
};
// Fetch today's matches
// Fetch today's results
useEffect(() => {
const fetchTodaysMatches = async () => {
const fetchTodaysResults = async () => {
try {
setLoading(true);
@ -45,7 +73,7 @@ const Today = () => {
year: 'numeric'
}));
// Get today's results
// Get today's results from API
const todayResultsResponse = await axios.get(`${API_URL}/today`);
const todayResults = todayResultsResponse.data;
@ -60,7 +88,9 @@ const Today = () => {
result: result.visible_result,
time: formatTime(result.result_time),
timestamp: new Date(result.result_time),
upcoming: new Date(result.result_time) > new Date()
upcoming: new Date(result.result_time) > new Date(),
description: matkaTeamInfo[result.team]?.description || "Stay updated with the latest results.",
tip: matkaTeamInfo[result.team]?.tip || "Check regularly for updates and follow trends."
});
});
@ -83,16 +113,16 @@ const Today = () => {
};
});
setTodaysMatches(groupedResults);
setTodaysResults(groupedResults);
setLoading(false);
} catch (err) {
console.error("Error fetching today's matches:", err);
setError("Failed to load today's match data. Please try again later.");
console.error("Error fetching today's results:", err);
setError("Failed to load today's Matka data. Please try again later.");
setLoading(false);
}
};
fetchTodaysMatches();
fetchTodaysResults();
}, []);
// Refresh data
@ -102,7 +132,7 @@ const Today = () => {
const fetchData = async () => {
try {
// Get today's results
// Get today's results from API
const todayResultsResponse = await axios.get(`${API_URL}/today`);
const todayResults = todayResultsResponse.data;
@ -117,7 +147,9 @@ const Today = () => {
result: result.visible_result,
time: formatTime(result.result_time),
timestamp: new Date(result.result_time),
upcoming: new Date(result.result_time) > new Date()
upcoming: new Date(result.result_time) > new Date(),
description: matkaTeamInfo[result.team]?.description || "Stay updated with the latest results.",
tip: matkaTeamInfo[result.team]?.tip || "Check regularly for updates and follow trends."
});
});
@ -134,10 +166,10 @@ const Today = () => {
};
});
setTodaysMatches(groupedResults);
setTodaysResults(groupedResults);
setLoading(false);
} catch (err) {
setError("Failed to refresh match data. Please try again later.");
setError("Failed to refresh Matka data. Please try again later.");
setLoading(false);
}
};
@ -155,8 +187,6 @@ const Today = () => {
);
}
// You could add logic here to style different results differently
// For example, showing wins in green, losses in red
return (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
Completed
@ -169,7 +199,7 @@ const Today = () => {
{/* Header */}
<div className="bg-gradient-to-r from-red-600 to-red-800 p-4 text-white">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Today's Matches</h1>
<h1 className="text-2xl font-bold">Today's Matka Results</h1>
<div className="flex items-center space-x-2">
<Calendar className="h-5 w-5" />
<span className="font-medium">{currentDate}</span>
@ -180,9 +210,9 @@ const Today = () => {
{/* Controls */}
<div className="bg-gray-50 p-4 flex justify-between items-center border-b">
<div className="text-sm font-medium text-gray-500">
{todaysMatches.length > 0 ?
`${todaysMatches.length} teams with matches today` :
"No matches scheduled"}
{todaysResults.length > 0 ?
`${todaysResults.length} teams with results today` :
"No results scheduled"}
</div>
<button
className="bg-red-600 text-white px-4 py-2 rounded-md flex items-center gap-2 hover:bg-red-700 transition shadow-sm"
@ -199,7 +229,7 @@ const Today = () => {
<div className="p-8 flex justify-center items-center">
<div className="flex items-center gap-2">
<RefreshCw size={24} className="animate-spin text-red-600" />
<span className="text-gray-600 font-medium">Loading match data...</span>
<span className="text-gray-600 font-medium">Loading Matka results...</span>
</div>
</div>
)}
@ -208,6 +238,9 @@ const Today = () => {
{error && (
<div className="bg-red-50 border-l-4 border-red-500 p-4 m-4">
<div className="flex">
<div className="flex-shrink-0">
<AlertTriangle className="h-5 w-5 text-red-400" />
</div>
<div className="ml-3">
<p className="text-sm text-red-700">{error}</p>
</div>
@ -218,9 +251,9 @@ const Today = () => {
{/* Results display */}
{!loading && !error && (
<div className="p-4">
{todaysMatches.length > 0 ? (
{todaysResults.length > 0 ? (
<div className="space-y-4">
{todaysMatches.map((teamData, index) => (
{todaysResults.map((teamData, index) => (
<div key={index} className="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
{/* Team header - clickable to expand/collapse */}
<div
@ -242,9 +275,10 @@ const Today = () => {
{/* Team results */}
{expandedTeams[teamData.team] && (
<div className="divide-y divide-gray-100">
<div>
{teamData.results.map((result, idx) => (
<div key={idx} className={`p-4 flex justify-between items-center ${result.upcoming ? "bg-blue-50" : "bg-white"}`}>
<div key={idx}>
<div className={`p-4 flex justify-between items-center ${result.upcoming ? "bg-blue-50" : "bg-white"}`}>
<div className="flex items-center space-x-3">
<Clock size={16} className="text-gray-400" />
<span className="font-medium">{result.time}</span>
@ -258,6 +292,19 @@ const Today = () => {
)}
</div>
</div>
{/* Description */}
<div className="px-4 py-3 bg-gray-50 border-t border-gray-100">
<p className="text-sm text-gray-700">{result.description}</p>
</div>
{/* Pro Tip */}
<div className="px-4 py-3 bg-yellow-50 border-t border-yellow-100">
<p className="text-sm text-yellow-800">
<span className="font-bold">Pro Tip:</span> {result.tip}
</p>
</div>
</div>
))}
</div>
)}
@ -269,8 +316,8 @@ const Today = () => {
<div className="mx-auto h-12 w-12 text-gray-400">
<Calendar className="h-12 w-12" />
</div>
<h3 className="mt-2 text-sm font-medium text-gray-900">No matches today</h3>
<p className="mt-1 text-sm text-gray-500">There are no matches scheduled for today.</p>
<h3 className="mt-2 text-sm font-medium text-gray-900">No results today</h3>
<p className="mt-1 text-sm text-gray-500">There are no Matka results scheduled for today.</p>
</div>
)}
</div>
@ -279,4 +326,4 @@ const Today = () => {
);
};
export default Today;
export default MatkaResultsDashboard;

19
src/pages/TodaysMatch.js
View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import { RefreshCw, Clock, ChevronRight, ChevronLeft } from 'lucide-react';
import axios from 'axios';
import TeamMatchTable from './Teams';
const TodaysMatch = () => {
const [todaysMatches, setTodaysMatches] = useState([]);
@ -254,25 +255,18 @@ const TodaysMatch = () => {
$444 Million
</div>
<div className="bg-gray-800 text-yellow-400 p-2 font-bold mb-2">
CASH VALUE
</div>
<div className="text-red-600 text-4xl font-bold">
$207.2 Million
</div>
</div>
</div>
{/* Winners Box */}
<div className="bg-gray-200 rounded-lg shadow-lg overflow-hidden w-full md:w-1/3">
<div className="bg-white p-4 rounded-t-lg">
<h2 className="text-center font-bold text-xl text-gray-800">Todays match</h2>
<h2 className="text-center font-bold text-xl text-gray-800">Today's Timing </h2>
</div>
<div className="p-4 text-center">
<h3 className="font-medium text-lg mb-4">Wed, Mar 21, 2025</h3>
<div className="p-4">
{/* <h3 className="font-medium text-lg mb-4">{currentDate}</h3> */}
<div className="text-center mb-4">
{/* <div className="text-center mb-4">
<div className="font-bold">Team Alpha</div>
<div className="text-2xl font-bold">JACKPOT WINNERS</div>
<div className="text-red-600 text-xl">None</div>
@ -288,7 +282,8 @@ const TodaysMatch = () => {
<div className="font-bold">MATCH 5</div>
<div className="text-2xl font-bold">$1 MILLION WINNERS</div>
<div className="text-red-600 text-xl">None</div>
</div>
</div> */}
<TeamMatchTable/>
</div>
</div>
</div>

483
src/pages/UserView.js
View File

@ -1,264 +1,329 @@
import React, { useState, useEffect } from 'react';
import { BarChart2, Calendar } from 'lucide-react';
import DataService from '../services/DataService';
import { RefreshCw, Clock, ChevronDown, ChevronUp, Calendar, AlertTriangle } from 'lucide-react';
import axios from 'axios';
export const SattaUserView = () => {
const [teams, setTeams] = useState([]);
const MatkaResultsDashboard = () => {
const [todaysResults, setTodaysResults] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [currentDate, setCurrentDate] = useState('');
const [expandedTeams, setExpandedTeams] = useState({});
const [dates] = useState(['2025-03-11', '2025-03-12']);
const [selectedTeam, setSelectedTeam] = useState(null);
const [showChartView, setShowChartView] = useState(false);
const [showCalendar, setShowCalendar] = useState(false);
// API URL
const API_URL = 'http://localhost:5500/api';
// Fetch teams on component mount
// Matka team descriptions and tips
const matkaTeamInfo = {
"Desawar Matka": {
description: "Start your day with the latest Desawar Matka results at 5:00 AM. Our platform provides real-time updates and accurate results to help you stay ahead.",
tip: "Analyze the Desawar Matka chart to identify patterns and trends for better predictions."
},
"Delhi Bazar Matka": {
description: "Get the Delhi Bazar Matka results at 3:00 PM every day. Our live updates ensure you never miss a result.",
tip: "Follow the Delhi Bazar Matka chart to track historical results and predict future outcomes."
},
"Shri Ganesh Matka": {
description: "Stay updated with the Shri Ganesh Matka results at 4:30 PM. Our platform offers live updates, daily charts, and expert tips to help you make the right decisions.",
tip: "Use the Shri Ganesh Matka chart to analyze trends and improve your guessing accuracy."
},
"Faridabad Matka": {
description: "The Faridabad Matka results are declared at 6:00 PM every day. Check our platform for live updates, daily charts, and expert tips.",
tip: "Combine historical data with our expert tips for better predictions."
},
"Ghaziabad Matka": {
description: "Get the latest Ghaziabad Matka results at 9:30 PM. Our platform provides real-time updates, daily charts, and expert tips to help you stay ahead.",
tip: "Follow the Ghaziabad Matka chart to identify patterns and trends."
},
"Gali Matka": {
description: "End your day with the Gali Matka results at 11:30 PM. Our platform offers live updates, daily charts, and expert tips to help you make informed decisions.",
tip: "Use the Gali Matka chart to track historical results and improve your guessing accuracy."
}
};
// Format time
const formatTime = (timeString) => {
try {
const date = new Date(timeString);
return date.toLocaleTimeString("en-US", { hour: '2-digit', minute: '2-digit', hour12: true });
} catch (e) {
return "XX:XX";
}
};
// Toggle team expansion
const toggleTeamExpansion = (team) => {
setExpandedTeams(prev => ({
...prev,
[team]: !prev[team]
}));
};
// Fetch today's results
useEffect(() => {
const fetchTeams = async () => {
const fetchTodaysResults = async () => {
try {
setLoading(true);
const data = await DataService.getTeams();
setTeams(data);
setError(null);
// Get today's date for display
const today = new Date();
setCurrentDate(today.toLocaleDateString('en-US', {
weekday: 'short',
month: 'long',
day: 'numeric',
year: 'numeric'
}));
// Get today's results from API
const todayResultsResponse = await axios.get(`${API_URL}/today`);
const todayResults = todayResultsResponse.data;
// Group by team
const teamResults = {};
todayResults.forEach(result => {
if (!teamResults[result.team]) {
teamResults[result.team] = [];
}
teamResults[result.team].push({
result: result.visible_result,
time: formatTime(result.result_time),
timestamp: new Date(result.result_time),
upcoming: new Date(result.result_time) > new Date(),
description: matkaTeamInfo[result.team]?.description || "Stay updated with the latest results.",
tip: matkaTeamInfo[result.team]?.tip || "Check regularly for updates and follow trends."
});
});
// Convert to array for display and initialize expanded state
const groupedResults = Object.entries(teamResults).map(([team, results]) => {
// Sort by time
const sortedResults = results.sort((a, b) => a.timestamp - b.timestamp);
// Set all teams expanded by default
setExpandedTeams(prev => ({
...prev,
[team]: true
}));
return {
team,
results: sortedResults,
upcomingCount: sortedResults.filter(r => r.upcoming).length,
completedCount: sortedResults.filter(r => !r.upcoming).length
};
});
setTodaysResults(groupedResults);
setLoading(false);
} catch (err) {
setError('Failed to load teams data');
console.error(err);
} finally {
console.error("Error fetching today's results:", err);
setError("Failed to load today's Matka data. Please try again later.");
setLoading(false);
}
};
fetchTeams();
// Subscribe to real-time updates
const unsubscribe = DataService.subscribeToUpdates((updatedTeams) => {
setTeams(updatedTeams);
});
return () => {
unsubscribe();
};
fetchTodaysResults();
}, []);
// Show chart for selected team
const handleViewChart = (team) => {
setSelectedTeam(team);
setShowChartView(true);
setShowCalendar(false);
};
// Refresh data
const handleRefresh = () => {
setLoading(true);
setError(null);
// Generate mock chart data for the selected team
const generateChartData = () => {
if (!selectedTeam) return [];
const fetchData = async () => {
try {
// Get today's results from API
const todayResultsResponse = await axios.get(`${API_URL}/today`);
const todayResults = todayResultsResponse.data;
// Generate some random data for demonstration
const mockData = [];
const currentDate = new Date();
// Group by team
const teamResults = {};
for (let i = 0; i < 30; i++) {
const date = new Date(currentDate);
date.setDate(date.getDate() - i);
const dateStr = date.toISOString().split('T')[0];
mockData.unshift({
date: dateStr,
result: Math.floor(Math.random() * 100).toString().padStart(2, '0')
todayResults.forEach(result => {
if (!teamResults[result.team]) {
teamResults[result.team] = [];
}
teamResults[result.team].push({
result: result.visible_result,
time: formatTime(result.result_time),
timestamp: new Date(result.result_time),
upcoming: new Date(result.result_time) > new Date(),
description: matkaTeamInfo[result.team]?.description || "Stay updated with the latest results.",
tip: matkaTeamInfo[result.team]?.tip || "Check regularly for updates and follow trends."
});
}
return mockData;
};
// Generate calendar view with results
const generateCalendarData = () => {
const calendarDays = [];
const currentDate = new Date();
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
// Add empty cells for days before the first of the month
const firstDayWeekday = firstDayOfMonth.getDay();
for (let i = 0; i < firstDayWeekday; i++) {
calendarDays.push(null);
}
// Add days of the month
for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
const dateStr = date.toISOString().split('T')[0];
// Generate mock results for each team on this date
const dayResults = {};
teams.forEach(team => {
dayResults[team.id] = Math.floor(Math.random() * 100).toString().padStart(2, '0');
});
calendarDays.push({
day: i,
date: dateStr,
results: dayResults
});
}
// Convert to array for display
const groupedResults = Object.entries(teamResults).map(([team, results]) => {
// Sort by time
const sortedResults = results.sort((a, b) => a.timestamp - b.timestamp);
return calendarDays;
return {
team,
results: sortedResults,
upcomingCount: sortedResults.filter(r => r.upcoming).length,
completedCount: sortedResults.filter(r => !r.upcoming).length
};
});
setTodaysResults(groupedResults);
setLoading(false);
} catch (err) {
setError("Failed to refresh Matka data. Please try again later.");
setLoading(false);
}
};
if (loading) {
return <div className="flex justify-center items-center h-screen">Loading...</div>;
}
fetchData();
};
if (error) {
return <div className="flex justify-center items-center h-screen text-red-500">{error}</div>;
// Get status badge
const getStatusBadge = (result) => {
if (result.upcoming) {
return (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
Upcoming
</span>
);
}
return (
<div className="bg-gray-100 min-h-screen p-4">
<div className="max-w-6xl mx-auto">
<div className="bg-emerald-400 p-4 text-white text-center text-xl font-bold rounded-t-lg">
Bikaner Super Satta Result of March 12, 2025 & March 11, 2025
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
Completed
</span>
);
};
return (
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
{/* Header */}
<div className="bg-gradient-to-r from-red-600 to-red-800 p-4 text-white">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">Today's Matka Results</h1>
<div className="flex items-center space-x-2">
<Calendar className="h-5 w-5" />
<span className="font-medium">{currentDate}</span>
</div>
</div>
</div>
{/* Controls */}
<div className="bg-white p-4 mb-4 flex justify-between items-center">
<div className="text-lg font-semibold">Latest Results</div>
<div className="flex gap-2">
<div className="bg-gray-50 p-4 flex justify-between items-center border-b">
<div className="text-sm font-medium text-gray-500">
{todaysResults.length > 0 ?
`${todaysResults.length} teams with results today` :
"No results scheduled"}
</div>
<button
className="bg-blue-500 text-white px-4 py-2 rounded flex items-center gap-2"
onClick={() => {
setShowCalendar(true);
setShowChartView(false);
}}
className="bg-red-600 text-white px-4 py-2 rounded-md flex items-center gap-2 hover:bg-red-700 transition shadow-sm"
onClick={handleRefresh}
disabled={loading}
>
<Calendar size={16} />
Calendar View
<RefreshCw size={16} className={loading ? "animate-spin" : ""} />
{loading ? "Refreshing..." : "Refresh"}
</button>
</div>
</div>
{/* Chart View */}
{showChartView && selectedTeam && (
<div className="bg-white p-4 mb-4 rounded shadow">
<h2 className="text-lg font-semibold mb-4">Monthly Chart: {selectedTeam.name}</h2>
<div className="overflow-x-auto">
<table className="w-full border-collapse">
<thead>
<tr className="bg-gray-100">
<th className="border p-2 text-left">Date</th>
<th className="border p-2 text-right">Result</th>
</tr>
</thead>
<tbody>
{generateChartData().map((item, index) => (
<tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
<td className="border p-2">{new Date(item.date).toLocaleDateString()}</td>
<td className="border p-2 text-right font-bold">{item.result}</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="mt-4 flex justify-end">
<button
className="bg-gray-300 px-4 py-2 rounded"
onClick={() => setShowChartView(false)}
>
Back to Results
</button>
{/* Loading indicator */}
{loading && (
<div className="p-8 flex justify-center items-center">
<div className="flex items-center gap-2">
<RefreshCw size={24} className="animate-spin text-red-600" />
<span className="text-gray-600 font-medium">Loading Matka results...</span>
</div>
</div>
)}
{/* Calendar View */}
{showCalendar && (
<div className="bg-white p-4 mb-4 rounded shadow">
<h2 className="text-lg font-semibold mb-4">
Calendar View: {new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
</h2>
<div className="grid grid-cols-7 gap-2 mb-2">
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
<div key={day} className="text-center font-semibold">{day}</div>
))}
{/* Error message */}
{error && (
<div className="bg-red-50 border-l-4 border-red-500 p-4 m-4">
<div className="flex">
<div className="flex-shrink-0">
<AlertTriangle className="h-5 w-5 text-red-400" />
</div>
<div className="ml-3">
<p className="text-sm text-red-700">{error}</p>
</div>
</div>
<div className="grid grid-cols-7 gap-2">
{generateCalendarData().map((day, index) => (
<div key={index} className={`border rounded p-2 min-h-16 ${day ? 'bg-white' : ''}`}>
{day && (
<>
<div className="text-right text-sm text-gray-500">{day.day}</div>
{teams.map(team => (
<div key={team.id} className="text-xs mt-1">
<span className="font-semibold">{team.name.split(' ')[0]}:</span> {day.results[team.id]}
</div>
))}
</>
)}
</div>
))}
</div>
<div className="mt-4 flex justify-end">
<button
className="bg-gray-300 px-4 py-2 rounded"
onClick={() => setShowCalendar(false)}
{/* Results display */}
{!loading && !error && (
<div className="p-4">
{todaysResults.length > 0 ? (
<div className="space-y-4">
{todaysResults.map((teamData, index) => (
<div key={index} className="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
{/* Team header - clickable to expand/collapse */}
<div
className="bg-gradient-to-r from-gray-800 to-gray-700 text-white p-3 flex justify-between items-center cursor-pointer hover:from-gray-700 hover:to-gray-600 transition"
onClick={() => toggleTeamExpansion(teamData.team)}
>
Back to Results
</button>
</div>
<div className="font-bold text-lg">{teamData.team}</div>
<div className="flex items-center space-x-4">
<div className="text-xs bg-opacity-20 bg-white px-2 py-1 rounded-full">
<span className="font-medium">{teamData.upcomingCount}</span> upcoming • <span className="font-medium">{teamData.completedCount}</span> completed
</div>
{expandedTeams[teamData.team] ? (
<ChevronUp size={20} />
) : (
<ChevronDown size={20} />
)}
{/* Teams Table */}
{!showCalendar && (
<div className="bg-white rounded-b-lg overflow-hidden">
<table className="w-full border-collapse">
<thead>
<tr className="bg-gray-800 text-white">
<th className="p-3 text-left">Games List</th>
<th className="p-3 text-center">
{new Date(dates[0]).toLocaleDateString('en-US', { weekday: 'short' })} {new Date(dates[0]).getDate()}th
</th>
<th className="p-3 text-center">
{new Date(dates[1]).toLocaleDateString('en-US', { weekday: 'short' })} {new Date(dates[1]).getDate()}th
</th>
<th className="p-3 text-center">Chart</th>
</tr>
</thead>
<tbody>
{teams.map(team => (
<tr key={team.id} className="border-b hover:bg-gray-50">
<td className="p-3">
<div className="font-semibold">{team.name}</div>
<div className="text-sm text-gray-500">at {team.time}</div>
<div className="text-xs text-blue-500 underline mt-1">Record Chart</div>
</td>
<td className="p-3 text-center text-2xl font-bold">{team.results[dates[0]] || 'XX'}</td>
<td className="p-3 text-center text-2xl font-bold">{team.results[dates[1]] || 'XX'}</td>
<td className="p-3">
<div className="flex justify-center">
<button
className="p-2 bg-green-100 text-green-600 rounded"
onClick={() => handleViewChart(team)}
title="View Monthly Chart"
>
<BarChart2 size={16} />
</button>
</div>
</td>
</tr>
</div>
{/* Team results */}
{expandedTeams[teamData.team] && (
<div>
{teamData.results.map((result, idx) => (
<div key={idx}>
<div className={`p-4 flex justify-between items-center ${result.upcoming ? "bg-blue-50" : "bg-white"}`}>
<div className="flex items-center space-x-3">
<Clock size={16} className="text-gray-400" />
<span className="font-medium">{result.time}</span>
{getStatusBadge(result)}
</div>
<div className="text-xl font-bold">
{result.upcoming ? (
<span className="text-gray-400">--</span>
) : (
<span className="text-gray-800">{result.result}</span>
)}
</div>
</div>
{/* Description */}
<div className="px-4 py-3 bg-gray-50 border-t border-gray-100">
<p className="text-sm text-gray-700">{result.description}</p>
</div>
{/* Pro Tip */}
<div className="px-4 py-3 bg-yellow-50 border-t border-yellow-100">
<p className="text-sm text-yellow-800">
<span className="font-bold">Pro Tip:</span> {result.tip}
</p>
</div>
</div>
))}
</tbody>
</table>
<div className="bg-gray-700 text-white text-center p-3">
<button className="hover:underline">Click here for all games results.</button>
</div>
</div>
)}
</div>
))}
</div>
)
) : (
<div className="text-center p-8">
<div className="mx-auto h-12 w-12 text-gray-400">
<Calendar className="h-12 w-12" />
</div>
<h3 className="mt-2 text-sm font-medium text-gray-900">No results today</h3>
<p className="mt-1 text-sm text-gray-500">There are no Matka results scheduled for today.</p>
</div>
)}
</div>
)}
</div>
);
};
export default MatkaResultsDashboard;