Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 068b82acfc |
@@ -7,7 +7,7 @@ android {
|
|||||||
applicationId "com.qoutelink.app"
|
applicationId "com.qoutelink.app"
|
||||||
minSdkVersion rootProject.ext.minSdkVersion
|
minSdkVersion rootProject.ext.minSdkVersion
|
||||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||||
versionCode 3
|
versionCode 1
|
||||||
versionName "1.0"
|
versionName "1.0"
|
||||||
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
||||||
manifestPlaceholders = [googleMapsApiKey: System.getenv("VITE_GOOGLE_MAPS_KEY") ?: ""]
|
manifestPlaceholders = [googleMapsApiKey: System.getenv("VITE_GOOGLE_MAPS_KEY") ?: ""]
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 16 KiB |
@@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<resources>
|
|
||||||
<color name="splashBackground">#FFFFFF</color>
|
|
||||||
</resources>
|
|
||||||
@@ -17,8 +17,6 @@
|
|||||||
|
|
||||||
|
|
||||||
<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
|
<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
|
||||||
<item name="windowSplashScreenBackground">@color/splashBackground</item>
|
<item name="android:background">@drawable/splash</item>
|
||||||
<item name="windowSplashScreenAnimatedIcon">@drawable/splash_logo</item>
|
|
||||||
<item name="postSplashScreenTheme">@style/AppTheme.NoActionBar</item>
|
|
||||||
</style>
|
</style>
|
||||||
</resources>
|
</resources>
|
||||||
@@ -299,7 +299,7 @@
|
|||||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||||
CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
|
CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
|
||||||
CODE_SIGN_STYLE = Automatic;
|
CODE_SIGN_STYLE = Automatic;
|
||||||
CURRENT_PROJECT_VERSION = 3;
|
CURRENT_PROJECT_VERSION = 1;
|
||||||
INFOPLIST_FILE = App/Info.plist;
|
INFOPLIST_FILE = App/Info.plist;
|
||||||
IPHONEOS_DEPLOYMENT_TARGET = 15.0;
|
IPHONEOS_DEPLOYMENT_TARGET = 15.0;
|
||||||
LD_RUNPATH_SEARCH_PATHS = (
|
LD_RUNPATH_SEARCH_PATHS = (
|
||||||
@@ -322,7 +322,7 @@
|
|||||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||||
CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
|
CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
|
||||||
CODE_SIGN_STYLE = Automatic;
|
CODE_SIGN_STYLE = Automatic;
|
||||||
CURRENT_PROJECT_VERSION = 3;
|
CURRENT_PROJECT_VERSION = 1;
|
||||||
INFOPLIST_FILE = App/Info.plist;
|
INFOPLIST_FILE = App/Info.plist;
|
||||||
IPHONEOS_DEPLOYMENT_TARGET = 15.0;
|
IPHONEOS_DEPLOYMENT_TARGET = 15.0;
|
||||||
LD_RUNPATH_SEARCH_PATHS = (
|
LD_RUNPATH_SEARCH_PATHS = (
|
||||||
|
|||||||
@@ -1,122 +1,14 @@
|
|||||||
{
|
{
|
||||||
"images" : [
|
"images" : [
|
||||||
{
|
{
|
||||||
"idiom": "iphone",
|
"filename" : "AppIcon-512@2x.png",
|
||||||
"scale": "1x",
|
"idiom" : "universal",
|
||||||
"size": "20x20",
|
"platform" : "ios",
|
||||||
"filename": "icon-20.png"
|
"size" : "1024x1024"
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "ipad",
|
|
||||||
"scale": "1x",
|
|
||||||
"size": "20x20",
|
|
||||||
"filename": "icon-20.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "iphone",
|
|
||||||
"scale": "1x",
|
|
||||||
"size": "29x29",
|
|
||||||
"filename": "icon-29.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "ipad",
|
|
||||||
"scale": "1x",
|
|
||||||
"size": "29x29",
|
|
||||||
"filename": "icon-29.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "ipad",
|
|
||||||
"scale": "1x",
|
|
||||||
"size": "40x40",
|
|
||||||
"filename": "icon-40.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "iphone",
|
|
||||||
"scale": "2x",
|
|
||||||
"size": "20x20",
|
|
||||||
"filename": "icon-40.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "iphone",
|
|
||||||
"scale": "2x",
|
|
||||||
"size": "29x29",
|
|
||||||
"filename": "icon-58.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "ipad",
|
|
||||||
"scale": "2x",
|
|
||||||
"size": "29x29",
|
|
||||||
"filename": "icon-58.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "iphone",
|
|
||||||
"scale": "3x",
|
|
||||||
"size": "20x20",
|
|
||||||
"filename": "icon-60.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "ipad",
|
|
||||||
"scale": "1x",
|
|
||||||
"size": "76x76",
|
|
||||||
"filename": "icon-76.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "iphone",
|
|
||||||
"scale": "2x",
|
|
||||||
"size": "40x40",
|
|
||||||
"filename": "icon-80.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "ipad",
|
|
||||||
"scale": "2x",
|
|
||||||
"size": "40x40",
|
|
||||||
"filename": "icon-80.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "iphone",
|
|
||||||
"scale": "3x",
|
|
||||||
"size": "29x29",
|
|
||||||
"filename": "icon-87.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "iphone",
|
|
||||||
"scale": "2x",
|
|
||||||
"size": "60x60",
|
|
||||||
"filename": "icon-120.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "iphone",
|
|
||||||
"scale": "3x",
|
|
||||||
"size": "40x40",
|
|
||||||
"filename": "icon-120.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "ipad",
|
|
||||||
"scale": "2x",
|
|
||||||
"size": "76x76",
|
|
||||||
"filename": "icon-152.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "ipad",
|
|
||||||
"scale": "2x",
|
|
||||||
"size": "83.5x83.5",
|
|
||||||
"filename": "icon-167.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "iphone",
|
|
||||||
"scale": "3x",
|
|
||||||
"size": "60x60",
|
|
||||||
"filename": "icon-180.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idiom": "ios-marketing",
|
|
||||||
"scale": "1x",
|
|
||||||
"size": "1024x1024",
|
|
||||||
"filename": "icon-1024.png"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"info" : {
|
"info" : {
|
||||||
"author": "appsuite",
|
"author" : "xcode",
|
||||||
"version" : 1
|
"version" : 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 890 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 809 B |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 7.6 KiB |
|
Before Width: | Height: | Size: 8.8 KiB |
@@ -2,12 +2,22 @@
|
|||||||
"images" : [
|
"images" : [
|
||||||
{
|
{
|
||||||
"idiom" : "universal",
|
"idiom" : "universal",
|
||||||
"filename": "splash.png",
|
"filename" : "splash-2732x2732-2.png",
|
||||||
"scale" : "1x"
|
"scale" : "1x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"idiom" : "universal",
|
||||||
|
"filename" : "splash-2732x2732-1.png",
|
||||||
|
"scale" : "2x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"idiom" : "universal",
|
||||||
|
"filename" : "splash-2732x2732.png",
|
||||||
|
"scale" : "3x"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"info" : {
|
"info" : {
|
||||||
"author": "appsuite",
|
"version" : 1,
|
||||||
"version": 1
|
"author" : "xcode"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 480 KiB |
@@ -47,10 +47,6 @@
|
|||||||
</array>
|
</array>
|
||||||
<key>UIViewControllerBasedStatusBarAppearance</key>
|
<key>UIViewControllerBasedStatusBarAppearance</key>
|
||||||
<true/>
|
<true/>
|
||||||
<key>NSPhotoLibraryUsageDescription</key>
|
|
||||||
<string>We need access to your photo library so you can attach site photos and references to your requests.</string>
|
|
||||||
<key>NSCameraUsageDescription</key>
|
|
||||||
<string>We need access to your camera so you can take site photos for your requests.</string>
|
|
||||||
<key>CFBundleURLTypes</key>
|
<key>CFBundleURLTypes</key>
|
||||||
<array>
|
<array>
|
||||||
<dict>
|
<dict>
|
||||||
|
|||||||
@@ -18,14 +18,13 @@
|
|||||||
"@capacitor/haptics": "8.0.2",
|
"@capacitor/haptics": "8.0.2",
|
||||||
"@capacitor/ios": "8.3.4",
|
"@capacitor/ios": "8.3.4",
|
||||||
"@capacitor/keyboard": "8.0.3",
|
"@capacitor/keyboard": "8.0.3",
|
||||||
"@capacitor/preferences": "^8.0.1",
|
|
||||||
"@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",
|
"@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.8.7",
|
||||||
"@ionic/react-router": "8.8.7",
|
"@ionic/react-router": "8.8.7",
|
||||||
"@supabase/supabase-js": "^2.108.1",
|
"@supabase/supabase-js": "^2.0.0",
|
||||||
"firebase": "^11.0.0",
|
"firebase": "^11.0.0",
|
||||||
"ionicons": "^7.4.0",
|
"ionicons": "^7.4.0",
|
||||||
"katex": "^0.16.0",
|
"katex": "^0.16.0",
|
||||||
|
|||||||
@@ -1,56 +1,32 @@
|
|||||||
import React, { useEffect } from 'react';
|
import React from "react";
|
||||||
import { IonApp } from '@ionic/react';
|
import { Redirect, Route } from "react-router-dom";
|
||||||
import { IonReactRouter } from '@ionic/react-router';
|
import { IonApp, IonRouterOutlet } from "@ionic/react";
|
||||||
|
import { IonReactRouter } from "@ionic/react-router";
|
||||||
|
|
||||||
import { AuthProvider } from './contexts/AuthContext';
|
import "@ionic/react/css/core.css";
|
||||||
import { ProfileProvider, useProfile } from './contexts/ProfileContext';
|
import "@ionic/react/css/normalize.css";
|
||||||
import AppRoutes from './AppRoutes';
|
import "@ionic/react/css/structure.css";
|
||||||
import { setStatusBarStyle, Style } from './utils/statusBar';
|
import "@ionic/react/css/typography.css";
|
||||||
|
import "@ionic/react/css/padding.css";
|
||||||
|
import "@ionic/react/css/float-elements.css";
|
||||||
|
import "@ionic/react/css/text-alignment.css";
|
||||||
|
import "@ionic/react/css/text-transformation.css";
|
||||||
|
import "@ionic/react/css/flex-utils.css";
|
||||||
|
import "@ionic/react/css/display.css";
|
||||||
|
|
||||||
/* Core CSS required for Ionic components to work properly */
|
import "./theme/variables.css";
|
||||||
import '@ionic/react/css/core.css';
|
|
||||||
|
|
||||||
/* Basic CSS for apps built with Ionic */
|
import Home from "./pages/Home";
|
||||||
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 */
|
const App: React.FC = () => (
|
||||||
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';
|
|
||||||
|
|
||||||
/* Theme variables */
|
|
||||||
import './theme/variables.css';
|
|
||||||
|
|
||||||
const AppShell: React.FC = () => {
|
|
||||||
const { themeMode } = useProfile();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
document.body.classList.toggle('dark', themeMode === 'dark');
|
|
||||||
setStatusBarStyle(themeMode === 'dark' ? Style.Dark : Style.Light);
|
|
||||||
}, [themeMode]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonReactRouter>
|
|
||||||
<AppRoutes />
|
|
||||||
</IonReactRouter>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const App: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<IonApp>
|
<IonApp>
|
||||||
<AuthProvider>
|
<IonReactRouter>
|
||||||
<ProfileProvider>
|
<IonRouterOutlet>
|
||||||
<AppShell />
|
<Route path="/home" component={Home} exact />
|
||||||
</ProfileProvider>
|
<Redirect exact from="/" to="/home" />
|
||||||
</AuthProvider>
|
</IonRouterOutlet>
|
||||||
|
</IonReactRouter>
|
||||||
</IonApp>
|
</IonApp>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@@ -1,105 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Route, Redirect } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
IonRouterOutlet,
|
|
||||||
IonTabs,
|
|
||||||
IonTabBar,
|
|
||||||
IonTabButton,
|
|
||||||
IonIcon,
|
|
||||||
IonLabel,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import {
|
|
||||||
homeOutline,
|
|
||||||
documentTextOutline,
|
|
||||||
personOutline,
|
|
||||||
} from 'ionicons/icons';
|
|
||||||
import { useAuth } from './contexts/AuthContext';
|
|
||||||
|
|
||||||
import Auth from './pages/Auth';
|
|
||||||
import VerifyEmail from './pages/VerifyEmail';
|
|
||||||
import ForgotPassword from './pages/ForgotPassword';
|
|
||||||
import VerifyReset from './pages/VerifyReset';
|
|
||||||
import SetupProfile from './pages/SetupProfile';
|
|
||||||
import Home from './pages/Home';
|
|
||||||
import BuyerRequests from './pages/BuyerRequests';
|
|
||||||
import NewRfq from './pages/NewRfq';
|
|
||||||
import RfqDetail from './pages/RfqDetail';
|
|
||||||
import SupplierQuoteForm from './pages/SupplierQuoteForm';
|
|
||||||
import BuyerQuoteList from './pages/BuyerQuoteList';
|
|
||||||
import Profile from './pages/Profile';
|
|
||||||
import EditProfile from './pages/EditProfile';
|
|
||||||
import ProtectedRoute from './components/ProtectedRoute';
|
|
||||||
|
|
||||||
const AppRoutes: React.FC = () => {
|
|
||||||
const { user } = useAuth();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonRouterOutlet>
|
|
||||||
{/* Auth routes */}
|
|
||||||
<Route path="/auth" component={Auth} exact />
|
|
||||||
<Route path="/verify-email" component={VerifyEmail} exact />
|
|
||||||
<Route path="/forgot-password" component={ForgotPassword} exact />
|
|
||||||
<Route path="/verify-reset" component={VerifyReset} exact />
|
|
||||||
|
|
||||||
{/* Setup Profile (guarded manually by user presence, not ProtectedRoute to avoid loop) */}
|
|
||||||
<Route
|
|
||||||
path="/setup-profile"
|
|
||||||
exact
|
|
||||||
render={() => (!user ? <Redirect to="/auth" /> : <SetupProfile />)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Pushed routes without tab bar */}
|
|
||||||
<ProtectedRoute path="/rfq/new" component={NewRfq} exact />
|
|
||||||
<ProtectedRoute
|
|
||||||
path="/rfq/:id([0-9a-fA-F-]{36})"
|
|
||||||
component={RfqDetail}
|
|
||||||
exact
|
|
||||||
/>
|
|
||||||
<ProtectedRoute
|
|
||||||
path="/quote/:id([0-9a-fA-F-]{36})"
|
|
||||||
component={SupplierQuoteForm}
|
|
||||||
exact
|
|
||||||
/>
|
|
||||||
<ProtectedRoute
|
|
||||||
path="/quote-list/:id([0-9a-fA-F-]{36})"
|
|
||||||
component={BuyerQuoteList}
|
|
||||||
exact
|
|
||||||
/>
|
|
||||||
<ProtectedRoute path="/profile/edit" component={EditProfile} exact />
|
|
||||||
|
|
||||||
{/* Tabs */}
|
|
||||||
<ProtectedRoute
|
|
||||||
path={['/home', '/requests', '/profile']}
|
|
||||||
component={() => (
|
|
||||||
<IonTabs>
|
|
||||||
<IonRouterOutlet>
|
|
||||||
<Route path="/home" component={Home} exact />
|
|
||||||
<Route path="/requests" component={BuyerRequests} exact />
|
|
||||||
<Route path="/profile" component={Profile} exact />
|
|
||||||
</IonRouterOutlet>
|
|
||||||
|
|
||||||
<IonTabBar slot="bottom">
|
|
||||||
<IonTabButton tab="home" href="/home">
|
|
||||||
<IonIcon icon={homeOutline} />
|
|
||||||
<IonLabel>Home</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
<IonTabButton tab="requests" href="/requests">
|
|
||||||
<IonIcon icon={documentTextOutline} />
|
|
||||||
<IonLabel>Requests</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
<IonTabButton tab="profile" href="/profile">
|
|
||||||
<IonIcon icon={personOutline} />
|
|
||||||
<IonLabel>Profile</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
</IonTabBar>
|
|
||||||
</IonTabs>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Default Redirect */}
|
|
||||||
<Route exact path="/" render={() => <Redirect to="/home" />} />
|
|
||||||
</IonRouterOutlet>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AppRoutes;
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { IonIcon } from '@ionic/react';
|
|
||||||
|
|
||||||
interface DashboardMetricCardProps {
|
|
||||||
label: string;
|
|
||||||
value: string;
|
|
||||||
hint: string;
|
|
||||||
icon: string;
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DashboardMetricCard: React.FC<DashboardMetricCardProps> = ({
|
|
||||||
label,
|
|
||||||
value,
|
|
||||||
hint,
|
|
||||||
icon,
|
|
||||||
onClick,
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
onClick={onClick}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '20px',
|
|
||||||
flex: '1',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '12px',
|
|
||||||
cursor: onClick ? 'pointer' : 'default',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'flex-start',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-tertiary)',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
letterSpacing: '0.05em',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '36px',
|
|
||||||
height: '36px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: 'var(--color-brand-medium)',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={icon}
|
|
||||||
style={{ color: 'var(--color-brand)', fontSize: '18px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '28px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
lineHeight: '1',
|
|
||||||
fontVariantNumeric: 'tabular-nums',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{value}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
marginTop: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{hint}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DashboardMetricCard;
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
import React, { useRef, useState } from 'react';
|
|
||||||
import { IonInput } from '@ionic/react';
|
|
||||||
|
|
||||||
interface OtpInputProps {
|
|
||||||
value: string;
|
|
||||||
onChange: (value: string) => void;
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const OtpInput: React.FC<OtpInputProps> = ({ value, onChange, disabled }) => {
|
|
||||||
const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
|
|
||||||
|
|
||||||
// Convert current value string into an array of 6 chars
|
|
||||||
const digits = value.split('').concat(Array(6).fill('')).slice(0, 6);
|
|
||||||
|
|
||||||
const handleChange = (e: any, index: number) => {
|
|
||||||
let val = e.target.value;
|
|
||||||
// Allow only numeric
|
|
||||||
if (!/^[0-9]*$/.test(val)) return;
|
|
||||||
|
|
||||||
// Grab the last character if they typed multiple
|
|
||||||
val = val.substring(val.length - 1);
|
|
||||||
|
|
||||||
const newDigits = [...digits];
|
|
||||||
newDigits[index] = val;
|
|
||||||
onChange(newDigits.join(''));
|
|
||||||
|
|
||||||
// Move to next input if filled
|
|
||||||
if (val !== '' && index < 5) {
|
|
||||||
const nextInput = inputsRef.current[index + 1];
|
|
||||||
if (nextInput) nextInput.focus();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleKeyDown = (
|
|
||||||
e: React.KeyboardEvent<HTMLInputElement>,
|
|
||||||
index: number
|
|
||||||
) => {
|
|
||||||
if (e.key === 'Backspace' && !digits[index] && index > 0) {
|
|
||||||
// Move to previous input on backspace if current is empty
|
|
||||||
const prevInput = inputsRef.current[index - 1];
|
|
||||||
if (prevInput) {
|
|
||||||
prevInput.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
|
|
||||||
{digits.map((digit, index) => (
|
|
||||||
<input
|
|
||||||
key={index}
|
|
||||||
ref={(el) => {
|
|
||||||
inputsRef.current[index] = el;
|
|
||||||
}}
|
|
||||||
type="text"
|
|
||||||
inputMode="numeric"
|
|
||||||
pattern="[0-9]*"
|
|
||||||
maxLength={2}
|
|
||||||
value={digit}
|
|
||||||
onChange={(e) => handleChange(e, index)}
|
|
||||||
onKeyDown={(e) => handleKeyDown(e, index)}
|
|
||||||
disabled={disabled}
|
|
||||||
style={{
|
|
||||||
width: '100%',
|
|
||||||
maxWidth: '48px',
|
|
||||||
height: '52px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
border: 'none',
|
|
||||||
background: '#f4f7f4',
|
|
||||||
color: '#0f1720',
|
|
||||||
textAlign: 'center',
|
|
||||||
fontSize: '24px',
|
|
||||||
fontWeight: '600',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OtpInput;
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { IonIcon } from '@ionic/react';
|
|
||||||
|
|
||||||
interface ProfileInfoRowProps {
|
|
||||||
icon: string;
|
|
||||||
label: string;
|
|
||||||
value?: string;
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ProfileInfoRow: React.FC<ProfileInfoRowProps> = ({
|
|
||||||
icon,
|
|
||||||
label,
|
|
||||||
value,
|
|
||||||
onClick,
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
onClick={onClick}
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
minHeight: '64px',
|
|
||||||
padding: '10px 20px',
|
|
||||||
cursor: onClick ? 'pointer' : 'default',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: '14px',
|
|
||||||
minWidth: 0,
|
|
||||||
flex: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '40px',
|
|
||||||
height: '40px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={icon}
|
|
||||||
style={{ color: 'var(--color-brand)', fontSize: '20px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '2px',
|
|
||||||
minWidth: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-tertiary)',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
letterSpacing: '0.04em',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</span>
|
|
||||||
{value && (
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{value}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProfileInfoRow;
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
import React, { useEffect } from 'react';
|
|
||||||
import { Route, Redirect, RouteProps } from 'react-router-dom';
|
|
||||||
import { IonSpinner } from '@ionic/react';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { useProfile } from '../contexts/ProfileContext';
|
|
||||||
import { useProfileLoader } from '../hooks/useProfileLoader';
|
|
||||||
|
|
||||||
interface ProtectedRouteProps extends RouteProps {
|
|
||||||
component: React.ComponentType<any>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
|
|
||||||
component: Component,
|
|
||||||
...rest
|
|
||||||
}) => {
|
|
||||||
const { user } = useAuth();
|
|
||||||
const { status } = useProfile();
|
|
||||||
const { loadProfileAndNavigate } = useProfileLoader();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// If user is logged in but profile is still loading (e.g. cold start direct link)
|
|
||||||
if (user && status === 'loading') {
|
|
||||||
loadProfileAndNavigate();
|
|
||||||
}
|
|
||||||
}, [user, status, loadProfileAndNavigate]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Route
|
|
||||||
{...rest}
|
|
||||||
render={(props) => {
|
|
||||||
if (!user) {
|
|
||||||
return <Redirect to="/auth" />;
|
|
||||||
}
|
|
||||||
if (status === 'loading') {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
height: '100vh',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonSpinner name="crescent" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (status === 'missing') {
|
|
||||||
return <Redirect to="/setup-profile" />;
|
|
||||||
}
|
|
||||||
return <Component {...props} />;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProtectedRoute;
|
|
||||||
@@ -1,121 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
interface QuotationCardProps {
|
|
||||||
supplierName: string;
|
|
||||||
priceLabel: string;
|
|
||||||
deliveryOption: string;
|
|
||||||
status: string;
|
|
||||||
onAccept: () => void;
|
|
||||||
onDecline: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const QuotationCard: React.FC<QuotationCardProps> = ({
|
|
||||||
supplierName,
|
|
||||||
priceLabel,
|
|
||||||
deliveryOption,
|
|
||||||
status,
|
|
||||||
onAccept,
|
|
||||||
onDecline,
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '20px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
marginBottom: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{supplierName}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '30px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-brand-strong)',
|
|
||||||
fontVariantNumeric: 'tabular-nums',
|
|
||||||
marginBottom: '6px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{priceLabel}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
marginBottom: '18px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{deliveryOption}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{status === 'submitted' ? (
|
|
||||||
<div style={{ display: 'flex', gap: '12px' }}>
|
|
||||||
<button
|
|
||||||
onClick={onAccept}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-brand)',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '12px 16px',
|
|
||||||
border: 'none',
|
|
||||||
flex: 1,
|
|
||||||
fontWeight: '600',
|
|
||||||
fontSize: '14px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Accept
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={onDecline}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
color: 'var(--color-brand)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '12px 16px',
|
|
||||||
border: 'none',
|
|
||||||
flex: 1,
|
|
||||||
fontWeight: '600',
|
|
||||||
fontSize: '14px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Decline
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'inline-block',
|
|
||||||
background:
|
|
||||||
status === 'accepted'
|
|
||||||
? 'var(--color-success-soft)'
|
|
||||||
: 'rgba(23,33,43,0.10)',
|
|
||||||
color:
|
|
||||||
status === 'accepted' ? 'var(--color-success-text)' : '#4b5563',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '6px 12px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{status}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default QuotationCard;
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
interface QuoteSummaryRowProps {
|
|
||||||
supplierName: string;
|
|
||||||
priceLabel: string;
|
|
||||||
deliveryOption: string;
|
|
||||||
status: string;
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const QuoteSummaryRow: React.FC<QuoteSummaryRowProps> = ({
|
|
||||||
supplierName,
|
|
||||||
priceLabel,
|
|
||||||
deliveryOption,
|
|
||||||
status,
|
|
||||||
onClick,
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
onClick={onClick}
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '4px',
|
|
||||||
padding: '12px 0',
|
|
||||||
borderBottom: '1px solid var(--color-border)',
|
|
||||||
cursor: onClick ? 'pointer' : 'default',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{supplierName}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-brand-strong)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{priceLabel}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{deliveryOption}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color:
|
|
||||||
status === 'accepted'
|
|
||||||
? 'var(--color-success-text)'
|
|
||||||
: 'var(--color-text-secondary)',
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{status}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default QuoteSummaryRow;
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
interface RecentActivityCardProps {
|
|
||||||
title: string;
|
|
||||||
subtitle: string;
|
|
||||||
meta: string;
|
|
||||||
onClick: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const RecentActivityCard: React.FC<RecentActivityCardProps> = ({
|
|
||||||
title,
|
|
||||||
subtitle,
|
|
||||||
meta,
|
|
||||||
onClick,
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
onClick={onClick}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-shell)',
|
|
||||||
borderRadius: '38px',
|
|
||||||
padding: '5px',
|
|
||||||
margin: '0 20px 12px',
|
|
||||||
boxShadow: 'var(--color-shadow-lg)',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '32px',
|
|
||||||
padding: '18px 20px',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: '12px',
|
|
||||||
boxShadow: 'var(--color-shadow-sm)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '4px',
|
|
||||||
minWidth: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{subtitle}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '18px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-brand-strong)',
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{meta}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RecentActivityCard;
|
|
||||||
@@ -1,135 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
interface RequestListCardProps {
|
|
||||||
title: string;
|
|
||||||
subtitle: string;
|
|
||||||
referenceNumber: string;
|
|
||||||
status: string;
|
|
||||||
trailingText?: string;
|
|
||||||
onClick: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const RequestListCard: React.FC<RequestListCardProps> = ({
|
|
||||||
title,
|
|
||||||
subtitle,
|
|
||||||
referenceNumber,
|
|
||||||
status,
|
|
||||||
trailingText,
|
|
||||||
onClick,
|
|
||||||
}) => {
|
|
||||||
let statusBg = 'rgba(23,33,43,0.10)';
|
|
||||||
let statusColor = '#4b5563';
|
|
||||||
|
|
||||||
if (status === 'open') {
|
|
||||||
statusBg = 'var(--color-success-soft)';
|
|
||||||
statusColor = 'var(--color-success-text)';
|
|
||||||
} else if (status === 'quoted') {
|
|
||||||
statusBg = 'var(--color-warning-soft)';
|
|
||||||
statusColor = 'var(--color-warning-text)';
|
|
||||||
} else if (status === 'closed') {
|
|
||||||
statusBg = 'rgba(23,33,43,0.10)';
|
|
||||||
statusColor = '#4b5563';
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
onClick={onClick}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '20px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '14px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'flex-start',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '4px',
|
|
||||||
flex: 1,
|
|
||||||
minWidth: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{subtitle}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{trailingText && (
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-brand-strong)',
|
|
||||||
marginLeft: '12px',
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{trailingText}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
gap: '8px',
|
|
||||||
alignItems: 'center',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-accent-soft)',
|
|
||||||
color: 'var(--color-warning-text)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '6px 12px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{referenceNumber}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: statusBg,
|
|
||||||
color: statusColor,
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '6px 12px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{status}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RequestListCard;
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { IonIcon } from '@ionic/react';
|
|
||||||
import { checkmarkCircle, ellipseOutline } from 'ionicons/icons';
|
|
||||||
|
|
||||||
export interface SupplierOption {
|
|
||||||
id: string;
|
|
||||||
full_name: string;
|
|
||||||
company_name: string | null;
|
|
||||||
city: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SupplierPickerRowProps {
|
|
||||||
supplier: SupplierOption;
|
|
||||||
selected: boolean;
|
|
||||||
onToggle: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SupplierPickerRow: React.FC<SupplierPickerRowProps> = ({
|
|
||||||
supplier,
|
|
||||||
selected,
|
|
||||||
onToggle,
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
onClick={onToggle}
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: '12px 0',
|
|
||||||
borderBottom: '1px solid #edf4ee',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={selected ? checkmarkCircle : ellipseOutline}
|
|
||||||
style={{
|
|
||||||
fontSize: '24px',
|
|
||||||
color: selected ? '#166534' : '#8a978f',
|
|
||||||
marginRight: '12px',
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '2px',
|
|
||||||
flex: 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span style={{ fontSize: '15px', fontWeight: '600', color: '#0f1720' }}>
|
|
||||||
{supplier.company_name || supplier.full_name}
|
|
||||||
</span>
|
|
||||||
<span style={{ fontSize: '13px', fontWeight: '400', color: '#6c7a71' }}>
|
|
||||||
{supplier.company_name ? supplier.full_name : 'Independent'}
|
|
||||||
{supplier.city ? ` • ${supplier.city}` : ''}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SupplierPickerRow;
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
|
||||||
import { User } from '@supabase/supabase-js';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
|
|
||||||
interface AuthContextType {
|
|
||||||
user: User | null;
|
|
||||||
signOut: () => Promise<void>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const AuthContext = createContext<AuthContextType>({
|
|
||||||
user: null,
|
|
||||||
signOut: async () => {},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const useAuth = () => useContext(AuthContext);
|
|
||||||
|
|
||||||
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
|
|
||||||
children,
|
|
||||||
}) => {
|
|
||||||
const [user, setUser] = useState<User | null>(null);
|
|
||||||
const [initializing, setInitializing] = useState(true);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
supabase.auth.getSession().then(({ data }) => {
|
|
||||||
setUser(data.session?.user ?? null);
|
|
||||||
setInitializing(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: { subscription },
|
|
||||||
} = supabase.auth.onAuthStateChange((_event, session) => {
|
|
||||||
setUser(session?.user ?? null);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => subscription.unsubscribe();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const signOut = async () => {
|
|
||||||
await supabase.auth.signOut();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (initializing) {
|
|
||||||
return null; // Or a simple spinner if preferred, but usually handled nicely
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AuthContext.Provider value={{ user, signOut }}>
|
|
||||||
{children}
|
|
||||||
</AuthContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
import React, {
|
|
||||||
createContext,
|
|
||||||
useContext,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useState,
|
|
||||||
} from 'react';
|
|
||||||
import { Preferences } from '@capacitor/preferences';
|
|
||||||
import { Database } from '../database.types';
|
|
||||||
|
|
||||||
export type Profile = Database['public']['Tables']['profiles']['Row'];
|
|
||||||
export type ThemeMode = 'light' | 'dark';
|
|
||||||
|
|
||||||
interface ProfileContextType {
|
|
||||||
profile: Profile | null;
|
|
||||||
status: 'loading' | 'loaded' | 'missing';
|
|
||||||
themeMode: ThemeMode;
|
|
||||||
setProfile: (profile: Profile | null) => void;
|
|
||||||
setStatus: (status: 'loading' | 'loaded' | 'missing') => void;
|
|
||||||
setThemeMode: (mode: ThemeMode) => Promise<void>;
|
|
||||||
clearProfile: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ProfileContext = createContext<ProfileContextType>({
|
|
||||||
profile: null,
|
|
||||||
status: 'loading',
|
|
||||||
themeMode: 'light',
|
|
||||||
setProfile: () => {},
|
|
||||||
setStatus: () => {},
|
|
||||||
setThemeMode: async () => {},
|
|
||||||
clearProfile: () => {},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const useProfile = () => useContext(ProfileContext);
|
|
||||||
|
|
||||||
export const ProfileProvider: React.FC<{ children: React.ReactNode }> = ({
|
|
||||||
children,
|
|
||||||
}) => {
|
|
||||||
const [profile, setProfile] = useState<Profile | null>(null);
|
|
||||||
const [status, setStatus] = useState<'loading' | 'loaded' | 'missing'>(
|
|
||||||
'loading'
|
|
||||||
);
|
|
||||||
const [themeModeState, setThemeModeState] = useState<ThemeMode>('light');
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const loadThemeMode = async () => {
|
|
||||||
const { value } = await Preferences.get({ key: 'theme_mode' });
|
|
||||||
const mode = value === 'dark' ? 'dark' : 'light';
|
|
||||||
setThemeModeState(mode);
|
|
||||||
};
|
|
||||||
|
|
||||||
loadThemeMode();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const setThemeMode = async (mode: ThemeMode) => {
|
|
||||||
setThemeModeState(mode);
|
|
||||||
await Preferences.set({ key: 'theme_mode', value: mode });
|
|
||||||
};
|
|
||||||
|
|
||||||
const clearProfile = () => {
|
|
||||||
setProfile(null);
|
|
||||||
setStatus('loading');
|
|
||||||
};
|
|
||||||
|
|
||||||
const value = useMemo(
|
|
||||||
() => ({
|
|
||||||
profile,
|
|
||||||
status,
|
|
||||||
themeMode: themeModeState,
|
|
||||||
setProfile,
|
|
||||||
setStatus,
|
|
||||||
setThemeMode,
|
|
||||||
clearProfile,
|
|
||||||
}),
|
|
||||||
[profile, status, themeModeState]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ProfileContext.Provider value={value}>{children}</ProfileContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,353 +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: {
|
|
||||||
profiles: {
|
|
||||||
Row: {
|
|
||||||
avatar_url: string | null
|
|
||||||
city: string | null
|
|
||||||
company_name: string | null
|
|
||||||
created_at: string
|
|
||||||
full_name: string
|
|
||||||
id: string
|
|
||||||
phone: string | null
|
|
||||||
role: string
|
|
||||||
updated_at: string
|
|
||||||
}
|
|
||||||
Insert: {
|
|
||||||
avatar_url?: string | null
|
|
||||||
city?: string | null
|
|
||||||
company_name?: string | null
|
|
||||||
created_at?: string
|
|
||||||
full_name: string
|
|
||||||
id: string
|
|
||||||
phone?: string | null
|
|
||||||
role: string
|
|
||||||
updated_at?: string
|
|
||||||
}
|
|
||||||
Update: {
|
|
||||||
avatar_url?: string | null
|
|
||||||
city?: string | null
|
|
||||||
company_name?: string | null
|
|
||||||
created_at?: string
|
|
||||||
full_name?: string
|
|
||||||
id?: string
|
|
||||||
phone?: string | null
|
|
||||||
role?: string
|
|
||||||
updated_at?: string
|
|
||||||
}
|
|
||||||
Relationships: []
|
|
||||||
}
|
|
||||||
quotations: {
|
|
||||||
Row: {
|
|
||||||
created_at: string
|
|
||||||
currency_code: string
|
|
||||||
delivery_option: string
|
|
||||||
id: string
|
|
||||||
note: string | null
|
|
||||||
price_amount: number
|
|
||||||
rfq_id: string
|
|
||||||
status: string
|
|
||||||
supplier_id: string
|
|
||||||
updated_at: string
|
|
||||||
}
|
|
||||||
Insert: {
|
|
||||||
created_at?: string
|
|
||||||
currency_code?: string
|
|
||||||
delivery_option: string
|
|
||||||
id?: string
|
|
||||||
note?: string | null
|
|
||||||
price_amount: number
|
|
||||||
rfq_id: string
|
|
||||||
status?: string
|
|
||||||
supplier_id: string
|
|
||||||
updated_at?: string
|
|
||||||
}
|
|
||||||
Update: {
|
|
||||||
created_at?: string
|
|
||||||
currency_code?: string
|
|
||||||
delivery_option?: string
|
|
||||||
id?: string
|
|
||||||
note?: string | null
|
|
||||||
price_amount?: number
|
|
||||||
rfq_id?: string
|
|
||||||
status?: string
|
|
||||||
supplier_id?: string
|
|
||||||
updated_at?: string
|
|
||||||
}
|
|
||||||
Relationships: [
|
|
||||||
{
|
|
||||||
foreignKeyName: "quotations_rfq_id_fkey"
|
|
||||||
columns: ["rfq_id"]
|
|
||||||
isOneToOne: false
|
|
||||||
referencedRelation: "rfqs"
|
|
||||||
referencedColumns: ["id"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
foreignKeyName: "quotations_supplier_id_fkey"
|
|
||||||
columns: ["supplier_id"]
|
|
||||||
isOneToOne: false
|
|
||||||
referencedRelation: "profiles"
|
|
||||||
referencedColumns: ["id"]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
rfq_images: {
|
|
||||||
Row: {
|
|
||||||
created_at: string
|
|
||||||
id: string
|
|
||||||
owner_id: string
|
|
||||||
rfq_id: string
|
|
||||||
storage_path: string
|
|
||||||
}
|
|
||||||
Insert: {
|
|
||||||
created_at?: string
|
|
||||||
id?: string
|
|
||||||
owner_id: string
|
|
||||||
rfq_id: string
|
|
||||||
storage_path: string
|
|
||||||
}
|
|
||||||
Update: {
|
|
||||||
created_at?: string
|
|
||||||
id?: string
|
|
||||||
owner_id?: string
|
|
||||||
rfq_id?: string
|
|
||||||
storage_path?: string
|
|
||||||
}
|
|
||||||
Relationships: [
|
|
||||||
{
|
|
||||||
foreignKeyName: "rfq_images_rfq_id_fkey"
|
|
||||||
columns: ["rfq_id"]
|
|
||||||
isOneToOne: false
|
|
||||||
referencedRelation: "rfqs"
|
|
||||||
referencedColumns: ["id"]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
rfq_recipients: {
|
|
||||||
Row: {
|
|
||||||
created_at: string
|
|
||||||
id: string
|
|
||||||
rfq_id: string
|
|
||||||
supplier_id: string
|
|
||||||
}
|
|
||||||
Insert: {
|
|
||||||
created_at?: string
|
|
||||||
id?: string
|
|
||||||
rfq_id: string
|
|
||||||
supplier_id: string
|
|
||||||
}
|
|
||||||
Update: {
|
|
||||||
created_at?: string
|
|
||||||
id?: string
|
|
||||||
rfq_id?: string
|
|
||||||
supplier_id?: string
|
|
||||||
}
|
|
||||||
Relationships: [
|
|
||||||
{
|
|
||||||
foreignKeyName: "rfq_recipients_rfq_id_fkey"
|
|
||||||
columns: ["rfq_id"]
|
|
||||||
isOneToOne: false
|
|
||||||
referencedRelation: "rfqs"
|
|
||||||
referencedColumns: ["id"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
foreignKeyName: "rfq_recipients_supplier_id_fkey"
|
|
||||||
columns: ["supplier_id"]
|
|
||||||
isOneToOne: false
|
|
||||||
referencedRelation: "profiles"
|
|
||||||
referencedColumns: ["id"]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
rfqs: {
|
|
||||||
Row: {
|
|
||||||
buyer_id: string
|
|
||||||
created_at: string
|
|
||||||
id: string
|
|
||||||
reference_number: string
|
|
||||||
request_text: string
|
|
||||||
status: string
|
|
||||||
title: string
|
|
||||||
updated_at: string
|
|
||||||
}
|
|
||||||
Insert: {
|
|
||||||
buyer_id: string
|
|
||||||
created_at?: string
|
|
||||||
id?: string
|
|
||||||
reference_number: string
|
|
||||||
request_text: string
|
|
||||||
status?: string
|
|
||||||
title: string
|
|
||||||
updated_at?: string
|
|
||||||
}
|
|
||||||
Update: {
|
|
||||||
buyer_id?: string
|
|
||||||
created_at?: string
|
|
||||||
id?: string
|
|
||||||
reference_number?: string
|
|
||||||
request_text?: string
|
|
||||||
status?: string
|
|
||||||
title?: string
|
|
||||||
updated_at?: string
|
|
||||||
}
|
|
||||||
Relationships: [
|
|
||||||
{
|
|
||||||
foreignKeyName: "rfqs_buyer_id_fkey"
|
|
||||||
columns: ["buyer_id"]
|
|
||||||
isOneToOne: false
|
|
||||||
referencedRelation: "profiles"
|
|
||||||
referencedColumns: ["id"]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import { Preferences } from '@capacitor/preferences';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { useProfile, Profile } from '../contexts/ProfileContext';
|
|
||||||
|
|
||||||
export const useProfileLoader = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const { user } = useAuth();
|
|
||||||
const { setProfile, setStatus } = useProfile();
|
|
||||||
|
|
||||||
const loadProfileAndNavigate = async (
|
|
||||||
setOverlayVisible?: (v: boolean) => void,
|
|
||||||
setOverlayError?: (v: boolean) => void
|
|
||||||
) => {
|
|
||||||
if (!user) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1. Check cache
|
|
||||||
const { value } = await Preferences.get({ key: `profile_${user.id}` });
|
|
||||||
if (value) {
|
|
||||||
const cachedProfile = JSON.parse(value) as Profile;
|
|
||||||
setProfile(cachedProfile);
|
|
||||||
setStatus('loaded');
|
|
||||||
history.replace('/home');
|
|
||||||
|
|
||||||
// Silent refresh
|
|
||||||
const { data } = await supabase
|
|
||||||
.from('profiles')
|
|
||||||
.select('*')
|
|
||||||
.eq('id', user.id)
|
|
||||||
.single();
|
|
||||||
if (data) {
|
|
||||||
setProfile(data);
|
|
||||||
await Preferences.set({
|
|
||||||
key: `profile_${user.id}`,
|
|
||||||
value: JSON.stringify(data),
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// If silent refresh finds no row, they somehow lost their profile (or deleted it)
|
|
||||||
// We can handle this by redirecting them next time, or immediately
|
|
||||||
setStatus('missing');
|
|
||||||
history.replace('/setup-profile');
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Cache miss, fetch from remote
|
|
||||||
if (setOverlayVisible) setOverlayVisible(true);
|
|
||||||
const { data, error } = await supabase
|
|
||||||
.from('profiles')
|
|
||||||
.select('*')
|
|
||||||
.eq('id', user.id)
|
|
||||||
.single();
|
|
||||||
|
|
||||||
if (error && error.code !== 'PGRST116') {
|
|
||||||
// PGRST116 means no rows found
|
|
||||||
console.error('Error fetching profile:', error);
|
|
||||||
if (setOverlayError) setOverlayError(true);
|
|
||||||
return; // Keep overlay visible so they see the error or can retry
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data) {
|
|
||||||
// Row found
|
|
||||||
setProfile(data);
|
|
||||||
setStatus('loaded');
|
|
||||||
await Preferences.set({
|
|
||||||
key: `profile_${user.id}`,
|
|
||||||
value: JSON.stringify(data),
|
|
||||||
});
|
|
||||||
if (setOverlayVisible) setOverlayVisible(false);
|
|
||||||
history.replace('/home');
|
|
||||||
} else {
|
|
||||||
// No row found
|
|
||||||
setStatus('missing');
|
|
||||||
if (setOverlayVisible) setOverlayVisible(false);
|
|
||||||
history.replace('/setup-profile');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Unexpected error loading profile:', err);
|
|
||||||
if (setOverlayError) setOverlayError(true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return { loadProfileAndNavigate };
|
|
||||||
};
|
|
||||||
@@ -1,576 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
IonPage,
|
|
||||||
IonContent,
|
|
||||||
IonSpinner,
|
|
||||||
IonIcon,
|
|
||||||
useIonViewWillEnter,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { eyeOutline, eyeOffOutline } from 'ionicons/icons';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { useProfileLoader } from '../hooks/useProfileLoader';
|
|
||||||
|
|
||||||
const Auth: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const { user } = useAuth();
|
|
||||||
const { loadProfileAndNavigate } = useProfileLoader();
|
|
||||||
|
|
||||||
const [tab, setTab] = useState<'login' | 'register'>('login');
|
|
||||||
|
|
||||||
const [loginEmail, setLoginEmail] = useState('');
|
|
||||||
const [loginPassword, setLoginPassword] = useState('');
|
|
||||||
const [showLoginPassword, setShowLoginPassword] = useState(false);
|
|
||||||
|
|
||||||
const [registerEmail, setRegisterEmail] = useState('');
|
|
||||||
const [registerPassword, setRegisterPassword] = useState('');
|
|
||||||
const [confirmPassword, setConfirmPassword] = useState('');
|
|
||||||
const [showRegisterPassword, setShowRegisterPassword] = useState(false);
|
|
||||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
|
|
||||||
const [overlayVisible, setOverlayVisible] = useState(false);
|
|
||||||
const [overlayError, setOverlayError] = useState(false);
|
|
||||||
|
|
||||||
useIonViewWillEnter(() => {
|
|
||||||
setTab('login');
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (user) {
|
|
||||||
loadProfileAndNavigate(setOverlayVisible, setOverlayError);
|
|
||||||
}
|
|
||||||
}, [user, loadProfileAndNavigate]);
|
|
||||||
|
|
||||||
const showError = (msg: string) => {
|
|
||||||
setError(msg);
|
|
||||||
setTimeout(() => setError(''), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSignIn = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setError('');
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
const { error } = await supabase.auth.signInWithPassword({
|
|
||||||
email: loginEmail,
|
|
||||||
password: loginPassword,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
if (error.message.toLowerCase().includes('email not confirmed')) {
|
|
||||||
await supabase.auth.resend({ type: 'signup', email: loginEmail });
|
|
||||||
history.push('/verify-email', { email: loginEmail, resent: true });
|
|
||||||
} else {
|
|
||||||
showError(error.message);
|
|
||||||
}
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// keep loading true waiting for user effect
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSignUp = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (registerPassword !== confirmPassword) {
|
|
||||||
showError('Passwords do not match');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
const { error } = await supabase.auth.signUp({
|
|
||||||
email: registerEmail,
|
|
||||||
password: registerPassword,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
showError(error.message);
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(false);
|
|
||||||
history.push('/verify-email', { email: registerEmail });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleForgotPassword = () => {
|
|
||||||
history.push('/forgot-password');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: 'var(--color-bg)' }}>
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': 'var(--color-bg-gradient)',
|
|
||||||
'--padding-start': '0px',
|
|
||||||
'--padding-end': '0px',
|
|
||||||
'--padding-top': '0px',
|
|
||||||
'--padding-bottom': '0px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding:
|
|
||||||
'calc(var(--ion-safe-area-top, 0px) + 18px) 20px calc(var(--ion-safe-area-bottom, 0px) + 28px)',
|
|
||||||
minHeight: '100%',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
justifyContent: 'center',
|
|
||||||
gap: '24px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '14px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'inline-flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: '10px',
|
|
||||||
alignSelf: 'flex-start',
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
color: 'var(--color-brand)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '8px 14px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
letterSpacing: '0.06em',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
QuoteLink
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '18px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
lineHeight: '1.2',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Instant prices.{' '}
|
|
||||||
<span
|
|
||||||
style={{ color: 'var(--color-accent)', fontWeight: '700' }}
|
|
||||||
>
|
|
||||||
Smart decisions.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '34px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
lineHeight: '1.02',
|
|
||||||
letterSpacing: '-0.03em',
|
|
||||||
maxWidth: '330px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Modern procurement for buyers and suppliers.
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
lineHeight: '1.6',
|
|
||||||
maxWidth: '320px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Send a request, compare real quotes, and move faster with a
|
|
||||||
clean professional workflow.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '24px',
|
|
||||||
margin: '0',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '20px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '22px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
lineHeight: '1.15',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tab === 'login' ? 'Welcome back' : 'Create your account'}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
lineHeight: '1.55',
|
|
||||||
marginTop: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tab === 'login'
|
|
||||||
? 'Sign in to manage requests and supplier quotations.'
|
|
||||||
: 'Join QuoteLink to start sending or responding to RFQs.'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
onClick={() => setTab('login')}
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
background:
|
|
||||||
tab === 'login' ? 'var(--color-brand)' : 'transparent',
|
|
||||||
color:
|
|
||||||
tab === 'login' ? '#ffffff' : 'var(--color-brand-strong)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '12px 18px',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '600',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Log In
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setTab('register')}
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
background:
|
|
||||||
tab === 'register' ? 'var(--color-brand)' : 'transparent',
|
|
||||||
color:
|
|
||||||
tab === 'register'
|
|
||||||
? '#ffffff'
|
|
||||||
: 'var(--color-brand-strong)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '12px 18px',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '600',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Register
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-danger-soft)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: 'var(--color-danger-text)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{tab === 'login' ? (
|
|
||||||
<form
|
|
||||||
onSubmit={handleSignIn}
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
placeholder="you@example.com"
|
|
||||||
value={loginEmail}
|
|
||||||
onChange={(e) => setLoginEmail(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<div style={{ position: 'relative' }}>
|
|
||||||
<input
|
|
||||||
type={showLoginPassword ? 'text' : 'password'}
|
|
||||||
placeholder="Password"
|
|
||||||
value={loginPassword}
|
|
||||||
onChange={(e) => setLoginPassword(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 40px 0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<IonIcon
|
|
||||||
icon={showLoginPassword ? eyeOffOutline : eyeOutline}
|
|
||||||
onClick={() => setShowLoginPassword(!showLoginPassword)}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
right: '14px',
|
|
||||||
top: '14px',
|
|
||||||
fontSize: '20px',
|
|
||||||
color: 'var(--color-text-tertiary)',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleForgotPassword}
|
|
||||||
style={{
|
|
||||||
background: 'transparent',
|
|
||||||
border: 'none',
|
|
||||||
padding: '0',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-accent)',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Forgot password?
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-brand)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: '#ffffff',
|
|
||||||
cursor: 'pointer',
|
|
||||||
marginTop: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: '#fff', width: '20px', height: '20px' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
'Sign In'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
) : (
|
|
||||||
<form
|
|
||||||
onSubmit={handleSignUp}
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
placeholder="you@example.com"
|
|
||||||
value={registerEmail}
|
|
||||||
onChange={(e) => setRegisterEmail(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<div style={{ position: 'relative' }}>
|
|
||||||
<input
|
|
||||||
type={showRegisterPassword ? 'text' : 'password'}
|
|
||||||
placeholder="Create a password"
|
|
||||||
value={registerPassword}
|
|
||||||
onChange={(e) => setRegisterPassword(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 40px 0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
minLength={6}
|
|
||||||
/>
|
|
||||||
<IonIcon
|
|
||||||
icon={showRegisterPassword ? eyeOffOutline : eyeOutline}
|
|
||||||
onClick={() =>
|
|
||||||
setShowRegisterPassword(!showRegisterPassword)
|
|
||||||
}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
right: '14px',
|
|
||||||
top: '14px',
|
|
||||||
fontSize: '20px',
|
|
||||||
color: 'var(--color-text-tertiary)',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div style={{ position: 'relative' }}>
|
|
||||||
<input
|
|
||||||
type={showConfirmPassword ? 'text' : 'password'}
|
|
||||||
placeholder="Confirm password"
|
|
||||||
value={confirmPassword}
|
|
||||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 40px 0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
minLength={6}
|
|
||||||
/>
|
|
||||||
<IonIcon
|
|
||||||
icon={showConfirmPassword ? eyeOffOutline : eyeOutline}
|
|
||||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
right: '14px',
|
|
||||||
top: '14px',
|
|
||||||
fontSize: '20px',
|
|
||||||
color: 'var(--color-text-tertiary)',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-brand)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: '#ffffff',
|
|
||||||
cursor: 'pointer',
|
|
||||||
marginTop: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: '#fff', width: '20px', height: '20px' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
'Create Account'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{overlayVisible && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
background: 'rgba(18, 18, 18, 0.78)',
|
|
||||||
backdropFilter: 'blur(10px)',
|
|
||||||
WebkitBackdropFilter: 'blur(10px)',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
zIndex: 9999,
|
|
||||||
padding: '24px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{overlayError ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
color: 'var(--color-danger-text)',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '600',
|
|
||||||
textAlign: 'center',
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '20px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Error loading profile. Please restart the app.
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{
|
|
||||||
color: 'var(--color-brand)',
|
|
||||||
width: '28px',
|
|
||||||
height: '28px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Auth;
|
|
||||||
@@ -1,324 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { useHistory, useParams } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonTitle,
|
|
||||||
IonContent,
|
|
||||||
IonSpinner,
|
|
||||||
useIonViewWillEnter,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline, mailOpenOutline } from 'ionicons/icons';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import QuotationCard from '../components/QuotationCard';
|
|
||||||
|
|
||||||
const BuyerQuoteList: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const { id } = useParams<{ id: string }>();
|
|
||||||
|
|
||||||
const [rfqSummary, setRfqSummary] = useState<{
|
|
||||||
title: string;
|
|
||||||
referenceNumber: string;
|
|
||||||
} | null>(null);
|
|
||||||
const [quotes, setQuotes] = useState<any[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
const [sortMode, setSortMode] = useState<'price' | 'supplier'>('price');
|
|
||||||
|
|
||||||
useIonViewWillEnter(() => {
|
|
||||||
loadQuotes();
|
|
||||||
});
|
|
||||||
|
|
||||||
const loadQuotes = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
|
||||||
try {
|
|
||||||
const { data: rfq, error: rfqErr } = await supabase
|
|
||||||
.from('rfqs')
|
|
||||||
.select('title, reference_number')
|
|
||||||
.eq('id', id)
|
|
||||||
.single();
|
|
||||||
if (rfqErr) throw rfqErr;
|
|
||||||
setRfqSummary({
|
|
||||||
title: rfq.title,
|
|
||||||
referenceNumber: rfq.reference_number,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { data: qData, error: qErr } = await supabase
|
|
||||||
.from('quotations')
|
|
||||||
.select(
|
|
||||||
'id, price_amount, delivery_option, status, supplier_id, profiles(full_name, company_name)'
|
|
||||||
)
|
|
||||||
.eq('rfq_id', id);
|
|
||||||
if (qErr) throw qErr;
|
|
||||||
|
|
||||||
const mapped = (qData || []).map((q) => ({
|
|
||||||
id: q.id,
|
|
||||||
priceAmount: q.price_amount,
|
|
||||||
deliveryOption: q.delivery_option,
|
|
||||||
status: q.status,
|
|
||||||
supplierName:
|
|
||||||
q.profiles?.company_name || q.profiles?.full_name || 'Supplier',
|
|
||||||
}));
|
|
||||||
|
|
||||||
setQuotes(mapped);
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error(err);
|
|
||||||
setError('Failed to load quotations.');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getSortedQuotes = () => {
|
|
||||||
if (sortMode === 'price') {
|
|
||||||
return [...quotes].sort((a, b) => a.priceAmount - b.priceAmount);
|
|
||||||
} else {
|
|
||||||
return [...quotes].sort((a, b) =>
|
|
||||||
a.supplierName.localeCompare(b.supplierName)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAcceptQuote = async (quoteId: string) => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
// Update selected quotation to accepted
|
|
||||||
const { error: accErr } = await supabase
|
|
||||||
.from('quotations')
|
|
||||||
.update({ status: 'accepted', updated_at: new Date().toISOString() })
|
|
||||||
.eq('id', quoteId);
|
|
||||||
if (accErr) throw accErr;
|
|
||||||
|
|
||||||
// Update sibling quotations to declined
|
|
||||||
const { error: decErr } = await supabase
|
|
||||||
.from('quotations')
|
|
||||||
.update({ status: 'declined', updated_at: new Date().toISOString() })
|
|
||||||
.eq('rfq_id', id)
|
|
||||||
.neq('id', quoteId);
|
|
||||||
if (decErr) throw decErr;
|
|
||||||
|
|
||||||
// Close RFQ
|
|
||||||
const { error: rfqErr } = await supabase
|
|
||||||
.from('rfqs')
|
|
||||||
.update({ status: 'closed', updated_at: new Date().toISOString() })
|
|
||||||
.eq('id', id);
|
|
||||||
if (rfqErr) throw rfqErr;
|
|
||||||
|
|
||||||
await loadQuotes();
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error(err);
|
|
||||||
setError(err.message || 'Failed to accept quote.');
|
|
||||||
setLoading(false);
|
|
||||||
setTimeout(() => setError(''), 4000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeclineQuote = async (quoteId: string) => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
const { error } = await supabase
|
|
||||||
.from('quotations')
|
|
||||||
.update({ status: 'declined', updated_at: new Date().toISOString() })
|
|
||||||
.eq('id', quoteId);
|
|
||||||
if (error) throw error;
|
|
||||||
|
|
||||||
await loadQuotes();
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error(err);
|
|
||||||
setError(err.message || 'Failed to decline quote.');
|
|
||||||
setLoading(false);
|
|
||||||
setTimeout(() => setError(''), 4000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const sortedQuotes = getSortedQuotes();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: '#f7faf7' }}>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar style={{ '--background': '#f7faf7' }}>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton
|
|
||||||
onClick={() => history.goBack()}
|
|
||||||
style={{ color: '#14532d' }}
|
|
||||||
>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle
|
|
||||||
style={{ fontSize: '18px', fontWeight: '700', color: '#0f1720' }}
|
|
||||||
>
|
|
||||||
Compare Quotes
|
|
||||||
</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': '#f7faf7',
|
|
||||||
'--padding-start': '20px',
|
|
||||||
'--padding-end': '20px',
|
|
||||||
'--padding-top': '20px',
|
|
||||||
'--padding-bottom': 'calc(28px + var(--ion-safe-area-bottom))',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loading && quotes.length === 0 ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '40px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonSpinner name="crescent" style={{ color: '#166534' }} />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{rfqSummary && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '20px',
|
|
||||||
margin: '0 0 12px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: '#b45309',
|
|
||||||
background: 'rgba(245,158,11,0.14)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '4px 10px',
|
|
||||||
width: 'max-content',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{rfqSummary.referenceNumber}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#0f1720',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{rfqSummary.title}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'rgba(239, 68, 68, 0.10)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: '#b91c1c',
|
|
||||||
marginBottom: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div style={{ margin: '0 0 12px', display: 'flex', gap: '8px' }}>
|
|
||||||
<button
|
|
||||||
onClick={() => setSortMode('price')}
|
|
||||||
style={{
|
|
||||||
background: sortMode === 'price' ? '#166534' : '#ffffff',
|
|
||||||
color: sortMode === 'price' ? '#ffffff' : '#14532d',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '8px 16px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Sort by Price
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setSortMode('supplier')}
|
|
||||||
style={{
|
|
||||||
background: sortMode === 'supplier' ? '#166534' : '#ffffff',
|
|
||||||
color: sortMode === 'supplier' ? '#ffffff' : '#14532d',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '8px 16px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Sort by Supplier
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{sortedQuotes.length > 0 ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{sortedQuotes.map((q) => (
|
|
||||||
<QuotationCard
|
|
||||||
key={q.id}
|
|
||||||
supplierName={q.supplierName}
|
|
||||||
priceLabel={`$${q.priceAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
|
|
||||||
deliveryOption={q.deliveryOption}
|
|
||||||
status={q.status}
|
|
||||||
onAccept={() => handleAcceptQuote(q.id)}
|
|
||||||
onDecline={() => handleDeclineQuote(q.id)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '28px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
textAlign: 'center',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={mailOpenOutline}
|
|
||||||
style={{ fontSize: '48px', color: '#6c7a71' }}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#6c7a71',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
No quotations available yet.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BuyerQuoteList;
|
|
||||||
@@ -1,343 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
IonPage,
|
|
||||||
IonContent,
|
|
||||||
IonSpinner,
|
|
||||||
useIonViewWillEnter,
|
|
||||||
IonIcon,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import {
|
|
||||||
addOutline,
|
|
||||||
searchOutline,
|
|
||||||
optionsOutline,
|
|
||||||
documentTextOutline,
|
|
||||||
} from 'ionicons/icons';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useProfile } from '../contexts/ProfileContext';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import RequestListCard from '../components/RequestListCard';
|
|
||||||
|
|
||||||
interface RFQListItem {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
referenceNumber: string;
|
|
||||||
status: string;
|
|
||||||
createdAt: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const BuyerRequests: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const { user } = useAuth();
|
|
||||||
const { profile } = useProfile();
|
|
||||||
|
|
||||||
const [items, setItems] = useState<RFQListItem[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
|
|
||||||
const [searchText, setSearchText] = useState('');
|
|
||||||
const [activeStatus, setActiveStatus] = useState<
|
|
||||||
'all' | 'open' | 'quoted' | 'closed'
|
|
||||||
>('all');
|
|
||||||
|
|
||||||
useIonViewWillEnter(() => {
|
|
||||||
loadRequests();
|
|
||||||
});
|
|
||||||
|
|
||||||
const loadRequests = async () => {
|
|
||||||
if (!user || !profile) return;
|
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (profile.role === 'buyer') {
|
|
||||||
const { data, error: err } = await supabase
|
|
||||||
.from('rfqs')
|
|
||||||
.select('*')
|
|
||||||
.eq('buyer_id', user.id)
|
|
||||||
.order('created_at', { ascending: false });
|
|
||||||
if (err) throw err;
|
|
||||||
setItems(
|
|
||||||
data.map((d) => ({
|
|
||||||
id: d.id,
|
|
||||||
title: d.title,
|
|
||||||
referenceNumber: d.reference_number,
|
|
||||||
status: d.status,
|
|
||||||
createdAt: d.created_at,
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
const { data, error: err } = await supabase
|
|
||||||
.from('rfq_recipients')
|
|
||||||
.select('id, rfqs!inner(*)')
|
|
||||||
.eq('supplier_id', user.id)
|
|
||||||
.order('created_at', { ascending: false });
|
|
||||||
if (err) throw err;
|
|
||||||
const mapped = (data || []).map((row: any) => ({
|
|
||||||
id: row.rfqs.id,
|
|
||||||
title: row.rfqs.title,
|
|
||||||
referenceNumber: row.rfqs.reference_number,
|
|
||||||
status: row.rfqs.status,
|
|
||||||
createdAt: row.rfqs.created_at,
|
|
||||||
}));
|
|
||||||
setItems(mapped);
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error(err);
|
|
||||||
setError('Failed to load requests.');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const filteredItems = items.filter((item) => {
|
|
||||||
const matchStatus = activeStatus === 'all' || item.status === activeStatus;
|
|
||||||
const searchLower = searchText.toLowerCase();
|
|
||||||
const matchSearch =
|
|
||||||
item.title.toLowerCase().includes(searchLower) ||
|
|
||||||
item.referenceNumber.toLowerCase().includes(searchLower);
|
|
||||||
return matchStatus && matchSearch;
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleResetFilters = () => {
|
|
||||||
setSearchText('');
|
|
||||||
setActiveStatus('all');
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!profile) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: 'var(--color-bg)' }}>
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': 'var(--color-bg-gradient)',
|
|
||||||
'--padding-start': '0px',
|
|
||||||
'--padding-end': '0px',
|
|
||||||
'--padding-top': '0px',
|
|
||||||
'--padding-bottom': 'calc(96px + var(--ion-safe-area-bottom))',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: 'calc(16px + var(--ion-safe-area-top, 0px)) 20px 12px',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '3px' }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '700',
|
|
||||||
letterSpacing: '0.08em',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
color: 'var(--color-brand)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.role === 'buyer' ? 'Buyer Workspace' : 'Supplier Inbox'}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '24px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.role === 'buyer' ? 'My Requests' : 'Assigned RFQs'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{profile.role === 'buyer' && (
|
|
||||||
<div
|
|
||||||
onClick={() => history.push('/rfq/new')}
|
|
||||||
style={{
|
|
||||||
width: '40px',
|
|
||||||
height: '40px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: 'var(--color-brand)',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
cursor: 'pointer',
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={addOutline}
|
|
||||||
style={{ color: '#ffffff', fontSize: '24px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0 20px 12px',
|
|
||||||
background: 'rgba(239, 68, 68, 0.10)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: '#b91c1c',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div style={{ margin: '0 20px 12px', display: 'flex', gap: '10px' }}>
|
|
||||||
<div style={{ flex: 1, position: 'relative' }}>
|
|
||||||
<IonIcon
|
|
||||||
icon={searchOutline}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
left: '14px',
|
|
||||||
top: '14px',
|
|
||||||
fontSize: '18px',
|
|
||||||
color: 'var(--color-text-tertiary)',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search by title or reference..."
|
|
||||||
value={searchText}
|
|
||||||
onChange={(e) => setSearchText(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
border: 'none',
|
|
||||||
padding: '0 16px 0 40px',
|
|
||||||
height: '44px',
|
|
||||||
width: '100%',
|
|
||||||
fontSize: '14px',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleResetFilters}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
border: 'none',
|
|
||||||
width: '44px',
|
|
||||||
height: '44px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
cursor: 'pointer',
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={optionsOutline}
|
|
||||||
style={{ fontSize: '20px', color: 'var(--color-brand)' }}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0 20px 16px',
|
|
||||||
display: 'flex',
|
|
||||||
gap: '8px',
|
|
||||||
overflowX: 'auto',
|
|
||||||
paddingBottom: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{(['all', 'open', 'quoted', 'closed'] as const).map((status) => (
|
|
||||||
<button
|
|
||||||
key={status}
|
|
||||||
onClick={() => setActiveStatus(status)}
|
|
||||||
style={{
|
|
||||||
background:
|
|
||||||
activeStatus === status
|
|
||||||
? 'var(--color-brand)'
|
|
||||||
: 'var(--color-surface)',
|
|
||||||
color:
|
|
||||||
activeStatus === status
|
|
||||||
? '#ffffff'
|
|
||||||
: 'var(--color-brand-strong)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '8px 16px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{status}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0 20px',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '20px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonSpinner name="crescent" style={{ color: '#166534' }} />
|
|
||||||
</div>
|
|
||||||
) : filteredItems.length > 0 ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0 20px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{filteredItems.map((item) => (
|
|
||||||
<RequestListCard
|
|
||||||
key={item.id}
|
|
||||||
title={item.title}
|
|
||||||
subtitle={new Date(item.createdAt).toLocaleDateString()}
|
|
||||||
referenceNumber={item.referenceNumber}
|
|
||||||
status={item.status}
|
|
||||||
onClick={() => history.push(`/rfq/${item.id}`)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0 20px',
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '28px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
textAlign: 'center',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={documentTextOutline}
|
|
||||||
style={{ fontSize: '48px', color: 'var(--color-text-tertiary)' }}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
No requests found.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BuyerRequests;
|
|
||||||
@@ -1,309 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonTitle,
|
|
||||||
IonContent,
|
|
||||||
IonSpinner,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline } from 'ionicons/icons';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { useProfile } from '../contexts/ProfileContext';
|
|
||||||
import { Preferences } from '@capacitor/preferences';
|
|
||||||
|
|
||||||
const EditProfile: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const { user } = useAuth();
|
|
||||||
const { profile, setProfile } = useProfile();
|
|
||||||
|
|
||||||
const [fullName, setFullName] = useState('');
|
|
||||||
const [companyName, setCompanyName] = useState('');
|
|
||||||
const [phone, setPhone] = useState('');
|
|
||||||
const [city, setCity] = useState('');
|
|
||||||
const [saving, setSaving] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (profile) {
|
|
||||||
setFullName(profile.full_name || '');
|
|
||||||
setCompanyName(profile.company_name || '');
|
|
||||||
setPhone(profile.phone || '');
|
|
||||||
setCity(profile.city || '');
|
|
||||||
}
|
|
||||||
}, [profile]);
|
|
||||||
|
|
||||||
const showError = (msg: string) => {
|
|
||||||
setError(msg);
|
|
||||||
setTimeout(() => setError(''), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSaveProfile = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!user || !profile) return;
|
|
||||||
if (!fullName) {
|
|
||||||
showError('Please enter your full name');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSaving(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
const updates = {
|
|
||||||
full_name: fullName,
|
|
||||||
company_name: companyName || null,
|
|
||||||
phone: phone || null,
|
|
||||||
city: city || null,
|
|
||||||
updated_at: new Date().toISOString(),
|
|
||||||
};
|
|
||||||
|
|
||||||
const { error: updateError } = await supabase
|
|
||||||
.from('profiles')
|
|
||||||
.update(updates)
|
|
||||||
.eq('id', user.id);
|
|
||||||
|
|
||||||
if (updateError) {
|
|
||||||
showError(updateError.message);
|
|
||||||
setSaving(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const updatedProfile = { ...profile, ...updates };
|
|
||||||
setProfile(updatedProfile);
|
|
||||||
await Preferences.set({
|
|
||||||
key: `profile_${user.id}`,
|
|
||||||
value: JSON.stringify(updatedProfile),
|
|
||||||
});
|
|
||||||
|
|
||||||
setSaving(false);
|
|
||||||
history.goBack();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: 'var(--color-bg)' }}>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar
|
|
||||||
style={{ '--background': 'var(--color-bg)' } as React.CSSProperties}
|
|
||||||
>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton
|
|
||||||
onClick={() => history.goBack()}
|
|
||||||
style={{ color: 'var(--color-brand-strong)' }}
|
|
||||||
>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle
|
|
||||||
style={{
|
|
||||||
fontSize: '18px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Edit Profile
|
|
||||||
</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': 'var(--color-bg)',
|
|
||||||
'--padding-start': '20px',
|
|
||||||
'--padding-end': '20px',
|
|
||||||
'--padding-top': '20px',
|
|
||||||
'--padding-bottom': 'calc(28px + var(--ion-safe-area-bottom))',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '24px',
|
|
||||||
margin: '0',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '18px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-danger-soft)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: 'var(--color-danger-text)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<form
|
|
||||||
onSubmit={handleSaveProfile}
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Full Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="e.g. John Doe"
|
|
||||||
value={fullName}
|
|
||||||
onChange={(e) => setFullName(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Company Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="e.g. BuildRight Supplies"
|
|
||||||
value={companyName}
|
|
||||||
onChange={(e) => setCompanyName(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
City
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="e.g. Lagos"
|
|
||||||
value={city}
|
|
||||||
onChange={(e) => setCity(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Phone
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
placeholder="e.g. +234 800 000 0000"
|
|
||||||
value={phone}
|
|
||||||
onChange={(e) => setPhone(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={saving || !fullName}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-brand)',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
opacity: saving || !fullName ? 0.7 : 1,
|
|
||||||
marginTop: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{saving ? (
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: '#fff', width: '20px', height: '20px' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
'Save Changes'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EditProfile;
|
|
||||||
@@ -1,177 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonTitle,
|
|
||||||
IonContent,
|
|
||||||
IonSpinner,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline } from 'ionicons/icons';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
|
|
||||||
const ForgotPassword: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
|
|
||||||
const showError = (msg: string) => {
|
|
||||||
setError(msg);
|
|
||||||
setTimeout(() => setError(''), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRequestReset = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
const { error } = await supabase.auth.resetPasswordForEmail(email);
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
showError(error.message);
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
history.push('/verify-reset', { email });
|
|
||||||
setLoading(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: '#f7faf7' }}>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar style={{ '--background': '#f7faf7' }}>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton
|
|
||||||
onClick={() => history.goBack()}
|
|
||||||
style={{ color: '#14532d' }}
|
|
||||||
>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle
|
|
||||||
style={{ fontSize: '18px', fontWeight: '700', color: '#0f1720' }}
|
|
||||||
>
|
|
||||||
Reset Password
|
|
||||||
</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': '#f7faf7',
|
|
||||||
'--padding-start': '0px',
|
|
||||||
'--padding-end': '0px',
|
|
||||||
'--padding-top': '0px',
|
|
||||||
'--padding-bottom': '0px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '24px',
|
|
||||||
margin: '20px 20px 0',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '18px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<h2
|
|
||||||
style={{
|
|
||||||
fontSize: '22px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: '#0f1720',
|
|
||||||
margin: '0 0 8px 0',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Forgot password?
|
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#5f6d63',
|
|
||||||
margin: '0',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Enter your email address and we'll send you a 6-digit code to
|
|
||||||
reset your password.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'rgba(239, 68, 68, 0.10)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: '#b91c1c',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<form
|
|
||||||
onSubmit={handleRequestReset}
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
placeholder="you@example.com"
|
|
||||||
value={email}
|
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: '#f4f7f4',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#0f1720',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading || !email}
|
|
||||||
style={{
|
|
||||||
background: '#166534',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
opacity: loading || !email ? 0.7 : 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: '#fff', width: '20px', height: '20px' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
'Send Code'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ForgotPassword;
|
|
||||||
@@ -1,470 +1,30 @@
|
|||||||
import React, { useState } from 'react';
|
import React from "react";
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import {
|
import {
|
||||||
IonPage,
|
|
||||||
IonContent,
|
IonContent,
|
||||||
IonSpinner,
|
IonHeader,
|
||||||
useIonViewWillEnter,
|
IonPage,
|
||||||
IonIcon,
|
IonTitle,
|
||||||
} from '@ionic/react';
|
IonToolbar,
|
||||||
import { documentTextOutline, addOutline, searchOutline } from 'ionicons/icons';
|
} from "@ionic/react";
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useProfile } from '../contexts/ProfileContext';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import DashboardMetricCard from '../components/DashboardMetricCard';
|
|
||||||
import RecentActivityCard from '../components/RecentActivityCard';
|
|
||||||
import { Database } from '../database.types';
|
|
||||||
|
|
||||||
type RfqRow = Database['public']['Tables']['rfqs']['Row'];
|
const Home: React.FC = () => (
|
||||||
|
<IonPage>
|
||||||
const Home: React.FC = () => {
|
<IonHeader translucent className="home-header">
|
||||||
const history = useHistory();
|
<IonToolbar className="home-toolbar">
|
||||||
const { user } = useAuth();
|
<IonTitle>Home</IonTitle>
|
||||||
const { profile } = useProfile();
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
const [loading, setLoading] = useState(true);
|
<IonContent fullscreen className="home-content">
|
||||||
const [error, setError] = useState('');
|
<div className="home-shell minimal-home-shell">
|
||||||
|
<section className="minimal-welcome-card subtle-welcome-card">
|
||||||
const [rfqSummary, setRfqSummary] = useState({
|
<h1>Welcome to your new app</h1>
|
||||||
open: 0,
|
<p className="minimal-subtitle">
|
||||||
quoted: 0,
|
Chat with the assistant to start adding features and pages
|
||||||
closed: 0,
|
</p>
|
||||||
});
|
</section>
|
||||||
const [supplierSummary, setSupplierSummary] = useState({
|
|
||||||
assignedOpen: 0,
|
|
||||||
myQuotes: 0,
|
|
||||||
accepted: 0,
|
|
||||||
});
|
|
||||||
const [recentItems, setRecentItems] = useState<any[]>([]);
|
|
||||||
|
|
||||||
useIonViewWillEnter(() => {
|
|
||||||
loadDashboardData();
|
|
||||||
});
|
|
||||||
|
|
||||||
const loadDashboardData = async () => {
|
|
||||||
if (!user || !profile) return;
|
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (profile.role === 'buyer') {
|
|
||||||
// Aggregate counts
|
|
||||||
const { data: allRfqs, error: countErr } = await supabase
|
|
||||||
.from('rfqs')
|
|
||||||
.select('id, status')
|
|
||||||
.eq('buyer_id', user.id);
|
|
||||||
|
|
||||||
if (countErr) throw countErr;
|
|
||||||
|
|
||||||
let open = 0,
|
|
||||||
quoted = 0,
|
|
||||||
closed = 0;
|
|
||||||
allRfqs?.forEach((r) => {
|
|
||||||
if (r.status === 'open') open++;
|
|
||||||
else if (r.status === 'quoted') quoted++;
|
|
||||||
else if (r.status === 'closed') closed++;
|
|
||||||
});
|
|
||||||
setRfqSummary({ open, quoted, closed });
|
|
||||||
|
|
||||||
// Recent items
|
|
||||||
const { data: recent, error: recentErr } = await supabase
|
|
||||||
.from('rfqs')
|
|
||||||
.select('*')
|
|
||||||
.eq('buyer_id', user.id)
|
|
||||||
.order('created_at', { ascending: false })
|
|
||||||
.limit(5);
|
|
||||||
if (recentErr) throw recentErr;
|
|
||||||
setRecentItems(recent || []);
|
|
||||||
} else {
|
|
||||||
// Supplier
|
|
||||||
const { data: allRecipients, error: recErr } = await supabase
|
|
||||||
.from('rfq_recipients')
|
|
||||||
.select('id, rfqs!inner(id, status)')
|
|
||||||
.eq('supplier_id', user.id);
|
|
||||||
if (recErr) throw recErr;
|
|
||||||
|
|
||||||
let assignedOpen = 0;
|
|
||||||
allRecipients?.forEach((r: any) => {
|
|
||||||
if (r.rfqs && r.rfqs.status === 'open') assignedOpen++;
|
|
||||||
});
|
|
||||||
|
|
||||||
const { data: myQuotes, error: qErr } = await supabase
|
|
||||||
.from('quotations')
|
|
||||||
.select('id, status')
|
|
||||||
.eq('supplier_id', user.id);
|
|
||||||
if (qErr) throw qErr;
|
|
||||||
|
|
||||||
let accepted = 0;
|
|
||||||
myQuotes?.forEach((q) => {
|
|
||||||
if (q.status === 'accepted') accepted++;
|
|
||||||
});
|
|
||||||
setSupplierSummary({
|
|
||||||
assignedOpen,
|
|
||||||
myQuotes: myQuotes?.length || 0,
|
|
||||||
accepted,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { data: recent, error: recentErr } = await supabase
|
|
||||||
.from('rfq_recipients')
|
|
||||||
.select('id, rfqs!inner(*)')
|
|
||||||
.eq('supplier_id', user.id)
|
|
||||||
.order('created_at', { ascending: false })
|
|
||||||
.limit(5);
|
|
||||||
if (recentErr) throw recentErr;
|
|
||||||
|
|
||||||
// Map joined data
|
|
||||||
const mapped = (recent || []).map((r: any) => r.rfqs);
|
|
||||||
setRecentItems(mapped);
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error(err);
|
|
||||||
setError('Failed to load dashboard data.');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePrimaryAction = () => {
|
|
||||||
if (profile?.role === 'buyer') {
|
|
||||||
history.push('/rfq/new');
|
|
||||||
} else {
|
|
||||||
history.push('/requests');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRecentItemTap = (item: RfqRow) => {
|
|
||||||
history.push(`/rfq/${item.id}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!profile) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: 'var(--color-bg)' }}>
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': 'var(--color-bg-gradient)',
|
|
||||||
'--padding-start': '0px',
|
|
||||||
'--padding-end': '0px',
|
|
||||||
'--padding-top': '0px',
|
|
||||||
'--padding-bottom': 'calc(96px + var(--ion-safe-area-bottom))',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: 'calc(16px + var(--ion-safe-area-top, 0px)) 20px 16px',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '3px' }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '700',
|
|
||||||
letterSpacing: '0.08em',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
color: 'var(--color-brand)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
QuoteLink
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-tertiary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Procurement made simpler
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
onClick={() => history.push('/profile')}
|
|
||||||
style={{
|
|
||||||
width: '40px',
|
|
||||||
height: '40px',
|
|
||||||
borderRadius: '999px',
|
|
||||||
background: 'var(--color-brand-medium)',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
cursor: 'pointer',
|
|
||||||
color: 'var(--color-brand)',
|
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: '700',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.full_name.charAt(0)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0 20px 18px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '5px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '26px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
lineHeight: '1.08',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Good to see you,{' '}
|
|
||||||
<span style={{ fontWeight: '700' }}>
|
|
||||||
{profile.full_name.split(' ')[0]}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.role === 'buyer'
|
|
||||||
? 'Track requests, review supplier pricing, and keep decisions moving.'
|
|
||||||
: 'Review assigned RFQs, send pricing fast, and stay on top of wins.'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0 20px 12px',
|
|
||||||
background: 'var(--color-danger-soft)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: 'var(--color-danger-text)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-brand-strong)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '22px',
|
|
||||||
margin: '0 20px 12px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '14px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
onClick={handlePrimaryAction}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'flex-start',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'rgba(255,255,255,0.72)',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
letterSpacing: '0.05em',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.role === 'buyer' ? 'Active Requests' : 'Assigned RFQs'}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '34px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#ffffff',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.role === 'buyer'
|
|
||||||
? rfqSummary.open + rfqSummary.quoted
|
|
||||||
: supplierSummary.assignedOpen}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '40px',
|
|
||||||
height: '40px',
|
|
||||||
borderRadius: '14px',
|
|
||||||
background: 'rgba(255,255,255,0.15)',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={profile.role === 'buyer' ? addOutline : searchOutline}
|
|
||||||
style={{ color: '#ffffff', fontSize: '24px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-accent)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.role === 'buyer'
|
|
||||||
? 'Create new request →'
|
|
||||||
: 'Browse requests →'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{ display: 'flex', gap: '12px', margin: '0 20px 24px' }}>
|
|
||||||
{profile.role === 'buyer' ? (
|
|
||||||
<>
|
|
||||||
<DashboardMetricCard
|
|
||||||
label="Received Quotes"
|
|
||||||
value={rfqSummary.quoted.toString()}
|
|
||||||
hint="Awaiting decision"
|
|
||||||
icon={documentTextOutline}
|
|
||||||
/>
|
|
||||||
<DashboardMetricCard
|
|
||||||
label="Completed"
|
|
||||||
value={rfqSummary.closed.toString()}
|
|
||||||
hint="Past requests"
|
|
||||||
icon={documentTextOutline}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<DashboardMetricCard
|
|
||||||
label="My Quotes"
|
|
||||||
value={supplierSummary.myQuotes.toString()}
|
|
||||||
hint="Submitted"
|
|
||||||
icon={documentTextOutline}
|
|
||||||
/>
|
|
||||||
<DashboardMetricCard
|
|
||||||
label="Accepted"
|
|
||||||
value={supplierSummary.accepted.toString()}
|
|
||||||
hint="Won bids"
|
|
||||||
icon={documentTextOutline}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '16px 20px 8px',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'flex-end',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Recent Activity
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
onClick={() => history.push('/requests')}
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: 'var(--color-brand)',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
See all
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0 20px',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '20px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: 'var(--color-brand)' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : recentItems.length > 0 ? (
|
|
||||||
recentItems.map((item) => (
|
|
||||||
<RecentActivityCard
|
|
||||||
key={item.id}
|
|
||||||
title={item.title}
|
|
||||||
subtitle={new Date(item.created_at).toLocaleDateString()}
|
|
||||||
meta={item.status}
|
|
||||||
onClick={() => handleRecentItemTap(item)}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0 20px',
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '28px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
textAlign: 'center',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={documentTextOutline}
|
|
||||||
style={{ fontSize: '48px', color: 'var(--color-text-tertiary)' }}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
No recent activity yet.
|
|
||||||
</div>
|
|
||||||
{profile.role === 'buyer' && (
|
|
||||||
<button
|
|
||||||
onClick={handlePrimaryAction}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-brand)',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '10px 20px',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '600',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
marginTop: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Create Request
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</IonContent>
|
</IonContent>
|
||||||
</IonPage>
|
</IonPage>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default Home;
|
export default Home;
|
||||||
|
|||||||
@@ -1,491 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonTitle,
|
|
||||||
IonContent,
|
|
||||||
IonSpinner,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline, cameraOutline, closeCircle } from 'ionicons/icons';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import SupplierPickerRow, {
|
|
||||||
SupplierOption,
|
|
||||||
} from '../components/SupplierPickerRow';
|
|
||||||
|
|
||||||
const NewRfq: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const { user } = useAuth();
|
|
||||||
|
|
||||||
const [title, setTitle] = useState('');
|
|
||||||
const [requestText, setRequestText] = useState('');
|
|
||||||
|
|
||||||
const [supplierOptions, setSupplierOptions] = useState<SupplierOption[]>([]);
|
|
||||||
const [selectedSupplierIds, setSelectedSupplierIds] = useState<string[]>([]);
|
|
||||||
const [loadingSuppliers, setLoadingSuppliers] = useState(true);
|
|
||||||
|
|
||||||
const [imageFile, setImageFile] = useState<File | null>(null);
|
|
||||||
const [imagePreviewUrl, setImagePreviewUrl] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadSuppliers();
|
|
||||||
return () => {
|
|
||||||
cleanupPreview();
|
|
||||||
};
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const loadSuppliers = async () => {
|
|
||||||
setLoadingSuppliers(true);
|
|
||||||
const { data, error: err } = await supabase
|
|
||||||
.from('profiles')
|
|
||||||
.select('id, full_name, company_name, city')
|
|
||||||
.eq('role', 'supplier')
|
|
||||||
.order('company_name', { ascending: true })
|
|
||||||
.order('full_name', { ascending: true });
|
|
||||||
|
|
||||||
if (!err && data) {
|
|
||||||
setSupplierOptions(data);
|
|
||||||
}
|
|
||||||
setLoadingSuppliers(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const cleanupPreview = () => {
|
|
||||||
if (imagePreviewUrl) {
|
|
||||||
URL.revokeObjectURL(imagePreviewUrl);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (e.target.files && e.target.files.length > 0) {
|
|
||||||
const file = e.target.files[0];
|
|
||||||
setImageFile(file);
|
|
||||||
cleanupPreview();
|
|
||||||
setImagePreviewUrl(URL.createObjectURL(file));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleSupplier = (id: string) => {
|
|
||||||
if (selectedSupplierIds.includes(id)) {
|
|
||||||
setSelectedSupplierIds(selectedSupplierIds.filter((s) => s !== id));
|
|
||||||
} else {
|
|
||||||
if (selectedSupplierIds.length >= 5) {
|
|
||||||
showError('Select up to 5 suppliers');
|
|
||||||
} else {
|
|
||||||
setSelectedSupplierIds([...selectedSupplierIds, id]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const showError = (msg: string) => {
|
|
||||||
setError(msg);
|
|
||||||
setTimeout(() => setError(''), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateRfq = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!user) return;
|
|
||||||
if (!requestText.trim()) {
|
|
||||||
showError('Please describe your request.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (selectedSupplierIds.length === 0) {
|
|
||||||
showError('Please select at least 1 supplier.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1. Get Reference Number
|
|
||||||
const { data: refData, error: refError } =
|
|
||||||
await supabase.functions.invoke('create-rfq-reference', {
|
|
||||||
body: {},
|
|
||||||
});
|
|
||||||
if (refError || !refData?.referenceNumber) {
|
|
||||||
throw new Error('Failed to generate reference number.');
|
|
||||||
}
|
|
||||||
|
|
||||||
const referenceNumber = refData.referenceNumber;
|
|
||||||
const derivedTitle =
|
|
||||||
title.trim() || requestText.trim().substring(0, 30) + '...';
|
|
||||||
|
|
||||||
// 2. Insert RFQ
|
|
||||||
const { data: rfq, error: rfqError } = await supabase
|
|
||||||
.from('rfqs')
|
|
||||||
.insert({
|
|
||||||
buyer_id: user.id,
|
|
||||||
reference_number: referenceNumber,
|
|
||||||
title: derivedTitle,
|
|
||||||
request_text: requestText.trim(),
|
|
||||||
status: 'open',
|
|
||||||
})
|
|
||||||
.select('id')
|
|
||||||
.single();
|
|
||||||
|
|
||||||
if (rfqError) throw rfqError;
|
|
||||||
|
|
||||||
// 3. Upload Image if present
|
|
||||||
if (imageFile) {
|
|
||||||
const filePath = `${user.id}/${rfq.id}/${Date.now()}-${imageFile.name}`;
|
|
||||||
const { error: uploadError } = await supabase.storage
|
|
||||||
.from('rfq-images')
|
|
||||||
.upload(filePath, imageFile);
|
|
||||||
|
|
||||||
if (uploadError) throw uploadError;
|
|
||||||
|
|
||||||
const { error: imgMetaError } = await supabase
|
|
||||||
.from('rfq_images')
|
|
||||||
.insert({
|
|
||||||
rfq_id: rfq.id,
|
|
||||||
owner_id: user.id,
|
|
||||||
storage_path: filePath,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (imgMetaError) throw imgMetaError;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4. Insert Recipients
|
|
||||||
const recipientsToInsert = selectedSupplierIds.map((sid) => ({
|
|
||||||
rfq_id: rfq.id,
|
|
||||||
supplier_id: sid,
|
|
||||||
}));
|
|
||||||
const { error: recError } = await supabase
|
|
||||||
.from('rfq_recipients')
|
|
||||||
.insert(recipientsToInsert);
|
|
||||||
|
|
||||||
if (recError) throw recError;
|
|
||||||
|
|
||||||
// 5. Navigate
|
|
||||||
history.replace(`/rfq/${rfq.id}`);
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error(err);
|
|
||||||
showError(err.message || 'Failed to create RFQ.');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: '#f7faf7' }}>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar style={{ '--background': '#f7faf7' }}>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton
|
|
||||||
onClick={() => history.goBack()}
|
|
||||||
style={{ color: '#14532d' }}
|
|
||||||
>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle
|
|
||||||
style={{ fontSize: '18px', fontWeight: '700', color: '#0f1720' }}
|
|
||||||
>
|
|
||||||
New Request
|
|
||||||
</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': '#f7faf7',
|
|
||||||
'--padding-start': '20px',
|
|
||||||
'--padding-end': '20px',
|
|
||||||
'--padding-top': '20px',
|
|
||||||
'--padding-bottom': 'calc(28px + var(--ion-safe-area-bottom))',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ margin: '0 0 16px', background: 'transparent' }}>
|
|
||||||
<h1
|
|
||||||
style={{
|
|
||||||
fontSize: '26px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: '#0f1720',
|
|
||||||
margin: '0 0 4px 0',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Request Quote
|
|
||||||
</h1>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#5f6d63',
|
|
||||||
margin: '0',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Describe what you need and select suppliers.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'rgba(239, 68, 68, 0.10)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: '#b91c1c',
|
|
||||||
marginBottom: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<form
|
|
||||||
onSubmit={handleCreateRfq}
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '24px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '18px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Title (e.g. 100 Bricks + Cement)"
|
|
||||||
value={title}
|
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: '#f4f7f4',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#0f1720',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<textarea
|
|
||||||
placeholder="Describe your request..."
|
|
||||||
value={requestText}
|
|
||||||
onChange={(e) => setRequestText(e.target.value)}
|
|
||||||
rows={4}
|
|
||||||
style={{
|
|
||||||
background: '#f4f7f4',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '14px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#0f1720',
|
|
||||||
width: '100%',
|
|
||||||
resize: 'vertical',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|
||||||
<label
|
|
||||||
style={{ fontSize: '13px', fontWeight: '600', color: '#0f1720' }}
|
|
||||||
>
|
|
||||||
Site Photo or Reference (Optional)
|
|
||||||
</label>
|
|
||||||
{imagePreviewUrl ? (
|
|
||||||
<div style={{ position: 'relative', width: 'max-content' }}>
|
|
||||||
<img
|
|
||||||
src={imagePreviewUrl}
|
|
||||||
alt="Preview"
|
|
||||||
style={{
|
|
||||||
width: '88px',
|
|
||||||
height: '88px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
objectFit: 'cover',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<IonIcon
|
|
||||||
icon={closeCircle}
|
|
||||||
onClick={() => {
|
|
||||||
setImageFile(null);
|
|
||||||
setImagePreviewUrl(null);
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '-8px',
|
|
||||||
right: '-8px',
|
|
||||||
fontSize: '24px',
|
|
||||||
color: '#b91c1c',
|
|
||||||
cursor: 'pointer',
|
|
||||||
background: '#fff',
|
|
||||||
borderRadius: '50%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<label
|
|
||||||
style={{
|
|
||||||
background: '#edf4ee',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '18px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: '16px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '48px',
|
|
||||||
height: '48px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: 'rgba(22,101,52,0.12)',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={cameraOutline}
|
|
||||||
style={{ color: '#166534', fontSize: '24px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#166534',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Add a photo
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#6c7a71',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Tap to browse
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
accept="image/*"
|
|
||||||
onChange={handleFileChange}
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'flex-end',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#0f1720',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Select Suppliers (Up to 5)
|
|
||||||
</label>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#6c7a71',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{selectedSupplierIds.length}/5 selected
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: '#f9fbf9',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '14px',
|
|
||||||
maxHeight: '200px',
|
|
||||||
overflowY: 'auto',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loadingSuppliers ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '10px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonSpinner name="crescent" style={{ color: '#166534' }} />
|
|
||||||
</div>
|
|
||||||
) : supplierOptions.length > 0 ? (
|
|
||||||
supplierOptions.map((supplier) => (
|
|
||||||
<SupplierPickerRow
|
|
||||||
key={supplier.id}
|
|
||||||
supplier={supplier}
|
|
||||||
selected={selectedSupplierIds.includes(supplier.id)}
|
|
||||||
onToggle={() => toggleSupplier(supplier.id)}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
color: '#6c7a71',
|
|
||||||
textAlign: 'center',
|
|
||||||
padding: '10px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
No suppliers found.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading || selectedSupplierIds.length === 0}
|
|
||||||
style={{
|
|
||||||
background: '#166534',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
opacity: loading || selectedSupplierIds.length === 0 ? 0.7 : 1,
|
|
||||||
marginTop: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: '#fff', width: '20px', height: '20px' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
'Send Request'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NewRfq;
|
|
||||||
@@ -1,390 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import { IonPage, IonContent, IonSpinner, IonIcon } from '@ionic/react';
|
|
||||||
import {
|
|
||||||
createOutline,
|
|
||||||
personOutline,
|
|
||||||
businessOutline,
|
|
||||||
locationOutline,
|
|
||||||
callOutline,
|
|
||||||
moonOutline,
|
|
||||||
sunnyOutline,
|
|
||||||
} from 'ionicons/icons';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { useProfile } from '../contexts/ProfileContext';
|
|
||||||
import { Preferences } from '@capacitor/preferences';
|
|
||||||
import ProfileInfoRow from '../components/ProfileInfoRow';
|
|
||||||
|
|
||||||
const Profile: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const { signOut } = useAuth();
|
|
||||||
const { profile, clearProfile, themeMode, setThemeMode } = useProfile();
|
|
||||||
|
|
||||||
const [signingOut, setSigningOut] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
|
|
||||||
const showError = (msg: string) => {
|
|
||||||
setError(msg);
|
|
||||||
setTimeout(() => setError(''), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSignOut = async () => {
|
|
||||||
setSigningOut(true);
|
|
||||||
try {
|
|
||||||
if (profile) {
|
|
||||||
await Preferences.remove({ key: `profile_${profile.id}` });
|
|
||||||
}
|
|
||||||
await signOut();
|
|
||||||
clearProfile();
|
|
||||||
history.replace('/auth');
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error(err);
|
|
||||||
showError('Failed to sign out.');
|
|
||||||
} finally {
|
|
||||||
setSigningOut(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEditProfile = () => {
|
|
||||||
history.push('/profile/edit');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleThemeToggle = async () => {
|
|
||||||
await setThemeMode(themeMode === 'dark' ? 'light' : 'dark');
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!profile) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: 'var(--color-bg)' }}>
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': 'var(--color-bg-gradient)',
|
|
||||||
'--padding-start': '0px',
|
|
||||||
'--padding-end': '0px',
|
|
||||||
'--padding-top': '0px',
|
|
||||||
'--padding-bottom': 'calc(96px + var(--ion-safe-area-bottom))',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: 'calc(16px + var(--ion-safe-area-top, 0px)) 20px 16px',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '3px' }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '24px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Profile
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-tertiary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Professional account details
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleEditProfile}
|
|
||||||
style={{
|
|
||||||
width: '40px',
|
|
||||||
height: '40px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: 'transparent',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
cursor: 'pointer',
|
|
||||||
border: 'none',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={createOutline}
|
|
||||||
style={{ color: 'var(--color-brand)', fontSize: '24px' }}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0 20px 12px',
|
|
||||||
background: 'var(--color-danger-soft)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: 'var(--color-danger-text)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '24px',
|
|
||||||
margin: '0 20px 12px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '72px',
|
|
||||||
height: '72px',
|
|
||||||
borderRadius: '999px',
|
|
||||||
background: 'var(--color-brand-medium)',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
flexShrink: 0,
|
|
||||||
fontSize: '32px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-brand)',
|
|
||||||
textTransform: 'uppercase',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.full_name.charAt(0)}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '22px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.full_name}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-accent-soft)',
|
|
||||||
color: 'var(--color-accent-strong)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '6px 12px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
width: 'max-content',
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.role}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Member since {new Date(profile.created_at).toLocaleDateString()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '20px',
|
|
||||||
margin: '0 20px 12px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Appearance
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Switch between light and dark mode
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleThemeToggle}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
border: 'none',
|
|
||||||
padding: '6px',
|
|
||||||
width: '120px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '48px',
|
|
||||||
height: '36px',
|
|
||||||
borderRadius: '999px',
|
|
||||||
background:
|
|
||||||
themeMode === 'light'
|
|
||||||
? 'var(--color-brand)'
|
|
||||||
: 'transparent',
|
|
||||||
color:
|
|
||||||
themeMode === 'light'
|
|
||||||
? '#ffffff'
|
|
||||||
: 'var(--color-text-secondary)',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
gap: '6px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
transition: 'all 0.2s ease',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon icon={sunnyOutline} style={{ fontSize: '16px' }} />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '48px',
|
|
||||||
height: '36px',
|
|
||||||
borderRadius: '999px',
|
|
||||||
background:
|
|
||||||
themeMode === 'dark' ? 'var(--color-brand)' : 'transparent',
|
|
||||||
color:
|
|
||||||
themeMode === 'dark'
|
|
||||||
? '#ffffff'
|
|
||||||
: 'var(--color-text-secondary)',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
gap: '6px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
transition: 'all 0.2s ease',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon icon={moonOutline} style={{ fontSize: '16px' }} />
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '8px 0',
|
|
||||||
margin: '0 20px 12px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ProfileInfoRow
|
|
||||||
icon={personOutline}
|
|
||||||
label="Name"
|
|
||||||
value={profile.full_name}
|
|
||||||
onClick={handleEditProfile}
|
|
||||||
/>
|
|
||||||
{profile.company_name && (
|
|
||||||
<ProfileInfoRow
|
|
||||||
icon={businessOutline}
|
|
||||||
label="Company"
|
|
||||||
value={profile.company_name}
|
|
||||||
onClick={handleEditProfile}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{profile.city && (
|
|
||||||
<ProfileInfoRow
|
|
||||||
icon={locationOutline}
|
|
||||||
label="Location"
|
|
||||||
value={profile.city}
|
|
||||||
onClick={handleEditProfile}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{profile.phone && (
|
|
||||||
<ProfileInfoRow
|
|
||||||
icon={callOutline}
|
|
||||||
label="Phone"
|
|
||||||
value={profile.phone}
|
|
||||||
onClick={handleEditProfile}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '20px',
|
|
||||||
margin: '0 20px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
onClick={handleSignOut}
|
|
||||||
disabled={signingOut}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-brand-strong)',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
opacity: signingOut ? 0.7 : 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{signingOut ? (
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: '#fff', width: '20px', height: '20px' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
'Sign Out'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Profile;
|
|
||||||
@@ -1,456 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { useHistory, useParams } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonTitle,
|
|
||||||
IonContent,
|
|
||||||
IonSpinner,
|
|
||||||
useIonViewWillEnter,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline, pricetagOutline } from 'ionicons/icons';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { useProfile } from '../contexts/ProfileContext';
|
|
||||||
import QuoteSummaryRow from '../components/QuoteSummaryRow';
|
|
||||||
|
|
||||||
const RfqDetail: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const { id } = useParams<{ id: string }>();
|
|
||||||
const { user } = useAuth();
|
|
||||||
const { profile } = useProfile();
|
|
||||||
|
|
||||||
const [rfq, setRfq] = useState<any>(null);
|
|
||||||
const [images, setImages] = useState<string[]>([]);
|
|
||||||
const [quotes, setQuotes] = useState<any[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
const [supplierInvited, setSupplierInvited] = useState(false);
|
|
||||||
|
|
||||||
useIonViewWillEnter(() => {
|
|
||||||
loadRfqDetail();
|
|
||||||
});
|
|
||||||
|
|
||||||
const loadRfqDetail = async () => {
|
|
||||||
if (!user || !profile) return;
|
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Check supplier visibility first if supplier
|
|
||||||
if (profile.role === 'supplier') {
|
|
||||||
const { data: rec, error: recErr } = await supabase
|
|
||||||
.from('rfq_recipients')
|
|
||||||
.select('id')
|
|
||||||
.eq('rfq_id', id)
|
|
||||||
.eq('supplier_id', user.id)
|
|
||||||
.single();
|
|
||||||
if (recErr || !rec) {
|
|
||||||
throw new Error('Not invited to this RFQ');
|
|
||||||
}
|
|
||||||
setSupplierInvited(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load RFQ
|
|
||||||
const { data: rfqData, error: rfqErr } = await supabase
|
|
||||||
.from('rfqs')
|
|
||||||
.select('*')
|
|
||||||
.eq('id', id)
|
|
||||||
.single();
|
|
||||||
if (rfqErr) throw rfqErr;
|
|
||||||
setRfq(rfqData);
|
|
||||||
|
|
||||||
// Load Images
|
|
||||||
const { data: imgData } = await supabase
|
|
||||||
.from('rfq_images')
|
|
||||||
.select('storage_path')
|
|
||||||
.eq('rfq_id', id);
|
|
||||||
|
|
||||||
if (imgData && imgData.length > 0) {
|
|
||||||
const urls = imgData.map((img) => {
|
|
||||||
const { data } = supabase.storage
|
|
||||||
.from('rfq-images')
|
|
||||||
.getPublicUrl(img.storage_path);
|
|
||||||
return data.publicUrl;
|
|
||||||
});
|
|
||||||
setImages(urls);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load Quotes
|
|
||||||
if (profile.role === 'buyer') {
|
|
||||||
const { data: qData, error: qErr } = await supabase
|
|
||||||
.from('quotations')
|
|
||||||
.select(
|
|
||||||
'id, price_amount, delivery_option, status, profiles(full_name, company_name)'
|
|
||||||
)
|
|
||||||
.eq('rfq_id', id);
|
|
||||||
if (qErr) throw qErr;
|
|
||||||
setQuotes(qData || []);
|
|
||||||
} else {
|
|
||||||
const { data: qData, error: qErr } = await supabase
|
|
||||||
.from('quotations')
|
|
||||||
.select('id, price_amount, delivery_option, status')
|
|
||||||
.eq('rfq_id', id)
|
|
||||||
.eq('supplier_id', user.id);
|
|
||||||
if (qErr) throw qErr;
|
|
||||||
setQuotes(qData || []);
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error(err);
|
|
||||||
setError(err.message || 'Failed to load RFQ details');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePrimaryAction = () => {
|
|
||||||
if (profile?.role === 'buyer') {
|
|
||||||
history.push(`/quote-list/${id}`);
|
|
||||||
} else {
|
|
||||||
if (quotes.length > 0) {
|
|
||||||
history.push(`/quote/${quotes[0].id}`, { mode: 'edit' });
|
|
||||||
} else {
|
|
||||||
history.push(`/quote/${id}`, { mode: 'create' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusColor = (status: string) => {
|
|
||||||
if (status === 'open') {
|
|
||||||
return {
|
|
||||||
bg: 'var(--color-success-soft)',
|
|
||||||
text: 'var(--color-success-text)',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (status === 'quoted') {
|
|
||||||
return {
|
|
||||||
bg: 'var(--color-warning-soft)',
|
|
||||||
text: 'var(--color-warning-text)',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
bg: 'var(--color-surface-raised)',
|
|
||||||
text: 'var(--color-text-secondary)',
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!profile) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: 'var(--color-bg)' }}>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar
|
|
||||||
style={{ '--background': 'var(--color-bg)' } as React.CSSProperties}
|
|
||||||
>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton
|
|
||||||
onClick={() => history.goBack()}
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
'--color': 'var(--color-brand-strong)',
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle
|
|
||||||
style={{
|
|
||||||
fontSize: '18px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Request Details
|
|
||||||
</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': 'var(--color-bg-gradient)',
|
|
||||||
'--padding-start': '20px',
|
|
||||||
'--padding-end': '20px',
|
|
||||||
'--padding-top': '20px',
|
|
||||||
'--padding-bottom': 'calc(120px + var(--ion-safe-area-bottom))',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '40px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: 'var(--color-brand)' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : error ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'rgba(239, 68, 68, 0.10)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: '#b91c1c',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
rfq && (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '20px',
|
|
||||||
margin: '0 0 12px 0',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '10px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-accent-soft)',
|
|
||||||
color: 'var(--color-warning-text)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '6px 12px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{rfq.reference_number}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: getStatusColor(rfq.status).bg,
|
|
||||||
color: getStatusColor(rfq.status).text,
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '6px 12px',
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{rfq.status}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '22px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{rfq.title}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Posted {new Date(rfq.created_at).toLocaleDateString()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '20px',
|
|
||||||
margin: '0 0 12px 0',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Request Details
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
lineHeight: '1.6',
|
|
||||||
whiteSpace: 'pre-wrap',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{rfq.request_text}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{images.length > 0 && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
margin: '0 0 12px 0',
|
|
||||||
display: 'flex',
|
|
||||||
gap: '10px',
|
|
||||||
overflowX: 'auto',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{images.map((url, i) => (
|
|
||||||
<img
|
|
||||||
key={i}
|
|
||||||
src={url}
|
|
||||||
alt="Reference"
|
|
||||||
style={{
|
|
||||||
width: '120px',
|
|
||||||
height: '120px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
objectFit: 'cover',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '20px',
|
|
||||||
marginBottom: '20px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: 'var(--color-text-primary)',
|
|
||||||
marginBottom: '16px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.role === 'buyer' ? 'Quotations' : 'Your Quote'}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{quotes.length > 0 ? (
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
|
||||||
{quotes.map((q) => (
|
|
||||||
<QuoteSummaryRow
|
|
||||||
key={q.id}
|
|
||||||
supplierName={
|
|
||||||
profile.role === 'buyer'
|
|
||||||
? q.profiles?.company_name ||
|
|
||||||
q.profiles?.full_name ||
|
|
||||||
'Supplier'
|
|
||||||
: 'My Quote'
|
|
||||||
}
|
|
||||||
priceLabel={`$${q.price_amount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
|
|
||||||
deliveryOption={q.delivery_option}
|
|
||||||
status={q.status}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: '40px',
|
|
||||||
height: '40px',
|
|
||||||
borderRadius: '12px',
|
|
||||||
background: 'var(--color-surface-raised)',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
flexShrink: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={pricetagOutline}
|
|
||||||
style={{
|
|
||||||
color: 'var(--color-brand)',
|
|
||||||
fontSize: '20px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
color: 'var(--color-text-secondary)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.role === 'buyer'
|
|
||||||
? 'No quotes received yet.'
|
|
||||||
: "You haven't submitted a quote yet."}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</IonContent>
|
|
||||||
|
|
||||||
{!loading && !error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'fixed',
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
padding: '16px 20px calc(16px + var(--ion-safe-area-bottom, 0px))',
|
|
||||||
background: 'var(--color-surface)',
|
|
||||||
borderTop: '1px solid var(--color-border)',
|
|
||||||
display: 'flex',
|
|
||||||
zIndex: 10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
onClick={handlePrimaryAction}
|
|
||||||
style={{
|
|
||||||
background: 'var(--color-brand)',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
width: '100%',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{profile.role === 'buyer'
|
|
||||||
? 'View Quotations'
|
|
||||||
: quotes.length > 0
|
|
||||||
? 'Update Quote'
|
|
||||||
: 'Submit Quote'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RfqDetail;
|
|
||||||
@@ -1,338 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonTitle,
|
|
||||||
IonContent,
|
|
||||||
IonSpinner,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline } from 'ionicons/icons';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
import { useProfile } from '../contexts/ProfileContext';
|
|
||||||
import { Preferences } from '@capacitor/preferences';
|
|
||||||
|
|
||||||
const SetupProfile: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const { user } = useAuth();
|
|
||||||
const { setProfile, setStatus } = useProfile();
|
|
||||||
|
|
||||||
const [role, setRole] = useState<'buyer' | 'supplier' | ''>('');
|
|
||||||
const [fullName, setFullName] = useState('');
|
|
||||||
const [companyName, setCompanyName] = useState('');
|
|
||||||
const [phone, setPhone] = useState('');
|
|
||||||
const [city, setCity] = useState('');
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
|
|
||||||
const showError = (msg: string) => {
|
|
||||||
setError(msg);
|
|
||||||
setTimeout(() => setError(''), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleProfileSetup = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!user) return;
|
|
||||||
if (!role) {
|
|
||||||
showError('Please select a role');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!fullName) {
|
|
||||||
showError('Please enter your full name');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
const newProfile = {
|
|
||||||
id: user.id,
|
|
||||||
role: role as 'buyer' | 'supplier',
|
|
||||||
full_name: fullName,
|
|
||||||
company_name: companyName || null,
|
|
||||||
phone: phone || null,
|
|
||||||
city: city || null,
|
|
||||||
avatar_url: null,
|
|
||||||
created_at: new Date().toISOString(),
|
|
||||||
updated_at: new Date().toISOString(),
|
|
||||||
};
|
|
||||||
|
|
||||||
const { error: insertError } = await supabase
|
|
||||||
.from('profiles')
|
|
||||||
.insert(newProfile);
|
|
||||||
|
|
||||||
if (insertError) {
|
|
||||||
showError(insertError.message);
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await Preferences.set({
|
|
||||||
key: `profile_${user.id}`,
|
|
||||||
value: JSON.stringify(newProfile),
|
|
||||||
});
|
|
||||||
setProfile(newProfile);
|
|
||||||
setStatus('loaded');
|
|
||||||
|
|
||||||
setLoading(false);
|
|
||||||
history.replace('/home');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: '#eef4ef' }}>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar style={{ '--background': 'transparent' }}>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton
|
|
||||||
onClick={() => history.goBack()}
|
|
||||||
style={{ color: '#14532d' }}
|
|
||||||
>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle
|
|
||||||
style={{ fontSize: '18px', fontWeight: '700', color: '#0f1720' }}
|
|
||||||
>
|
|
||||||
Setup Profile
|
|
||||||
</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': 'linear-gradient(180deg, #eef4ef 0%, #f8fbf8 100%)',
|
|
||||||
'--padding-start': '20px',
|
|
||||||
'--padding-end': '20px',
|
|
||||||
'--padding-top': '20px',
|
|
||||||
'--padding-bottom': 'calc(28px + var(--ion-safe-area-bottom))',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'transparent',
|
|
||||||
margin: '0 0 16px 0',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h1
|
|
||||||
style={{
|
|
||||||
fontSize: '26px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: '#0f1720',
|
|
||||||
margin: '0',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Welcome!
|
|
||||||
</h1>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#5f6d63',
|
|
||||||
margin: '0',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Complete your profile to get started.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '24px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '20px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'rgba(239, 68, 68, 0.10)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: '#b91c1c',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<form
|
|
||||||
onSubmit={handleProfileSetup}
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#0f1720',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
I want to...
|
|
||||||
</label>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
background: '#edf4ee',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setRole('buyer')}
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
background: role === 'buyer' ? '#166534' : 'transparent',
|
|
||||||
color: role === 'buyer' ? '#ffffff' : '#14532d',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '12px 18px',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Buy Materials
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setRole('supplier')}
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
background: role === 'supplier' ? '#166534' : 'transparent',
|
|
||||||
color: role === 'supplier' ? '#ffffff' : '#14532d',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '12px 18px',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Sell Materials
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Full Name"
|
|
||||||
value={fullName}
|
|
||||||
onChange={(e) => setFullName(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: '#f4f7f4',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#0f1720',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Company Name (Optional)"
|
|
||||||
value={companyName}
|
|
||||||
onChange={(e) => setCompanyName(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: '#f4f7f4',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#0f1720',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="City (Optional)"
|
|
||||||
value={city}
|
|
||||||
onChange={(e) => setCity(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: '#f4f7f4',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#0f1720',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
placeholder="Phone (Optional)"
|
|
||||||
value={phone}
|
|
||||||
onChange={(e) => setPhone(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: '#f4f7f4',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#0f1720',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading || !role || !fullName}
|
|
||||||
style={{
|
|
||||||
background: '#166534',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
opacity: loading || !role || !fullName ? 0.7 : 1,
|
|
||||||
marginTop: '4px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: '#fff', width: '20px', height: '20px' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
'Complete Setup'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SetupProfile;
|
|
||||||
@@ -1,434 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { useHistory, useParams, useLocation } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonTitle,
|
|
||||||
IonContent,
|
|
||||||
IonSpinner,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline } from 'ionicons/icons';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
|
||||||
|
|
||||||
interface LocationState {
|
|
||||||
mode?: 'create' | 'edit';
|
|
||||||
}
|
|
||||||
|
|
||||||
const SupplierQuoteForm: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const { id } = useParams<{ id: string }>(); // in create mode: id is rfq_id; in edit mode: id is quotation_id
|
|
||||||
const location = useLocation<LocationState>();
|
|
||||||
const mode = location.state?.mode || 'create';
|
|
||||||
|
|
||||||
const { user } = useAuth();
|
|
||||||
|
|
||||||
const [rfqSummary, setRfqSummary] = useState<{
|
|
||||||
id: string;
|
|
||||||
referenceNumber: string;
|
|
||||||
title: string;
|
|
||||||
} | null>(null);
|
|
||||||
const [priceDisplay, setPriceDisplay] = useState('');
|
|
||||||
const [deliveryOption, setDeliveryOption] = useState('');
|
|
||||||
const [note, setNote] = useState('');
|
|
||||||
const [existingQuotationId, setExistingQuotationId] = useState<string | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [saving, setSaving] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadQuoteFormData();
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [id, mode]);
|
|
||||||
|
|
||||||
const loadQuoteFormData = async () => {
|
|
||||||
if (!user) return;
|
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (mode === 'edit') {
|
|
||||||
// id is quotation_id
|
|
||||||
const { data: quote, error: qErr } = await supabase
|
|
||||||
.from('quotations')
|
|
||||||
.select('*, rfqs(id, reference_number, title)')
|
|
||||||
.eq('id', id)
|
|
||||||
.single();
|
|
||||||
if (qErr) throw qErr;
|
|
||||||
|
|
||||||
setExistingQuotationId(quote.id);
|
|
||||||
setPriceDisplay(quote.price_amount.toString());
|
|
||||||
setDeliveryOption(quote.delivery_option);
|
|
||||||
setNote(quote.note || '');
|
|
||||||
setRfqSummary({
|
|
||||||
id: quote.rfqs.id,
|
|
||||||
referenceNumber: quote.rfqs.reference_number,
|
|
||||||
title: quote.rfqs.title,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// id is rfq_id
|
|
||||||
const { data: rfq, error: rfqErr } = await supabase
|
|
||||||
.from('rfqs')
|
|
||||||
.select('id, reference_number, title')
|
|
||||||
.eq('id', id)
|
|
||||||
.single();
|
|
||||||
if (rfqErr) throw rfqErr;
|
|
||||||
setRfqSummary({
|
|
||||||
id: rfq.id,
|
|
||||||
referenceNumber: rfq.reference_number,
|
|
||||||
title: rfq.title,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Check if there is already a quote (just in case they navigated strangely)
|
|
||||||
const { data: quote } = await supabase
|
|
||||||
.from('quotations')
|
|
||||||
.select('*')
|
|
||||||
.eq('rfq_id', id)
|
|
||||||
.eq('supplier_id', user.id)
|
|
||||||
.maybeSingle();
|
|
||||||
|
|
||||||
if (quote) {
|
|
||||||
setExistingQuotationId(quote.id);
|
|
||||||
setPriceDisplay(quote.price_amount.toString());
|
|
||||||
setDeliveryOption(quote.delivery_option);
|
|
||||||
setNote(quote.note || '');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error(err);
|
|
||||||
setError('Failed to load form data.');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const sanitizePriceInput = (val: string) => {
|
|
||||||
let sanitized = val.replace(/[^0-9.]/g, '');
|
|
||||||
const parts = sanitized.split('.');
|
|
||||||
if (parts.length > 2) {
|
|
||||||
sanitized = parts[0] + '.' + parts.slice(1).join('');
|
|
||||||
}
|
|
||||||
if (parts.length === 2 && parts[1].length > 2) {
|
|
||||||
sanitized = parts[0] + '.' + parts[1].substring(0, 2);
|
|
||||||
}
|
|
||||||
setPriceDisplay(sanitized);
|
|
||||||
};
|
|
||||||
|
|
||||||
const showError = (msg: string) => {
|
|
||||||
setError(msg);
|
|
||||||
setTimeout(() => setError(''), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSaveQuote = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!user || !rfqSummary) return;
|
|
||||||
|
|
||||||
const amount = parseFloat(priceDisplay);
|
|
||||||
if (isNaN(amount) || amount < 0) {
|
|
||||||
showError('Please enter a valid amount.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!deliveryOption.trim()) {
|
|
||||||
showError('Please enter a delivery option.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSaving(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (existingQuotationId) {
|
|
||||||
const { error: updErr } = await supabase
|
|
||||||
.from('quotations')
|
|
||||||
.update({
|
|
||||||
price_amount: amount,
|
|
||||||
delivery_option: deliveryOption.trim(),
|
|
||||||
note: note.trim() || null,
|
|
||||||
updated_at: new Date().toISOString(),
|
|
||||||
})
|
|
||||||
.eq('id', existingQuotationId);
|
|
||||||
if (updErr) throw updErr;
|
|
||||||
} else {
|
|
||||||
const { error: insErr } = await supabase.from('quotations').insert({
|
|
||||||
rfq_id: rfqSummary.id,
|
|
||||||
supplier_id: user.id,
|
|
||||||
price_amount: amount,
|
|
||||||
currency_code: 'USD',
|
|
||||||
delivery_option: deliveryOption.trim(),
|
|
||||||
note: note.trim() || null,
|
|
||||||
status: 'submitted',
|
|
||||||
});
|
|
||||||
if (insErr) throw insErr;
|
|
||||||
}
|
|
||||||
|
|
||||||
history.replace(`/rfq/${rfqSummary.id}`);
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error(err);
|
|
||||||
showError(err.message || 'Failed to save quotation.');
|
|
||||||
setSaving(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: '#f7faf7' }}>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar style={{ '--background': '#f7faf7' }}>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton
|
|
||||||
onClick={() => history.goBack()}
|
|
||||||
style={{ color: '#14532d' }}
|
|
||||||
>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle
|
|
||||||
style={{ fontSize: '18px', fontWeight: '700', color: '#0f1720' }}
|
|
||||||
>
|
|
||||||
{existingQuotationId ? 'Update Quote' : 'Submit Quote'}
|
|
||||||
</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': '#f7faf7',
|
|
||||||
'--padding-start': '20px',
|
|
||||||
'--padding-end': '20px',
|
|
||||||
'--padding-top': '20px',
|
|
||||||
'--padding-bottom': 'calc(28px + var(--ion-safe-area-bottom))',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: '40px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonSpinner name="crescent" style={{ color: '#166534' }} />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{rfqSummary && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '20px',
|
|
||||||
margin: '0 0 12px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '12px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: '#b45309',
|
|
||||||
background: 'rgba(245,158,11,0.14)',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '4px 10px',
|
|
||||||
width: 'max-content',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{rfqSummary.referenceNumber}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#0f1720',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{rfqSummary.title}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'rgba(239, 68, 68, 0.10)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: '#b91c1c',
|
|
||||||
marginBottom: '12px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<form
|
|
||||||
onSubmit={handleSaveQuote}
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '24px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '18px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#0f1720',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Total Price (USD)
|
|
||||||
</label>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'relative',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
left: '14px',
|
|
||||||
fontSize: '15px',
|
|
||||||
color: '#0f1720',
|
|
||||||
fontWeight: '600',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$
|
|
||||||
</span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
inputMode="decimal"
|
|
||||||
placeholder="0.00"
|
|
||||||
value={priceDisplay}
|
|
||||||
onChange={(e) => sanitizePriceInput(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: '#f4f7f4',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px 0 32px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#0f1720',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#0f1720',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delivery Option
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="e.g. Free delivery in 2 days"
|
|
||||||
value={deliveryOption}
|
|
||||||
onChange={(e) => setDeliveryOption(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: '#f4f7f4',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#0f1720',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
style={{
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#0f1720',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Note for Buyer (Optional)
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
placeholder="Add any conditions or details..."
|
|
||||||
value={note}
|
|
||||||
onChange={(e) => setNote(e.target.value)}
|
|
||||||
rows={4}
|
|
||||||
style={{
|
|
||||||
background: '#f4f7f4',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '14px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#0f1720',
|
|
||||||
width: '100%',
|
|
||||||
resize: 'vertical',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={saving || !priceDisplay || !deliveryOption}
|
|
||||||
style={{
|
|
||||||
background: '#166534',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
opacity: saving || !priceDisplay || !deliveryOption ? 0.7 : 1,
|
|
||||||
marginTop: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{saving ? (
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: '#fff', width: '20px', height: '20px' }}
|
|
||||||
/>
|
|
||||||
) : existingQuotationId ? (
|
|
||||||
'Update Quote'
|
|
||||||
) : (
|
|
||||||
'Submit Quote'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SupplierQuoteForm;
|
|
||||||
@@ -1,306 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { useHistory, useLocation } from 'react-router-dom';
|
|
||||||
import { IonPage, IonContent, IonSpinner, IonIcon } from '@ionic/react';
|
|
||||||
import { arrowBackOutline, checkmarkCircle } from 'ionicons/icons';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import OtpInput from '../components/OtpInput';
|
|
||||||
|
|
||||||
interface LocationState {
|
|
||||||
email?: string;
|
|
||||||
resent?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const VerifyEmail: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const location = useLocation<LocationState>();
|
|
||||||
const email = location.state?.email || '';
|
|
||||||
const resent = location.state?.resent || false;
|
|
||||||
|
|
||||||
const [code, setCode] = useState('');
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
const [cooldown, setCooldown] = useState(resent ? 60 : 0);
|
|
||||||
const [verified, setVerified] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!email) {
|
|
||||||
history.replace('/auth');
|
|
||||||
}
|
|
||||||
}, [email, history]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (cooldown > 0) {
|
|
||||||
const timer = setTimeout(() => setCooldown(cooldown - 1), 1000);
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}
|
|
||||||
}, [cooldown]);
|
|
||||||
|
|
||||||
const showError = (msg: string) => {
|
|
||||||
setError(msg);
|
|
||||||
setTimeout(() => setError(''), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleVerifyOtp = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (code.length !== 6) {
|
|
||||||
showError('Please enter the 6-digit code');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
const { error } = await supabase.auth.verifyOtp({
|
|
||||||
email,
|
|
||||||
token: code,
|
|
||||||
type: 'email',
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
showError(error.message);
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setVerified(true);
|
|
||||||
setLoading(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleResend = async () => {
|
|
||||||
if (cooldown > 0) return;
|
|
||||||
|
|
||||||
const { error } = await supabase.auth.resend({
|
|
||||||
type: 'signup',
|
|
||||||
email,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
showError(error.message);
|
|
||||||
} else {
|
|
||||||
setCooldown(60);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBackToSignIn = () => {
|
|
||||||
history.replace('/auth');
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!email) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: '#f7faf7' }}>
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': '#f7faf7',
|
|
||||||
'--padding-start': '0px',
|
|
||||||
'--padding-end': '0px',
|
|
||||||
'--padding-top': '0px',
|
|
||||||
'--padding-bottom': '0px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding:
|
|
||||||
'calc(var(--ion-safe-area-top, 0px) + 18px) 20px calc(var(--ion-safe-area-bottom, 0px) + 28px)',
|
|
||||||
minHeight: '100%',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'transparent',
|
|
||||||
padding: '0',
|
|
||||||
margin: '0 0 20px 0',
|
|
||||||
display: 'flex',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
onClick={() => history.goBack()}
|
|
||||||
style={{
|
|
||||||
background: 'transparent',
|
|
||||||
border: 'none',
|
|
||||||
padding: '0',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
cursor: 'pointer',
|
|
||||||
color: '#14532d',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon icon={arrowBackOutline} style={{ fontSize: '24px' }} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '24px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '20px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{verified ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '20px',
|
|
||||||
alignItems: 'center',
|
|
||||||
textAlign: 'center',
|
|
||||||
padding: '20px 0',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IonIcon
|
|
||||||
icon={checkmarkCircle}
|
|
||||||
style={{ fontSize: '64px', color: '#166534' }}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'rgba(22,101,52,0.10)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '14px',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
color: '#14532d',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '600',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Email confirmed. You can now sign in.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={handleBackToSignIn}
|
|
||||||
style={{
|
|
||||||
background: '#166534',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
width: '100%',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Back to Sign In
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '24px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: '#0f1720',
|
|
||||||
lineHeight: '1.15',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Verify your email
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#5f6d63',
|
|
||||||
lineHeight: '1.55',
|
|
||||||
marginTop: '8px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
We sent a 6-digit code to <strong>{email}</strong>. Enter it
|
|
||||||
below to confirm your account.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'rgba(239, 68, 68, 0.10)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: '#b91c1c',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<form
|
|
||||||
onSubmit={handleVerifyOtp}
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '20px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<OtpInput
|
|
||||||
value={code}
|
|
||||||
onChange={setCode}
|
|
||||||
disabled={loading}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading || code.length !== 6}
|
|
||||||
style={{
|
|
||||||
background: '#166534',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
opacity: loading || code.length !== 6 ? 0.7 : 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: '#fff', width: '20px', height: '20px' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
'Verify'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleResend}
|
|
||||||
disabled={cooldown > 0}
|
|
||||||
style={{
|
|
||||||
background: 'transparent',
|
|
||||||
border: 'none',
|
|
||||||
padding: '0',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: cooldown > 0 ? '#8a978f' : '#f59e0b',
|
|
||||||
cursor: cooldown > 0 ? 'default' : 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{cooldown > 0
|
|
||||||
? `Resend code in ${cooldown}s`
|
|
||||||
: 'Resend code'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default VerifyEmail;
|
|
||||||
@@ -1,311 +0,0 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import { useHistory, useLocation } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
IonPage,
|
|
||||||
IonHeader,
|
|
||||||
IonToolbar,
|
|
||||||
IonButtons,
|
|
||||||
IonButton,
|
|
||||||
IonIcon,
|
|
||||||
IonTitle,
|
|
||||||
IonContent,
|
|
||||||
IonSpinner,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { chevronBackOutline, eyeOutline, eyeOffOutline } from 'ionicons/icons';
|
|
||||||
import { supabase } from '../supabase';
|
|
||||||
import { useProfileLoader } from '../hooks/useProfileLoader';
|
|
||||||
import OtpInput from '../components/OtpInput';
|
|
||||||
|
|
||||||
interface LocationState {
|
|
||||||
email?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const VerifyReset: React.FC = () => {
|
|
||||||
const history = useHistory();
|
|
||||||
const location = useLocation<LocationState>();
|
|
||||||
const email = location.state?.email || '';
|
|
||||||
|
|
||||||
const { loadProfileAndNavigate } = useProfileLoader();
|
|
||||||
|
|
||||||
const [code, setCode] = useState('');
|
|
||||||
const [newPassword, setNewPassword] = useState('');
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
|
||||||
const [cooldown, setCooldown] = useState(60);
|
|
||||||
|
|
||||||
const [overlayVisible, setOverlayVisible] = useState(false);
|
|
||||||
const [overlayError, setOverlayError] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!email) {
|
|
||||||
history.replace('/forgot-password');
|
|
||||||
}
|
|
||||||
}, [email, history]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (cooldown > 0) {
|
|
||||||
const timer = setTimeout(() => setCooldown(cooldown - 1), 1000);
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}
|
|
||||||
}, [cooldown]);
|
|
||||||
|
|
||||||
const showError = (msg: string) => {
|
|
||||||
setError(msg);
|
|
||||||
setTimeout(() => setError(''), 4000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleVerifyReset = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (code.length !== 6) {
|
|
||||||
showError('Please enter the 6-digit code');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (newPassword.length < 6) {
|
|
||||||
showError('Password must be at least 6 characters');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
|
||||||
|
|
||||||
const { error: verifyError } = await supabase.auth.verifyOtp({
|
|
||||||
email,
|
|
||||||
token: code,
|
|
||||||
type: 'recovery',
|
|
||||||
});
|
|
||||||
|
|
||||||
if (verifyError) {
|
|
||||||
showError(verifyError.message);
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { error: updateError } = await supabase.auth.updateUser({
|
|
||||||
password: newPassword,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (updateError) {
|
|
||||||
showError(updateError.message);
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Success -> load profile and navigate
|
|
||||||
loadProfileAndNavigate(setOverlayVisible, setOverlayError);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleResend = async () => {
|
|
||||||
if (cooldown > 0) return;
|
|
||||||
const { error } = await supabase.auth.resetPasswordForEmail(email);
|
|
||||||
if (error) {
|
|
||||||
showError(error.message);
|
|
||||||
} else {
|
|
||||||
setCooldown(60);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!email) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage style={{ background: '#f7faf7' }}>
|
|
||||||
<IonHeader className="ion-no-border">
|
|
||||||
<IonToolbar style={{ '--background': '#f7faf7' }}>
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton
|
|
||||||
onClick={() => history.goBack()}
|
|
||||||
style={{ color: '#14532d' }}
|
|
||||||
>
|
|
||||||
<IonIcon icon={chevronBackOutline} slot="icon-only" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
<IonTitle
|
|
||||||
style={{ fontSize: '18px', fontWeight: '700', color: '#0f1720' }}
|
|
||||||
>
|
|
||||||
Set New Password
|
|
||||||
</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonContent
|
|
||||||
style={{
|
|
||||||
'--background': '#f7faf7',
|
|
||||||
'--padding-start': '20px',
|
|
||||||
'--padding-end': '20px',
|
|
||||||
'--padding-top': '20px',
|
|
||||||
'--padding-bottom': 'calc(28px + var(--ion-safe-area-bottom))',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: '#ffffff',
|
|
||||||
borderRadius: '24px',
|
|
||||||
padding: '24px',
|
|
||||||
margin: '0',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
gap: '18px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<h2
|
|
||||||
style={{
|
|
||||||
fontSize: '22px',
|
|
||||||
fontWeight: '700',
|
|
||||||
color: '#0f1720',
|
|
||||||
margin: '0 0 8px 0',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Enter code
|
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#5f6d63',
|
|
||||||
margin: '0',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
We sent a 6-digit code to <strong>{email}</strong>.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
background: 'rgba(239, 68, 68, 0.10)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '12px 14px',
|
|
||||||
fontSize: '13px',
|
|
||||||
fontWeight: '500',
|
|
||||||
color: '#b91c1c',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<form
|
|
||||||
onSubmit={handleVerifyReset}
|
|
||||||
style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}
|
|
||||||
>
|
|
||||||
<OtpInput value={code} onChange={setCode} disabled={loading} />
|
|
||||||
|
|
||||||
<div style={{ position: 'relative' }}>
|
|
||||||
<input
|
|
||||||
type={showPassword ? 'text' : 'password'}
|
|
||||||
placeholder="New password"
|
|
||||||
value={newPassword}
|
|
||||||
onChange={(e) => setNewPassword(e.target.value)}
|
|
||||||
style={{
|
|
||||||
background: '#f4f7f4',
|
|
||||||
border: 'none',
|
|
||||||
borderRadius: '12px',
|
|
||||||
padding: '0 40px 0 14px',
|
|
||||||
height: '48px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '400',
|
|
||||||
color: '#0f1720',
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
minLength={6}
|
|
||||||
/>
|
|
||||||
<IonIcon
|
|
||||||
icon={showPassword ? eyeOffOutline : eyeOutline}
|
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
right: '14px',
|
|
||||||
top: '14px',
|
|
||||||
fontSize: '20px',
|
|
||||||
color: '#8a978f',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={loading || code.length !== 6 || !newPassword}
|
|
||||||
style={{
|
|
||||||
background: '#166534',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderRadius: '999px',
|
|
||||||
padding: '16px 20px',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '700',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
opacity: loading || code.length !== 6 || !newPassword ? 0.7 : 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<IonSpinner
|
|
||||||
name="crescent"
|
|
||||||
style={{ color: '#fff', width: '20px', height: '20px' }}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
'Reset Password'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleResend}
|
|
||||||
disabled={cooldown > 0}
|
|
||||||
style={{
|
|
||||||
background: 'transparent',
|
|
||||||
border: 'none',
|
|
||||||
padding: '0',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: cooldown > 0 ? '#8a978f' : '#f59e0b',
|
|
||||||
cursor: cooldown > 0 ? 'default' : 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{cooldown > 0 ? `Resend code in ${cooldown}s` : 'Resend code'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{overlayVisible && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
background: 'rgba(255,255,255,0.9)',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
zIndex: 9999,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{overlayError ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
color: '#b91c1c',
|
|
||||||
fontSize: '15px',
|
|
||||||
fontWeight: '600',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Error updating profile.
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<IonSpinner name="crescent" style={{ color: '#166534' }} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default VerifyReset;
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { createClient } from '@supabase/supabase-js';
|
|
||||||
import type { Database } from './database.types';
|
|
||||||
|
|
||||||
export const supabase = createClient<Database>(
|
|
||||||
'https://ilffyqxtkssvqmszsfyw.supabase.co',
|
|
||||||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImlsZmZ5cXh0a3NzdnFtc3pzZnl3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODE5MDQ2NTIsImV4cCI6MjA5NzQ4MDY1Mn0.xvCQEtNrr74KX8uD7enFktfFJhuFrSm6kFih1SlLFgk',
|
|
||||||
);
|
|
||||||
@@ -1,114 +1,152 @@
|
|||||||
/* Ionic CSS Variables */
|
/* Ionic CSS Variables — customise to match your app's brand */
|
||||||
:root {
|
:root {
|
||||||
/** primary (QuoteLink forest green) **/
|
--ion-color-primary: #5e6ad2;
|
||||||
--ion-color-primary: #166534;
|
--ion-color-primary-rgb: 94, 106, 210;
|
||||||
--ion-color-primary-rgb: 22, 101, 52;
|
|
||||||
--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: #14532d;
|
--ion-color-primary-shade: #535db9;
|
||||||
--ion-color-primary-tint: #2b7a45;
|
--ion-color-primary-tint: #6e79d7;
|
||||||
|
|
||||||
/** secondary (logo price-tag orange) **/
|
--ion-color-secondary: #7a89f4;
|
||||||
--ion-color-secondary: #f7931a;
|
--ion-color-secondary-rgb: 122, 137, 244;
|
||||||
--ion-color-secondary-rgb: 247, 147, 26;
|
|
||||||
--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: #d97d12;
|
--ion-color-secondary-shade: #6b79d7;
|
||||||
--ion-color-secondary-tint: #f9a640;
|
--ion-color-secondary-tint: #8895f5;
|
||||||
|
|
||||||
--color-brand: #166534;
|
--ion-color-tertiary: #8f78d8;
|
||||||
--color-brand-strong: #14532d;
|
--ion-color-tertiary-rgb: 143, 120, 216;
|
||||||
--color-brand-soft: rgba(22, 101, 52, 0.1);
|
--ion-color-tertiary-contrast: #ffffff;
|
||||||
--color-brand-medium: rgba(22, 101, 52, 0.18);
|
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||||
--color-accent: #f7931a;
|
--ion-color-tertiary-shade: #7e6ac0;
|
||||||
--color-accent-strong: #ea8200;
|
--ion-color-tertiary-tint: #9a86dc;
|
||||||
--color-accent-soft: rgba(247, 147, 26, 0.14);
|
|
||||||
--color-bg: #f3f4f1;
|
|
||||||
--color-bg-gradient: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
#eef1ee 0%,
|
|
||||||
#f7f8f5 52%,
|
|
||||||
#fbfcfa 100%
|
|
||||||
);
|
|
||||||
--color-surface: #ffffff;
|
|
||||||
--color-surface-raised: #eef2ee;
|
|
||||||
--color-surface-soft: #f7f8f6;
|
|
||||||
--color-text-primary: #18212b;
|
|
||||||
--color-text-secondary: rgba(24, 33, 43, 0.64);
|
|
||||||
--color-text-tertiary: rgba(24, 33, 43, 0.42);
|
|
||||||
--color-border: rgba(23, 33, 43, 0.08);
|
|
||||||
--color-success-soft: rgba(22, 101, 52, 0.12);
|
|
||||||
--color-success-text: #166534;
|
|
||||||
--color-warning-soft: rgba(247, 147, 26, 0.14);
|
|
||||||
--color-warning-text: #c36a00;
|
|
||||||
--color-danger-soft: rgba(220, 38, 38, 0.1);
|
|
||||||
--color-danger-text: #b91c1c;
|
|
||||||
--color-shell: rgba(255, 255, 255, 0.58);
|
|
||||||
--color-shadow-lg:
|
|
||||||
0 24px 60px rgba(23, 33, 43, 0.08), 0 8px 20px rgba(23, 33, 43, 0.04);
|
|
||||||
--color-shadow-sm: 0 4px 16px rgba(23, 33, 43, 0.05);
|
|
||||||
|
|
||||||
/* Backwards-compatible aliases */
|
--ion-color-success: #3aa67a;
|
||||||
--color-surface-hover: var(--color-surface-soft);
|
--ion-color-success-rgb: 58, 166, 122;
|
||||||
--color-text-main: var(--color-text-primary);
|
--ion-color-success-contrast: #ffffff;
|
||||||
--color-text-muted: var(--color-text-secondary);
|
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-success-shade: #33926b;
|
||||||
|
--ion-color-success-tint: #4eb088;
|
||||||
|
|
||||||
/* Basic Ionic variables */
|
--ion-color-warning: #dfb25a;
|
||||||
--ion-background-color: var(--color-bg);
|
--ion-color-warning-rgb: 223, 178, 90;
|
||||||
--ion-text-color: var(--color-text-primary);
|
--ion-color-warning-contrast: #2d2520;
|
||||||
|
--ion-color-warning-contrast-rgb: 45, 37, 32;
|
||||||
|
--ion-color-warning-shade: #c49d4f;
|
||||||
|
--ion-color-warning-tint: #e2bb6b;
|
||||||
|
|
||||||
--ion-font-family:
|
--ion-color-danger: #cf6679;
|
||||||
Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto',
|
--ion-color-danger-rgb: 207, 102, 121;
|
||||||
sans-serif;
|
--ion-color-danger-contrast: #ffffff;
|
||||||
|
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-danger-shade: #b65a6a;
|
||||||
|
--ion-color-danger-tint: #d57587;
|
||||||
|
|
||||||
|
--ion-color-dark: #1f2430;
|
||||||
|
--ion-color-dark-rgb: 31, 36, 48;
|
||||||
|
--ion-color-dark-contrast: #ffffff;
|
||||||
|
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-dark-shade: #1b202a;
|
||||||
|
--ion-color-dark-tint: #353946;
|
||||||
|
|
||||||
|
--ion-color-medium: #7f8697;
|
||||||
|
--ion-color-medium-rgb: 127, 134, 151;
|
||||||
|
--ion-color-medium-contrast: #ffffff;
|
||||||
|
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-medium-shade: #707686;
|
||||||
|
--ion-color-medium-tint: #8c93a2;
|
||||||
|
|
||||||
|
--ion-color-light: #f3f5fb;
|
||||||
|
--ion-color-light-rgb: 243, 245, 251;
|
||||||
|
--ion-color-light-contrast: #1f2430;
|
||||||
|
--ion-color-light-contrast-rgb: 31, 36, 48;
|
||||||
|
--ion-color-light-shade: #d6d8dd;
|
||||||
|
--ion-color-light-tint: #f4f6fb;
|
||||||
|
|
||||||
|
--app-background: #ffffff;
|
||||||
|
--app-surface: #ffffff;
|
||||||
|
--app-surface-secondary: #f6f7fb;
|
||||||
|
--app-text-primary: #202532;
|
||||||
|
--app-text-secondary: rgba(32, 37, 50, 0.68);
|
||||||
|
--app-text-tertiary: rgba(32, 37, 50, 0.46);
|
||||||
|
--app-accent-soft: rgba(94, 106, 210, 0.12);
|
||||||
|
--app-accent-softer: rgba(94, 106, 210, 0.08);
|
||||||
|
--app-success-soft: rgba(58, 166, 122, 0.12);
|
||||||
|
--app-shadow: 0 18px 48px rgba(82, 95, 140, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.dark {
|
body {
|
||||||
--ion-color-primary: #0f3d2e;
|
background: var(--app-background);
|
||||||
--ion-color-primary-rgb: 15, 61, 46;
|
color: var(--app-text-primary);
|
||||||
--ion-color-primary-contrast: #ffffff;
|
}
|
||||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
|
||||||
--ion-color-primary-shade: #0c3125;
|
ion-content.home-content {
|
||||||
--ion-color-primary-tint: #295746;
|
--background: var(--app-background);
|
||||||
|
}
|
||||||
--ion-color-secondary: #f57c00;
|
|
||||||
--ion-color-secondary-rgb: 245, 124, 0;
|
.home-toolbar {
|
||||||
--ion-color-secondary-contrast: #ffffff;
|
--background: rgba(255, 255, 255, 0.92);
|
||||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
--border-width: 0;
|
||||||
--ion-color-secondary-shade: #d66d00;
|
--border-color: transparent;
|
||||||
--ion-color-secondary-tint: #f78f26;
|
--color: var(--app-text-primary);
|
||||||
|
box-shadow: none;
|
||||||
--color-brand: #0f3d2e;
|
backdrop-filter: blur(18px);
|
||||||
--color-brand-strong: #145340;
|
}
|
||||||
--color-brand-soft: rgba(15, 61, 46, 0.28);
|
|
||||||
--color-brand-medium: rgba(15, 61, 46, 0.42);
|
ion-header.home-header::after {
|
||||||
--color-accent: #f57c00;
|
display: none;
|
||||||
--color-accent-strong: #ff9831;
|
}
|
||||||
--color-accent-soft: rgba(245, 124, 0, 0.18);
|
|
||||||
--color-bg: #121212;
|
.home-shell {
|
||||||
--color-bg-gradient: linear-gradient(
|
padding: calc(88px + var(--ion-safe-area-top)) 24px
|
||||||
180deg,
|
calc(32px + var(--ion-safe-area-bottom));
|
||||||
#151515 0%,
|
display: flex;
|
||||||
#121212 55%,
|
flex-direction: column;
|
||||||
#101010 100%
|
}
|
||||||
);
|
|
||||||
--color-surface: #1b1b1b;
|
.minimal-home-shell {
|
||||||
--color-surface-raised: #242424;
|
min-height: 100%;
|
||||||
--color-surface-soft: #202020;
|
justify-content: flex-start;
|
||||||
--color-text-primary: #f4f4f4;
|
}
|
||||||
--color-text-secondary: rgba(244, 244, 244, 0.72);
|
|
||||||
--color-text-tertiary: rgba(244, 244, 244, 0.48);
|
.minimal-welcome-card {
|
||||||
--color-border: rgba(255, 255, 255, 0.08);
|
text-align: left;
|
||||||
--color-success-soft: rgba(29, 185, 84, 0.16);
|
display: flex;
|
||||||
--color-success-text: #78d29a;
|
flex-direction: column;
|
||||||
--color-warning-soft: rgba(245, 124, 0, 0.2);
|
gap: 10px;
|
||||||
--color-warning-text: #ffb15c;
|
}
|
||||||
--color-danger-soft: rgba(255, 99, 99, 0.16);
|
|
||||||
--color-danger-text: #ff8f8f;
|
.subtle-welcome-card {
|
||||||
--color-shell: rgba(33, 33, 33, 0.76);
|
max-width: 420px;
|
||||||
--color-shadow-lg:
|
margin: 0;
|
||||||
0 24px 60px rgba(0, 0, 0, 0.34), 0 8px 20px rgba(0, 0, 0, 0.22);
|
padding: 28px 24px;
|
||||||
--color-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.24);
|
background: var(--app-surface-secondary);
|
||||||
|
border-radius: 28px;
|
||||||
--ion-background-color: var(--color-bg);
|
}
|
||||||
--ion-text-color: var(--color-text-primary);
|
|
||||||
|
.minimal-welcome-card h1 {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--app-text-primary);
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 1.12;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minimal-subtitle {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--app-text-secondary);
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.home-shell {
|
||||||
|
max-width: 720px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minimal-welcome-card h1 {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -324,15 +324,6 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@capacitor/preferences@npm:^8.0.1":
|
|
||||||
version: 8.0.1
|
|
||||||
resolution: "@capacitor/preferences@npm:8.0.1"
|
|
||||||
peerDependencies:
|
|
||||||
"@capacitor/core": ">=8.0.0"
|
|
||||||
checksum: 10c0/cbed0229a685f484c396fd043354688fdeec69264f322180b62c5adb0322561b288a63eb38ee9b38cf78ea7dbc3b9dc8dd8c2e52b54a7f752a1b2f07bfd29f0d
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"@capacitor/push-notifications@npm:^8.1.1":
|
"@capacitor/push-notifications@npm:^8.1.1":
|
||||||
version: 8.1.1
|
version: 8.1.1
|
||||||
resolution: "@capacitor/push-notifications@npm:8.1.1"
|
resolution: "@capacitor/push-notifications@npm:8.1.1"
|
||||||
@@ -1358,6 +1349,13 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
"@protobufjs/inquire@npm:^1.1.2":
|
||||||
|
version: 1.1.2
|
||||||
|
resolution: "@protobufjs/inquire@npm:1.1.2"
|
||||||
|
checksum: 10c0/af69597818a14cac6a00a74cd5b3fb85aa96658b9dbbae73e6d907cb154ebf470953a8c537b3e6095a43de565ec4e6c5b40227c72f4a7d762d34fbec7ac179e7
|
||||||
|
languageName: node
|
||||||
|
linkType: hard
|
||||||
|
|
||||||
"@protobufjs/path@npm:^1.1.2":
|
"@protobufjs/path@npm:^1.1.2":
|
||||||
version: 1.1.2
|
version: 1.1.2
|
||||||
resolution: "@protobufjs/path@npm:1.1.2"
|
resolution: "@protobufjs/path@npm:1.1.2"
|
||||||
@@ -1743,70 +1741,70 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/auth-js@npm:2.108.2":
|
"@supabase/auth-js@npm:2.108.1":
|
||||||
version: 2.108.2
|
version: 2.108.1
|
||||||
resolution: "@supabase/auth-js@npm:2.108.2"
|
resolution: "@supabase/auth-js@npm:2.108.1"
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib: "npm:2.8.1"
|
tslib: "npm:2.8.1"
|
||||||
checksum: 10c0/31617770accb5910c1e7d19f230e3f1e5e1fd3e78912ea5ae342dddb7e032f58fb1d277560eae9a7892ef2d20b03c4989118a9ff17cb48aa5e7dd99eb566fb02
|
checksum: 10c0/8bf1bce42703b63284a0562d5a6588ac879b4fdeb477046a92fa9ba6fa0d75de7d85f4177d389654f68b812e359e9f0c9c3a659e7d37d96aaa2f6eba12d9cff0
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/functions-js@npm:2.108.2":
|
"@supabase/functions-js@npm:2.108.1":
|
||||||
version: 2.108.2
|
version: 2.108.1
|
||||||
resolution: "@supabase/functions-js@npm:2.108.2"
|
resolution: "@supabase/functions-js@npm:2.108.1"
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib: "npm:2.8.1"
|
tslib: "npm:2.8.1"
|
||||||
checksum: 10c0/06e899cd3445f519f8f595c648b8fa38f174f01335b18cf1ebcc87efc7cede997896e6b06c74747b4275c7b2514accee26d5ee0d4bb2bf5fc757c82070435624
|
checksum: 10c0/da67a82c4a79e049fa3d077f1ca3917a58707fa35df642d39d8b23edf5056a2a2427ea201d3f49bb11eafb06413dfde552a6bf63b2da4865a421d44c690c0fe7
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/phoenix@npm:^0.4.2":
|
"@supabase/phoenix@npm:^0.4.2":
|
||||||
version: 0.4.4
|
version: 0.4.2
|
||||||
resolution: "@supabase/phoenix@npm:0.4.4"
|
resolution: "@supabase/phoenix@npm:0.4.2"
|
||||||
checksum: 10c0/b4ba930c82b20d412358826aa87ce0735147fd168efb817bfc34e31d78605220947dc7c5844726268ac6bf338f0cd081f9908a7bab87aaff4058cb80bf71ab5b
|
checksum: 10c0/7d426ea70715539d76ef09a5d2364b335f848ffc32cefdc07b67707a9415c654d3f82ebf611851fceb987bdde31f1f77c088a05c40e372b65221801ca502945c
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/postgrest-js@npm:2.108.2":
|
"@supabase/postgrest-js@npm:2.108.1":
|
||||||
version: 2.108.2
|
version: 2.108.1
|
||||||
resolution: "@supabase/postgrest-js@npm:2.108.2"
|
resolution: "@supabase/postgrest-js@npm:2.108.1"
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib: "npm:2.8.1"
|
tslib: "npm:2.8.1"
|
||||||
checksum: 10c0/eafb794763943f1c72683157785e325647e5cc8eb17904b6922b896b5c25f0be75c11376cb7a518b6f6ee983ad7d94a509e75950533f3da4fcf8f910f1e11433
|
checksum: 10c0/29168464f44a723175ef510410df36f993581229d617816dfd33eb9bf5378742910fb9c18508040188ba2a16c20988f84d6f722decd79e34190daea35a5374af
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/realtime-js@npm:2.108.2":
|
"@supabase/realtime-js@npm:2.108.1":
|
||||||
version: 2.108.2
|
version: 2.108.1
|
||||||
resolution: "@supabase/realtime-js@npm:2.108.2"
|
resolution: "@supabase/realtime-js@npm:2.108.1"
|
||||||
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/3a5c19c4283b64cf22e91d264580905de0a724376314acf6a9f9e53ae74ba05bad679eaf57fe5c31e95213608c1bd065485127824bed377500b021d01cec0454
|
checksum: 10c0/bb4cea92714389b6f5f4b626e4c3cbacee2a57c543b71217d3d3032bfe35574cd26fe305bfbde0426230ca3b887e2116c78d47aa37117160b2b9d5ba11564ded
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/storage-js@npm:2.108.2":
|
"@supabase/storage-js@npm:2.108.1":
|
||||||
version: 2.108.2
|
version: 2.108.1
|
||||||
resolution: "@supabase/storage-js@npm:2.108.2"
|
resolution: "@supabase/storage-js@npm:2.108.1"
|
||||||
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/9e7ed4560150012ea8fa45c12b180533f166d6900b4a61e1a2bbf7f12e872ea42f85670db3dc781b7e76f983f5c9d320d84574775969d18804c6a0ca4aa44e7d
|
checksum: 10c0/5a010b4d3af565b26ceb1d07e3d3f0541c8fe538350931c4fc15d0b560b3e40c354cc66259882a8b378e70dace59bc83dd53849feb48509155b8b342e00724a2
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@supabase/supabase-js@npm:^2.108.1":
|
"@supabase/supabase-js@npm:^2.0.0":
|
||||||
version: 2.108.2
|
version: 2.108.1
|
||||||
resolution: "@supabase/supabase-js@npm:2.108.2"
|
resolution: "@supabase/supabase-js@npm:2.108.1"
|
||||||
dependencies:
|
dependencies:
|
||||||
"@supabase/auth-js": "npm:2.108.2"
|
"@supabase/auth-js": "npm:2.108.1"
|
||||||
"@supabase/functions-js": "npm:2.108.2"
|
"@supabase/functions-js": "npm:2.108.1"
|
||||||
"@supabase/postgrest-js": "npm:2.108.2"
|
"@supabase/postgrest-js": "npm:2.108.1"
|
||||||
"@supabase/realtime-js": "npm:2.108.2"
|
"@supabase/realtime-js": "npm:2.108.1"
|
||||||
"@supabase/storage-js": "npm:2.108.2"
|
"@supabase/storage-js": "npm:2.108.1"
|
||||||
checksum: 10c0/1e627189af3d8088329fdbdfbff754285dd757f30d7d4e0415881d75b684143b6c1fe519449b69d4b30b52f732a7f4510566718640826a966e124c8331becbfb
|
checksum: 10c0/9b8c3dd7153b4eb3c0bf47296e326c3e57bf77b979a5dc5d18b96a25c041195de942d227d13a5ce83a20203163580204e9102f2346f0a9461de4042b95f69f03
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -1875,9 +1873,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.2
|
version: 3.65.1
|
||||||
resolution: "@types/google.maps@npm:3.65.2"
|
resolution: "@types/google.maps@npm:3.65.1"
|
||||||
checksum: 10c0/790aed74128385bfa6c8b41c6bf18b8f1901e6c7b7c806615e904e9093703a8238f8b2504027ebe714e95f9cd5b2a94fd63306f8b71907a23ba24673754843ea
|
checksum: 10c0/9a7da04d9f27be7a3f9a4de2e6dd9271b68b83aa8a6050fc53ec5cc1366669ead4c27185200adf56f07d69c9a2bba72d82a0cf706e41ed4e7e89d98c44c5c6a1
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -1905,11 +1903,11 @@ __metadata:
|
|||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@types/node@npm:>=12.12.47, @types/node@npm:>=13.7.0":
|
"@types/node@npm:>=12.12.47, @types/node@npm:>=13.7.0":
|
||||||
version: 26.0.0
|
version: 25.9.3
|
||||||
resolution: "@types/node@npm:26.0.0"
|
resolution: "@types/node@npm:25.9.3"
|
||||||
dependencies:
|
dependencies:
|
||||||
undici-types: "npm:~8.3.0"
|
undici-types: "npm:>=7.24.0 <7.24.7"
|
||||||
checksum: 10c0/f36e21634fd8e8ded162ca486508bd8bb229d398a8d5541f6d8c1255968d4464e53327a77f403b216ef98e3b6f6956882eef83e4857d4bc2be9569dd55d37aae
|
checksum: 10c0/72d3aece9d42c2c641bcd3f3cb2dc2828b4bd384dfcbd910c404b8859a68bd69d50c4769ce7defd4ff5e049768e23e615f09407ea2cbbb5f44b90d75a7c6b8ca
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -2036,14 +2034,13 @@ __metadata:
|
|||||||
"@capacitor/haptics": "npm:8.0.2"
|
"@capacitor/haptics": "npm:8.0.2"
|
||||||
"@capacitor/ios": "npm:8.3.4"
|
"@capacitor/ios": "npm:8.3.4"
|
||||||
"@capacitor/keyboard": "npm:8.0.3"
|
"@capacitor/keyboard": "npm:8.0.3"
|
||||||
"@capacitor/preferences": "npm:^8.0.1"
|
|
||||||
"@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"
|
"@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.8.7"
|
||||||
"@ionic/react-router": "npm:8.8.7"
|
"@ionic/react-router": "npm:8.8.7"
|
||||||
"@supabase/supabase-js": "npm:^2.108.1"
|
"@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"
|
||||||
"@types/react-dom": "npm:^19.0.0"
|
"@types/react-dom": "npm:^19.0.0"
|
||||||
@@ -2991,8 +2988,8 @@ __metadata:
|
|||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"protobufjs@npm:^7.2.5":
|
"protobufjs@npm:^7.2.5":
|
||||||
version: 7.6.4
|
version: 7.6.3
|
||||||
resolution: "protobufjs@npm:7.6.4"
|
resolution: "protobufjs@npm:7.6.3"
|
||||||
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"
|
||||||
@@ -3000,12 +2997,13 @@ __metadata:
|
|||||||
"@protobufjs/eventemitter": "npm:^1.1.1"
|
"@protobufjs/eventemitter": "npm:^1.1.1"
|
||||||
"@protobufjs/fetch": "npm:^1.1.1"
|
"@protobufjs/fetch": "npm:^1.1.1"
|
||||||
"@protobufjs/float": "npm:^1.0.2"
|
"@protobufjs/float": "npm:^1.0.2"
|
||||||
|
"@protobufjs/inquire": "npm:^1.1.2"
|
||||||
"@protobufjs/path": "npm:^1.1.2"
|
"@protobufjs/path": "npm:^1.1.2"
|
||||||
"@protobufjs/pool": "npm:^1.1.0"
|
"@protobufjs/pool": "npm:^1.1.0"
|
||||||
"@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/6403eaa9c5a72cc6450c11f38fefafdde243fd806e7ac606ac8d591bc3fdaec45ae764febf83181a2d9aac51aca624e0f46dec368ceea191f7e85e2d6ccaaf93
|
checksum: 10c0/e1132b1ff82684280041550d720398568763ff40928def03e8bb409eaed6edd222e63372e3f52d7c19e5a8e9975333480e26950759086eb5a1f5b5c118da7bf8
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
@@ -3489,13 +3487,6 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"undici-types@npm:~8.3.0":
|
|
||||||
version: 8.3.0
|
|
||||||
resolution: "undici-types@npm:8.3.0"
|
|
||||||
checksum: 10c0/c8aa7e2fbebfce519654dafadc0ece59be888d2ccaf180fb4495da875e7b536d2456345c384069c7e6f3e9c9ab7435f074957da306f142343eee86ff8048855a
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"undici@npm:^6.25.0":
|
"undici@npm:^6.25.0":
|
||||||
version: 6.25.0
|
version: 6.25.0
|
||||||
resolution: "undici@npm:6.25.0"
|
resolution: "undici@npm:6.25.0"
|
||||||
@@ -3699,8 +3690,8 @@ __metadata:
|
|||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"yargs@npm:^17.7.2":
|
"yargs@npm:^17.7.2":
|
||||||
version: 17.7.3
|
version: 17.7.2
|
||||||
resolution: "yargs@npm:17.7.3"
|
resolution: "yargs@npm:17.7.2"
|
||||||
dependencies:
|
dependencies:
|
||||||
cliui: "npm:^8.0.1"
|
cliui: "npm:^8.0.1"
|
||||||
escalade: "npm:^3.1.1"
|
escalade: "npm:^3.1.1"
|
||||||
@@ -3709,7 +3700,7 @@ __metadata:
|
|||||||
string-width: "npm:^4.2.3"
|
string-width: "npm:^4.2.3"
|
||||||
y18n: "npm:^5.0.5"
|
y18n: "npm:^5.0.5"
|
||||||
yargs-parser: "npm:^21.1.1"
|
yargs-parser: "npm:^21.1.1"
|
||||||
checksum: 10c0/7a28572f7e785a57886e34fdbddb9b28756dec552e1453d5f6e7cdd00ad8721a4e8c4321d33683f5e61cacb36ad43258adbb48396b71ec4ed14abee0fc0d0c1f
|
checksum: 10c0/ccd7e723e61ad5965fffbb791366db689572b80cca80e0f96aad968dfff4156cd7cd1ad18607afe1046d8241e6fb2d6c08bf7fa7bfb5eaec818735d8feac8f05
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
|||||||