Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6bbc0632f9 |
Binary file not shown.
Vendored
BIN
Binary file not shown.
@@ -4,7 +4,7 @@ android {
|
||||
namespace = "io.ionic.starter"
|
||||
compileSdk = rootProject.ext.compileSdkVersion
|
||||
defaultConfig {
|
||||
applicationId "com.afmeaglesnzw.app"
|
||||
applicationId "io.ionic.starter"
|
||||
minSdkVersion rootProject.ext.minSdkVersion
|
||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||
versionCode 1
|
||||
|
||||
@@ -21,12 +21,6 @@
|
||||
<action android:name="android.intent.action.MAIN" />
|
||||
<category android:name="android.intent.category.LAUNCHER" />
|
||||
</intent-filter>
|
||||
<intent-filter>
|
||||
<action android:name="android.intent.action.VIEW" />
|
||||
<category android:name="android.intent.category.DEFAULT" />
|
||||
<category android:name="android.intent.category.BROWSABLE" />
|
||||
<data android:scheme="com.afmeaglesnzw.app" />
|
||||
</intent-filter>
|
||||
|
||||
</activity>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<?xml version='1.0' encoding='utf-8'?>
|
||||
<resources>
|
||||
<string name="app_name">AFM.EAGLESNZW</string>
|
||||
<string name="title_activity_main">AFM.EAGLESNZW</string>
|
||||
<string name="app_name">PowerSlap</string>
|
||||
<string name="title_activity_main">PowerSlap</string>
|
||||
<string name="package_name">io.ionic.starter</string>
|
||||
<string name="custom_url_scheme">io.ionic.starter</string>
|
||||
</resources>
|
||||
|
||||
@@ -15,4 +15,5 @@ ext {
|
||||
cordovaAndroidVersion = '14.0.1'
|
||||
rgcfaIncludeGoogle = true
|
||||
androidxCredentialsVersion = '1.3.0'
|
||||
javaVersion = JavaVersion.VERSION_17
|
||||
}
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
import type { CapacitorConfig } from '@capacitor/cli';
|
||||
|
||||
const config: CapacitorConfig = {
|
||||
appId: 'com.afmeaglesnzw.app',
|
||||
appName: 'AFM.EAGLESNZW',
|
||||
appId: 'io.powerslap.app',
|
||||
appName: 'PowerSlap',
|
||||
webDir: 'dist',
|
||||
plugins: {
|
||||
FirebaseAuthentication: {
|
||||
|
||||
+27
-44
@@ -11,9 +11,6 @@ workflows:
|
||||
- $HOME/.gradle/caches
|
||||
- $HOME/.gradle/wrapper
|
||||
scripts:
|
||||
# Template ships with optional native plugins (maps, push, firebase auth) that most apps
|
||||
# won't use. Keeping unused plugins in package.json adds SPM/Gradle deps and bloats the
|
||||
# build. Strip any that have no import in src/ so only actually-used plugins are compiled.
|
||||
- name: Strip unused scaffold packages
|
||||
script: |
|
||||
for pkg in "@capacitor/google-maps" "@capacitor/push-notifications" "@capacitor-firebase/authentication"; do
|
||||
@@ -24,16 +21,10 @@ workflows:
|
||||
echo "Keeping $pkg (used in src/)"
|
||||
fi
|
||||
done
|
||||
# Delete package-lock.json (generated if user ever ran npm locally) so it doesn't
|
||||
# conflict with yarn.lock. --legacy-peer-deps silences peer dep warnings from older
|
||||
# Ionic/React packages that haven't updated their peerDependencies for React 18/19.
|
||||
- name: Install dependencies
|
||||
script: rm -f package-lock.json && npm install --legacy-peer-deps
|
||||
- name: Build web assets
|
||||
script: npm run build
|
||||
# Firebase config files are injected as base64 env vars by the Appcakes backend at
|
||||
# build time. Decode them here so cap sync and Gradle can pick them up. Optional —
|
||||
# builds without Firebase still succeed; native Firebase SDK just won't initialise.
|
||||
- name: Write Firebase config
|
||||
script: |
|
||||
if [ -n "$GOOGLE_SERVICES_JSON" ]; then
|
||||
@@ -46,8 +37,6 @@ workflows:
|
||||
echo "$GOOGLE_SERVICE_INFO_PLIST" | base64 --decode > ios/App/App/GoogleService-Info.plist
|
||||
echo "Wrote GoogleService-Info.plist ($(wc -c < ios/App/App/GoogleService-Info.plist) bytes)"
|
||||
fi
|
||||
# cap sync copies the built web assets (dist/) into android/app/src/main/assets/public/
|
||||
# and updates Capacitor plugin registrations in MainActivity. Must run after npm build.
|
||||
- name: Capacitor sync
|
||||
script: npx cap sync android
|
||||
- name: Set up debug keystore
|
||||
@@ -239,25 +228,26 @@ workflows:
|
||||
script: rm -f package-lock.json && npm install --legacy-peer-deps
|
||||
- name: Build web assets
|
||||
script: npm run build
|
||||
# First sync: regenerates CapApp-SPM/Package.swift with the correct plugin list.
|
||||
# Note: this project uses Capacitor SPM (no CocoaPods/Podfile), so cap sync replaces
|
||||
# pod install — it regenerates CapApp-SPM/Package.swift and copies web assets.
|
||||
- name: Capacitor sync
|
||||
script: npx cap sync ios
|
||||
# Decode Firebase plist to disk so it is present during the second sync.
|
||||
- name: Write Firebase config
|
||||
script: |
|
||||
if [ -n "$GOOGLE_SERVICE_INFO_PLIST" ]; then
|
||||
echo "$GOOGLE_SERVICE_INFO_PLIST" | base64 --decode > ios/App/App/GoogleService-Info.plist
|
||||
ruby -e "
|
||||
require 'xcodeproj'
|
||||
project = Xcodeproj::Project.open('ios/App/App.xcodeproj')
|
||||
target = project.targets.find { |t| t.name == 'App' }
|
||||
app_group = project.main_group['App']
|
||||
unless app_group.files.find { |f| f.path == 'GoogleService-Info.plist' }
|
||||
file_ref = app_group.new_reference('GoogleService-Info.plist')
|
||||
target.resources_build_phase.add_file_reference(file_ref)
|
||||
project.save
|
||||
end
|
||||
"
|
||||
fi
|
||||
# Second sync ensures CapApp-SPM/Package.swift is consistent after the plist write.
|
||||
- name: Capacitor sync
|
||||
script: npx cap sync ios
|
||||
# Run configure_xcode.rb after both syncs so its xcodeproj changes (plist file
|
||||
# reference + SPM product linking) are not overwritten by a subsequent cap sync.
|
||||
# configure_xcode.rb is stamped fresh from template on every build push.
|
||||
- name: Configure Xcode project
|
||||
script: ruby configure_xcode.rb
|
||||
- name: Set up signing
|
||||
script: |
|
||||
keychain initialize
|
||||
@@ -282,23 +272,11 @@ workflows:
|
||||
echo "No signing credentials configured — build will fail at signing"
|
||||
exit 1
|
||||
fi
|
||||
# --workspace: Capacitor SPM projects require workspace context for Xcode to resolve
|
||||
# the CapApp-SPM local package. Using --project causes xcodebuild to fail on
|
||||
# Xcode 26+ because SPM resolution requires workspace scope. App.xcworkspace is a
|
||||
# static file committed to the template (not generated by cap sync) that wraps
|
||||
# App.xcodeproj for this purpose.
|
||||
# --no-show-build-settings: xcode-project runs xcodebuild -showBuildSettings as a
|
||||
# pre-build diagnostic. Xcode 26 fails this step for SPM projects even with
|
||||
# --workspace, so we skip it. The actual archive step still surfaces real errors.
|
||||
# --disable-xcpretty: xcpretty reformats and filters xcodebuild output, swallowing
|
||||
# the actual error lines when a build fails. Raw output makes failures debuggable.
|
||||
- name: Build IPA
|
||||
script: |
|
||||
xcode-project build-ipa \
|
||||
--workspace ios/App/App.xcworkspace \
|
||||
--scheme App \
|
||||
--no-show-build-settings \
|
||||
--disable-xcpretty
|
||||
--project ios/App/App.xcodeproj \
|
||||
--scheme App
|
||||
artifacts:
|
||||
- build/ios/ipa/*.ipa
|
||||
|
||||
@@ -326,15 +304,24 @@ workflows:
|
||||
script: npm run build
|
||||
- name: Capacitor sync
|
||||
script: npx cap sync ios
|
||||
- name: Configure Xcode project
|
||||
- name: Write Firebase config
|
||||
script: |
|
||||
if [ -n "$GOOGLE_SERVICE_INFO_PLIST" ]; then
|
||||
echo "$GOOGLE_SERVICE_INFO_PLIST" | base64 --decode > ios/App/App/GoogleService-Info.plist
|
||||
ruby -e "
|
||||
require 'xcodeproj'
|
||||
project = Xcodeproj::Project.open('ios/App/App.xcodeproj')
|
||||
target = project.targets.find { |t| t.name == 'App' }
|
||||
app_group = project.main_group['App']
|
||||
unless app_group.files.find { |f| f.path == 'GoogleService-Info.plist' }
|
||||
file_ref = app_group.new_reference('GoogleService-Info.plist')
|
||||
target.resources_build_phase.add_file_reference(file_ref)
|
||||
project.save
|
||||
end
|
||||
"
|
||||
fi
|
||||
- name: Capacitor sync
|
||||
script: npx cap sync ios
|
||||
- name: Configure Xcode project
|
||||
script: ruby configure_xcode.rb
|
||||
- name: Set up signing
|
||||
script: |
|
||||
keychain initialize
|
||||
@@ -356,16 +343,12 @@ workflows:
|
||||
echo "$CM_PROVISIONING_PROFILE" | base64 --decode > "$HOME/Library/MobileDevice/Provisioning Profiles/profile.mobileprovision"
|
||||
xcode-project use-profiles
|
||||
fi
|
||||
# See ios-debug Build IPA comments for --workspace, --no-show-build-settings,
|
||||
# and --disable-xcpretty rationale — same reasons apply here.
|
||||
- name: Build IPA
|
||||
script: |
|
||||
xcode-project build-ipa \
|
||||
--workspace ios/App/App.xcworkspace \
|
||||
--project ios/App/App.xcodeproj \
|
||||
--scheme App \
|
||||
--config Release \
|
||||
--no-show-build-settings \
|
||||
--disable-xcpretty
|
||||
--config Release
|
||||
- name: Publish
|
||||
script: |
|
||||
if [ "$SUBMIT_TO_TESTFLIGHT" = "true" ] || [ "$SUBMIT_TO_APP_STORE" = "true" ]; then
|
||||
|
||||
@@ -1,118 +0,0 @@
|
||||
#!/usr/bin/env ruby
|
||||
# configure_xcode.rb — stamped fresh from template on every build (see gitea.service.ts)
|
||||
#
|
||||
# 1. Adds GoogleService-Info.plist to the Xcode target if present (xcodeproj gem)
|
||||
# 2. Scans Swift sources for Firebase imports and injects matching products into
|
||||
# CapApp-SPM/Package.swift — the correct approach for Capacitor SPM projects
|
||||
# where all native linking goes through CapApp-SPM, not App.xcodeproj directly.
|
||||
|
||||
require 'xcodeproj'
|
||||
|
||||
PROJECT_PATH = 'ios/App/App.xcodeproj'
|
||||
TARGET_NAME = 'App'
|
||||
PLIST_SRC = 'ios/App/App/GoogleService-Info.plist'
|
||||
CAP_APP_SPM = 'ios/App/CapApp-SPM/Package.swift'
|
||||
|
||||
# ── 1. GoogleService-Info.plist ───────────────────────────────────────────────
|
||||
if File.exist?(PLIST_SRC)
|
||||
project = Xcodeproj::Project.open(PROJECT_PATH)
|
||||
target = project.targets.find { |t| t.name == TARGET_NAME }
|
||||
if target
|
||||
app_group = project.main_group['App']
|
||||
unless app_group&.files&.find { |f| f.path == 'GoogleService-Info.plist' }
|
||||
file_ref = app_group.new_reference('GoogleService-Info.plist')
|
||||
target.resources_build_phase.add_file_reference(file_ref)
|
||||
project.save
|
||||
puts "Added GoogleService-Info.plist to target"
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
# ── 2. Scan Swift sources for Firebase imports ────────────────────────────────
|
||||
swift_files = Dir['ios/App/App/**/*.swift']
|
||||
firebase_imports = swift_files
|
||||
.flat_map { |f| File.readlines(f) rescue [] }
|
||||
.grep(/^\s*import\s+Firebase\w+/)
|
||||
.map { |l| l.strip.split(/\s+/).last }
|
||||
.uniq
|
||||
.sort
|
||||
|
||||
if firebase_imports.empty?
|
||||
puts "No Firebase imports found — skipping CapApp-SPM update"
|
||||
exit 0
|
||||
end
|
||||
|
||||
puts "Firebase imports detected: #{firebase_imports.join(', ')}"
|
||||
|
||||
unless File.exist?(CAP_APP_SPM)
|
||||
warn "WARNING: #{CAP_APP_SPM} not found — was cap sync run?"
|
||||
exit 0
|
||||
end
|
||||
|
||||
# ── 3. Detect firebase-ios-sdk URL and version from node_modules ──────────────
|
||||
# Read from the ACTUAL node_modules on this build machine (populated by npm install)
|
||||
# so the version we inject matches what @capacitor-firebase/* already resolved.
|
||||
firebase_url = nil
|
||||
firebase_version = nil
|
||||
|
||||
Dir['node_modules/@capacitor-firebase/**/Package.swift',
|
||||
'node_modules/@capacitor/push-notifications/**/Package.swift'].each do |f|
|
||||
content = File.read(f) rescue next
|
||||
url_m = content.match(/\.package\(url:\s*"(https:\/\/github\.com\/firebase\/firebase-ios-sdk[^"]*)"/)
|
||||
ver_m = content.match(/firebase-ios-sdk[^)]+from:\s*"(\d+)\.(\d+)\.(\d+)"/)
|
||||
next unless url_m && ver_m
|
||||
|
||||
firebase_url = url_m[1]
|
||||
major = ver_m[1].to_i
|
||||
firebase_version = "#{major}.0.0"
|
||||
puts "Detected firebase-ios-sdk from #{f}: url=#{firebase_url} → using from: \"#{firebase_version}\""
|
||||
break
|
||||
end
|
||||
|
||||
# Fallback — should rarely be needed
|
||||
unless firebase_url
|
||||
firebase_url = 'https://github.com/firebase/firebase-ios-sdk.git'
|
||||
firebase_version = '11.0.0'
|
||||
puts "Could not detect firebase-ios-sdk version from node_modules — using fallback #{firebase_version}"
|
||||
end
|
||||
|
||||
firebase_pkg = 'firebase-ios-sdk'
|
||||
|
||||
lines = File.read(CAP_APP_SPM).split("\n")
|
||||
|
||||
# ── 4. Inject firebase-ios-sdk as a direct package dependency if missing ──────
|
||||
# Normalise URL check to handle both with and without .git suffix
|
||||
firebase_url_base = firebase_url.sub(/\.git$/, '')
|
||||
unless lines.any? { |l| l.include?(firebase_url_base) }
|
||||
last_pkg_idx = lines.rindex { |l| l.include?('.package(') }
|
||||
if last_pkg_idx
|
||||
lines[last_pkg_idx] = lines[last_pkg_idx].rstrip
|
||||
lines[last_pkg_idx] += ',' unless lines[last_pkg_idx].end_with?(',')
|
||||
lines.insert(last_pkg_idx + 1,
|
||||
" .package(url: \"#{firebase_url}\", from: \"#{firebase_version}\")")
|
||||
puts "Added #{firebase_pkg} to CapApp-SPM package dependencies"
|
||||
else
|
||||
warn "WARNING: no .package( line found in #{CAP_APP_SPM} — cannot inject dependency"
|
||||
end
|
||||
end
|
||||
|
||||
# ── 5. Inject each detected product into the target dependencies if missing ───
|
||||
firebase_imports.each do |product|
|
||||
next if product == 'Firebase' # umbrella import — not a linkable SPM product
|
||||
|
||||
product_str = ".product(name: \"#{product}\", package: \"#{firebase_pkg}\")"
|
||||
next if lines.any? { |l| l.include?(product_str) }
|
||||
|
||||
last_prod_idx = lines.rindex { |l| l.include?('.product(') }
|
||||
if last_prod_idx
|
||||
lines[last_prod_idx] = lines[last_prod_idx].rstrip
|
||||
lines[last_prod_idx] += ',' unless lines[last_prod_idx].end_with?(',')
|
||||
lines.insert(last_prod_idx + 1, " #{product_str}")
|
||||
puts "Added #{product} to CapApp-SPM target dependencies"
|
||||
else
|
||||
warn "WARNING: no .product( line found in #{CAP_APP_SPM} — cannot inject #{product}"
|
||||
end
|
||||
end
|
||||
|
||||
File.write(CAP_APP_SPM, lines.join("\n"))
|
||||
puts "CapApp-SPM/Package.swift updated"
|
||||
Vendored
BIN
Binary file not shown.
Vendored
BIN
Binary file not shown.
@@ -26,7 +26,6 @@
|
||||
504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
|
||||
504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
|
||||
504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
|
||||
1A4EB3C21FED79650016851F /* App.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = App.entitlements; sourceTree = "<group>"; };
|
||||
50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
|
||||
958DCC722DB07C7200EA8C5F /* debug.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = debug.xcconfig; path = ../debug.xcconfig; sourceTree = SOURCE_ROOT; };
|
||||
/* End PBXFileReference section */
|
||||
@@ -69,7 +68,6 @@
|
||||
504EC30E1FED79650016851F /* Assets.xcassets */,
|
||||
504EC3101FED79650016851F /* LaunchScreen.storyboard */,
|
||||
504EC3131FED79650016851F /* Info.plist */,
|
||||
1A4EB3C21FED79650016851F /* App.entitlements */,
|
||||
2FAD9762203C412B000D30F8 /* config.xml */,
|
||||
50B271D01FEDC1A000F3C39B /* public */,
|
||||
);
|
||||
@@ -297,7 +295,6 @@
|
||||
baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
|
||||
buildSettings = {
|
||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||
CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
|
||||
CODE_SIGN_STYLE = Automatic;
|
||||
CURRENT_PROJECT_VERSION = 1;
|
||||
INFOPLIST_FILE = App/Info.plist;
|
||||
@@ -308,7 +305,7 @@
|
||||
);
|
||||
MARKETING_VERSION = 1.0;
|
||||
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
|
||||
PRODUCT_BUNDLE_IDENTIFIER = com.afmeaglesnzw.app;
|
||||
PRODUCT_BUNDLE_IDENTIFIER = io.powerslap.app;
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
|
||||
SWIFT_VERSION = 5.0;
|
||||
@@ -320,7 +317,6 @@
|
||||
isa = XCBuildConfiguration;
|
||||
buildSettings = {
|
||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||
CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
|
||||
CODE_SIGN_STYLE = Automatic;
|
||||
CURRENT_PROJECT_VERSION = 1;
|
||||
INFOPLIST_FILE = App/Info.plist;
|
||||
@@ -330,7 +326,7 @@
|
||||
"@executable_path/Frameworks",
|
||||
);
|
||||
MARKETING_VERSION = 1.0;
|
||||
PRODUCT_BUNDLE_IDENTIFIER = com.afmeaglesnzw.app;
|
||||
PRODUCT_BUNDLE_IDENTIFIER = io.powerslap.app;
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
|
||||
SWIFT_VERSION = 5.0;
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Workspace
|
||||
version = "1.0">
|
||||
<FileRef
|
||||
location = "group:App.xcodeproj">
|
||||
</FileRef>
|
||||
</Workspace>
|
||||
@@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>IDEDidComputeMac32BitWarning</key>
|
||||
<true/>
|
||||
</dict>
|
||||
</plist>
|
||||
@@ -7,7 +7,7 @@
|
||||
<key>CFBundleDevelopmentRegion</key>
|
||||
<string>en</string>
|
||||
<key>CFBundleDisplayName</key>
|
||||
<string>AFM.EAGLESNZW</string>
|
||||
<string>PowerSlap</string>
|
||||
<key>CFBundleExecutable</key>
|
||||
<string>$(EXECUTABLE_NAME)</string>
|
||||
<key>CFBundleIdentifier</key>
|
||||
@@ -51,16 +51,12 @@
|
||||
<array>
|
||||
<dict>
|
||||
<key>CFBundleURLName</key>
|
||||
<string>com.afmeaglesnzw.app</string>
|
||||
<string>io.powerslap.app</string>
|
||||
<key>CFBundleURLSchemes</key>
|
||||
<array>
|
||||
<string>com.afmeaglesnzw.app</string>
|
||||
<string>io.powerslap.app</string>
|
||||
</array>
|
||||
</dict>
|
||||
</array>
|
||||
<key>NSPhotoLibraryUsageDescription</key>
|
||||
<string>This app needs access to your photo library.</string>
|
||||
<key>NSCameraUsageDescription</key>
|
||||
<string>This app needs camera access.</string>
|
||||
</dict>
|
||||
</plist>
|
||||
|
||||
+4
-6
@@ -10,7 +10,7 @@
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@capacitor-firebase/authentication": "^8.0.0",
|
||||
"@capacitor-firebase/authentication": "^7.0.0",
|
||||
"@capacitor/android": "8.3.4",
|
||||
"@capacitor/app": "8.1.0",
|
||||
"@capacitor/core": "8.3.4",
|
||||
@@ -18,14 +18,12 @@
|
||||
"@capacitor/haptics": "8.0.2",
|
||||
"@capacitor/ios": "8.3.4",
|
||||
"@capacitor/keyboard": "8.0.3",
|
||||
"@capacitor/preferences": "^8.0.1",
|
||||
"@capacitor/push-notifications": "^8.1.1",
|
||||
"@capacitor/status-bar": "8.0.2",
|
||||
"@hookform/resolvers": "^3.9.0",
|
||||
"@ionic/pwa-elements": "^3.0.0",
|
||||
"@ionic/react": "8.8.7",
|
||||
"@ionic/react-router": "8.8.7",
|
||||
"@supabase/supabase-js": "^2.108.1",
|
||||
"@ionic/react": "^8.5.0",
|
||||
"@ionic/react-router": "^8.5.0",
|
||||
"@supabase/supabase-js": "^2.0.0",
|
||||
"firebase": "^11.0.0",
|
||||
"ionicons": "^7.4.0",
|
||||
"katex": "^0.16.0",
|
||||
|
||||
Vendored
BIN
Binary file not shown.
+19
-153
@@ -1,166 +1,32 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Redirect, Route } from 'react-router-dom';
|
||||
import {
|
||||
IonApp,
|
||||
IonIcon,
|
||||
IonLabel,
|
||||
IonRouterOutlet,
|
||||
IonTabBar,
|
||||
IonTabButton,
|
||||
IonTabs,
|
||||
setupIonicReact,
|
||||
} from '@ionic/react';
|
||||
import { IonReactRouter } from '@ionic/react-router';
|
||||
import {
|
||||
homeOutline,
|
||||
calendarOutline,
|
||||
personOutline,
|
||||
newspaperOutline,
|
||||
} from 'ionicons/icons';
|
||||
import React from "react";
|
||||
import { Redirect, Route } from "react-router-dom";
|
||||
import { IonApp, IonRouterOutlet } from "@ionic/react";
|
||||
import { IonReactRouter } from "@ionic/react-router";
|
||||
|
||||
/* Core CSS required for Ionic components to work properly */
|
||||
import '@ionic/react/css/core.css';
|
||||
import "@ionic/react/css/core.css";
|
||||
import "@ionic/react/css/normalize.css";
|
||||
import "@ionic/react/css/structure.css";
|
||||
import "@ionic/react/css/typography.css";
|
||||
import "@ionic/react/css/padding.css";
|
||||
import "@ionic/react/css/float-elements.css";
|
||||
import "@ionic/react/css/text-alignment.css";
|
||||
import "@ionic/react/css/text-transformation.css";
|
||||
import "@ionic/react/css/flex-utils.css";
|
||||
import "@ionic/react/css/display.css";
|
||||
|
||||
/* Basic CSS for apps built with Ionic */
|
||||
import '@ionic/react/css/normalize.css';
|
||||
import '@ionic/react/css/structure.css';
|
||||
import '@ionic/react/css/typography.css';
|
||||
import "./theme/variables.css";
|
||||
|
||||
/* Optional CSS utils that can be commented out */
|
||||
import '@ionic/react/css/padding.css';
|
||||
import '@ionic/react/css/float-elements.css';
|
||||
import '@ionic/react/css/text-alignment.css';
|
||||
import '@ionic/react/css/text-transformation.css';
|
||||
import '@ionic/react/css/flex-utils.css';
|
||||
import '@ionic/react/css/display.css';
|
||||
import Home from "./pages/Home";
|
||||
|
||||
/* Theme variables */
|
||||
import './theme/variables.css';
|
||||
|
||||
import { AuthProvider, useAuth } from './contexts/AuthContext';
|
||||
import ProtectedRoute from './components/ProtectedRoute';
|
||||
|
||||
import Auth from './pages/Auth';
|
||||
import VerifyEmail from './pages/VerifyEmail';
|
||||
import SetupProfile from './pages/SetupProfile';
|
||||
import Home from './pages/Home';
|
||||
import Events from './pages/Events';
|
||||
import Profile from './pages/Profile';
|
||||
import EventDetail from './pages/EventDetail';
|
||||
import AdminEventForm from './pages/AdminEventForm';
|
||||
import News from './pages/News';
|
||||
import NewsDetail from './pages/NewsDetail';
|
||||
import AdminNewsForm from './pages/AdminNewsForm';
|
||||
|
||||
import { setStatusBarStyle, Style } from './utils/statusBar';
|
||||
|
||||
setupIonicReact();
|
||||
|
||||
const SetupProfileRoute: React.FC = () => {
|
||||
const { user } = useAuth();
|
||||
if (!user) return <Redirect to="/auth" />;
|
||||
return <SetupProfile />;
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
useEffect(() => {
|
||||
setStatusBarStyle(Style.Dark);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
const App: React.FC = () => (
|
||||
<IonApp>
|
||||
<AuthProvider>
|
||||
<IonReactRouter>
|
||||
<IonRouterOutlet>
|
||||
{/* Unprotected Routes */}
|
||||
<Route path="/auth" component={Auth} exact />
|
||||
<Route path="/verify-email" component={VerifyEmail} exact />
|
||||
|
||||
{/* Profile Setup (requires user, but no profile yet) */}
|
||||
<Route path="/setup-profile" component={SetupProfileRoute} exact />
|
||||
|
||||
{/* Non-tab Protected Routes */}
|
||||
<ProtectedRoute
|
||||
path="/event/:id([0-9a-fA-F-]{36})"
|
||||
component={EventDetail}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/admin/events/new"
|
||||
component={AdminEventForm}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/admin/events/:id([0-9a-fA-F-]{36})/edit"
|
||||
component={AdminEventForm}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/news/:id([0-9a-fA-F-]{36})"
|
||||
component={NewsDetail}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/admin/news/new"
|
||||
component={AdminNewsForm}
|
||||
exact
|
||||
/>
|
||||
<ProtectedRoute
|
||||
path="/admin/news/:id([0-9a-fA-F-]{36})"
|
||||
component={AdminNewsForm}
|
||||
exact
|
||||
/>
|
||||
|
||||
{/* Tabs */}
|
||||
<ProtectedRoute
|
||||
path={['/home', '/events', '/news', '/profile']}
|
||||
component={() => (
|
||||
<IonTabs>
|
||||
<IonRouterOutlet>
|
||||
<Route path="/home" component={Home} exact />
|
||||
<Route path="/events" component={Events} exact />
|
||||
<Route path="/news" component={News} exact />
|
||||
<Route path="/profile" component={Profile} exact />
|
||||
</IonRouterOutlet>
|
||||
<IonTabBar
|
||||
slot="bottom"
|
||||
style={{
|
||||
'--background': 'var(--color-surface)',
|
||||
'--border': 'none',
|
||||
color: 'var(--color-text-secondary)',
|
||||
boxShadow: '0 -2px 10px rgba(47,34,29,0.05)',
|
||||
}}
|
||||
>
|
||||
<IonTabButton tab="home" href="/home">
|
||||
<IonIcon icon={homeOutline} />
|
||||
<IonLabel>Home</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="events" href="/events">
|
||||
<IonIcon icon={calendarOutline} />
|
||||
<IonLabel>Events</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="news" href="/news">
|
||||
<IonIcon icon={newspaperOutline} />
|
||||
<IonLabel>News</IonLabel>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="profile" href="/profile">
|
||||
<IonIcon icon={personOutline} />
|
||||
<IonLabel>Profile</IonLabel>
|
||||
</IonTabButton>
|
||||
</IonTabBar>
|
||||
</IonTabs>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Root Redirect */}
|
||||
<Route exact path="/">
|
||||
<Redirect to="/auth" />
|
||||
</Route>
|
||||
<Redirect exact from="/" to="/home" />
|
||||
</IonRouterOutlet>
|
||||
</IonReactRouter>
|
||||
</AuthProvider>
|
||||
</IonApp>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,112 +0,0 @@
|
||||
import React from 'react';
|
||||
import { ChurchEvent } from '../types';
|
||||
|
||||
interface EventListCardProps {
|
||||
event: ChurchEvent;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const EventListCard: React.FC<EventListCardProps> = ({ event, onClick }) => {
|
||||
const categoryName = event.event_categories?.name || 'Event';
|
||||
const date = new Date(event.start_at);
|
||||
const hasTime = date.getHours() !== 0 || date.getMinutes() !== 0;
|
||||
|
||||
const startTime = hasTime
|
||||
? date.toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: null;
|
||||
|
||||
const dateStr = date.toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '18px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
cursor: 'pointer',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--color-brand-soft)',
|
||||
color: 'var(--color-brand)',
|
||||
borderRadius: '999px',
|
||||
padding: '4px 10px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
}}
|
||||
>
|
||||
{dateStr}
|
||||
{startTime ? ` • ${startTime}` : ''}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '500',
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
{categoryName}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3
|
||||
style={{
|
||||
margin: '0 0 4px 0',
|
||||
fontSize: '16px',
|
||||
fontWeight: '700',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
{event.title}
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
color: 'var(--color-text-secondary)',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{event.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
{event.venue}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventListCard;
|
||||
@@ -1,100 +0,0 @@
|
||||
import React from 'react';
|
||||
import { ChurchEvent } from '../types';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
import { calendarOutline } from 'ionicons/icons';
|
||||
|
||||
interface EventPreviewCardProps {
|
||||
event: ChurchEvent;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const EventPreviewCard: React.FC<EventPreviewCardProps> = ({
|
||||
event,
|
||||
onClick,
|
||||
}) => {
|
||||
const categoryName = event.event_categories?.name || 'Event';
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '8px 0',
|
||||
gap: '10px',
|
||||
background: 'transparent',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '12px',
|
||||
background: 'var(--color-brand-soft)',
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={calendarOutline}
|
||||
style={{ color: 'var(--color-brand)', fontSize: '20px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<h4
|
||||
style={{
|
||||
margin: '0 0 2px 0',
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: 'var(--color-text-primary)',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{event.title}
|
||||
</h4>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '12px',
|
||||
fontWeight: '400',
|
||||
color: 'var(--color-text-secondary)',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{(() => {
|
||||
const date = new Date(event.start_at);
|
||||
const hasTime = date.getHours() !== 0 || date.getMinutes() !== 0;
|
||||
const timeStr = hasTime
|
||||
? `${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} • `
|
||||
: '';
|
||||
return `${timeStr}${event.day_label}`;
|
||||
})()}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--color-brand-soft)',
|
||||
color: 'var(--color-brand)',
|
||||
borderRadius: '999px',
|
||||
padding: '4px 10px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{categoryName}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventPreviewCard;
|
||||
@@ -1,76 +0,0 @@
|
||||
import React from 'react';
|
||||
import { IonIcon } from '@ionic/react';
|
||||
|
||||
interface HomeStatCardProps {
|
||||
label: string;
|
||||
value: string;
|
||||
caption: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
const HomeStatCard: React.FC<HomeStatCardProps> = ({
|
||||
label,
|
||||
value,
|
||||
caption,
|
||||
icon,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '18px',
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
{icon && (
|
||||
<IonIcon
|
||||
icon={icon}
|
||||
style={{ color: 'var(--color-brand)', fontSize: '16px' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '28px',
|
||||
fontWeight: '400',
|
||||
color: 'var(--color-text-primary)',
|
||||
margin: '4px 0 0 0',
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '400',
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
{caption}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeStatCard;
|
||||
@@ -1,70 +0,0 @@
|
||||
import React from 'react';
|
||||
import { IonInput } from '@ionic/react';
|
||||
|
||||
interface OtpInputRowProps {
|
||||
digits: string[];
|
||||
onChange: (index: number, value: string) => void;
|
||||
onKeyDown: (
|
||||
index: number,
|
||||
e: React.KeyboardEvent<HTMLIonInputElement>
|
||||
) => void;
|
||||
inputRefs: React.RefObject<HTMLIonInputElement>[];
|
||||
}
|
||||
|
||||
const OtpInputRow: React.FC<OtpInputRowProps> = ({
|
||||
digits,
|
||||
onChange,
|
||||
onKeyDown,
|
||||
inputRefs,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
justifyContent: 'center',
|
||||
margin: '0 0 20px 0',
|
||||
}}
|
||||
>
|
||||
{digits.map((digit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '12px',
|
||||
width: '48px',
|
||||
height: '56px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
|
||||
}}
|
||||
>
|
||||
<IonInput
|
||||
ref={inputRefs[index]}
|
||||
type="tel"
|
||||
inputMode="numeric"
|
||||
maxlength={1}
|
||||
value={digit}
|
||||
onIonInput={(e) =>
|
||||
onChange(index, (e.target as HTMLIonInputElement).value as string)
|
||||
}
|
||||
onKeyDown={(e) => onKeyDown(index, e)}
|
||||
style={{
|
||||
fontSize: '24px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
textAlign: 'center',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OtpInputRow;
|
||||
@@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Route, Redirect, RouteProps } from 'react-router-dom';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
|
||||
interface ProtectedRouteProps extends RouteProps {
|
||||
component: React.ComponentType<any>;
|
||||
}
|
||||
|
||||
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
|
||||
component: Component,
|
||||
...rest
|
||||
}) => {
|
||||
const { user, profile } = useAuth();
|
||||
|
||||
return (
|
||||
<Route
|
||||
{...rest}
|
||||
render={(props) => {
|
||||
if (!user) {
|
||||
return <Redirect to="/auth" />;
|
||||
}
|
||||
if (profile !== undefined && profile === null) {
|
||||
return <Redirect to="/setup-profile" />;
|
||||
}
|
||||
if (profile !== undefined && profile !== null && !profile.full_name) {
|
||||
return <Redirect to="/setup-profile" />;
|
||||
}
|
||||
return <Component {...props} />;
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProtectedRoute;
|
||||
@@ -1,137 +0,0 @@
|
||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||
import { User } from '@supabase/supabase-js';
|
||||
import { supabase } from '../supabase';
|
||||
import { IonSpinner } from '@ionic/react';
|
||||
|
||||
export interface Profile {
|
||||
id: string;
|
||||
email: string;
|
||||
full_name: string;
|
||||
role: string;
|
||||
ministry_group: string | null;
|
||||
avatar_url: string | null;
|
||||
}
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null;
|
||||
profile: Profile | null;
|
||||
refreshProfile: () => Promise<void>;
|
||||
signOut: () => Promise<void>;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType>({
|
||||
user: null,
|
||||
profile: null,
|
||||
refreshProfile: async () => {},
|
||||
signOut: async () => {},
|
||||
});
|
||||
|
||||
const PROFILE_CACHE_KEY = 'church_app_profile_cache';
|
||||
|
||||
async function getCachedProfile(): Promise<Profile | null> {
|
||||
const cached = localStorage.getItem(PROFILE_CACHE_KEY);
|
||||
if (cached) {
|
||||
try {
|
||||
return JSON.parse(cached);
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function cacheProfile(profile: Profile) {
|
||||
localStorage.setItem(PROFILE_CACHE_KEY, JSON.stringify(profile));
|
||||
}
|
||||
|
||||
async function clearCachedProfile() {
|
||||
localStorage.removeItem(PROFILE_CACHE_KEY);
|
||||
}
|
||||
|
||||
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [profile, setProfile] = useState<Profile | null>(null);
|
||||
const [initializing, setInitializing] = useState(true);
|
||||
|
||||
const fetchProfile = async (userId: string) => {
|
||||
const cached = await getCachedProfile();
|
||||
if (cached && cached.id === userId) {
|
||||
setProfile(cached);
|
||||
}
|
||||
const { data } = await supabase
|
||||
.from('profiles')
|
||||
.select('*')
|
||||
.eq('id', userId)
|
||||
.single();
|
||||
if (data) {
|
||||
setProfile(data);
|
||||
await cacheProfile(data);
|
||||
}
|
||||
};
|
||||
|
||||
const signOut = async () => {
|
||||
await supabase.auth.signOut();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// One-shot bootstrap
|
||||
supabase.auth.getSession().then(async ({ data }) => {
|
||||
const currentUser = data.session?.user ?? null;
|
||||
setUser(currentUser);
|
||||
if (currentUser) {
|
||||
await fetchProfile(currentUser.id);
|
||||
}
|
||||
setInitializing(false); // only ever called once - IonReactRouter mounts after this
|
||||
});
|
||||
|
||||
// Subsequent events: update state, never touch initializing
|
||||
const {
|
||||
data: { subscription },
|
||||
} = supabase.auth.onAuthStateChange(async (_event, session) => {
|
||||
const currentUser = session?.user ?? null;
|
||||
setUser(currentUser);
|
||||
if (currentUser) {
|
||||
await fetchProfile(currentUser.id);
|
||||
} else {
|
||||
setProfile(null);
|
||||
await clearCachedProfile();
|
||||
}
|
||||
});
|
||||
|
||||
return () => subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
if (initializing) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100vh',
|
||||
backgroundColor: '#f5f7f4',
|
||||
}}
|
||||
>
|
||||
<IonSpinner name="crescent" color="primary" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider
|
||||
value={{
|
||||
user,
|
||||
profile,
|
||||
refreshProfile: () =>
|
||||
user ? fetchProfile(user.id) : Promise.resolve(),
|
||||
signOut,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useAuth = () => useContext(AuthContext);
|
||||
@@ -1,305 +0,0 @@
|
||||
export type Json =
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| null
|
||||
| { [key: string]: Json | undefined }
|
||||
| Json[]
|
||||
|
||||
export type Database = {
|
||||
// Allows to automatically instantiate createClient with right options
|
||||
// instead of createClient<Database, { PostgrestVersion: 'XX' }>(URL, KEY)
|
||||
__InternalSupabase: {
|
||||
PostgrestVersion: "14.5"
|
||||
}
|
||||
public: {
|
||||
Tables: {
|
||||
event_categories: {
|
||||
Row: {
|
||||
accent_color: string | null
|
||||
created_at: string
|
||||
id: string
|
||||
name: string
|
||||
slug: string
|
||||
}
|
||||
Insert: {
|
||||
accent_color?: string | null
|
||||
created_at?: string
|
||||
id?: string
|
||||
name: string
|
||||
slug: string
|
||||
}
|
||||
Update: {
|
||||
accent_color?: string | null
|
||||
created_at?: string
|
||||
id?: string
|
||||
name?: string
|
||||
slug?: string
|
||||
}
|
||||
Relationships: []
|
||||
}
|
||||
events: {
|
||||
Row: {
|
||||
audience: string
|
||||
category_id: string | null
|
||||
created_at: string
|
||||
created_by: string | null
|
||||
day_label: string
|
||||
description: string
|
||||
end_at: string | null
|
||||
id: string
|
||||
is_featured: boolean
|
||||
start_at: string
|
||||
title: string
|
||||
updated_at: string
|
||||
venue: string
|
||||
}
|
||||
Insert: {
|
||||
audience?: string
|
||||
category_id?: string | null
|
||||
created_at?: string
|
||||
created_by?: string | null
|
||||
day_label: string
|
||||
description?: string
|
||||
end_at?: string | null
|
||||
id?: string
|
||||
is_featured?: boolean
|
||||
start_at: string
|
||||
title: string
|
||||
updated_at?: string
|
||||
venue: string
|
||||
}
|
||||
Update: {
|
||||
audience?: string
|
||||
category_id?: string | null
|
||||
created_at?: string
|
||||
created_by?: string | null
|
||||
day_label?: string
|
||||
description?: string
|
||||
end_at?: string | null
|
||||
id?: string
|
||||
is_featured?: boolean
|
||||
start_at?: string
|
||||
title?: string
|
||||
updated_at?: string
|
||||
venue?: string
|
||||
}
|
||||
Relationships: [
|
||||
{
|
||||
foreignKeyName: "events_category_id_fkey"
|
||||
columns: ["category_id"]
|
||||
isOneToOne: false
|
||||
referencedRelation: "event_categories"
|
||||
referencedColumns: ["id"]
|
||||
},
|
||||
]
|
||||
}
|
||||
news: {
|
||||
Row: {
|
||||
content: string
|
||||
created_at: string | null
|
||||
created_by: string
|
||||
id: string
|
||||
image_url: string | null
|
||||
title: string
|
||||
updated_at: string | null
|
||||
}
|
||||
Insert: {
|
||||
content: string
|
||||
created_at?: string | null
|
||||
created_by: string
|
||||
id?: string
|
||||
image_url?: string | null
|
||||
title: string
|
||||
updated_at?: string | null
|
||||
}
|
||||
Update: {
|
||||
content?: string
|
||||
created_at?: string | null
|
||||
created_by?: string
|
||||
id?: string
|
||||
image_url?: string | null
|
||||
title?: string
|
||||
updated_at?: string | null
|
||||
}
|
||||
Relationships: [
|
||||
{
|
||||
foreignKeyName: "news_created_by_fkey"
|
||||
columns: ["created_by"]
|
||||
isOneToOne: false
|
||||
referencedRelation: "profiles"
|
||||
referencedColumns: ["id"]
|
||||
},
|
||||
]
|
||||
}
|
||||
profiles: {
|
||||
Row: {
|
||||
avatar_url: string | null
|
||||
created_at: string
|
||||
email: string
|
||||
full_name: string | null
|
||||
id: string
|
||||
ministry_group: string | null
|
||||
role: string
|
||||
updated_at: string
|
||||
}
|
||||
Insert: {
|
||||
avatar_url?: string | null
|
||||
created_at?: string
|
||||
email: string
|
||||
full_name?: string | null
|
||||
id: string
|
||||
ministry_group?: string | null
|
||||
role?: string
|
||||
updated_at?: string
|
||||
}
|
||||
Update: {
|
||||
avatar_url?: string | null
|
||||
created_at?: string
|
||||
email?: string
|
||||
full_name?: string | null
|
||||
id?: string
|
||||
ministry_group?: string | null
|
||||
role?: string
|
||||
updated_at?: string
|
||||
}
|
||||
Relationships: []
|
||||
}
|
||||
}
|
||||
Views: {
|
||||
[_ in never]: never
|
||||
}
|
||||
Functions: {
|
||||
[_ in never]: never
|
||||
}
|
||||
Enums: {
|
||||
[_ in never]: never
|
||||
}
|
||||
CompositeTypes: {
|
||||
[_ in never]: never
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
type DatabaseWithoutInternals = Omit<Database, "__InternalSupabase">
|
||||
|
||||
type DefaultSchema = DatabaseWithoutInternals[Extract<keyof Database, "public">]
|
||||
|
||||
export type Tables<
|
||||
DefaultSchemaTableNameOrOptions extends
|
||||
| keyof (DefaultSchema["Tables"] & DefaultSchema["Views"])
|
||||
| { schema: keyof DatabaseWithoutInternals },
|
||||
TableName extends DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? keyof (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
|
||||
DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])
|
||||
: never = never,
|
||||
> = DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
|
||||
DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])[TableName] extends {
|
||||
Row: infer R
|
||||
}
|
||||
? R
|
||||
: never
|
||||
: DefaultSchemaTableNameOrOptions extends keyof (DefaultSchema["Tables"] &
|
||||
DefaultSchema["Views"])
|
||||
? (DefaultSchema["Tables"] &
|
||||
DefaultSchema["Views"])[DefaultSchemaTableNameOrOptions] extends {
|
||||
Row: infer R
|
||||
}
|
||||
? R
|
||||
: never
|
||||
: never
|
||||
|
||||
export type TablesInsert<
|
||||
DefaultSchemaTableNameOrOptions extends
|
||||
| keyof DefaultSchema["Tables"]
|
||||
| { schema: keyof DatabaseWithoutInternals },
|
||||
TableName extends DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
|
||||
: never = never,
|
||||
> = DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
|
||||
Insert: infer I
|
||||
}
|
||||
? I
|
||||
: never
|
||||
: DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
|
||||
? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
|
||||
Insert: infer I
|
||||
}
|
||||
? I
|
||||
: never
|
||||
: never
|
||||
|
||||
export type TablesUpdate<
|
||||
DefaultSchemaTableNameOrOptions extends
|
||||
| keyof DefaultSchema["Tables"]
|
||||
| { schema: keyof DatabaseWithoutInternals },
|
||||
TableName extends DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
|
||||
: never = never,
|
||||
> = DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
|
||||
Update: infer U
|
||||
}
|
||||
? U
|
||||
: never
|
||||
: DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
|
||||
? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
|
||||
Update: infer U
|
||||
}
|
||||
? U
|
||||
: never
|
||||
: never
|
||||
|
||||
export type Enums<
|
||||
DefaultSchemaEnumNameOrOptions extends
|
||||
| keyof DefaultSchema["Enums"]
|
||||
| { schema: keyof DatabaseWithoutInternals },
|
||||
EnumName extends DefaultSchemaEnumNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? keyof DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"]
|
||||
: never = never,
|
||||
> = DefaultSchemaEnumNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"][EnumName]
|
||||
: DefaultSchemaEnumNameOrOptions extends keyof DefaultSchema["Enums"]
|
||||
? DefaultSchema["Enums"][DefaultSchemaEnumNameOrOptions]
|
||||
: never
|
||||
|
||||
export type CompositeTypes<
|
||||
PublicCompositeTypeNameOrOptions extends
|
||||
| keyof DefaultSchema["CompositeTypes"]
|
||||
| { schema: keyof DatabaseWithoutInternals },
|
||||
CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? keyof DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
|
||||
: never = never,
|
||||
> = PublicCompositeTypeNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
|
||||
: PublicCompositeTypeNameOrOptions extends keyof DefaultSchema["CompositeTypes"]
|
||||
? DefaultSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
|
||||
: never
|
||||
|
||||
export const Constants = {
|
||||
public: {
|
||||
Enums: {},
|
||||
},
|
||||
} as const
|
||||
+5
-10
@@ -5,7 +5,7 @@ import { Capacitor } from '@capacitor/core';
|
||||
import App from './App';
|
||||
|
||||
// ── Ionic initialisation ──────────────────────────────────────────────────────
|
||||
// ?mode=md|ios overrides (used by Appcakes preview); otherwise follow the platform.
|
||||
// ?mode=md|ios overrides (used by AppSuite preview); otherwise follow the platform.
|
||||
const _urlMode = new URLSearchParams(window.location.search).get('mode');
|
||||
const _platform = Capacitor.getPlatform(); // 'ios' | 'android' | 'web'
|
||||
setupIonicReact({
|
||||
@@ -13,7 +13,7 @@ setupIonicReact({
|
||||
});
|
||||
|
||||
// Derive the studio parent origin dynamically so this works in both dev
|
||||
// (parent at localhost:3000) and production (parent at studio.appcakes.dev).
|
||||
// (parent at localhost:3000) and production (parent at appcakes.qqura.com).
|
||||
const studioOrigin = (() => {
|
||||
try {
|
||||
if (document.referrer) return new URL(document.referrer).origin;
|
||||
@@ -49,7 +49,7 @@ if (import.meta.hot) {
|
||||
}
|
||||
|
||||
// ── Session bridge ────────────────────────────────────────────────────────────
|
||||
// Post auth session to the Appcakes parent frame so the AI can test auth-protected
|
||||
// Post auth session to the AppSuite parent frame so the AI can test auth-protected
|
||||
// Edge Functions. Uses import.meta.glob so Vite never errors if supabase.ts is absent.
|
||||
(async () => {
|
||||
const mods = import.meta.glob('./supabase.ts', { eager: false });
|
||||
@@ -73,17 +73,12 @@ if (import.meta.hot) {
|
||||
})();
|
||||
|
||||
// ── Runtime error reporting ───────────────────────────────────────────────────
|
||||
// Forward uncaught errors to the Appcakes dev server so the AI can read them.
|
||||
// Extract projectId from the preview URL (/preview/{projectId}/) so errors are
|
||||
// scoped per-project on the server rather than mixed into a global queue.
|
||||
const _previewMatch = window.location.pathname.match(/\/preview\/([^/]+)/);
|
||||
const _projectId = _previewMatch?.[1] ?? null;
|
||||
|
||||
// Forward uncaught errors to the AppSuite dev server so the AI can read them.
|
||||
function reportError(message: string, stack?: string) {
|
||||
fetch(`${studioOrigin}/api/agent/runtime-error`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message, stack, projectId: _projectId }),
|
||||
body: JSON.stringify({ message, stack }),
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,685 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
IonPage,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonButtons,
|
||||
IonButton,
|
||||
IonIcon,
|
||||
IonSpinner,
|
||||
IonSelect,
|
||||
IonSelectOption,
|
||||
IonDatetime,
|
||||
IonModal,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
} from '@ionic/react';
|
||||
import { useHistory, useParams } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import {
|
||||
chevronBackOutline,
|
||||
calendarOutline,
|
||||
timeOutline,
|
||||
} from 'ionicons/icons';
|
||||
import { EventCategory, ChurchEvent } from '../types';
|
||||
|
||||
const AdminEventForm: React.FC = () => {
|
||||
const [title, setTitle] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [categoryId, setCategoryId] = useState('');
|
||||
const [audience, setAudience] = useState<'all' | 'youth' | 'children'>('all');
|
||||
const [venue, setVenue] = useState('');
|
||||
|
||||
// Date states
|
||||
const [startAt, setStartAt] = useState<string>(new Date().toISOString());
|
||||
const [endAt, setEndAt] = useState<string>('');
|
||||
|
||||
const [isFeatured, setIsFeatured] = useState(false);
|
||||
|
||||
const [categories, setCategories] = useState<EventCategory[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const isEditMode = !!id;
|
||||
|
||||
const history = useHistory();
|
||||
const { user, profile } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
if (profile && profile.role !== 'admin') {
|
||||
history.replace('/home');
|
||||
return;
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
|
||||
// Load categories
|
||||
const { data: catData, error: catError } = await supabase
|
||||
.from('event_categories')
|
||||
.select('*')
|
||||
.order('name');
|
||||
|
||||
if (catError) {
|
||||
setError(catError.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setCategories(catData as EventCategory[]);
|
||||
|
||||
// If edit mode, load event
|
||||
if (isEditMode) {
|
||||
const { data: eventData, error: eventError } = await supabase
|
||||
.from('events')
|
||||
.select('*')
|
||||
.eq('id', id)
|
||||
.single();
|
||||
|
||||
if (eventError) {
|
||||
setError(eventError.message);
|
||||
} else {
|
||||
const event = eventData as ChurchEvent;
|
||||
setTitle(event.title);
|
||||
setDescription(event.description);
|
||||
setCategoryId(event.category_id);
|
||||
setAudience(event.audience);
|
||||
setVenue(event.venue);
|
||||
setStartAt(event.start_at);
|
||||
setEndAt(event.end_at || '');
|
||||
setIsFeatured(event.is_featured);
|
||||
}
|
||||
} else if (catData && catData.length > 0) {
|
||||
setCategoryId(catData[0].id); // default category
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
if (profile?.role === 'admin') {
|
||||
loadData();
|
||||
}
|
||||
}, [id, isEditMode, profile, history]);
|
||||
|
||||
const showError = (msg: string) => {
|
||||
setError(msg);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const getDayLabel = (dateString: string) => {
|
||||
const d = new Date(dateString);
|
||||
return d.toLocaleDateString(undefined, { weekday: 'long' });
|
||||
};
|
||||
|
||||
const handleSave = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!title || !description || !categoryId || !venue || !startAt) {
|
||||
showError('Please fill out all required fields');
|
||||
return;
|
||||
}
|
||||
if (!user || profile?.role !== 'admin') {
|
||||
showError('Unauthorized');
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
|
||||
const dayLabel = getDayLabel(startAt);
|
||||
const eventPayload = {
|
||||
title,
|
||||
description,
|
||||
category_id: categoryId,
|
||||
audience,
|
||||
venue,
|
||||
start_at: startAt,
|
||||
end_at: endAt || null,
|
||||
day_label: dayLabel,
|
||||
is_featured: isFeatured,
|
||||
};
|
||||
|
||||
if (isEditMode) {
|
||||
const { error: updateError } = await supabase
|
||||
.from('events')
|
||||
.update(eventPayload)
|
||||
.eq('id', id);
|
||||
|
||||
if (updateError) {
|
||||
showError(updateError.message);
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
const { error: insertError } = await supabase.from('events').insert({
|
||||
...eventPayload,
|
||||
created_by: user.id,
|
||||
});
|
||||
|
||||
if (insertError) {
|
||||
showError(insertError.message);
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setSaving(false);
|
||||
history.goBack();
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!isEditMode) return;
|
||||
const confirmDelete = window.confirm(
|
||||
'Are you sure you want to delete this event?'
|
||||
);
|
||||
if (!confirmDelete) return;
|
||||
|
||||
setSaving(true);
|
||||
const { error: deleteError } = await supabase
|
||||
.from('events')
|
||||
.delete()
|
||||
.eq('id', id);
|
||||
|
||||
if (deleteError) {
|
||||
showError(deleteError.message);
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
history.replace('/events');
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ background: '#f5f7f4' }}>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar style={{ '--background': '#f5f7f4' }}>
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => history.goBack()} disabled={saving}>
|
||||
<IonIcon
|
||||
icon={chevronBackOutline}
|
||||
style={{ color: '#1f2937' }}
|
||||
slot="icon-only"
|
||||
/>
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle
|
||||
style={{ fontSize: '18px', fontWeight: '700', color: '#1f2937' }}
|
||||
>
|
||||
{isEditMode ? 'Edit Event' : 'New Event'}
|
||||
</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent
|
||||
style={{
|
||||
'--background': '#f5f7f4',
|
||||
'--padding-start': '20px',
|
||||
'--padding-end': '20px',
|
||||
'--padding-top': '16px',
|
||||
'--padding-bottom': '24px',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '40px 0',
|
||||
}}
|
||||
>
|
||||
<IonSpinner name="crescent" color="primary" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '20px',
|
||||
margin: '0 0 16px 0',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '18px',
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Event Details
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
margin: '4px 0 0 0',
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
}}
|
||||
>
|
||||
Provide the schedule and venue info for members.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(163, 59, 50, 0.10)',
|
||||
borderRadius: '12px',
|
||||
padding: '12px 14px',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
color: '#a33b32',
|
||||
lineHeight: '1.4',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form
|
||||
onSubmit={handleSave}
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '24px',
|
||||
margin: '0 0 16px 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Event Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. Sunday Service"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
style={{
|
||||
width: '100%',
|
||||
background: '#eef2ec',
|
||||
border: 'none',
|
||||
borderRadius: '12px',
|
||||
padding: '0 14px',
|
||||
height: '48px',
|
||||
fontSize: '15px',
|
||||
color: '#1f2937',
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Category */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Category
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
background: '#eef2ec',
|
||||
borderRadius: '12px',
|
||||
padding: '0 14px',
|
||||
height: '48px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<IonSelect
|
||||
value={categoryId}
|
||||
onIonChange={(e) => setCategoryId(e.detail.value)}
|
||||
interface="popover"
|
||||
style={{
|
||||
width: '100%',
|
||||
color: '#1f2937',
|
||||
fontSize: '15px',
|
||||
}}
|
||||
>
|
||||
{categories.map((cat) => (
|
||||
<IonSelectOption key={cat.id} value={cat.id}>
|
||||
{cat.name}
|
||||
</IonSelectOption>
|
||||
))}
|
||||
</IonSelect>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Audience */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Audience
|
||||
</label>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAudience('all')}
|
||||
style={{
|
||||
flex: 1,
|
||||
background: audience === 'all' ? '#2f6b4f' : '#eef2ec',
|
||||
color: audience === 'all' ? '#ffffff' : '#4b5563',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '12px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
All Members
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAudience('youth')}
|
||||
style={{
|
||||
flex: 1,
|
||||
background: audience === 'youth' ? '#2f6b4f' : '#eef2ec',
|
||||
color: audience === 'youth' ? '#ffffff' : '#4b5563',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '12px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Youth Only
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAudience('children')}
|
||||
style={{
|
||||
flex: 1,
|
||||
background:
|
||||
audience === 'children' ? '#2f6b4f' : '#eef2ec',
|
||||
color: audience === 'children' ? '#ffffff' : '#4b5563',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '12px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Children
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Venue */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Venue
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. Main Auditorium"
|
||||
value={venue}
|
||||
onChange={(e) => setVenue(e.target.value)}
|
||||
required
|
||||
style={{
|
||||
width: '100%',
|
||||
background: '#eef2ec',
|
||||
border: 'none',
|
||||
borderRadius: '12px',
|
||||
padding: '0 14px',
|
||||
height: '48px',
|
||||
fontSize: '15px',
|
||||
color: '#1f2937',
|
||||
outline: 'none',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Start Time
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
background: '#eef2ec',
|
||||
borderRadius: '12px',
|
||||
padding: '4px 14px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<IonDatetime
|
||||
presentation="date-time"
|
||||
value={startAt}
|
||||
onIonChange={(e) => setStartAt(e.detail.value as string)}
|
||||
style={{ background: 'transparent' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
End Time (Optional)
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
background: '#eef2ec',
|
||||
borderRadius: '12px',
|
||||
padding: '4px 14px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<IonDatetime
|
||||
presentation="date-time"
|
||||
value={endAt}
|
||||
onIonChange={(e) =>
|
||||
setEndAt((e.detail.value as string) || '')
|
||||
}
|
||||
showClearButton={true}
|
||||
style={{ background: 'transparent' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
placeholder="Describe the event..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
required
|
||||
style={{
|
||||
width: '100%',
|
||||
background: '#eef2ec',
|
||||
border: 'none',
|
||||
borderRadius: '12px',
|
||||
padding: '14px',
|
||||
minHeight: '120px',
|
||||
fontSize: '15px',
|
||||
color: '#1f2937',
|
||||
outline: 'none',
|
||||
resize: 'vertical',
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Featured Toggle */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '8px 0',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Feature on Home Screen
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsFeatured(!isFeatured)}
|
||||
style={{
|
||||
width: '44px',
|
||||
height: '24px',
|
||||
background: isFeatured ? '#2f6b4f' : '#eef2ec',
|
||||
borderRadius: '12px',
|
||||
border: 'none',
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
transition: '0.2s',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
background: '#ffffff',
|
||||
borderRadius: '50%',
|
||||
position: 'absolute',
|
||||
top: '2px',
|
||||
left: isFeatured ? '22px' : '2px',
|
||||
transition: '0.2s',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
style={{
|
||||
background: '#2f6b4f',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '16px',
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#ffffff',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginTop: '8px',
|
||||
}}
|
||||
>
|
||||
{saving ? (
|
||||
<IonSpinner name="dots" color="light" />
|
||||
) : isEditMode ? (
|
||||
'Update Event'
|
||||
) : (
|
||||
'Create Event'
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isEditMode && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
disabled={saving}
|
||||
style={{
|
||||
background: 'rgba(163, 59, 50, 0.10)',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '16px',
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#a33b32',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
Delete Event
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminEventForm;
|
||||
@@ -1,330 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
IonPage,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonButtons,
|
||||
IonButton,
|
||||
IonIcon,
|
||||
IonSpinner,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonInput,
|
||||
IonTextarea,
|
||||
} from '@ionic/react';
|
||||
import { useHistory, useParams } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { chevronBackOutline, saveOutline, trashOutline } from 'ionicons/icons';
|
||||
|
||||
const AdminNewsForm: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const isEdit = !!id && id !== 'new';
|
||||
const { user, profile } = useAuth();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [initialLoading, setInitialLoading] = useState(isEdit);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [title, setTitle] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [imageUrl, setImageUrl] = useState('');
|
||||
|
||||
const showError = (msg: string) => {
|
||||
setError(msg);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (profile?.role !== 'admin') {
|
||||
history.replace('/profile');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isEdit) {
|
||||
loadNewsItem();
|
||||
}
|
||||
}, [profile, isEdit]);
|
||||
|
||||
const loadNewsItem = async () => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('news')
|
||||
.select('*')
|
||||
.eq('id', id)
|
||||
.single();
|
||||
if (error) throw error;
|
||||
if (data) {
|
||||
setTitle(data.title);
|
||||
setContent(data.content);
|
||||
setImageUrl(data.image_url || '');
|
||||
}
|
||||
} catch (err: any) {
|
||||
showError(err.message);
|
||||
} finally {
|
||||
setInitialLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!title.trim() || !content.trim()) {
|
||||
showError('Title and content are required.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
if (isEdit) {
|
||||
const { error } = await supabase
|
||||
.from('news')
|
||||
.update({
|
||||
title,
|
||||
content,
|
||||
image_url: imageUrl.trim() || null,
|
||||
})
|
||||
.eq('id', id);
|
||||
if (error) throw error;
|
||||
} else {
|
||||
const { error } = await supabase.from('news').insert({
|
||||
title,
|
||||
content,
|
||||
image_url: imageUrl.trim() || null,
|
||||
created_by: user!.id,
|
||||
});
|
||||
if (error) throw error;
|
||||
}
|
||||
history.goBack();
|
||||
} catch (err: any) {
|
||||
showError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!window.confirm('Delete this news item?')) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const { error } = await supabase.from('news').delete().eq('id', id);
|
||||
if (error) throw error;
|
||||
history.goBack();
|
||||
} catch (err: any) {
|
||||
showError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (initialLoading) {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar style={{ '--background': '#f5f7f4' }}>
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => history.goBack()}>
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent style={{ '--background': '#f5f7f4' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginTop: '40px',
|
||||
}}
|
||||
>
|
||||
<IonSpinner name="crescent" />
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar style={{ '--background': '#f5f7f4' }}>
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => history.goBack()}>
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle style={{ fontWeight: '700', fontSize: '18px' }}>
|
||||
{isEdit ? 'Edit News' : 'Create News'}
|
||||
</IonTitle>
|
||||
{isEdit && (
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={handleDelete} color="danger">
|
||||
<IonIcon icon={trashOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
)}
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent style={{ '--background': '#f5f7f4' }}>
|
||||
<div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
|
||||
{error && (
|
||||
<div
|
||||
style={{
|
||||
background: '#fee2e2',
|
||||
color: '#991b1b',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
fontSize: '14px',
|
||||
marginBottom: '20px',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#4b5563',
|
||||
marginBottom: '8px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
}}
|
||||
>
|
||||
Title
|
||||
</label>
|
||||
<IonItem
|
||||
lines="none"
|
||||
style={{
|
||||
'--background': '#f9faf9',
|
||||
'--border-radius': '12px',
|
||||
'--padding-start': '16px',
|
||||
}}
|
||||
>
|
||||
<IonInput
|
||||
value={title}
|
||||
onIonChange={(e) => setTitle(e.detail.value!)}
|
||||
placeholder="Enter news title"
|
||||
style={{ fontWeight: '500' }}
|
||||
/>
|
||||
</IonItem>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#4b5563',
|
||||
marginBottom: '8px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
}}
|
||||
>
|
||||
Image URL (Optional)
|
||||
</label>
|
||||
<IonItem
|
||||
lines="none"
|
||||
style={{
|
||||
'--background': '#f9faf9',
|
||||
'--border-radius': '12px',
|
||||
'--padding-start': '16px',
|
||||
}}
|
||||
>
|
||||
<IonInput
|
||||
value={imageUrl}
|
||||
onIonChange={(e) => setImageUrl(e.detail.value!)}
|
||||
placeholder="https://example.com/image.jpg"
|
||||
/>
|
||||
</IonItem>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#4b5563',
|
||||
marginBottom: '8px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
}}
|
||||
>
|
||||
Content
|
||||
</label>
|
||||
<IonItem
|
||||
lines="none"
|
||||
style={{
|
||||
'--background': '#f9faf9',
|
||||
'--border-radius': '12px',
|
||||
'--padding-start': '16px',
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<IonTextarea
|
||||
value={content}
|
||||
onIonChange={(e) => setContent(e.detail.value!)}
|
||||
placeholder="Write your news update here..."
|
||||
autoGrow
|
||||
style={{ minHeight: '150px' }}
|
||||
/>
|
||||
</IonItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
style={{
|
||||
width: '100%',
|
||||
background: '#2f6b4f',
|
||||
color: '#ffffff',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '16px',
|
||||
fontSize: '16px',
|
||||
fontWeight: '600',
|
||||
marginTop: '24px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '8px',
|
||||
cursor: loading ? 'not-allowed' : 'pointer',
|
||||
opacity: loading ? 0.7 : 1,
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<IonSpinner
|
||||
name="crescent"
|
||||
style={{ width: '24px', height: '24px' }}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<IonIcon icon={saveOutline} />
|
||||
Save News
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminNewsForm;
|
||||
@@ -1,323 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
IonPage,
|
||||
IonContent,
|
||||
IonSpinner,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
|
||||
const Auth: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<'login' | 'register'>('login');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const history = useHistory();
|
||||
const { user, profile } = useAuth();
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
setActiveTab('login');
|
||||
setError(null);
|
||||
});
|
||||
|
||||
const loadProfileAndNavigate = () => {
|
||||
if (!user) return;
|
||||
if (profile !== undefined && profile === null) {
|
||||
history.replace('/setup-profile');
|
||||
} else if (profile !== undefined && profile !== null) {
|
||||
history.replace('/home');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
loadProfileAndNavigate();
|
||||
}
|
||||
}, [user, profile]);
|
||||
|
||||
const showError = (msg: string) => {
|
||||
setError(msg);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const handleSignIn = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const { error } = await supabase.auth.signInWithPassword({
|
||||
email,
|
||||
password,
|
||||
});
|
||||
if (error) {
|
||||
if (error.message.toLowerCase().includes('email not confirmed')) {
|
||||
await supabase.auth.resend({ type: 'signup', email });
|
||||
history.push('/verify-email', { email, resent: true });
|
||||
setLoading(false);
|
||||
return;
|
||||
} else {
|
||||
showError(error.message);
|
||||
}
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
// Success: keep loading=true — useEffect above navigates when user arrives in context
|
||||
};
|
||||
|
||||
const handleSignUp = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
showError('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const { error } = await supabase.auth.signUp({ email, password });
|
||||
if (error) {
|
||||
showError(error.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
history.push('/verify-email', { email });
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleTabChange = (tab: 'login' | 'register') => {
|
||||
setActiveTab(tab);
|
||||
setError(null);
|
||||
if (tab === 'login') {
|
||||
setConfirmPassword('');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ background: '#f6f1e8' }}>
|
||||
<IonContent
|
||||
style={{
|
||||
'--background': 'linear-gradient(180deg, #f9f5ee 0%, #f3ede3 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '0px',
|
||||
'--padding-bottom': '0px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding:
|
||||
'calc(var(--ion-safe-area-top, 0px) + 18px) 20px calc(var(--ion-safe-area-bottom, 0px) + 28px)',
|
||||
minHeight: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{/* Welcome header block */}
|
||||
<div
|
||||
style={{
|
||||
background: 'transparent',
|
||||
borderRadius: '0px',
|
||||
padding: '0px',
|
||||
margin: '0 0 24px 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
lineHeight: '1.2',
|
||||
}}
|
||||
>
|
||||
EAGLES ASSEMBLY
|
||||
</h1>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
lineHeight: '1.5',
|
||||
}}
|
||||
>
|
||||
Welcome back to our community app
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Auth mode pill switcher */}
|
||||
<div
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '999px',
|
||||
padding: '4px',
|
||||
margin: '0 0 20px 0',
|
||||
display: 'flex',
|
||||
gap: '4px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => handleTabChange('login')}
|
||||
style={{
|
||||
flex: 1,
|
||||
background: activeTab === 'login' ? '#2f6b4f' : 'transparent',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '12px 18px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: activeTab === 'login' ? '#ffffff' : '#6b7280',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleTabChange('register')}
|
||||
style={{
|
||||
flex: 1,
|
||||
background:
|
||||
activeTab === 'register' ? '#2f6b4f' : 'transparent',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '12px 18px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: activeTab === 'register' ? '#ffffff' : '#6b7280',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Form card */}
|
||||
<form
|
||||
onSubmit={activeTab === 'login' ? handleSignIn : handleSignUp}
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '24px',
|
||||
margin: '0 0 16px 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email address"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
style={{
|
||||
background: '#eef2ec',
|
||||
border: 'none',
|
||||
borderRadius: '12px',
|
||||
padding: '0 14px',
|
||||
height: '48px',
|
||||
fontSize: '15px',
|
||||
color: '#1f2937',
|
||||
outline: 'none',
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
style={{
|
||||
background: '#eef2ec',
|
||||
border: 'none',
|
||||
borderRadius: '12px',
|
||||
padding: '0 14px',
|
||||
height: '48px',
|
||||
fontSize: '15px',
|
||||
color: '#1f2937',
|
||||
outline: 'none',
|
||||
}}
|
||||
/>
|
||||
{activeTab === 'register' && (
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Confirm password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
style={{
|
||||
background: '#eef2ec',
|
||||
border: 'none',
|
||||
borderRadius: '12px',
|
||||
padding: '0 14px',
|
||||
height: '48px',
|
||||
fontSize: '15px',
|
||||
color: '#1f2937',
|
||||
outline: 'none',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
background: '#2f6b4f',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '16px',
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#ffffff',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginTop: '8px',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<IonSpinner name="dots" color="light" />
|
||||
) : activeTab === 'login' ? (
|
||||
'Sign In'
|
||||
) : (
|
||||
'Create Account'
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Error area */}
|
||||
{error && (
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(190, 60, 60, 0.10)',
|
||||
borderRadius: '12px',
|
||||
padding: '12px 14px',
|
||||
margin: '0',
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
color: '#a33b32',
|
||||
lineHeight: '1.4',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Auth;
|
||||
@@ -1,380 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
IonPage,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonButtons,
|
||||
IonButton,
|
||||
IonIcon,
|
||||
IonSpinner,
|
||||
} from '@ionic/react';
|
||||
import { useHistory, useParams } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { ChurchEvent } from '../types';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import {
|
||||
chevronBackOutline,
|
||||
createOutline,
|
||||
timeOutline,
|
||||
locationOutline,
|
||||
calendarOutline,
|
||||
} from 'ionicons/icons';
|
||||
|
||||
const EventDetail: React.FC = () => {
|
||||
const [event, setEvent] = useState<ChurchEvent | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const history = useHistory();
|
||||
const { profile } = useAuth();
|
||||
|
||||
const loadEvent = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const { data, error: fetchError } = await supabase
|
||||
.from('events')
|
||||
.select('*, event_categories(*)')
|
||||
.eq('id', id)
|
||||
.single();
|
||||
|
||||
if (fetchError) {
|
||||
setError(fetchError.message);
|
||||
setEvent(null);
|
||||
} else {
|
||||
setEvent(data as ChurchEvent);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadEvent();
|
||||
}, [id]);
|
||||
|
||||
const goToEdit = () => {
|
||||
if (!event) return;
|
||||
history.push(`/admin/events/${event.id}/edit`);
|
||||
};
|
||||
|
||||
const isAdmin = profile?.role === 'admin';
|
||||
|
||||
return (
|
||||
<IonPage style={{ background: '#f5f7f4' }}>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar style={{ '--background': '#f5f7f4' }}>
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => history.goBack()}>
|
||||
<IonIcon
|
||||
icon={chevronBackOutline}
|
||||
style={{ color: '#1f2937' }}
|
||||
slot="icon-only"
|
||||
/>
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
<IonTitle
|
||||
style={{ fontSize: '18px', fontWeight: '700', color: '#1f2937' }}
|
||||
>
|
||||
Event Detail
|
||||
</IonTitle>
|
||||
{isAdmin && (
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={goToEdit}>
|
||||
<IonIcon
|
||||
icon={createOutline}
|
||||
style={{ color: '#2f6b4f', fontSize: '20px' }}
|
||||
slot="icon-only"
|
||||
/>
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
)}
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent
|
||||
style={{
|
||||
'--background': '#f5f7f4',
|
||||
'--padding-start': '20px',
|
||||
'--padding-end': '20px',
|
||||
'--padding-top': '16px',
|
||||
'--padding-bottom': '24px',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '40px 0',
|
||||
}}
|
||||
>
|
||||
<IonSpinner name="crescent" color="primary" />
|
||||
</div>
|
||||
) : error || !event ? (
|
||||
<div
|
||||
style={{
|
||||
padding: '12px',
|
||||
background: 'rgba(190,60,60,0.1)',
|
||||
borderRadius: '12px',
|
||||
color: '#a33b32',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
>
|
||||
{error || 'Event not found'}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Header Detail Card */}
|
||||
<div
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '24px',
|
||||
margin: '0 0 16px 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(47, 107, 79, 0.10)',
|
||||
color: '#2f6b4f',
|
||||
borderRadius: '999px',
|
||||
padding: '5px 12px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
}}
|
||||
>
|
||||
{event.event_categories?.name || 'Event'}
|
||||
</div>
|
||||
</div>
|
||||
<h1
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
{event.title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Info Rows Card */}
|
||||
<div
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '20px',
|
||||
margin: '0 0 16px 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '14px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
{/* Date Row */}
|
||||
<div
|
||||
style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '12px',
|
||||
background: 'rgba(47, 107, 79, 0.12)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={calendarOutline}
|
||||
style={{ color: '#2f6b4f', fontSize: '18px' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#7a847f',
|
||||
}}
|
||||
>
|
||||
Date
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
marginTop: '2px',
|
||||
}}
|
||||
>
|
||||
{new Date(event.start_at).toLocaleDateString(undefined, {
|
||||
weekday: 'long',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Time Row */}
|
||||
{(() => {
|
||||
const date = new Date(event.start_at);
|
||||
const hasTime =
|
||||
date.getHours() !== 0 || date.getMinutes() !== 0;
|
||||
if (!hasTime) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '12px',
|
||||
background: 'rgba(47, 107, 79, 0.12)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={timeOutline}
|
||||
style={{ color: '#2f6b4f', fontSize: '18px' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#7a847f',
|
||||
}}
|
||||
>
|
||||
Time
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
marginTop: '2px',
|
||||
}}
|
||||
>
|
||||
{date.toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
{event.end_at &&
|
||||
` - ${new Date(event.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Location Row */}
|
||||
<div
|
||||
style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '12px',
|
||||
background: 'rgba(47, 107, 79, 0.12)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={locationOutline}
|
||||
style={{ color: '#2f6b4f', fontSize: '18px' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#7a847f',
|
||||
}}
|
||||
>
|
||||
Location
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
marginTop: '2px',
|
||||
}}
|
||||
>
|
||||
{event.venue}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* About Card */}
|
||||
<div
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '20px',
|
||||
margin: '0 0 16px 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '16px',
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
About
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: '#4b5563',
|
||||
lineHeight: '1.6',
|
||||
whiteSpace: 'pre-wrap',
|
||||
}}
|
||||
>
|
||||
{event.description}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventDetail;
|
||||
@@ -1,350 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
IonPage,
|
||||
IonContent,
|
||||
IonSpinner,
|
||||
useIonViewWillEnter,
|
||||
IonIcon,
|
||||
IonRefresher,
|
||||
IonRefresherContent,
|
||||
} from '@ionic/react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { ChurchEvent } from '../types';
|
||||
import EventListCard from '../components/EventListCard';
|
||||
import {
|
||||
searchOutline,
|
||||
filterOutline,
|
||||
calendarClearOutline,
|
||||
} from 'ionicons/icons';
|
||||
|
||||
const Events: React.FC = () => {
|
||||
const [allEvents, setAllEvents] = useState<ChurchEvent[]>([]);
|
||||
const [events, setEvents] = useState<ChurchEvent[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [activeCategory, setActiveCategory] = useState<
|
||||
'all' | 'weekly' | 'youth' | 'sunday-school'
|
||||
>('all');
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
const loadEvents = async (event?: any) => {
|
||||
if (!event) setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const now = new Date();
|
||||
now.setDate(now.getDate() - 1);
|
||||
const dateString = now.toISOString();
|
||||
|
||||
const { data, error: fetchError } = await supabase
|
||||
.from('events')
|
||||
.select('*, event_categories(*)')
|
||||
.gte('start_at', dateString)
|
||||
.order('start_at', { ascending: true });
|
||||
|
||||
if (fetchError) {
|
||||
setError(fetchError.message);
|
||||
setAllEvents([]);
|
||||
setEvents([]);
|
||||
} else {
|
||||
const fetched = data as ChurchEvent[];
|
||||
setAllEvents(fetched);
|
||||
applyFilters(fetched, activeCategory, searchTerm);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
if (event) {
|
||||
event.detail.complete();
|
||||
}
|
||||
};
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
loadEvents();
|
||||
});
|
||||
|
||||
const applyFilters = (
|
||||
source: ChurchEvent[],
|
||||
category: 'all' | 'weekly' | 'youth' | 'sunday-school',
|
||||
search: string
|
||||
) => {
|
||||
let filtered = [...source];
|
||||
|
||||
if (category === 'weekly') {
|
||||
filtered = filtered.filter((e) => e.event_categories?.slug === 'weekly');
|
||||
} else if (category === 'youth') {
|
||||
filtered = filtered.filter(
|
||||
(e) => e.event_categories?.slug === 'youth' || e.audience === 'youth'
|
||||
);
|
||||
} else if (category === 'sunday-school') {
|
||||
filtered = filtered.filter(
|
||||
(e) => e.event_categories?.slug === 'sunday-school'
|
||||
);
|
||||
}
|
||||
|
||||
if (search.trim()) {
|
||||
const term = search.toLowerCase();
|
||||
filtered = filtered.filter(
|
||||
(e) =>
|
||||
e.title.toLowerCase().includes(term) ||
|
||||
e.description.toLowerCase().includes(term) ||
|
||||
e.venue.toLowerCase().includes(term)
|
||||
);
|
||||
}
|
||||
|
||||
setEvents(filtered);
|
||||
};
|
||||
|
||||
const handleCategoryChange = (
|
||||
category: 'all' | 'weekly' | 'youth' | 'sunday-school'
|
||||
) => {
|
||||
setActiveCategory(category);
|
||||
applyFilters(allEvents, category, searchTerm);
|
||||
};
|
||||
|
||||
const handleSearchChange = (val: string) => {
|
||||
setSearchTerm(val);
|
||||
applyFilters(allEvents, activeCategory, val);
|
||||
};
|
||||
|
||||
const openEvent = (id: string) => {
|
||||
history.push(`/event/${id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ background: '#f5f7f4' }}>
|
||||
<IonContent
|
||||
style={{
|
||||
'--background': '#f5f7f4',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '0px',
|
||||
'--padding-bottom': '24px',
|
||||
}}
|
||||
>
|
||||
<IonRefresher slot="fixed" onIonRefresh={loadEvents}>
|
||||
<IonRefresherContent />
|
||||
</IonRefresher>
|
||||
|
||||
{/* Top Title Row */}
|
||||
<div
|
||||
style={{
|
||||
padding: 'calc(16px + var(--ion-safe-area-top)) 20px 8px',
|
||||
margin: '0',
|
||||
background: 'transparent',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '6px',
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Events
|
||||
</h1>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
}}
|
||||
>
|
||||
Discover what's happening at church
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Search Row */}
|
||||
<div style={{ display: 'flex', gap: '8px', margin: '0 20px 12px' }}>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
height: '44px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0 16px',
|
||||
gap: '10px',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={searchOutline}
|
||||
style={{ color: '#9aa3a0', fontSize: '18px', flexShrink: 0 }}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search events..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => handleSearchChange(e.target.value)}
|
||||
style={{
|
||||
flex: 1,
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
outline: 'none',
|
||||
fontSize: '15px',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => handleCategoryChange('all')}
|
||||
style={{
|
||||
width: '44px',
|
||||
height: '44px',
|
||||
background: '#ffffff',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={filterOutline}
|
||||
style={{ color: '#2f6b4f', fontSize: '20px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Chips */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
margin: '0 20px 12px',
|
||||
overflowX: 'auto',
|
||||
paddingBottom: '4px',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
scrollbarWidth: 'none',
|
||||
}}
|
||||
>
|
||||
{['all', 'weekly', 'youth', 'sunday-school'].map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => handleCategoryChange(cat as any)}
|
||||
style={{
|
||||
background: activeCategory === cat ? '#2f6b4f' : '#ffffff',
|
||||
color: activeCategory === cat ? '#ffffff' : '#4b5563',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '8px 14px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
cursor: 'pointer',
|
||||
whiteSpace: 'nowrap',
|
||||
boxShadow:
|
||||
activeCategory === cat
|
||||
? 'none'
|
||||
: '0 1px 2px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
{cat === 'all'
|
||||
? 'All Events'
|
||||
: cat === 'sunday-school'
|
||||
? 'Sunday School'
|
||||
: cat.charAt(0).toUpperCase() + cat.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
{loading ? (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '40px 0',
|
||||
}}
|
||||
>
|
||||
<IonSpinner name="crescent" color="primary" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div
|
||||
style={{
|
||||
margin: '0 20px',
|
||||
padding: '12px',
|
||||
background: 'rgba(190,60,60,0.1)',
|
||||
borderRadius: '12px',
|
||||
color: '#a33b32',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
) : events.length > 0 ? (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
margin: '0 20px',
|
||||
}}
|
||||
>
|
||||
{events.map((event) => (
|
||||
<EventListCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onClick={() => openEvent(event.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '60px 20px',
|
||||
textAlign: 'center',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={calendarClearOutline}
|
||||
style={{ fontSize: '44px', color: '#7a847f' }}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
}}
|
||||
>
|
||||
No events match this filter.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearchTerm('');
|
||||
handleCategoryChange('all');
|
||||
}}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#2f6b4f',
|
||||
cursor: 'pointer',
|
||||
marginTop: '4px',
|
||||
}}
|
||||
>
|
||||
Show all events
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Events;
|
||||
+15
-583
@@ -1,591 +1,23 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import {
|
||||
IonPage,
|
||||
IonContent,
|
||||
IonSpinner,
|
||||
useIonViewWillEnter,
|
||||
IonIcon,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
} from '@ionic/react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { ChurchEvent } from '../types';
|
||||
import EventPreviewCard from '../components/EventPreviewCard';
|
||||
import HomeStatCard from '../components/HomeStatCard';
|
||||
import {
|
||||
calendarOutline,
|
||||
peopleOutline,
|
||||
newspaperOutline,
|
||||
} from 'ionicons/icons';
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const [featuredEvent, setFeaturedEvent] = useState<ChurchEvent | null>(null);
|
||||
const [upcomingEvents, setUpcomingEvents] = useState<ChurchEvent[]>([]);
|
||||
const [latestNews, setLatestNews] = useState<any[]>([]);
|
||||
const [weeklyCount, setWeeklyCount] = useState(0);
|
||||
const [youthCount, setYouthCount] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { profile } = useAuth();
|
||||
const history = useHistory();
|
||||
|
||||
const loadHomeData = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const now = new Date().toISOString();
|
||||
|
||||
const [{ data, error: fetchError }, { data: newsData, error: newsError }] =
|
||||
await Promise.all([
|
||||
supabase
|
||||
.from('events')
|
||||
.select('*, event_categories(*)')
|
||||
.gte('start_at', now)
|
||||
.order('start_at', { ascending: true })
|
||||
.limit(20),
|
||||
supabase
|
||||
.from('news')
|
||||
.select('*')
|
||||
.order('created_at', { ascending: false })
|
||||
.limit(3),
|
||||
]);
|
||||
|
||||
if (newsData) {
|
||||
setLatestNews(newsData);
|
||||
}
|
||||
|
||||
if (fetchError) {
|
||||
setError(fetchError.message);
|
||||
setFeaturedEvent(null);
|
||||
setUpcomingEvents([]);
|
||||
setWeeklyCount(0);
|
||||
setYouthCount(0);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const allUpcoming = data as ChurchEvent[];
|
||||
if (allUpcoming.length > 0) {
|
||||
const featured = allUpcoming.find((e) => e.is_featured) || allUpcoming[0];
|
||||
setFeaturedEvent(featured);
|
||||
setUpcomingEvents(allUpcoming.slice(0, 4));
|
||||
} else {
|
||||
setFeaturedEvent(null);
|
||||
setUpcomingEvents([]);
|
||||
}
|
||||
|
||||
const weekly = allUpcoming.filter(
|
||||
(e) => e.event_categories?.slug === 'weekly'
|
||||
).length;
|
||||
const youth = allUpcoming.filter(
|
||||
(e) => e.audience === 'youth' || e.event_categories?.slug === 'youth'
|
||||
).length;
|
||||
|
||||
setWeeklyCount(weekly);
|
||||
setYouthCount(youth);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
loadHomeData();
|
||||
});
|
||||
|
||||
const openEventDetail = (id: string) => {
|
||||
history.push(`/event/${id}`);
|
||||
};
|
||||
|
||||
const goToEvents = () => {
|
||||
history.push('/events');
|
||||
};
|
||||
|
||||
const initials = profile?.full_name
|
||||
? profile.full_name
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
.substring(0, 2)
|
||||
.toUpperCase()
|
||||
: 'U';
|
||||
|
||||
return (
|
||||
<IonPage style={{ background: 'var(--color-bg)' }}>
|
||||
<IonContent
|
||||
style={{
|
||||
'--background': 'linear-gradient(180deg, #f8f4ef 0%, #f3ece3 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '0px',
|
||||
'--padding-bottom': '24px',
|
||||
}}
|
||||
>
|
||||
{/* Top Content Row */}
|
||||
<div
|
||||
style={{
|
||||
padding: 'calc(16px + var(--ion-safe-area-top)) 20px 12px',
|
||||
margin: '0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: 'var(--color-text-secondary)',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
Welcome to
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
fontWeight: '700',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
EAGLES ASSEMBLY
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => history.push('/profile')}
|
||||
style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '12px',
|
||||
background: 'var(--color-brand-soft)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '14px',
|
||||
fontWeight: '700',
|
||||
color: 'var(--color-brand)',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{initials}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Greeting Widget */}
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--color-surface)',
|
||||
borderRadius: '24px',
|
||||
padding: '22px',
|
||||
margin: '0 20px 12px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '6px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'baseline',
|
||||
gap: '6px',
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '22px',
|
||||
fontWeight: '400',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
Hello,
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '22px',
|
||||
fontWeight: '700',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
{profile?.full_name?.split(' ')[0] || 'Friend'}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
Here is what's happening at church this week.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '40px 0',
|
||||
}}
|
||||
>
|
||||
<IonSpinner name="crescent" color="primary" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Feature Upcoming Event Widget */}
|
||||
{featuredEvent && (
|
||||
<div
|
||||
onClick={() => openEventDetail(featuredEvent.id)}
|
||||
style={{
|
||||
background: 'var(--color-brand)',
|
||||
borderRadius: '24px',
|
||||
padding: '22px',
|
||||
margin: '0 20px 12px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
fontWeight: '600',
|
||||
color: 'rgba(255,255,255,0.70)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.5px',
|
||||
}}
|
||||
>
|
||||
Next Up
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
color: '#ffffff',
|
||||
lineHeight: '1.2',
|
||||
}}
|
||||
>
|
||||
{featuredEvent.title}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
color: 'rgba(255,255,255,0.85)',
|
||||
}}
|
||||
>
|
||||
{new Date(featuredEvent.start_at).toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}{' '}
|
||||
• {featuredEvent.day_label}
|
||||
</div>
|
||||
<div style={{ marginTop: '4px' }}>
|
||||
<button
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.16)',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '10px 16px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
color: '#ffffff',
|
||||
}}
|
||||
>
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Latest News Row (Horizontal Scroll) */}
|
||||
{latestNews.length > 0 && (
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '0 20px 12px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
fontWeight: '700',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
Latest News
|
||||
</div>
|
||||
<div
|
||||
onClick={() => history.push('/news')}
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: 'var(--color-brand)',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
See all
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
overflowX: 'auto',
|
||||
scrollSnapType: 'x mandatory',
|
||||
padding: '0 20px',
|
||||
gap: '12px',
|
||||
scrollbarWidth: 'none',
|
||||
msOverflowStyle: 'none',
|
||||
}}
|
||||
className="hide-scrollbar"
|
||||
>
|
||||
{latestNews.map((news) => (
|
||||
<div
|
||||
key={news.id}
|
||||
onClick={() => history.push(`/news/${news.id}`)}
|
||||
style={{
|
||||
minWidth: '260px',
|
||||
maxWidth: '260px',
|
||||
background: 'var(--color-surface)',
|
||||
borderRadius: '24px',
|
||||
padding: '16px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
scrollSnapAlign: 'start',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{news.image_url ? (
|
||||
<img
|
||||
src={news.image_url}
|
||||
alt=""
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '120px',
|
||||
objectFit: 'cover',
|
||||
borderRadius: '16px',
|
||||
background: 'var(--color-surface-raised)',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '120px',
|
||||
borderRadius: '16px',
|
||||
background: 'var(--color-brand-soft)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={newspaperOutline}
|
||||
style={{
|
||||
color: 'var(--color-brand)',
|
||||
fontSize: '32px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: 'var(--color-text-tertiary)',
|
||||
marginBottom: '4px',
|
||||
}}
|
||||
>
|
||||
{new Date(news.created_at).toLocaleDateString(
|
||||
undefined,
|
||||
{
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '15px',
|
||||
fontWeight: '700',
|
||||
color: 'var(--color-text-primary)',
|
||||
lineHeight: '1.3',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{news.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div style={{ minWidth: '8px' }}></div>
|
||||
</div>
|
||||
<style>{`
|
||||
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
||||
`}</style>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Two Stat Widgets */}
|
||||
<div
|
||||
style={{ display: 'flex', gap: '12px', margin: '0 20px 12px' }}
|
||||
>
|
||||
<HomeStatCard
|
||||
label="Weekly"
|
||||
value={weeklyCount.toString()}
|
||||
caption="Upcoming events"
|
||||
icon={calendarOutline}
|
||||
/>
|
||||
<HomeStatCard
|
||||
label="Youth"
|
||||
value={youthCount.toString()}
|
||||
caption="Activities planned"
|
||||
icon={peopleOutline}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Upcoming This Week List */}
|
||||
{upcomingEvents.length > 0 ? (
|
||||
<div
|
||||
style={{
|
||||
background: '#fcf8f0',
|
||||
borderRadius: '24px',
|
||||
padding: '20px',
|
||||
margin: '0 20px 16px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '14px',
|
||||
boxShadow: '0 2px 8px rgba(123, 45, 38, 0.05)',
|
||||
border: '1px solid rgba(176, 122, 58, 0.1)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
fontWeight: '700',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
Upcoming Schedule
|
||||
</div>
|
||||
<div
|
||||
onClick={goToEvents}
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: 'var(--color-brand)',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
See all
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '4px',
|
||||
}}
|
||||
>
|
||||
{upcomingEvents.map((event) => (
|
||||
<EventPreviewCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onClick={() => openEventDetail(event.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
background: 'var(--color-surface)',
|
||||
borderRadius: '24px',
|
||||
padding: '32px 20px',
|
||||
margin: '0 20px 16px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
textAlign: 'center',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={calendarOutline}
|
||||
style={{
|
||||
fontSize: '40px',
|
||||
color: 'var(--color-text-tertiary)',
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
No church events have been posted yet.
|
||||
</p>
|
||||
<button
|
||||
onClick={goToEvents}
|
||||
style={{
|
||||
background: 'var(--color-brand-soft)',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '10px 16px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: 'var(--color-brand)',
|
||||
cursor: 'pointer',
|
||||
marginTop: '4px',
|
||||
}}
|
||||
>
|
||||
Go to events
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div
|
||||
style={{
|
||||
margin: '0 20px',
|
||||
padding: '12px',
|
||||
background: 'rgba(190,60,60,0.1)',
|
||||
borderRadius: '12px',
|
||||
color: '#a33b32',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
const Home: React.FC = () => (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Home</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent className="ion-padding">
|
||||
<p>Welcome! Start building your app here.</p>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default Home;
|
||||
|
||||
@@ -1,229 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
IonPage,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonSpinner,
|
||||
useIonViewWillEnter,
|
||||
IonRefresher,
|
||||
IonRefresherContent,
|
||||
IonButtons,
|
||||
IonButton,
|
||||
IonIcon,
|
||||
} from '@ionic/react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { NewsItem } from '../types';
|
||||
import { addOutline, newspaperOutline } from 'ionicons/icons';
|
||||
|
||||
const News: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { profile } = useAuth();
|
||||
const [news, setNews] = useState<NewsItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchNews = async () => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('news')
|
||||
.select('*')
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (error) throw error;
|
||||
setNews(data || []);
|
||||
} catch (err) {
|
||||
console.error('Error fetching news:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
fetchNews();
|
||||
});
|
||||
|
||||
const doRefresh = async (event: any) => {
|
||||
await fetchNews();
|
||||
event.detail.complete();
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar style={{ '--background': '#f5f7f4' }}>
|
||||
<IonTitle
|
||||
style={{ fontWeight: '700', fontSize: '24px', color: '#1f2937' }}
|
||||
>
|
||||
News
|
||||
</IonTitle>
|
||||
{profile?.role === 'admin' && (
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={() => history.push('/admin/news/new')}>
|
||||
<IonIcon icon={addOutline} style={{ color: '#2f6b4f' }} />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
)}
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent style={{ '--background': '#f5f7f4' }}>
|
||||
<IonRefresher slot="fixed" onIonRefresh={doRefresh}>
|
||||
<IonRefresherContent />
|
||||
</IonRefresher>
|
||||
|
||||
<div style={{ padding: '0 20px 20px' }}>
|
||||
{loading ? (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginTop: '40px',
|
||||
}}
|
||||
>
|
||||
<IonSpinner name="crescent" />
|
||||
</div>
|
||||
) : news.length === 0 ? (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
padding: '60px 20px',
|
||||
color: '#6b7280',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={newspaperOutline}
|
||||
style={{
|
||||
fontSize: '48px',
|
||||
color: '#cbd5e1',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
/>
|
||||
<p style={{ margin: 0, fontSize: '16px', fontWeight: '500' }}>
|
||||
No news yet.
|
||||
</p>
|
||||
{profile?.role === 'admin' && (
|
||||
<button
|
||||
onClick={() => history.push('/admin/news/new')}
|
||||
style={{
|
||||
background: '#2f6b4f',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '10px 20px',
|
||||
fontWeight: '600',
|
||||
marginTop: '20px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Create Post
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
paddingTop: '8px',
|
||||
}}
|
||||
>
|
||||
{news.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => history.push(`/news/${item.id}`)}
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '16px',
|
||||
display: 'flex',
|
||||
gap: '16px',
|
||||
cursor: 'pointer',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{item.image_url ? (
|
||||
<img
|
||||
src={item.image_url}
|
||||
alt=""
|
||||
style={{
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
borderRadius: '16px',
|
||||
objectFit: 'cover',
|
||||
flexShrink: 0,
|
||||
background: '#f1f5f9',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
borderRadius: '16px',
|
||||
background: 'rgba(47, 107, 79, 0.1)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={newspaperOutline}
|
||||
style={{ color: '#2f6b4f', fontSize: '28px' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '6px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#9ca3af',
|
||||
}}
|
||||
>
|
||||
{new Date(item.created_at).toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
lineHeight: '1.3',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{item.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default News;
|
||||
@@ -1,187 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
IonPage,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonButtons,
|
||||
IonButton,
|
||||
IonIcon,
|
||||
IonSpinner,
|
||||
useIonViewWillEnter,
|
||||
} from '@ionic/react';
|
||||
import { useHistory, useParams } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { NewsItem } from '../types';
|
||||
import { chevronBackOutline, createOutline } from 'ionicons/icons';
|
||||
|
||||
const NewsDetail: React.FC = () => {
|
||||
const history = useHistory();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const { profile } = useAuth();
|
||||
const [news, setNews] = useState<NewsItem | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useIonViewWillEnter(() => {
|
||||
fetchNewsItem();
|
||||
});
|
||||
|
||||
const fetchNewsItem = async () => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('news')
|
||||
.select('*')
|
||||
.eq('id', id)
|
||||
.single();
|
||||
if (error) throw error;
|
||||
setNews(data);
|
||||
} catch (err) {
|
||||
console.error('Error fetching news:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar style={{ '--background': '#f5f7f4' }}>
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => history.goBack()}>
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent style={{ '--background': '#f5f7f4' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
marginTop: '40px',
|
||||
}}
|
||||
>
|
||||
<IonSpinner name="crescent" />
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
if (!news) {
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar style={{ '--background': '#f5f7f4' }}>
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => history.goBack()}>
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent style={{ '--background': '#f5f7f4' }}>
|
||||
<div
|
||||
style={{ textAlign: 'center', marginTop: '60px', color: '#6b7280' }}
|
||||
>
|
||||
News item not found.
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar style={{ '--background': '#f5f7f4' }}>
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => history.goBack()}>
|
||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
{profile?.role === 'admin' && (
|
||||
<IonButtons slot="end">
|
||||
<IonButton onClick={() => history.push(`/admin/news/${news.id}`)}>
|
||||
<IonIcon
|
||||
icon={createOutline}
|
||||
slot="icon-only"
|
||||
style={{ color: '#2f6b4f' }}
|
||||
/>
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
)}
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent style={{ '--background': '#f5f7f4' }}>
|
||||
<div
|
||||
style={{
|
||||
padding: '0 20px 40px',
|
||||
maxWidth: '600px',
|
||||
margin: '0 auto',
|
||||
}}
|
||||
>
|
||||
{news.image_url && (
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<img
|
||||
src={news.image_url}
|
||||
alt=""
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '240px',
|
||||
objectFit: 'cover',
|
||||
borderRadius: '24px',
|
||||
background: '#eef2ec',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#2f6b4f',
|
||||
marginBottom: '12px',
|
||||
}}
|
||||
>
|
||||
{new Date(news.created_at).toLocaleDateString(undefined, {
|
||||
weekday: 'long',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</div>
|
||||
|
||||
<h1
|
||||
style={{
|
||||
margin: '0 0 24px',
|
||||
fontSize: '28px',
|
||||
fontWeight: '800',
|
||||
color: '#1f2937',
|
||||
lineHeight: '1.2',
|
||||
}}
|
||||
>
|
||||
{news.title}
|
||||
</h1>
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
color: '#4b5563',
|
||||
lineHeight: '1.6',
|
||||
whiteSpace: 'pre-wrap',
|
||||
}}
|
||||
>
|
||||
{news.content}
|
||||
</div>
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsDetail;
|
||||
@@ -1,521 +0,0 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { IonPage, IonContent, IonIcon, IonSpinner } from '@ionic/react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import {
|
||||
cameraOutline,
|
||||
personOutline,
|
||||
chevronForwardOutline,
|
||||
settingsOutline,
|
||||
helpCircleOutline,
|
||||
} from 'ionicons/icons';
|
||||
|
||||
const Profile: React.FC = () => {
|
||||
const [signingOut, setSigningOut] = useState(false);
|
||||
const [uploadingAvatar, setUploadingAvatar] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { user, profile, refreshProfile } = useAuth();
|
||||
const history = useHistory();
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const handleSignOut = async () => {
|
||||
setSigningOut(true);
|
||||
setError(null);
|
||||
const { error: signOutError } = await supabase.auth.signOut();
|
||||
if (signOutError) {
|
||||
setError(signOutError.message);
|
||||
setSigningOut(false);
|
||||
return;
|
||||
}
|
||||
history.replace('/auth');
|
||||
};
|
||||
|
||||
const goToCreateEvent = () => {
|
||||
history.push('/admin/events/new');
|
||||
};
|
||||
|
||||
const initials = profile?.full_name
|
||||
? profile.full_name
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
.substring(0, 2)
|
||||
.toUpperCase()
|
||||
: 'U';
|
||||
|
||||
const isAdmin = profile?.role === 'admin';
|
||||
const avatarUrl = profile?.avatar_url
|
||||
? `${supabase.storage.from('avatars').getPublicUrl(profile.avatar_url).data.publicUrl}?t=${Date.now()}`
|
||||
: null;
|
||||
|
||||
const showError = (message: string) => {
|
||||
setError(message);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const handleAvatarSelect = async (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file || !user) {
|
||||
return;
|
||||
}
|
||||
|
||||
setUploadingAvatar(true);
|
||||
setError(null);
|
||||
|
||||
const extension = file.name.split('.').pop()?.toLowerCase() || 'jpg';
|
||||
const filePath = `${user.id}/avatar-${Date.now()}.${extension}`;
|
||||
|
||||
const { error: uploadError } = await supabase.storage
|
||||
.from('avatars')
|
||||
.upload(filePath, file);
|
||||
|
||||
if (uploadError) {
|
||||
showError(uploadError.message);
|
||||
setUploadingAvatar(false);
|
||||
event.target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const { error: profileError } = await supabase
|
||||
.from('profiles')
|
||||
.update({ avatar_url: filePath, updated_at: new Date().toISOString() })
|
||||
.eq('id', user.id);
|
||||
|
||||
if (profileError) {
|
||||
showError(profileError.message);
|
||||
setUploadingAvatar(false);
|
||||
event.target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
await refreshProfile();
|
||||
setUploadingAvatar(false);
|
||||
event.target.value = '';
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ background: '#f5f7f4' }}>
|
||||
<IonContent
|
||||
style={{
|
||||
'--background': '#f5f7f4',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '0px',
|
||||
'--padding-bottom': '24px',
|
||||
}}
|
||||
>
|
||||
{/* Top Title Row */}
|
||||
<div
|
||||
style={{
|
||||
padding: 'calc(16px + var(--ion-safe-area-top)) 20px 8px',
|
||||
margin: '0',
|
||||
background: 'transparent',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '6px',
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Profile
|
||||
</h1>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
}}
|
||||
>
|
||||
Manage your account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Profile Summary Card */}
|
||||
<div
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '20px',
|
||||
margin: '0 20px 12px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '52px',
|
||||
height: '52px',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={uploadingAvatar}
|
||||
style={{
|
||||
width: '52px',
|
||||
height: '52px',
|
||||
borderRadius: '16px',
|
||||
background: 'rgba(47, 107, 79, 0.12)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '18px',
|
||||
fontWeight: '700',
|
||||
color: '#2f6b4f',
|
||||
flexShrink: 0,
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
overflow: 'hidden',
|
||||
cursor: uploadingAvatar ? 'default' : 'pointer',
|
||||
}}
|
||||
>
|
||||
{avatarUrl ? (
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt={profile?.full_name || 'Profile'}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
initials
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={uploadingAvatar}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '-4px',
|
||||
bottom: '-4px',
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '12px',
|
||||
border: 'none',
|
||||
background: '#2f6b4f',
|
||||
color: '#ffffff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: uploadingAvatar ? 'default' : 'pointer',
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
{uploadingAvatar ? (
|
||||
<IonSpinner
|
||||
name="crescent"
|
||||
color="light"
|
||||
style={{ width: '14px', height: '14px' }}
|
||||
/>
|
||||
) : (
|
||||
<IonIcon icon={cameraOutline} style={{ fontSize: '13px' }} />
|
||||
)}
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
onChange={handleAvatarSelect}
|
||||
style={{ display: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '4px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{profile?.full_name || 'Member'}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '13px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{profile?.email || ''}
|
||||
</div>
|
||||
</div>
|
||||
{profile?.ministry_group && (
|
||||
<div
|
||||
style={{
|
||||
background: '#eef2ec',
|
||||
color: '#4b5563',
|
||||
borderRadius: '999px',
|
||||
padding: '4px 10px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
}}
|
||||
>
|
||||
{profile.ministry_group}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Settings / Action List Card */}
|
||||
<div
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '8px 18px',
|
||||
margin: '0 20px 12px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
minHeight: '56px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '12px',
|
||||
background: '#eef2ec',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={personOutline}
|
||||
style={{ color: '#2f6b4f', fontSize: '18px' }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Personal Info
|
||||
</div>
|
||||
<IonIcon
|
||||
icon={chevronForwardOutline}
|
||||
style={{ color: '#9aa3a0', fontSize: '18px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
minHeight: '56px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '12px',
|
||||
background: '#eef2ec',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={settingsOutline}
|
||||
style={{ color: '#2f6b4f', fontSize: '18px' }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Account Settings
|
||||
</div>
|
||||
<IonIcon
|
||||
icon={chevronForwardOutline}
|
||||
style={{ color: '#9aa3a0', fontSize: '18px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
minHeight: '56px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
borderRadius: '12px',
|
||||
background: '#eef2ec',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={helpCircleOutline}
|
||||
style={{ color: '#2f6b4f', fontSize: '18px' }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Help & Support
|
||||
</div>
|
||||
<IonIcon
|
||||
icon={chevronForwardOutline}
|
||||
style={{ color: '#9aa3a0', fontSize: '18px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Admin Shortcut Card */}
|
||||
{isAdmin && (
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(47, 107, 79, 0.08)',
|
||||
borderRadius: '24px',
|
||||
padding: '18px',
|
||||
margin: '0 20px 12px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ fontSize: '14px', fontWeight: '600', color: '#2f6b4f' }}
|
||||
>
|
||||
Admin Tools
|
||||
</div>
|
||||
<button
|
||||
onClick={goToCreateEvent}
|
||||
style={{
|
||||
background: '#2f6b4f',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '14px 16px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#ffffff',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
Create New Event
|
||||
</button>
|
||||
<button
|
||||
onClick={() => history.push('/admin/news/new')}
|
||||
style={{
|
||||
background: 'rgba(47, 107, 79, 0.1)',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '14px 16px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: '#2f6b4f',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
Manage News
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sign Out Button */}
|
||||
<div style={{ margin: '0 20px 24px 20px' }}>
|
||||
<button
|
||||
onClick={handleSignOut}
|
||||
disabled={signingOut}
|
||||
style={{
|
||||
background: '#a33b32',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '16px',
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#ffffff',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{signingOut ? <IonSpinner name="dots" color="light" /> : 'Sign Out'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
style={{
|
||||
margin: '0 20px',
|
||||
padding: '12px',
|
||||
background: 'rgba(190,60,60,0.1)',
|
||||
borderRadius: '12px',
|
||||
color: '#a33b32',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
@@ -1,250 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
IonPage,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonSpinner,
|
||||
IonSelect,
|
||||
IonSelectOption,
|
||||
IonIcon,
|
||||
} from '@ionic/react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { personAddOutline } from 'ionicons/icons';
|
||||
|
||||
const SetupProfile: React.FC = () => {
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [ministryGroup, setMinistryGroup] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const history = useHistory();
|
||||
const { user, refreshProfile } = useAuth();
|
||||
|
||||
const showError = (msg: string) => {
|
||||
setError(msg);
|
||||
setTimeout(() => setError(null), 4000);
|
||||
};
|
||||
|
||||
const handleProfileSetup = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!fullName.trim()) {
|
||||
showError('Please enter your name');
|
||||
return;
|
||||
}
|
||||
if (!user) {
|
||||
showError('No user session found. Please log in again.');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const { error: insertError } = await supabase.from('profiles').insert({
|
||||
id: user.id,
|
||||
email: user.email ?? '',
|
||||
full_name: fullName.trim(),
|
||||
role: 'member',
|
||||
ministry_group: ministryGroup || null,
|
||||
});
|
||||
|
||||
if (insertError) {
|
||||
showError(insertError.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await refreshProfile();
|
||||
history.replace('/home');
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ background: '#f5f7f4' }}>
|
||||
<IonHeader className="ion-no-border">
|
||||
<IonToolbar style={{ '--background': '#f5f7f4' }}>
|
||||
<IonTitle
|
||||
style={{ fontSize: '18px', fontWeight: '700', color: '#1f2937' }}
|
||||
>
|
||||
Setup Profile
|
||||
</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent
|
||||
style={{
|
||||
'--background': '#f5f7f4',
|
||||
'--padding-start': '20px',
|
||||
'--padding-end': '20px',
|
||||
'--padding-top': '16px',
|
||||
'--padding-bottom': '20px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '24px',
|
||||
margin: '0 0 16px 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(47, 107, 79, 0.12)',
|
||||
borderRadius: '12px',
|
||||
width: '44px',
|
||||
height: '44px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={personAddOutline}
|
||||
style={{ fontSize: '20px', color: '#2f6b4f' }}
|
||||
/>
|
||||
</div>
|
||||
<h2
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '20px',
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Welcome to EAGLES ASSEMBLY
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
}}
|
||||
>
|
||||
Please let us know who you are so we can personalize your
|
||||
experience.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={handleProfileSetup}
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '24px',
|
||||
margin: '0 0 16px 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '16px',
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Full Name (e.g. John Doe)"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
required
|
||||
style={{
|
||||
background: '#eef2ec',
|
||||
border: 'none',
|
||||
borderRadius: '12px',
|
||||
padding: '0 14px',
|
||||
height: '48px',
|
||||
fontSize: '15px',
|
||||
color: '#1f2937',
|
||||
outline: 'none',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: '#eef2ec',
|
||||
borderRadius: '12px',
|
||||
padding: '0 14px',
|
||||
height: '48px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<IonSelect
|
||||
value={ministryGroup}
|
||||
placeholder="Select Ministry Group (Optional)"
|
||||
onIonChange={(e) => setMinistryGroup(e.detail.value)}
|
||||
interface="popover"
|
||||
style={{
|
||||
width: '100%',
|
||||
color: '#1f2937',
|
||||
fontSize: '15px',
|
||||
'--placeholder-color': '#9aa3a0',
|
||||
'--placeholder-opacity': '1',
|
||||
}}
|
||||
>
|
||||
<IonSelectOption value="Youth">Youth</IonSelectOption>
|
||||
<IonSelectOption value="Choir">Choir</IonSelectOption>
|
||||
<IonSelectOption value="Ushering">Ushering</IonSelectOption>
|
||||
<IonSelectOption value="Media">Media</IonSelectOption>
|
||||
</IonSelect>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
background: '#2f6b4f',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '16px',
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#ffffff',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginTop: '8px',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<IonSpinner name="dots" color="light" />
|
||||
) : (
|
||||
'Complete Setup'
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(190, 60, 60, 0.10)',
|
||||
borderRadius: '12px',
|
||||
padding: '12px 14px',
|
||||
margin: '0',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
color: '#a33b32',
|
||||
lineHeight: '1.4',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default SetupProfile;
|
||||
@@ -1,296 +0,0 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { IonPage, IonContent, IonSpinner, IonIcon } from '@ionic/react';
|
||||
import { useHistory, useLocation } from 'react-router-dom';
|
||||
import { supabase } from '../supabase';
|
||||
import OtpInputRow from '../components/OtpInputRow';
|
||||
import { checkmarkCircleOutline } from 'ionicons/icons';
|
||||
|
||||
const VerifyEmail: React.FC = () => {
|
||||
const [digits, setDigits] = useState<string[]>(Array(6).fill(''));
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [cooldown, setCooldown] = useState(0);
|
||||
const [verified, setVerified] = useState(false);
|
||||
|
||||
const history = useHistory();
|
||||
const location = useLocation<{ email?: string; resent?: boolean }>();
|
||||
const email = location.state?.email || '';
|
||||
const resent = location.state?.resent || false;
|
||||
|
||||
const inputRefs = [
|
||||
useRef<HTMLIonInputElement>(null),
|
||||
useRef<HTMLIonInputElement>(null),
|
||||
useRef<HTMLIonInputElement>(null),
|
||||
useRef<HTMLIonInputElement>(null),
|
||||
useRef<HTMLIonInputElement>(null),
|
||||
useRef<HTMLIonInputElement>(null),
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (!email) {
|
||||
history.replace('/auth');
|
||||
}
|
||||
if (resent) {
|
||||
setCooldown(60);
|
||||
}
|
||||
}, [email, resent, history]);
|
||||
|
||||
useEffect(() => {
|
||||
if (cooldown > 0) {
|
||||
const timer = setTimeout(() => setCooldown(cooldown - 1), 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [cooldown]);
|
||||
|
||||
const handleDigitChange = (index: number, value: string) => {
|
||||
const sanitized = value.replace(/[^0-9]/g, '').slice(-1);
|
||||
const newDigits = [...digits];
|
||||
newDigits[index] = sanitized;
|
||||
setDigits(newDigits);
|
||||
|
||||
if (sanitized && index < 5) {
|
||||
inputRefs[index + 1].current?.setFocus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (
|
||||
index: number,
|
||||
e: React.KeyboardEvent<HTMLIonInputElement>
|
||||
) => {
|
||||
if (e.key === 'Backspace') {
|
||||
if (!digits[index] && index > 0) {
|
||||
inputRefs[index - 1].current?.setFocus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleVerifyOtp = async () => {
|
||||
const code = digits.join('');
|
||||
if (code.length !== 6) {
|
||||
setError('Please enter all 6 digits');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const { error } = await supabase.auth.verifyOtp({
|
||||
email,
|
||||
token: code,
|
||||
type: 'email',
|
||||
});
|
||||
if (error) {
|
||||
setError(error.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setVerified(true);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleResend = async () => {
|
||||
if (cooldown > 0) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const { error } = await supabase.auth.resend({ type: 'signup', email });
|
||||
if (error) {
|
||||
setError(error.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setCooldown(60);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const goBackToAuth = () => {
|
||||
history.replace('/auth');
|
||||
};
|
||||
|
||||
return (
|
||||
<IonPage style={{ background: '#f6f1e8' }}>
|
||||
<IonContent
|
||||
style={{
|
||||
'--background': 'linear-gradient(180deg, #f9f5ee 0%, #f3ede3 100%)',
|
||||
'--padding-start': '0px',
|
||||
'--padding-end': '0px',
|
||||
'--padding-top': '0px',
|
||||
'--padding-bottom': '0px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding:
|
||||
'calc(var(--ion-safe-area-top, 0px) + 18px) 20px calc(var(--ion-safe-area-bottom, 0px) + 28px)',
|
||||
minHeight: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: 'transparent',
|
||||
borderRadius: '0px',
|
||||
padding: '0px',
|
||||
margin: '0 0 24px 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Check your email
|
||||
</h1>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
}}
|
||||
>
|
||||
We sent a 6-digit code to {email}.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{!verified ? (
|
||||
<>
|
||||
<OtpInputRow
|
||||
digits={digits}
|
||||
onChange={handleDigitChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
inputRefs={inputRefs}
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={handleVerifyOtp}
|
||||
disabled={loading}
|
||||
style={{
|
||||
background: '#2f6b4f',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '16px',
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#ffffff',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 0 16px 0',
|
||||
}}
|
||||
>
|
||||
{loading ? <IonSpinner name="dots" color="light" /> : 'Verify'}
|
||||
</button>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<button
|
||||
onClick={handleResend}
|
||||
disabled={cooldown > 0 || loading}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '10px 14px',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: cooldown > 0 ? '#9aa3a0' : '#2f6b4f',
|
||||
cursor: cooldown > 0 ? 'default' : 'pointer',
|
||||
}}
|
||||
>
|
||||
{cooldown > 0 ? `Resend code in ${cooldown}s` : 'Resend code'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(190, 60, 60, 0.10)',
|
||||
borderRadius: '12px',
|
||||
padding: '12px 14px',
|
||||
margin: '16px 0 0 0',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
color: '#a33b32',
|
||||
lineHeight: '1.4',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
background: '#ffffff',
|
||||
borderRadius: '24px',
|
||||
padding: '24px',
|
||||
margin: '24px 0 0 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<IonIcon
|
||||
icon={checkmarkCircleOutline}
|
||||
style={{ fontSize: '36px', color: '#2f6b4f' }}
|
||||
/>
|
||||
<h2
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '18px',
|
||||
fontWeight: '700',
|
||||
color: '#1f2937',
|
||||
}}
|
||||
>
|
||||
Email confirmed
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: '14px',
|
||||
fontWeight: '400',
|
||||
color: '#6b7280',
|
||||
}}
|
||||
>
|
||||
You can now sign in to your account.
|
||||
</p>
|
||||
<button
|
||||
onClick={goBackToAuth}
|
||||
style={{
|
||||
background: '#2f6b4f',
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '16px',
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#ffffff',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
marginTop: '12px',
|
||||
}}
|
||||
>
|
||||
Back to Sign In
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
};
|
||||
|
||||
export default VerifyEmail;
|
||||
@@ -1,7 +0,0 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import type { Database } from './database.types';
|
||||
|
||||
export const supabase = createClient<Database>(
|
||||
'https://kxejpmyjfdrbaupauexc.supabase.co',
|
||||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imt4ZWpwbXlqZmRyYmF1cGF1ZXhjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODM2OTkzMzksImV4cCI6MjA5OTI3NTMzOX0.FteANsPY4x605R26bxC6sR4iiYbw_nwG4zrcDYEH83Y',
|
||||
);
|
||||
Vendored
-51
@@ -1,51 +0,0 @@
|
||||
// Ambient test globals for optional *.test.* files in the editor / tsc.
|
||||
// No test runner is installed in the template; stubs avoid spurious TS errors.
|
||||
|
||||
interface Matchers<R = void> {
|
||||
toBeDefined(): R;
|
||||
toBe(expected: unknown): R;
|
||||
toEqual(expected: unknown): R;
|
||||
toBeTruthy(): R;
|
||||
toBeFalsy(): R;
|
||||
toBeNull(): R;
|
||||
toContain(item: unknown): R;
|
||||
toHaveLength(length: number): R;
|
||||
toMatch(expected: string | RegExp): R;
|
||||
toThrow(expected?: string | RegExp | Error): R;
|
||||
not: Matchers<R>;
|
||||
}
|
||||
|
||||
interface Expect {
|
||||
<T = unknown>(actual: T): Matchers;
|
||||
}
|
||||
|
||||
declare const expect: Expect;
|
||||
|
||||
type TestCaseFn = (
|
||||
name: string,
|
||||
fn?: () => void | Promise<void>,
|
||||
timeout?: number,
|
||||
) => void;
|
||||
|
||||
declare const test: TestCaseFn;
|
||||
declare const it: TestCaseFn;
|
||||
declare const describe: TestCaseFn;
|
||||
|
||||
declare function beforeEach(fn: () => void | Promise<void>): void;
|
||||
declare function afterEach(fn: () => void | Promise<void>): void;
|
||||
declare function beforeAll(fn: () => void | Promise<void>): void;
|
||||
declare function afterAll(fn: () => void | Promise<void>): void;
|
||||
|
||||
declare module "@testing-library/react" {
|
||||
export function render(
|
||||
ui: unknown,
|
||||
options?: object,
|
||||
): {
|
||||
baseElement: Element;
|
||||
container: Element;
|
||||
unmount(): void;
|
||||
rerender(ui: unknown): void;
|
||||
};
|
||||
export const screen: Record<string, (...args: unknown[]) => Element>;
|
||||
export function cleanup(): void;
|
||||
}
|
||||
+55
-63
@@ -1,73 +1,65 @@
|
||||
/* Ionic Variables and Color Palette */
|
||||
|
||||
/* Ionic CSS Variables — customise to match your app's brand */
|
||||
:root {
|
||||
--ion-color-primary: #7b2d26;
|
||||
--ion-color-primary-rgb: 123, 45, 38;
|
||||
--ion-color-primary: #3880ff;
|
||||
--ion-color-primary-rgb: 56, 128, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #6c2721;
|
||||
--ion-color-primary-tint: #883f3a;
|
||||
--ion-color-primary-shade: #3171e0;
|
||||
--ion-color-primary-tint: #4c8dff;
|
||||
|
||||
--ion-color-secondary: #b07a3a;
|
||||
--ion-color-secondary-rgb: 176, 122, 58;
|
||||
--ion-color-secondary: #3dc2ff;
|
||||
--ion-color-secondary-rgb: 61, 194, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #9b6b33;
|
||||
--ion-color-secondary-tint: #b8894e;
|
||||
--ion-color-secondary-shade: #36abe0;
|
||||
--ion-color-secondary-tint: #50c8ff;
|
||||
|
||||
--ion-background-color: #f8f4ef;
|
||||
--color-bg: #f8f4ef;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-raised: #f2ece4;
|
||||
--color-brand: #7b2d26;
|
||||
--color-brand-soft: rgba(123, 45, 38, 0.1);
|
||||
--color-brand-medium: rgba(123, 45, 38, 0.18);
|
||||
--ion-color-tertiary: #5260ff;
|
||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #4854e0;
|
||||
--ion-color-tertiary-tint: #6370ff;
|
||||
|
||||
--ion-text-color: #2f221d;
|
||||
--ion-text-color-rgb: 47, 34, 29;
|
||||
--color-text-primary: #2f221d;
|
||||
--color-text-secondary: rgba(47, 34, 29, 0.64);
|
||||
--color-text-tertiary: rgba(47, 34, 29, 0.42);
|
||||
--color-border: rgba(47, 34, 29, 0.08);
|
||||
--ion-color-success: #2dd36f;
|
||||
--ion-color-success-rgb: 45, 211, 111;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-success-shade: #28ba62;
|
||||
--ion-color-success-tint: #42d77d;
|
||||
|
||||
--ion-color-success: #7b2d26;
|
||||
--ion-color-warning: #d29a3f;
|
||||
--ion-color-danger: #a33b32;
|
||||
--ion-color-medium: #8e7d73;
|
||||
--ion-color-light: #f8f4ef;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--ion-background-color: #201513;
|
||||
--color-bg: #201513;
|
||||
--color-surface: #2b1c19;
|
||||
--color-surface-raised: #3a2723;
|
||||
--color-brand: #c7865f;
|
||||
--color-brand-soft: rgba(199, 134, 95, 0.14);
|
||||
--color-brand-medium: rgba(199, 134, 95, 0.22);
|
||||
|
||||
--ion-text-color: #f5ebe3;
|
||||
--ion-text-color-rgb: 245, 235, 227;
|
||||
--color-text-primary: #f5ebe3;
|
||||
--color-text-secondary: rgba(245, 235, 227, 0.68);
|
||||
--color-text-tertiary: rgba(245, 235, 227, 0.44);
|
||||
|
||||
--ion-color-primary: #c7865f;
|
||||
--ion-color-primary-rgb: 199, 134, 95;
|
||||
--ion-color-primary-contrast: #201513;
|
||||
--ion-color-primary-contrast-rgb: 32, 21, 19;
|
||||
--ion-color-primary-shade: #b27754;
|
||||
--ion-color-primary-tint: #cd9270;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
padding: calc(var(--ion-safe-area-top, 0px) + 18px) 20px
|
||||
calc(var(--ion-safe-area-bottom, 0px) + 28px);
|
||||
--ion-color-warning: #ffc409;
|
||||
--ion-color-warning-rgb: 255, 196, 9;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0ac08;
|
||||
--ion-color-warning-tint: #ffca22;
|
||||
|
||||
--ion-color-danger: #eb445a;
|
||||
--ion-color-danger-rgb: 235, 68, 90;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #cf3c4f;
|
||||
--ion-color-danger-tint: #ed576b;
|
||||
|
||||
--ion-color-dark: #222428;
|
||||
--ion-color-dark-rgb: 34, 36, 40;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-dark-shade: #1e2023;
|
||||
--ion-color-dark-tint: #383a3e;
|
||||
|
||||
--ion-color-medium: #92949c;
|
||||
--ion-color-medium-rgb: 146, 148, 156;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-medium-shade: #808289;
|
||||
--ion-color-medium-tint: #9d9fa6;
|
||||
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244, 245, 248;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-light-shade: #d7d8da;
|
||||
--ion-color-light-tint: #f5f6f9;
|
||||
}
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
export interface EventCategory {
|
||||
id: string;
|
||||
slug: string;
|
||||
name: string;
|
||||
accent_color: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface ChurchEvent {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
category_id: string;
|
||||
audience: 'all' | 'youth' | 'children';
|
||||
venue: string;
|
||||
start_at: string;
|
||||
end_at: string | null;
|
||||
day_label: string;
|
||||
is_featured: boolean;
|
||||
created_by: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
event_categories?: EventCategory; // Relation
|
||||
}
|
||||
|
||||
export interface NewsItem {
|
||||
id: string;
|
||||
title: string;
|
||||
content: string;
|
||||
image_url: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
created_by: string;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
ext {
|
||||
minSdkVersion = 24
|
||||
compileSdkVersion = 36
|
||||
targetSdkVersion = 36
|
||||
androidxActivityVersion = '1.11.0'
|
||||
androidxAppCompatVersion = '1.7.1'
|
||||
androidxCoordinatorLayoutVersion = '1.3.0'
|
||||
androidxCoreVersion = '1.17.0'
|
||||
androidxFragmentVersion = '1.8.9'
|
||||
coreSplashScreenVersion = '1.2.0'
|
||||
androidxWebkitVersion = '1.14.0'
|
||||
junitVersion = '4.13.2'
|
||||
androidxJunitVersion = '1.3.0'
|
||||
androidxEspressoCoreVersion = '3.7.0'
|
||||
cordovaAndroidVersion = '14.0.1'
|
||||
rgcfaIncludeGoogle = true
|
||||
androidxCredentialsVersion = '1.3.0'
|
||||
}
|
||||
+1
-14
@@ -1,6 +1,3 @@
|
||||
// NOTE: @ionic/react and @ionic/react-router are pinned to 8.8.7 in package.json.
|
||||
// 8.8.8 introduced a regression that breaks IonRouterOutlet page transition animations.
|
||||
// Do not upgrade until the upstream fix is confirmed.
|
||||
import { defineConfig, type Plugin } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
@@ -17,18 +14,8 @@ const injectRouterBasename: Plugin = {
|
||||
},
|
||||
};
|
||||
|
||||
const hideScrollbars: Plugin = {
|
||||
name: 'hide-scrollbars',
|
||||
transformIndexHtml(html) {
|
||||
return html.replace(
|
||||
'</head>',
|
||||
'<style>*{scrollbar-width:none!important;-ms-overflow-style:none!important}*::-webkit-scrollbar{display:none!important}</style></head>',
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [injectRouterBasename, hideScrollbars, react()],
|
||||
plugins: [injectRouterBasename, react()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 8100,
|
||||
|
||||
@@ -216,16 +216,16 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@capacitor-firebase/authentication@npm:^8.0.0":
|
||||
version: 8.3.0
|
||||
resolution: "@capacitor-firebase/authentication@npm:8.3.0"
|
||||
"@capacitor-firebase/authentication@npm:^7.0.0":
|
||||
version: 7.5.0
|
||||
resolution: "@capacitor-firebase/authentication@npm:7.5.0"
|
||||
peerDependencies:
|
||||
"@capacitor/core": ">=8.0.0"
|
||||
firebase: ^12.6.0
|
||||
"@capacitor/core": ">=7.0.0"
|
||||
firebase: ^11.2.0
|
||||
peerDependenciesMeta:
|
||||
firebase:
|
||||
optional: true
|
||||
checksum: 10c0/a52f6ec85d18438ed616c78f29a8cea4a64621d13208a4d79d914344090630ce549f4e2d5d75da94b012e8799b4794e0af8d0e736edd97973b57205b62258ed9
|
||||
checksum: 10c0/aea4854cd6f8f2282bbbfb5cb0e30dc7152cd593a70c6792a1583fa085803f9330a77584f3ae66ee8c9b65b035374c2fe86545b191d57c0814778b6276306e1e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -324,15 +324,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@capacitor/preferences@npm:^8.0.1":
|
||||
version: 8.0.1
|
||||
resolution: "@capacitor/preferences@npm:8.0.1"
|
||||
peerDependencies:
|
||||
"@capacitor/core": ">=8.0.0"
|
||||
checksum: 10c0/cbed0229a685f484c396fd043354688fdeec69264f322180b62c5adb0322561b288a63eb38ee9b38cf78ea7dbc3b9dc8dd8c2e52b54a7f752a1b2f07bfd29f0d
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@capacitor/push-notifications@npm:^8.1.1":
|
||||
version: 8.1.1
|
||||
resolution: "@capacitor/push-notifications@npm:8.1.1"
|
||||
@@ -1052,11 +1043,11 @@ __metadata:
|
||||
linkType: hard
|
||||
|
||||
"@googlemaps/js-api-loader@npm:^2.0.2":
|
||||
version: 2.1.1
|
||||
resolution: "@googlemaps/js-api-loader@npm:2.1.1"
|
||||
version: 2.0.2
|
||||
resolution: "@googlemaps/js-api-loader@npm:2.0.2"
|
||||
dependencies:
|
||||
"@types/google.maps": "npm:^3.53.1"
|
||||
checksum: 10c0/06cb6eaf686b838be51efd8293010b7bee42e341e9ad41b42a0ee8909cf06cc5711ba6cfdbcd0c62ff05c8ba35d8622c34130e738bc5844011c8bc457d14de64
|
||||
checksum: 10c0/1bd8f1e117145de83a7cfca7c05cf4cfb2d9095d507497f8b0e590be94de3a6a27a7a3c80801de6f58d77e5a2ce169a6b6d9c9d0dfc20ea1039d890226318c46
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -1095,15 +1086,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@hookform/resolvers@npm:^3.9.0":
|
||||
version: 3.10.0
|
||||
resolution: "@hookform/resolvers@npm:3.10.0"
|
||||
peerDependencies:
|
||||
react-hook-form: ^7.0.0
|
||||
checksum: 10c0/7ee44533b4cdc28c4fa2a94894c735411e5a1f830f4a617c580533321a9b901df0cc8c1e2fad81ad8d55154ebc5cb844cf9c116a3148ffae2bc48758c33cbb8e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@ionic/cli-framework-output@npm:^2.2.8":
|
||||
version: 2.2.8
|
||||
resolution: "@ionic/cli-framework-output@npm:2.2.8"
|
||||
@@ -1126,6 +1108,17 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@ionic/core@npm:8.8.8":
|
||||
version: 8.8.8
|
||||
resolution: "@ionic/core@npm:8.8.8"
|
||||
dependencies:
|
||||
"@stencil/core": "npm:4.43.0"
|
||||
ionicons: "npm:^8.0.13"
|
||||
tslib: "npm:^2.1.0"
|
||||
checksum: 10c0/fea32925aaebec558c1c3bb9c30f8c0806d3480a67936e63cdcce8846138688d9b6b5b853ebe771132f0f79efef16568b17d11495f7997ea325a265a7e7d7af3
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@ionic/pwa-elements@npm:^3.0.0":
|
||||
version: 3.4.0
|
||||
resolution: "@ionic/pwa-elements@npm:3.4.0"
|
||||
@@ -1133,22 +1126,36 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@ionic/react-router@npm:8.8.7":
|
||||
version: 8.8.7
|
||||
resolution: "@ionic/react-router@npm:8.8.7"
|
||||
"@ionic/react-router@npm:^8.5.0":
|
||||
version: 8.8.8
|
||||
resolution: "@ionic/react-router@npm:8.8.8"
|
||||
dependencies:
|
||||
"@ionic/react": "npm:8.8.7"
|
||||
"@ionic/react": "npm:8.8.8"
|
||||
tslib: "npm:*"
|
||||
peerDependencies:
|
||||
react: ">=16.8.6"
|
||||
react-dom: ">=16.8.6"
|
||||
react-router: ^5.0.1
|
||||
react-router-dom: ^5.0.1
|
||||
checksum: 10c0/302d6ad9c0d450cf6466ff18622aa7708af77c1c4a676d2ff39eca6add440fe96d36a157feae146c3da460c32e7799357320b3270740b050ab040a664b9f0ff2
|
||||
checksum: 10c0/be9555ec4dbfd0565cada39d42236eb0b9e2283a13f500b42d5c0c06d6198c17a7be385cfb2ce4f9e89236c71992c30169328b861943a3fe7344c672ad94ae0c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@ionic/react@npm:8.8.7":
|
||||
"@ionic/react@npm:8.8.8":
|
||||
version: 8.8.8
|
||||
resolution: "@ionic/react@npm:8.8.8"
|
||||
dependencies:
|
||||
"@ionic/core": "npm:8.8.8"
|
||||
ionicons: "npm:^8.0.13"
|
||||
tslib: "npm:*"
|
||||
peerDependencies:
|
||||
react: ">=16.8.6"
|
||||
react-dom: ">=16.8.6"
|
||||
checksum: 10c0/b1b8888f487dc564735adde57ef3cd054e6c9bc38601f133823e69cb98d8e51c99c8902fe48fdd11ee5521ae58b322f110a1fbc8b8fd9bc62e27fc0b806bddd0
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@ionic/react@npm:^8.5.0":
|
||||
version: 8.8.7
|
||||
resolution: "@ionic/react@npm:8.8.7"
|
||||
dependencies:
|
||||
@@ -1358,6 +1365,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@protobufjs/inquire@npm:^1.1.2":
|
||||
version: 1.1.2
|
||||
resolution: "@protobufjs/inquire@npm:1.1.2"
|
||||
checksum: 10c0/af69597818a14cac6a00a74cd5b3fb85aa96658b9dbbae73e6d907cb154ebf470953a8c537b3e6095a43de565ec4e6c5b40227c72f4a7d762d34fbec7ac179e7
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@protobufjs/path@npm:^1.1.2":
|
||||
version: 1.1.2
|
||||
resolution: "@protobufjs/path@npm:1.1.2"
|
||||
@@ -1373,9 +1387,9 @@ __metadata:
|
||||
linkType: hard
|
||||
|
||||
"@protobufjs/utf8@npm:^1.1.1":
|
||||
version: 1.1.2
|
||||
resolution: "@protobufjs/utf8@npm:1.1.2"
|
||||
checksum: 10c0/975c6e2c0319bd50c17531d186b537a88cb4d3205e3ca9297cd842b631d341da0ee3ff16be8656cd2660756dc753b29c8a6a14c0ad8ed602c1f91ddf22e7b3f3
|
||||
version: 1.1.1
|
||||
resolution: "@protobufjs/utf8@npm:1.1.1"
|
||||
checksum: 10c0/641fc145f00626405e8984b6e90b9edcbcc072ffc82d0647ca3176e09c730b2d022f988e65f011a7a17e2e4d77cde7733643aa10d8ac2bfa30f134dbcad553fd
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -1743,70 +1757,70 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@supabase/auth-js@npm:2.110.2":
|
||||
version: 2.110.2
|
||||
resolution: "@supabase/auth-js@npm:2.110.2"
|
||||
"@supabase/auth-js@npm:2.106.2":
|
||||
version: 2.106.2
|
||||
resolution: "@supabase/auth-js@npm:2.106.2"
|
||||
dependencies:
|
||||
tslib: "npm:2.8.1"
|
||||
checksum: 10c0/3cb1bd3e78498c964ed897032fc09e19a5d8640c1d6b0edbf66a9cad5884547b9107d769f327a556ffab848656fca0de405ba9b961f38b71d44870c28d7b3bd6
|
||||
checksum: 10c0/dc82807064bcf751c5378a9cc08a77d3732505434847af8c323355b63d417bfbfaa0e807c17eea7d0b7e022c8dadd7c9aa4c886554d60c599298e928d1035a98
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@supabase/functions-js@npm:2.110.2":
|
||||
version: 2.110.2
|
||||
resolution: "@supabase/functions-js@npm:2.110.2"
|
||||
"@supabase/functions-js@npm:2.106.2":
|
||||
version: 2.106.2
|
||||
resolution: "@supabase/functions-js@npm:2.106.2"
|
||||
dependencies:
|
||||
tslib: "npm:2.8.1"
|
||||
checksum: 10c0/1e6de0a6e6304b1c2593d5ddf232a996688f8c442eb00a704f6b20d2042ae0246240f93c9dc1f5e2a936602c7b9f1ffcdd95921672d2790b30882baa24406b9d
|
||||
checksum: 10c0/256ca5134b22b90edab4c7c1f3c5db3ba8e80adbb15c3725e5ed2456a39fe21af5b7cacb2966590f6fbd17812761d2086fcad5db09eba90490911d2a66f880f1
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@supabase/phoenix@npm:0.4.4":
|
||||
version: 0.4.4
|
||||
resolution: "@supabase/phoenix@npm:0.4.4"
|
||||
checksum: 10c0/b4ba930c82b20d412358826aa87ce0735147fd168efb817bfc34e31d78605220947dc7c5844726268ac6bf338f0cd081f9908a7bab87aaff4058cb80bf71ab5b
|
||||
"@supabase/phoenix@npm:^0.4.2":
|
||||
version: 0.4.2
|
||||
resolution: "@supabase/phoenix@npm:0.4.2"
|
||||
checksum: 10c0/7d426ea70715539d76ef09a5d2364b335f848ffc32cefdc07b67707a9415c654d3f82ebf611851fceb987bdde31f1f77c088a05c40e372b65221801ca502945c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@supabase/postgrest-js@npm:2.110.2":
|
||||
version: 2.110.2
|
||||
resolution: "@supabase/postgrest-js@npm:2.110.2"
|
||||
"@supabase/postgrest-js@npm:2.106.2":
|
||||
version: 2.106.2
|
||||
resolution: "@supabase/postgrest-js@npm:2.106.2"
|
||||
dependencies:
|
||||
tslib: "npm:2.8.1"
|
||||
checksum: 10c0/d08f91dbd924d39ce194a7a698ce0a56b61208efd5642368ede0ff9c419cff026da477293b11870c02850bf8e31f69148fce71a051794af83f1175c12b951d9c
|
||||
checksum: 10c0/57c1a78428d59dfa7a89ef7901f28f756068ce9dd27ff97bf133be6ba77a4a1f13dab38bfa1a2e40cf5fab5c9d84bea394aff73514da0d6062b5b10732631127
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@supabase/realtime-js@npm:2.110.2":
|
||||
version: 2.110.2
|
||||
resolution: "@supabase/realtime-js@npm:2.110.2"
|
||||
"@supabase/realtime-js@npm:2.106.2":
|
||||
version: 2.106.2
|
||||
resolution: "@supabase/realtime-js@npm:2.106.2"
|
||||
dependencies:
|
||||
"@supabase/phoenix": "npm:0.4.4"
|
||||
"@supabase/phoenix": "npm:^0.4.2"
|
||||
tslib: "npm:2.8.1"
|
||||
checksum: 10c0/3b6bca9a6e629293b3e41be467a99ac311ebd1ff581979abbd91da646312e7f1f6a2b944ff6d9c409532aa4271f8ad5b23a028546c14d3c0fadcc0a76799af69
|
||||
checksum: 10c0/18cb4015e26e6eb10c45b8546c02eefdae0461123f05ff614d49107f97560b12c6e87a7cb810bc1a5e4618ad5286cc9cc5283800285e94356ea8e38a69910c10
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@supabase/storage-js@npm:2.110.2":
|
||||
version: 2.110.2
|
||||
resolution: "@supabase/storage-js@npm:2.110.2"
|
||||
"@supabase/storage-js@npm:2.106.2":
|
||||
version: 2.106.2
|
||||
resolution: "@supabase/storage-js@npm:2.106.2"
|
||||
dependencies:
|
||||
iceberg-js: "npm:^0.8.1"
|
||||
tslib: "npm:2.8.1"
|
||||
checksum: 10c0/a672ac600a5f37ccc196b3a5e8e17f6d57d142b8bed7ab979d69d664d4782dd050e5c3166280b5f1753b18911de7529d43487c02c1e1d1efef20c0b53deb503d
|
||||
checksum: 10c0/efb0904f1311d568c6b75336771933eb9f4bea93a1cb0f90fe54422d00162d5793e404974eefc509c93dba3f337d9d6897d6ed228657590150a1346eae8f01f7
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@supabase/supabase-js@npm:^2.108.1":
|
||||
version: 2.110.2
|
||||
resolution: "@supabase/supabase-js@npm:2.110.2"
|
||||
"@supabase/supabase-js@npm:^2.0.0":
|
||||
version: 2.106.2
|
||||
resolution: "@supabase/supabase-js@npm:2.106.2"
|
||||
dependencies:
|
||||
"@supabase/auth-js": "npm:2.110.2"
|
||||
"@supabase/functions-js": "npm:2.110.2"
|
||||
"@supabase/postgrest-js": "npm:2.110.2"
|
||||
"@supabase/realtime-js": "npm:2.110.2"
|
||||
"@supabase/storage-js": "npm:2.110.2"
|
||||
checksum: 10c0/5ec5432898bc801e871b7aa700429f6e97a77fb70b61de456b6d1e6f84feccab689fdbc4efdfc44fb4c74d48bcde3446c4cf26fcbfa72c787005efe4a72981c2
|
||||
"@supabase/auth-js": "npm:2.106.2"
|
||||
"@supabase/functions-js": "npm:2.106.2"
|
||||
"@supabase/postgrest-js": "npm:2.106.2"
|
||||
"@supabase/realtime-js": "npm:2.106.2"
|
||||
"@supabase/storage-js": "npm:2.106.2"
|
||||
checksum: 10c0/3d9418360b43cdf950c4d7496b368dd1c526cfc717dd3016ac032b904367476f31495c75c6ae905ef49e8b5b375416cb5cc354fb888d1e2fc596611824df2e97
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -1875,9 +1889,9 @@ __metadata:
|
||||
linkType: hard
|
||||
|
||||
"@types/google.maps@npm:^3.53.1, @types/google.maps@npm:^3.58.1":
|
||||
version: 3.65.2
|
||||
resolution: "@types/google.maps@npm:3.65.2"
|
||||
checksum: 10c0/790aed74128385bfa6c8b41c6bf18b8f1901e6c7b7c806615e904e9093703a8238f8b2504027ebe714e95f9cd5b2a94fd63306f8b71907a23ba24673754843ea
|
||||
version: 3.64.1
|
||||
resolution: "@types/google.maps@npm:3.64.1"
|
||||
checksum: 10c0/4ade621941045c7e1b1ead30e0b4025b7fccf2b4cfb7c9b5f48c31cceb964c74d17c28b6105be15b99df85c23e19b25415e9fd7bdd7b1d40b7000d22dbbb4e7e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -1895,7 +1909,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/node@npm:*":
|
||||
"@types/node@npm:*, @types/node@npm:>=12.12.47, @types/node@npm:>=13.7.0":
|
||||
version: 25.9.1
|
||||
resolution: "@types/node@npm:25.9.1"
|
||||
dependencies:
|
||||
@@ -1904,15 +1918,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/node@npm:>=12.12.47, @types/node@npm:>=13.7.0":
|
||||
version: 26.1.1
|
||||
resolution: "@types/node@npm:26.1.1"
|
||||
dependencies:
|
||||
undici-types: "npm:~8.3.0"
|
||||
checksum: 10c0/25ac5093195736dd074d5027adbba85617bc951d5a41506ebd3b9073048acb7233613f3822d5f9b9447f9c0841c91f6387c46283916767e3ef79f23917452c46
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/react-dom@npm:^19.0.0":
|
||||
version: 19.2.3
|
||||
resolution: "@types/react-dom@npm:19.2.3"
|
||||
@@ -2027,7 +2032,7 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "app@workspace:."
|
||||
dependencies:
|
||||
"@capacitor-firebase/authentication": "npm:^8.0.0"
|
||||
"@capacitor-firebase/authentication": "npm:^7.0.0"
|
||||
"@capacitor/android": "npm:8.3.4"
|
||||
"@capacitor/app": "npm:8.1.0"
|
||||
"@capacitor/cli": "npm:8.3.4"
|
||||
@@ -2036,14 +2041,12 @@ __metadata:
|
||||
"@capacitor/haptics": "npm:8.0.2"
|
||||
"@capacitor/ios": "npm:8.3.4"
|
||||
"@capacitor/keyboard": "npm:8.0.3"
|
||||
"@capacitor/preferences": "npm:^8.0.1"
|
||||
"@capacitor/push-notifications": "npm:^8.1.1"
|
||||
"@capacitor/status-bar": "npm:8.0.2"
|
||||
"@hookform/resolvers": "npm:^3.9.0"
|
||||
"@ionic/pwa-elements": "npm:^3.0.0"
|
||||
"@ionic/react": "npm:8.8.7"
|
||||
"@ionic/react-router": "npm:8.8.7"
|
||||
"@supabase/supabase-js": "npm:^2.108.1"
|
||||
"@ionic/react": "npm:^8.5.0"
|
||||
"@ionic/react-router": "npm:^8.5.0"
|
||||
"@supabase/supabase-js": "npm:^2.0.0"
|
||||
"@types/katex": "npm:^0.16.0"
|
||||
"@types/react": "npm:^19.0.0"
|
||||
"@types/react-dom": "npm:^19.0.0"
|
||||
@@ -2389,9 +2392,9 @@ __metadata:
|
||||
linkType: hard
|
||||
|
||||
"fast-equals@npm:^5.2.2":
|
||||
version: 5.4.1
|
||||
resolution: "fast-equals@npm:5.4.1"
|
||||
checksum: 10c0/18faf5894c39591d61e802b2f574cbc57d2ff2530c71b8cd4e2b4f3c250174002a9aa0b5f4d6f61073a9942a96d71bc7f36514a9b0dc9a2a5cc3395b2a910dbf
|
||||
version: 5.4.0
|
||||
resolution: "fast-equals@npm:5.4.0"
|
||||
checksum: 10c0/4fdce3a8f814e78af7296ca4ebe82f4765074a6dfe557ee98c18f5d2958c3de59025fbff7556d65f250165ccef424d37f9952ee159400f8ebe5f2edb704ec80e
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -2991,8 +2994,8 @@ __metadata:
|
||||
linkType: hard
|
||||
|
||||
"protobufjs@npm:^7.2.5":
|
||||
version: 7.6.5
|
||||
resolution: "protobufjs@npm:7.6.5"
|
||||
version: 7.6.1
|
||||
resolution: "protobufjs@npm:7.6.1"
|
||||
dependencies:
|
||||
"@protobufjs/aspromise": "npm:^1.1.2"
|
||||
"@protobufjs/base64": "npm:^1.1.2"
|
||||
@@ -3000,12 +3003,13 @@ __metadata:
|
||||
"@protobufjs/eventemitter": "npm:^1.1.1"
|
||||
"@protobufjs/fetch": "npm:^1.1.1"
|
||||
"@protobufjs/float": "npm:^1.0.2"
|
||||
"@protobufjs/inquire": "npm:^1.1.2"
|
||||
"@protobufjs/path": "npm:^1.1.2"
|
||||
"@protobufjs/pool": "npm:^1.1.0"
|
||||
"@protobufjs/utf8": "npm:^1.1.1"
|
||||
"@types/node": "npm:>=13.7.0"
|
||||
long: "npm:^5.3.2"
|
||||
checksum: 10c0/863eaca9c6f45bfcfb8787c545f53e9c6696507e328e3981b4643c12d35df7f2826021c10e3fd30bef342c13a8e9d306547bac9c0849ee3bf50f770a12f01dc5
|
||||
checksum: 10c0/364c6914facac19ace915e353f71c5d5996bfa8177a3a68c09bd2513a3ecf780538aca06cb3439237f50489db2fae321c4a4db60fd7f9ec65315b7ad66bea029
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -3489,13 +3493,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"undici-types@npm:~8.3.0":
|
||||
version: 8.3.0
|
||||
resolution: "undici-types@npm:8.3.0"
|
||||
checksum: 10c0/c8aa7e2fbebfce519654dafadc0ece59be888d2ccaf180fb4495da875e7b536d2456345c384069c7e6f3e9c9ab7435f074957da306f142343eee86ff8048855a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"undici@npm:^6.25.0":
|
||||
version: 6.25.0
|
||||
resolution: "undici@npm:6.25.0"
|
||||
@@ -3596,13 +3593,13 @@ __metadata:
|
||||
linkType: hard
|
||||
|
||||
"websocket-driver@npm:>=0.5.1":
|
||||
version: 0.7.5
|
||||
resolution: "websocket-driver@npm:0.7.5"
|
||||
version: 0.7.4
|
||||
resolution: "websocket-driver@npm:0.7.4"
|
||||
dependencies:
|
||||
http-parser-js: "npm:>=0.5.1"
|
||||
safe-buffer: "npm:>=5.1.0"
|
||||
websocket-extensions: "npm:>=0.1.1"
|
||||
checksum: 10c0/843a3c9f529ce07f2721829f70f62986247525ab22625e857b69da13dc90967bacfe57b85e196801b565cd797e309ddd5b06fa8435732e34e8a8ab6201d7abed
|
||||
checksum: 10c0/5f09547912b27bdc57bac17b7b6527d8993aa4ac8a2d10588bb74aebaf785fdcf64fea034aae0c359b7adff2044dd66f3d03866e4685571f81b13e548f9021f1
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@@ -3699,8 +3696,8 @@ __metadata:
|
||||
linkType: hard
|
||||
|
||||
"yargs@npm:^17.7.2":
|
||||
version: 17.7.3
|
||||
resolution: "yargs@npm:17.7.3"
|
||||
version: 17.7.2
|
||||
resolution: "yargs@npm:17.7.2"
|
||||
dependencies:
|
||||
cliui: "npm:^8.0.1"
|
||||
escalade: "npm:^3.1.1"
|
||||
@@ -3709,7 +3706,7 @@ __metadata:
|
||||
string-width: "npm:^4.2.3"
|
||||
y18n: "npm:^5.0.5"
|
||||
yargs-parser: "npm:^21.1.1"
|
||||
checksum: 10c0/7a28572f7e785a57886e34fdbddb9b28756dec552e1453d5f6e7cdd00ad8721a4e8c4321d33683f5e61cacb36ad43258adbb48396b71ec4ed14abee0fc0d0c1f
|
||||
checksum: 10c0/ccd7e723e61ad5965fffbb791366db689572b80cca80e0f96aad968dfff4156cd7cd1ad18607afe1046d8241e6fb2d6c08bf7fa7bfb5eaec818735d8feac8f05
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
||||
Reference in New Issue
Block a user