feat: F030 Anfragencenter — Aktive & Latente Anfragen + Angebot-Wizard
Neuer Menüpunkt «Anfragencenter» (ehemals «Eingehende Bedarfe»): Aktive Anfragen: - Split-View: Anfrageliste (Liste/Grid-Toggle) + Chat-Detailansicht - Chat-Verlauf mit Sender-Styling (Mieter links, Supply rechts) - Antwortformular mit Betreff, Nachricht, Anhänge, Statuswechsel - Zugehörige Property Card neben dem Chat Latente Anfragen: - Drei-Spalten-Layout: Need-Liste | Need-Detail | Eigene Objekte - Need Cards mit AI-Zusammenfassung, Must-Haves, Präferenzen - Eigene Portfolio-Objekte sortiert nach deterministischem Match-Score - Checkbox-Selektion für Angebotsauswahl Angebot-Wizard (4 Schritte): - Schritt 1: Objekte auswählen (mit Score-Vorschau) - Schritt 2: PDF-Vorschau + editierbare Textfelder - Schritt 3: Angebot prüfen & bestätigen - Schritt 4: Nachricht an Suchenden mit KI-generierter Mail Architektur: - Domain: Inquiry, LatentNeed, OfferDraft Types - Provider: IInquiryProvider, ILatentNeedProvider, IOfferProvider + Mockups - Services: inquiryService, latentNeedService, offerService - Hooks: useInquiries, useLatentNeeds, useOffers (TanStack Query) - Store: offerWizardStore (Zustand, lokaler Wizard-State) - 27 neue Komponenten, alle Loading/Empty/Error States Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
@@ -0,0 +1,151 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Box, IconButton, Tooltip, Typography } from '@mui/material'
|
||||
import { LayoutGrid, List as ListIcon, Inbox } from 'lucide-react'
|
||||
import { useActiveInquiries } from '../../hooks/useInquiries'
|
||||
import { EmptyState } from '../ui'
|
||||
import { InquiryList } from './InquiryList'
|
||||
import { InquiryCardGrid } from './InquiryCardGrid'
|
||||
import { InquiryDetailPanel } from './InquiryDetailPanel'
|
||||
|
||||
type ViewMode = 'list' | 'grid'
|
||||
|
||||
const VIEW_STORAGE_KEY = 'view-inquiries'
|
||||
|
||||
function loadViewMode(): ViewMode {
|
||||
if (typeof window === 'undefined') return 'list'
|
||||
const stored = window.localStorage.getItem(VIEW_STORAGE_KEY)
|
||||
return stored === 'grid' ? 'grid' : 'list'
|
||||
}
|
||||
|
||||
export function ActiveInquiriesTab() {
|
||||
const { data: inquiries = [], isLoading } = useActiveInquiries()
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const [view, setView] = useState<ViewMode>(loadViewMode())
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.localStorage.setItem(VIEW_STORAGE_KEY, view)
|
||||
}
|
||||
}, [view])
|
||||
|
||||
// Auto-select first inquiry when data loads
|
||||
useEffect(() => {
|
||||
if (!selectedId && inquiries.length > 0) {
|
||||
setSelectedId(inquiries[0].id)
|
||||
}
|
||||
}, [inquiries, selectedId])
|
||||
|
||||
if (!isLoading && inquiries.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={<Inbox size={40} />}
|
||||
title="Keine aktiven Anfragen"
|
||||
description="Sobald Interessenten Anfragen zu Ihren Objekten stellen, erscheinen diese hier."
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
|
||||
{/* Left column: list/grid */}
|
||||
<Box
|
||||
sx={{
|
||||
width: view === 'list' ? 380 : 720,
|
||||
minWidth: view === 'list' ? 380 : 480,
|
||||
flexShrink: 0,
|
||||
borderRight: '1px solid #e2e8f0',
|
||||
bgcolor: 'white',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1.25,
|
||||
borderBottom: '1px solid #e2e8f0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600, color: '#0f172a' }}>
|
||||
Anfragen
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
px: 1,
|
||||
py: 0.125,
|
||||
borderRadius: 1,
|
||||
bgcolor: '#1e3a5f',
|
||||
color: 'white',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.7rem',
|
||||
}}
|
||||
>
|
||||
{inquiries.length}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
<Tooltip title="Listenansicht">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setView('list')}
|
||||
sx={{
|
||||
bgcolor: view === 'list' ? '#e0e7ff' : 'transparent',
|
||||
color: view === 'list' ? '#1e3a5f' : '#64748b',
|
||||
'&:hover': { bgcolor: view === 'list' ? '#c7d2fe' : '#f1f5f9' },
|
||||
}}
|
||||
>
|
||||
<ListIcon size={16} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Kartenansicht">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setView('grid')}
|
||||
sx={{
|
||||
bgcolor: view === 'grid' ? '#e0e7ff' : 'transparent',
|
||||
color: view === 'grid' ? '#1e3a5f' : '#64748b',
|
||||
'&:hover': { bgcolor: view === 'grid' ? '#c7d2fe' : '#f1f5f9' },
|
||||
}}
|
||||
>
|
||||
<LayoutGrid size={16} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{view === 'list' ? (
|
||||
<InquiryList
|
||||
inquiries={inquiries}
|
||||
selectedId={selectedId}
|
||||
onSelect={setSelectedId}
|
||||
/>
|
||||
) : (
|
||||
<InquiryCardGrid
|
||||
inquiries={inquiries}
|
||||
selectedId={selectedId}
|
||||
onSelect={setSelectedId}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Right column: detail */}
|
||||
<Box sx={{ flex: 1, overflow: 'hidden', bgcolor: '#f8fafc' }}>
|
||||
{selectedId ? (
|
||||
<InquiryDetailPanel inquiryId={selectedId} />
|
||||
) : (
|
||||
<EmptyState
|
||||
icon={<Inbox size={40} />}
|
||||
title="Anfrage auswählen"
|
||||
description="Wählen Sie eine Anfrage aus der Liste, um Details anzuzeigen und zu antworten."
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user