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"
|
namespace = "io.ionic.starter"
|
||||||
compileSdk = rootProject.ext.compileSdkVersion
|
compileSdk = rootProject.ext.compileSdkVersion
|
||||||
defaultConfig {
|
defaultConfig {
|
||||||
applicationId "io.shopkeep.app"
|
applicationId "io.ionic.starter"
|
||||||
minSdkVersion rootProject.ext.minSdkVersion
|
minSdkVersion rootProject.ext.minSdkVersion
|
||||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||||
versionCode 1
|
versionCode 1
|
||||||
|
|||||||
@@ -21,12 +21,6 @@
|
|||||||
<action android:name="android.intent.action.MAIN" />
|
<action android:name="android.intent.action.MAIN" />
|
||||||
<category android:name="android.intent.category.LAUNCHER" />
|
<category android:name="android.intent.category.LAUNCHER" />
|
||||||
</intent-filter>
|
</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="io.shopkeep.app" />
|
|
||||||
</intent-filter>
|
|
||||||
|
|
||||||
</activity>
|
</activity>
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<?xml version='1.0' encoding='utf-8'?>
|
<?xml version='1.0' encoding='utf-8'?>
|
||||||
<resources>
|
<resources>
|
||||||
<string name="app_name">ShopKeep</string>
|
<string name="app_name">PowerSlap</string>
|
||||||
<string name="title_activity_main">ShopKeep</string>
|
<string name="title_activity_main">PowerSlap</string>
|
||||||
<string name="package_name">io.ionic.starter</string>
|
<string name="package_name">io.ionic.starter</string>
|
||||||
<string name="custom_url_scheme">io.ionic.starter</string>
|
<string name="custom_url_scheme">io.ionic.starter</string>
|
||||||
</resources>
|
</resources>
|
||||||
|
|||||||
@@ -15,4 +15,5 @@ ext {
|
|||||||
cordovaAndroidVersion = '14.0.1'
|
cordovaAndroidVersion = '14.0.1'
|
||||||
rgcfaIncludeGoogle = true
|
rgcfaIncludeGoogle = true
|
||||||
androidxCredentialsVersion = '1.3.0'
|
androidxCredentialsVersion = '1.3.0'
|
||||||
|
javaVersion = JavaVersion.VERSION_17
|
||||||
}
|
}
|
||||||
+2
-2
@@ -1,8 +1,8 @@
|
|||||||
import type { CapacitorConfig } from '@capacitor/cli';
|
import type { CapacitorConfig } from '@capacitor/cli';
|
||||||
|
|
||||||
const config: CapacitorConfig = {
|
const config: CapacitorConfig = {
|
||||||
appId: 'io.shopkeep.app',
|
appId: 'io.powerslap.app',
|
||||||
appName: 'ShopKeep',
|
appName: 'PowerSlap',
|
||||||
webDir: 'dist',
|
webDir: 'dist',
|
||||||
plugins: {
|
plugins: {
|
||||||
FirebaseAuthentication: {
|
FirebaseAuthentication: {
|
||||||
|
|||||||
+27
-44
@@ -11,9 +11,6 @@ workflows:
|
|||||||
- $HOME/.gradle/caches
|
- $HOME/.gradle/caches
|
||||||
- $HOME/.gradle/wrapper
|
- $HOME/.gradle/wrapper
|
||||||
scripts:
|
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
|
- name: Strip unused scaffold packages
|
||||||
script: |
|
script: |
|
||||||
for pkg in "@capacitor/google-maps" "@capacitor/push-notifications" "@capacitor-firebase/authentication"; do
|
for pkg in "@capacitor/google-maps" "@capacitor/push-notifications" "@capacitor-firebase/authentication"; do
|
||||||
@@ -24,16 +21,10 @@ workflows:
|
|||||||
echo "Keeping $pkg (used in src/)"
|
echo "Keeping $pkg (used in src/)"
|
||||||
fi
|
fi
|
||||||
done
|
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
|
- name: Install dependencies
|
||||||
script: rm -f package-lock.json && npm install --legacy-peer-deps
|
script: rm -f package-lock.json && npm install --legacy-peer-deps
|
||||||
- name: Build web assets
|
- name: Build web assets
|
||||||
script: npm run build
|
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
|
- name: Write Firebase config
|
||||||
script: |
|
script: |
|
||||||
if [ -n "$GOOGLE_SERVICES_JSON" ]; then
|
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 "$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)"
|
echo "Wrote GoogleService-Info.plist ($(wc -c < ios/App/App/GoogleService-Info.plist) bytes)"
|
||||||
fi
|
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
|
- name: Capacitor sync
|
||||||
script: npx cap sync android
|
script: npx cap sync android
|
||||||
- name: Set up debug keystore
|
- name: Set up debug keystore
|
||||||
@@ -239,25 +228,26 @@ workflows:
|
|||||||
script: rm -f package-lock.json && npm install --legacy-peer-deps
|
script: rm -f package-lock.json && npm install --legacy-peer-deps
|
||||||
- name: Build web assets
|
- name: Build web assets
|
||||||
script: npm run build
|
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
|
- name: Capacitor sync
|
||||||
script: npx cap sync ios
|
script: npx cap sync ios
|
||||||
# Decode Firebase plist to disk so it is present during the second sync.
|
|
||||||
- name: Write Firebase config
|
- name: Write Firebase config
|
||||||
script: |
|
script: |
|
||||||
if [ -n "$GOOGLE_SERVICE_INFO_PLIST" ]; then
|
if [ -n "$GOOGLE_SERVICE_INFO_PLIST" ]; then
|
||||||
echo "$GOOGLE_SERVICE_INFO_PLIST" | base64 --decode > ios/App/App/GoogleService-Info.plist
|
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
|
fi
|
||||||
# Second sync ensures CapApp-SPM/Package.swift is consistent after the plist write.
|
|
||||||
- name: Capacitor sync
|
- name: Capacitor sync
|
||||||
script: npx cap sync ios
|
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
|
- name: Set up signing
|
||||||
script: |
|
script: |
|
||||||
keychain initialize
|
keychain initialize
|
||||||
@@ -282,23 +272,11 @@ workflows:
|
|||||||
echo "No signing credentials configured — build will fail at signing"
|
echo "No signing credentials configured — build will fail at signing"
|
||||||
exit 1
|
exit 1
|
||||||
fi
|
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
|
- name: Build IPA
|
||||||
script: |
|
script: |
|
||||||
xcode-project build-ipa \
|
xcode-project build-ipa \
|
||||||
--workspace ios/App/App.xcworkspace \
|
--project ios/App/App.xcodeproj \
|
||||||
--scheme App \
|
--scheme App
|
||||||
--no-show-build-settings \
|
|
||||||
--disable-xcpretty
|
|
||||||
artifacts:
|
artifacts:
|
||||||
- build/ios/ipa/*.ipa
|
- build/ios/ipa/*.ipa
|
||||||
|
|
||||||
@@ -326,15 +304,24 @@ workflows:
|
|||||||
script: npm run build
|
script: npm run build
|
||||||
- name: Capacitor sync
|
- name: Capacitor sync
|
||||||
script: npx cap sync ios
|
script: npx cap sync ios
|
||||||
- name: Configure Xcode project
|
- name: Write Firebase config
|
||||||
script: |
|
script: |
|
||||||
if [ -n "$GOOGLE_SERVICE_INFO_PLIST" ]; then
|
if [ -n "$GOOGLE_SERVICE_INFO_PLIST" ]; then
|
||||||
echo "$GOOGLE_SERVICE_INFO_PLIST" | base64 --decode > ios/App/App/GoogleService-Info.plist
|
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
|
fi
|
||||||
- name: Capacitor sync
|
- name: Capacitor sync
|
||||||
script: npx cap sync ios
|
script: npx cap sync ios
|
||||||
- name: Configure Xcode project
|
|
||||||
script: ruby configure_xcode.rb
|
|
||||||
- name: Set up signing
|
- name: Set up signing
|
||||||
script: |
|
script: |
|
||||||
keychain initialize
|
keychain initialize
|
||||||
@@ -356,16 +343,12 @@ workflows:
|
|||||||
echo "$CM_PROVISIONING_PROFILE" | base64 --decode > "$HOME/Library/MobileDevice/Provisioning Profiles/profile.mobileprovision"
|
echo "$CM_PROVISIONING_PROFILE" | base64 --decode > "$HOME/Library/MobileDevice/Provisioning Profiles/profile.mobileprovision"
|
||||||
xcode-project use-profiles
|
xcode-project use-profiles
|
||||||
fi
|
fi
|
||||||
# See ios-debug Build IPA comments for --workspace, --no-show-build-settings,
|
|
||||||
# and --disable-xcpretty rationale — same reasons apply here.
|
|
||||||
- name: Build IPA
|
- name: Build IPA
|
||||||
script: |
|
script: |
|
||||||
xcode-project build-ipa \
|
xcode-project build-ipa \
|
||||||
--workspace ios/App/App.xcworkspace \
|
--project ios/App/App.xcodeproj \
|
||||||
--scheme App \
|
--scheme App \
|
||||||
--config Release \
|
--config Release
|
||||||
--no-show-build-settings \
|
|
||||||
--disable-xcpretty
|
|
||||||
- name: Publish
|
- name: Publish
|
||||||
script: |
|
script: |
|
||||||
if [ "$SUBMIT_TO_TESTFLIGHT" = "true" ] || [ "$SUBMIT_TO_APP_STORE" = "true" ]; then
|
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>"; };
|
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>"; };
|
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>"; };
|
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>"; };
|
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; };
|
958DCC722DB07C7200EA8C5F /* debug.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = debug.xcconfig; path = ../debug.xcconfig; sourceTree = SOURCE_ROOT; };
|
||||||
/* End PBXFileReference section */
|
/* End PBXFileReference section */
|
||||||
@@ -69,7 +68,6 @@
|
|||||||
504EC30E1FED79650016851F /* Assets.xcassets */,
|
504EC30E1FED79650016851F /* Assets.xcassets */,
|
||||||
504EC3101FED79650016851F /* LaunchScreen.storyboard */,
|
504EC3101FED79650016851F /* LaunchScreen.storyboard */,
|
||||||
504EC3131FED79650016851F /* Info.plist */,
|
504EC3131FED79650016851F /* Info.plist */,
|
||||||
1A4EB3C21FED79650016851F /* App.entitlements */,
|
|
||||||
2FAD9762203C412B000D30F8 /* config.xml */,
|
2FAD9762203C412B000D30F8 /* config.xml */,
|
||||||
50B271D01FEDC1A000F3C39B /* public */,
|
50B271D01FEDC1A000F3C39B /* public */,
|
||||||
);
|
);
|
||||||
@@ -297,7 +295,6 @@
|
|||||||
baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
|
baseConfigurationReference = 958DCC722DB07C7200EA8C5F /* debug.xcconfig */;
|
||||||
buildSettings = {
|
buildSettings = {
|
||||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||||
CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
|
|
||||||
CODE_SIGN_STYLE = Automatic;
|
CODE_SIGN_STYLE = Automatic;
|
||||||
CURRENT_PROJECT_VERSION = 1;
|
CURRENT_PROJECT_VERSION = 1;
|
||||||
INFOPLIST_FILE = App/Info.plist;
|
INFOPLIST_FILE = App/Info.plist;
|
||||||
@@ -308,7 +305,7 @@
|
|||||||
);
|
);
|
||||||
MARKETING_VERSION = 1.0;
|
MARKETING_VERSION = 1.0;
|
||||||
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
|
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
|
||||||
PRODUCT_BUNDLE_IDENTIFIER = io.shopkeep.app;
|
PRODUCT_BUNDLE_IDENTIFIER = io.powerslap.app;
|
||||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
|
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
|
||||||
SWIFT_VERSION = 5.0;
|
SWIFT_VERSION = 5.0;
|
||||||
@@ -320,7 +317,6 @@
|
|||||||
isa = XCBuildConfiguration;
|
isa = XCBuildConfiguration;
|
||||||
buildSettings = {
|
buildSettings = {
|
||||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||||
CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
|
|
||||||
CODE_SIGN_STYLE = Automatic;
|
CODE_SIGN_STYLE = Automatic;
|
||||||
CURRENT_PROJECT_VERSION = 1;
|
CURRENT_PROJECT_VERSION = 1;
|
||||||
INFOPLIST_FILE = App/Info.plist;
|
INFOPLIST_FILE = App/Info.plist;
|
||||||
@@ -330,7 +326,7 @@
|
|||||||
"@executable_path/Frameworks",
|
"@executable_path/Frameworks",
|
||||||
);
|
);
|
||||||
MARKETING_VERSION = 1.0;
|
MARKETING_VERSION = 1.0;
|
||||||
PRODUCT_BUNDLE_IDENTIFIER = io.shopkeep.app;
|
PRODUCT_BUNDLE_IDENTIFIER = io.powerslap.app;
|
||||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||||
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
|
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
|
||||||
SWIFT_VERSION = 5.0;
|
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>
|
<key>CFBundleDevelopmentRegion</key>
|
||||||
<string>en</string>
|
<string>en</string>
|
||||||
<key>CFBundleDisplayName</key>
|
<key>CFBundleDisplayName</key>
|
||||||
<string>ShopKeep</string>
|
<string>PowerSlap</string>
|
||||||
<key>CFBundleExecutable</key>
|
<key>CFBundleExecutable</key>
|
||||||
<string>$(EXECUTABLE_NAME)</string>
|
<string>$(EXECUTABLE_NAME)</string>
|
||||||
<key>CFBundleIdentifier</key>
|
<key>CFBundleIdentifier</key>
|
||||||
@@ -51,10 +51,10 @@
|
|||||||
<array>
|
<array>
|
||||||
<dict>
|
<dict>
|
||||||
<key>CFBundleURLName</key>
|
<key>CFBundleURLName</key>
|
||||||
<string>io.shopkeep.app</string>
|
<string>io.powerslap.app</string>
|
||||||
<key>CFBundleURLSchemes</key>
|
<key>CFBundleURLSchemes</key>
|
||||||
<array>
|
<array>
|
||||||
<string>io.shopkeep.app</string>
|
<string>io.powerslap.app</string>
|
||||||
</array>
|
</array>
|
||||||
</dict>
|
</dict>
|
||||||
</array>
|
</array>
|
||||||
|
|||||||
+3
-4
@@ -10,7 +10,7 @@
|
|||||||
"lint": "eslint"
|
"lint": "eslint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@capacitor-firebase/authentication": "^8.0.0",
|
"@capacitor-firebase/authentication": "^7.0.0",
|
||||||
"@capacitor/android": "8.3.4",
|
"@capacitor/android": "8.3.4",
|
||||||
"@capacitor/app": "8.1.0",
|
"@capacitor/app": "8.1.0",
|
||||||
"@capacitor/core": "8.3.4",
|
"@capacitor/core": "8.3.4",
|
||||||
@@ -20,10 +20,9 @@
|
|||||||
"@capacitor/keyboard": "8.0.3",
|
"@capacitor/keyboard": "8.0.3",
|
||||||
"@capacitor/push-notifications": "^8.1.1",
|
"@capacitor/push-notifications": "^8.1.1",
|
||||||
"@capacitor/status-bar": "8.0.2",
|
"@capacitor/status-bar": "8.0.2",
|
||||||
"@hookform/resolvers": "^3.9.0",
|
|
||||||
"@ionic/pwa-elements": "^3.0.0",
|
"@ionic/pwa-elements": "^3.0.0",
|
||||||
"@ionic/react": "8.8.7",
|
"@ionic/react": "^8.5.0",
|
||||||
"@ionic/react-router": "8.8.7",
|
"@ionic/react-router": "^8.5.0",
|
||||||
"@supabase/supabase-js": "^2.0.0",
|
"@supabase/supabase-js": "^2.0.0",
|
||||||
"firebase": "^11.0.0",
|
"firebase": "^11.0.0",
|
||||||
"ionicons": "^7.4.0",
|
"ionicons": "^7.4.0",
|
||||||
|
|||||||
Vendored
BIN
Binary file not shown.
+19
-142
@@ -1,155 +1,32 @@
|
|||||||
import React, { useEffect } from 'react';
|
import React from "react";
|
||||||
import { Redirect, Route } from 'react-router-dom';
|
import { Redirect, Route } from "react-router-dom";
|
||||||
import {
|
import { IonApp, IonRouterOutlet } from "@ionic/react";
|
||||||
IonApp,
|
import { IonReactRouter } from "@ionic/react-router";
|
||||||
IonRouterOutlet,
|
|
||||||
IonTabs,
|
|
||||||
IonTabBar,
|
|
||||||
IonTabButton,
|
|
||||||
IonIcon,
|
|
||||||
IonLabel,
|
|
||||||
setupIonicReact,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { IonReactRouter } from '@ionic/react-router';
|
|
||||||
import {
|
|
||||||
homeOutline,
|
|
||||||
peopleOutline,
|
|
||||||
receiptOutline,
|
|
||||||
home,
|
|
||||||
people,
|
|
||||||
receipt,
|
|
||||||
} from 'ionicons/icons';
|
|
||||||
|
|
||||||
import Home from './pages/Home';
|
import "@ionic/react/css/core.css";
|
||||||
import CustomersPage from './pages/CustomersPage';
|
import "@ionic/react/css/normalize.css";
|
||||||
import CustomerDetailPage from './pages/CustomerDetailPage';
|
import "@ionic/react/css/structure.css";
|
||||||
import HistoryPage from './pages/HistoryPage';
|
import "@ionic/react/css/typography.css";
|
||||||
import SaleFormPage from './pages/SaleFormPage';
|
import "@ionic/react/css/padding.css";
|
||||||
import CreditFormPage from './pages/CreditFormPage';
|
import "@ionic/react/css/float-elements.css";
|
||||||
import RepaymentFormPage from './pages/RepaymentFormPage';
|
import "@ionic/react/css/text-alignment.css";
|
||||||
import AuthPage from './pages/AuthPage';
|
import "@ionic/react/css/text-transformation.css";
|
||||||
import VerifyEmailPage from './pages/VerifyEmailPage';
|
import "@ionic/react/css/flex-utils.css";
|
||||||
import ForgotPasswordPage from './pages/ForgotPasswordPage';
|
import "@ionic/react/css/display.css";
|
||||||
import NewPasswordPage from './pages/NewPasswordPage';
|
|
||||||
|
|
||||||
import { AuthProvider } from './contexts/AuthContext';
|
import "./theme/variables.css";
|
||||||
import ProtectedRoute from './components/ProtectedRoute';
|
|
||||||
import { setStatusBarStyle, Style } from './utils/statusBar';
|
|
||||||
|
|
||||||
/* Core CSS required for Ionic components to work properly */
|
import Home from "./pages/Home";
|
||||||
import '@ionic/react/css/core.css';
|
|
||||||
|
|
||||||
/* Basic CSS for apps built with Ionic */
|
const App: React.FC = () => (
|
||||||
import '@ionic/react/css/normalize.css';
|
|
||||||
import '@ionic/react/css/structure.css';
|
|
||||||
import '@ionic/react/css/typography.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';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ionic Dark Mode
|
|
||||||
* -----------------------------------------------------
|
|
||||||
* For more info, please see:
|
|
||||||
* https://ionicframework.com/docs/theming/dark-mode
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* import '@ionic/react/css/palettes/dark.always.css'; */
|
|
||||||
/* import '@ionic/react/css/palettes/dark.class.css'; */
|
|
||||||
import '@ionic/react/css/palettes/dark.system.css';
|
|
||||||
|
|
||||||
/* Theme variables */
|
|
||||||
import './theme/variables.css';
|
|
||||||
|
|
||||||
setupIonicReact();
|
|
||||||
|
|
||||||
const App: React.FC = () => {
|
|
||||||
useEffect(() => {
|
|
||||||
// Set status bar to light icons on our dark-ish backgrounds
|
|
||||||
setStatusBarStyle(Style.Dark);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonApp>
|
<IonApp>
|
||||||
<AuthProvider>
|
|
||||||
<IonReactRouter>
|
<IonReactRouter>
|
||||||
<IonRouterOutlet>
|
<IonRouterOutlet>
|
||||||
{/* Auth Routes */}
|
<Route path="/home" component={Home} exact />
|
||||||
<Route path="/auth" component={AuthPage} exact />
|
<Redirect exact from="/" to="/home" />
|
||||||
<Route path="/verify-email" component={VerifyEmailPage} exact />
|
|
||||||
<Route
|
|
||||||
path="/forgot-password"
|
|
||||||
component={ForgotPasswordPage}
|
|
||||||
exact
|
|
||||||
/>
|
|
||||||
<Route path="/new-password" component={NewPasswordPage} exact />
|
|
||||||
|
|
||||||
{/* Protected Form & Detail Routes (Outer Outlet for push/pop animation) */}
|
|
||||||
<ProtectedRoute path="/sale/new" component={SaleFormPage} exact />
|
|
||||||
<ProtectedRoute
|
|
||||||
path="/credit/new"
|
|
||||||
component={CreditFormPage}
|
|
||||||
exact
|
|
||||||
/>
|
|
||||||
<ProtectedRoute
|
|
||||||
path="/repayment/new"
|
|
||||||
component={RepaymentFormPage}
|
|
||||||
exact
|
|
||||||
/>
|
|
||||||
<ProtectedRoute
|
|
||||||
path="/customers/:id([0-9a-fA-F-]{36})"
|
|
||||||
component={CustomerDetailPage}
|
|
||||||
exact
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Tab Shell */}
|
|
||||||
<Route
|
|
||||||
path={['/home', '/customers', '/history']}
|
|
||||||
render={() => (
|
|
||||||
<IonTabs>
|
|
||||||
<IonRouterOutlet>
|
|
||||||
<ProtectedRoute path="/home" component={Home} exact />
|
|
||||||
<ProtectedRoute
|
|
||||||
path="/customers"
|
|
||||||
component={CustomersPage}
|
|
||||||
exact
|
|
||||||
/>
|
|
||||||
<ProtectedRoute
|
|
||||||
path="/history"
|
|
||||||
component={HistoryPage}
|
|
||||||
exact
|
|
||||||
/>
|
|
||||||
</IonRouterOutlet>
|
|
||||||
<IonTabBar slot="bottom">
|
|
||||||
<IonTabButton tab="home" href="/home">
|
|
||||||
<IonIcon icon={homeOutline} />
|
|
||||||
<IonLabel>Home</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
<IonTabButton tab="customers" href="/customers">
|
|
||||||
<IonIcon icon={peopleOutline} />
|
|
||||||
<IonLabel>Customers</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
<IonTabButton tab="history" href="/history">
|
|
||||||
<IonIcon icon={receiptOutline} />
|
|
||||||
<IonLabel>History</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
</IonTabBar>
|
|
||||||
</IonTabs>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Root Redirect */}
|
|
||||||
<Route exact path="/" render={() => <Redirect to="/home" />} />
|
|
||||||
</IonRouterOutlet>
|
</IonRouterOutlet>
|
||||||
</IonReactRouter>
|
</IonReactRouter>
|
||||||
</AuthProvider>
|
|
||||||
</IonApp>
|
</IonApp>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@@ -1,130 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { IonIcon, IonItem, IonLabel, IonNote } from '@ionic/react';
|
|
||||||
import {
|
|
||||||
receiptOutline,
|
|
||||||
personAddOutline,
|
|
||||||
cashOutline,
|
|
||||||
chevronForwardOutline,
|
|
||||||
} from 'ionicons/icons';
|
|
||||||
import { formatMoney } from '../utils/money';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { formatDisplayDate } from '../utils/dates';
|
|
||||||
|
|
||||||
export type ActivityType = 'sale' | 'credit' | 'repayment';
|
|
||||||
|
|
||||||
export interface ActivityItem {
|
|
||||||
id: string;
|
|
||||||
type: ActivityType;
|
|
||||||
amount: number;
|
|
||||||
date: string;
|
|
||||||
customerName?: string;
|
|
||||||
note?: string;
|
|
||||||
customerId?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ActivityRowProps {
|
|
||||||
item: ActivityItem;
|
|
||||||
onClick?: () => void;
|
|
||||||
showDate?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ActivityRow: React.FC<ActivityRowProps> = ({
|
|
||||||
item,
|
|
||||||
onClick,
|
|
||||||
showDate = false,
|
|
||||||
}) => {
|
|
||||||
const { profile } = useAuth();
|
|
||||||
const currency = profile?.currency || 'USD';
|
|
||||||
|
|
||||||
const getIcon = () => {
|
|
||||||
switch (item.type) {
|
|
||||||
case 'sale':
|
|
||||||
return receiptOutline;
|
|
||||||
case 'credit':
|
|
||||||
return personAddOutline;
|
|
||||||
case 'repayment':
|
|
||||||
return cashOutline;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getTitle = () => {
|
|
||||||
switch (item.type) {
|
|
||||||
case 'sale':
|
|
||||||
return 'Cash Sale';
|
|
||||||
case 'credit':
|
|
||||||
return `Credit: ${item.customerName || 'Customer'}`;
|
|
||||||
case 'repayment':
|
|
||||||
return `Repayment: ${item.customerName || 'Customer'}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getAmountColor = () => {
|
|
||||||
switch (item.type) {
|
|
||||||
case 'sale':
|
|
||||||
return 'var(--color-text-primary)';
|
|
||||||
case 'credit':
|
|
||||||
return 'var(--ion-color-primary)';
|
|
||||||
case 'repayment':
|
|
||||||
return 'var(--ion-color-success)';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonItem
|
|
||||||
lines="none"
|
|
||||||
onClick={onClick}
|
|
||||||
detail={false}
|
|
||||||
style={{
|
|
||||||
'--background': 'transparent',
|
|
||||||
'--padding-start': '0',
|
|
||||||
'--padding-end': '0',
|
|
||||||
'--inner-padding-end': '0',
|
|
||||||
cursor: onClick ? 'pointer' : 'default',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="icon-container"
|
|
||||||
slot="start"
|
|
||||||
style={{ marginRight: '12px' }}
|
|
||||||
>
|
|
||||||
<IonIcon icon={getIcon()} />
|
|
||||||
</div>
|
|
||||||
<IonLabel>
|
|
||||||
<h3 className="semibold" style={{ margin: '0', fontSize: '15px' }}>
|
|
||||||
{getTitle()}
|
|
||||||
</h3>
|
|
||||||
<p className="secondary-text" style={{ margin: '2px 0 0 0' }}>
|
|
||||||
{showDate ? formatDisplayDate(item.date) : item.note || 'No notes'}
|
|
||||||
</p>
|
|
||||||
</IonLabel>
|
|
||||||
<div
|
|
||||||
slot="end"
|
|
||||||
style={{ textAlign: 'right', display: 'flex', alignItems: 'center' }}
|
|
||||||
>
|
|
||||||
<IonNote
|
|
||||||
className="tabular"
|
|
||||||
style={{
|
|
||||||
fontSize: '15px',
|
|
||||||
color: getAmountColor(),
|
|
||||||
fontWeight: '400',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item.type === 'credit' ? '-' : '+'}
|
|
||||||
{formatMoney(item.amount, currency)}
|
|
||||||
</IonNote>
|
|
||||||
{onClick && (
|
|
||||||
<IonIcon
|
|
||||||
icon={chevronForwardOutline}
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
marginLeft: '8px',
|
|
||||||
color: 'var(--color-text-tertiary)',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</IonItem>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ActivityRow;
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { IonIcon, IonItem, IonLabel, IonNote } from '@ionic/react';
|
|
||||||
import { chevronForwardOutline } from 'ionicons/icons';
|
|
||||||
import { formatMoney } from '../utils/money';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
|
|
||||||
interface CustomerRowProps {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
balance: number;
|
|
||||||
phone?: string;
|
|
||||||
onClick: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomerRow: React.FC<CustomerRowProps> = ({
|
|
||||||
id,
|
|
||||||
name,
|
|
||||||
balance,
|
|
||||||
phone,
|
|
||||||
onClick,
|
|
||||||
}) => {
|
|
||||||
const { profile } = useAuth();
|
|
||||||
const currency = profile?.currency || 'USD';
|
|
||||||
|
|
||||||
const getInitials = (name: string) => {
|
|
||||||
return name
|
|
||||||
.split(' ')
|
|
||||||
.map((n) => n[0])
|
|
||||||
.join('')
|
|
||||||
.toUpperCase()
|
|
||||||
.slice(0, 2);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonItem
|
|
||||||
lines="none"
|
|
||||||
onClick={onClick}
|
|
||||||
detail={false}
|
|
||||||
style={{
|
|
||||||
'--background': 'transparent',
|
|
||||||
'--padding-start': '0',
|
|
||||||
'--padding-end': '0',
|
|
||||||
'--inner-padding-end': '0',
|
|
||||||
cursor: 'pointer',
|
|
||||||
marginBottom: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="icon-container bold"
|
|
||||||
slot="start"
|
|
||||||
style={{
|
|
||||||
marginRight: '16px',
|
|
||||||
width: '44px',
|
|
||||||
height: '44px',
|
|
||||||
fontSize: '14px',
|
|
||||||
color: 'var(--ion-color-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{getInitials(name)}
|
|
||||||
</div>
|
|
||||||
<IonLabel>
|
|
||||||
<h3 className="semibold" style={{ margin: '0', fontSize: '16px' }}>
|
|
||||||
{name}
|
|
||||||
</h3>
|
|
||||||
{phone && (
|
|
||||||
<p className="secondary-text" style={{ margin: '2px 0 0 0' }}>
|
|
||||||
{phone}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</IonLabel>
|
|
||||||
<div
|
|
||||||
slot="end"
|
|
||||||
style={{ textAlign: 'right', display: 'flex', alignItems: 'center' }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'flex-end',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonNote
|
|
||||||
className="tabular"
|
|
||||||
style={{
|
|
||||||
fontSize: '16px',
|
|
||||||
color:
|
|
||||||
balance > 0
|
|
||||||
? 'var(--ion-color-danger)'
|
|
||||||
: 'var(--ion-color-success)',
|
|
||||||
fontWeight: '400',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{formatMoney(balance, currency)}
|
|
||||||
</IonNote>
|
|
||||||
<span
|
|
||||||
className="tertiary-text"
|
|
||||||
style={{ fontSize: '10px', marginTop: '2px' }}
|
|
||||||
>
|
|
||||||
{balance > 0 ? 'OUTSTANDING' : 'CLEARED'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<IonIcon
|
|
||||||
icon={chevronForwardOutline}
|
|
||||||
style={{
|
|
||||||
fontSize: '16px',
|
|
||||||
marginLeft: '12px',
|
|
||||||
color: 'var(--color-text-tertiary)',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</IonItem>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CustomerRow;
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { IonIcon, IonButton } from '@ionic/react';
|
|
||||||
|
|
||||||
interface EmptyStateProps {
|
|
||||||
icon: string;
|
|
||||||
title: string;
|
|
||||||
description?: string;
|
|
||||||
actionText?: string;
|
|
||||||
onAction?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const EmptyState: React.FC<EmptyStateProps> = ({
|
|
||||||
icon,
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
actionText,
|
|
||||||
onAction,
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="widget-card"
|
|
||||||
style={{
|
|
||||||
padding: '40px 20px',
|
|
||||||
alignItems: 'center',
|
|
||||||
textAlign: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="icon-container"
|
|
||||||
style={{
|
|
||||||
width: '64px',
|
|
||||||
height: '64px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
marginBottom: '20px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
color: 'var(--color-text-tertiary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon icon={icon} style={{ fontSize: '32px' }} />
|
|
||||||
</div>
|
|
||||||
<h3
|
|
||||||
style={{
|
|
||||||
margin: '0 0 8px 0',
|
|
||||||
fontSize: '18px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</h3>
|
|
||||||
{description && (
|
|
||||||
<p
|
|
||||||
className="secondary-text"
|
|
||||||
style={{ margin: '0 0 24px 0', maxWidth: '240px' }}
|
|
||||||
>
|
|
||||||
{description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
{actionText && onAction && (
|
|
||||||
<IonButton
|
|
||||||
onClick={onAction}
|
|
||||||
shape="round"
|
|
||||||
fill="solid"
|
|
||||||
style={{
|
|
||||||
height: '44px',
|
|
||||||
'--border-radius': '999px',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '700',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{actionText}
|
|
||||||
</IonButton>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EmptyState;
|
|
||||||
@@ -1,99 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { IonIcon } from '@ionic/react';
|
|
||||||
import { formatMoney } from '../utils/money';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
|
|
||||||
interface MetricCardProps {
|
|
||||||
label: string;
|
|
||||||
value: number;
|
|
||||||
icon?: string;
|
|
||||||
subtitle?: string;
|
|
||||||
fullWidth?: boolean;
|
|
||||||
loading?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const MetricCard: React.FC<MetricCardProps> = ({
|
|
||||||
label,
|
|
||||||
value,
|
|
||||||
icon,
|
|
||||||
subtitle,
|
|
||||||
fullWidth = false,
|
|
||||||
loading = false,
|
|
||||||
}) => {
|
|
||||||
const { profile } = useAuth();
|
|
||||||
const currency = profile?.currency || 'USD';
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="widget-card"
|
|
||||||
style={{
|
|
||||||
width: fullWidth ? '100%' : 'auto',
|
|
||||||
minHeight: fullWidth ? '160px' : '100px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="skeleton-text"
|
|
||||||
style={{
|
|
||||||
width: '40%',
|
|
||||||
height: '12px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
marginBottom: '12px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
className="skeleton-text"
|
|
||||||
style={{
|
|
||||||
width: '70%',
|
|
||||||
height: '32px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
borderRadius: '8px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="widget-card"
|
|
||||||
style={{
|
|
||||||
width: fullWidth ? '100%' : 'auto',
|
|
||||||
minHeight: fullWidth ? '160px' : '100px',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'flex-start',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<span className="tertiary-text">{label}</span>
|
|
||||||
<div
|
|
||||||
className="tabular"
|
|
||||||
style={{
|
|
||||||
fontSize: fullWidth ? '34px' : '24px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
marginTop: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{formatMoney(value, currency)}
|
|
||||||
</div>
|
|
||||||
{subtitle && <div className="secondary-text">{subtitle}</div>}
|
|
||||||
</div>
|
|
||||||
{icon && (
|
|
||||||
<div className="icon-container">
|
|
||||||
<IonIcon icon={icon} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MetricCard;
|
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { IonInput, IonLabel } from '@ionic/react';
|
|
||||||
import { sanitizeMoneyInput, getCurrencySymbol } from '../utils/money';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
|
|
||||||
interface MoneyInputProps {
|
|
||||||
value: string;
|
|
||||||
onValueChange: (value: string) => void;
|
|
||||||
label?: string;
|
|
||||||
placeholder?: string;
|
|
||||||
error?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const MoneyInput: React.FC<MoneyInputProps> = ({
|
|
||||||
value,
|
|
||||||
onValueChange,
|
|
||||||
label,
|
|
||||||
placeholder = '0.00',
|
|
||||||
error,
|
|
||||||
}) => {
|
|
||||||
const { profile } = useAuth();
|
|
||||||
const symbol = getCurrencySymbol(profile?.currency || 'USD');
|
|
||||||
|
|
||||||
const handleChange = (e: CustomEvent) => {
|
|
||||||
const rawValue = e.detail.value || '';
|
|
||||||
const sanitized = sanitizeMoneyInput(rawValue);
|
|
||||||
onValueChange(sanitized);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="money-input-container">
|
|
||||||
{label && (
|
|
||||||
<IonLabel
|
|
||||||
position="stacked"
|
|
||||||
className="semibold"
|
|
||||||
style={{ marginBottom: '8px', display: 'block', fontSize: '13px' }}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</IonLabel>
|
|
||||||
)}
|
|
||||||
<div
|
|
||||||
className="input-wrapper"
|
|
||||||
style={{
|
|
||||||
border: error ? '1px solid var(--ion-color-danger)' : 'none',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
marginRight: '8px',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
fontSize: '18px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{symbol}
|
|
||||||
</span>
|
|
||||||
<IonInput
|
|
||||||
type="text"
|
|
||||||
inputMode="decimal"
|
|
||||||
value={value}
|
|
||||||
placeholder={placeholder}
|
|
||||||
onIonChange={handleChange}
|
|
||||||
style={{
|
|
||||||
fontSize: '20px',
|
|
||||||
fontWeight: '700',
|
|
||||||
'--padding-top': '0',
|
|
||||||
'--padding-bottom': '0',
|
|
||||||
}}
|
|
||||||
className="tabular"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{error && (
|
|
||||||
<IonLabel
|
|
||||||
color="danger"
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
marginTop: '4px',
|
|
||||||
display: 'block',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</IonLabel>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MoneyInput;
|
|
||||||
@@ -1,27 +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, loading } = useAuth();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Route
|
|
||||||
{...rest}
|
|
||||||
render={(props) => {
|
|
||||||
if (loading) return null; // AuthProvider already handles spinner, but double safety
|
|
||||||
|
|
||||||
return user ? <Component {...props} /> : <Redirect to="/auth" />;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProtectedRoute;
|
|
||||||
@@ -1,169 +0,0 @@
|
|||||||
import React, {
|
|
||||||
createContext,
|
|
||||||
useCallback,
|
|
||||||
useContext,
|
|
||||||
useEffect,
|
|
||||||
useState,
|
|
||||||
} from 'react';
|
|
||||||
import { User } from '@supabase/supabase-js';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { Database } from '../database.types';
|
|
||||||
import { IonSpinner } from '@ionic/react';
|
|
||||||
|
|
||||||
type Profile = Database['public']['Tables']['profiles']['Row'];
|
|
||||||
|
|
||||||
interface AuthContextType {
|
|
||||||
user: User | null;
|
|
||||||
profile: Profile | null;
|
|
||||||
loading: boolean;
|
|
||||||
refreshProfile: () => Promise<void>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
|
||||||
|
|
||||||
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
|
|
||||||
children,
|
|
||||||
}) => {
|
|
||||||
const [user, setUser] = useState<User | null>(null);
|
|
||||||
const [profile, setProfile] = useState<Profile | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
|
|
||||||
const fetchProfile = useCallback(async (currentUser: User) => {
|
|
||||||
try {
|
|
||||||
const fallbackProfile = {
|
|
||||||
id: currentUser.id,
|
|
||||||
full_name:
|
|
||||||
typeof currentUser.user_metadata?.full_name === 'string'
|
|
||||||
? currentUser.user_metadata.full_name
|
|
||||||
: '',
|
|
||||||
shop_name: 'My Shop',
|
|
||||||
currency: 'USD',
|
|
||||||
};
|
|
||||||
|
|
||||||
const { data, error } = await supabase
|
|
||||||
.from('profiles')
|
|
||||||
.upsert(fallbackProfile, { onConflict: 'id', ignoreDuplicates: true })
|
|
||||||
.select('*')
|
|
||||||
.single();
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
console.error('Error fetching profile:', error);
|
|
||||||
setProfile({
|
|
||||||
...fallbackProfile,
|
|
||||||
created_at: new Date().toISOString(),
|
|
||||||
updated_at: new Date().toISOString(),
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setProfile(data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching profile:', err);
|
|
||||||
setProfile(null);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const refreshProfile = async () => {
|
|
||||||
if (user) {
|
|
||||||
await fetchProfile(user);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let mounted = true;
|
|
||||||
|
|
||||||
const initialiseSession = async () => {
|
|
||||||
const timeout = window.setTimeout(() => {
|
|
||||||
if (mounted) {
|
|
||||||
console.warn('Auth initialisation timed out; showing app shell.');
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, 8000);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const {
|
|
||||||
data: { session },
|
|
||||||
error,
|
|
||||||
} = await supabase.auth.getSession();
|
|
||||||
|
|
||||||
if (!mounted) return;
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
console.error('Error restoring auth session:', error);
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentUser = session?.user ?? null;
|
|
||||||
setUser(currentUser);
|
|
||||||
|
|
||||||
if (currentUser) {
|
|
||||||
await fetchProfile(currentUser);
|
|
||||||
} else {
|
|
||||||
setProfile(null);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error restoring auth session:', err);
|
|
||||||
if (mounted) {
|
|
||||||
setUser(null);
|
|
||||||
setProfile(null);
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
window.clearTimeout(timeout);
|
|
||||||
if (mounted) {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
void initialiseSession();
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: { subscription },
|
|
||||||
} = supabase.auth.onAuthStateChange((_event, session) => {
|
|
||||||
const currentUser = session?.user ?? null;
|
|
||||||
setUser(currentUser);
|
|
||||||
|
|
||||||
if (currentUser) {
|
|
||||||
void fetchProfile(currentUser);
|
|
||||||
} else {
|
|
||||||
setProfile(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
mounted = false;
|
|
||||||
subscription.unsubscribe();
|
|
||||||
};
|
|
||||||
}, [fetchProfile]);
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
height: '100vh',
|
|
||||||
background: 'var(--color-bg, #f0f4ff)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonSpinner name="crescent" color="primary" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AuthContext.Provider value={{ user, profile, loading, refreshProfile }}>
|
|
||||||
{children}
|
|
||||||
</AuthContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useAuth = () => {
|
|
||||||
const context = useContext(AuthContext);
|
|
||||||
if (context === undefined) {
|
|
||||||
throw new Error('useAuth must be used within an AuthProvider');
|
|
||||||
}
|
|
||||||
return context;
|
|
||||||
};
|
|
||||||
@@ -1,323 +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: {
|
|
||||||
credit_customers: {
|
|
||||||
Row: {
|
|
||||||
created_at: string
|
|
||||||
id: string
|
|
||||||
name: string
|
|
||||||
notes: string | null
|
|
||||||
phone: string | null
|
|
||||||
updated_at: string
|
|
||||||
user_id: string
|
|
||||||
}
|
|
||||||
Insert: {
|
|
||||||
created_at?: string
|
|
||||||
id?: string
|
|
||||||
name: string
|
|
||||||
notes?: string | null
|
|
||||||
phone?: string | null
|
|
||||||
updated_at?: string
|
|
||||||
user_id: string
|
|
||||||
}
|
|
||||||
Update: {
|
|
||||||
created_at?: string
|
|
||||||
id?: string
|
|
||||||
name?: string
|
|
||||||
notes?: string | null
|
|
||||||
phone?: string | null
|
|
||||||
updated_at?: string
|
|
||||||
user_id?: string
|
|
||||||
}
|
|
||||||
Relationships: []
|
|
||||||
}
|
|
||||||
credits: {
|
|
||||||
Row: {
|
|
||||||
amount: number
|
|
||||||
created_at: string
|
|
||||||
credit_date: string
|
|
||||||
customer_id: string
|
|
||||||
description: string | null
|
|
||||||
id: string
|
|
||||||
updated_at: string
|
|
||||||
user_id: string
|
|
||||||
}
|
|
||||||
Insert: {
|
|
||||||
amount: number
|
|
||||||
created_at?: string
|
|
||||||
credit_date?: string
|
|
||||||
customer_id: string
|
|
||||||
description?: string | null
|
|
||||||
id?: string
|
|
||||||
updated_at?: string
|
|
||||||
user_id: string
|
|
||||||
}
|
|
||||||
Update: {
|
|
||||||
amount?: number
|
|
||||||
created_at?: string
|
|
||||||
credit_date?: string
|
|
||||||
customer_id?: string
|
|
||||||
description?: string | null
|
|
||||||
id?: string
|
|
||||||
updated_at?: string
|
|
||||||
user_id?: string
|
|
||||||
}
|
|
||||||
Relationships: [
|
|
||||||
{
|
|
||||||
foreignKeyName: "credits_customer_id_fkey"
|
|
||||||
columns: ["customer_id"]
|
|
||||||
isOneToOne: false
|
|
||||||
referencedRelation: "credit_customers"
|
|
||||||
referencedColumns: ["id"]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
profiles: {
|
|
||||||
Row: {
|
|
||||||
created_at: string
|
|
||||||
currency: string
|
|
||||||
full_name: string | null
|
|
||||||
id: string
|
|
||||||
shop_name: string | null
|
|
||||||
updated_at: string
|
|
||||||
}
|
|
||||||
Insert: {
|
|
||||||
created_at?: string
|
|
||||||
currency?: string
|
|
||||||
full_name?: string | null
|
|
||||||
id: string
|
|
||||||
shop_name?: string | null
|
|
||||||
updated_at?: string
|
|
||||||
}
|
|
||||||
Update: {
|
|
||||||
created_at?: string
|
|
||||||
currency?: string
|
|
||||||
full_name?: string | null
|
|
||||||
id?: string
|
|
||||||
shop_name?: string | null
|
|
||||||
updated_at?: string
|
|
||||||
}
|
|
||||||
Relationships: []
|
|
||||||
}
|
|
||||||
repayments: {
|
|
||||||
Row: {
|
|
||||||
amount: number
|
|
||||||
created_at: string
|
|
||||||
customer_id: string
|
|
||||||
id: string
|
|
||||||
note: string | null
|
|
||||||
repayment_date: string
|
|
||||||
updated_at: string
|
|
||||||
user_id: string
|
|
||||||
}
|
|
||||||
Insert: {
|
|
||||||
amount: number
|
|
||||||
created_at?: string
|
|
||||||
customer_id: string
|
|
||||||
id?: string
|
|
||||||
note?: string | null
|
|
||||||
repayment_date?: string
|
|
||||||
updated_at?: string
|
|
||||||
user_id: string
|
|
||||||
}
|
|
||||||
Update: {
|
|
||||||
amount?: number
|
|
||||||
created_at?: string
|
|
||||||
customer_id?: string
|
|
||||||
id?: string
|
|
||||||
note?: string | null
|
|
||||||
repayment_date?: string
|
|
||||||
updated_at?: string
|
|
||||||
user_id?: string
|
|
||||||
}
|
|
||||||
Relationships: [
|
|
||||||
{
|
|
||||||
foreignKeyName: "repayments_customer_id_fkey"
|
|
||||||
columns: ["customer_id"]
|
|
||||||
isOneToOne: false
|
|
||||||
referencedRelation: "credit_customers"
|
|
||||||
referencedColumns: ["id"]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
sales: {
|
|
||||||
Row: {
|
|
||||||
amount: number
|
|
||||||
created_at: string
|
|
||||||
id: string
|
|
||||||
note: string | null
|
|
||||||
sale_date: string
|
|
||||||
updated_at: string
|
|
||||||
user_id: string
|
|
||||||
}
|
|
||||||
Insert: {
|
|
||||||
amount: number
|
|
||||||
created_at?: string
|
|
||||||
id?: string
|
|
||||||
note?: string | null
|
|
||||||
sale_date?: string
|
|
||||||
updated_at?: string
|
|
||||||
user_id: string
|
|
||||||
}
|
|
||||||
Update: {
|
|
||||||
amount?: number
|
|
||||||
created_at?: string
|
|
||||||
id?: string
|
|
||||||
note?: string | null
|
|
||||||
sale_date?: string
|
|
||||||
updated_at?: string
|
|
||||||
user_id?: 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';
|
import App from './App';
|
||||||
|
|
||||||
// ── Ionic initialisation ──────────────────────────────────────────────────────
|
// ── 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 _urlMode = new URLSearchParams(window.location.search).get('mode');
|
||||||
const _platform = Capacitor.getPlatform(); // 'ios' | 'android' | 'web'
|
const _platform = Capacitor.getPlatform(); // 'ios' | 'android' | 'web'
|
||||||
setupIonicReact({
|
setupIonicReact({
|
||||||
@@ -13,7 +13,7 @@ setupIonicReact({
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Derive the studio parent origin dynamically so this works in both dev
|
// 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 = (() => {
|
const studioOrigin = (() => {
|
||||||
try {
|
try {
|
||||||
if (document.referrer) return new URL(document.referrer).origin;
|
if (document.referrer) return new URL(document.referrer).origin;
|
||||||
@@ -49,7 +49,7 @@ if (import.meta.hot) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ── Session bridge ────────────────────────────────────────────────────────────
|
// ── 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.
|
// Edge Functions. Uses import.meta.glob so Vite never errors if supabase.ts is absent.
|
||||||
(async () => {
|
(async () => {
|
||||||
const mods = import.meta.glob('./supabase.ts', { eager: false });
|
const mods = import.meta.glob('./supabase.ts', { eager: false });
|
||||||
@@ -73,17 +73,12 @@ if (import.meta.hot) {
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
// ── Runtime error reporting ───────────────────────────────────────────────────
|
// ── Runtime error reporting ───────────────────────────────────────────────────
|
||||||
// Forward uncaught errors to the Appcakes dev server so the AI can read them.
|
// Forward uncaught errors to the AppSuite 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;
|
|
||||||
|
|
||||||
function reportError(message: string, stack?: string) {
|
function reportError(message: string, stack?: string) {
|
||||||
fetch(`${studioOrigin}/api/agent/runtime-error`, {
|
fetch(`${studioOrigin}/api/agent/runtime-error`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({ message, stack, projectId: _projectId }),
|
body: JSON.stringify({ message, stack }),
|
||||||
}).catch(() => {});
|
}).catch(() => {});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,233 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import {
|
|
||||||
IonContent,
|
|
||||||
IonPage,
|
|
||||||
IonInput,
|
|
||||||
IonButton,
|
|
||||||
IonSpinner,
|
|
||||||
IonIcon,
|
|
||||||
IonText,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { storefrontOutline } from 'ionicons/icons';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
|
|
||||||
const AuthPage: React.FC = () => {
|
|
||||||
const [mode, setMode] = useState<'signin' | 'signup'>('signin');
|
|
||||||
const [name, setName] = useState('');
|
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
const [submitting, setSubmitting] = useState(false);
|
|
||||||
const [message, setMessage] = useState<string | null>(null);
|
|
||||||
const [messageType, setMessageType] = useState<'error' | 'success'>('error');
|
|
||||||
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
const showMessage = (msg: string, type: 'error' | 'success' = 'error') => {
|
|
||||||
setMessage(msg);
|
|
||||||
setMessageType(type);
|
|
||||||
setTimeout(() => setMessage(null), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAuth = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!email || !password || (mode === 'signup' && !name)) {
|
|
||||||
showMessage('Please fill in all fields');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSubmitting(true);
|
|
||||||
setMessage(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (mode === 'signup') {
|
|
||||||
const { data, error } = await supabase.auth.signUp({
|
|
||||||
email,
|
|
||||||
password,
|
|
||||||
options: {
|
|
||||||
data: {
|
|
||||||
full_name: name,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
|
|
||||||
if (data.session) {
|
|
||||||
history.push('/home');
|
|
||||||
} else {
|
|
||||||
history.push('/verify-email', { email });
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const { data, 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 });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data.session) {
|
|
||||||
history.push('/home');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
showMessage(err.message || 'An authentication error occurred');
|
|
||||||
} finally {
|
|
||||||
setSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonContent
|
|
||||||
fullscreen
|
|
||||||
style={{
|
|
||||||
'--background':
|
|
||||||
'linear-gradient(160deg, rgba(199,210,254,0.52) 0%, #f0f4ff 58%, #f8fafc 100%)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="auth-shell">
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: '12px',
|
|
||||||
marginTop: '20px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="icon-container"
|
|
||||||
style={{ width: '44px', height: '44px' }}
|
|
||||||
>
|
|
||||||
<IonIcon icon={storefrontOutline} style={{ fontSize: '22px' }} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1 className="bold" style={{ margin: '0', fontSize: '22px' }}>
|
|
||||||
ShopKeep
|
|
||||||
</h1>
|
|
||||||
<p className="secondary-text" style={{ margin: '0' }}>
|
|
||||||
Simple bookkeeping for you
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="auth-card">
|
|
||||||
<div className="pill-toggle">
|
|
||||||
<button
|
|
||||||
className={`pill-toggle-btn ${mode === 'signin' ? 'active' : ''}`}
|
|
||||||
onClick={() => setMode('signin')}
|
|
||||||
>
|
|
||||||
Sign in
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`pill-toggle-btn ${mode === 'signup' ? 'active' : ''}`}
|
|
||||||
onClick={() => setMode('signup')}
|
|
||||||
>
|
|
||||||
Create account
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form
|
|
||||||
onSubmit={handleAuth}
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
|
|
||||||
>
|
|
||||||
{mode === 'signup' && (
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonInput
|
|
||||||
label="Full Name"
|
|
||||||
labelPlacement="floating"
|
|
||||||
placeholder="Enter your name"
|
|
||||||
value={name}
|
|
||||||
onIonChange={(e) => setName(e.detail.value!)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonInput
|
|
||||||
label="Email"
|
|
||||||
labelPlacement="floating"
|
|
||||||
type="email"
|
|
||||||
placeholder="name@example.com"
|
|
||||||
value={email}
|
|
||||||
onIonChange={(e) => setEmail(e.detail.value!)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonInput
|
|
||||||
label="Password"
|
|
||||||
labelPlacement="floating"
|
|
||||||
type="password"
|
|
||||||
placeholder="Min. 6 characters"
|
|
||||||
value={password}
|
|
||||||
onIonChange={(e) => setPassword(e.detail.value!)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{message && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
messageType === 'error'
|
|
||||||
? 'var(--color-danger-soft)'
|
|
||||||
: 'var(--color-success-soft)',
|
|
||||||
color:
|
|
||||||
messageType === 'error'
|
|
||||||
? 'var(--ion-color-danger-shade)'
|
|
||||||
: 'var(--ion-color-success-shade)',
|
|
||||||
padding: '12px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<IonButton
|
|
||||||
type="submit"
|
|
||||||
expand="block"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
height: '52px',
|
|
||||||
'--border-radius': 'var(--radius-pill)',
|
|
||||||
marginTop: '8px',
|
|
||||||
}}
|
|
||||||
disabled={submitting}
|
|
||||||
>
|
|
||||||
{submitting ? (
|
|
||||||
<IonSpinner name="crescent" />
|
|
||||||
) : mode === 'signin' ? (
|
|
||||||
'Sign in'
|
|
||||||
) : (
|
|
||||||
'Create account'
|
|
||||||
)}
|
|
||||||
</IonButton>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div style={{ textAlign: 'center', marginTop: '8px' }}>
|
|
||||||
<IonText
|
|
||||||
color="primary"
|
|
||||||
className="semibold"
|
|
||||||
style={{ fontSize: '13px', cursor: 'pointer' }}
|
|
||||||
onClick={() => history.push('/forgot-password')}
|
|
||||||
>
|
|
||||||
Forgot password?
|
|
||||||
</IonText>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AuthPage;
|
|
||||||
@@ -1,359 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
IonContent,
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonTitle,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonInput,
|
|
||||||
IonTextarea,
|
|
||||||
IonSpinner,
|
|
||||||
IonLabel,
|
|
||||||
IonSelect,
|
|
||||||
IonSelectOption,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline } from 'ionicons/icons';
|
|
||||||
import { useHistory, useLocation } from 'react-router-dom';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { getTodayISO } from '../utils/dates';
|
|
||||||
import MoneyInput from '../components/MoneyInput';
|
|
||||||
import { parseMoney } from '../utils/money';
|
|
||||||
|
|
||||||
interface Customer {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CreditFormPage: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const location = useLocation<{ customerId?: string }>();
|
|
||||||
const { user } = useAuth();
|
|
||||||
|
|
||||||
const [mode, setMode] = useState<'existing' | 'new'>('existing');
|
|
||||||
const [customers, setCustomers] = useState<Customer[]>([]);
|
|
||||||
const [selectedCustomerId, setSelectedCustomerId] = useState<string>(
|
|
||||||
location.state?.customerId || ''
|
|
||||||
);
|
|
||||||
const [newName, setNewName] = useState('');
|
|
||||||
const [phone, setPhone] = useState('');
|
|
||||||
const [amount, setAmount] = useState('');
|
|
||||||
const [creditDate, setCreditDate] = useState(getTodayISO());
|
|
||||||
const [description, setDescription] = useState('');
|
|
||||||
const [submitting, setSubmitting] = useState(false);
|
|
||||||
const [loadingCustomers, setLoadingCustomers] = useState(true);
|
|
||||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
||||||
const [message, setMessage] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchCustomers = async () => {
|
|
||||||
if (!user) return;
|
|
||||||
try {
|
|
||||||
const { data, error } = await supabase
|
|
||||||
.from('credit_customers')
|
|
||||||
.select('id, name')
|
|
||||||
.eq('user_id', user.id)
|
|
||||||
.order('name');
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
setCustomers(data || []);
|
|
||||||
if (!data || data.length === 0) {
|
|
||||||
setMode('new');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching customers:', err);
|
|
||||||
} finally {
|
|
||||||
setLoadingCustomers(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchCustomers();
|
|
||||||
}, [user]);
|
|
||||||
|
|
||||||
const validate = () => {
|
|
||||||
const newErrors: Record<string, string> = {};
|
|
||||||
const parsedAmount = parseMoney(amount);
|
|
||||||
|
|
||||||
if (mode === 'existing' && !selectedCustomerId) {
|
|
||||||
newErrors.customer = 'Please select a customer';
|
|
||||||
}
|
|
||||||
if (mode === 'new' && !newName.trim()) {
|
|
||||||
newErrors.name = 'Customer name is required';
|
|
||||||
}
|
|
||||||
if (parsedAmount <= 0) {
|
|
||||||
newErrors.amount = 'Amount must be greater than 0';
|
|
||||||
}
|
|
||||||
if (!creditDate) {
|
|
||||||
newErrors.date = 'Date is required';
|
|
||||||
}
|
|
||||||
|
|
||||||
setErrors(newErrors);
|
|
||||||
return Object.keys(newErrors).length === 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
if (!validate() || !user) return;
|
|
||||||
|
|
||||||
setSubmitting(true);
|
|
||||||
setMessage(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
let customerId = selectedCustomerId;
|
|
||||||
|
|
||||||
if (mode === 'new') {
|
|
||||||
const { data: newCustomer, error: customerError } = await supabase
|
|
||||||
.from('credit_customers')
|
|
||||||
.insert([
|
|
||||||
{
|
|
||||||
user_id: user.id,
|
|
||||||
name: newName.trim(),
|
|
||||||
phone: phone.trim() || null,
|
|
||||||
},
|
|
||||||
])
|
|
||||||
.select()
|
|
||||||
.single();
|
|
||||||
|
|
||||||
if (customerError) throw customerError;
|
|
||||||
customerId = newCustomer.id;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { error: creditError } = await supabase.from('credits').insert([
|
|
||||||
{
|
|
||||||
user_id: user.id,
|
|
||||||
customer_id: customerId,
|
|
||||||
amount: parseMoney(amount),
|
|
||||||
credit_date: creditDate,
|
|
||||||
description: description.trim() || null,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (creditError) throw creditError;
|
|
||||||
|
|
||||||
history.goBack();
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error('Error saving credit:', err);
|
|
||||||
setMessage(err.message || 'Could not save credit');
|
|
||||||
setTimeout(() => setMessage(null), 4000);
|
|
||||||
} finally {
|
|
||||||
setSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar style={{ '--background': '#f0f4ff' }}>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton color="dark" onClick={() => history.goBack()}>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle className="bold">Add credit</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent className="ion-padding" style={{ '--background': '#f0f4ff' }}>
|
|
||||||
<div className="form-card">
|
|
||||||
<div className="pill-toggle" style={{ marginBottom: '8px' }}>
|
|
||||||
<button
|
|
||||||
className={`pill-toggle-btn ${mode === 'existing' ? 'active' : ''}`}
|
|
||||||
onClick={() => setMode('existing')}
|
|
||||||
disabled={customers.length === 0}
|
|
||||||
>
|
|
||||||
Existing Customer
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`pill-toggle-btn ${mode === 'new' ? 'active' : ''}`}
|
|
||||||
onClick={() => setMode('new')}
|
|
||||||
>
|
|
||||||
New Customer
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{mode === 'existing' ? (
|
|
||||||
<div className="form-field">
|
|
||||||
<IonLabel
|
|
||||||
className="semibold"
|
|
||||||
style={{
|
|
||||||
marginBottom: '8px',
|
|
||||||
display: 'block',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Select Customer
|
|
||||||
</IonLabel>
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonSelect
|
|
||||||
interface="action-sheet"
|
|
||||||
placeholder="Choose a customer"
|
|
||||||
value={selectedCustomerId}
|
|
||||||
onIonChange={(e) => setSelectedCustomerId(e.detail.value)}
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
>
|
|
||||||
{customers.map((c) => (
|
|
||||||
<IonSelectOption key={c.id} value={c.id}>
|
|
||||||
{c.name}
|
|
||||||
</IonSelectOption>
|
|
||||||
))}
|
|
||||||
</IonSelect>
|
|
||||||
</div>
|
|
||||||
{errors.customer && (
|
|
||||||
<IonLabel
|
|
||||||
color="danger"
|
|
||||||
style={{ fontSize: '12px', marginTop: '4px' }}
|
|
||||||
>
|
|
||||||
{errors.customer}
|
|
||||||
</IonLabel>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className="form-field">
|
|
||||||
<IonLabel
|
|
||||||
className="semibold"
|
|
||||||
style={{
|
|
||||||
marginBottom: '8px',
|
|
||||||
display: 'block',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Customer Name
|
|
||||||
</IonLabel>
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonInput
|
|
||||||
placeholder="e.g. John Doe"
|
|
||||||
value={newName}
|
|
||||||
onIonChange={(e) => setNewName(e.detail.value!)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{errors.name && (
|
|
||||||
<IonLabel
|
|
||||||
color="danger"
|
|
||||||
style={{ fontSize: '12px', marginTop: '4px' }}
|
|
||||||
>
|
|
||||||
{errors.name}
|
|
||||||
</IonLabel>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="form-field">
|
|
||||||
<IonLabel
|
|
||||||
className="semibold"
|
|
||||||
style={{
|
|
||||||
marginBottom: '8px',
|
|
||||||
display: 'block',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Phone (optional)
|
|
||||||
</IonLabel>
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonInput
|
|
||||||
type="tel"
|
|
||||||
placeholder="e.g. +1 234 567 890"
|
|
||||||
value={phone}
|
|
||||||
onIonChange={(e) => setPhone(e.detail.value!)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<MoneyInput
|
|
||||||
label="Credit amount"
|
|
||||||
value={amount}
|
|
||||||
onValueChange={(val) => {
|
|
||||||
setAmount(val);
|
|
||||||
if (errors.amount) setErrors({ ...errors, amount: '' });
|
|
||||||
}}
|
|
||||||
error={errors.amount}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="form-field">
|
|
||||||
<IonLabel
|
|
||||||
className="semibold"
|
|
||||||
style={{
|
|
||||||
marginBottom: '8px',
|
|
||||||
display: 'block',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Credit date
|
|
||||||
</IonLabel>
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonInput
|
|
||||||
type="date"
|
|
||||||
value={creditDate}
|
|
||||||
onIonChange={(e) => setCreditDate(e.detail.value!)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{errors.date && (
|
|
||||||
<IonLabel
|
|
||||||
color="danger"
|
|
||||||
style={{ fontSize: '12px', marginTop: '4px' }}
|
|
||||||
>
|
|
||||||
{errors.date}
|
|
||||||
</IonLabel>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-field">
|
|
||||||
<IonLabel
|
|
||||||
className="semibold"
|
|
||||||
style={{
|
|
||||||
marginBottom: '8px',
|
|
||||||
display: 'block',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Description (optional)
|
|
||||||
</IonLabel>
|
|
||||||
<div
|
|
||||||
className="input-wrapper"
|
|
||||||
style={{ minHeight: '96px', padding: '8px 16px' }}
|
|
||||||
>
|
|
||||||
<IonTextarea
|
|
||||||
placeholder="e.g. 2 bags of rice, sugar"
|
|
||||||
value={description}
|
|
||||||
onIonChange={(e) => setDescription(e.detail.value!)}
|
|
||||||
rows={4}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{message && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-danger-soft)',
|
|
||||||
color: 'var(--ion-color-danger-shade)',
|
|
||||||
padding: '12px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<IonButton
|
|
||||||
expand="block"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
height: '52px',
|
|
||||||
'--border-radius': 'var(--radius-pill)',
|
|
||||||
marginTop: '16px',
|
|
||||||
}}
|
|
||||||
disabled={submitting || (loadingCustomers && mode === 'existing')}
|
|
||||||
onClick={handleSave}
|
|
||||||
>
|
|
||||||
{submitting ? <IonSpinner name="crescent" /> : 'Save credit'}
|
|
||||||
</IonButton>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CreditFormPage;
|
|
||||||
@@ -1,361 +0,0 @@
|
|||||||
import React, { useState, useCallback, useMemo } from 'react';
|
|
||||||
import {
|
|
||||||
IonContent,
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonTitle,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonRefresher,
|
|
||||||
IonRefresherContent,
|
|
||||||
IonAlert,
|
|
||||||
useIonViewWillEnter,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import {
|
|
||||||
chevronBackOutline,
|
|
||||||
trashOutline,
|
|
||||||
receiptOutline,
|
|
||||||
personAddOutline,
|
|
||||||
cashOutline,
|
|
||||||
} from 'ionicons/icons';
|
|
||||||
import { useHistory, useParams } from 'react-router-dom';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import ActivityRow, { ActivityItem } from '../components/ActivityRow';
|
|
||||||
import EmptyState from '../components/EmptyState';
|
|
||||||
import { formatMoney } from '../utils/money';
|
|
||||||
|
|
||||||
const CustomerDetailPage: React.FC = () => {
|
|
||||||
const { id } = useParams<{ id: string }>();
|
|
||||||
const { user, profile } = useAuth();
|
|
||||||
const history = useHistory();
|
|
||||||
const currency = profile?.currency || 'USD';
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [customer, setCustomer] = useState<any>(null);
|
|
||||||
const [activity, setActivity] = useState<ActivityItem[]>([]);
|
|
||||||
const [balance, setBalance] = useState(0);
|
|
||||||
const [showDeleteAlert, setShowDeleteAlert] = useState(false);
|
|
||||||
|
|
||||||
const fetchData = useCallback(async () => {
|
|
||||||
if (!user || !id) return;
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const [
|
|
||||||
{ data: customerData },
|
|
||||||
{ data: creditsData },
|
|
||||||
{ data: repaymentsData },
|
|
||||||
] = await Promise.all([
|
|
||||||
supabase.from('credit_customers').select('*').eq('id', id).single(),
|
|
||||||
supabase
|
|
||||||
.from('credits')
|
|
||||||
.select('*')
|
|
||||||
.eq('customer_id', id)
|
|
||||||
.order('credit_date', { ascending: false }),
|
|
||||||
supabase
|
|
||||||
.from('repayments')
|
|
||||||
.select('*')
|
|
||||||
.eq('customer_id', id)
|
|
||||||
.order('repayment_date', { ascending: false }),
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (customerData) {
|
|
||||||
setCustomer(customerData);
|
|
||||||
|
|
||||||
const totalCredits = (creditsData || []).reduce(
|
|
||||||
(sum, c) => sum + Number(c.amount),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
const totalRepayments = (repaymentsData || []).reduce(
|
|
||||||
(sum, r) => sum + Number(r.amount),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
setBalance(Math.max(0, totalCredits - totalRepayments));
|
|
||||||
|
|
||||||
const combinedActivity: ActivityItem[] = [
|
|
||||||
...(creditsData || []).map((c) => ({
|
|
||||||
id: c.id,
|
|
||||||
type: 'credit' as const,
|
|
||||||
amount: Number(c.amount),
|
|
||||||
date: c.credit_date,
|
|
||||||
note: c.description,
|
|
||||||
})),
|
|
||||||
...(repaymentsData || []).map((r) => ({
|
|
||||||
id: r.id,
|
|
||||||
type: 'repayment' as const,
|
|
||||||
amount: Number(r.amount),
|
|
||||||
date: r.repayment_date,
|
|
||||||
note: r.note,
|
|
||||||
})),
|
|
||||||
].sort((a, b) => b.date.localeCompare(a.date));
|
|
||||||
|
|
||||||
setActivity(combinedActivity);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching customer detail:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [user, id]);
|
|
||||||
|
|
||||||
useIonViewWillEnter(() => {
|
|
||||||
fetchData();
|
|
||||||
}, [fetchData]);
|
|
||||||
|
|
||||||
const handleRefresh = async (e: CustomEvent) => {
|
|
||||||
await fetchData();
|
|
||||||
e.detail.complete();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async () => {
|
|
||||||
try {
|
|
||||||
const { error } = await supabase
|
|
||||||
.from('credit_customers')
|
|
||||||
.delete()
|
|
||||||
.eq('id', id);
|
|
||||||
if (error) throw error;
|
|
||||||
history.push('/customers');
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error deleting customer:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getInitials = (name: string) => {
|
|
||||||
return name
|
|
||||||
.split(' ')
|
|
||||||
.map((n) => n[0])
|
|
||||||
.join('')
|
|
||||||
.toUpperCase()
|
|
||||||
.slice(0, 2);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!loading && !customer) {
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonContent
|
|
||||||
className="ion-padding"
|
|
||||||
style={{ '--background': '#f0f4ff' }}
|
|
||||||
>
|
|
||||||
<EmptyState
|
|
||||||
icon="alert-circle-outline"
|
|
||||||
title="Customer not found"
|
|
||||||
actionText="Go Back"
|
|
||||||
onAction={() => history.push('/customers')}
|
|
||||||
/>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar style={{ '--background': '#f0f4ff' }}>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton color="dark" onClick={() => history.push('/customers')}>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle className="bold">Customer</IonTitle>
|
|
||||||
<IonButtons slot="end">
|
|
||||||
<IonButton color="danger" onClick={() => setShowDeleteAlert(true)}>
|
|
||||||
<IonIcon icon={trashOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent fullscreen style={{ '--background': '#f0f4ff' }}>
|
|
||||||
<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
|
|
||||||
<IonRefresherContent />
|
|
||||||
</IonRefresher>
|
|
||||||
|
|
||||||
<div className="page-padding" style={{ paddingTop: '16px' }}>
|
|
||||||
<div className="widget-card" style={{ padding: '24px 20px' }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginBottom: '20px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="icon-container bold"
|
|
||||||
style={{
|
|
||||||
width: '56px',
|
|
||||||
height: '56px',
|
|
||||||
fontSize: '18px',
|
|
||||||
marginRight: '16px',
|
|
||||||
borderRadius: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{customer ? getInitials(customer.name) : ''}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="bold" style={{ margin: '0', fontSize: '20px' }}>
|
|
||||||
{customer?.name}
|
|
||||||
</h2>
|
|
||||||
{customer?.phone && (
|
|
||||||
<p className="secondary-text" style={{ margin: '2px 0 0 0' }}>
|
|
||||||
{customer.phone}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{ marginBottom: '24px' }}>
|
|
||||||
<span className="tertiary-text">OUTSTANDING BALANCE</span>
|
|
||||||
<div
|
|
||||||
className="tabular"
|
|
||||||
style={{
|
|
||||||
fontSize: '34px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color:
|
|
||||||
balance > 0
|
|
||||||
? 'var(--ion-color-danger)'
|
|
||||||
: 'var(--ion-color-success)',
|
|
||||||
marginTop: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{formatMoney(balance, currency)}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'inline-block',
|
|
||||||
padding: '4px 12px',
|
|
||||||
borderRadius: '999px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '600',
|
|
||||||
marginTop: '8px',
|
|
||||||
background:
|
|
||||||
balance > 0
|
|
||||||
? 'var(--color-danger-soft)'
|
|
||||||
: 'var(--color-success-soft)',
|
|
||||||
color:
|
|
||||||
balance > 0
|
|
||||||
? 'var(--ion-color-danger)'
|
|
||||||
: 'var(--ion-color-success)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{balance > 0 ? 'OWING' : 'CLEARED'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{ display: 'flex', gap: '12px' }}>
|
|
||||||
<IonButton
|
|
||||||
fill="clear"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
fontSize: '14px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
'--border-radius': 'var(--radius-inner)',
|
|
||||||
height: '44px',
|
|
||||||
}}
|
|
||||||
onClick={() => history.push('/credit/new', { customerId: id })}
|
|
||||||
>
|
|
||||||
<IonIcon icon={personAddOutline} slot="start" />
|
|
||||||
Credit
|
|
||||||
</IonButton>
|
|
||||||
<IonButton
|
|
||||||
fill="solid"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
fontSize: '14px',
|
|
||||||
'--border-radius': 'var(--radius-inner)',
|
|
||||||
height: '44px',
|
|
||||||
}}
|
|
||||||
onClick={() =>
|
|
||||||
history.push('/repayment/new', { customerId: id })
|
|
||||||
}
|
|
||||||
disabled={balance === 0}
|
|
||||||
>
|
|
||||||
<IonIcon icon={cashOutline} slot="start" />
|
|
||||||
Repay
|
|
||||||
</IonButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="section-header">
|
|
||||||
<h2>Activity</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="page-padding" style={{ paddingBottom: '40px' }}>
|
|
||||||
{loading ? (
|
|
||||||
<div className="widget-card" style={{ gap: '16px' }}>
|
|
||||||
{[1, 2, 3].map((i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
style={{ display: 'flex', gap: '12px', alignItems: 'center' }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '40px',
|
|
||||||
height: '40px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div style={{ flex: 1 }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '60%',
|
|
||||||
height: '12px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
marginBottom: '6px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '40%',
|
|
||||||
height: '10px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : activity.length > 0 ? (
|
|
||||||
<div className="widget-card" style={{ padding: '8px 16px' }}>
|
|
||||||
{activity.map((item) => (
|
|
||||||
<ActivityRow
|
|
||||||
key={`${item.type}-${item.id}`}
|
|
||||||
item={item}
|
|
||||||
showDate
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<EmptyState
|
|
||||||
icon={receiptOutline}
|
|
||||||
title="No activity yet"
|
|
||||||
description="Record the first credit or repayment for this customer."
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<IonAlert
|
|
||||||
isOpen={showDeleteAlert}
|
|
||||||
onDidDismiss={() => setShowDeleteAlert(false)}
|
|
||||||
header="Delete Customer"
|
|
||||||
message="Are you sure you want to delete this customer? All their credit and repayment history will be lost."
|
|
||||||
buttons={[
|
|
||||||
{ text: 'Cancel', role: 'cancel' },
|
|
||||||
{ text: 'Delete', role: 'destructive', handler: handleDelete },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CustomerDetailPage;
|
|
||||||
@@ -1,268 +0,0 @@
|
|||||||
import React, { useState, useCallback, useMemo } from 'react';
|
|
||||||
import {
|
|
||||||
IonContent,
|
|
||||||
IonPage,
|
|
||||||
IonIcon,
|
|
||||||
IonSegmentButton,
|
|
||||||
IonSearchbar,
|
|
||||||
IonRefresher,
|
|
||||||
IonRefresherContent,
|
|
||||||
useIonViewWillEnter,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { personAddOutline, peopleOutline } from 'ionicons/icons';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import MetricCard from '../components/MetricCard';
|
|
||||||
import CustomerRow from '../components/CustomerRow';
|
|
||||||
import EmptyState from '../components/EmptyState';
|
|
||||||
|
|
||||||
interface CustomerWithBalance {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
phone: string | null;
|
|
||||||
balance: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CustomersPage: React.FC = () => {
|
|
||||||
const { user } = useAuth();
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [customers, setCustomers] = useState<CustomerWithBalance[]>([]);
|
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
|
||||||
|
|
||||||
const fetchData = useCallback(async () => {
|
|
||||||
if (!user) return;
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const [
|
|
||||||
{ data: customersData },
|
|
||||||
{ data: creditsData },
|
|
||||||
{ data: repaymentsData },
|
|
||||||
] = await Promise.all([
|
|
||||||
supabase
|
|
||||||
.from('credit_customers')
|
|
||||||
.select('*')
|
|
||||||
.eq('user_id', user.id)
|
|
||||||
.order('name'),
|
|
||||||
supabase
|
|
||||||
.from('credits')
|
|
||||||
.select('customer_id, amount')
|
|
||||||
.eq('user_id', user.id),
|
|
||||||
supabase
|
|
||||||
.from('repayments')
|
|
||||||
.select('customer_id, amount')
|
|
||||||
.eq('user_id', user.id),
|
|
||||||
]);
|
|
||||||
|
|
||||||
const customerBalances: CustomerWithBalance[] = (customersData || []).map(
|
|
||||||
(c) => {
|
|
||||||
const totalCredits = (creditsData || [])
|
|
||||||
.filter((cr) => cr.customer_id === c.id)
|
|
||||||
.reduce((sum, cr) => sum + Number(cr.amount), 0);
|
|
||||||
const totalRepayments = (repaymentsData || [])
|
|
||||||
.filter((r) => r.customer_id === c.id)
|
|
||||||
.reduce((sum, r) => sum + Number(r.amount), 0);
|
|
||||||
return {
|
|
||||||
id: c.id,
|
|
||||||
name: c.name,
|
|
||||||
phone: c.phone,
|
|
||||||
balance: Math.max(0, totalCredits - totalRepayments),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
// Sort: outstanding balances first, then by name
|
|
||||||
setCustomers(
|
|
||||||
customerBalances.sort((a, b) => {
|
|
||||||
if (a.balance > 0 && b.balance === 0) return -1;
|
|
||||||
if (a.balance === 0 && b.balance > 0) return 1;
|
|
||||||
return a.name.localeCompare(b.name);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching customers:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [user]);
|
|
||||||
|
|
||||||
useIonViewWillEnter(() => {
|
|
||||||
fetchData();
|
|
||||||
}, [fetchData]);
|
|
||||||
|
|
||||||
const handleRefresh = async (e: CustomEvent) => {
|
|
||||||
await fetchData();
|
|
||||||
e.detail.complete();
|
|
||||||
};
|
|
||||||
|
|
||||||
const filteredCustomers = useMemo(() => {
|
|
||||||
const query = searchQuery.toLowerCase().trim();
|
|
||||||
if (!query) return customers;
|
|
||||||
return customers.filter(
|
|
||||||
(c) =>
|
|
||||||
c.name.toLowerCase().includes(query) ||
|
|
||||||
(c.phone && c.phone.toLowerCase().includes(query)),
|
|
||||||
);
|
|
||||||
}, [customers, searchQuery]);
|
|
||||||
|
|
||||||
const totalOutstanding = useMemo(() => {
|
|
||||||
return customers.reduce((sum, c) => sum + c.balance, 0);
|
|
||||||
}, [customers]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonContent
|
|
||||||
fullscreen
|
|
||||||
style={{
|
|
||||||
'--background':
|
|
||||||
'linear-gradient(160deg, rgba(199,210,254,0.35) 0%, #f0f4ff 58%, #f8fafc 100%)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
|
|
||||||
<IonRefresherContent />
|
|
||||||
</IonRefresher>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: 'calc(16px + var(--ion-safe-area-top)) 20px 16px',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<h1 className="bold" style={{ margin: '0', fontSize: '20px' }}>
|
|
||||||
Credit customers
|
|
||||||
</h1>
|
|
||||||
<p className="secondary-text" style={{ margin: '0' }}>
|
|
||||||
Track who owes your shop
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="icon-container"
|
|
||||||
style={{
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: '#ffffff',
|
|
||||||
color: 'var(--ion-color-primary)',
|
|
||||||
}}
|
|
||||||
onClick={() => history.push('/credit/new')}
|
|
||||||
>
|
|
||||||
<IonIcon icon={personAddOutline} style={{ fontSize: '22px' }} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="page-padding">
|
|
||||||
<IonSearchbar
|
|
||||||
value={searchQuery}
|
|
||||||
onIonInput={(e) => setSearchQuery(e.detail.value!)}
|
|
||||||
placeholder="Search customers"
|
|
||||||
className="custom-searchbar"
|
|
||||||
style={{
|
|
||||||
'--background': 'var(--color-surface-secondary)',
|
|
||||||
'--border-radius': '24px',
|
|
||||||
'--box-shadow': 'none',
|
|
||||||
padding: '0',
|
|
||||||
height: '44px',
|
|
||||||
marginBottom: '16px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<MetricCard
|
|
||||||
label="Total Outstanding"
|
|
||||||
value={totalOutstanding}
|
|
||||||
fullWidth
|
|
||||||
loading={loading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="section-header">
|
|
||||||
<h2>
|
|
||||||
Customers{' '}
|
|
||||||
{!loading && (
|
|
||||||
<span className="tertiary-text" style={{ marginLeft: '4px' }}>
|
|
||||||
({customers.length})
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="page-padding" style={{ paddingBottom: '120px' }}>
|
|
||||||
{loading ? (
|
|
||||||
<div className="widget-card" style={{ gap: '16px' }}>
|
|
||||||
{[1, 2, 3].map((i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
style={{ display: 'flex', gap: '12px', alignItems: 'center' }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '44px',
|
|
||||||
height: '44px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div style={{ flex: 1 }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '50%',
|
|
||||||
height: '14px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
marginBottom: '6px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '30%',
|
|
||||||
height: '10px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : customers.length > 0 ? (
|
|
||||||
<>
|
|
||||||
{filteredCustomers.length > 0 ? (
|
|
||||||
<div className="widget-card" style={{ padding: '8px 16px' }}>
|
|
||||||
{filteredCustomers.map((c) => (
|
|
||||||
<CustomerRow
|
|
||||||
key={c.id}
|
|
||||||
id={c.id}
|
|
||||||
name={c.name}
|
|
||||||
phone={c.phone || undefined}
|
|
||||||
balance={c.balance}
|
|
||||||
onClick={() => history.push(`/customers/${c.id}`)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div style={{ textAlign: 'center', padding: '40px 20px' }}>
|
|
||||||
<p className="secondary-text">
|
|
||||||
No customers matching "{searchQuery}"
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<EmptyState
|
|
||||||
icon={peopleOutline}
|
|
||||||
title="No credit customers yet"
|
|
||||||
description="Add a credit sale to start tracking balances."
|
|
||||||
actionText="Add Credit"
|
|
||||||
onAction={() => history.push('/credit/new')}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CustomersPage;
|
|
||||||
@@ -1,162 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import {
|
|
||||||
IonContent,
|
|
||||||
IonPage,
|
|
||||||
IonInput,
|
|
||||||
IonButton,
|
|
||||||
IonSpinner,
|
|
||||||
IonIcon,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline } from 'ionicons/icons';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
|
|
||||||
const ForgotPasswordPage: React.FC = () => {
|
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
const [submitting, setSubmitting] = useState(false);
|
|
||||||
const [message, setMessage] = useState<string | null>(null);
|
|
||||||
const [messageType, setMessageType] = useState<'error' | 'success'>('error');
|
|
||||||
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
const showMessage = (msg: string, type: 'error' | 'success' = 'error') => {
|
|
||||||
setMessage(msg);
|
|
||||||
setMessageType(type);
|
|
||||||
setTimeout(() => setMessage(null), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleReset = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!email) {
|
|
||||||
showMessage('Please enter your email');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSubmitting(true);
|
|
||||||
setMessage(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { error } = await supabase.auth.resetPasswordForEmail(email);
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
|
|
||||||
history.push('/verify-email', { email, type: 'recovery' });
|
|
||||||
} catch (err: any) {
|
|
||||||
showMessage(err.message || 'An error occurred');
|
|
||||||
} finally {
|
|
||||||
setSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonContent
|
|
||||||
fullscreen
|
|
||||||
style={{
|
|
||||||
'--background':
|
|
||||||
'linear-gradient(160deg, rgba(199,210,254,0.52) 0%, #f0f4ff 58%, #f8fafc 100%)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="auth-shell">
|
|
||||||
<IonButton
|
|
||||||
fill="clear"
|
|
||||||
color="dark"
|
|
||||||
onClick={() => history.push('/auth')}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 'calc(var(--ion-safe-area-top, 0px) + 8px)',
|
|
||||||
left: '8px',
|
|
||||||
'--padding-start': '8px',
|
|
||||||
'--padding-end': '8px',
|
|
||||||
zIndex: 10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
width: '44px',
|
|
||||||
height: '44px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon icon={chevronBackOutline} />
|
|
||||||
</div>
|
|
||||||
</IonButton>
|
|
||||||
|
|
||||||
<div style={{ marginTop: '80px' }}>
|
|
||||||
<h1
|
|
||||||
className="bold"
|
|
||||||
style={{ fontSize: '24px', margin: '0 0 8px 0' }}
|
|
||||||
>
|
|
||||||
Reset password
|
|
||||||
</h1>
|
|
||||||
<p
|
|
||||||
className="secondary-text"
|
|
||||||
style={{ margin: '0', fontSize: '14px' }}
|
|
||||||
>
|
|
||||||
Enter your email and we'll send a 6-digit recovery code.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="auth-card">
|
|
||||||
<form
|
|
||||||
onSubmit={handleReset}
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
|
|
||||||
>
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonInput
|
|
||||||
label="Email"
|
|
||||||
labelPlacement="floating"
|
|
||||||
type="email"
|
|
||||||
placeholder="name@example.com"
|
|
||||||
value={email}
|
|
||||||
onIonChange={(e) => setEmail(e.detail.value!)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{message && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
messageType === 'error'
|
|
||||||
? 'var(--color-danger-soft)'
|
|
||||||
: 'var(--color-success-soft)',
|
|
||||||
color:
|
|
||||||
messageType === 'error'
|
|
||||||
? 'var(--ion-color-danger-shade)'
|
|
||||||
: 'var(--ion-color-success-shade)',
|
|
||||||
padding: '12px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
fontSize: '13px',
|
|
||||||
textAlign: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<IonButton
|
|
||||||
type="submit"
|
|
||||||
expand="block"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
height: '52px',
|
|
||||||
'--border-radius': 'var(--radius-pill)',
|
|
||||||
marginTop: '8px',
|
|
||||||
}}
|
|
||||||
disabled={submitting}
|
|
||||||
>
|
|
||||||
{submitting ? <IonSpinner name="crescent" /> : 'Send code'}
|
|
||||||
</IonButton>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ForgotPasswordPage;
|
|
||||||
@@ -1,339 +0,0 @@
|
|||||||
import React, { useState, useCallback, useMemo } from 'react';
|
|
||||||
import {
|
|
||||||
IonContent,
|
|
||||||
IonPage,
|
|
||||||
IonIcon,
|
|
||||||
IonRefresher,
|
|
||||||
IonRefresherContent,
|
|
||||||
IonSegment,
|
|
||||||
IonSegmentButton,
|
|
||||||
IonLabel,
|
|
||||||
IonActionSheet,
|
|
||||||
useIonViewWillEnter,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import {
|
|
||||||
addOutline,
|
|
||||||
receiptOutline,
|
|
||||||
personAddOutline,
|
|
||||||
cashOutline,
|
|
||||||
} from 'ionicons/icons';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import ActivityRow, { ActivityItem } from '../components/ActivityRow';
|
|
||||||
import EmptyState from '../components/EmptyState';
|
|
||||||
import MetricCard from '../components/MetricCard';
|
|
||||||
import { groupItemsByDate, formatRelativeDate } from '../utils/dates';
|
|
||||||
|
|
||||||
const HistoryPage: React.FC = () => {
|
|
||||||
const { user } = useAuth();
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [filter, setFilter] = useState<
|
|
||||||
'all' | 'sales' | 'credit' | 'repayments'
|
|
||||||
>('all');
|
|
||||||
const [items, setItems] = useState<ActivityItem[]>([]);
|
|
||||||
const [showQuickAdd, setShowQuickAdd] = useState(false);
|
|
||||||
|
|
||||||
const fetchData = useCallback(async () => {
|
|
||||||
if (!user) return;
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const [
|
|
||||||
{ data: salesData },
|
|
||||||
{ data: creditsData },
|
|
||||||
{ data: repaymentsData },
|
|
||||||
] = await Promise.all([
|
|
||||||
supabase
|
|
||||||
.from('sales')
|
|
||||||
.select('*')
|
|
||||||
.eq('user_id', user.id)
|
|
||||||
.order('sale_date', { ascending: false }),
|
|
||||||
supabase
|
|
||||||
.from('credits')
|
|
||||||
.select('*, credit_customers(name)')
|
|
||||||
.eq('user_id', user.id)
|
|
||||||
.order('credit_date', { ascending: false }),
|
|
||||||
supabase
|
|
||||||
.from('repayments')
|
|
||||||
.select('*, credit_customers(name)')
|
|
||||||
.eq('user_id', user.id)
|
|
||||||
.order('repayment_date', { ascending: false }),
|
|
||||||
]);
|
|
||||||
|
|
||||||
const combined: ActivityItem[] = [
|
|
||||||
...(salesData || []).map((s) => ({
|
|
||||||
id: s.id,
|
|
||||||
type: 'sale' as const,
|
|
||||||
amount: Number(s.amount),
|
|
||||||
date: s.sale_date,
|
|
||||||
note: s.note,
|
|
||||||
})),
|
|
||||||
...(creditsData || []).map((c) => ({
|
|
||||||
id: c.id,
|
|
||||||
type: 'credit' as const,
|
|
||||||
amount: Number(c.amount),
|
|
||||||
date: c.credit_date,
|
|
||||||
customerName: (c.credit_customers as any)?.name,
|
|
||||||
note: c.description,
|
|
||||||
customerId: c.customer_id,
|
|
||||||
})),
|
|
||||||
...(repaymentsData || []).map((r) => ({
|
|
||||||
id: r.id,
|
|
||||||
type: 'repayment' as const,
|
|
||||||
amount: Number(r.amount),
|
|
||||||
date: r.repayment_date,
|
|
||||||
customerName: (r.credit_customers as any)?.name,
|
|
||||||
note: r.note,
|
|
||||||
customerId: r.customer_id,
|
|
||||||
})),
|
|
||||||
].sort((a, b) => b.date.localeCompare(a.date));
|
|
||||||
|
|
||||||
setItems(combined);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching history:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [user]);
|
|
||||||
|
|
||||||
useIonViewWillEnter(() => {
|
|
||||||
fetchData();
|
|
||||||
}, [fetchData]);
|
|
||||||
|
|
||||||
const handleRefresh = async (e: CustomEvent) => {
|
|
||||||
await fetchData();
|
|
||||||
e.detail.complete();
|
|
||||||
};
|
|
||||||
|
|
||||||
const filteredItems = useMemo(() => {
|
|
||||||
if (filter === 'all') return items;
|
|
||||||
if (filter === 'sales') return items.filter((i) => i.type === 'sale');
|
|
||||||
if (filter === 'credit') return items.filter((i) => i.type === 'credit');
|
|
||||||
if (filter === 'repayments')
|
|
||||||
return items.filter((i) => i.type === 'repayment');
|
|
||||||
return items;
|
|
||||||
}, [items, filter]);
|
|
||||||
|
|
||||||
const groupedItems = useMemo(() => {
|
|
||||||
return groupItemsByDate(filteredItems);
|
|
||||||
}, [filteredItems]);
|
|
||||||
|
|
||||||
const totals = useMemo(() => {
|
|
||||||
const salesTotal = items
|
|
||||||
.filter((i) => i.type === 'sale')
|
|
||||||
.reduce((sum, i) => sum + i.amount, 0);
|
|
||||||
const repaymentsTotal = items
|
|
||||||
.filter((i) => i.type === 'repayment')
|
|
||||||
.reduce((sum, i) => sum + i.amount, 0);
|
|
||||||
return { salesTotal, repaymentsTotal };
|
|
||||||
}, [items]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonContent
|
|
||||||
fullscreen
|
|
||||||
style={{
|
|
||||||
'--background':
|
|
||||||
'linear-gradient(160deg, rgba(199,210,254,0.35) 0%, #f0f4ff 58%, #f8fafc 100%)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
|
|
||||||
<IonRefresherContent />
|
|
||||||
</IonRefresher>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: 'calc(16px + var(--ion-safe-area-top)) 20px 16px',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<h1 className="bold" style={{ margin: '0', fontSize: '20px' }}>
|
|
||||||
History
|
|
||||||
</h1>
|
|
||||||
<p className="secondary-text" style={{ margin: '0' }}>
|
|
||||||
All your transactions
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="icon-container"
|
|
||||||
style={{
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: '#ffffff',
|
|
||||||
color: 'var(--ion-color-primary)',
|
|
||||||
}}
|
|
||||||
onClick={() => setShowQuickAdd(true)}
|
|
||||||
>
|
|
||||||
<IonIcon icon={addOutline} style={{ fontSize: '22px' }} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="page-padding">
|
|
||||||
<IonSegment
|
|
||||||
value={filter}
|
|
||||||
onIonChange={(e) => setFilter(e.detail.value as any)}
|
|
||||||
style={{
|
|
||||||
'--background': 'var(--color-surface-secondary)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '4px',
|
|
||||||
marginBottom: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonSegmentButton
|
|
||||||
value="all"
|
|
||||||
style={{
|
|
||||||
'--indicator-color': 'var(--ion-color-primary)',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonLabel className="semibold">All</IonLabel>
|
|
||||||
</IonSegmentButton>
|
|
||||||
<IonSegmentButton value="sales">
|
|
||||||
<IonLabel className="semibold">Sales</IonLabel>
|
|
||||||
</IonSegmentButton>
|
|
||||||
<IonSegmentButton value="credit">
|
|
||||||
<IonLabel className="semibold">Credit</IonLabel>
|
|
||||||
</IonSegmentButton>
|
|
||||||
<IonSegmentButton value="repayments">
|
|
||||||
<IonLabel className="semibold">Paid</IonLabel>
|
|
||||||
</IonSegmentButton>
|
|
||||||
</IonSegment>
|
|
||||||
|
|
||||||
<div className="metric-pair-row">
|
|
||||||
<MetricCard
|
|
||||||
label="Total Sales"
|
|
||||||
value={totals.salesTotal}
|
|
||||||
loading={loading}
|
|
||||||
/>
|
|
||||||
<MetricCard
|
|
||||||
label="Total Repaid"
|
|
||||||
value={totals.repaymentsTotal}
|
|
||||||
loading={loading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="page-padding"
|
|
||||||
style={{ paddingBottom: '120px', marginTop: '8px' }}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<div className="widget-card" style={{ gap: '16px' }}>
|
|
||||||
{[1, 2, 3].map((i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
style={{ display: 'flex', gap: '12px', alignItems: 'center' }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '40px',
|
|
||||||
height: '40px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div style={{ flex: 1 }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '60%',
|
|
||||||
height: '12px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
marginBottom: '6px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '40%',
|
|
||||||
height: '10px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : groupedItems.length > 0 ? (
|
|
||||||
groupedItems.map((group) => (
|
|
||||||
<div key={group.date} style={{ marginBottom: '20px' }}>
|
|
||||||
<div className="tertiary-text" style={{ marginBottom: '12px' }}>
|
|
||||||
{formatRelativeDate(group.date)}
|
|
||||||
</div>
|
|
||||||
<div className="widget-card" style={{ padding: '8px 16px' }}>
|
|
||||||
{group.items.map((item) => (
|
|
||||||
<ActivityRow
|
|
||||||
key={`${item.type}-${item.id}`}
|
|
||||||
item={item}
|
|
||||||
onClick={
|
|
||||||
item.customerId
|
|
||||||
? () => history.push(`/customers/${item.customerId}`)
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<EmptyState
|
|
||||||
icon={receiptOutline}
|
|
||||||
title={
|
|
||||||
filter === 'all' ? 'No activity yet' : `No ${filter} found`
|
|
||||||
}
|
|
||||||
description={
|
|
||||||
filter === 'all'
|
|
||||||
? 'Start recording sales and credits to see your history.'
|
|
||||||
: `You haven't recorded any ${filter} yet.`
|
|
||||||
}
|
|
||||||
actionText={
|
|
||||||
filter === 'all' || filter === 'sales'
|
|
||||||
? 'Add Sale'
|
|
||||||
: filter === 'credit'
|
|
||||||
? 'Add Credit'
|
|
||||||
: 'Record Repayment'
|
|
||||||
}
|
|
||||||
onAction={() => {
|
|
||||||
if (filter === 'sales' || filter === 'all')
|
|
||||||
history.push('/sale/new');
|
|
||||||
else if (filter === 'credit') history.push('/credit/new');
|
|
||||||
else history.push('/repayment/new');
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<IonActionSheet
|
|
||||||
isOpen={showQuickAdd}
|
|
||||||
onDidDismiss={() => setShowQuickAdd(false)}
|
|
||||||
header="Quick Actions"
|
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: 'Add Sale',
|
|
||||||
icon: receiptOutline,
|
|
||||||
handler: () => history.push('/sale/new'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Add Credit',
|
|
||||||
icon: personAddOutline,
|
|
||||||
handler: () => history.push('/credit/new'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Record Repayment',
|
|
||||||
icon: cashOutline,
|
|
||||||
handler: () => history.push('/repayment/new'),
|
|
||||||
},
|
|
||||||
{ text: 'Cancel', role: 'cancel' },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HistoryPage;
|
|
||||||
+12
-349
@@ -1,360 +1,23 @@
|
|||||||
import React, { useState, useCallback } from 'react';
|
import React from 'react';
|
||||||
import {
|
import {
|
||||||
IonContent,
|
IonContent,
|
||||||
|
IonHeader,
|
||||||
IonPage,
|
IonPage,
|
||||||
IonIcon,
|
IonTitle,
|
||||||
IonButton,
|
IonToolbar,
|
||||||
IonActionSheet,
|
|
||||||
IonRefresher,
|
|
||||||
IonRefresherContent,
|
|
||||||
useIonViewWillEnter,
|
|
||||||
} from '@ionic/react';
|
} from '@ionic/react';
|
||||||
import {
|
|
||||||
addCircleOutline,
|
|
||||||
personAddOutline,
|
|
||||||
cashOutline,
|
|
||||||
receiptOutline,
|
|
||||||
walletOutline,
|
|
||||||
checkmarkCircleOutline,
|
|
||||||
personCircleOutline,
|
|
||||||
} from 'ionicons/icons';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import MetricCard from '../components/MetricCard';
|
|
||||||
import ActivityRow, { ActivityItem } from '../components/ActivityRow';
|
|
||||||
import EmptyState from '../components/EmptyState';
|
|
||||||
import { getTodayISO } from '../utils/dates';
|
|
||||||
|
|
||||||
const Home: React.FC = () => {
|
const Home: React.FC = () => (
|
||||||
const { user, profile } = useAuth();
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [showQuickActions, setShowQuickActions] = useState(false);
|
|
||||||
const [summary, setSummary] = useState({
|
|
||||||
todaySales: 0,
|
|
||||||
outstandingCredit: 0,
|
|
||||||
monthRepayments: 0,
|
|
||||||
recentActivity: [] as ActivityItem[],
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchData = useCallback(async () => {
|
|
||||||
if (!user) return;
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const today = getTodayISO();
|
|
||||||
const firstOfMonth = new Date();
|
|
||||||
firstOfMonth.setDate(1);
|
|
||||||
const firstOfMonthISO = firstOfMonth.toISOString().split('T')[0];
|
|
||||||
|
|
||||||
// Parallel queries for efficiency
|
|
||||||
const [
|
|
||||||
{ data: salesToday },
|
|
||||||
{ data: creditsData },
|
|
||||||
{ data: repaymentsData },
|
|
||||||
{ data: recentSales },
|
|
||||||
{ data: recentCredits },
|
|
||||||
{ data: recentRepayments },
|
|
||||||
] = await Promise.all([
|
|
||||||
supabase.from('sales').select('amount').eq('sale_date', today),
|
|
||||||
supabase.from('credits').select('amount'),
|
|
||||||
supabase.from('repayments').select('amount, repayment_date'),
|
|
||||||
supabase
|
|
||||||
.from('sales')
|
|
||||||
.select('*')
|
|
||||||
.order('created_at', { ascending: false })
|
|
||||||
.limit(5),
|
|
||||||
supabase
|
|
||||||
.from('credits')
|
|
||||||
.select('*, credit_customers(name)')
|
|
||||||
.order('created_at', { ascending: false })
|
|
||||||
.limit(5),
|
|
||||||
supabase
|
|
||||||
.from('repayments')
|
|
||||||
.select('*, credit_customers(name)')
|
|
||||||
.order('created_at', { ascending: false })
|
|
||||||
.limit(5),
|
|
||||||
]);
|
|
||||||
|
|
||||||
// Calculate totals
|
|
||||||
const todaySalesTotal = (salesToday || []).reduce(
|
|
||||||
(sum, s) => sum + Number(s.amount),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
const totalCredits = (creditsData || []).reduce(
|
|
||||||
(sum, c) => sum + Number(c.amount),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
const totalRepayments = (repaymentsData || []).reduce(
|
|
||||||
(sum, r) => sum + Number(r.amount),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
const monthRepaymentsTotal = (repaymentsData || [])
|
|
||||||
.filter((r) => r.repayment_date >= firstOfMonthISO)
|
|
||||||
.reduce((sum, r) => sum + Number(r.amount), 0);
|
|
||||||
|
|
||||||
// Combine activity
|
|
||||||
const activity: ActivityItem[] = [
|
|
||||||
...(recentSales || []).map((s) => ({
|
|
||||||
id: s.id,
|
|
||||||
type: 'sale' as const,
|
|
||||||
amount: Number(s.amount),
|
|
||||||
date: s.sale_date,
|
|
||||||
note: s.note,
|
|
||||||
})),
|
|
||||||
...(recentCredits || []).map((c) => ({
|
|
||||||
id: c.id,
|
|
||||||
type: 'credit' as const,
|
|
||||||
amount: Number(c.amount),
|
|
||||||
date: c.credit_date,
|
|
||||||
customerName: (c.credit_customers as any)?.name,
|
|
||||||
note: c.description,
|
|
||||||
customerId: c.customer_id,
|
|
||||||
})),
|
|
||||||
...(recentRepayments || []).map((r) => ({
|
|
||||||
id: r.id,
|
|
||||||
type: 'repayment' as const,
|
|
||||||
amount: Number(r.amount),
|
|
||||||
date: r.repayment_date,
|
|
||||||
customerName: (r.credit_customers as any)?.name,
|
|
||||||
note: r.note,
|
|
||||||
customerId: r.customer_id,
|
|
||||||
})),
|
|
||||||
].sort((a, b) => b.id.localeCompare(a.id)); // Simplified sort for MVP, ideally use created_at
|
|
||||||
|
|
||||||
setSummary({
|
|
||||||
todaySales: todaySalesTotal,
|
|
||||||
outstandingCredit: Math.max(0, totalCredits - totalRepayments),
|
|
||||||
monthRepayments: monthRepaymentsTotal,
|
|
||||||
recentActivity: activity.slice(0, 10),
|
|
||||||
});
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error('Error fetching dashboard data:', err);
|
|
||||||
setError('Could not load dashboard data');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [user]);
|
|
||||||
|
|
||||||
useIonViewWillEnter(() => {
|
|
||||||
fetchData();
|
|
||||||
}, [fetchData]);
|
|
||||||
|
|
||||||
const handleRefresh = async (e: CustomEvent) => {
|
|
||||||
await fetchData();
|
|
||||||
e.detail.complete();
|
|
||||||
};
|
|
||||||
|
|
||||||
const getGreeting = () => {
|
|
||||||
const hour = new Date().getHours();
|
|
||||||
if (hour < 12) return 'Good morning';
|
|
||||||
if (hour < 17) return 'Good afternoon';
|
|
||||||
return 'Good evening';
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
<IonPage>
|
||||||
<IonContent
|
<IonHeader>
|
||||||
fullscreen
|
<IonToolbar>
|
||||||
style={{
|
<IonTitle>Home</IonTitle>
|
||||||
'--background':
|
</IonToolbar>
|
||||||
'linear-gradient(160deg, rgba(199,210,254,0.45) 0%, #f0f4ff 58%, #f8fafc 100%)',
|
</IonHeader>
|
||||||
}}
|
<IonContent className="ion-padding">
|
||||||
>
|
<p>Welcome! Start building your app here.</p>
|
||||||
<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>
|
|
||||||
<IonRefresherContent />
|
|
||||||
</IonRefresher>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: 'calc(16px + var(--ion-safe-area-top)) 20px 16px',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<div className="secondary-text">{getGreeting()}</div>
|
|
||||||
<h1 className="bold" style={{ margin: '0', fontSize: '20px' }}>
|
|
||||||
{profile?.shop_name || profile?.full_name || 'My Shop'}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="icon-container"
|
|
||||||
style={{
|
|
||||||
borderRadius: '999px',
|
|
||||||
background: 'var(--color-accent-soft)',
|
|
||||||
}}
|
|
||||||
onClick={() => setShowQuickActions(true)}
|
|
||||||
>
|
|
||||||
<IonIcon icon={personCircleOutline} style={{ fontSize: '24px' }} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="page-padding">
|
|
||||||
<MetricCard
|
|
||||||
label="Today's Sales"
|
|
||||||
value={summary.todaySales}
|
|
||||||
fullWidth
|
|
||||||
loading={loading}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="metric-pair-row" style={{ marginTop: '12px' }}>
|
|
||||||
<MetricCard
|
|
||||||
label="Outstanding"
|
|
||||||
value={summary.outstandingCredit}
|
|
||||||
icon={walletOutline}
|
|
||||||
loading={loading}
|
|
||||||
/>
|
|
||||||
<MetricCard
|
|
||||||
label="Repaid (Month)"
|
|
||||||
value={summary.monthRepayments}
|
|
||||||
icon={checkmarkCircleOutline}
|
|
||||||
loading={loading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="pill-toggle"
|
|
||||||
style={{ marginTop: '12px', background: '#ffffff', padding: '8px' }}
|
|
||||||
>
|
|
||||||
<IonButton
|
|
||||||
fill="clear"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
fontSize: '13px',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
onClick={() => history.push('/sale/new')}
|
|
||||||
>
|
|
||||||
<IonIcon icon={addCircleOutline} slot="start" />
|
|
||||||
Add Sale
|
|
||||||
</IonButton>
|
|
||||||
<IonButton
|
|
||||||
fill="clear"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
fontSize: '13px',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
onClick={() => history.push('/credit/new')}
|
|
||||||
>
|
|
||||||
<IonIcon icon={personAddOutline} slot="start" />
|
|
||||||
Credit
|
|
||||||
</IonButton>
|
|
||||||
<IonButton
|
|
||||||
fill="clear"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
fontSize: '13px',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
onClick={() => history.push('/repayment/new')}
|
|
||||||
>
|
|
||||||
<IonIcon icon={cashOutline} slot="start" />
|
|
||||||
Repay
|
|
||||||
</IonButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="section-header">
|
|
||||||
<h2>Recent activity</h2>
|
|
||||||
<span className="see-all" onClick={() => history.push('/history')}>
|
|
||||||
See all
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="page-padding" style={{ paddingBottom: '120px' }}>
|
|
||||||
{loading ? (
|
|
||||||
<div className="widget-card" style={{ gap: '16px' }}>
|
|
||||||
{[1, 2, 3].map((i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
style={{ display: 'flex', gap: '12px', alignItems: 'center' }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '40px',
|
|
||||||
height: '40px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div style={{ flex: 1 }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '60%',
|
|
||||||
height: '12px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
marginBottom: '6px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '40%',
|
|
||||||
height: '10px',
|
|
||||||
background: 'var(--color-surface-secondary)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : summary.recentActivity.length > 0 ? (
|
|
||||||
<div className="widget-card" style={{ padding: '8px 16px' }}>
|
|
||||||
{summary.recentActivity.map((item) => (
|
|
||||||
<ActivityRow
|
|
||||||
key={`${item.type}-${item.id}`}
|
|
||||||
item={item}
|
|
||||||
onClick={
|
|
||||||
item.customerId
|
|
||||||
? () => history.push(`/customers/${item.customerId}`)
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<EmptyState
|
|
||||||
icon={receiptOutline}
|
|
||||||
title="No activity yet"
|
|
||||||
description="Record your first sale or credit to see it here."
|
|
||||||
actionText="Add Sale"
|
|
||||||
onAction={() => history.push('/sale/new')}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<IonActionSheet
|
|
||||||
isOpen={showQuickActions}
|
|
||||||
onDidDismiss={() => setShowQuickActions(false)}
|
|
||||||
header="Settings"
|
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: 'Sign Out',
|
|
||||||
role: 'destructive',
|
|
||||||
handler: () => {
|
|
||||||
supabase.auth.signOut();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'Cancel',
|
|
||||||
role: 'cancel',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</IonContent>
|
</IonContent>
|
||||||
</IonPage>
|
</IonPage>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default Home;
|
export default Home;
|
||||||
|
|||||||
@@ -1,180 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import {
|
|
||||||
IonContent,
|
|
||||||
IonPage,
|
|
||||||
IonInput,
|
|
||||||
IonButton,
|
|
||||||
IonSpinner,
|
|
||||||
IonIcon,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline } from 'ionicons/icons';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
|
|
||||||
const NewPasswordPage: React.FC = () => {
|
|
||||||
const [password, setPassword] = useState('');
|
|
||||||
const [confirmPassword, setConfirmPassword] = useState('');
|
|
||||||
const [submitting, setSubmitting] = useState(false);
|
|
||||||
const [message, setMessage] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
const showMessage = (msg: string) => {
|
|
||||||
setMessage(msg);
|
|
||||||
setTimeout(() => setMessage(null), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUpdate = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!password || !confirmPassword) {
|
|
||||||
showMessage('Please fill in all fields');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (password.length < 6) {
|
|
||||||
showMessage('Password must be at least 6 characters');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (password !== confirmPassword) {
|
|
||||||
showMessage('Passwords do not match');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSubmitting(true);
|
|
||||||
setMessage(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { error } = await supabase.auth.updateUser({ password });
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
|
|
||||||
history.push('/home');
|
|
||||||
} catch (err: any) {
|
|
||||||
showMessage(err.message || 'An error occurred');
|
|
||||||
} finally {
|
|
||||||
setSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonContent
|
|
||||||
fullscreen
|
|
||||||
style={{
|
|
||||||
'--background':
|
|
||||||
'linear-gradient(160deg, rgba(199,210,254,0.52) 0%, #f0f4ff 58%, #f8fafc 100%)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="auth-shell">
|
|
||||||
<IonButton
|
|
||||||
fill="clear"
|
|
||||||
color="dark"
|
|
||||||
onClick={() => history.push('/auth')}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 'calc(var(--ion-safe-area-top, 0px) + 8px)',
|
|
||||||
left: '8px',
|
|
||||||
'--padding-start': '8px',
|
|
||||||
'--padding-end': '8px',
|
|
||||||
zIndex: 10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
width: '44px',
|
|
||||||
height: '44px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon icon={chevronBackOutline} />
|
|
||||||
</div>
|
|
||||||
</IonButton>
|
|
||||||
|
|
||||||
<div style={{ marginTop: '80px' }}>
|
|
||||||
<h1
|
|
||||||
className="bold"
|
|
||||||
style={{ fontSize: '24px', margin: '0 0 8px 0' }}
|
|
||||||
>
|
|
||||||
Create new password
|
|
||||||
</h1>
|
|
||||||
<p
|
|
||||||
className="secondary-text"
|
|
||||||
style={{ margin: '0', fontSize: '14px' }}
|
|
||||||
>
|
|
||||||
Set a strong password to protect your account.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="auth-card">
|
|
||||||
<form
|
|
||||||
onSubmit={handleUpdate}
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
|
|
||||||
>
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonInput
|
|
||||||
label="New Password"
|
|
||||||
labelPlacement="floating"
|
|
||||||
type="password"
|
|
||||||
placeholder="Min. 6 characters"
|
|
||||||
value={password}
|
|
||||||
onIonChange={(e) => setPassword(e.detail.value!)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonInput
|
|
||||||
label="Confirm Password"
|
|
||||||
labelPlacement="floating"
|
|
||||||
type="password"
|
|
||||||
placeholder="Repeat your password"
|
|
||||||
value={confirmPassword}
|
|
||||||
onIonChange={(e) => setConfirmPassword(e.detail.value!)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{message && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-danger-soft)',
|
|
||||||
color: 'var(--ion-color-danger-shade)',
|
|
||||||
padding: '12px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
fontSize: '13px',
|
|
||||||
textAlign: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<IonButton
|
|
||||||
type="submit"
|
|
||||||
expand="block"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
height: '52px',
|
|
||||||
'--border-radius': 'var(--radius-pill)',
|
|
||||||
marginTop: '8px',
|
|
||||||
}}
|
|
||||||
disabled={submitting}
|
|
||||||
>
|
|
||||||
{submitting ? (
|
|
||||||
<IonSpinner name="crescent" />
|
|
||||||
) : (
|
|
||||||
'Update password'
|
|
||||||
)}
|
|
||||||
</IonButton>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NewPasswordPage;
|
|
||||||
@@ -1,353 +0,0 @@
|
|||||||
import React, { useState, useEffect, useMemo } from 'react';
|
|
||||||
import {
|
|
||||||
IonContent,
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonTitle,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonInput,
|
|
||||||
IonTextarea,
|
|
||||||
IonSpinner,
|
|
||||||
IonLabel,
|
|
||||||
IonSelect,
|
|
||||||
IonSelectOption,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline } from 'ionicons/icons';
|
|
||||||
import { useHistory, useLocation } from 'react-router-dom';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { getTodayISO } from '../utils/dates';
|
|
||||||
import MoneyInput from '../components/MoneyInput';
|
|
||||||
import { parseMoney, formatMoney } from '../utils/money';
|
|
||||||
import EmptyState from '../components/EmptyState';
|
|
||||||
|
|
||||||
interface CustomerWithBalance {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
balance: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const RepaymentFormPage: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const location = useLocation<{ customerId?: string }>();
|
|
||||||
const { user, profile } = useAuth();
|
|
||||||
const currency = profile?.currency || 'USD';
|
|
||||||
|
|
||||||
const [customers, setCustomers] = useState<CustomerWithBalance[]>([]);
|
|
||||||
const [selectedCustomerId, setSelectedCustomerId] = useState<string>(
|
|
||||||
location.state?.customerId || ''
|
|
||||||
);
|
|
||||||
const [amount, setAmount] = useState('');
|
|
||||||
const [repaymentDate, setRepaymentDate] = useState(getTodayISO());
|
|
||||||
const [note, setNote] = useState('');
|
|
||||||
const [submitting, setSubmitting] = useState(false);
|
|
||||||
const [loadingCustomers, setLoadingCustomers] = useState(true);
|
|
||||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
||||||
const [message, setMessage] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchCustomersAndBalances = async () => {
|
|
||||||
if (!user) return;
|
|
||||||
try {
|
|
||||||
const [
|
|
||||||
{ data: customersData },
|
|
||||||
{ data: creditsData },
|
|
||||||
{ data: repaymentsData },
|
|
||||||
] = await Promise.all([
|
|
||||||
supabase
|
|
||||||
.from('credit_customers')
|
|
||||||
.select('id, name')
|
|
||||||
.eq('user_id', user.id),
|
|
||||||
supabase
|
|
||||||
.from('credits')
|
|
||||||
.select('customer_id, amount')
|
|
||||||
.eq('user_id', user.id),
|
|
||||||
supabase
|
|
||||||
.from('repayments')
|
|
||||||
.select('customer_id, amount')
|
|
||||||
.eq('user_id', user.id),
|
|
||||||
]);
|
|
||||||
|
|
||||||
const customerBalances: CustomerWithBalance[] = (
|
|
||||||
customersData || []
|
|
||||||
).map((c) => {
|
|
||||||
const totalCredits = (creditsData || [])
|
|
||||||
.filter((cr) => cr.customer_id === c.id)
|
|
||||||
.reduce((sum, cr) => sum + Number(cr.amount), 0);
|
|
||||||
const totalRepayments = (repaymentsData || [])
|
|
||||||
.filter((r) => r.customer_id === c.id)
|
|
||||||
.reduce((sum, r) => sum + Number(r.amount), 0);
|
|
||||||
return {
|
|
||||||
id: c.id,
|
|
||||||
name: c.name,
|
|
||||||
balance: Math.max(0, totalCredits - totalRepayments),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Filter for customers with an outstanding balance
|
|
||||||
const activeCustomers = customerBalances.filter((c) => c.balance > 0);
|
|
||||||
setCustomers(activeCustomers);
|
|
||||||
|
|
||||||
// If a customer was passed in but has no balance, we should handle it
|
|
||||||
if (
|
|
||||||
selectedCustomerId &&
|
|
||||||
!activeCustomers.find((c) => c.id === selectedCustomerId)
|
|
||||||
) {
|
|
||||||
setSelectedCustomerId('');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error fetching customers for repayment:', err);
|
|
||||||
} finally {
|
|
||||||
setLoadingCustomers(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchCustomersAndBalances();
|
|
||||||
}, [user, selectedCustomerId]);
|
|
||||||
|
|
||||||
const selectedCustomer = useMemo(
|
|
||||||
() => customers.find((c) => c.id === selectedCustomerId),
|
|
||||||
[customers, selectedCustomerId]
|
|
||||||
);
|
|
||||||
|
|
||||||
const validate = () => {
|
|
||||||
const newErrors: Record<string, string> = {};
|
|
||||||
const parsedAmount = parseMoney(amount);
|
|
||||||
|
|
||||||
if (!selectedCustomerId) {
|
|
||||||
newErrors.customer = 'Please select a customer';
|
|
||||||
} else if (selectedCustomer && parsedAmount > selectedCustomer.balance) {
|
|
||||||
newErrors.amount = `Amount cannot exceed outstanding balance of ${formatMoney(
|
|
||||||
selectedCustomer.balance,
|
|
||||||
currency
|
|
||||||
)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (parsedAmount <= 0) {
|
|
||||||
newErrors.amount = 'Amount must be greater than 0';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!repaymentDate) {
|
|
||||||
newErrors.date = 'Date is required';
|
|
||||||
}
|
|
||||||
|
|
||||||
setErrors(newErrors);
|
|
||||||
return Object.keys(newErrors).length === 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
if (!validate() || !user) return;
|
|
||||||
|
|
||||||
setSubmitting(true);
|
|
||||||
setMessage(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { error } = await supabase.from('repayments').insert([
|
|
||||||
{
|
|
||||||
user_id: user.id,
|
|
||||||
customer_id: selectedCustomerId,
|
|
||||||
amount: parseMoney(amount),
|
|
||||||
repayment_date: repaymentDate,
|
|
||||||
note: note.trim() || null,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
|
|
||||||
history.goBack();
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error('Error saving repayment:', err);
|
|
||||||
setMessage(err.message || 'Could not save repayment');
|
|
||||||
setTimeout(() => setMessage(null), 4000);
|
|
||||||
} finally {
|
|
||||||
setSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar style={{ '--background': '#f0f4ff' }}>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton color="dark" onClick={() => history.goBack()}>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle className="bold">Record repayment</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent className="ion-padding" style={{ '--background': '#f0f4ff' }}>
|
|
||||||
{!loadingCustomers && customers.length === 0 ? (
|
|
||||||
<EmptyState
|
|
||||||
icon="wallet-outline"
|
|
||||||
title="No outstanding credit"
|
|
||||||
description="You don't have any customers with an outstanding balance right now."
|
|
||||||
actionText="Add Credit"
|
|
||||||
onAction={() => history.push('/credit/new')}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="form-card">
|
|
||||||
<div className="form-field">
|
|
||||||
<IonLabel
|
|
||||||
className="semibold"
|
|
||||||
style={{
|
|
||||||
marginBottom: '8px',
|
|
||||||
display: 'block',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Select Customer
|
|
||||||
</IonLabel>
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonSelect
|
|
||||||
interface="action-sheet"
|
|
||||||
placeholder="Choose a customer"
|
|
||||||
value={selectedCustomerId}
|
|
||||||
onIonChange={(e) => setSelectedCustomerId(e.detail.value)}
|
|
||||||
style={{ width: '100%' }}
|
|
||||||
disabled={loadingCustomers}
|
|
||||||
>
|
|
||||||
{customers.map((c) => (
|
|
||||||
<IonSelectOption key={c.id} value={c.id}>
|
|
||||||
{c.name} ({formatMoney(c.balance, currency)})
|
|
||||||
</IonSelectOption>
|
|
||||||
))}
|
|
||||||
</IonSelect>
|
|
||||||
</div>
|
|
||||||
{errors.customer && (
|
|
||||||
<IonLabel
|
|
||||||
color="danger"
|
|
||||||
style={{ fontSize: '12px', marginTop: '4px' }}
|
|
||||||
>
|
|
||||||
{errors.customer}
|
|
||||||
</IonLabel>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{selectedCustomer && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'rgba(99,102,241,0.10)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '16px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className="tertiary-text" style={{ fontSize: '10px' }}>
|
|
||||||
OUTSTANDING BALANCE
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className="bold tabular"
|
|
||||||
style={{
|
|
||||||
fontSize: '22px',
|
|
||||||
color: 'var(--ion-color-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{formatMoney(selectedCustomer.balance, currency)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<MoneyInput
|
|
||||||
label="Repayment amount"
|
|
||||||
value={amount}
|
|
||||||
onValueChange={(val) => {
|
|
||||||
setAmount(val);
|
|
||||||
if (errors.amount) setErrors({ ...errors, amount: '' });
|
|
||||||
}}
|
|
||||||
error={errors.amount}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="form-field">
|
|
||||||
<IonLabel
|
|
||||||
className="semibold"
|
|
||||||
style={{
|
|
||||||
marginBottom: '8px',
|
|
||||||
display: 'block',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Repayment date
|
|
||||||
</IonLabel>
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonInput
|
|
||||||
type="date"
|
|
||||||
value={repaymentDate}
|
|
||||||
onIonChange={(e) => setRepaymentDate(e.detail.value!)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{errors.date && (
|
|
||||||
<IonLabel
|
|
||||||
color="danger"
|
|
||||||
style={{ fontSize: '12px', marginTop: '4px' }}
|
|
||||||
>
|
|
||||||
{errors.date}
|
|
||||||
</IonLabel>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-field">
|
|
||||||
<IonLabel
|
|
||||||
className="semibold"
|
|
||||||
style={{
|
|
||||||
marginBottom: '8px',
|
|
||||||
display: 'block',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Note (optional)
|
|
||||||
</IonLabel>
|
|
||||||
<div
|
|
||||||
className="input-wrapper"
|
|
||||||
style={{ minHeight: '96px', padding: '8px 16px' }}
|
|
||||||
>
|
|
||||||
<IonTextarea
|
|
||||||
placeholder="e.g. Paid in full"
|
|
||||||
value={note}
|
|
||||||
onIonChange={(e) => setNote(e.detail.value!)}
|
|
||||||
rows={4}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{message && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-danger-soft)',
|
|
||||||
color: 'var(--ion-color-danger-shade)',
|
|
||||||
padding: '12px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<IonButton
|
|
||||||
expand="block"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
height: '52px',
|
|
||||||
'--border-radius': 'var(--radius-pill)',
|
|
||||||
marginTop: '16px',
|
|
||||||
}}
|
|
||||||
disabled={submitting || loadingCustomers}
|
|
||||||
onClick={handleSave}
|
|
||||||
>
|
|
||||||
{submitting ? <IonSpinner name="crescent" /> : 'Save repayment'}
|
|
||||||
</IonButton>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RepaymentFormPage;
|
|
||||||
@@ -1,188 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import {
|
|
||||||
IonContent,
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonTitle,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonInput,
|
|
||||||
IonTextarea,
|
|
||||||
IonSpinner,
|
|
||||||
IonLabel,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline } from 'ionicons/icons';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { getTodayISO } from '../utils/dates';
|
|
||||||
import MoneyInput from '../components/MoneyInput';
|
|
||||||
import { parseMoney } from '../utils/money';
|
|
||||||
|
|
||||||
const SaleFormPage: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const { user } = useAuth();
|
|
||||||
|
|
||||||
const [amount, setAmount] = useState('');
|
|
||||||
const [saleDate, setSaleDate] = useState(getTodayISO());
|
|
||||||
const [note, setNote] = useState('');
|
|
||||||
const [submitting, setSubmitting] = useState(false);
|
|
||||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
||||||
const [message, setMessage] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const validate = () => {
|
|
||||||
const newErrors: Record<string, string> = {};
|
|
||||||
const parsedAmount = parseMoney(amount);
|
|
||||||
|
|
||||||
if (parsedAmount <= 0) {
|
|
||||||
newErrors.amount = 'Amount must be greater than 0';
|
|
||||||
}
|
|
||||||
if (!saleDate) {
|
|
||||||
newErrors.date = 'Date is required';
|
|
||||||
}
|
|
||||||
|
|
||||||
setErrors(newErrors);
|
|
||||||
return Object.keys(newErrors).length === 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
if (!validate() || !user) return;
|
|
||||||
|
|
||||||
setSubmitting(true);
|
|
||||||
setMessage(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { error } = await supabase.from('sales').insert([
|
|
||||||
{
|
|
||||||
user_id: user.id,
|
|
||||||
amount: parseMoney(amount),
|
|
||||||
sale_date: saleDate,
|
|
||||||
note: note.trim() || null,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
|
|
||||||
history.goBack();
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error('Error saving sale:', err);
|
|
||||||
setMessage(err.message || 'Could not save sale');
|
|
||||||
setTimeout(() => setMessage(null), 4000);
|
|
||||||
} finally {
|
|
||||||
setSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar style={{ '--background': '#f0f4ff' }}>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton color="dark" onClick={() => history.goBack()}>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle className="bold">Add sale</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent className="ion-padding" style={{ '--background': '#f0f4ff' }}>
|
|
||||||
<div className="form-card">
|
|
||||||
<MoneyInput
|
|
||||||
label="Sale amount"
|
|
||||||
value={amount}
|
|
||||||
onValueChange={(val) => {
|
|
||||||
setAmount(val);
|
|
||||||
if (errors.amount) setErrors({ ...errors, amount: '' });
|
|
||||||
}}
|
|
||||||
error={errors.amount}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="form-field">
|
|
||||||
<IonLabel
|
|
||||||
className="semibold"
|
|
||||||
style={{
|
|
||||||
marginBottom: '8px',
|
|
||||||
display: 'block',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Sale date
|
|
||||||
</IonLabel>
|
|
||||||
<div className="input-wrapper">
|
|
||||||
<IonInput
|
|
||||||
type="date"
|
|
||||||
value={saleDate}
|
|
||||||
onIonChange={(e) => setSaleDate(e.detail.value!)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{errors.date && (
|
|
||||||
<IonLabel
|
|
||||||
color="danger"
|
|
||||||
style={{ fontSize: '12px', marginTop: '4px' }}
|
|
||||||
>
|
|
||||||
{errors.date}
|
|
||||||
</IonLabel>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-field">
|
|
||||||
<IonLabel
|
|
||||||
className="semibold"
|
|
||||||
style={{
|
|
||||||
marginBottom: '8px',
|
|
||||||
display: 'block',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Note (optional)
|
|
||||||
</IonLabel>
|
|
||||||
<div
|
|
||||||
className="input-wrapper"
|
|
||||||
style={{ minHeight: '96px', padding: '8px 16px' }}
|
|
||||||
>
|
|
||||||
<IonTextarea
|
|
||||||
placeholder="e.g. Morning rush items"
|
|
||||||
value={note}
|
|
||||||
onIonChange={(e) => setNote(e.detail.value!)}
|
|
||||||
rows={4}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{message && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-danger-soft)',
|
|
||||||
color: 'var(--ion-color-danger-shade)',
|
|
||||||
padding: '12px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
fontSize: '13px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<IonButton
|
|
||||||
expand="block"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
height: '52px',
|
|
||||||
'--border-radius': 'var(--radius-pill)',
|
|
||||||
marginTop: '16px',
|
|
||||||
}}
|
|
||||||
disabled={submitting}
|
|
||||||
onClick={handleSave}
|
|
||||||
>
|
|
||||||
{submitting ? <IonSpinner name="crescent" /> : 'Save sale'}
|
|
||||||
</IonButton>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SaleFormPage;
|
|
||||||
@@ -1,275 +0,0 @@
|
|||||||
import React, { useState, useRef, useEffect } from 'react';
|
|
||||||
import {
|
|
||||||
IonContent,
|
|
||||||
IonPage,
|
|
||||||
IonInput,
|
|
||||||
IonButton,
|
|
||||||
IonSpinner,
|
|
||||||
IonIcon,
|
|
||||||
IonText,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline } from 'ionicons/icons';
|
|
||||||
import { useHistory, useLocation } from 'react-router-dom';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
|
|
||||||
interface LocationState {
|
|
||||||
email: string;
|
|
||||||
type?: 'signup' | 'recovery';
|
|
||||||
resent?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const VerifyEmailPage: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const location = useLocation<LocationState>();
|
|
||||||
const email = location.state?.email || '';
|
|
||||||
const type = location.state?.type || 'signup';
|
|
||||||
|
|
||||||
const [digits, setDigits] = useState<string[]>(['', '', '', '', '', '']);
|
|
||||||
const [submitting, setSubmitting] = useState(false);
|
|
||||||
const [resending, setResending] = useState(false);
|
|
||||||
const [cooldown, setCooldown] = useState(location.state?.resent ? 60 : 0);
|
|
||||||
const [message, setMessage] = useState<string | null>(null);
|
|
||||||
const [messageType, setMessageType] = useState<'error' | 'success'>('error');
|
|
||||||
|
|
||||||
const inputRefs = useRef<HTMLIonInputElement[]>([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (cooldown > 0) {
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
setCooldown((c) => c - 1);
|
|
||||||
}, 1000);
|
|
||||||
return () => clearInterval(timer);
|
|
||||||
}
|
|
||||||
}, [cooldown]);
|
|
||||||
|
|
||||||
const showMessage = (msg: string, type: 'error' | 'success' = 'error') => {
|
|
||||||
setMessage(msg);
|
|
||||||
setMessageType(type);
|
|
||||||
setTimeout(() => setMessage(null), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDigitChange = (index: number, value: string) => {
|
|
||||||
const newDigits = [...digits];
|
|
||||||
// Only take the last character (for overwriting)
|
|
||||||
const val = value.slice(-1);
|
|
||||||
|
|
||||||
if (val && !/^\d+$/.test(val)) return;
|
|
||||||
|
|
||||||
newDigits[index] = val;
|
|
||||||
setDigits(newDigits);
|
|
||||||
|
|
||||||
if (val && index < 5) {
|
|
||||||
inputRefs.current[index + 1]?.setFocus();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleKeyDown = (index: number, e: any) => {
|
|
||||||
if (e.key === 'Backspace' && !digits[index] && index > 0) {
|
|
||||||
inputRefs.current[index - 1]?.setFocus();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleVerify = async () => {
|
|
||||||
const code = digits.join('');
|
|
||||||
if (code.length < 6) {
|
|
||||||
showMessage('Please enter the 6-digit code');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSubmitting(true);
|
|
||||||
setMessage(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { data, error } = await supabase.auth.verifyOtp({
|
|
||||||
email,
|
|
||||||
token: code,
|
|
||||||
type: (type === 'recovery' ? 'recovery' : 'signup') as any,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
|
|
||||||
if (type === 'recovery') {
|
|
||||||
history.push('/new-password');
|
|
||||||
} else {
|
|
||||||
history.push('/home');
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
showMessage(err.message || 'Invalid or expired code');
|
|
||||||
} finally {
|
|
||||||
setSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleResend = async () => {
|
|
||||||
if (cooldown > 0) return;
|
|
||||||
|
|
||||||
setResending(true);
|
|
||||||
try {
|
|
||||||
const { error } = await supabase.auth.resend({
|
|
||||||
type: (type === 'recovery' ? 'recovery' : 'signup') as any,
|
|
||||||
email,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) throw error;
|
|
||||||
|
|
||||||
showMessage('A new code has been sent', 'success');
|
|
||||||
setCooldown(60);
|
|
||||||
} catch (err: any) {
|
|
||||||
showMessage(err.message || 'Failed to resend code');
|
|
||||||
} finally {
|
|
||||||
setResending(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonContent
|
|
||||||
fullscreen
|
|
||||||
style={{
|
|
||||||
'--background':
|
|
||||||
'linear-gradient(160deg, rgba(199,210,254,0.52) 0%, #f0f4ff 58%, #f8fafc 100%)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="auth-shell">
|
|
||||||
<IonButton
|
|
||||||
fill="clear"
|
|
||||||
color="dark"
|
|
||||||
onClick={() => history.push('/auth')}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 'calc(var(--ion-safe-area-top, 0px) + 8px)',
|
|
||||||
left: '8px',
|
|
||||||
'--padding-start': '8px',
|
|
||||||
'--padding-end': '8px',
|
|
||||||
zIndex: 10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
width: '44px',
|
|
||||||
height: '44px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon icon={chevronBackOutline} />
|
|
||||||
</div>
|
|
||||||
</IonButton>
|
|
||||||
|
|
||||||
<div style={{ marginTop: '80px' }}>
|
|
||||||
<h1
|
|
||||||
className="bold"
|
|
||||||
style={{ fontSize: '24px', margin: '0 0 8px 0' }}
|
|
||||||
>
|
|
||||||
Verify your email
|
|
||||||
</h1>
|
|
||||||
<p
|
|
||||||
className="secondary-text"
|
|
||||||
style={{ margin: '0', fontSize: '14px' }}
|
|
||||||
>
|
|
||||||
We've sent a 6-digit code to <span className="bold">{email}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="auth-card">
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}
|
|
||||||
>
|
|
||||||
{digits.map((digit, i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
style={{
|
|
||||||
width: '44px',
|
|
||||||
height: '52px',
|
|
||||||
background: '#e8edf8',
|
|
||||||
borderRadius: '12px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonInput
|
|
||||||
ref={(el) => {
|
|
||||||
inputRefs.current[i] = el!;
|
|
||||||
}}
|
|
||||||
value={digit}
|
|
||||||
onIonInput={(e) => handleDigitChange(i, e.detail.value!)}
|
|
||||||
onKeyDown={(e) => handleKeyDown(i, e)}
|
|
||||||
type="text"
|
|
||||||
inputMode="numeric"
|
|
||||||
style={{
|
|
||||||
textAlign: 'center',
|
|
||||||
fontSize: '22px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: '#111827',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{message && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
messageType === 'error'
|
|
||||||
? 'var(--color-danger-soft)'
|
|
||||||
: 'var(--color-success-soft)',
|
|
||||||
color:
|
|
||||||
messageType === 'error'
|
|
||||||
? 'var(--ion-color-danger-shade)'
|
|
||||||
: 'var(--ion-color-success-shade)',
|
|
||||||
padding: '12px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
fontSize: '13px',
|
|
||||||
textAlign: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<IonButton
|
|
||||||
expand="block"
|
|
||||||
className="bold"
|
|
||||||
style={{
|
|
||||||
height: '52px',
|
|
||||||
'--border-radius': 'var(--radius-pill)',
|
|
||||||
marginTop: '16px',
|
|
||||||
}}
|
|
||||||
disabled={submitting}
|
|
||||||
onClick={handleVerify}
|
|
||||||
>
|
|
||||||
{submitting ? <IonSpinner name="crescent" /> : 'Verify code'}
|
|
||||||
</IonButton>
|
|
||||||
|
|
||||||
<div style={{ textAlign: 'center', marginTop: '8px' }}>
|
|
||||||
<IonText
|
|
||||||
color={cooldown > 0 ? 'medium' : 'primary'}
|
|
||||||
className="semibold"
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
cursor: cooldown > 0 ? 'default' : 'pointer',
|
|
||||||
}}
|
|
||||||
onClick={handleResend}
|
|
||||||
>
|
|
||||||
{resending ? (
|
|
||||||
<IonSpinner name="dots" />
|
|
||||||
) : cooldown > 0 ? (
|
|
||||||
`Resend in ${cooldown}s`
|
|
||||||
) : (
|
|
||||||
'Resend code'
|
|
||||||
)}
|
|
||||||
</IonText>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default VerifyEmailPage;
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { createClient } from '@supabase/supabase-js';
|
|
||||||
import type { Database } from './database.types';
|
|
||||||
|
|
||||||
export const supabase = createClient<Database>(
|
|
||||||
'https://sxdbfylkgcfmsatqipli.supabase.co',
|
|
||||||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InN4ZGJmeWxrZ2NmbXNhdHFpcGxpIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODExMTI5NjcsImV4cCI6MjA5NjY4ODk2N30.8ZvpjRBskCIH3FFnOkWsxZCOwNMX5txinffgXMDinKI',
|
|
||||||
);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
+48
-274
@@ -1,291 +1,65 @@
|
|||||||
/* ShopKeep — Custom Palette & Shared Styles */
|
/* Ionic CSS Variables — customise to match your app's brand */
|
||||||
:root {
|
:root {
|
||||||
/** ShopKeep Brand Palette **/
|
--ion-color-primary: #3880ff;
|
||||||
--ion-color-primary: #6366f1;
|
--ion-color-primary-rgb: 56, 128, 255;
|
||||||
--ion-color-primary-rgb: 99, 102, 241;
|
|
||||||
--ion-color-primary-contrast: #ffffff;
|
--ion-color-primary-contrast: #ffffff;
|
||||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||||
--ion-color-primary-shade: #5759d4;
|
--ion-color-primary-shade: #3171e0;
|
||||||
--ion-color-primary-tint: #7375f2;
|
--ion-color-primary-tint: #4c8dff;
|
||||||
|
|
||||||
--ion-color-secondary: #818cf8;
|
--ion-color-secondary: #3dc2ff;
|
||||||
--ion-color-secondary-rgb: 129, 140, 248;
|
--ion-color-secondary-rgb: 61, 194, 255;
|
||||||
--ion-color-secondary-contrast: #ffffff;
|
--ion-color-secondary-contrast: #ffffff;
|
||||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||||
--ion-color-secondary-shade: #727bda;
|
--ion-color-secondary-shade: #36abe0;
|
||||||
--ion-color-secondary-tint: #8e98f9;
|
--ion-color-secondary-tint: #50c8ff;
|
||||||
|
|
||||||
--ion-color-tertiary: #c7d2fe;
|
--ion-color-tertiary: #5260ff;
|
||||||
--ion-color-tertiary-rgb: 199, 210, 254;
|
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||||
--ion-color-tertiary-contrast: #111827;
|
--ion-color-tertiary-contrast: #ffffff;
|
||||||
--ion-color-tertiary-contrast-rgb: 17, 24, 39;
|
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||||
--ion-color-tertiary-shade: #afb9e0;
|
--ion-color-tertiary-shade: #4854e0;
|
||||||
--ion-color-tertiary-tint: #cdd7fe;
|
--ion-color-tertiary-tint: #6370ff;
|
||||||
|
|
||||||
--ion-color-success: #3aa67a;
|
--ion-color-success: #2dd36f;
|
||||||
--ion-color-success-rgb: 58, 166, 122;
|
--ion-color-success-rgb: 45, 211, 111;
|
||||||
--ion-color-success-contrast: #ffffff;
|
--ion-color-success-contrast: #ffffff;
|
||||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||||
--ion-color-success-shade: #33926b;
|
--ion-color-success-shade: #28ba62;
|
||||||
--ion-color-success-tint: #4eb088;
|
--ion-color-success-tint: #42d77d;
|
||||||
|
|
||||||
--ion-color-danger: #cf6679;
|
--ion-color-warning: #ffc409;
|
||||||
--ion-color-danger-rgb: 207, 102, 121;
|
--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: #ffffff;
|
||||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||||
--ion-color-danger-shade: #b65a6a;
|
--ion-color-danger-shade: #cf3c4f;
|
||||||
--ion-color-danger-tint: #d57587;
|
--ion-color-danger-tint: #ed576b;
|
||||||
|
|
||||||
--ion-color-light: #f3f5fb;
|
--ion-color-dark: #222428;
|
||||||
--ion-color-light-rgb: 243, 245, 251;
|
--ion-color-dark-rgb: 34, 36, 40;
|
||||||
--ion-color-light-contrast: #111827;
|
--ion-color-dark-contrast: #ffffff;
|
||||||
--ion-color-light-contrast-rgb: 17, 24, 39;
|
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||||
--ion-color-light-shade: #d6d8dd;
|
--ion-color-dark-shade: #1e2023;
|
||||||
--ion-color-light-tint: #f4f6fb;
|
--ion-color-dark-tint: #383a3e;
|
||||||
|
|
||||||
/** App Custom Tokens **/
|
--ion-color-medium: #92949c;
|
||||||
--color-bg: #f0f4ff;
|
--ion-color-medium-rgb: 146, 148, 156;
|
||||||
--color-surface: #ffffff;
|
--ion-color-medium-contrast: #ffffff;
|
||||||
--color-surface-secondary: #e8edf8;
|
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||||
--color-text-primary: #111827;
|
--ion-color-medium-shade: #808289;
|
||||||
--color-text-secondary: rgba(17, 24, 39, 0.6);
|
--ion-color-medium-tint: #9d9fa6;
|
||||||
--color-text-tertiary: rgba(17, 24, 39, 0.38);
|
|
||||||
--color-accent-soft: rgba(99, 102, 241, 0.18);
|
|
||||||
--color-success-soft: rgba(58, 166, 122, 0.12);
|
|
||||||
--color-danger-soft: rgba(207, 102, 121, 0.12);
|
|
||||||
|
|
||||||
/** Radii **/
|
--ion-color-light: #f4f5f8;
|
||||||
--radius-pill: 999px;
|
--ion-color-light-rgb: 244, 245, 248;
|
||||||
--radius-card: 24px;
|
--ion-color-light-contrast: #000000;
|
||||||
--radius-inner: 12px;
|
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-light-shade: #d7d8da;
|
||||||
/** Typography **/
|
--ion-color-light-tint: #f5f6f9;
|
||||||
--font-tabular: 'SF Mono', 'Roboto Mono', Menlo, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: var(--color-bg);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-family:
|
|
||||||
-apple-system, BlinkMacSystemFont, 'Inter', Roboto, Helvetica, Arial,
|
|
||||||
sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Shared Auth Styles **/
|
|
||||||
.auth-shell {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24px;
|
|
||||||
padding: calc(var(--ion-safe-area-top, 0px) + 18px) 20px
|
|
||||||
calc(var(--ion-safe-area-bottom, 0px) + 28px);
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card {
|
|
||||||
background: var(--color-surface);
|
|
||||||
border-radius: var(--radius-card);
|
|
||||||
padding: 24px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Shared Form Styles **/
|
|
||||||
.form-card {
|
|
||||||
background: var(--color-surface);
|
|
||||||
border-radius: var(--radius-card);
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-field {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-wrapper {
|
|
||||||
background: var(--color-surface-secondary);
|
|
||||||
border-radius: var(--radius-inner);
|
|
||||||
padding: 0 16px;
|
|
||||||
min-height: 52px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-wrapper ion-input,
|
|
||||||
.input-wrapper ion-textarea,
|
|
||||||
.input-wrapper ion-select {
|
|
||||||
--padding-start: 0;
|
|
||||||
--padding-end: 0;
|
|
||||||
--placeholder-color: var(--color-text-tertiary);
|
|
||||||
--placeholder-opacity: 1;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.money-input-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Widget Styles **/
|
|
||||||
.widget-card {
|
|
||||||
background: var(--color-surface);
|
|
||||||
border-radius: var(--radius-card);
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-pair-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-pair-row .widget-card {
|
|
||||||
flex: 1;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-text {
|
|
||||||
animation: skeleton-loading 1s linear infinite alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes skeleton-loading {
|
|
||||||
0% {
|
|
||||||
background-color: var(--color-surface-secondary);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-color: var(--color-surface-secondary);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Icon Containers **/
|
|
||||||
.icon-container {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: var(--radius-inner);
|
|
||||||
background: var(--color-accent-soft);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
color: var(--ion-color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-container ion-icon {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Tab Bar Styling **/
|
|
||||||
ion-tab-bar {
|
|
||||||
--background: var(--color-surface);
|
|
||||||
--border-width: 0;
|
|
||||||
height: calc(64px + var(--ion-safe-area-bottom));
|
|
||||||
padding-bottom: var(--ion-safe-area-bottom);
|
|
||||||
border-top-left-radius: var(--radius-card);
|
|
||||||
border-top-right-radius: var(--radius-card);
|
|
||||||
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-tab-button {
|
|
||||||
--color: var(--color-text-tertiary);
|
|
||||||
--color-selected: var(--ion-color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-tab-button ion-label {
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-tab-button ion-icon {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Generic Utilities **/
|
|
||||||
.tabular {
|
|
||||||
font-family: var(--font-tabular);
|
|
||||||
}
|
|
||||||
|
|
||||||
.semibold {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bold {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tertiary-text {
|
|
||||||
color: var(--color-text-tertiary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 11px;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary-text {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pill-toggle {
|
|
||||||
background: var(--color-surface-secondary);
|
|
||||||
border-radius: var(--radius-pill);
|
|
||||||
display: flex;
|
|
||||||
padding: 4px;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pill-toggle-btn {
|
|
||||||
flex: 1;
|
|
||||||
border-radius: var(--radius-pill);
|
|
||||||
height: 36px;
|
|
||||||
border: none;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
background: transparent;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pill-toggle-btn.active {
|
|
||||||
background: var(--ion-color-primary);
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Page Spacing **/
|
|
||||||
.page-padding {
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin: 24px 20px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header .see-all {
|
|
||||||
color: var(--ion-color-primary);
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Custom Searchbar **/
|
|
||||||
.custom-searchbar {
|
|
||||||
--padding-start: 0;
|
|
||||||
--padding-end: 0;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,73 +0,0 @@
|
|||||||
/**
|
|
||||||
* Date utilities for ShopKeep.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns today's date in YYYY-MM-DD format (local time).
|
|
||||||
*/
|
|
||||||
export const getTodayISO = (): string => {
|
|
||||||
const now = new Date();
|
|
||||||
const year = now.getFullYear();
|
|
||||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
||||||
const day = String(now.getDate()).padStart(2, '0');
|
|
||||||
return `${year}-${month}-${day}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Formats a date string (YYYY-MM-DD) or ISO string for display.
|
|
||||||
*/
|
|
||||||
export const formatDisplayDate = (
|
|
||||||
dateStr: string,
|
|
||||||
options: Intl.DateTimeFormatOptions = {
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
year: 'numeric',
|
|
||||||
}
|
|
||||||
): string => {
|
|
||||||
if (!dateStr) return '';
|
|
||||||
const date = new Date(dateStr);
|
|
||||||
if (isNaN(date.getTime())) return dateStr;
|
|
||||||
return new Intl.DateTimeFormat('en-US', options).format(date);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns a relative date string (Today, Yesterday, or formatted date).
|
|
||||||
*/
|
|
||||||
export const formatRelativeDate = (dateStr: string): string => {
|
|
||||||
const today = getTodayISO();
|
|
||||||
const date = new Date(dateStr);
|
|
||||||
const dateISO = date.toISOString().split('T')[0];
|
|
||||||
|
|
||||||
if (dateISO === today) return 'Today';
|
|
||||||
|
|
||||||
const yesterday = new Date();
|
|
||||||
yesterday.setDate(yesterday.getDate() - 1);
|
|
||||||
const yesterdayISO = yesterday.toISOString().split('T')[0];
|
|
||||||
|
|
||||||
if (dateISO === yesterdayISO) return 'Yesterday';
|
|
||||||
|
|
||||||
return formatDisplayDate(dateStr);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Group items by date.
|
|
||||||
*/
|
|
||||||
export const groupItemsByDate = <T extends { date: string }>(
|
|
||||||
items: T[]
|
|
||||||
): { date: string; items: T[] }[] => {
|
|
||||||
const groups: Record<string, T[]> = {};
|
|
||||||
|
|
||||||
items.forEach((item) => {
|
|
||||||
if (!groups[item.date]) {
|
|
||||||
groups[item.date] = [];
|
|
||||||
}
|
|
||||||
groups[item.date].push(item);
|
|
||||||
});
|
|
||||||
|
|
||||||
return Object.keys(groups)
|
|
||||||
.sort((a, b) => b.localeCompare(a)) // Sort by date descending
|
|
||||||
.map((date) => ({
|
|
||||||
date,
|
|
||||||
items: groups[date],
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
/**
|
|
||||||
* Money utilities for sanitizing, parsing, and formatting currency values.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sanitizes input string to allow only digits and one decimal point.
|
|
||||||
*/
|
|
||||||
export const sanitizeMoneyInput = (value: string): string => {
|
|
||||||
// Remove anything that isn't a digit or a period
|
|
||||||
let sanitized = value.replace(/[^0-9.]/g, '');
|
|
||||||
|
|
||||||
// Ensure only one period exists
|
|
||||||
const parts = sanitized.split('.');
|
|
||||||
if (parts.length > 2) {
|
|
||||||
sanitized = parts[0] + '.' + parts.slice(1).join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Limit to 2 decimal places
|
|
||||||
if (parts.length === 2 && parts[1].length > 2) {
|
|
||||||
sanitized = parts[0] + '.' + parts[1].slice(0, 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
return sanitized;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Parses a sanitized string into a number.
|
|
||||||
*/
|
|
||||||
export const parseMoney = (value: string): number => {
|
|
||||||
const parsed = parseFloat(value);
|
|
||||||
return isNaN(parsed) ? 0 : parsed;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Formats a number as currency.
|
|
||||||
*/
|
|
||||||
export const formatMoney = (
|
|
||||||
amount: number,
|
|
||||||
currency: string = 'USD',
|
|
||||||
locale: string = 'en-US'
|
|
||||||
): string => {
|
|
||||||
return new Intl.NumberFormat(locale, {
|
|
||||||
style: 'currency',
|
|
||||||
currency: currency,
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
maximumFractionDigits: 2,
|
|
||||||
}).format(amount);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the currency symbol for a given currency code.
|
|
||||||
*/
|
|
||||||
export const getCurrencySymbol = (
|
|
||||||
currency: string = 'USD',
|
|
||||||
locale: string = 'en-US'
|
|
||||||
): string => {
|
|
||||||
return (
|
|
||||||
new Intl.NumberFormat(locale, {
|
|
||||||
style: 'currency',
|
|
||||||
currency: currency,
|
|
||||||
})
|
|
||||||
.formatToParts(0)
|
|
||||||
.find((part) => part.type === 'currency')?.value || '$'
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -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,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 { defineConfig, type Plugin } from 'vite';
|
||||||
import react from '@vitejs/plugin-react';
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
|
|||||||
@@ -216,16 +216,16 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@capacitor-firebase/authentication@npm:^8.0.0":
|
"@capacitor-firebase/authentication@npm:^7.0.0":
|
||||||
version: 8.3.0
|
version: 7.5.0
|
||||||
resolution: "@capacitor-firebase/authentication@npm:8.3.0"
|
resolution: "@capacitor-firebase/authentication@npm:7.5.0"
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
"@capacitor/core": ">=8.0.0"
|
"@capacitor/core": ">=7.0.0"
|
||||||
firebase: ^12.6.0
|
firebase: ^11.2.0
|
||||||
peerDependenciesMeta:
|
peerDependenciesMeta:
|
||||||
firebase:
|
firebase:
|
||||||
optional: true
|
optional: true
|
||||||
checksum: 10c0/a52f6ec85d18438ed616c78f29a8cea4a64621d13208a4d79d914344090630ce549f4e2d5d75da94b012e8799b4794e0af8d0e736edd97973b57205b62258ed9
|
checksum: 10c0/aea4854cd6f8f2282bbbfb5cb0e30dc7152cd593a70c6792a1583fa085803f9330a77584f3ae66ee8c9b65b035374c2fe86545b191d57c0814778b6276306e1e
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -1043,11 +1043,11 @@ __metadata:
|
|||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@googlemaps/js-api-loader@npm:^2.0.2":
|
"@googlemaps/js-api-loader@npm:^2.0.2":
|
||||||
version: 2.1.1
|
version: 2.0.2
|
||||||
resolution: "@googlemaps/js-api-loader@npm:2.1.1"
|
resolution: "@googlemaps/js-api-loader@npm:2.0.2"
|
||||||
dependencies:
|
dependencies:
|
||||||
"@types/google.maps": "npm:^3.53.1"
|
"@types/google.maps": "npm:^3.53.1"
|
||||||
checksum: 10c0/06cb6eaf686b838be51efd8293010b7bee42e341e9ad41b42a0ee8909cf06cc5711ba6cfdbcd0c62ff05c8ba35d8622c34130e738bc5844011c8bc457d14de64
|
checksum: 10c0/1bd8f1e117145de83a7cfca7c05cf4cfb2d9095d507497f8b0e590be94de3a6a27a7a3c80801de6f58d77e5a2ce169a6b6d9c9d0dfc20ea1039d890226318c46
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -1086,15 +1086,6 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
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":
|
"@ionic/cli-framework-output@npm:^2.2.8":
|
||||||
version: 2.2.8
|
version: 2.2.8
|
||||||
resolution: "@ionic/cli-framework-output@npm:2.2.8"
|
resolution: "@ionic/cli-framework-output@npm:2.2.8"
|
||||||
@@ -1117,6 +1108,17 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
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":
|
"@ionic/pwa-elements@npm:^3.0.0":
|
||||||
version: 3.4.0
|
version: 3.4.0
|
||||||
resolution: "@ionic/pwa-elements@npm:3.4.0"
|
resolution: "@ionic/pwa-elements@npm:3.4.0"
|
||||||
@@ -1124,22 +1126,36 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@ionic/react-router@npm:8.8.7":
|
"@ionic/react-router@npm:^8.5.0":
|
||||||
version: 8.8.7
|
version: 8.8.8
|
||||||
resolution: "@ionic/react-router@npm:8.8.7"
|
resolution: "@ionic/react-router@npm:8.8.8"
|
||||||
dependencies:
|
dependencies:
|
||||||
"@ionic/react": "npm:8.8.7"
|
"@ionic/react": "npm:8.8.8"
|
||||||
tslib: "npm:*"
|
tslib: "npm:*"
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
react: ">=16.8.6"
|
react: ">=16.8.6"
|
||||||
react-dom: ">=16.8.6"
|
react-dom: ">=16.8.6"
|
||||||
react-router: ^5.0.1
|
react-router: ^5.0.1
|
||||||
react-router-dom: ^5.0.1
|
react-router-dom: ^5.0.1
|
||||||
checksum: 10c0/302d6ad9c0d450cf6466ff18622aa7708af77c1c4a676d2ff39eca6add440fe96d36a157feae146c3da460c32e7799357320b3270740b050ab040a664b9f0ff2
|
checksum: 10c0/be9555ec4dbfd0565cada39d42236eb0b9e2283a13f500b42d5c0c06d6198c17a7be385cfb2ce4f9e89236c71992c30169328b861943a3fe7344c672ad94ae0c
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
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
|
version: 8.8.7
|
||||||
resolution: "@ionic/react@npm:8.8.7"
|
resolution: "@ionic/react@npm:8.8.7"
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -1741,21 +1757,21 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/auth-js@npm:2.108.1":
|
"@supabase/auth-js@npm:2.106.2":
|
||||||
version: 2.108.1
|
version: 2.106.2
|
||||||
resolution: "@supabase/auth-js@npm:2.108.1"
|
resolution: "@supabase/auth-js@npm:2.106.2"
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib: "npm:2.8.1"
|
tslib: "npm:2.8.1"
|
||||||
checksum: 10c0/8bf1bce42703b63284a0562d5a6588ac879b4fdeb477046a92fa9ba6fa0d75de7d85f4177d389654f68b812e359e9f0c9c3a659e7d37d96aaa2f6eba12d9cff0
|
checksum: 10c0/dc82807064bcf751c5378a9cc08a77d3732505434847af8c323355b63d417bfbfaa0e807c17eea7d0b7e022c8dadd7c9aa4c886554d60c599298e928d1035a98
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/functions-js@npm:2.108.1":
|
"@supabase/functions-js@npm:2.106.2":
|
||||||
version: 2.108.1
|
version: 2.106.2
|
||||||
resolution: "@supabase/functions-js@npm:2.108.1"
|
resolution: "@supabase/functions-js@npm:2.106.2"
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib: "npm:2.8.1"
|
tslib: "npm:2.8.1"
|
||||||
checksum: 10c0/da67a82c4a79e049fa3d077f1ca3917a58707fa35df642d39d8b23edf5056a2a2427ea201d3f49bb11eafb06413dfde552a6bf63b2da4865a421d44c690c0fe7
|
checksum: 10c0/256ca5134b22b90edab4c7c1f3c5db3ba8e80adbb15c3725e5ed2456a39fe21af5b7cacb2966590f6fbd17812761d2086fcad5db09eba90490911d2a66f880f1
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -1766,45 +1782,45 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/postgrest-js@npm:2.108.1":
|
"@supabase/postgrest-js@npm:2.106.2":
|
||||||
version: 2.108.1
|
version: 2.106.2
|
||||||
resolution: "@supabase/postgrest-js@npm:2.108.1"
|
resolution: "@supabase/postgrest-js@npm:2.106.2"
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib: "npm:2.8.1"
|
tslib: "npm:2.8.1"
|
||||||
checksum: 10c0/29168464f44a723175ef510410df36f993581229d617816dfd33eb9bf5378742910fb9c18508040188ba2a16c20988f84d6f722decd79e34190daea35a5374af
|
checksum: 10c0/57c1a78428d59dfa7a89ef7901f28f756068ce9dd27ff97bf133be6ba77a4a1f13dab38bfa1a2e40cf5fab5c9d84bea394aff73514da0d6062b5b10732631127
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/realtime-js@npm:2.108.1":
|
"@supabase/realtime-js@npm:2.106.2":
|
||||||
version: 2.108.1
|
version: 2.106.2
|
||||||
resolution: "@supabase/realtime-js@npm:2.108.1"
|
resolution: "@supabase/realtime-js@npm:2.106.2"
|
||||||
dependencies:
|
dependencies:
|
||||||
"@supabase/phoenix": "npm:^0.4.2"
|
"@supabase/phoenix": "npm:^0.4.2"
|
||||||
tslib: "npm:2.8.1"
|
tslib: "npm:2.8.1"
|
||||||
checksum: 10c0/bb4cea92714389b6f5f4b626e4c3cbacee2a57c543b71217d3d3032bfe35574cd26fe305bfbde0426230ca3b887e2116c78d47aa37117160b2b9d5ba11564ded
|
checksum: 10c0/18cb4015e26e6eb10c45b8546c02eefdae0461123f05ff614d49107f97560b12c6e87a7cb810bc1a5e4618ad5286cc9cc5283800285e94356ea8e38a69910c10
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/storage-js@npm:2.108.1":
|
"@supabase/storage-js@npm:2.106.2":
|
||||||
version: 2.108.1
|
version: 2.106.2
|
||||||
resolution: "@supabase/storage-js@npm:2.108.1"
|
resolution: "@supabase/storage-js@npm:2.106.2"
|
||||||
dependencies:
|
dependencies:
|
||||||
iceberg-js: "npm:^0.8.1"
|
iceberg-js: "npm:^0.8.1"
|
||||||
tslib: "npm:2.8.1"
|
tslib: "npm:2.8.1"
|
||||||
checksum: 10c0/5a010b4d3af565b26ceb1d07e3d3f0541c8fe538350931c4fc15d0b560b3e40c354cc66259882a8b378e70dace59bc83dd53849feb48509155b8b342e00724a2
|
checksum: 10c0/efb0904f1311d568c6b75336771933eb9f4bea93a1cb0f90fe54422d00162d5793e404974eefc509c93dba3f337d9d6897d6ed228657590150a1346eae8f01f7
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/supabase-js@npm:^2.0.0":
|
"@supabase/supabase-js@npm:^2.0.0":
|
||||||
version: 2.108.1
|
version: 2.106.2
|
||||||
resolution: "@supabase/supabase-js@npm:2.108.1"
|
resolution: "@supabase/supabase-js@npm:2.106.2"
|
||||||
dependencies:
|
dependencies:
|
||||||
"@supabase/auth-js": "npm:2.108.1"
|
"@supabase/auth-js": "npm:2.106.2"
|
||||||
"@supabase/functions-js": "npm:2.108.1"
|
"@supabase/functions-js": "npm:2.106.2"
|
||||||
"@supabase/postgrest-js": "npm:2.108.1"
|
"@supabase/postgrest-js": "npm:2.106.2"
|
||||||
"@supabase/realtime-js": "npm:2.108.1"
|
"@supabase/realtime-js": "npm:2.106.2"
|
||||||
"@supabase/storage-js": "npm:2.108.1"
|
"@supabase/storage-js": "npm:2.106.2"
|
||||||
checksum: 10c0/9b8c3dd7153b4eb3c0bf47296e326c3e57bf77b979a5dc5d18b96a25c041195de942d227d13a5ce83a20203163580204e9102f2346f0a9461de4042b95f69f03
|
checksum: 10c0/3d9418360b43cdf950c4d7496b368dd1c526cfc717dd3016ac032b904367476f31495c75c6ae905ef49e8b5b375416cb5cc354fb888d1e2fc596611824df2e97
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -1873,9 +1889,9 @@ __metadata:
|
|||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@types/google.maps@npm:^3.53.1, @types/google.maps@npm:^3.58.1":
|
"@types/google.maps@npm:^3.53.1, @types/google.maps@npm:^3.58.1":
|
||||||
version: 3.65.1
|
version: 3.64.1
|
||||||
resolution: "@types/google.maps@npm:3.65.1"
|
resolution: "@types/google.maps@npm:3.64.1"
|
||||||
checksum: 10c0/9a7da04d9f27be7a3f9a4de2e6dd9271b68b83aa8a6050fc53ec5cc1366669ead4c27185200adf56f07d69c9a2bba72d82a0cf706e41ed4e7e89d98c44c5c6a1
|
checksum: 10c0/4ade621941045c7e1b1ead30e0b4025b7fccf2b4cfb7c9b5f48c31cceb964c74d17c28b6105be15b99df85c23e19b25415e9fd7bdd7b1d40b7000d22dbbb4e7e
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -1893,7 +1909,7 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@types/node@npm:*":
|
"@types/node@npm:*, @types/node@npm:>=12.12.47, @types/node@npm:>=13.7.0":
|
||||||
version: 25.9.1
|
version: 25.9.1
|
||||||
resolution: "@types/node@npm:25.9.1"
|
resolution: "@types/node@npm:25.9.1"
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -1902,15 +1918,6 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@types/node@npm:>=12.12.47, @types/node@npm:>=13.7.0":
|
|
||||||
version: 25.9.2
|
|
||||||
resolution: "@types/node@npm:25.9.2"
|
|
||||||
dependencies:
|
|
||||||
undici-types: "npm:>=7.24.0 <7.24.7"
|
|
||||||
checksum: 10c0/f14c0d56361febb985eccc45cf0834ee6e2f07c4389a636f3e1a55ebde320077a80bface18c9afd3092f5fa295925502c1a9d55f805efa813f634aa9c941cbac
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"@types/react-dom@npm:^19.0.0":
|
"@types/react-dom@npm:^19.0.0":
|
||||||
version: 19.2.3
|
version: 19.2.3
|
||||||
resolution: "@types/react-dom@npm:19.2.3"
|
resolution: "@types/react-dom@npm:19.2.3"
|
||||||
@@ -2025,7 +2032,7 @@ __metadata:
|
|||||||
version: 0.0.0-use.local
|
version: 0.0.0-use.local
|
||||||
resolution: "app@workspace:."
|
resolution: "app@workspace:."
|
||||||
dependencies:
|
dependencies:
|
||||||
"@capacitor-firebase/authentication": "npm:^8.0.0"
|
"@capacitor-firebase/authentication": "npm:^7.0.0"
|
||||||
"@capacitor/android": "npm:8.3.4"
|
"@capacitor/android": "npm:8.3.4"
|
||||||
"@capacitor/app": "npm:8.1.0"
|
"@capacitor/app": "npm:8.1.0"
|
||||||
"@capacitor/cli": "npm:8.3.4"
|
"@capacitor/cli": "npm:8.3.4"
|
||||||
@@ -2036,10 +2043,9 @@ __metadata:
|
|||||||
"@capacitor/keyboard": "npm:8.0.3"
|
"@capacitor/keyboard": "npm:8.0.3"
|
||||||
"@capacitor/push-notifications": "npm:^8.1.1"
|
"@capacitor/push-notifications": "npm:^8.1.1"
|
||||||
"@capacitor/status-bar": "npm:8.0.2"
|
"@capacitor/status-bar": "npm:8.0.2"
|
||||||
"@hookform/resolvers": "npm:^3.9.0"
|
|
||||||
"@ionic/pwa-elements": "npm:^3.0.0"
|
"@ionic/pwa-elements": "npm:^3.0.0"
|
||||||
"@ionic/react": "npm:8.8.7"
|
"@ionic/react": "npm:^8.5.0"
|
||||||
"@ionic/react-router": "npm:8.8.7"
|
"@ionic/react-router": "npm:^8.5.0"
|
||||||
"@supabase/supabase-js": "npm:^2.0.0"
|
"@supabase/supabase-js": "npm:^2.0.0"
|
||||||
"@types/katex": "npm:^0.16.0"
|
"@types/katex": "npm:^0.16.0"
|
||||||
"@types/react": "npm:^19.0.0"
|
"@types/react": "npm:^19.0.0"
|
||||||
@@ -2988,8 +2994,8 @@ __metadata:
|
|||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"protobufjs@npm:^7.2.5":
|
"protobufjs@npm:^7.2.5":
|
||||||
version: 7.6.3
|
version: 7.6.1
|
||||||
resolution: "protobufjs@npm:7.6.3"
|
resolution: "protobufjs@npm:7.6.1"
|
||||||
dependencies:
|
dependencies:
|
||||||
"@protobufjs/aspromise": "npm:^1.1.2"
|
"@protobufjs/aspromise": "npm:^1.1.2"
|
||||||
"@protobufjs/base64": "npm:^1.1.2"
|
"@protobufjs/base64": "npm:^1.1.2"
|
||||||
@@ -3003,7 +3009,7 @@ __metadata:
|
|||||||
"@protobufjs/utf8": "npm:^1.1.1"
|
"@protobufjs/utf8": "npm:^1.1.1"
|
||||||
"@types/node": "npm:>=13.7.0"
|
"@types/node": "npm:>=13.7.0"
|
||||||
long: "npm:^5.3.2"
|
long: "npm:^5.3.2"
|
||||||
checksum: 10c0/e1132b1ff82684280041550d720398568763ff40928def03e8bb409eaed6edd222e63372e3f52d7c19e5a8e9975333480e26950759086eb5a1f5b5c118da7bf8
|
checksum: 10c0/364c6914facac19ace915e353f71c5d5996bfa8177a3a68c09bd2513a3ecf780538aca06cb3439237f50489db2fae321c4a4db60fd7f9ec65315b7ad66bea029
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -3587,13 +3593,13 @@ __metadata:
|
|||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"websocket-driver@npm:>=0.5.1":
|
"websocket-driver@npm:>=0.5.1":
|
||||||
version: 0.7.5
|
version: 0.7.4
|
||||||
resolution: "websocket-driver@npm:0.7.5"
|
resolution: "websocket-driver@npm:0.7.4"
|
||||||
dependencies:
|
dependencies:
|
||||||
http-parser-js: "npm:>=0.5.1"
|
http-parser-js: "npm:>=0.5.1"
|
||||||
safe-buffer: "npm:>=5.1.0"
|
safe-buffer: "npm:>=5.1.0"
|
||||||
websocket-extensions: "npm:>=0.1.1"
|
websocket-extensions: "npm:>=0.1.1"
|
||||||
checksum: 10c0/843a3c9f529ce07f2721829f70f62986247525ab22625e857b69da13dc90967bacfe57b85e196801b565cd797e309ddd5b06fa8435732e34e8a8ab6201d7abed
|
checksum: 10c0/5f09547912b27bdc57bac17b7b6527d8993aa4ac8a2d10588bb74aebaf785fdcf64fea034aae0c359b7adff2044dd66f3d03866e4685571f81b13e548f9021f1
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user