Seazn/profit-planet-frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement contract preview loading and refresh functionality in CompanySignContractPage

Browse Source
This commit is contained in:
seaznCode 2025-11-08 15:46:59 +01:00
parent 0d225cb0ac
commit a450637194
1 changed files with 89 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/app/quickaction-dashboard/register-sign-contract/company/page.tsx
View File

@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
import PageLayout from '../../../components/PageLayout'
import useAuthStore from '../../../store/authStore'
import { useUserStatus } from '../../../hooks/useUserStatus'
import { API_BASE_URL } from '../../../utils/api'
export default function CompanySignContractPage() {
const router = useRouter()
@ -23,11 +24,43 @@ export default function CompanySignContractPage() {
const [submitting, setSubmitting] = useState(false)
const [success, setSuccess] = useState(false)
const [error, setError] = useState('')
const [previewLoading, setPreviewLoading] = useState(false)
const [previewHtml, setPreviewHtml] = useState<string | null>(null)
const [previewError, setPreviewError] = useState<string | null>(null)
useEffect(() => {
setDate(new Date().toISOString().slice(0,10))
}, [])
// Load latest contract preview for company user
useEffect(() => {
const loadPreview = async () => {
if (!accessToken) return
setPreviewLoading(true)
setPreviewError(null)
try {
const res = await fetch(`${API_BASE_URL}/api/contracts/preview/latest`, {
method: 'GET',
headers: { Authorization: `Bearer ${accessToken}` },
credentials: 'include'
})
if (!res.ok) {
const text = await res.text().catch(() => '')
throw new Error(text || 'Failed to load contract preview')
}
const html = await res.text()
setPreviewHtml(html)
} catch (e: any) {
console.error('CompanySignContractPage.loadPreview error:', e)
setPreviewError(e?.message || 'Failed to load contract preview')
setPreviewHtml(null)
} finally {
setPreviewLoading(false)
}
}
loadPreview()
}, [accessToken])
const valid = () => {
const companyValid = companyName.trim().length >= 3 // Min 3 characters for company name
const repNameValid = repName.trim().length >= 3 // Min 3 characters for representative name
@ -183,15 +216,64 @@ export default function CompanySignContractPage() {
</div>
</div>
<div>
<div className="rounded-lg border border-gray-200 h-64 sm:h-72 bg-white flex items-center justify-center relative overflow-hidden">
<p className="text-xs text-gray-500 text-center px-6">
(Vertragsvorschau / PDF Platzhalter)
<br/>Company Contract PDF would render here.
</p>
<div className="absolute inset-x-0 bottom-0 p-3 bg-gradient-to-t from-white via-white/90 to-transparent text-[11px] text-gray-500 text-center">
Scroll preview (disabled in mock)
<div className="rounded-lg border border-gray-200 bg-white relative overflow-hidden">
<div className="flex items-center justify-between p-3 border-b border-gray-200 bg-gray-50">
<h3 className="text-sm font-semibold text-gray-900">Vertragsvorschau (Unternehmen)</h3>
<div className="flex items-center gap-2">
<button
type="button"
onClick={() => {
if (!previewHtml) return
const blob = new Blob([previewHtml], { type: 'text/html' })
const url = URL.createObjectURL(blob)
window.open(url, '_blank', 'noopener,noreferrer')
}}
disabled={!previewHtml}
className="inline-flex items-center rounded-md bg-gray-100 hover:bg-gray-200 text-gray-900 px-2.5 py-1.5 text-xs disabled:opacity-60"
>
Open in new tab
</button>
<button
type="button"
onClick={async () => {
if (!accessToken) return
setPreviewLoading(true)
setPreviewError(null)
try {
const res = await fetch(`${API_BASE_URL}/api/contracts/preview/latest`, {
method: 'GET',
headers: { Authorization: `Bearer ${accessToken}` },
credentials: 'include'
})
if (!res.ok) {
const text = await res.text().catch(() => '')
throw new Error(text || 'Failed to reload preview')
}
const html = await res.text()
setPreviewHtml(html)
} catch (e: any) {
setPreviewError(e?.message || 'Failed to reload preview')
} finally {
setPreviewLoading(false)
}
}}
disabled={previewLoading}
className="inline-flex items-center rounded-md bg-indigo-600 hover:bg-indigo-500 text-white px-2.5 py-1.5 text-xs disabled:opacity-60"
>
{previewLoading ? 'Lade…' : 'Refresh'}
</button>
</div>
</div>
{previewLoading ? (
<div className="h-72 flex items-center justify-center text-xs text-gray-500">Lade Vorschau…</div>
) : previewError ? (
<div className="h-72 flex items-center justify-center text-xs text-red-600 px-4 text-center">{previewError}</div>
) : previewHtml ? (
<iframe title="Company Contract Preview" className="w-full h-72" srcDoc={previewHtml} />
) : (
<div className="h-72 flex items-center justify-center text-xs text-gray-500">Keine Vorschau verfügbar.</div>
)}
</div>
</div>
</section>