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

177

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

Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

3.2k
login
html , css

Author:
Hacker Development

9 months ago

571
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

10 months ago

730
Animated Sign in background
Sign-in page with floating blobs as background.

Author:
Nii Anyetei

1 year ago

3.6k
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

1 year ago

3.1k
login page
login page

Author:
Tofayel Islam

2 months ago

229
Sign up
sign up page

Author:
gidy

9 months ago

1.3k
Sign in form
includes Google login button

Author:
pratik bhajankar

1 year ago

2.1k
User registration form

Author:
Laurits

3 years ago

11.5k
Instagram Login Clone
login form and signup

Author:
gidy

9 months ago

515
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

9 months ago

1.1k
Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Author:
Lekhraj Ghimire

8 months ago

797

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components