Configure Completed is added
This commit is contained in:
326
components/dashboard/configure/workflowAutomation.tsx
Normal file
326
components/dashboard/configure/workflowAutomation.tsx
Normal file
@@ -0,0 +1,326 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Bot,
|
||||
Activity,
|
||||
Check,
|
||||
Clock,
|
||||
Plus,
|
||||
Sparkles
|
||||
} from "lucide-react";
|
||||
import Button from "@/components/common/button";
|
||||
import StatCard from "@/components/common/dashStatCard";
|
||||
import InfoBanner from '@/components/common/infoBanner';
|
||||
import Table from '@/components/common/dataTable';
|
||||
import { auditheaders, auditrows } from '@/constants/tabledata';
|
||||
|
||||
export default function WorkFlowAutomationPortal() {
|
||||
return (
|
||||
<div className="relative my-15 text-slate-100 font-sans">
|
||||
{/* --- HEADER SECTION --- */}
|
||||
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono">
|
||||
<span className="text-teal-400">APPLE ONE — HQ TOWER</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500">CONFIGURE</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className="text-slate-500">AUTOMATION</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white tracking-tight mt-2">
|
||||
Workflow automation
|
||||
</h1>
|
||||
<p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
|
||||
Build if-this-then-that rules for approvals, dispatch and escalation without code — the same engine competitors gate behind IT change requests.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* --- HEADER BUTTONS --- */}
|
||||
<div className="flex items-center gap-3 self-start md:mt-10">
|
||||
<Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-4 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
|
||||
<Activity className="w-4 h-4 text-teal-400" />
|
||||
<span>Run log</span>
|
||||
</Button>
|
||||
|
||||
<Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
|
||||
<Plus className="w-4 h-4 stroke-[3]" />
|
||||
<span>New automation</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- STAT CARDS --- */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
{/* Card 1: Active automations */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Active automations"
|
||||
value="4/5"
|
||||
icon={Bot}
|
||||
badgeText="live"
|
||||
badgeClassName="text-teal-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
|
||||
/>
|
||||
|
||||
{/* Card 2: Runs this month */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Runs this month"
|
||||
value="48"
|
||||
icon={Activity}
|
||||
badgeText="triggered"
|
||||
badgeClassName="text-teal-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
|
||||
/>
|
||||
|
||||
{/* Card 3: Tasks auto-handled */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Tasks auto-handled"
|
||||
value="80%"
|
||||
icon={Check}
|
||||
badgeText="no touch"
|
||||
badgeClassName="text-teal-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
|
||||
/>
|
||||
|
||||
{/* Card 4: Time saved */}
|
||||
<StatCard
|
||||
variant="icon"
|
||||
title="Time saved"
|
||||
value="~34h"
|
||||
icon={Clock}
|
||||
badgeText="est. / month"
|
||||
badgeClassName="text-slate-400 lowercase font-mono"
|
||||
iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- RULE BUILDER HEADER SECTION --- */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-5 mb-4 shadow-xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-sm font-semibold text-white tracking-wide">
|
||||
Rule builder
|
||||
</h2>
|
||||
<span className="text-xs font-mono text-slate-500 tracking-wider">
|
||||
trigger → condition → action
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-6">
|
||||
{/* WHEN Step */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
|
||||
WHEN
|
||||
</span>
|
||||
<button className="px-3.5 py-1.5 rounded-lg border border-[#2DD4BF]/40 text-[#2DD4BF] text-xs font-mono font-medium transition-colors">
|
||||
Trigger event
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* IF Step */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
|
||||
IF
|
||||
</span>
|
||||
<button className="px-3.5 py-1.5 rounded-lg border border-slate-700 text-slate-300 text-xs font-mono font-medium transition-colors">
|
||||
Condition
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* THEN Step */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
|
||||
THEN
|
||||
</span>
|
||||
<button className="px-3.5 py-1.5 rounded-lg border border-[#2DD4BF]/30 text-[#2DD4BF] text-xs font-mono font-medium transition-colors">
|
||||
Action
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add Step Button */}
|
||||
<button className="bg-[#2DD4BF] hover:bg-teal-300 text-[#070D19] font-bold text-xs px-4 py-2.5 rounded-lg flex items-center gap-1.5 transition-colors self-end sm:self-center shadow-sm">
|
||||
<Plus className="w-4 h-4 stroke-[3]" />
|
||||
<span>Add step</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- AUTOMATION RULE CARDS LIST --- */}
|
||||
<div className="space-y-3">
|
||||
{/* Rule 1 */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
|
||||
<span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
|
||||
</div>
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
Auto-dispatch critical breakdowns
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs font-mono">
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
|
||||
WHEN Request raised
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
|
||||
IF Criticality = Critical
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
|
||||
THEN Assign to on-call M&E + notify supervisor
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end md:self-center gap-1 pl-4">
|
||||
<div className="text-right font-mono">
|
||||
<p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
|
||||
<p className="text-[11px] text-slate-500">12 runs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rule 2 */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
|
||||
<span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
|
||||
</div>
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
SLA breach escalation
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs font-mono">
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
|
||||
WHEN SLA timer > 90%
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
|
||||
IF Status ≠ Completed
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
|
||||
THEN Escalate to L2 + email FM lead
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end md:self-center gap-1 pl-4">
|
||||
<div className="text-right font-mono">
|
||||
<p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
|
||||
<p className="text-[11px] text-slate-500">5 runs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rule 3 */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
|
||||
<span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
|
||||
</div>
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
PPM from health alert
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs font-mono">
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
|
||||
WHEN Asset health < 58
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
|
||||
IF No open PM
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
|
||||
THEN Raise condition-based PM work order
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end md:self-center gap-1 pl-4">
|
||||
<div className="text-right font-mono">
|
||||
<p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
|
||||
<p className="text-[11px] text-slate-500">8 runs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rule 4 */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-slate-700">
|
||||
<span className="inline-block h-5 w-5 transform translate-x-0 rounded-full bg-[#070D19] shadow" />
|
||||
</div>
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
Low-stock reorder
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs font-mono">
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
|
||||
WHEN Stock ≤ minimum
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
|
||||
IF Item is consumable
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
|
||||
THEN Draft purchase request to store
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end md:self-center gap-1 pl-4">
|
||||
<div className="text-right font-mono">
|
||||
<p className="text-xs font-semibold text-slate-400">Paused</p>
|
||||
<p className="text-[11px] text-slate-500">0 runs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rule 5 */}
|
||||
<div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
|
||||
<span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
|
||||
</div>
|
||||
<div className="space-y-2 min-w-0 flex-1">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
Visitor pre-approval
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs font-mono">
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
|
||||
WHEN Visitor invited
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
|
||||
IF Host confirmed
|
||||
</span>
|
||||
<span className="text-slate-600 font-sans">→</span>
|
||||
<span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
|
||||
THEN Issue QR pass + notify security
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end md:self-center gap-1 pl-4">
|
||||
<div className="text-right font-mono">
|
||||
<p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
|
||||
<p className="text-[11px] text-slate-500">23 runs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<InfoBanner
|
||||
boldText='No IT in the loop: '
|
||||
normalText='operations staff compose these rules directly. Every automation is versioned and reversible — pause any rule with the toggle and the workflow reverts to manual instantly.'
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user