finsh user,car,driver pages also add validator layer to app build trip page

Components/Trip_Report/Tripreportpanel.tsx

@@ -0,0 +1,97 @@
+"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>
+  );
+}