// QYAS — Homepage const { useState: useStateH, useEffect: useEffectH } = React; const { Nav, Footer, useLang } = window.QyasShell; function Pillar({ num, title, body, accent }) { return (
0{num}
·

{title}

{body}

); } function HierarchyDiagram() { const Node = ({ label, sub, color, dashed }) => (
{sub}
{label}
); return (
{/* L1 */} {/* L2: 3 sites */}
{/* L3: stations */}
{/* L4: meters */}
{["Inlet A-12","Pump P-7","Tank T-4","Outlet C-3","Sales SM-9","Pressure B-2","Temp X-1","Flow F-3"].map(m => (
{m}
))}
04 · SECTIONS & METERS
); } function Connector() { return
; } function Roles() { const roles = [ { name: "Owner", scope: "Full access", access: 100, perms: ["sites","plants","meters","reports","users","settings","billing"], note: "Tenant root" }, { name: "Auditor", scope: "Read everything", access: 95, perms: ["sites","plants","meters","reports","users","audit"], note: "Compliance" }, { name: "Manager", scope: "Region", access: 70, perms: ["sites","plants","users","reports"], note: "Reads + writes" }, { name: "Site Manager",scope: "One site", access: 55, perms: ["site","meters","users","reports"], note: "Site-bound" }, { name: "Supervisor", scope: "Plants assigned", access: 45, perms: ["plants","meters","readings"], note: "Reads readings" }, { name: "Client", scope: "Own meters", access: 30, perms: ["my meters","reports"], note: "External" }, { name: "Operator", scope: "Assigned meters", access: 15, perms: ["meters","log readings"], note: "Field-only" }, ]; return (
Role
Scope
Permissions
Access
Note
{roles.map((r, i) => (
{r.name}
{r.scope}
{r.perms.map(p => {p})}
60 ? "#0B4A6F" : r.access > 35 ? "#0284C7" : "#94A3B8" }}>
{r.access}%
{r.note}
))}
); } function AlertExplainer() { return (
CHAPTER 05 · ALERT SYSTEM

Out-of-range readings don't wait for anyone to notice them.

Threshold checks run on every submitted reading. Responsible managers receive a push notification before the operator finishes their route.

{[ { step: "01", title: "Reading entered", body: "Operator submits a value from the field." }, { step: "02", title: "Threshold check", body: "System compares against configured min / max." }, { step: "03", title: "Push notification", body: "Responsible managers notified instantly via OneSignal." }, { step: "04", title: "AI suggestion", body: "Pattern recognition surfaces predictive corrective actions." }, ].map(s => (
{s.step}
{s.title}
{s.body}
))}
{/* Live alert visual */}
INCIDENT 14:31:54 UTC OVER MAX
PRESSURE METER · PUMP P-7
7.2bar
{/* threshold bar */}
min 2.0max 6.0scale 12.0
NOTIFIED
3 managers · 1 site mgr
LATENCY
3.4s
); } function Workflow() { const steps = [ "Operator gets push + email reminder.", "Opens app — sees assigned meters.", "Selects a meter, enters current reading.", "System validates against min / max thresholds.", "Out-of-range → manager push notification.", "Reading stored with timestamp + GPS.", "Value flows into dashboard & reports.", ]; return (
READING WORKFLOW

Seven steps. Every time.

RUNTIME · 9.4s avg
{steps.map((s, i) => (
STEP 0{i+1}
{s}
{/* dotted line + arrow */}
))}
); } function Tech() { const items = [ { label: "OneSignal", note: "Push" }, { label: "Firebase", note: "Push" }, { label: "Amazon SNS", note: "Push" }, { label: "Huawei Push", note: "Push" }, { label: "Google Maps", note: "Geo" }, { label: "Supabase", note: "Backend" }, { label: "Odoo ERP", note: "Billing" }, { label: "i18next", note: "Localization" }, ]; return (
{items.map((it, i) => (
{it.label}
{it.note}
))}
); } function FAQ() { const items = [ { q: "How does QYAS handle factories with thousands of meters?", a: "Sites are organized into stations and sections. Hierarchical permissions and indexed reading queries keep large deployments fast." }, { q: "What happens when a reading is out of range?", a: "The system logs a warning, attaches the threshold context, and sends a push notification via OneSignal to all responsible managers — typically under 4 seconds." }, { q: "Does QYAS support Arabic and right-to-left layouts?", a: "Yes. The full UI mirrors for Arabic. English, French, and German are supported left-to-right." }, { q: "Can clients see only their own meters?", a: "Yes. The Client role is scoped to assigned meters and reports — they never see other tenants' data." }, { q: "What devices does the operator app run on?", a: "iOS and Android. Operators receive push notifications and reminders to log readings on schedule." }, ]; const [open, setOpen] = useStateH(0); return (
{items.map((it, i) => (
{open === i && (
{it.a}
)}
))}
); } function Home() { const { lang, setLang, t } = useLang(); const cta = (window.I18N[lang] || window.I18N.en).cta; return ( <>