Home
Mario Williams
Allconnect Logic

Allconnect Logic

This tailwind example is contributed by Mario Williams, on 25-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Mario Williams

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OG&E Program Logic Tree</title>
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    
    
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/lucide@latest"></script>

// --- Icons ---
        const Icons = {
            Home: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>,
            Zap: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
            User: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>,
            Check: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
            ChevronRight: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>,
            RefreshCw: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg>,
            Clock: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
            Sun: () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
        };

const STEPS = {
            START: 0,
            ELIGIBILITY: 1,
            SMART_HOURS_SELECTION: 2,
            RESULT: 3
        };

// --- Main App ---
        function App() {
            const [currentStep, setCurrentStep] = useState(STEPS.START);
            
            // State for Eligibility Answers
            const [eligibility, setEligibility] = useState({
                ownership: null, // 'renter' | 'owner'
                homeAge: null,   // 'new' (<5) | 'old' (5+)
                eeStatus: null   // 'yes' | 'no' (Previous EE participation)
            });

// State for Final Recommendation
            const [recommendation, setRecommendation] = useState(null);

const resetFlow = () => {
                setEligibility({ ownership: null, homeAge: null, eeStatus: null });
                setRecommendation(null);
                setCurrentStep(STEPS.START);
            };

// Logic to process Step 1 inputs
            const processEligibility = () => {
                const { ownership, homeAge, eeStatus } = eligibility;

// Validate inputs
                if (!ownership || !homeAge || !eeStatus) {
                    alert("Please answer all questions.");
                    return;
                }

// LOGIC FLOW as defined in requirements:
                
                // 1. IF Home is New (< 5 years) -> Recommend: Smart Hours (Skip to Step 3)
                if (homeAge === 'new') {
                    setCurrentStep(STEPS.SMART_HOURS_SELECTION);
                    return;
                }

// 2. IF Home is Older (5+ yrs)
                if (homeAge === 'old') {
                    // AND Renter -> Recommend: EE Awareness
                    if (ownership === 'renter') {
                        setRecommendation({ type: 'EE_AWARENESS' });
                        setCurrentStep(STEPS.RESULT);
                        return;
                    }

// AND Owner
                    if (ownership === 'owner') {
                        // AND Recent EE Participation -> Recommend: Smart Hours
                        if (eeStatus === 'yes') {
                            setCurrentStep(STEPS.SMART_HOURS_SELECTION);
                            return;
                        }
                        // AND NO Recent EE Participation -> Recommend: EE Awareness
                        else {
                            setRecommendation({ type: 'EE_AWARENESS' });
                            setCurrentStep(STEPS.RESULT);
                            return;
                        }
                    }
                }
            };

const selectSmartHoursPlan = (planType) => {
                setRecommendation({ type: planType });
                setCurrentStep(STEPS.RESULT);
            };

return (
                <div className="min-h-screen flex flex-col items-center justify-center p-4">
                    
                    {/* Header */}
                    <div className="w-full max-w-lg mb-6 flex items-center justify-between text-slate-700">
                        <div className="flex items-center gap-2">
                            <div className="bg-orange-500 p-2 rounded-lg text-white">
                                <Icons.Zap />
                            </div>
                            <div className="leading-tight">
                                <h1 className="font-bold text-lg">OG&E Logic Tree</h1>
                                <p className="text-xs text-slate-500">Program Recommendation Wizard</p>
                            </div>
                        </div>
                        {currentStep > STEPS.START && (
                            <button onClick={resetFlow} className="text-sm text-orange-600 font-semibold hover:underline flex items-center gap-1">
                                <Icons.RefreshCw size={14}/> Reset
                            </button>
                        )}
                    </div>

{/* Main Content Card */}
                    <div className="bg-white w-full max-w-lg rounded-2xl shadow-xl overflow-hidden border border-slate-100 fade-in">
                        
                        {/* Progress Bar (Visual only) */}
                        <div className="w-full h-1 bg-slate-100">
                            <div 
                                className="h-full bg-orange-500 transition-all duration-500"
                                style={{ width: `${(currentStep / 3) * 100}%` }}
                            ></div>
                        </div>

<div className="p-6 md:p-8">
                            
                            {/* STEP 0: START */}
                            {currentStep === STEPS.START && (
                                <div className="text-center space-y-6 py-8">
                                    <div className="w-20 h-20 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <Icons.User />
                                    </div>
                                    <h2 className="text-2xl font-bold text-slate-800">Start New Interaction</h2>
                                    <p className="text-slate-500">Determine the best OG&E program for the customer by answering a few quick questions.</p>
                                    <button 
                                        onClick={() => setCurrentStep(STEPS.ELIGIBILITY)}
                                        className="w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-6 rounded-xl transition-colors shadow-lg shadow-orange-500/30 flex items-center justify-center gap-2"
                                    >
                                        Begin Assessment <Icons.ChevronRight />
                                    </button>
                                </div>
                            )}

{/* STEP 1: ELIGIBILITY */}
                            {currentStep === STEPS.ELIGIBILITY && (
                                <div className="space-y-6 fade-in">
                                    <div className="flex items-center gap-2 mb-2">
                                        <span className="bg-blue-100 text-blue-700 text-xs font-bold px-2 py-1 rounded">Step 1</span>
                                        <h2 className="text-xl font-bold text-slate-800">Eligibility Check</h2>
                                    </div>

{/* Q1 */}
                                    <div className="space-y-3">
                                        <label className="block text-sm font-semibold text-slate-700">A. Is the customer a Renter or Owner?</label>
                                        <div className="grid grid-cols-2 gap-3">
                                            <SelectionButton 
                                                active={eligibility.ownership === 'renter'} 
                                                onClick={() => setEligibility({...eligibility, ownership: 'renter'})}
                                            >
                                                Renter
                                            </SelectionButton>
                                            <SelectionButton 
                                                active={eligibility.ownership === 'owner'} 
                                                onClick={() => setEligibility({...eligibility, ownership: 'owner'})}
                                            >
                                                Owner
                                            </SelectionButton>
                                        </div>
                                    </div>

{/* Q2 */}
                                    <div className="space-y-3">
                                        <label className="block text-sm font-semibold text-slate-700">B. Is the home older than 5 years?</label>
                                        <div className="grid grid-cols-2 gap-3">
                                            <SelectionButton 
                                                active={eligibility.homeAge === 'old'} 
                                                onClick={() => setEligibility({...eligibility, homeAge: 'old'})}
                                            >
                                                Yes (5+ Years)
                                            </SelectionButton>
                                            <SelectionButton 
                                                active={eligibility.homeAge === 'new'} 
                                                onClick={() => setEligibility({...eligibility, homeAge: 'new'})}
                                            >
                                                No (New Home)
                                            </SelectionButton>
                                        </div>
                                    </div>

{/* Q3 */}
                                    <div className="space-y-3">
                                        <label className="block text-sm font-semibold text-slate-700">C. Has customer previously participated in Energy Efficiency (EE)?</label>
                                        <div className="grid grid-cols-2 gap-3">
                                            <SelectionButton 
                                                active={eligibility.eeStatus === 'yes'} 
                                                onClick={() => setEligibility({...eligibility, eeStatus: 'yes'})}
                                            >
                                                Yes
                                            </SelectionButton>
                                            <SelectionButton 
                                                active={eligibility.eeStatus === 'no'} 
                                                onClick={() => setEligibility({...eligibility, eeStatus: 'no'})}
                                            >
                                                No
                                            </SelectionButton>
                                        </div>
                                    </div>

<div className="pt-4">
                                        <button 
                                            onClick={processEligibility}
                                            disabled={!eligibility.ownership || !eligibility.homeAge || !eligibility.eeStatus}
                                            className="w-full bg-slate-800 disabled:bg-slate-300 hover:bg-slate-900 text-white font-bold py-4 rounded-xl transition-colors flex justify-center items-center gap-2"
                                        >
                                            Next Step <Icons.ChevronRight size={20} />
                                        </button>
                                    </div>
                                </div>
                            )}

{/* STEP 3 (Technically Step 2 in prompt logic): SMART HOURS SELECTION */}
                            {currentStep === STEPS.SMART_HOURS_SELECTION && (
                                <div className="space-y-6 fade-in">
                                    <div className="flex items-center gap-2 mb-2">
                                        <span className="bg-green-100 text-green-700 text-xs font-bold px-2 py-1 rounded">Recommendation Found</span>
                                        <h2 className="text-xl font-bold text-slate-800">Refine Smart Hours</h2>
                                    </div>
                                    
                                    <p className="text-slate-600 text-sm">The customer is a match for Smart Hours. Ask the following to determine the specific plan:</p>

<div className="space-y-3">
                                        <OptionCard 
                                            icon={<Icons.Sun className="text-orange-500" />}
                                            title="Shift Usage?"
                                            desc="Can you shift heavy usage outside 2–7 p.m. on summer weekdays and are comfortable monitoring it?"
                                            onClick={() => selectSmartHoursPlan('SMART_HOURS_DAILY')}
                                        />
                                        
                                        <OptionCard 
                                            icon={<Icons.Clock className="text-blue-500" />}
                                            title="Predictable Pricing?"
                                            desc="Do you prefer predictable pricing and less day-to-day change?"
                                            onClick={() => selectSmartHoursPlan('SMART_HOURS_FIXED')}
                                        />

<OptionCard 
                                            icon={<Icons.Zap className="text-yellow-500" />}
                                            title="EV or Overnight Usage?"
                                            desc="Do you charge an EV or run big loads overnight?"
                                            onClick={() => selectSmartHoursPlan('SMART_HOURS_OVERNIGHT')}
                                        />
                                    </div>
                                </div>
                            )}

{/* STEP 4: RESULT */}
                            {currentStep === STEPS.RESULT && recommendation && (
                                <div className="text-center fade-in">
                                    <ResultView recommendation={recommendation} />
                                </div>
                            )}

</div>
                    </div>
                </div>
            );
        }

// --- Sub Components ---

function SelectionButton({ active, onClick, children }) {
            return (
                <button 
                    onClick={onClick}
                    className={`py-3 px-2 rounded-lg text-sm font-medium border-2 transition-all duration-200
                        ${active 
                            ? 'border-blue-500 bg-blue-50 text-blue-700 shadow-sm transform scale-[1.02]' 
                            : 'border-slate-200 text-slate-600 hover:border-slate-300 hover:bg-slate-50'
                        }`}
                >
                    {children}
                </button>
            );
        }

function OptionCard({ icon, title, desc, onClick }) {
            return (
                <button 
                    onClick={onClick}
                    className="w-full text-left bg-white border border-slate-200 p-4 rounded-xl hover:shadow-md hover:border-orange-300 transition-all flex items-start gap-4 group"
                >
                    <div className="mt-1 bg-slate-50 p-2 rounded-lg group-hover:bg-white transition-colors">
                        {icon}
                    </div>
                    <div>
                        <h3 className="font-bold text-slate-800">{title}</h3>
                        <p className="text-sm text-slate-500 mt-1 leading-snug">{desc}</p>
                    </div>
                </button>
            );
        }

function ResultView({ recommendation }) {
            const config = {
                'EE_AWARENESS': {
                    title: 'Energy Efficiency (EE) Awareness',
                    color: 'blue',
                    mainText: 'Recommend the Energy Efficiency Awareness Program.',
                    subText: 'Since the home is older and they are a renter (or owner with no recent participation), this is the best fit.'
                },
                'SMART_HOURS_DAILY': {
                    title: 'Smart Hours: Daily (VPP)',
                    color: 'green',
                    mainText: 'Recommend Smart Hours Daily (Variable Peak Pricing).',
                    subText: 'Best for customers who can actively shift usage away from 2-7 PM.'
                },
                'SMART_HOURS_FIXED': {
                    title: 'Smart Hours: Fixed (TOU)',
                    color: 'green',
                    mainText: 'Recommend Smart Hours Fixed (Time of Use).',
                    subText: 'Best for customers needing price predictability.'
                },
                'SMART_HOURS_OVERNIGHT': {
                    title: 'Smart Hours: Overnight (EV-TOU)',
                    color: 'green',
                    mainText: 'Recommend Smart Hours Overnight.',
                    subText: 'Best for EV owners or overnight heavy usage.'
                }
            }[recommendation.type];

const isSmartHours = recommendation.type.includes('SMART_HOURS');

return (
                <div className="space-y-6">
                    <div className={`p-4 rounded-full w-16 h-16 mx-auto flex items-center justify-center bg-${config.color}-100 text-${config.color}-600`}>
                        <Icons.Check size={32} />
                    </div>
                    
                    <div>
                        <h2 className="text-2xl font-bold text-slate-800">{config.title}</h2>
                        <p className="text-lg font-medium text-slate-600 mt-2">{config.mainText}</p>
                    </div>

<div className="bg-slate-50 rounded-xl p-5 text-left space-y-4 border border-slate-200">
                        <h3 className="text-xs uppercase tracking-wide font-bold text-slate-400">Mandatory Scripting</h3>
                        
                        {/* EE Awareness Script */}
                        {recommendation.type === 'EE_AWARENESS' && (
                            <ul className="space-y-3">
                                <li className="flex items-start gap-3">
                                    <div className="mt-1 text-blue-500"><Icons.Check size={16}/></div>
                                    <span className="text-slate-700 text-sm">"Based on your home profile, we recommend starting with our Energy Efficiency program."</span>
                                </li>
                                <li className="flex items-start gap-3">
                                    <div className="mt-1 text-blue-500"><Icons.Check size={16}/></div>
                                    <span className="text-slate-700 text-sm font-semibold">"Someone will contact you within two weeks."</span>
                                </li>
                            </ul>
                        )}

{/* Smart Hours Scripts */}
                        {isSmartHours && (
                            <ul className="space-y-3">
                                <li className="flex items-start gap-3">
                                    <div className="mt-1 text-green-500"><Icons.Check size={16}/></div>
                                    <span className="text-slate-700 text-sm">
                                        <span className="font-bold text-green-700">Best Bill Guarantee:</span> "If your costs are higher on this plan, you will receive a credit on your 13th bill."
                                    </span>
                                </li>
                                <li className="flex items-start gap-3">
                                    <div className="mt-1 text-green-500"><Icons.Check size={16}/></div>
                                    <span className="text-slate-700 text-sm">
                                        "You can switch plans later, but you must stay for 12 months to receive the Best Bill Guarantee."
                                    </span>
                                </li>
                                <li className="flex items-start gap-3">
                                    <div className="mt-1 text-green-500"><Icons.Check size={16}/></div>
                                    <span className="text-slate-700 text-sm">
                                        <span className="font-bold">If Senior (65+ in OK):</span> Mention the $10 summer credit ($2/month June-Oct).
                                    </span>
                                </li>
                            </ul>
                        )}
                    </div>
                    
                    {isSmartHours && (
                         <div className="text-xs text-slate-400 italic">
                             *Ensure customer email is verified for Smart Hours enrollment.
                         </div>
                    )}
                </div>
            );
        }

const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<App />);
    </script>
</body>
</html>

Related Examples

Login

Author:
Amine Ghanim

9 months ago

1k
Simple Login Form
Username and Password inputs with Login button. Very simple. You might like it.

Author:
Jerome Soriano

1 year ago

1.8k
Sign up form

Author:
Rajesh Maheshwari

9 months ago

958
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

2 months ago

162
Sign In page with google/facebook/twitter buttons

Author:
Orion.c

2 years ago

21.9k
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

3.6k
Login form

Author:
Gopi Yadav

3 years ago

11.3k
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

2 years ago

10.7k
Loginpage

Author:
Ramesh Kumar Sah

3 months ago

263
Login screen
Reward login screen

Author:
ehmasuk

3 months ago

170
Elegant Login Form Design for Your Platform
A professionally designed and responsive login form built with TailwindCSS. Featuring a sleek layout with a gradient button, modern input fields, and user-friendly interactions, it’s perfect for any e-commerce, SaaS, or online platform. Includes options for "Forgot Password" and "Remember Me" functionality, providing a seamless user experience.

Author:
SHARIFUL ISLAM

10 months ago

1.2k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Author:
Steve NGOYA

6 months ago

723

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components