97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { Spinner } from "../UI";
|
||
import { tripService } from "../../services/trip.service";
|
||
import { getStoredToken } from "../../lib/auth";
|
||
|
||
interface TripReportPanelProps {
|
||
tripId: string;
|
||
}
|
||
|
||
export function TripReportPanel({ tripId }: TripReportPanelProps) {
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
const handleGenerate = async () => {
|
||
setLoading(true);
|
||
setError(null);
|
||
try {
|
||
const token = getStoredToken();
|
||
const res = await tripService.getReport(tripId, token);
|
||
const reportUrl = (res as unknown as { data: { reportUrl: string } }).data?.reportUrl;
|
||
|
||
if (!reportUrl) throw new Error("لم يتم إرجاع رابط التقرير.");
|
||
window.open(reportUrl, "_blank", "noopener,noreferrer");
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : "تعذّر إنشاء التقرير.");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
marginTop: "1.5rem",
|
||
borderRadius: "var(--radius-lg)",
|
||
border: "1px solid var(--color-border)",
|
||
background: "var(--color-surface-muted)",
|
||
padding: "1rem",
|
||
}}
|
||
>
|
||
<p style={{
|
||
fontSize: 11,
|
||
letterSpacing: "0.25em",
|
||
textTransform: "uppercase",
|
||
color: "#2563EB",
|
||
fontWeight: 700,
|
||
margin: "0 0 0.75rem",
|
||
}}>
|
||
إنشاء تقرير الرحلة
|
||
</p>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={handleGenerate}
|
||
disabled={loading}
|
||
style={{
|
||
height: 38,
|
||
padding: "0 1.25rem",
|
||
borderRadius: "var(--radius-md)",
|
||
border: "none",
|
||
fontSize: 13,
|
||
fontWeight: 700,
|
||
color: "#FFF",
|
||
background: loading ? "var(--color-brand-400)" : "var(--color-brand-600)",
|
||
cursor: loading ? "not-allowed" : "pointer",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 8,
|
||
fontFamily: "var(--font-sans)",
|
||
whiteSpace: "nowrap",
|
||
}}
|
||
>
|
||
{loading && <Spinner size="sm" className="text-white" />}
|
||
{loading ? "جارٍ الإنشاء…" : "إنشاء تقرير البيان"}
|
||
</button>
|
||
|
||
{error && (
|
||
<div
|
||
style={{
|
||
marginTop: "0.75rem",
|
||
borderRadius: "var(--radius-md)",
|
||
background: "#FEF2F2",
|
||
border: "1px solid #FECACA",
|
||
padding: "0.625rem 0.875rem",
|
||
fontSize: 12,
|
||
color: "#DC2626",
|
||
fontWeight: 500,
|
||
}}
|
||
>
|
||
⚠ {error}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
} |