+
+ )
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ + {t("whitelist_list")} +
+
+
+
+
+
+
+
+ {filteredEntries.length === 0 ? (
+ >)
+
+ return (
+
+ + {searchQuery ? t("no_results") || "No results found" : t("no_entries")} +
+ ) : ( + filteredEntries.map((entry, index) => { + const isExpanded = expandedEntries.has(entry.id) + + const groupedIdentifiers = entry.identifiers.reduce((acc, id) => { + const [type, value] = id.split(':') + if (!acc[type]) acc[type] = [] + acc[type].push({ full: id, value }) + return acc + }, {} as Record
+
+ )
+ })
+ )}
+
+
+
+
+ {entry.whitelisted === 1 ? t("whitelisted") || "Whitelisted" : t("not_whitelisted") || "Not Whitelisted"}
+
+
+
+
+
+
+
+
+
+ ID: {entry.id}
+
+
+
+
+
+ {isExpanded && (
+ + {entry.playerName} +
+
+ {Object.entries(groupedIdentifiers).map(([type, identifiers]) => (
+
+ )}
+
+
+ ))}
+
+ {identifiers.map((id, idx) => (
+
+
+
+ {type}
+
+
+ {id.value}
+
+
+
+ ))}
+
+
+ )
+}
\ No newline at end of file
diff --git a/[core]/esx_whitelist/web/components.json b/[core]/esx_whitelist/web/components.json
new file mode 100644
index 000000000..4ee62ee10
--- /dev/null
+++ b/[core]/esx_whitelist/web/components.json
@@ -0,0 +1,21 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "new-york",
+ "rsc": true,
+ "tsx": true,
+ "tailwind": {
+ "config": "",
+ "css": "app/globals.css",
+ "baseColor": "neutral",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils",
+ "ui": "@/components/ui",
+ "lib": "@/lib",
+ "hooks": "@/hooks"
+ },
+ "iconLibrary": "lucide"
+}
diff --git a/[core]/esx_whitelist/web/components/theme-provider.tsx b/[core]/esx_whitelist/web/components/theme-provider.tsx
new file mode 100644
index 000000000..55c2f6eb6
--- /dev/null
+++ b/[core]/esx_whitelist/web/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+ ThemeProvider as NextThemesProvider,
+ type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {discordEnabled && (
+ <>
+
+
+
+ {!discordEnabled && (
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {rules.map((rule, index) => (
+
+
+
+
+
+
+
+ {validationError && (
+
+
+
+
+ + {t("ui_title")} +
+{t("ui_subtitle")}
+
+
+ {validationError}
+
+
+
+
+
+
+
+ {whitelistEnabled ? t("whitelist_enabled") : t("whitelist_disabled")}
+
+
+
+
+
+
+
+
+ {t("grace_period_desc")}
+
+
+
+
+
+
+
+
+
+
+
+ {t("discord_notifications_desc")}
+
+
+
+
+
+
+
+
+
+ {
+ const value = Number.parseInt(e.target.value)
+ setGracePeriod(isNaN(value) ? 0 : value)
+ }}
+ className="border cursor-text transition-all duration-200"
+ style={{
+ background: "rgba(25, 25, 25, 0.95)",
+ borderColor: "rgba(251, 155, 4, 0.25)",
+ color: "#F2F2F2",
+ fontSize: "14px",
+ }}
+ min="0"
+ />
+
+
+
+
+
+
+ setDiscordWebhook(e.target.value)}
+ className="cursor-text transition-all duration-200"
+ style={{
+ background: "rgba(25, 25, 25, 0.95)",
+ borderColor: "rgba(251, 155, 4, 0.25)",
+ color: "#F2F2F2",
+ fontSize: "14px",
+ }}
+ />
+ {discordWebhook === '***CONFIGURED***' && (
+
+
+ + {t("webhook_configured")} +
+ )} +
+
+
+
+
+
+ {t("discord_verification_desc")}
+
+
+
+
+
+
+ {!hasBotToken && (
+
+
+ + {t("discord_token_status")} +
++ {hasBotToken ? t("discord_token_configured") : t("discord_token_missing")} +
+
+
+ )}
+
+ )}
+
+ + {t("discord_token_warning")} +
+
+
+
+
+ setDiscordGuildId(e.target.value)}
+ disabled={!discordEnabled}
+ className="cursor-text transition-all duration-200"
+ style={{
+ background: "rgba(25, 25, 25, 0.95)",
+ borderColor: "rgba(251, 155, 4, 0.25)",
+ color: "#F2F2F2",
+ fontSize: "14px",
+ opacity: discordEnabled ? 1 : 0.5,
+ }}
+ />
+
+
+
+ setDiscordRoleId(e.target.value)}
+ disabled={!discordEnabled}
+ className="cursor-text transition-all duration-200"
+ style={{
+ background: "rgba(25, 25, 25, 0.95)",
+ borderColor: "rgba(251, 155, 4, 0.25)",
+ color: "#F2F2F2",
+ fontSize: "14px",
+ opacity: discordEnabled ? 1 : 0.5,
+ }}
+ />
+
+
+
+
+
+
+
+ {t("manage_whitelist_desc")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {detectedType && (
+
+
+ )}
+
+
+
+
+ setPlayerIdentifier(e.target.value)}
+ className="cursor-text transition-all duration-200"
+ style={{
+ background: "rgba(25, 25, 25, 0.95)",
+ borderColor: detectedType ? "rgba(16, 185, 129, 0.4)" : "rgba(251, 155, 4, 0.25)",
+ color: "#F2F2F2",
+ fontSize: "14px",
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {t("whitelist_rules_desc")}
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+ {(rule.type === "admin-presence" || rule.type === "player-count") && (
+
+ handleRuleToggle(rule.id, checked)} />
+
+ {t("priority")} {rule.priority}
+
+
+
+
+ {getRuleIcon(rule.type)}
+
+ {getRuleTitle(rule.type)}
+
+
+
+
+ )}
+
+ {rule.type === "scheduled" && (
+
+
+
+
+
+
+ updateRule(rule.id, { value: Number.parseInt(e.target.value) })}
+ className="cursor-text transition-all duration-200"
+ style={{
+ background: "rgba(25, 25, 25, 0.95)",
+ borderColor: "rgba(251, 155, 4, 0.25)",
+ color: "#F2F2F2",
+ fontSize: "14px",
+ }}
+ min="0"
+ />
+
+
+
+
+
+
+
+ updateRule(rule.id, { priority: Number.parseInt(e.target.value) })}
+ className="cursor-text transition-all duration-200"
+ style={{
+ background: "rgba(25, 25, 25, 0.95)",
+ borderColor: "rgba(251, 155, 4, 0.25)",
+ color: "#F2F2F2",
+ fontSize: "14px",
+ }}
+ min="1"
+ />
+
+
+
+ )}
+
+
+ updateRule(rule.id, { startTime: e.target.value })}
+ className="cursor-text transition-all duration-200"
+ style={{
+ background: "rgba(25, 25, 25, 0.95)",
+ borderColor: "rgba(251, 155, 4, 0.25)",
+ color: "#F2F2F2",
+ fontSize: "14px",
+ }}
+ />
+
+
+
+ updateRule(rule.id, { endTime: e.target.value })}
+ className="cursor-text transition-all duration-200"
+ style={{
+ background: "rgba(25, 25, 25, 0.95)",
+ borderColor: "rgba(251, 155, 4, 0.25)",
+ color: "#F2F2F2",
+ fontSize: "14px",
+ }}
+ />
+
+
+
+ updateRule(rule.id, { priority: Number.parseInt(e.target.value) })}
+ className="cursor-text transition-all duration-200"
+ style={{
+ background: "rgba(25, 25, 25, 0.95)",
+ borderColor: "rgba(251, 155, 4, 0.25)",
+ color: "#F2F2F2",
+ fontSize: "14px",
+ }}
+ min="1"
+ />
+
+
+
+
+
+