Compare commits
No commits in common. "94beb7da78cc543c081af266928d6f575a7287c8" and "fe3f93fb9fda64e914d1785dbea01293d9f24386" have entirely different histories.
94beb7da78
...
fe3f93fb9f
@ -107,7 +107,7 @@ export default function Home() {
|
|||||||
{/* Main Content Grid */}
|
{/* Main Content Grid */}
|
||||||
<div className="space-y-6 pb-12">
|
<div className="space-y-6 pb-12">
|
||||||
{/* User Management - Full Width */}
|
{/* User Management - Full Width */}
|
||||||
<div className="bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50 rounded-2xl shadow-lg border border-slate-200/50 p-7 hover:shadow-2xl transition-all duration-300 backdrop-blur-sm">
|
<div className="bg-white rounded-2xl shadow-lg border border-slate-200/80 p-7 hover:shadow-xl transition-shadow">
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-2xl font-bold text-slate-900">Active Athletes</h2>
|
<h2 className="text-2xl font-bold text-slate-900">Active Athletes</h2>
|
||||||
|
|||||||
@ -79,7 +79,7 @@ export function AnalyticsDashboard() {
|
|||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{/* Key Metrics Cards - 3 columns */}
|
{/* Key Metrics Cards - 3 columns */}
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||||
<div className="bg-gradient-to-br from-blue-700 via-cyan-500 to-blue-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
<div className="bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
||||||
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Athletes</p>
|
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Athletes</p>
|
||||||
<div className="flex items-baseline gap-2">
|
<div className="flex items-baseline gap-2">
|
||||||
<div className="text-2xl font-black text-white">{totalUsers}</div>
|
<div className="text-2xl font-black text-white">{totalUsers}</div>
|
||||||
@ -87,7 +87,7 @@ export function AnalyticsDashboard() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-gradient-to-br from-amber-700 via-yellow-500 to-amber-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
<div className="bg-gradient-to-br from-emerald-600 via-teal-500 to-cyan-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
||||||
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Revenue</p>
|
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Revenue</p>
|
||||||
<div className="flex items-baseline gap-2">
|
<div className="flex items-baseline gap-2">
|
||||||
<div className="text-2xl font-black text-white">${totalRevenue.toLocaleString()}</div>
|
<div className="text-2xl font-black text-white">${totalRevenue.toLocaleString()}</div>
|
||||||
@ -95,7 +95,7 @@ export function AnalyticsDashboard() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-gradient-to-br from-pink-700 via-fuchsia-500 to-pink-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
<div className="bg-gradient-to-br from-purple-600 via-pink-500 to-blue-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
||||||
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Active Members</p>
|
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Active Members</p>
|
||||||
<div className="flex items-baseline gap-2">
|
<div className="flex items-baseline gap-2">
|
||||||
<div className="text-2xl font-black text-white">{activeMembers}</div>
|
<div className="text-2xl font-black text-white">{activeMembers}</div>
|
||||||
@ -106,7 +106,7 @@ export function AnalyticsDashboard() {
|
|||||||
|
|
||||||
{/* Charts - 3 Columns Horizontal */}
|
{/* Charts - 3 Columns Horizontal */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||||
<div className="bg-gradient-to-br from-blue-700 via-cyan-500 to-blue-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
<div className="bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<h3 className="text-sm font-bold text-white">User Growth Trend</h3>
|
<h3 className="text-sm font-bold text-white">User Growth Trend</h3>
|
||||||
<p className="text-xs text-blue-100">Last 6 months performance</p>
|
<p className="text-xs text-blue-100">Last 6 months performance</p>
|
||||||
@ -116,20 +116,20 @@ export function AnalyticsDashboard() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-gradient-to-br from-amber-700 via-yellow-500 to-amber-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
<div className="bg-gradient-to-br from-emerald-600 via-teal-500 to-cyan-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<h3 className="text-sm font-bold text-white">Membership Mix</h3>
|
<h3 className="text-sm font-bold text-white">Membership Mix</h3>
|
||||||
<p className="text-xs text-amber-100">Distribution breakdown</p>
|
<p className="text-xs text-emerald-100">Distribution breakdown</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="h-48 overflow-auto">
|
<div className="h-48 overflow-auto">
|
||||||
<MembershipDistributionChart data={membershipData} />
|
<MembershipDistributionChart data={membershipData} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-gradient-to-br from-pink-700 via-fuchsia-500 to-pink-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
<div className="bg-gradient-to-br from-purple-600 via-pink-500 to-blue-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<h3 className="text-sm font-bold text-white">Revenue Stream</h3>
|
<h3 className="text-sm font-bold text-white">Revenue Stream</h3>
|
||||||
<p className="text-xs text-pink-100">Monthly earnings</p>
|
<p className="text-xs text-purple-100">Monthly earnings</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="h-48 overflow-auto">
|
<div className="h-48 overflow-auto">
|
||||||
<RevenueChart data={revenueData} />
|
<RevenueChart data={revenueData} />
|
||||||
|
|||||||
@ -13,39 +13,39 @@ interface StatsCardProps {
|
|||||||
export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
|
export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
|
||||||
const colorStyles = {
|
const colorStyles = {
|
||||||
blue: {
|
blue: {
|
||||||
bg: "from-blue-700 via-cyan-500 to-blue-600",
|
bg: "from-blue-600 via-cyan-500 to-teal-500",
|
||||||
text: "text-white",
|
text: "text-white",
|
||||||
light: "from-blue-50 to-cyan-50",
|
light: "from-blue-50 to-cyan-50",
|
||||||
badge: "bg-blue-200/60 text-blue-900 backdrop-blur-sm",
|
badge: "bg-blue-100 text-blue-700",
|
||||||
icon: "bg-white/20 text-white backdrop-blur-sm",
|
icon: "bg-blue-100/50 text-blue-600",
|
||||||
},
|
},
|
||||||
green: {
|
green: {
|
||||||
bg: "from-pink-700 via-fuchsia-500 to-pink-600",
|
bg: "from-emerald-600 via-teal-500 to-cyan-500",
|
||||||
text: "text-white",
|
|
||||||
light: "from-pink-50 to-rose-50",
|
|
||||||
badge: "bg-pink-200/60 text-pink-900 backdrop-blur-sm",
|
|
||||||
icon: "bg-white/20 text-white backdrop-blur-sm",
|
|
||||||
},
|
|
||||||
purple: {
|
|
||||||
bg: "from-amber-700 via-yellow-500 to-amber-600",
|
|
||||||
text: "text-white",
|
|
||||||
light: "from-amber-50 to-yellow-50",
|
|
||||||
badge: "bg-amber-200/60 text-amber-900 backdrop-blur-sm",
|
|
||||||
icon: "bg-white/20 text-white backdrop-blur-sm",
|
|
||||||
},
|
|
||||||
orange: {
|
|
||||||
bg: "from-emerald-700 via-teal-500 to-emerald-600",
|
|
||||||
text: "text-white",
|
text: "text-white",
|
||||||
light: "from-emerald-50 to-teal-50",
|
light: "from-emerald-50 to-teal-50",
|
||||||
badge: "bg-emerald-200/60 text-emerald-900 backdrop-blur-sm",
|
badge: "bg-emerald-100 text-emerald-700",
|
||||||
icon: "bg-white/20 text-white backdrop-blur-sm",
|
icon: "bg-emerald-100/50 text-emerald-600",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
bg: "from-purple-600 via-pink-500 to-blue-500",
|
||||||
|
text: "text-white",
|
||||||
|
light: "from-purple-50 to-blue-50",
|
||||||
|
badge: "bg-purple-100 text-purple-700",
|
||||||
|
icon: "bg-purple-100/50 text-purple-600",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
bg: "from-orange-600 via-red-500 to-pink-500",
|
||||||
|
text: "text-white",
|
||||||
|
light: "from-orange-50 to-red-50",
|
||||||
|
badge: "bg-orange-100 text-orange-700",
|
||||||
|
icon: "bg-orange-100/50 text-orange-600",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const styles = colorStyles[color];
|
const styles = colorStyles[color];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={`bg-gradient-to-br ${styles.bg} border-0 shadow-2xl hover:shadow-2xl transition-all duration-500 overflow-hidden group h-full relative before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/10 before:to-transparent before:pointer-events-none`}>
|
<Card className={`bg-gradient-to-br ${styles.bg} border-0 shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group h-full`}>
|
||||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2.5 pt-5 px-5">
|
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2.5 pt-5 px-5">
|
||||||
<CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}>
|
<CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}>
|
||||||
{title}
|
{title}
|
||||||
|
|||||||
@ -22,7 +22,6 @@
|
|||||||
"name": "next"
|
"name": "next"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"ignoreDeprecations": "6.0",
|
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": [
|
"@/*": [
|
||||||
|
|||||||
10
apps/mobile/package-lock.json
generated
10
apps/mobile/package-lock.json
generated
@ -28,7 +28,6 @@
|
|||||||
"expo-haptics": "^15.0.7",
|
"expo-haptics": "^15.0.7",
|
||||||
"expo-linear-gradient": "~15.0.7",
|
"expo-linear-gradient": "~15.0.7",
|
||||||
"expo-linking": "~8.0.0",
|
"expo-linking": "~8.0.0",
|
||||||
"expo-location": "~17.0.1",
|
|
||||||
"expo-notifications": "~0.32.0",
|
"expo-notifications": "~0.32.0",
|
||||||
"expo-router": "~6.0.14",
|
"expo-router": "~6.0.14",
|
||||||
"expo-secure-store": "~15.0.7",
|
"expo-secure-store": "~15.0.7",
|
||||||
@ -7330,15 +7329,6 @@
|
|||||||
"react-native": "*"
|
"react-native": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/expo-location": {
|
|
||||||
"version": "17.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/expo-location/-/expo-location-17.0.1.tgz",
|
|
||||||
"integrity": "sha512-m+OzotzlAXO3ZZ1uqW5GC25nXW868zN+ROyBA1V4VF6jGay1ZEs4URPglCVUDzZby2F5wt24cMzqDKw2IX6nRw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"peerDependencies": {
|
|
||||||
"expo": "*"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/expo-modules-autolinking": {
|
"node_modules/expo-modules-autolinking": {
|
||||||
"version": "3.0.22",
|
"version": "3.0.22",
|
||||||
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-3.0.22.tgz",
|
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-3.0.22.tgz",
|
||||||
|
|||||||
@ -34,7 +34,6 @@
|
|||||||
"expo-haptics": "^15.0.7",
|
"expo-haptics": "^15.0.7",
|
||||||
"expo-linear-gradient": "~15.0.7",
|
"expo-linear-gradient": "~15.0.7",
|
||||||
"expo-linking": "~8.0.0",
|
"expo-linking": "~8.0.0",
|
||||||
"expo-location": "~17.0.1",
|
|
||||||
"expo-notifications": "~0.32.0",
|
"expo-notifications": "~0.32.0",
|
||||||
"expo-router": "~6.0.14",
|
"expo-router": "~6.0.14",
|
||||||
"expo-secure-store": "~15.0.7",
|
"expo-secure-store": "~15.0.7",
|
||||||
|
|||||||
@ -6,7 +6,6 @@ import { Ionicons } from '@expo/vector-icons'
|
|||||||
import { attendanceApi, Attendance } from '../../api/attendance'
|
import { attendanceApi, Attendance } from '../../api/attendance'
|
||||||
import { theme } from '../../styles/theme'
|
import { theme } from '../../styles/theme'
|
||||||
import { Animated } from 'react-native'
|
import { Animated } from 'react-native'
|
||||||
import { GeofenceStatus } from '../../components/GeofenceStatus'
|
|
||||||
|
|
||||||
export default function AttendanceScreen() {
|
export default function AttendanceScreen() {
|
||||||
const { getToken, userId } = useAuth()
|
const { getToken, userId } = useAuth()
|
||||||
@ -112,9 +111,6 @@ export default function AttendanceScreen() {
|
|||||||
<Text style={styles.subtitle}>Track your gym visits</Text>
|
<Text style={styles.subtitle}>Track your gym visits</Text>
|
||||||
</LinearGradient>
|
</LinearGradient>
|
||||||
|
|
||||||
{/* Geofencing Status Card */}
|
|
||||||
<GeofenceStatus />
|
|
||||||
|
|
||||||
<View style={styles.actionContainer}>
|
<View style={styles.actionContainer}>
|
||||||
{activeCheckIn ? (
|
{activeCheckIn ? (
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
|
|||||||
@ -112,7 +112,7 @@ export default function HomeScreen() {
|
|||||||
<View style={styles.header}>
|
<View style={styles.header}>
|
||||||
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
|
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
|
||||||
<Image
|
<Image
|
||||||
source={require("../../../public/nextform-logo.png")}
|
source={require("../../public/nextform-logo.png")}
|
||||||
style={{ width: 40, height: 40, resizeMode: 'contain' }}
|
style={{ width: 40, height: 40, resizeMode: 'contain' }}
|
||||||
/>
|
/>
|
||||||
<View>
|
<View>
|
||||||
|
|||||||
@ -16,7 +16,7 @@ export function ActivityWidget({ steps, calories, duration }: ActivityWidgetProp
|
|||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={['#0c4a6e', '#0369a1', '#0ea5e9']}
|
colors={theme.gradients.dark}
|
||||||
start={{ x: 0, y: 0 }}
|
start={{ x: 0, y: 0 }}
|
||||||
end={{ x: 1, y: 1 }}
|
end={{ x: 1, y: 1 }}
|
||||||
style={[styles.card, theme.shadows.medium]}
|
style={[styles.card, theme.shadows.medium]}
|
||||||
|
|||||||
@ -1,119 +0,0 @@
|
|||||||
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
|
|
||||||
import { LinearGradient } from 'expo-linear-gradient'
|
|
||||||
import { Ionicons } from '@expo/vector-icons'
|
|
||||||
import { useState } from 'react'
|
|
||||||
|
|
||||||
export const GeofenceStatus = () => {
|
|
||||||
const [isInside, setIsInside] = useState(false)
|
|
||||||
const [distance, setDistance] = useState('250 m')
|
|
||||||
const [loading, setLoading] = useState(false)
|
|
||||||
|
|
||||||
const handleRefresh = () => {
|
|
||||||
setLoading(true)
|
|
||||||
// Simulate location check
|
|
||||||
setTimeout(() => {
|
|
||||||
setDistance(Math.random() > 0.5 ? '150 m' : '300 m')
|
|
||||||
setIsInside(Math.random() > 0.5)
|
|
||||||
setLoading(false)
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<LinearGradient
|
|
||||||
colors={
|
|
||||||
isInside
|
|
||||||
? ['#10b981', '#6ee7b7', '#a7f3d0']
|
|
||||||
: ['#64748b', '#94a3b8', '#cbd5e1']
|
|
||||||
}
|
|
||||||
start={{ x: 0, y: 0 }}
|
|
||||||
end={{ x: 1, y: 1 }}
|
|
||||||
style={styles.card}
|
|
||||||
>
|
|
||||||
<View style={styles.header}>
|
|
||||||
<View style={styles.titleRow}>
|
|
||||||
<Ionicons
|
|
||||||
name={isInside ? 'location-sharp' : 'location'}
|
|
||||||
size={24}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
<Text style={styles.title}>
|
|
||||||
{isInside ? 'At Gym' : 'Away from Gym'}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={handleRefresh}
|
|
||||||
disabled={loading}
|
|
||||||
style={styles.refreshButton}
|
|
||||||
>
|
|
||||||
<Ionicons
|
|
||||||
name="refresh"
|
|
||||||
size={20}
|
|
||||||
color="#fff"
|
|
||||||
style={loading ? { opacity: 0.5 } : {}}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={styles.content}>
|
|
||||||
<View style={styles.stat}>
|
|
||||||
<Text style={styles.statLabel}>Distance</Text>
|
|
||||||
<Text style={styles.statValue}>{distance}</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</LinearGradient>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingVertical: 12,
|
|
||||||
},
|
|
||||||
card: {
|
|
||||||
borderRadius: 16,
|
|
||||||
padding: 16,
|
|
||||||
overflow: 'hidden',
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginBottom: 12,
|
|
||||||
},
|
|
||||||
titleRow: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: 12,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
refreshButton: {
|
|
||||||
padding: 8,
|
|
||||||
borderRadius: 8,
|
|
||||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
marginTop: 12,
|
|
||||||
},
|
|
||||||
stat: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
statLabel: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: 'rgba(255, 255, 255, 0.8)',
|
|
||||||
fontWeight: '500',
|
|
||||||
},
|
|
||||||
statValue: {
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
@ -15,7 +15,7 @@ export function HydrationWidget({ current, goal }: HydrationWidgetProps) {
|
|||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={['#0369a1', '#0ea5e9', '#06b6d4']}
|
colors={['#e0f2fe', '#dbeafe']} // Light blue background
|
||||||
style={[styles.card, theme.shadows.subtle]}
|
style={[styles.card, theme.shadows.subtle]}
|
||||||
>
|
>
|
||||||
<View style={styles.content}>
|
<View style={styles.content}>
|
||||||
|
|||||||
@ -16,37 +16,37 @@ interface MetricProps {
|
|||||||
const getColorScheme = (colorScheme: 'blue' | 'green' | 'purple' | 'orange') => {
|
const getColorScheme = (colorScheme: 'blue' | 'green' | 'purple' | 'orange') => {
|
||||||
const schemes = {
|
const schemes = {
|
||||||
blue: {
|
blue: {
|
||||||
colors: ['#1e40af', '#0369a1', '#06b6d4'] as const,
|
colors: ['#1e3a8a', '#0c4a6e'],
|
||||||
text: '#ffffff',
|
text: '#ffffff',
|
||||||
label: '#e0f2fe',
|
label: '#93c5fd',
|
||||||
badge: '#0ea5e9',
|
badge: '#3b82f6',
|
||||||
badgeText: '#ffffff',
|
badgeText: '#ffffff',
|
||||||
icon: '#06b6d4',
|
icon: '#60a5fa',
|
||||||
},
|
},
|
||||||
green: {
|
green: {
|
||||||
colors: ['#be185d', '#ec4899', '#f472b6'] as const,
|
colors: ['#064e3b', '#047857'],
|
||||||
text: '#ffffff',
|
text: '#ffffff',
|
||||||
label: '#fbcfe8',
|
label: '#86efac',
|
||||||
badge: '#ec4899',
|
|
||||||
badgeText: '#ffffff',
|
|
||||||
icon: '#f472b6',
|
|
||||||
},
|
|
||||||
purple: {
|
|
||||||
colors: ['#b45309', '#d97706', '#fbbf24'] as const,
|
|
||||||
text: '#ffffff',
|
|
||||||
label: '#fef3c7',
|
|
||||||
badge: '#f59e0b',
|
|
||||||
badgeText: '#ffffff',
|
|
||||||
icon: '#fbbf24',
|
|
||||||
},
|
|
||||||
orange: {
|
|
||||||
colors: ['#047857', '#059669', '#10b981'] as const,
|
|
||||||
text: '#ffffff',
|
|
||||||
label: '#d1fae5',
|
|
||||||
badge: '#10b981',
|
badge: '#10b981',
|
||||||
badgeText: '#ffffff',
|
badgeText: '#ffffff',
|
||||||
icon: '#34d399',
|
icon: '#34d399',
|
||||||
},
|
},
|
||||||
|
purple: {
|
||||||
|
colors: ['#581c87', '#7c3aed'],
|
||||||
|
text: '#ffffff',
|
||||||
|
label: '#d8b4fe',
|
||||||
|
badge: '#a855f7',
|
||||||
|
badgeText: '#ffffff',
|
||||||
|
icon: '#c084fc',
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
colors: ['#92400e', '#b45309'],
|
||||||
|
text: '#ffffff',
|
||||||
|
label: '#fcd34d',
|
||||||
|
badge: '#f97316',
|
||||||
|
badgeText: '#ffffff',
|
||||||
|
icon: '#fb923c',
|
||||||
|
},
|
||||||
};
|
};
|
||||||
return schemes[colorScheme];
|
return schemes[colorScheme];
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,47 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { View, Text, StyleSheet } from 'react-native';
|
|
||||||
import QRCode from 'react-native-qrcode-svg';
|
|
||||||
|
|
||||||
interface QRCodeProps {
|
|
||||||
value: string;
|
|
||||||
size?: number;
|
|
||||||
logo?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const QRCodeGenerator: React.FC<QRCodeProps> = ({
|
|
||||||
value,
|
|
||||||
size = 250
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<View style={styles.qrWrapper}>
|
|
||||||
<QRCode
|
|
||||||
value={value}
|
|
||||||
size={size}
|
|
||||||
color="black"
|
|
||||||
backgroundColor="white"
|
|
||||||
quietZone={10}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: 16,
|
|
||||||
},
|
|
||||||
qrWrapper: {
|
|
||||||
padding: 16,
|
|
||||||
backgroundColor: 'white',
|
|
||||||
borderRadius: 12,
|
|
||||||
elevation: 5,
|
|
||||||
shadowColor: '#000',
|
|
||||||
shadowOffset: { width: 0, height: 2 },
|
|
||||||
shadowOpacity: 0.25,
|
|
||||||
shadowRadius: 3.84,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,92 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { View, Text, StyleSheet, Button, Alert } from 'react-native';
|
|
||||||
import { BarCodeScanner } from 'expo-barcode-scanner';
|
|
||||||
|
|
||||||
interface QRScannerProps {
|
|
||||||
onScan: (data: string) => void;
|
|
||||||
onClose?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const QRScanner: React.FC<QRScannerProps> = ({ onScan, onClose }) => {
|
|
||||||
const [hasPermission, setHasPermission] = useState<boolean | null>(null);
|
|
||||||
const [scanned, setScanned] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const getBarCodeScannerPermissions = async () => {
|
|
||||||
const { status } = await BarCodeScanner.requestPermissionsAsync();
|
|
||||||
setHasPermission(status === 'granted');
|
|
||||||
};
|
|
||||||
|
|
||||||
getBarCodeScannerPermissions();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
|
|
||||||
setScanned(true);
|
|
||||||
onScan(data);
|
|
||||||
Alert.alert('QR Code', `Scanned: ${data}`, [
|
|
||||||
{ text: 'OK', onPress: () => setScanned(false) },
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (hasPermission === null) {
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text>Requesting for camera permission...</Text>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (hasPermission === false) {
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text>No access to camera</Text>
|
|
||||||
{onClose && <Button title="Close" onPress={onClose} />}
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<BarCodeScanner
|
|
||||||
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
|
|
||||||
style={StyleSheet.absoluteFillObject}
|
|
||||||
/>
|
|
||||||
<View style={styles.overlay}>
|
|
||||||
<View style={styles.scanBox} />
|
|
||||||
</View>
|
|
||||||
{onClose && (
|
|
||||||
<View style={styles.buttonContainer}>
|
|
||||||
<Button title="Close Scanner" onPress={onClose} color="#FF6B6B" />
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
backgroundColor: '#000',
|
|
||||||
},
|
|
||||||
overlay: {
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
scanBox: {
|
|
||||||
width: 250,
|
|
||||||
height: 250,
|
|
||||||
borderWidth: 2,
|
|
||||||
borderColor: '#4CAF50',
|
|
||||||
borderRadius: 10,
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
},
|
|
||||||
buttonContainer: {
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: 20,
|
|
||||||
left: 20,
|
|
||||||
right: 20,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
/**
|
|
||||||
* Geofencing Service
|
|
||||||
* Handles gym location validation and distance calculations
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Gym location coordinates - Teretana Isaija Mazhovski, Skopje, North Macedonia
|
|
||||||
export const GYM_LOCATION = {
|
|
||||||
latitude: 41.9973,
|
|
||||||
longitude: 21.4280,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Geofence radius in meters (500m default)
|
|
||||||
export const GEOFENCE_RADIUS_METERS = 500;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Calculate distance between two coordinates using Haversine formula
|
|
||||||
* @param lat1 Starting latitude
|
|
||||||
* @param lon1 Starting longitude
|
|
||||||
* @param lat2 Ending latitude
|
|
||||||
* @param lon2 Ending longitude
|
|
||||||
* @returns Distance in meters
|
|
||||||
*/
|
|
||||||
export function calculateDistance(
|
|
||||||
lat1: number,
|
|
||||||
lon1: number,
|
|
||||||
lat2: number,
|
|
||||||
lon2: number
|
|
||||||
): number {
|
|
||||||
const R = 6371000; // Earth's radius in meters
|
|
||||||
const φ1 = (lat1 * Math.PI) / 180;
|
|
||||||
const φ2 = (lat2 * Math.PI) / 180;
|
|
||||||
const Δφ = ((lat2 - lat1) * Math.PI) / 180;
|
|
||||||
const Δλ = ((lon2 - lon1) * Math.PI) / 180;
|
|
||||||
|
|
||||||
const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
|
|
||||||
Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
|
|
||||||
|
|
||||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
||||||
|
|
||||||
return R * c; // Distance in meters
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check if a location is within the geofence
|
|
||||||
* @param userLat User's latitude
|
|
||||||
* @param userLon User's longitude
|
|
||||||
* @param radius Geofence radius in meters (defaults to GEOFENCE_RADIUS_METERS)
|
|
||||||
* @returns Boolean indicating if user is within geofence
|
|
||||||
*/
|
|
||||||
export function isWithinGeofence(
|
|
||||||
userLat: number,
|
|
||||||
userLon: number,
|
|
||||||
radius: number = GEOFENCE_RADIUS_METERS
|
|
||||||
): boolean {
|
|
||||||
const distance = calculateDistance(
|
|
||||||
userLat,
|
|
||||||
userLon,
|
|
||||||
GYM_LOCATION.latitude,
|
|
||||||
GYM_LOCATION.longitude
|
|
||||||
);
|
|
||||||
return distance <= radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get formatted distance string
|
|
||||||
* @param meters Distance in meters
|
|
||||||
* @returns Formatted distance string
|
|
||||||
*/
|
|
||||||
export function getFormattedDistance(meters: number): string {
|
|
||||||
if (meters < 1000) {
|
|
||||||
return `${Math.round(meters)} m`;
|
|
||||||
}
|
|
||||||
return `${(meters / 1000).toFixed(2)} km`;
|
|
||||||
}
|
|
||||||
@ -64,11 +64,6 @@ export const theme = {
|
|||||||
forest: ['#10b981', '#059669'] as const,
|
forest: ['#10b981', '#059669'] as const,
|
||||||
lavender: ['#a78bfa', '#ec4899'] as const,
|
lavender: ['#a78bfa', '#ec4899'] as const,
|
||||||
dark: ['#1e293b', '#0f172a'] as const,
|
dark: ['#1e293b', '#0f172a'] as const,
|
||||||
// Premium metallic gradients
|
|
||||||
blueMetallic: ['#1e40af', '#06b6d4', '#10b981'] as const,
|
|
||||||
amberMetallic: ['#b45309', '#f59e0b', '#fbbf24'] as const,
|
|
||||||
magentaMetallic: ['#be185d', '#ec4899', '#f472b6'] as const,
|
|
||||||
emeraldMetallic: ['#047857', '#10b981', '#6ee7b7'] as const,
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// Shadow System
|
// Shadow System
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"ignoreDeprecations": "6.0",
|
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"allowSyntheticDefaultImports": true,
|
"allowSyntheticDefaultImports": true,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user