+
+
+ )
+}
diff --git a/front/src/components/error.tsx b/front/src/components/error.tsx
new file mode 100644
index 0000000..9a497f3
--- /dev/null
+++ b/front/src/components/error.tsx
@@ -0,0 +1,13 @@
+export default function ErrorBlock({ error }: { error: Error }) {
+ return (
+
+ Error: {error.message}
+
+
+ )
+}
diff --git a/front/src/components/input_wrapper.tsx b/front/src/components/input_wrapper.tsx
new file mode 100644
index 0000000..e9f3306
--- /dev/null
+++ b/front/src/components/input_wrapper.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+interface InputWrapperProps {
+ label: string;
+ id: string;
+ children: React.ReactNode;
+ className?: string;
+}
+
+function InputWrapper({
+ label,
+ id,
+ children,
+ className = "",
+}: InputWrapperProps) {
+ return (
+
+
+ {children}
+
+ );
+}
+
+export default InputWrapper;
diff --git a/front/src/components/loader.tsx b/front/src/components/loader.tsx
new file mode 100644
index 0000000..e830f71
--- /dev/null
+++ b/front/src/components/loader.tsx
@@ -0,0 +1,25 @@
+export default function Loader() {
+ return (
+
+
+ )
+}
diff --git a/front/src/components/numeric_input.tsx b/front/src/components/numeric_input.tsx
new file mode 100644
index 0000000..c6ce32b
--- /dev/null
+++ b/front/src/components/numeric_input.tsx
@@ -0,0 +1,33 @@
+import InputWrapper from "./input_wrapper";
+
+interface NumericInputProps {
+ value: number;
+ onChange: (value: number) => void;
+ label: string;
+ placeholder?: string;
+ id: string;
+ classname?: string;
+}
+export default function NumericInput({
+ value,
+ onChange,
+ label,
+ placeholder = label,
+ id,
+ classname = "",
+}: NumericInputProps) {
+ return (
+
+
+ Loading...
+
+
+ {data.label}
+
+ )
+
+ const formatOptionLabel = ({ imageUrl, type, data }: SearchOption) => {
+ return (
+
+
+ )
+ }
+
+ return (
+
+
+ {type === "player" ? (
+
+ 
+
+ {data.displayName}
+
+
+ {(data as Player).team?.displayName}
+
+ 
+
+ ) : null}
+
+
+ )
+}
diff --git a/front/src/pages/layout.tsx b/front/src/pages/layout.tsx
new file mode 100644
index 0000000..9952b08
--- /dev/null
+++ b/front/src/pages/layout.tsx
@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom"
+import Header from "./header"
+
+export default function Layout() {
+ return (
+ <>
+
+
+
+
+
+
+ queryKey={["fixtureGames", selectedFixture.slug]}
+ queryFn={() => GetFixtureGames(selectedFixture.slug)}
+ refetchInterval={10000}
+ enabled={!!selectedFixture}
+ >
+ {(data) =>
+
+ )
+}
+
+function areDatesOnSameDay(date1: Date, date2: Date) {
+ return (
+ date1.getFullYear() === date2.getFullYear() &&
+ date1.getMonth() === date2.getMonth() &&
+ date1.getDate() === date2.getDate()
+ )
+}
+
+type TranslationKey = "today" | "tomorrow" | "yesterday"
+type LanguageCode =
+ | "en"
+ | "zh"
+ | "hi"
+ | "es"
+ | "ar"
+ | "bn"
+ | "pt"
+ | "ru"
+ | "ja"
+ | "pa"
+ | "jv"
+ | "de"
+ | "fr"
+ | "it"
+ | "tr"
+ | "ko"
+ | "fa"
+ | "uk"
+ | "pl"
+ | "ro"
+ | "nl"
+ | "th"
+ | "el"
+ | "sv"
+ | "cs"
+type Translations = Record
+ {currentIndex < fixtures.length - 1 ? (
+
+ ) : (
+
+ )}
+
+ {selectedFixture && (
+
+ Gameweek
+
+ {selectedFixture ? selectedFixture.gameWeek : ""}
+
+
+ {currentIndex > 0 ? (
+
+ ) : (
+
+ )}
+
+
+ )
+}
diff --git a/front/src/pages/player/club_history.tsx b/front/src/pages/player/club_history.tsx
new file mode 100644
index 0000000..ed5d09e
--- /dev/null
+++ b/front/src/pages/player/club_history.tsx
@@ -0,0 +1,79 @@
+import { useMemo } from "react"
+import Player from "../../types/player"
+
+export default function ClubHistory({ player }: { player: Player }) {
+ const clubMemberships = useMemo(
+ () =>
+ player.clubMembership
+ .filter((membership) => membership.membershipType === "club")
+ .sort((a, b) => {
+ if (!a.endDate) return -1
+ if (!b.endDate) return 1
+ if (new Date(a.endDate).getTime() === new Date(b.endDate).getTime()) {
+ return (
+ new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
+ )
+ }
+ return new Date(b.endDate).getTime() - new Date(a.endDate).getTime()
+ }),
+ [player.clubMembership]
+ )
+ return (
+
+ {uniqueDays
+ .sort((a: Date, b: Date) => a.getTime() - b.getTime())
+ .map((day) => (
+
+
+
+
+ ))}
+
+
+
+
+
+ {filteredGames.map((game) => (
+ <>
+
+
+ {game.status === "playing" ? (
+ game.periodType === "HALF_TIME" ? (
+ HT
+ ) : (
+ {game.minutes}'
+ )
+ ) : game.status === "played" ? (
+ FT
+ ) : game.status === "scheduled" ? (
+
+ {new Date(game.date).toLocaleString(navigator.language, {
+ hour: "numeric",
+ minute: "numeric",
+ })}
+
+ ) : null}
+
+
+ {game.homeTeam.shortName}
+
+
+ 
+
+
+
+
+
+ {game.status !== "scheduled" && -}
+
+ {game.homePenaltyScore > 0 || game.awayPenaltyScore > 0 ? (
+ ({game.homePenaltyScore})
+ ) : null}
+
+ {game.status !== "scheduled" ? game.homeGoals : "-"}
+
+
+
+
+
+
+ {game.status !== "scheduled" ? game.awayGoals : "-"}
+
+ {game.awayPenaltyScore > 0 || game.homePenaltyScore > 0 ? (
+ ({game.awayPenaltyScore})
+ ) : null}
+
+
+
+
+
+
+
+ 
+
+ {game.awayTeam.shortName}
+
+
+
+ ))}
+
+ {game.competition.displayName}
+
+
+ 
+
+
+ {clubMemberships.map((membership) => (
+ <>
+
+ )
+}
diff --git a/front/src/pages/player/components/card_icon.tsx b/front/src/pages/player/components/card_icon.tsx
new file mode 100644
index 0000000..735a428
--- /dev/null
+++ b/front/src/pages/player/components/card_icon.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+
+interface CardIconProps {
+ size?: number
+ color?: string
+}
+
+const CardIcon: React.FC
+ 
+
+
+ 
+
+
+ {membership.team?.displayName}
+
+
+ {new Date(membership.startDate).toLocaleDateString(undefined, {
+ month: "numeric",
+ year: "numeric",
+ })}
+
+ {membership.endDate ? "->" : ""}
+
+ {membership.endDate
+ ? new Date(membership.endDate).toLocaleDateString(undefined, {
+ month: "numeric",
+ year: "numeric",
+ })
+ : ""}
+
+
+
+ {(() => {
+ const endDate = membership.endDate
+ ? new Date(membership.endDate)
+ : new Date()
+ const startDate = new Date(membership.startDate)
+ const diffDays = Math.floor(
+ (endDate.getTime() - startDate.getTime()) /
+ (1000 * 60 * 60 * 24)
+ )
+ const diffYears = Math.floor(diffDays / 365)
+ const remainingDays = diffDays % 365
+ if (diffYears > 1) {
+ return `${diffYears} years ${remainingDays} days`
+ } else if (diffYears === 1) {
+ return `1 year ${remainingDays} days`
+ } else {
+ return `${diffDays} days`
+ }
+ })()}
+
+
+ ))}
+
+ setDays(Number(value))}
+ label="3 days"
+ />
+ setDays(Number(value))}
+ label="1 week"
+ />
+ setDays(Number(value))}
+ label="1 month"
+ />
+ setDays(Number(value))}
+ label="3 months"
+ />
+ setDays(Number(value))}
+ label="6 months"
+ />
+ setDays(Number(value))}
+ label="1 year"
+ />
+ setDays(Number(value))}
+ label="All"
+ />
+
+ )
+}
+
+export default function DaysSelectionWrapper({
+ children,
+}: {
+ children: (startDate: Date, endDate: Date) => React.ReactNode
+}) {
+ const [days, setDays] = useState(365)
+ const farEnoughDate = new Date(2000, 0, 1) // You can set this to an earlier date if needed
+ const startDate =
+ days === 0 ? farEnoughDate : extractDateWithOffset(new Date(), -days)
+ const endDate = extractDateWithOffset(new Date(), 1)
+
+ return (
+
+
+ )
+}
diff --git a/front/src/pages/player/components/filter_select.tsx b/front/src/pages/player/components/filter_select.tsx
new file mode 100644
index 0000000..490bdd7
--- /dev/null
+++ b/front/src/pages/player/components/filter_select.tsx
@@ -0,0 +1,65 @@
+import Select, { MultiValue, SingleValue } from "react-select"
+
+interface FilterOption{children(startDate, endDate)}
+