{"id":9765,"date":"2026-02-13T23:09:11","date_gmt":"2026-02-13T23:09:11","guid":{"rendered":"https:\/\/proqcchina.com\/?page_id=9765"},"modified":"2026-02-13T23:09:11","modified_gmt":"2026-02-13T23:09:11","slug":"t1","status":"publish","type":"page","link":"https:\/\/proqcchina.com\/ar\/t1\/","title":{"rendered":"t1"},"content":{"rendered":"\n<style>\n:root{\n  --primary:#4f6cff;\n  --accent:#6c8bff;\n  --bg:#f5f7fb;\n  --border:#e5e7eb;\n  --text:#0f172a;\n  --muted:#6b7280;\n  --shadow:0 12px 30px rgba(15,23,42,.08);\n  --radius:14px;\n  --cta:#1341ea;\n}\n\n*{box-sizing:border-box}\nhtml,body{margin:0;padding:0;width:100%;height:100%;background:#fff}\n\n\/* Force full width inside Elementor *\/\n.elementor-section,\n.elementor-container,\n.elementor-widget-wrap,\n.elementor-column{\n  width:100% !important;\n  max-width:100% !important;\n}\n\n\/* Full-bleed wrapper *\/\n.full-bleed{\n  width:100vw;\n  min-height:100vh;\n  margin-left:calc(50% - 50vw);\n  background:var(--bg);\n}\n\n.proqc-dashboard{\n  width:100%;\n  max-width:none;\n  min-height:100vh;\n  font-family:Inter,system-ui,sans-serif;\n  padding:18px;\n  color:var(--text);\n}\n\n\/* ================= TOPBAR ================= *\/\n.topbar{\n  display:flex;\n  gap:12px;\n  align-items:center;\n  margin-bottom:16px;\n}\n\n.search{flex:1;position:relative}\n.search input{\n  width:100%;\n  padding:10px 40px 10px 14px;\n  border-radius:999px;\n  border:1px solid var(--border);\n  font-size:14px;\n}\n.search .icon{\n  position:absolute;\n  right:14px;\n  top:50%;\n  transform:translateY(-50%);\n  opacity:.6;\n}\n\n.guidance{\n  background:var(--cta);\n  color:#fff;\n  border:none;\n  padding:9px 14px;\n  border-radius:999px;\n  font-weight:600;\n  cursor:pointer;\n  transition:.25s ease;\n  font-size:13px;\n  white-space:nowrap;\n}\n.guidance:hover{\n  transform:translateY(-1px);\n  box-shadow:0 8px 18px rgba(19,65,234,.35);\n}\n\n.profile{\n  display:flex;\n  align-items:center;\n}\n.profile .name{\n  font-weight:700;\n  font-size:14px;\n}\n.profile .company{\n  color:var(--muted);\n  font-size:12px;\n}\n\n\/* ================= LAYOUT ================= *\/\n.layout{\n  display:grid;\n  grid-template-columns:230px 1fr;\n  gap:16px;\n}\n\n\/* ================= SIDEBAR ================= *\/\n.sidebar{\n  background:#fff;\n  border-radius:var(--radius);\n  padding:16px;\n  border:1px solid var(--border);\n}\n.nav a{\n  display:block;\n  padding:10px 12px;\n  border-radius:10px;\n  text-decoration:none;\n  color:var(--text);\n  margin-bottom:6px;\n  cursor:pointer;\n  font-size:14px;\n}\n.nav a.active,.nav a:hover{\n  background:#eef2ff;\n  color:var(--primary);\n}\n\n\/* ================= MAIN ================= *\/\n.main{display:flex;flex-direction:column;gap:14px}\n\n\/* ================= HERO ================= *\/\n.hero{\n  background:#fff;\n  border-radius:var(--radius);\n  padding:16px;\n  border:1px solid var(--border);\n  box-shadow:var(--shadow);\n}\n.hero h3{margin:0 0 6px}\n.hero small{display:block}\n\n.service-row{\n  margin-top:12px;\n  display:grid;\n  grid-template-columns:repeat(4, minmax(160px, 1fr));\n  gap:10px;\n}\n\n\/* Booking cards subtle wiggle every 30s *\/\n@keyframes softWiggle {\n  0%, 96%, 100% { transform:translateX(0) }\n  97% { transform:translateX(2px) }\n  98% { transform:translateX(-2px) }\n  99% { transform:translateX(1px) }\n}\n\n.service{\n  background:linear-gradient(135deg,var(--primary),var(--accent));\n  color:#fff;\n  border-radius:12px;\n  padding:12px;\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:10px;\n  transition:.25s ease;\n  animation:softWiggle 30s infinite;\n}\n.service strong{\n  font-size:14px;\n  line-height:1.2;\n}\n.service:hover{\n  transform:translateY(-3px);\n  box-shadow:0 12px 26px rgba(79,108,255,.28);\n}\n\n.service button{\n  background:rgba(255,255,255,.2);\n  border:1px solid rgba(255,255,255,.35);\n  color:#fff;\n  padding:6px 10px;\n  border-radius:999px;\n  cursor:pointer;\n  transition:.25s ease;\n  font-size:12px;\n  white-space:nowrap;\n}\n.service button:hover{\n  background:#fff;\n  color:var(--primary);\n}\n\n\/* ================= STATS ================= *\/\n.cards{\n  display:grid;\n  grid-template-columns:repeat(3, minmax(180px,1fr));\n  gap:10px;\n}\n\n.stat-card{\n  background:#fff;\n  padding:14px;\n  border-radius:12px;\n  border:1px solid var(--border);\n  box-shadow:var(--shadow);\n  transition:.25s ease;\n  line-height:1.2;\n}\n.stat-card strong{font-size:20px}\n.stat-card:hover{\n  transform:translateY(-2px);\n  box-shadow:0 14px 26px rgba(15,23,42,.12);\n}\n.stat-link{cursor:pointer}\n\n\/* Only show overview card on mobile *\/\n.overview-mobile-card{display:none}\n\n\/* Hide top text inside overview card *\/\n.overview-mobile-card strong{\n  visibility:hidden;\n  height:0;\n  display:block;\n}\n\n\/* ================= TABLES ================= *\/\n.tables{\n  display:grid;\n  grid-template-columns:repeat(2, minmax(340px,1fr));\n  gap:14px;\n}\n\n.table-card{\n  background:#fff;\n  border-radius:12px;\n  padding:14px;\n  border:1px solid var(--border);\n  box-shadow:var(--shadow);\n  overflow-x:auto;\n}\n\ntable{\n  width:100%;\n  min-width:520px;\n  border-collapse:collapse;\n}\n\nth{\n  font-size:12px;\n  color:var(--muted);\n  text-align:left;\n  padding:8px 6px;\n  white-space:nowrap;\n}\n\ntd{\n  padding:10px 6px;\n  font-size:13px;\n  white-space:nowrap;\n}\n\ntr:not(:last-child) td{\n  border-bottom:1px solid #f1f5f9;\n}\n\ntd.id,td.date{\n  font-family:monospace;\n  font-weight:600;\n}\n\n.status{\n  padding:5px 10px;\n  border-radius:999px;\n  font-size:11px;\n  font-weight:600;\n  color:#fff;\n  white-space:nowrap;\n}\n.pending{background:#f59e0b}\n.paid{background:#22c55e}\n.unpaid{background:#ef4444}\n\n\/* ================= CONTENT SWITCH ================= *\/\n.section{display:none}\n.section.active{display:block}\n\n\/* ================= MODALS ================= *\/\n.modal{\n  position:fixed;\n  inset:0;\n  background:rgba(2,6,23,.55);\n  display:none;\n  align-items:center;\n  justify-content:center;\n  z-index:999;\n  padding:12px;\n}\n.modal.active{display:flex}\n\n.modal-content{\n  background:#fff;\n  padding:18px;\n  width:min(520px, 92vw);\n  max-height:90vh;\n  overflow-y:auto;\n  border-radius:14px;\n  box-shadow:var(--shadow);\n}\n.modal-content h3{margin:0 0 10px}\n\n\/* ================= MOBILE ================= *\/\n@media(max-width:1100px){\n  .service-row{grid-template-columns:repeat(2,minmax(160px,1fr))}\n  .tables{grid-template-columns:1fr}\n}\n@media(max-width:900px){\n  .topbar{\n    flex-wrap:wrap;\n    gap:10px;\n  }\n  .search{order:2;width:100%}\n  .guidance{order:3;width:100%}\n\n  .profile{\n    order:4;\n    width:100%;\n    justify-content:center;\n    text-align:center;\n  }\n\n  .layout{grid-template-columns:1fr}\n\n  \/* Hide sidebar in mobile *\/\n  .sidebar{display:none}\n\n  \/* Show overview card only on mobile *\/\n  .overview-mobile-card{display:block}\n}\n@media(max-width:600px){\n  .cards{grid-template-columns:1fr}\n  table{min-width:480px}\n}\n<\/style>\n\n<div class=\"full-bleed\">\n  <div class=\"proqc-dashboard\">\n\n    <div class=\"topbar\">\n      <div class=\"search\">\n        <input id=\"searchInput\" placeholder=\"Search booking, invoices...\">\n        <span class=\"icon\">\ud83d\udd0d<\/span>\n      <\/div>\n      <button class=\"guidance\" id=\"guideBtn\">Booking Guidance<\/button>\n      <div class=\"profile\">\n        <div>\n          <div class=\"name\">John Doe<\/div>\n          <div class=\"company\">Company LLC<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"layout\">\n      <aside class=\"sidebar\">\n        <nav class=\"nav\">\n          <a class=\"active\" data-target=\"overview\">Overview<\/a>\n          <a data-target=\"bookings\">Bookings<\/a>\n          <a data-target=\"reports\">Reports<\/a>\n          <a data-target=\"invoices\">Invoices<\/a>\n        <\/nav>\n      <\/aside>\n\n      <main class=\"main\">\n        <div class=\"hero\">\n          <h3>Welcome, John!<\/h3>\n          <small style=\"color:var(--muted)\">Start by booking one of our services<\/small>\n          <div class=\"service-row\">\n            <div class=\"service\"><strong>Factory Audit<\/strong><button class=\"book-btn\">Book \u2192<\/button><\/div>\n            <div class=\"service\"><strong>During Production<\/strong><button class=\"book-btn\">Book \u2192<\/button><\/div>\n            <div class=\"service\"><strong>Pre-Shipment<\/strong><button class=\"book-btn\">Book \u2192<\/button><\/div>\n            <div class=\"service\"><strong>Container Loading<\/strong><button class=\"book-btn\">Book \u2192<\/button><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"cards\">\n          <div class=\"stat-card stat-link overview-mobile-card\" data-target=\"overview\"><strong>Overview<\/strong><br>Overview<\/div>\n          <div class=\"stat-card stat-link\" data-target=\"bookings\"><strong>4<\/strong><br>Your Bookings<\/div>\n          <div class=\"stat-card stat-link\" data-target=\"invoices\"><strong>2<\/strong><br>Your Invoices<\/div>\n          <div class=\"stat-card stat-link\" data-target=\"reports\"><strong>8<\/strong><br>Your Reports<\/div>\n        <\/div>\n\n        <section class=\"section active\" id=\"overview\">\n          <div class=\"tables\">\n            <div class=\"table-card\">\n              <strong>Latest Bookings<\/strong>\n              <table>\n                <tr><th>ID<\/th><th>Date<\/th><th>Service<\/th><th>Status<\/th><\/tr>\n                <tr><td class=\"id\">#4213<\/td><td class=\"date\">10.08.2023<\/td><td>Factory Audit<\/td><td><span class=\"status pending\">Processing<\/span><\/td><\/tr>\n                <tr><td class=\"id\">#4231<\/td><td class=\"date\">10.08.2023<\/td><td>Pre-Shipment Inspection<\/td><td><span class=\"status paid\">Delivered<\/span><\/td><\/tr>\n                <tr><td class=\"id\">#4252<\/td><td class=\"date\">10.08.2023<\/td><td>During Production Inspection<\/td><td><span class=\"status unpaid\">Unpaid<\/span><\/td><\/tr>\n              <\/table>\n            <\/div>\n\n            <div class=\"table-card\">\n              <strong>Latest Invoices<\/strong>\n              <table>\n                <tr><th>ID<\/th><th>Date<\/th><th>Amount<\/th><th>Status<\/th><\/tr>\n                <tr><td class=\"id\">#9001<\/td><td class=\"date\">10.08.2023<\/td><td>$500<\/td><td><span class=\"status paid\">Paid<\/span><\/td><\/tr>\n                <tr><td class=\"id\">#9002<\/td><td class=\"date\">10.08.2023<\/td><td>$800<\/td><td><span class=\"status pending\">Pay<\/span><\/td><\/tr>\n                <tr><td class=\"id\">#9003<\/td><td class=\"date\">10.08.2023<\/td><td>$500<\/td><td><span class=\"status unpaid\">Unpaid<\/span><\/td><\/tr>\n              <\/table>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        <section class=\"section\" id=\"bookings\">\n          <div class=\"table-card\"><strong>Your Bookings<\/strong><p style=\"color:var(--muted)\">List of all client bookings will appear here.<\/p><\/div>\n        <\/section>\n        <section class=\"section\" id=\"reports\">\n          <div class=\"table-card\"><strong>Your Reports<\/strong><p style=\"color:var(--muted)\">Inspection\/audit reports will appear here.<\/p><\/div>\n        <\/section>\n        <section class=\"section\" id=\"invoices\">\n          <div class=\"table-card\"><strong>Your Invoices<\/strong><p style=\"color:var(--muted)\">Invoices and payment status will appear here.<\/p><\/div>\n        <\/section>\n      <\/main>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- BOOKING MODAL -->\n<div class=\"modal\" id=\"bookModal\">\n  <div class=\"modal-content\">\n    <h3>Book Service<\/h3>\n    [fluentform id=&#8221;2&#8243;]\n    <div style=\"text-align:right;margin-top:12px;\">\n      <button class=\"guidance\" id=\"closeBook\">Close<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const bookModal = document.getElementById(\"bookModal\");\n  const closeBook = document.getElementById(\"closeBook\");\n\n  document.querySelectorAll(\".book-btn\").forEach(btn=>{\n    btn.onclick=()=>bookModal.classList.add(\"active\");\n  });\n\n  if (closeBook) closeBook.onclick=()=>bookModal.classList.remove(\"active\");\n  bookModal.onclick=e=>{ if(e.target===bookModal) bookModal.classList.remove(\"active\"); };\n\n  \/\/ section switching + card switching\n  const links = document.querySelectorAll(\".nav a, .stat-link\");\n  const sections = document.querySelectorAll(\".section\");\n  links.forEach(link=>{\n    link.addEventListener(\"click\",()=>{\n      if (!link.dataset.target) return;\n      document.querySelectorAll(\".nav a\").forEach(l=>l.classList.remove(\"active\"));\n      if (link.classList.contains(\"nav-link\")) link.classList.add(\"active\");\n      const target = link.dataset.target;\n      sections.forEach(sec=>{\n        sec.classList.toggle(\"active\", sec.id === target);\n      });\n    });\n  });\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd0d Booking Guidance John Doe Company LLC Overview Bookings Reports Invoices Welcome, John! Start by booking one of our services Factory AuditBook \u2192 During ProductionBook \u2192 Pre-ShipmentBook \u2192 Container LoadingBook \u2192 OverviewOverview 4Your Bookings 2Your Invoices 8Your Reports Latest Bookings ID Date Service Status #4213 10.08.2023 Factory Audit Processing #4231 10.08.2023 Pre-Shipment Inspection Delivered #4252 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"_joinchat":[],"footnotes":""},"class_list":["post-9765","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/proqcchina.com\/ar\/wp-json\/wp\/v2\/pages\/9765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proqcchina.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/proqcchina.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/proqcchina.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proqcchina.com\/ar\/wp-json\/wp\/v2\/comments?post=9765"}],"version-history":[{"count":2,"href":"https:\/\/proqcchina.com\/ar\/wp-json\/wp\/v2\/pages\/9765\/revisions"}],"predecessor-version":[{"id":9767,"href":"https:\/\/proqcchina.com\/ar\/wp-json\/wp\/v2\/pages\/9765\/revisions\/9767"}],"wp:attachment":[{"href":"https:\/\/proqcchina.com\/ar\/wp-json\/wp\/v2\/media?parent=9765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}