feat: split research workflows and results into dedicated workspaces
This commit is contained in:
pguerrerox
+21
-4
@@ -1,8 +1,25 @@
|
||||
# Changelog
|
||||
|
||||
All notable changes to this project are documented in this file.
|
||||
All notable changes to this project will be documented in this file.
|
||||
|
||||
## 2026-04-12
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [2026-04-19]
|
||||
|
||||
### Added
|
||||
- Added separate `Research` and `Results` workspaces so new runs and saved run browsing live in distinct flows while preserving bundled map selection.
|
||||
- Added dedicated Basic and Deep Research results views, plus a public landing page and dedicated auth route for the unauthenticated experience.
|
||||
|
||||
### Changed
|
||||
- Made Basic research map-first by requiring a dropped pin or current location, sending coordinate-based searches through the API, and cleaning up shared map presentation.
|
||||
- Simplified shared Google Maps rendering by moving Basic, Deep Research, and result review maps onto the same cleaner visual style.
|
||||
|
||||
### Fixed
|
||||
- Fixed local logout behavior so the session cookie is cleared consistently and optional session-id logout requests can remove the active server session record.
|
||||
|
||||
## [2026-04-12]
|
||||
|
||||
### Changed
|
||||
- Improved local development networking by making API env loading work with `.env.local`, adding LAN-friendly API URL fallback behavior, and fixing development CORS handling.
|
||||
@@ -17,7 +34,7 @@ All notable changes to this project are documented in this file.
|
||||
### Removed
|
||||
- Removed stale local metadata, placeholder postal seeding code, and leftover Supabase-era repository artifacts.
|
||||
|
||||
## 2026-03-27
|
||||
## [2026-03-27]
|
||||
|
||||
### Changed
|
||||
- Migrated the app from a Supabase runtime to a local Fastify API with PostgreSQL, PostGIS, and cookie-based session auth.
|
||||
@@ -32,7 +49,7 @@ All notable changes to this project are documented in this file.
|
||||
### Removed
|
||||
- Removed the Supabase browser client, Edge Function runtime, and Supabase migration artifacts from the active app stack.
|
||||
|
||||
## 2026-03-26
|
||||
## [2026-03-26]
|
||||
|
||||
### Added
|
||||
- Initial Leads4Less app with React and Vite.
|
||||
|
||||
Generated
+29
@@ -31,6 +31,8 @@
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.14.0",
|
||||
"@types/pg": "^8.20.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"tsx": "^4.21.0",
|
||||
@@ -1597,6 +1599,26 @@
|
||||
"pg-types": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "19.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
|
||||
"integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "19.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
|
||||
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vis.gl/react-google-maps": {
|
||||
"version": "1.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@vis.gl/react-google-maps/-/react-google-maps-1.7.1.tgz",
|
||||
@@ -1888,6 +1910,13 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
|
||||
|
||||
@@ -45,6 +45,8 @@
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.14.0",
|
||||
"@types/pg": "^8.20.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"tsx": "^4.21.0",
|
||||
|
||||
@@ -53,9 +53,15 @@ export function setSessionCookie(reply: FastifyReply, token: string, expiresAt:
|
||||
}
|
||||
|
||||
export function clearSessionCookie(reply: FastifyReply) {
|
||||
reply.clearCookie(SESSION_COOKIE_NAME, {
|
||||
const env = getEnv();
|
||||
|
||||
reply.setCookie(SESSION_COOKIE_NAME, '', {
|
||||
path: '/',
|
||||
httpOnly: true,
|
||||
sameSite: 'lax',
|
||||
secure: env.NODE_ENV === 'production',
|
||||
expires: new Date(0),
|
||||
maxAge: 0,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -89,6 +95,10 @@ export async function deleteSessionByToken(db: DbClient, token: string) {
|
||||
await db.query('delete from public.sessions where token_hash = $1', [hashSessionToken(token)]);
|
||||
}
|
||||
|
||||
export async function deleteSessionById(db: DbClient, sessionId: string) {
|
||||
await db.query('delete from public.sessions where id = $1', [sessionId]);
|
||||
}
|
||||
|
||||
export async function getSessionUserByToken(db: DbClient, token: string) {
|
||||
const tokenHash = hashSessionToken(token);
|
||||
const result = await db.query<SessionRow>(
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { FastifyPluginAsync, FastifyRequest } from 'fastify';
|
||||
import { ZodError, z } from 'zod';
|
||||
import { hashPassword, verifyPassword } from '../auth/passwords.js';
|
||||
import { clearSessionCookie, createSession, deleteSessionByToken, getSessionTokenFromRequest, getSessionUserByToken, setSessionCookie, } from '../auth/sessions.js';
|
||||
import { clearSessionCookie, createSession, deleteSessionById, deleteSessionByToken, getSessionTokenFromRequest, getSessionUserByToken, setSessionCookie, } from '../auth/sessions.js';
|
||||
import { createUser, getUserByEmail, toAppUser } from '../auth/users.js';
|
||||
import { getDbPool } from '../db/pool.js';
|
||||
|
||||
@@ -16,6 +16,10 @@ const loginSchema = z.object({
|
||||
password: z.string().min(1),
|
||||
});
|
||||
|
||||
const logoutSchema = z.object({
|
||||
sessionId: z.string().uuid().optional(),
|
||||
});
|
||||
|
||||
function getRequestMetadata(request: FastifyRequest) {
|
||||
return {
|
||||
userAgent: request.headers['user-agent'],
|
||||
@@ -101,9 +105,16 @@ export const authRoutes: FastifyPluginAsync = async (app) => {
|
||||
|
||||
app.post('/auth/logout', async (request, reply) => {
|
||||
const token = getSessionTokenFromRequest(request);
|
||||
const payload = logoutSchema.safeParse(request.body);
|
||||
const sessionId = payload.success ? payload.data.sessionId : undefined;
|
||||
const db = getDbPool();
|
||||
|
||||
if (token) {
|
||||
await deleteSessionByToken(getDbPool(), token);
|
||||
await deleteSessionByToken(db, token);
|
||||
}
|
||||
|
||||
if (sessionId) {
|
||||
await deleteSessionById(db, sessionId);
|
||||
}
|
||||
|
||||
clearSessionCookie(reply);
|
||||
|
||||
@@ -11,6 +11,8 @@ const runSearchSchema = z.object({
|
||||
radiusKm: z.coerce.number().positive().max(50),
|
||||
businessType: z.string().trim().min(1),
|
||||
keywords: z.string().trim().optional(),
|
||||
lat: z.number().finite().min(-90).max(90).optional(),
|
||||
lng: z.number().finite().min(-180).max(180).optional(),
|
||||
});
|
||||
|
||||
const jobParamsSchema = z.object({
|
||||
|
||||
@@ -66,7 +66,19 @@ async function executeSearchJobAtCoordinates(
|
||||
}
|
||||
|
||||
export async function runSearchForUser(db: Pool, userId: string, payload: RunSearchInput): Promise<RunSearchResult> {
|
||||
const job = await createSearchJob(db, userId, payload);
|
||||
const hasProvidedCoordinates = typeof payload.lat === 'number' && typeof payload.lng === 'number';
|
||||
const job = hasProvidedCoordinates
|
||||
? await createSearchJobForCoordinates(db, userId, {
|
||||
name: payload.name || `${payload.businessType} in ${payload.location}`,
|
||||
city: payload.location,
|
||||
address: payload.location,
|
||||
radiusKm: payload.radiusKm,
|
||||
businessType: payload.businessType,
|
||||
keywords: payload.keywords,
|
||||
lat: payload.lat!,
|
||||
lng: payload.lng!,
|
||||
})
|
||||
: await createSearchJob(db, userId, payload);
|
||||
const jobId = job.id;
|
||||
|
||||
try {
|
||||
@@ -75,14 +87,19 @@ export async function runSearchForUser(db: Pool, userId: string, payload: RunSea
|
||||
throw new Error('GOOGLE_MAPS_SERVER_KEY is required for running research.');
|
||||
}
|
||||
|
||||
const geocoded = await geocodeLocation(payload.location, env.GOOGLE_MAPS_SERVER_KEY);
|
||||
await updateSearchJobCenter(db, jobId, geocoded.lat, geocoded.lng);
|
||||
const resolvedCenter = hasProvidedCoordinates
|
||||
? { lat: payload.lat!, lng: payload.lng! }
|
||||
: await geocodeLocation(payload.location, env.GOOGLE_MAPS_SERVER_KEY);
|
||||
|
||||
if (!hasProvidedCoordinates) {
|
||||
await updateSearchJobCenter(db, jobId, resolvedCenter.lat, resolvedCenter.lng);
|
||||
}
|
||||
|
||||
const completedJob = await executeSearchJobAtCoordinates(db, {
|
||||
jobId,
|
||||
userId,
|
||||
lat: geocoded.lat,
|
||||
lng: geocoded.lng,
|
||||
lat: resolvedCenter.lat,
|
||||
lng: resolvedCenter.lng,
|
||||
radiusKm: payload.radiusKm,
|
||||
businessType: payload.businessType,
|
||||
keywords: payload.keywords,
|
||||
|
||||
@@ -56,6 +56,8 @@ export type RunSearchInput = {
|
||||
radiusKm: number;
|
||||
businessType: string;
|
||||
keywords?: string;
|
||||
lat?: number;
|
||||
lng?: number;
|
||||
};
|
||||
|
||||
export type RunSearchResult = {
|
||||
|
||||
+624
-134
@@ -1,12 +1,26 @@
|
||||
import { type ReactElement, type SVGProps, useEffect, useState } from 'react';
|
||||
import { APIProvider } from '@vis.gl/react-google-maps';
|
||||
import { AlertCircle, Briefcase, LogIn, ShieldAlert, UserPlus } from 'lucide-react';
|
||||
import { DeepResearchView } from './components/DeepResearchView';
|
||||
import {
|
||||
AlertCircle,
|
||||
ArrowRight,
|
||||
Briefcase,
|
||||
Building2,
|
||||
Check,
|
||||
LogIn,
|
||||
Map,
|
||||
MapPinned,
|
||||
Search,
|
||||
ShieldAlert,
|
||||
Sparkles,
|
||||
User,
|
||||
UserPlus,
|
||||
} from 'lucide-react';
|
||||
import { Layout, type AppTab } from './components/Layout';
|
||||
import { SearchSetup } from './components/SearchSetup';
|
||||
import { Dashboard } from './components/Dashboard';
|
||||
import { MapView } from './components/MapView';
|
||||
import type { AppUser } from '../shared/types';
|
||||
import { ResearchWorkspace } from './components/ResearchWorkspace';
|
||||
import { ResultsWorkspace } from './components/ResultsWorkspace';
|
||||
import type { SessionUser } from '../shared/types';
|
||||
import { getLocalSessionUser, signInWithLocalAuth, signOutWithLocalAuth, signUpWithLocalAuth } from './lib/auth';
|
||||
import { hasApiConfig } from './lib/api';
|
||||
|
||||
@@ -14,7 +28,8 @@ const GOOGLE_MAPS_API_KEY = import.meta.env.VITE_GOOGLE_MAPS_PLATFORM_KEY ?? '';
|
||||
const hasValidMapsKey = Boolean(GOOGLE_MAPS_API_KEY) && GOOGLE_MAPS_API_KEY !== 'YOUR_API_KEY';
|
||||
|
||||
export default function App() {
|
||||
const [user, setUser] = useState<AppUser | null>(null);
|
||||
const [publicPage, setPublicPage] = useState<'landing' | 'auth'>(() => getPublicPageFromLocation());
|
||||
const [user, setUser] = useState<SessionUser | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState<AppTab>('setup');
|
||||
const [selectedJobIds, setSelectedJobIds] = useState<string[]>([]);
|
||||
@@ -26,6 +41,18 @@ export default function App() {
|
||||
const [password, setPassword] = useState('');
|
||||
const [displayName, setDisplayName] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const handlePopState = () => {
|
||||
setPublicPage(getPublicPageFromLocation());
|
||||
};
|
||||
|
||||
window.addEventListener('popstate', handlePopState);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('popstate', handlePopState);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
@@ -109,6 +136,7 @@ export default function App() {
|
||||
});
|
||||
|
||||
setUser(nextUser);
|
||||
navigatePublicPage('landing', setPublicPage);
|
||||
} catch (error) {
|
||||
setAuthError(error instanceof Error ? error.message : 'Authentication failed.');
|
||||
} finally {
|
||||
@@ -117,11 +145,16 @@ export default function App() {
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
const sessionId = user?.sessionId;
|
||||
|
||||
setAuthError(null);
|
||||
setAuthNotice(null);
|
||||
setSelectedJobIds([]);
|
||||
setUser(null);
|
||||
setActiveTab('setup');
|
||||
|
||||
try {
|
||||
await signOutWithLocalAuth();
|
||||
setUser(null);
|
||||
setSelectedJobIds([]);
|
||||
setAuthNotice(null);
|
||||
await signOutWithLocalAuth(sessionId);
|
||||
} catch (error) {
|
||||
setAuthError(error instanceof Error ? error.message : 'Failed to sign out.');
|
||||
}
|
||||
@@ -153,130 +186,39 @@ export default function App() {
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
const handleSetAuthMode = (mode: 'sign_in' | 'sign_up') => {
|
||||
setAuthMode(mode);
|
||||
setAuthError(null);
|
||||
setAuthNotice(null);
|
||||
};
|
||||
|
||||
if (publicPage === 'auth') {
|
||||
return (
|
||||
<AuthPage
|
||||
authMode={authMode}
|
||||
authError={authError}
|
||||
authNotice={authNotice}
|
||||
displayName={displayName}
|
||||
email={email}
|
||||
isAuthenticating={isAuthenticating}
|
||||
password={password}
|
||||
onDisplayNameChange={setDisplayName}
|
||||
onEmailChange={setEmail}
|
||||
onPasswordChange={setPassword}
|
||||
onGoHome={() => navigatePublicPage('landing', setPublicPage)}
|
||||
onSetAuthMode={handleSetAuthMode}
|
||||
onSubmit={() => void handleLogin()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen flex-col items-center justify-center bg-stone-50 p-4">
|
||||
<div className="w-full max-w-md space-y-8 rounded-2xl bg-white p-8 shadow-xl">
|
||||
<div className="text-center">
|
||||
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
|
||||
<Briefcase className="h-8 w-8" />
|
||||
</div>
|
||||
<h1 className="mt-6 text-3xl font-bold tracking-tight text-stone-900">Leads4less</h1>
|
||||
<p className="mt-2 text-stone-600">Create a local account to access your lead workspace.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 rounded-xl bg-stone-100 p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setAuthMode('sign_in');
|
||||
setAuthError(null);
|
||||
setAuthNotice(null);
|
||||
}}
|
||||
className={`rounded-lg px-3 py-2 text-sm font-semibold transition-all ${
|
||||
authMode === 'sign_in' ? 'bg-white text-stone-900 shadow-sm' : 'text-stone-500 hover:text-stone-900'
|
||||
}`}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setAuthMode('sign_up');
|
||||
setAuthError(null);
|
||||
setAuthNotice(null);
|
||||
}}
|
||||
className={`rounded-lg px-3 py-2 text-sm font-semibold transition-all ${
|
||||
authMode === 'sign_up' ? 'bg-white text-stone-900 shadow-sm' : 'text-stone-500 hover:text-stone-900'
|
||||
}`}
|
||||
>
|
||||
Create Account
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{authError && (
|
||||
<div className="flex items-start gap-3 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">
|
||||
<AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="font-semibold">Authentication Error</p>
|
||||
<p className="mt-1 opacity-90">{authError}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{authNotice && (
|
||||
<div className="rounded-xl border border-emerald-100 bg-emerald-50 p-4 text-sm text-emerald-700">
|
||||
{authNotice}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form
|
||||
className="space-y-4"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
void handleLogin();
|
||||
}}
|
||||
>
|
||||
{authMode === 'sign_up' && (
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-stone-700">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(event) => setDisplayName(event.target.value)}
|
||||
placeholder="Your name"
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-stone-700">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
placeholder="you@example.com"
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-stone-700">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
minLength={6}
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
placeholder="At least 6 characters"
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isAuthenticating}
|
||||
className="flex w-full items-center justify-center gap-3 rounded-xl bg-emerald-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isAuthenticating ? (
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
|
||||
) : authMode === 'sign_up' ? (
|
||||
<UserPlus className="h-5 w-5" />
|
||||
) : (
|
||||
<LogIn className="h-5 w-5" />
|
||||
)}
|
||||
{isAuthenticating
|
||||
? authMode === 'sign_up'
|
||||
? 'Creating account...'
|
||||
: 'Signing in...'
|
||||
: authMode === 'sign_up'
|
||||
? 'Create Account'
|
||||
: 'Sign In'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<LandingPage
|
||||
onGoToAuth={(mode) => {
|
||||
handleSetAuthMode(mode);
|
||||
navigatePublicPage('auth', setPublicPage);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -306,16 +248,26 @@ export default function App() {
|
||||
onLogout={() => void handleLogout()}
|
||||
>
|
||||
{activeTab === 'setup' && (
|
||||
<SearchSetup
|
||||
<ResearchWorkspace
|
||||
user={user}
|
||||
selectedJobIds={selectedJobIds}
|
||||
onToggleJobSelection={handleToggleJobSelection}
|
||||
onSelectCreatedJob={handleSelectCreatedJob}
|
||||
onShowSelectedOnMap={handleShowSelectedOnMap}
|
||||
onClearSelection={handleClearSelectedJobs}
|
||||
onShowBatchOnMap={handleShowJobIdsOnMap}
|
||||
/>
|
||||
)}
|
||||
{activeTab === 'results' && (
|
||||
<ResultsWorkspace
|
||||
user={user}
|
||||
selectedJobIds={selectedJobIds}
|
||||
onToggleJobSelection={handleToggleJobSelection}
|
||||
onShowSelectedOnMap={handleShowSelectedOnMap}
|
||||
onClearSelection={handleClearSelectedJobs}
|
||||
onShowBatchOnMap={handleShowJobIdsOnMap}
|
||||
/>
|
||||
)}
|
||||
{activeTab === 'deepResearch' && <DeepResearchView onShowBatchOnMap={handleShowJobIdsOnMap} />}
|
||||
{activeTab === 'dashboard' && <Dashboard user={user} />}
|
||||
{activeTab === 'map' && <MapView user={user} jobIds={selectedJobIds} />}
|
||||
</Layout>
|
||||
@@ -323,6 +275,544 @@ export default function App() {
|
||||
);
|
||||
}
|
||||
|
||||
function getPublicPageFromLocation(): 'landing' | 'auth' {
|
||||
if (typeof window === 'undefined') {
|
||||
return 'landing';
|
||||
}
|
||||
|
||||
return window.location.pathname === '/auth' ? 'auth' : 'landing';
|
||||
}
|
||||
|
||||
function navigatePublicPage(page: 'landing' | 'auth', setPublicPage: (page: 'landing' | 'auth') => void) {
|
||||
const nextPath = page === 'auth' ? '/auth' : '/';
|
||||
|
||||
if (typeof window !== 'undefined' && window.location.pathname !== nextPath) {
|
||||
window.history.pushState({}, '', nextPath);
|
||||
}
|
||||
|
||||
setPublicPage(page);
|
||||
}
|
||||
|
||||
function LandingPage(props: {
|
||||
onGoToAuth: (mode: 'sign_in' | 'sign_up') => void;
|
||||
}) {
|
||||
const { onGoToAuth } = props;
|
||||
|
||||
const featureCards = [
|
||||
{
|
||||
icon: Search,
|
||||
title: 'Research Runs',
|
||||
description: 'Search by city, radius, business type, and keywords without juggling spreadsheets or manual lookups.',
|
||||
},
|
||||
{
|
||||
icon: MapPinned,
|
||||
title: 'Deep Research',
|
||||
description: 'Drop one pin and expand intelligently into nearby postal areas to widen market coverage.',
|
||||
},
|
||||
{
|
||||
icon: Map,
|
||||
title: 'Clean Map View',
|
||||
description: 'Review returned businesses on a focused map built for operational decision-making, not map clutter.',
|
||||
},
|
||||
{
|
||||
icon: Briefcase,
|
||||
title: 'Lead Workspace',
|
||||
description: 'Keep past runs, saved businesses, and mapped results in one place for repeatable prospecting.',
|
||||
},
|
||||
] as const;
|
||||
|
||||
const audienceCards = [
|
||||
{
|
||||
icon: User,
|
||||
title: 'Personal Use',
|
||||
description: 'For solo operators, freelancers, and independent prospectors who need a focused local research workflow.',
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: 'Small Business',
|
||||
description: 'For agencies and local teams running prospecting every week across multiple service areas.',
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: 'Enterprise',
|
||||
description: 'For larger organizations that need custom research volume, rollout support, and tailored operating limits.',
|
||||
},
|
||||
] as const;
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: 'Personal',
|
||||
audience: 'For solo operators',
|
||||
price: '$19',
|
||||
period: '/month',
|
||||
cta: 'Start free',
|
||||
featured: false,
|
||||
items: ['1 user workspace', '40 research runs / month', 'Map view and dashboard history', 'Email support'],
|
||||
},
|
||||
{
|
||||
name: 'Small Business',
|
||||
audience: 'For growing local teams',
|
||||
price: '$79',
|
||||
period: '/month',
|
||||
cta: 'Choose Small Business',
|
||||
featured: true,
|
||||
items: ['Everything in Personal', '250 research runs / month', 'Deep research workflows', 'Extended lead history', 'Priority support'],
|
||||
},
|
||||
{
|
||||
name: 'Enterprise',
|
||||
audience: 'For custom rollouts',
|
||||
price: 'Contact',
|
||||
period: 'sales',
|
||||
cta: 'Talk to sales',
|
||||
featured: false,
|
||||
items: ['Custom research volume', 'Custom onboarding plan', 'Tailored support model', 'Deployment and process guidance'],
|
||||
},
|
||||
] as const;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.12),_transparent_28%),linear-gradient(180deg,#fafaf9_0%,#f5f5f4_100%)] text-stone-900">
|
||||
<div className="mx-auto max-w-7xl px-4 pb-16 pt-4 sm:px-6 lg:px-8 lg:pb-24">
|
||||
<header className="sticky top-4 z-10 rounded-3xl border border-white/70 bg-white/80 px-5 py-4 shadow-sm backdrop-blur md:px-6">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-2xl bg-emerald-600 p-2.5 text-white shadow-sm">
|
||||
<Briefcase className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg font-bold tracking-tight">Leads4less</p>
|
||||
<p className="text-sm text-stone-500">Local market research for modern teams</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex flex-wrap items-center gap-3 text-sm font-medium text-stone-600">
|
||||
<a href="#product" className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
|
||||
Product
|
||||
</a>
|
||||
<a href="#workflow" className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
|
||||
Workflow
|
||||
</a>
|
||||
<a href="#pricing" className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
|
||||
Pricing
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onGoToAuth('sign_in')}
|
||||
className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onGoToAuth('sign_up')}
|
||||
className="inline-flex items-center gap-2 rounded-full bg-emerald-600 px-4 py-2 text-white shadow-sm transition hover:bg-emerald-700"
|
||||
>
|
||||
Sign Up
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="py-12 lg:py-16">
|
||||
<div className="space-y-8">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-700">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
Built for local lead generation workflows
|
||||
</div>
|
||||
|
||||
<div className="space-y-5">
|
||||
<h1 className="max-w-4xl text-5xl font-bold tracking-tight text-stone-950 sm:text-6xl">
|
||||
Research local markets, map opportunities, and build better lead lists faster.
|
||||
</h1>
|
||||
<p className="max-w-3xl text-lg leading-8 text-stone-600 sm:text-xl">
|
||||
Run targeted searches, expand coverage from a single pin, and review every result in one focused workspace designed for real prospecting operations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onGoToAuth('sign_up')}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-6 py-4 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700"
|
||||
>
|
||||
Sign Up
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</button>
|
||||
<a
|
||||
href="#pricing"
|
||||
className="inline-flex items-center justify-center rounded-2xl border border-stone-200 bg-white px-6 py-4 text-sm font-semibold text-stone-700 shadow-sm transition hover:border-stone-300 hover:bg-stone-50"
|
||||
>
|
||||
See pricing
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="product" className="rounded-[2rem] border border-stone-200 bg-white px-6 py-10 shadow-sm sm:px-8 lg:px-10">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Product</p>
|
||||
<h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">One workspace for local lead generation</h2>
|
||||
<p className="mt-4 text-base leading-8 text-stone-600">
|
||||
Leads4less keeps market research, deep area expansion, map review, and saved business history in a single operating flow so your team can move faster without losing context.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-4 lg:grid-cols-3">
|
||||
<div className="rounded-3xl bg-stone-950 p-6 text-white lg:col-span-2">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-300">Operational Workflow</p>
|
||||
<p className="mt-4 text-2xl font-bold tracking-tight">Search a market, expand intelligently, and review results visually.</p>
|
||||
<p className="mt-4 max-w-2xl text-sm leading-7 text-stone-300">
|
||||
Instead of stitching together Google tabs, spreadsheets, and hand-written notes, run the full prospecting loop from one product surface built for repeatable research. Launch deeper market coverage from a single map interaction while keeping research, deep research, dashboard, and map review connected in one workspace.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-3xl border border-stone-200 bg-stone-50 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-stone-500">Best Fit</p>
|
||||
<p className="mt-4 text-2xl font-bold tracking-tight text-stone-900">Local teams who need speed and structure</p>
|
||||
<p className="mt-4 text-sm leading-7 text-stone-600">Built for recurring lead generation, territory research, and targeted market expansion.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="workflow" className="py-16">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Workflow</p>
|
||||
<h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">A clear research process from first search to mapped review</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-4 lg:grid-cols-4">
|
||||
{[
|
||||
['01', 'Search', 'Start with location, radius, business type, and optional keywords.'],
|
||||
['02', 'Expand', 'Use deep research to fan out from a pin into nearby postal areas.'],
|
||||
['03', 'Review', 'Inspect returned businesses on a clean map and in the dashboard.'],
|
||||
['04', 'Act', 'Keep high-value results organized for follow-up and repeated market work.'],
|
||||
].map(([step, title, description]) => (
|
||||
<div key={step} className="rounded-3xl border border-stone-200 bg-white p-6 shadow-sm">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">{step}</p>
|
||||
<h3 className="mt-4 text-xl font-bold tracking-tight text-stone-900">{title}</h3>
|
||||
<p className="mt-3 text-sm leading-7 text-stone-600">{description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-[2rem] border border-stone-200 bg-white px-6 py-10 shadow-sm sm:px-8 lg:px-10">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Who It's For</p>
|
||||
<h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">Designed for personal use, small business teams, and enterprise rollouts</h2>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-4 lg:grid-cols-3">
|
||||
{audienceCards.map((audience) => (
|
||||
<div key={audience.title} className="rounded-3xl border border-stone-200 bg-stone-50 p-6">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white text-emerald-600 shadow-sm">
|
||||
<audience.icon className="h-5 w-5" />
|
||||
</div>
|
||||
<h3 className="mt-5 text-xl font-bold tracking-tight text-stone-900">{audience.title}</h3>
|
||||
<p className="mt-3 text-sm leading-7 text-stone-600">{audience.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pricing" className="py-16">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Pricing</p>
|
||||
<h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">Choose the plan that matches your research volume</h2>
|
||||
<p className="mt-4 text-base leading-8 text-stone-600">
|
||||
Start small, run local research consistently, and upgrade when your market coverage or team needs expand.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid gap-5 xl:grid-cols-3">
|
||||
{plans.map((plan) => (
|
||||
<div
|
||||
key={plan.name}
|
||||
className={`rounded-[2rem] border p-7 shadow-sm ${
|
||||
plan.featured ? 'border-emerald-300 bg-emerald-50/60 shadow-emerald-100' : 'border-stone-200 bg-white'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xl font-bold tracking-tight text-stone-900">{plan.name}</p>
|
||||
<p className="mt-2 text-sm text-stone-600">{plan.audience}</p>
|
||||
</div>
|
||||
{plan.featured && (
|
||||
<span className="rounded-full bg-emerald-600 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white">
|
||||
Most Popular
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex items-end gap-1">
|
||||
<span className="text-4xl font-bold tracking-tight text-stone-950">{plan.price}</span>
|
||||
<span className="pb-1 text-sm text-stone-500">{plan.period}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onGoToAuth(plan.name === 'Enterprise' ? 'sign_in' : 'sign_up')}
|
||||
className={`mt-8 inline-flex w-full items-center justify-center rounded-2xl px-4 py-3 text-sm font-semibold transition ${
|
||||
plan.featured
|
||||
? 'bg-emerald-600 text-white hover:bg-emerald-700'
|
||||
: 'border border-stone-200 bg-white text-stone-800 hover:bg-stone-50'
|
||||
}`}
|
||||
>
|
||||
{plan.cta}
|
||||
</button>
|
||||
|
||||
<div className="mt-8 space-y-3">
|
||||
{plan.items.map((item) => (
|
||||
<div key={item} className="flex items-start gap-3 text-sm text-stone-700">
|
||||
<div className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
|
||||
<Check className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<span>{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-[2rem] bg-stone-950 px-6 py-12 text-white shadow-sm sm:px-8 lg:px-10">
|
||||
<div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-300">Start Now</p>
|
||||
<h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">Turn local market research into a repeatable system.</h2>
|
||||
<p className="mt-4 text-base leading-8 text-stone-300">
|
||||
Create an account, run your first research job, and build a cleaner lead workflow from day one.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onGoToAuth('sign_up')}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-500 px-6 py-4 text-sm font-semibold text-white transition hover:bg-emerald-400"
|
||||
>
|
||||
Choose a plan
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</button>
|
||||
<a
|
||||
href="#pricing"
|
||||
className="inline-flex items-center justify-center rounded-2xl border border-white/20 px-6 py-4 text-sm font-semibold text-white transition hover:bg-white/10"
|
||||
>
|
||||
Compare plans
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AuthPage(props: {
|
||||
authMode: 'sign_in' | 'sign_up';
|
||||
authError: string | null;
|
||||
authNotice: string | null;
|
||||
displayName: string;
|
||||
email: string;
|
||||
isAuthenticating: boolean;
|
||||
password: string;
|
||||
onDisplayNameChange: (value: string) => void;
|
||||
onEmailChange: (value: string) => void;
|
||||
onPasswordChange: (value: string) => void;
|
||||
onGoHome: () => void;
|
||||
onSetAuthMode: (mode: 'sign_in' | 'sign_up') => void;
|
||||
onSubmit: () => void;
|
||||
}) {
|
||||
const {
|
||||
authMode,
|
||||
authError,
|
||||
authNotice,
|
||||
displayName,
|
||||
email,
|
||||
isAuthenticating,
|
||||
password,
|
||||
onDisplayNameChange,
|
||||
onEmailChange,
|
||||
onPasswordChange,
|
||||
onGoHome,
|
||||
onSetAuthMode,
|
||||
onSubmit,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.12),_transparent_30%),linear-gradient(180deg,#fafaf9_0%,#f5f5f4_100%)] text-stone-900">
|
||||
<div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
|
||||
<header className="rounded-3xl border border-white/70 bg-white/80 px-5 py-4 shadow-sm backdrop-blur md:px-6">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<button type="button" onClick={onGoHome} className="flex items-center gap-3 text-left">
|
||||
<div className="rounded-2xl bg-emerald-600 p-2.5 text-white shadow-sm">
|
||||
<Briefcase className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg font-bold tracking-tight">Leads4less</p>
|
||||
<p className="text-sm text-stone-500">Local market research for modern teams</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-3 text-sm font-medium text-stone-600">
|
||||
<button type="button" onClick={onGoHome} className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
|
||||
Back to home
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="grid gap-10 py-12 lg:grid-cols-[minmax(0,1fr)_440px] lg:items-center lg:py-16">
|
||||
<div className="space-y-8">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-700">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
Secure access to your lead workspace
|
||||
</div>
|
||||
|
||||
<div className="space-y-5">
|
||||
<h1 className="max-w-3xl text-5xl font-bold tracking-tight text-stone-950 sm:text-6xl">
|
||||
{authMode === 'sign_up' ? 'Create your workspace and start researching local markets.' : 'Sign in and continue your lead research workflow.'}
|
||||
</h1>
|
||||
<p className="max-w-2xl text-lg leading-8 text-stone-600 sm:text-xl">
|
||||
Access research runs, deep research coverage, clean map review, and saved business history from one focused operating surface.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
{[
|
||||
['Targeted search', 'Run location-based business research with clear inputs and repeatable jobs.'],
|
||||
['Map review', 'Inspect returned businesses on a cleaner map built for operational use.'],
|
||||
['Persistent history', 'Keep lead runs and saved businesses available whenever you come back.'],
|
||||
].map(([title, description]) => (
|
||||
<div key={title} className="rounded-3xl border border-stone-200 bg-white p-5 shadow-sm">
|
||||
<p className="text-base font-bold tracking-tight text-stone-900">{title}</p>
|
||||
<p className="mt-2 text-sm leading-7 text-stone-600">{description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[2rem] border border-stone-200 bg-white p-6 shadow-xl shadow-stone-200/70 sm:p-8">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Account Access</p>
|
||||
<h2 className="mt-2 text-2xl font-bold tracking-tight text-stone-900">
|
||||
{authMode === 'sign_up' ? 'Create account' : 'Sign in'}
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-stone-600">
|
||||
{authMode === 'sign_up' ? 'Set up your account to start using Leads4less.' : 'Use your account to continue where you left off.'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-emerald-50 p-3 text-emerald-600">
|
||||
{authMode === 'sign_up' ? <UserPlus className="h-6 w-6" /> : <LogIn className="h-6 w-6" />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 rounded-2xl bg-stone-100 p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSetAuthMode('sign_in')}
|
||||
className={`rounded-xl px-3 py-2.5 text-sm font-semibold transition-all ${
|
||||
authMode === 'sign_in' ? 'bg-white text-stone-900 shadow-sm' : 'text-stone-500 hover:text-stone-900'
|
||||
}`}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSetAuthMode('sign_up')}
|
||||
className={`rounded-xl px-3 py-2.5 text-sm font-semibold transition-all ${
|
||||
authMode === 'sign_up' ? 'bg-white text-stone-900 shadow-sm' : 'text-stone-500 hover:text-stone-900'
|
||||
}`}
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{authError && (
|
||||
<div className="mt-5 flex items-start gap-3 rounded-2xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">
|
||||
<AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="font-semibold">Authentication Error</p>
|
||||
<p className="mt-1 opacity-90">{authError}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{authNotice && <div className="mt-5 rounded-2xl border border-emerald-100 bg-emerald-50 p-4 text-sm text-emerald-700">{authNotice}</div>}
|
||||
|
||||
<form
|
||||
className="mt-5 space-y-4"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
onSubmit();
|
||||
}}
|
||||
>
|
||||
{authMode === 'sign_up' && (
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-stone-700">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(event) => onDisplayNameChange(event.target.value)}
|
||||
placeholder="Your name"
|
||||
className="w-full rounded-2xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-stone-700">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(event) => onEmailChange(event.target.value)}
|
||||
placeholder="you@example.com"
|
||||
className="w-full rounded-2xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-semibold text-stone-700">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
minLength={6}
|
||||
value={password}
|
||||
onChange={(event) => onPasswordChange(event.target.value)}
|
||||
placeholder="At least 6 characters"
|
||||
className="w-full rounded-2xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isAuthenticating}
|
||||
className="flex w-full items-center justify-center gap-3 rounded-2xl bg-emerald-600 px-4 py-3.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isAuthenticating ? (
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
|
||||
) : authMode === 'sign_up' ? (
|
||||
<UserPlus className="h-5 w-5" />
|
||||
) : (
|
||||
<LogIn className="h-5 w-5" />
|
||||
)}
|
||||
{isAuthenticating
|
||||
? authMode === 'sign_up'
|
||||
? 'Creating account...'
|
||||
: 'Signing in...'
|
||||
: authMode === 'sign_up'
|
||||
? 'Create Account'
|
||||
: 'Sign In'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ConfigScreen(props: {
|
||||
icon: ReactElement;
|
||||
title: string;
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import { Map, Marker, useMap } from '@vis.gl/react-google-maps';
|
||||
import { cleanMapOptions } from '../lib/map-styles';
|
||||
|
||||
interface BasicResearchMapProps {
|
||||
pin: google.maps.LatLngLiteral | null;
|
||||
radiusKm: number;
|
||||
onPinChange: (nextPin: google.maps.LatLngLiteral) => void;
|
||||
}
|
||||
|
||||
export function BasicResearchMap({ pin, radiusKm, onPinChange }: BasicResearchMapProps) {
|
||||
const defaultCenter = useMemo(() => pin ?? { lat: 39.5, lng: -98.35 }, [pin]);
|
||||
|
||||
return (
|
||||
<div className="relative h-full min-h-[540px] overflow-hidden rounded-3xl border border-stone-200 bg-stone-100 shadow-sm">
|
||||
<Map
|
||||
defaultCenter={defaultCenter}
|
||||
defaultZoom={5}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
gestureHandling="greedy"
|
||||
{...cleanMapOptions}
|
||||
onClick={(event) => {
|
||||
const latLng = event.detail.latLng;
|
||||
if (latLng) {
|
||||
onPinChange(latLng);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<BasicResearchOverlay pin={pin} radiusKm={radiusKm} />
|
||||
{pin && (
|
||||
<Marker
|
||||
position={pin}
|
||||
icon={{
|
||||
path: google.maps.SymbolPath.CIRCLE,
|
||||
fillColor: '#059669',
|
||||
fillOpacity: 1,
|
||||
strokeColor: '#064e3b',
|
||||
strokeWeight: 2,
|
||||
scale: 7,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Map>
|
||||
|
||||
{!pin && (
|
||||
<div className="pointer-events-none absolute inset-x-6 top-6 rounded-2xl border border-white/20 bg-white/90 p-4 text-sm text-stone-600 shadow-lg backdrop-blur-sm">
|
||||
Click anywhere on the map to drop a pin. Use the Area field to adjust the search circle.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BasicResearchOverlay({ pin, radiusKm }: { pin: google.maps.LatLngLiteral | null; radiusKm: number }) {
|
||||
const map = useMap();
|
||||
|
||||
useEffect(() => {
|
||||
if (!map || !pin) {
|
||||
return;
|
||||
}
|
||||
|
||||
const circle = new google.maps.Circle({
|
||||
map,
|
||||
center: pin,
|
||||
radius: Math.max(1, radiusKm) * 1000,
|
||||
strokeColor: '#059669',
|
||||
strokeOpacity: 0.9,
|
||||
strokeWeight: 2,
|
||||
fillColor: '#10b981',
|
||||
fillOpacity: 0.12,
|
||||
clickable: false,
|
||||
});
|
||||
|
||||
const bounds = circle.getBounds();
|
||||
if (bounds) {
|
||||
map.fitBounds(bounds, 60);
|
||||
}
|
||||
|
||||
return () => {
|
||||
circle.setMap(null);
|
||||
};
|
||||
}, [map, pin, radiusKm]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,309 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
AlertCircle,
|
||||
CalendarDays,
|
||||
Check,
|
||||
CheckCircle2,
|
||||
CircleOff,
|
||||
Clock3,
|
||||
Loader2,
|
||||
MapPin,
|
||||
Search as SearchIcon,
|
||||
SlidersHorizontal,
|
||||
} from 'lucide-react';
|
||||
import { listSearchJobs } from '../lib/database';
|
||||
import type { SearchJob, SearchJobStatus } from '../types';
|
||||
import type { AppUser } from '../../shared/types';
|
||||
|
||||
interface BasicResultsViewProps {
|
||||
user: AppUser;
|
||||
selectedJobIds: string[];
|
||||
onToggleJobSelection: (jobId: string) => void;
|
||||
onShowSelectedOnMap: () => void;
|
||||
onClearSelection: () => void;
|
||||
}
|
||||
|
||||
type JobStatusFilter = 'all' | SearchJobStatus;
|
||||
type SortOption = 'newest' | 'oldest' | 'results';
|
||||
|
||||
const statusOptions: Array<{ value: JobStatusFilter; label: string }> = [
|
||||
{ value: 'all', label: 'All statuses' },
|
||||
{ value: 'pending', label: 'Pending' },
|
||||
{ value: 'running', label: 'Running' },
|
||||
{ value: 'completed', label: 'Completed' },
|
||||
{ value: 'failed', label: 'Failed' },
|
||||
{ value: 'stopped', label: 'Stopped' },
|
||||
];
|
||||
|
||||
const sortOptions: Array<{ value: SortOption; label: string }> = [
|
||||
{ value: 'newest', label: 'Newest first' },
|
||||
{ value: 'oldest', label: 'Oldest first' },
|
||||
{ value: 'results', label: 'Most results' },
|
||||
];
|
||||
|
||||
export function BasicResultsView({ user, selectedJobIds, onToggleJobSelection, onShowSelectedOnMap, onClearSelection }: BasicResultsViewProps) {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<JobStatusFilter>('all');
|
||||
const [sortOrder, setSortOrder] = useState<SortOption>('newest');
|
||||
const [isLoadingHistory, setIsLoadingHistory] = useState(true);
|
||||
const [jobs, setJobs] = useState<SearchJob[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const selectedJobCount = selectedJobIds.length;
|
||||
|
||||
const refreshJobs = useCallback(async () => {
|
||||
setIsLoadingHistory(true);
|
||||
|
||||
try {
|
||||
const nextJobs = await listSearchJobs(user.id, 100);
|
||||
setJobs(nextJobs);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load research jobs.');
|
||||
} finally {
|
||||
setIsLoadingHistory(false);
|
||||
}
|
||||
}, [user.id]);
|
||||
|
||||
useEffect(() => {
|
||||
void refreshJobs();
|
||||
}, [refreshJobs]);
|
||||
|
||||
const filteredJobs = useMemo(() => {
|
||||
const normalizedSearch = searchTerm.trim().toLowerCase();
|
||||
|
||||
const nextJobs = jobs.filter((job) => {
|
||||
const matchesStatus = statusFilter === 'all' || job.status === statusFilter;
|
||||
|
||||
if (!matchesStatus) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!normalizedSearch) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const haystack = [job.name, job.businessType, job.city, job.address, job.keywords]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
.toLowerCase();
|
||||
|
||||
return haystack.includes(normalizedSearch);
|
||||
});
|
||||
|
||||
nextJobs.sort((left, right) => {
|
||||
if (sortOrder === 'results') {
|
||||
return right.totalResults - left.totalResults;
|
||||
}
|
||||
|
||||
const leftTime = new Date(left.createdAt).getTime();
|
||||
const rightTime = new Date(right.createdAt).getTime();
|
||||
|
||||
return sortOrder === 'oldest' ? leftTime - rightTime : rightTime - leftTime;
|
||||
});
|
||||
|
||||
return nextJobs;
|
||||
}, [jobs, searchTerm, sortOrder, statusFilter]);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-stone-500">Basic Results</p>
|
||||
<h2 className="mt-2 text-2xl font-bold text-stone-900">Basic research runs</h2>
|
||||
<p className="mt-2 text-sm text-stone-600">Filter the grid to find specific runs, select the ones you want, then send the full selection to the map.</p>
|
||||
</div>
|
||||
<div className="rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-600 shadow-sm">
|
||||
{filteredJobs.length} shown of {jobs.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm">
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_220px_220px]">
|
||||
<label className="space-y-2">
|
||||
<span className="flex items-center gap-2 text-sm font-semibold text-stone-700">
|
||||
<SearchIcon className="h-4 w-4 text-stone-400" />
|
||||
Search
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search by name, type, or location"
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2">
|
||||
<span className="flex items-center gap-2 text-sm font-semibold text-stone-700">
|
||||
<SlidersHorizontal className="h-4 w-4 text-stone-400" />
|
||||
Status
|
||||
</span>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value as JobStatusFilter)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
>
|
||||
{statusOptions.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2">
|
||||
<span className="text-sm font-semibold text-stone-700">Sort</span>
|
||||
<select
|
||||
value={sortOrder}
|
||||
onChange={(e) => setSortOrder(e.target.value as SortOption)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
>
|
||||
{sortOptions.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{selectedJobCount > 0 && (
|
||||
<div className="flex flex-col gap-3 border-t border-stone-100 pt-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-emerald-900">{selectedJobCount === 1 ? '1 research job selected' : `${selectedJobCount} research jobs selected`}</p>
|
||||
<p className="text-sm text-stone-600">Use the selection action to open all selected jobs together on the map.</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<button type="button" onClick={onShowSelectedOnMap} className="rounded-xl bg-emerald-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-emerald-700">
|
||||
Show selected on map ({selectedJobCount})
|
||||
</button>
|
||||
<button type="button" onClick={onClearSelection} className="rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm font-semibold text-stone-700 transition-all hover:bg-stone-50">
|
||||
Clear selection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <div className="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>}
|
||||
|
||||
{isLoadingHistory ? (
|
||||
<div className="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-5 text-sm text-stone-500 shadow-sm">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Loading research jobs...
|
||||
</div>
|
||||
) : filteredJobs.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-stone-300 bg-white p-10 text-center shadow-sm">
|
||||
<p className="text-lg font-semibold text-stone-900">No research jobs match the current filters.</p>
|
||||
<p className="mt-2 text-sm text-stone-500">Try adjusting the search term, status filter, or sort order.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{filteredJobs.map((job) => {
|
||||
const statusMeta = getStatusMeta(job.status);
|
||||
const isSelected = selectedJobIds.includes(job.id);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={job.id}
|
||||
aria-pressed={isSelected}
|
||||
onClick={() => onToggleJobSelection(job.id)}
|
||||
className={`group flex h-full flex-col rounded-2xl border p-5 text-left shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md ${
|
||||
isSelected ? 'border-emerald-400 bg-emerald-50/70 shadow-emerald-100' : 'border-stone-200 bg-white hover:border-emerald-400'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-lg font-bold text-stone-900 group-hover:text-emerald-700">{job.name}</p>
|
||||
<p className="mt-1 truncate text-sm text-stone-500">{job.businessType}</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-2">
|
||||
<span className={statusMeta.badgeClass}>
|
||||
<statusMeta.icon className={statusMeta.icon === Loader2 ? 'h-3.5 w-3.5 animate-spin' : 'h-3.5 w-3.5'} />
|
||||
{statusMeta.label}
|
||||
</span>
|
||||
<span className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold ${isSelected ? 'bg-emerald-600 text-white' : 'bg-stone-100 text-stone-500'}`}>
|
||||
{isSelected ? <Check className="h-3.5 w-3.5" /> : <span className="h-2 w-2 rounded-full bg-current opacity-60"></span>}
|
||||
{isSelected ? 'Selected' : 'Click to select'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-3 text-sm text-stone-600">
|
||||
<div className="flex items-start gap-2">
|
||||
<MapPin className="mt-0.5 h-4 w-4 flex-shrink-0 text-stone-400" />
|
||||
<span className="line-clamp-2">{formatLocation(job)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<CalendarDays className="h-4 w-4 flex-shrink-0 text-stone-400" />
|
||||
<span>{new Date(job.createdAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
|
||||
{job.keywords ? <p className="line-clamp-2 text-stone-500">Keywords: {job.keywords}</p> : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid grid-cols-2 gap-3 rounded-2xl bg-stone-50 p-4">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Radius</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{job.radiusKm} km</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Results</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{job.totalResults}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center justify-between border-t border-stone-100 pt-4 text-sm font-medium text-stone-500">
|
||||
<span>{job.totalResults === 1 ? '1 lead found' : `${job.totalResults} leads found`}</span>
|
||||
<span className={isSelected ? 'text-emerald-700' : 'text-stone-400'}>{isSelected ? 'Included in selection' : 'Available to select'}</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatLocation(job: SearchJob) {
|
||||
const primaryLocation = job.address || job.city || 'Location not available';
|
||||
return `${primaryLocation} (${job.radiusKm} km radius)`;
|
||||
}
|
||||
|
||||
function getStatusMeta(status: SearchJobStatus) {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return {
|
||||
label: 'Completed',
|
||||
icon: CheckCircle2,
|
||||
badgeClass: 'inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700',
|
||||
};
|
||||
case 'running':
|
||||
return {
|
||||
label: 'Running',
|
||||
icon: Loader2,
|
||||
badgeClass: 'inline-flex items-center gap-1 rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700',
|
||||
};
|
||||
case 'failed':
|
||||
return {
|
||||
label: 'Failed',
|
||||
icon: AlertCircle,
|
||||
badgeClass: 'inline-flex items-center gap-1 rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-semibold text-red-700',
|
||||
};
|
||||
case 'stopped':
|
||||
return {
|
||||
label: 'Stopped',
|
||||
icon: CircleOff,
|
||||
badgeClass: 'inline-flex items-center gap-1 rounded-full border border-stone-200 bg-stone-100 px-3 py-1 text-xs font-semibold text-stone-700',
|
||||
};
|
||||
case 'pending':
|
||||
default:
|
||||
return {
|
||||
label: 'Pending',
|
||||
icon: Clock3,
|
||||
badgeClass: 'inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700',
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import { AdvancedMarker, Map, Pin, useMap } from '@vis.gl/react-google-maps';
|
||||
import { Map, Marker, useMap } from '@vis.gl/react-google-maps';
|
||||
import type { DeepResearchPreview } from '../../shared/types';
|
||||
import { cleanMapOptions } from '../lib/map-styles';
|
||||
|
||||
interface DeepResearchPreviewMapProps {
|
||||
pin: google.maps.LatLngLiteral | null;
|
||||
@@ -29,22 +30,29 @@ export function DeepResearchPreviewMap({ pin, preview, onPinChange }: DeepResear
|
||||
<Map
|
||||
defaultCenter={defaultCenter}
|
||||
defaultZoom={5}
|
||||
mapId="DEMO_MAP_ID"
|
||||
{...({ internalUsageAttributionIds: ['gmp_mcp_codeassist_v1_aistudio'] } as Record<string, unknown>)}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
gestureHandling="greedy"
|
||||
{...cleanMapOptions}
|
||||
onClick={(event) => {
|
||||
const latLng = event.detail.latLng;
|
||||
if (latLng) {
|
||||
onPinChange(latLng);
|
||||
}
|
||||
}}
|
||||
>
|
||||
>
|
||||
<PreviewOverlay overlay={preview?.overlay ?? null} pin={pin} preview={preview} />
|
||||
{pin && (
|
||||
<AdvancedMarker position={pin}>
|
||||
<Pin background="#059669" glyphColor="#fff" borderColor="#064e3b" />
|
||||
</AdvancedMarker>
|
||||
<Marker
|
||||
position={pin}
|
||||
icon={{
|
||||
path: google.maps.SymbolPath.CIRCLE,
|
||||
fillColor: '#059669',
|
||||
fillOpacity: 1,
|
||||
strokeColor: '#064e3b',
|
||||
strokeWeight: 2,
|
||||
scale: 7,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Map>
|
||||
|
||||
@@ -97,6 +105,12 @@ function PreviewOverlay({
|
||||
return;
|
||||
}
|
||||
|
||||
if (pin && (!preview || preview.areas.length === 0)) {
|
||||
map.panTo(pin);
|
||||
map.setZoom(15);
|
||||
return;
|
||||
}
|
||||
|
||||
const bounds = new google.maps.LatLngBounds();
|
||||
let hasBounds = false;
|
||||
|
||||
@@ -113,7 +127,7 @@ function PreviewOverlay({
|
||||
});
|
||||
|
||||
if (hasBounds) {
|
||||
map.fitBounds(bounds, 60);
|
||||
map.fitBounds(bounds, 40);
|
||||
}
|
||||
}, [map, pin, preview]);
|
||||
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import type { DeepResearchBatchSummary } from '../../shared/types';
|
||||
import { getDeepResearchBatch, listDeepResearchBatches } from '../lib/database';
|
||||
|
||||
interface DeepResearchResultsViewProps {
|
||||
onShowBatchOnMap: (jobIds: string[]) => void;
|
||||
}
|
||||
|
||||
export function DeepResearchResultsView({ onShowBatchOnMap }: DeepResearchResultsViewProps) {
|
||||
const [batches, setBatches] = useState<DeepResearchBatchSummary[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isLoadingBatches, setIsLoadingBatches] = useState(true);
|
||||
const [activeBatchId, setActiveBatchId] = useState<string | null>(null);
|
||||
|
||||
const refreshBatches = useCallback(async () => {
|
||||
setIsLoadingBatches(true);
|
||||
|
||||
try {
|
||||
const nextBatches = await listDeepResearchBatches();
|
||||
setBatches(nextBatches);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load deep research history.');
|
||||
} finally {
|
||||
setIsLoadingBatches(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void refreshBatches();
|
||||
}, [refreshBatches]);
|
||||
|
||||
const handleOpenBatchOnMap = async (batchId: string) => {
|
||||
setActiveBatchId(batchId);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const batch = await getDeepResearchBatch(batchId);
|
||||
if (batch.jobIds.length === 0) {
|
||||
setError('This deep research batch does not have child jobs yet.');
|
||||
return;
|
||||
}
|
||||
|
||||
onShowBatchOnMap(batch.jobIds);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load batch details.');
|
||||
} finally {
|
||||
setActiveBatchId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-stone-500">Deep Research Results</p>
|
||||
<h2 className="mt-2 text-2xl font-bold text-stone-900">Previous deep research batches</h2>
|
||||
<p className="mt-2 text-sm text-stone-600">Review completed or failed batch runs and open their bundled map results.</p>
|
||||
</div>
|
||||
<div className="rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-600 shadow-sm">
|
||||
{batches.length} batches
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>}
|
||||
|
||||
{isLoadingBatches ? (
|
||||
<div className="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-5 text-sm text-stone-500 shadow-sm">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Loading deep research batches...
|
||||
</div>
|
||||
) : batches.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-stone-300 bg-white p-10 text-center shadow-sm">
|
||||
<p className="text-lg font-semibold text-stone-900">No deep research batches yet.</p>
|
||||
<p className="mt-2 text-sm text-stone-500">Preview a pin on the map and run your first deep research batch.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
|
||||
{batches.map((batch) => (
|
||||
<div key={batch.id} className="rounded-2xl border border-stone-200 bg-white p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-lg font-bold text-stone-900">{batch.businessType}</p>
|
||||
<p className="mt-1 text-sm text-stone-500">{batch.basePostalCode ? `${batch.basePostalCode} · ${batch.countryCode ?? 'N/A'}` : 'Base postal area unavailable'}</p>
|
||||
</div>
|
||||
<span className={`rounded-full px-3 py-1 text-xs font-semibold ${statusBadgeClass(batch.status)}`}>{batch.status}</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-3 rounded-2xl bg-stone-50 p-4 text-sm text-stone-600">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Propagation</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{batch.propagation}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Postal Areas</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{batch.totalPostalAreas}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Child Jobs</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{batch.childJobCount}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Leads</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{batch.totalResults}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{batch.keywords && <p className="mt-4 text-sm text-stone-500">Keywords: {batch.keywords}</p>}
|
||||
|
||||
<div className="mt-4 flex items-center justify-between border-t border-stone-100 pt-4 text-sm text-stone-500">
|
||||
<span>Created {new Date(batch.createdAt).toLocaleDateString()}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleOpenBatchOnMap(batch.id)}
|
||||
disabled={activeBatchId === batch.id}
|
||||
className="rounded-xl bg-emerald-600 px-4 py-2 font-semibold text-white transition-all hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{activeBatchId === batch.id ? 'Loading...' : 'Show bundle on map'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function statusBadgeClass(status: DeepResearchBatchSummary['status']) {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'bg-emerald-100 text-emerald-800';
|
||||
case 'failed':
|
||||
return 'bg-red-100 text-red-700';
|
||||
case 'running':
|
||||
return 'bg-sky-100 text-sky-700';
|
||||
case 'stopped':
|
||||
return 'bg-stone-200 text-stone-700';
|
||||
case 'pending':
|
||||
default:
|
||||
return 'bg-amber-100 text-amber-700';
|
||||
}
|
||||
}
|
||||
@@ -1,43 +1,23 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { AlertCircle, Crosshair, Loader2, MapPinned, Sparkles } from 'lucide-react';
|
||||
import type { DeepResearchBatchSummary, DeepResearchPreview } from '../../shared/types';
|
||||
import { createDeepResearchBatch, getDeepResearchBatch, listDeepResearchBatches, previewDeepResearch } from '../lib/database';
|
||||
import type { DeepResearchPreview } from '../../shared/types';
|
||||
import { createDeepResearchBatch, previewDeepResearch } from '../lib/database';
|
||||
import { DeepResearchPreviewMap } from './DeepResearchPreviewMap';
|
||||
|
||||
interface DeepResearchViewProps {
|
||||
onShowBatchOnMap: (jobIds: string[]) => void;
|
||||
topContent?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function DeepResearchView({ onShowBatchOnMap }: DeepResearchViewProps) {
|
||||
export function DeepResearchView({ onShowBatchOnMap, topContent }: DeepResearchViewProps) {
|
||||
const [pin, setPin] = useState<google.maps.LatLngLiteral | null>(null);
|
||||
const [businessType, setBusinessType] = useState('');
|
||||
const [keywords, setKeywords] = useState('');
|
||||
const [propagation, setPropagation] = useState(1);
|
||||
const [preview, setPreview] = useState<DeepResearchPreview | null>(null);
|
||||
const [batches, setBatches] = useState<DeepResearchBatchSummary[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [previewError, setPreviewError] = useState<string | null>(null);
|
||||
const [isPreviewing, setIsPreviewing] = useState(false);
|
||||
const [isRunning, setIsRunning] = useState(false);
|
||||
const [isLoadingBatches, setIsLoadingBatches] = useState(true);
|
||||
const [activeBatchId, setActiveBatchId] = useState<string | null>(null);
|
||||
|
||||
const refreshBatches = useCallback(async () => {
|
||||
setIsLoadingBatches(true);
|
||||
|
||||
try {
|
||||
const nextBatches = await listDeepResearchBatches();
|
||||
setBatches(nextBatches);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load deep research history.');
|
||||
} finally {
|
||||
setIsLoadingBatches(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void refreshBatches();
|
||||
}, [refreshBatches]);
|
||||
|
||||
useEffect(() => {
|
||||
setPreview(null);
|
||||
@@ -97,41 +77,21 @@ export function DeepResearchView({ onShowBatchOnMap }: DeepResearchViewProps) {
|
||||
keywords: keywords.trim() || undefined,
|
||||
});
|
||||
|
||||
setActiveBatchId(batch.id);
|
||||
await refreshBatches();
|
||||
if (batch.jobIds.length > 0) {
|
||||
onShowBatchOnMap(batch.jobIds);
|
||||
}
|
||||
} catch (err) {
|
||||
setPreviewError(err instanceof Error ? err.message : 'Failed to run deep research.');
|
||||
} finally {
|
||||
setActiveBatchId(null);
|
||||
setIsRunning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenBatchOnMap = async (batchId: string) => {
|
||||
setActiveBatchId(batchId);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const batch = await getDeepResearchBatch(batchId);
|
||||
if (batch.jobIds.length === 0) {
|
||||
setError('This deep research batch does not have child jobs yet.');
|
||||
return;
|
||||
}
|
||||
|
||||
onShowBatchOnMap(batch.jobIds);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load batch details.');
|
||||
} finally {
|
||||
setActiveBatchId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto bg-stone-50 p-6 sm:p-8">
|
||||
<div className="mx-auto max-w-7xl space-y-8">
|
||||
{topContent}
|
||||
|
||||
<header className="space-y-2">
|
||||
<h1 className="text-3xl font-bold text-stone-900">Deep Research</h1>
|
||||
<p className="max-w-3xl text-stone-600">
|
||||
@@ -272,101 +232,7 @@ export function DeepResearchView({ onShowBatchOnMap }: DeepResearchViewProps) {
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-5">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-stone-500">Deep Research History</p>
|
||||
<h2 className="mt-2 text-2xl font-bold text-stone-900">Previous deep research batches</h2>
|
||||
<p className="mt-2 text-sm text-stone-600">Review completed or failed batch runs and open their bundled map results.</p>
|
||||
</div>
|
||||
<div className="rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-600 shadow-sm">
|
||||
{batches.length} batches
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>}
|
||||
|
||||
{isLoadingBatches ? (
|
||||
<div className="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-5 text-sm text-stone-500 shadow-sm">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Loading deep research batches...
|
||||
</div>
|
||||
) : batches.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-stone-300 bg-white p-10 text-center shadow-sm">
|
||||
<p className="text-lg font-semibold text-stone-900">No deep research batches yet.</p>
|
||||
<p className="mt-2 text-sm text-stone-500">Preview a pin on the map and run your first deep research batch.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
|
||||
{batches.map((batch) => (
|
||||
<div key={batch.id} className="rounded-2xl border border-stone-200 bg-white p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-lg font-bold text-stone-900">{batch.businessType}</p>
|
||||
<p className="mt-1 text-sm text-stone-500">
|
||||
{batch.basePostalCode ? `${batch.basePostalCode} · ${batch.countryCode ?? 'N/A'}` : 'Base postal area unavailable'}
|
||||
</p>
|
||||
</div>
|
||||
<span className={`rounded-full px-3 py-1 text-xs font-semibold ${statusBadgeClass(batch.status)}`}>
|
||||
{batch.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-3 rounded-2xl bg-stone-50 p-4 text-sm text-stone-600">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Propagation</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{batch.propagation}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Postal Areas</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{batch.totalPostalAreas}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Child Jobs</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{batch.childJobCount}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Leads</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{batch.totalResults}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{batch.keywords && <p className="mt-4 text-sm text-stone-500">Keywords: {batch.keywords}</p>}
|
||||
|
||||
<div className="mt-4 flex items-center justify-between border-t border-stone-100 pt-4 text-sm text-stone-500">
|
||||
<span>Created {new Date(batch.createdAt).toLocaleDateString()}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleOpenBatchOnMap(batch.id)}
|
||||
disabled={activeBatchId === batch.id}
|
||||
className="rounded-xl bg-emerald-600 px-4 py-2 font-semibold text-white transition-all hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{activeBatchId === batch.id ? 'Loading...' : 'Show bundle on map'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function statusBadgeClass(status: DeepResearchBatchSummary['status']) {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'bg-emerald-100 text-emerald-800';
|
||||
case 'failed':
|
||||
return 'bg-red-100 text-red-700';
|
||||
case 'running':
|
||||
return 'bg-sky-100 text-sky-700';
|
||||
case 'stopped':
|
||||
return 'bg-stone-200 text-stone-700';
|
||||
case 'pending':
|
||||
default:
|
||||
return 'bg-amber-100 text-amber-700';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import { Search, LayoutDashboard, Map as MapIcon, LogOut, Briefcase, MapPinned } from 'lucide-react';
|
||||
import { Search, LayoutDashboard, Map as MapIcon, LogOut, Briefcase, Files } from 'lucide-react';
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import type { AppUser } from '../../shared/types';
|
||||
import { getUserAvatarUrl, getUserDisplayName } from '../lib/auth';
|
||||
|
||||
export type AppTab = 'setup' | 'deepResearch' | 'dashboard' | 'map';
|
||||
export type AppTab = 'setup' | 'results' | 'dashboard' | 'map';
|
||||
|
||||
function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
@@ -25,7 +25,7 @@ export function Layout({ user, activeTab, setActiveTab, onLogout, children }: La
|
||||
|
||||
const navigation = [
|
||||
{ id: 'setup', name: 'Research', icon: Search },
|
||||
{ id: 'deepResearch', name: 'Deep Research', icon: MapPinned },
|
||||
{ id: 'results', name: 'Results', icon: Files },
|
||||
{ id: 'dashboard', name: 'Dashboard', icon: LayoutDashboard },
|
||||
{ id: 'map', name: 'Map View', icon: MapIcon },
|
||||
] as const;
|
||||
|
||||
+13
-11
@@ -1,7 +1,8 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Map, AdvancedMarker, InfoWindow, Pin, useMap } from '@vis.gl/react-google-maps';
|
||||
import { InfoWindow, Map, Marker, useMap } from '@vis.gl/react-google-maps';
|
||||
import { Globe, Loader2, MapPin, Navigation, Phone, Star } from 'lucide-react';
|
||||
import { listBusinesses, listBusinessesForJobs } from '../lib/database';
|
||||
import { cleanMapOptions } from '../lib/map-styles';
|
||||
import type { Business } from '../types';
|
||||
import type { AppUser } from '../../shared/types';
|
||||
|
||||
@@ -127,24 +128,25 @@ export function MapView({ user, jobIds }: MapViewProps) {
|
||||
<Map
|
||||
defaultCenter={center}
|
||||
defaultZoom={12}
|
||||
mapId="DEMO_MAP_ID"
|
||||
{...({ internalUsageAttributionIds: ['gmp_mcp_codeassist_v1_aistudio'] } as Record<string, unknown>)}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
gestureHandling="greedy"
|
||||
{...cleanMapOptions}
|
||||
>
|
||||
{businesses.map((business) =>
|
||||
typeof business.latitude === 'number' && typeof business.longitude === 'number' ? (
|
||||
<AdvancedMarker
|
||||
<Marker
|
||||
key={business.id}
|
||||
position={{ lat: business.latitude, lng: business.longitude }}
|
||||
onClick={() => setSelected(business)}
|
||||
>
|
||||
<Pin
|
||||
background={selected?.id === business.id ? '#059669' : '#10b981'}
|
||||
glyphColor="#fff"
|
||||
borderColor={selected?.id === business.id ? '#064e3b' : '#065f46'}
|
||||
/>
|
||||
</AdvancedMarker>
|
||||
icon={{
|
||||
path: google.maps.SymbolPath.CIRCLE,
|
||||
fillColor: selected?.id === business.id ? '#059669' : '#10b981',
|
||||
fillOpacity: 1,
|
||||
strokeColor: selected?.id === business.id ? '#064e3b' : '#065f46',
|
||||
strokeWeight: 2,
|
||||
scale: selected?.id === business.id ? 8 : 7,
|
||||
}}
|
||||
/>
|
||||
) : null,
|
||||
)}
|
||||
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import React, { useState } from 'react';
|
||||
import { MapPinned, Search } from 'lucide-react';
|
||||
import type { AppUser } from '../../shared/types';
|
||||
import { DeepResearchView } from './DeepResearchView';
|
||||
import { SearchSetup } from './SearchSetup';
|
||||
|
||||
type ResearchTab = 'research' | 'deepResearch';
|
||||
|
||||
interface ResearchWorkspaceProps {
|
||||
user: AppUser;
|
||||
selectedJobIds: string[];
|
||||
onToggleJobSelection: (jobId: string) => void;
|
||||
onSelectCreatedJob: (jobId: string) => void;
|
||||
onShowSelectedOnMap: () => void;
|
||||
onClearSelection: () => void;
|
||||
onShowBatchOnMap: (jobIds: string[]) => void;
|
||||
}
|
||||
|
||||
export function ResearchWorkspace({
|
||||
user,
|
||||
selectedJobIds,
|
||||
onToggleJobSelection,
|
||||
onSelectCreatedJob,
|
||||
onShowSelectedOnMap,
|
||||
onClearSelection,
|
||||
onShowBatchOnMap,
|
||||
}: ResearchWorkspaceProps) {
|
||||
const [activeTab, setActiveTab] = useState<ResearchTab>('research');
|
||||
|
||||
const tabs = (
|
||||
<div className="sticky top-0 z-20 -mx-2 bg-stone-50/95 px-2 pb-2 pt-1 backdrop-blur-sm">
|
||||
<div className="rounded-3xl border border-stone-200 bg-white p-2 shadow-sm">
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
{[
|
||||
{
|
||||
id: 'research' as const,
|
||||
label: 'Basic',
|
||||
icon: Search,
|
||||
},
|
||||
{
|
||||
id: 'deepResearch' as const,
|
||||
label: 'Deep Research',
|
||||
icon: MapPinned,
|
||||
},
|
||||
].map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`flex items-center justify-center gap-2 rounded-2xl px-4 py-3 text-sm font-semibold transition-all ${
|
||||
activeTab === tab.id
|
||||
? 'bg-emerald-50 text-emerald-700 shadow-sm'
|
||||
: 'text-stone-600 hover:bg-stone-50 hover:text-stone-900'
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="h-4 w-4" />
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return activeTab === 'research' ? (
|
||||
<SearchSetup
|
||||
user={user}
|
||||
onSelectCreatedJob={onSelectCreatedJob}
|
||||
topContent={tabs}
|
||||
/>
|
||||
) : (
|
||||
<DeepResearchView onShowBatchOnMap={onShowBatchOnMap} topContent={tabs} />
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Files, MapPinned } from 'lucide-react';
|
||||
import type { AppUser } from '../../shared/types';
|
||||
import { BasicResultsView } from './BasicResultsView';
|
||||
import { DeepResearchResultsView } from './DeepResearchResultsView';
|
||||
|
||||
type ResultsTab = 'basic' | 'deepResearch';
|
||||
|
||||
interface ResultsWorkspaceProps {
|
||||
user: AppUser;
|
||||
selectedJobIds: string[];
|
||||
onToggleJobSelection: (jobId: string) => void;
|
||||
onShowSelectedOnMap: () => void;
|
||||
onClearSelection: () => void;
|
||||
onShowBatchOnMap: (jobIds: string[]) => void;
|
||||
}
|
||||
|
||||
export function ResultsWorkspace({ user, selectedJobIds, onToggleJobSelection, onShowSelectedOnMap, onClearSelection, onShowBatchOnMap }: ResultsWorkspaceProps) {
|
||||
const [activeTab, setActiveTab] = useState<ResultsTab>('basic');
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto bg-stone-50 p-6 sm:p-8">
|
||||
<div className="mx-auto max-w-7xl space-y-8">
|
||||
<div className="sticky top-0 z-20 -mx-2 bg-stone-50/95 px-2 pb-2 pt-1 backdrop-blur-sm">
|
||||
<div className="rounded-3xl border border-stone-200 bg-white p-2 shadow-sm">
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
{[
|
||||
{ id: 'basic' as const, label: 'Basic', icon: Files },
|
||||
{ id: 'deepResearch' as const, label: 'Deep Research', icon: MapPinned },
|
||||
].map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`flex items-center justify-center gap-2 rounded-2xl px-4 py-3 text-sm font-semibold transition-all ${
|
||||
activeTab === tab.id ? 'bg-emerald-50 text-emerald-700 shadow-sm' : 'text-stone-600 hover:bg-stone-50 hover:text-stone-900'
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="h-4 w-4" />
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header className="space-y-2">
|
||||
<h1 className="text-3xl font-bold text-stone-900">Results</h1>
|
||||
<p className="max-w-3xl text-stone-600">Browse previous Basic and Deep Research runs, select items, and send them to the map when needed.</p>
|
||||
</header>
|
||||
|
||||
{activeTab === 'basic' ? (
|
||||
<BasicResultsView
|
||||
user={user}
|
||||
selectedJobIds={selectedJobIds}
|
||||
onToggleJobSelection={onToggleJobSelection}
|
||||
onShowSelectedOnMap={onShowSelectedOnMap}
|
||||
onClearSelection={onClearSelection}
|
||||
/>
|
||||
) : (
|
||||
<DeepResearchResultsView onShowBatchOnMap={onShowBatchOnMap} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+138
-402
@@ -1,139 +1,59 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
AlertCircle,
|
||||
CalendarDays,
|
||||
Check,
|
||||
CheckCircle2,
|
||||
CircleOff,
|
||||
Clock3,
|
||||
Loader2,
|
||||
MapPin,
|
||||
Play,
|
||||
Search as SearchIcon,
|
||||
SlidersHorizontal,
|
||||
} from 'lucide-react';
|
||||
import { listSearchJobs, runSearch } from '../lib/database';
|
||||
import type { SearchJob, SearchJobStatus } from '../types';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { AlertCircle, LocateFixed, Loader2, MapPin, Play } from 'lucide-react';
|
||||
import { runSearch } from '../lib/database';
|
||||
import type { AppUser } from '../../shared/types';
|
||||
import { BasicResearchMap } from './BasicResearchMap';
|
||||
|
||||
interface SearchSetupProps {
|
||||
user: AppUser;
|
||||
selectedJobIds: string[];
|
||||
onToggleJobSelection: (jobId: string) => void;
|
||||
onSelectCreatedJob: (jobId: string) => void;
|
||||
onShowSelectedOnMap: () => void;
|
||||
onClearSelection: () => void;
|
||||
topContent?: React.ReactNode;
|
||||
}
|
||||
|
||||
type JobStatusFilter = 'all' | SearchJobStatus;
|
||||
type SortOption = 'newest' | 'oldest' | 'results';
|
||||
|
||||
const statusOptions: Array<{ value: JobStatusFilter; label: string }> = [
|
||||
{ value: 'all', label: 'All statuses' },
|
||||
{ value: 'pending', label: 'Pending' },
|
||||
{ value: 'running', label: 'Running' },
|
||||
{ value: 'completed', label: 'Completed' },
|
||||
{ value: 'failed', label: 'Failed' },
|
||||
{ value: 'stopped', label: 'Stopped' },
|
||||
];
|
||||
|
||||
const sortOptions: Array<{ value: SortOption; label: string }> = [
|
||||
{ value: 'newest', label: 'Newest first' },
|
||||
{ value: 'oldest', label: 'Oldest first' },
|
||||
{ value: 'results', label: 'Most results' },
|
||||
];
|
||||
|
||||
export function SearchSetup({
|
||||
user,
|
||||
selectedJobIds,
|
||||
onToggleJobSelection,
|
||||
user: _user,
|
||||
onSelectCreatedJob,
|
||||
onShowSelectedOnMap,
|
||||
onClearSelection,
|
||||
topContent,
|
||||
}: SearchSetupProps) {
|
||||
const [name, setName] = useState('');
|
||||
const [location, setLocation] = useState('');
|
||||
const [radius, setRadius] = useState(5);
|
||||
const [businessType, setBusinessType] = useState('');
|
||||
const [keywords, setKeywords] = useState('');
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<JobStatusFilter>('all');
|
||||
const [sortOrder, setSortOrder] = useState<SortOption>('newest');
|
||||
const [pin, setPin] = useState<google.maps.LatLngLiteral | null>(null);
|
||||
const [locationError, setLocationError] = useState<string | null>(null);
|
||||
const [locationAction, setLocationAction] = useState<'geolocate' | null>(null);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [isLoadingHistory, setIsLoadingHistory] = useState(true);
|
||||
const [jobs, setJobs] = useState<SearchJob[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const selectedJobCount = selectedJobIds.length;
|
||||
|
||||
const refreshJobs = useCallback(async () => {
|
||||
setIsLoadingHistory(true);
|
||||
|
||||
try {
|
||||
const nextJobs = await listSearchJobs(user.id, 100);
|
||||
setJobs(nextJobs);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load research jobs.');
|
||||
} finally {
|
||||
setIsLoadingHistory(false);
|
||||
}
|
||||
}, [user.id]);
|
||||
|
||||
useEffect(() => {
|
||||
void refreshJobs();
|
||||
}, [refreshJobs]);
|
||||
|
||||
const filteredJobs = useMemo(() => {
|
||||
const normalizedSearch = searchTerm.trim().toLowerCase();
|
||||
|
||||
const nextJobs = jobs.filter((job) => {
|
||||
const matchesStatus = statusFilter === 'all' || job.status === statusFilter;
|
||||
|
||||
if (!matchesStatus) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!normalizedSearch) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const haystack = [job.name, job.businessType, job.city, job.address, job.keywords]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
.toLowerCase();
|
||||
|
||||
return haystack.includes(normalizedSearch);
|
||||
});
|
||||
|
||||
nextJobs.sort((left, right) => {
|
||||
if (sortOrder === 'results') {
|
||||
return right.totalResults - left.totalResults;
|
||||
}
|
||||
|
||||
const leftTime = new Date(left.createdAt).getTime();
|
||||
const rightTime = new Date(right.createdAt).getTime();
|
||||
|
||||
return sortOrder === 'oldest' ? leftTime - rightTime : rightTime - leftTime;
|
||||
});
|
||||
|
||||
return nextJobs;
|
||||
}, [jobs, searchTerm, sortOrder, statusFilter]);
|
||||
const applyPin = useCallback(async (nextPin: google.maps.LatLngLiteral) => {
|
||||
setPin(nextPin);
|
||||
setLocationError(null);
|
||||
}, []);
|
||||
|
||||
const handleRunSearch = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsSearching(true);
|
||||
setError(null);
|
||||
setLocationError(null);
|
||||
|
||||
try {
|
||||
const response = await runSearch({
|
||||
if (!pin) {
|
||||
setLocationError('Drop a pin on the map or use your current location before running research.');
|
||||
setIsSearching(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await runSearch({
|
||||
name: name.trim() || undefined,
|
||||
location: location.trim(),
|
||||
location: `${pin.lat.toFixed(5)}, ${pin.lng.toFixed(5)}`,
|
||||
radiusKm: radius,
|
||||
businessType: businessType.trim(),
|
||||
keywords: keywords.trim() || undefined,
|
||||
});
|
||||
lat: pin.lat,
|
||||
lng: pin.lng,
|
||||
});
|
||||
|
||||
await refreshJobs();
|
||||
onSelectCreatedJob(response.job.id);
|
||||
onSelectCreatedJob(response.job.id);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Research failed.');
|
||||
} finally {
|
||||
@@ -141,53 +61,56 @@ export function SearchSetup({
|
||||
}
|
||||
};
|
||||
|
||||
const handleUseMyLocation = () => {
|
||||
setLocationAction('geolocate');
|
||||
setLocationError(null);
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
async (position) => {
|
||||
try {
|
||||
await applyPin({
|
||||
lat: position.coords.latitude,
|
||||
lng: position.coords.longitude,
|
||||
});
|
||||
} catch (err) {
|
||||
setLocationError(err instanceof Error ? err.message : 'Failed to use your current location.');
|
||||
} finally {
|
||||
setLocationAction(null);
|
||||
}
|
||||
},
|
||||
(geoError) => {
|
||||
setLocationError(geoError.message || 'Location access was denied.');
|
||||
setLocationAction(null);
|
||||
},
|
||||
{ enableHighAccuracy: true, timeout: 10000 },
|
||||
);
|
||||
};
|
||||
|
||||
const hasLocationPin = Boolean(pin);
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto bg-stone-50 p-6 sm:p-8">
|
||||
<div className="mx-auto max-w-7xl space-y-8">
|
||||
{topContent}
|
||||
|
||||
<header className="space-y-2">
|
||||
<h1 className="text-3xl font-bold text-stone-900">Research</h1>
|
||||
<h1 className="text-3xl font-bold text-stone-900">Basic Research</h1>
|
||||
<p className="max-w-3xl text-stone-600">
|
||||
Run new research from the form below, then browse every job in a single grid with filters and quick access to map results.
|
||||
Drop a pin on the map, define the search area, and run standard research before reviewing saved jobs below.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section className="rounded-3xl border border-stone-200 bg-white p-6 shadow-sm sm:p-8">
|
||||
<div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Research Form</p>
|
||||
<h2 className="mt-2 text-2xl font-bold text-stone-900">Start a new research run</h2>
|
||||
<p className="mt-2 max-w-2xl text-sm text-stone-600">
|
||||
Each run is processed through the local research API, then saved so you can review it later from the dashboard or map view.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleRunSearch} className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-4">
|
||||
<div className="space-y-2 xl:col-span-2">
|
||||
<label className="text-sm font-semibold text-stone-700">Location</label>
|
||||
<div className="relative">
|
||||
<MapPin className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone-400" />
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="City, address, or zip"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 py-3 pl-10 pr-4 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="grid grid-cols-1 items-stretch gap-6 xl:grid-cols-[400px_minmax(0,1fr)]">
|
||||
<div className="rounded-3xl border border-stone-200 bg-white p-5 shadow-sm sm:p-7">
|
||||
<form onSubmit={handleRunSearch} className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold text-stone-700">Radius (km)</label>
|
||||
<label className="text-sm font-semibold text-stone-700">Research Name</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="50"
|
||||
value={radius}
|
||||
onChange={(e) => setRadius(Number.parseInt(e.target.value, 10) || 1)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
type="text"
|
||||
placeholder="Give this research a memorable name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -199,289 +122,102 @@ export function SearchSetup({
|
||||
placeholder="e.g. coffee shop, plumber"
|
||||
value={businessType}
|
||||
onChange={(e) => setBusinessType(e.target.value)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 xl:col-span-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold text-stone-700">Keywords</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. organic, emergency, family-owned"
|
||||
value={keywords}
|
||||
onChange={(e) => setKeywords(e.target.value)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 xl:col-span-2">
|
||||
<label className="text-sm font-semibold text-stone-700">Research Name</label>
|
||||
<div className="space-y-2.5">
|
||||
<label className="text-sm font-semibold text-stone-700">Location Source</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleUseMyLocation}
|
||||
disabled={locationAction !== null}
|
||||
className="inline-flex items-center gap-2 rounded-xl border border-stone-200 bg-white px-4 py-2.5 text-sm font-semibold text-stone-700 transition hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<LocateFixed className="h-4 w-4" />
|
||||
{locationAction === 'geolocate' ? 'Locating...' : 'Use my location'}
|
||||
</button>
|
||||
|
||||
{locationError && (
|
||||
<div className="flex items-center gap-3 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">
|
||||
<AlertCircle className="h-5 w-5 flex-shrink-0" />
|
||||
<span>{locationError}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold text-stone-700">Area (km radius)</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Give this research a memorable name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
type="number"
|
||||
min="1"
|
||||
max="50"
|
||||
value={radius}
|
||||
onChange={(e) => setRadius(Number.parseInt(e.target.value, 10) || 1)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm text-stone-600">
|
||||
Research runs now go through the local API, so the browser no longer writes leads directly into the database.
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-3 rounded-xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">
|
||||
<AlertCircle className="h-5 w-5 flex-shrink-0" />
|
||||
<span>{error}</span>
|
||||
<div className="rounded-xl border border-stone-200 bg-stone-50 px-4 py-2.5 text-sm text-stone-600">
|
||||
Drop a pin directly on the map or use your current location. The map circle always reflects the current area value.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSearching}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 py-3 font-semibold text-white shadow-sm transition-all hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto sm:px-8"
|
||||
>
|
||||
{isSearching ? (
|
||||
<>
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
Running Research...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="h-5 w-5" />
|
||||
Run Research
|
||||
</>
|
||||
{hasLocationPin && (
|
||||
<div className="rounded-2xl border border-emerald-200 bg-emerald-50/70 p-3.5 text-sm text-emerald-900">
|
||||
<p className="font-semibold">Active search center</p>
|
||||
<p className="mt-1">{pin!.lat.toFixed(5)}, {pin!.lng.toFixed(5)}</p>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="space-y-5">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-stone-500">Research Jobs</p>
|
||||
<h2 className="mt-2 text-2xl font-bold text-stone-900">All research runs</h2>
|
||||
{error && (
|
||||
<div className="flex items-center gap-3 rounded-xl border border-red-100 bg-red-50 p-3.5 text-sm text-red-700">
|
||||
<AlertCircle className="h-5 w-5 flex-shrink-0" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSearching}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 py-3 font-semibold text-white shadow-sm transition-all hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto sm:px-8"
|
||||
>
|
||||
{isSearching ? (
|
||||
<>
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
Running Research...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="h-5 w-5" />
|
||||
Run Research
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="flex h-full flex-col gap-4">
|
||||
<BasicResearchMap pin={pin} radiusKm={radius} onPinChange={(nextPin) => void applyPin(nextPin)} />
|
||||
<div className="rounded-3xl border border-stone-200 bg-white p-5 shadow-sm">
|
||||
<h3 className="text-lg font-bold text-stone-900">Map controls</h3>
|
||||
<p className="mt-2 text-sm text-stone-600">
|
||||
Filter the grid to find specific runs, select the ones you want, then send the full selection to the map.
|
||||
Drop a pin directly on the map or use your current location. The circle updates from the Area field and the search runs from the active pin.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-full border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-600 shadow-sm">
|
||||
{filteredJobs.length} shown of {jobs.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 rounded-2xl border border-stone-200 bg-white p-4 shadow-sm">
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_220px_220px]">
|
||||
<label className="space-y-2">
|
||||
<span className="flex items-center gap-2 text-sm font-semibold text-stone-700">
|
||||
<SearchIcon className="h-4 w-4 text-stone-400" />
|
||||
Search
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search by name, type, or location"
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2">
|
||||
<span className="flex items-center gap-2 text-sm font-semibold text-stone-700">
|
||||
<SlidersHorizontal className="h-4 w-4 text-stone-400" />
|
||||
Status
|
||||
</span>
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value as JobStatusFilter)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
>
|
||||
{statusOptions.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="space-y-2">
|
||||
<span className="text-sm font-semibold text-stone-700">Sort</span>
|
||||
<select
|
||||
value={sortOrder}
|
||||
onChange={(e) => setSortOrder(e.target.value as SortOption)}
|
||||
className="w-full rounded-xl border border-stone-200 bg-stone-50 px-4 py-3 outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
||||
>
|
||||
{sortOptions.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{selectedJobCount > 0 && (
|
||||
<div className="flex flex-col gap-3 border-t border-stone-100 pt-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-emerald-900">
|
||||
{selectedJobCount === 1 ? '1 research job selected' : `${selectedJobCount} research jobs selected`}
|
||||
</p>
|
||||
<p className="text-sm text-stone-600">Use the selection action to open all selected jobs together on the map.</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onShowSelectedOnMap}
|
||||
className="rounded-xl bg-emerald-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-emerald-700"
|
||||
>
|
||||
Show selected on map ({selectedJobCount})
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClearSelection}
|
||||
className="rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm font-semibold text-stone-700 transition-all hover:bg-stone-50"
|
||||
>
|
||||
Clear selection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isLoadingHistory ? (
|
||||
<div className="flex items-center gap-3 rounded-2xl border border-stone-200 bg-white p-5 text-sm text-stone-500 shadow-sm">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Loading research jobs...
|
||||
</div>
|
||||
) : filteredJobs.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-stone-300 bg-white p-10 text-center shadow-sm">
|
||||
<p className="text-lg font-semibold text-stone-900">No research jobs match the current filters.</p>
|
||||
<p className="mt-2 text-sm text-stone-500">Try adjusting the search term, status filter, or sort order.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{filteredJobs.map((job) => {
|
||||
const statusMeta = getStatusMeta(job.status);
|
||||
const isSelected = selectedJobIds.includes(job.id);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={job.id}
|
||||
aria-pressed={isSelected}
|
||||
onClick={() => onToggleJobSelection(job.id)}
|
||||
className={`group flex h-full flex-col rounded-2xl border p-5 text-left shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md ${
|
||||
isSelected
|
||||
? 'border-emerald-400 bg-emerald-50/70 shadow-emerald-100'
|
||||
: 'border-stone-200 bg-white hover:border-emerald-400'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-lg font-bold text-stone-900 group-hover:text-emerald-700">{job.name}</p>
|
||||
<p className="mt-1 truncate text-sm text-stone-500">{job.businessType}</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-2">
|
||||
<span className={statusMeta.badgeClass}>
|
||||
<statusMeta.icon className={statusMeta.icon === Loader2 ? 'h-3.5 w-3.5 animate-spin' : 'h-3.5 w-3.5'} />
|
||||
{statusMeta.label}
|
||||
</span>
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold ${
|
||||
isSelected ? 'bg-emerald-600 text-white' : 'bg-stone-100 text-stone-500'
|
||||
}`}
|
||||
>
|
||||
{isSelected ? <Check className="h-3.5 w-3.5" /> : <span className="h-2 w-2 rounded-full bg-current opacity-60"></span>}
|
||||
{isSelected ? 'Selected' : 'Click to select'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-3 text-sm text-stone-600">
|
||||
<div className="flex items-start gap-2">
|
||||
<MapPin className="mt-0.5 h-4 w-4 flex-shrink-0 text-stone-400" />
|
||||
<span className="line-clamp-2">{formatLocation(job)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<CalendarDays className="h-4 w-4 flex-shrink-0 text-stone-400" />
|
||||
<span>{new Date(job.createdAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
|
||||
{job.keywords ? <p className="line-clamp-2 text-stone-500">Keywords: {job.keywords}</p> : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid grid-cols-2 gap-3 rounded-2xl bg-stone-50 p-4">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Radius</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{job.radiusKm} km</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-stone-400">Results</p>
|
||||
<p className="mt-1 text-base font-bold text-stone-900">{job.totalResults}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center justify-between border-t border-stone-100 pt-4 text-sm font-medium text-stone-500">
|
||||
<span>{job.totalResults === 1 ? '1 lead found' : `${job.totalResults} leads found`}</span>
|
||||
<span className={isSelected ? 'text-emerald-700' : 'text-stone-400'}>
|
||||
{isSelected ? 'Included in selection' : 'Available to select'}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatLocation(job: SearchJob) {
|
||||
const primaryLocation = job.address || job.city || 'Location not available';
|
||||
return `${primaryLocation} (${job.radiusKm} km radius)`;
|
||||
}
|
||||
|
||||
function getStatusMeta(status: SearchJobStatus) {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return {
|
||||
label: 'Completed',
|
||||
icon: CheckCircle2,
|
||||
badgeClass:
|
||||
'inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700',
|
||||
};
|
||||
case 'running':
|
||||
return {
|
||||
label: 'Running',
|
||||
icon: Loader2,
|
||||
badgeClass:
|
||||
'inline-flex items-center gap-1 rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700',
|
||||
};
|
||||
case 'failed':
|
||||
return {
|
||||
label: 'Failed',
|
||||
icon: AlertCircle,
|
||||
badgeClass:
|
||||
'inline-flex items-center gap-1 rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-semibold text-red-700',
|
||||
};
|
||||
case 'stopped':
|
||||
return {
|
||||
label: 'Stopped',
|
||||
icon: CircleOff,
|
||||
badgeClass:
|
||||
'inline-flex items-center gap-1 rounded-full border border-stone-200 bg-stone-100 px-3 py-1 text-xs font-semibold text-stone-700',
|
||||
};
|
||||
case 'pending':
|
||||
default:
|
||||
return {
|
||||
label: 'Pending',
|
||||
icon: Clock3,
|
||||
badgeClass:
|
||||
'inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
+2
-1
@@ -32,8 +32,9 @@ export async function signInWithLocalAuth(payload: { email: string; password: st
|
||||
return response.user;
|
||||
}
|
||||
|
||||
export async function signOutWithLocalAuth() {
|
||||
export async function signOutWithLocalAuth(sessionId?: string) {
|
||||
await apiRequest<{ success: boolean }>('/auth/logout', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(sessionId ? { sessionId } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
+9
-1
@@ -1,6 +1,12 @@
|
||||
import { apiRequest } from './api';
|
||||
import type { Business, SearchJob } from '../types';
|
||||
import type { CreateDeepResearchBatchRequest, DeepResearchBatchDetail, DeepResearchBatchSummary, DeepResearchPreview, DeepResearchPreviewRequest } from '../../shared/types';
|
||||
import type {
|
||||
CreateDeepResearchBatchRequest,
|
||||
DeepResearchBatchDetail,
|
||||
DeepResearchBatchSummary,
|
||||
DeepResearchPreview,
|
||||
DeepResearchPreviewRequest,
|
||||
} from '../../shared/types';
|
||||
|
||||
export type SearchJobResultLink = {
|
||||
businessId: string;
|
||||
@@ -13,6 +19,8 @@ export type RunSearchPayload = {
|
||||
radiusKm: number;
|
||||
businessType: string;
|
||||
keywords?: string;
|
||||
lat?: number;
|
||||
lng?: number;
|
||||
};
|
||||
|
||||
export type RunSearchResponse = {
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
type CleanMapOptions = Pick<google.maps.MapOptions, 'clickableIcons' | 'streetViewControl' | 'fullscreenControl' | 'mapTypeControl' | 'styles'>;
|
||||
|
||||
export const cleanMapOptions: CleanMapOptions = {
|
||||
clickableIcons: false,
|
||||
streetViewControl: false,
|
||||
fullscreenControl: false,
|
||||
mapTypeControl: false,
|
||||
styles: [
|
||||
{
|
||||
featureType: 'poi',
|
||||
stylers: [{ visibility: 'off' }],
|
||||
},
|
||||
{
|
||||
featureType: 'transit',
|
||||
stylers: [{ visibility: 'off' }],
|
||||
},
|
||||
{
|
||||
featureType: 'landscape',
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }],
|
||||
},
|
||||
{
|
||||
featureType: 'administrative.neighborhood',
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }],
|
||||
},
|
||||
{
|
||||
featureType: 'administrative.land_parcel',
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }],
|
||||
},
|
||||
{
|
||||
featureType: 'road.highway',
|
||||
elementType: 'labels',
|
||||
stylers: [{ visibility: 'off' }],
|
||||
},
|
||||
{
|
||||
featureType: 'road.arterial',
|
||||
elementType: 'labels.icon',
|
||||
stylers: [{ visibility: 'off' }],
|
||||
},
|
||||
{
|
||||
featureType: 'road.local',
|
||||
elementType: 'labels.icon',
|
||||
stylers: [{ visibility: 'off' }],
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -11,6 +11,7 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
server: {
|
||||
allowedHosts: ['project-1.duramente.com'],
|
||||
hmr: process.env.DISABLE_HMR !== 'true',
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user