sync: Auto-sync from Mikes-MacBook-Air.local at 2026-03-09 08:14:13

Synced files:
- Session logs updated
- Latest context and credentials
- Command/directive updates

Machine: Mikes-MacBook-Air.local
Timestamp: 2026-03-09 08:14:13

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

projects/msp-tools/quote-wizard/frontend/src/components/pricing/ExpandableInfo.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronDown, HelpCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface ExpandableInfoProps {
+  title: string;
+  children: React.ReactNode;
+  defaultExpanded?: boolean;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+export function ExpandableInfo({
+  title,
+  children,
+  defaultExpanded = false,
+  icon,
+  className,
+}: ExpandableInfoProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <div className={cn('border border-gray-200 rounded-lg overflow-hidden', className)}>
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 transition-colors"
+        aria-expanded={isExpanded}
+      >
+        <div className="flex items-center gap-3">
+          {icon || <HelpCircle className="w-5 h-5 text-[#fe7400]" />}
+          <span className="font-medium text-[#333d49]">{title}</span>
+        </div>
+        <motion.div
+          animate={{ rotate: isExpanded ? 180 : 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          <ChevronDown className="w-5 h-5 text-gray-400" />
+        </motion.div>
+      </button>
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <div className="px-4 pb-4 pt-0 text-sm text-gray-600 border-t border-gray-100">
+              <div className="pt-4">{children}</div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

projects/msp-tools/quote-wizard/frontend/src/components/pricing/PricingCard.tsx

@@ -0,0 +1,81 @@
+import { motion } from 'framer-motion';
+import { Check } from 'lucide-react';
+import { Card, Button } from '@/components/ui';
+import { cn, formatCurrency } from '@/lib/utils';
+import type { PricingTier } from '@/types/quote';
+
+export interface PricingCardProps {
+  tier: PricingTier;
+  isSelected: boolean;
+  deviceCount: number;
+  onSelect: (tierId: string) => void;
+}
+
+export function PricingCard({ tier, isSelected, deviceCount, onSelect }: PricingCardProps) {
+  const monthlyEstimate = tier.basePrice + tier.perDevicePrice * deviceCount;
+
+  return (
+    <motion.div
+      whileHover={{ y: -4 }}
+      transition={{ duration: 0.2 }}
+    >
+      <Card
+        variant={isSelected ? 'highlighted' : tier.recommended ? 'elevated' : 'default'}
+        padding="none"
+        className={cn(
+          'relative overflow-hidden',
+          tier.recommended && !isSelected && 'ring-2 ring-[#333d49]'
+        )}
+      >
+        {/* Recommended badge */}
+        {tier.recommended && (
+          <div className="absolute top-0 right-0">
+            <div className="bg-[#fe7400] text-white text-xs font-semibold px-3 py-1 rounded-bl-lg">
+              Recommended
+            </div>
+          </div>
+        )}
+
+        <div className="p-6">
+          {/* Header */}
+          <div className="mb-4">
+            <h3 className="text-xl font-semibold text-[#333d49]">{tier.name}</h3>
+            <p className="text-sm text-gray-500 mt-1">{tier.description}</p>
+          </div>
+
+          {/* Pricing */}
+          <div className="mb-6">
+            <div className="flex items-baseline gap-1">
+              <span className="text-3xl font-bold text-[#333d49]">
+                {formatCurrency(monthlyEstimate)}
+              </span>
+              <span className="text-gray-500">/month</span>
+            </div>
+            <p className="text-xs text-gray-400 mt-1">
+              {formatCurrency(tier.basePrice)} base + {formatCurrency(tier.perDevicePrice)}/device
+            </p>
+          </div>
+
+          {/* Features */}
+          <ul className="space-y-2 mb-6">
+            {tier.features.map((feature, index) => (
+              <li key={index} className="flex items-start gap-2 text-sm">
+                <Check className="w-4 h-4 text-[#fe7400] mt-0.5 flex-shrink-0" />
+                <span className="text-gray-600">{feature}</span>
+              </li>
+            ))}
+          </ul>
+
+          {/* Select button */}
+          <Button
+            variant={isSelected ? 'primary' : 'outline'}
+            className="w-full"
+            onClick={() => onSelect(tier.id)}
+          >
+            {isSelected ? 'Selected' : 'Select Plan'}
+          </Button>
+        </div>
+      </Card>
+    </motion.div>
+  );
+}

projects/msp-tools/quote-wizard/frontend/src/components/pricing/TierComparison.tsx

@@ -0,0 +1,116 @@
+import { Check, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { PricingTier } from '@/types/quote';
+
+export interface TierComparisonProps {
+  tiers: PricingTier[];
+  selectedTier?: string;
+  onSelectTier: (tierId: string) => void;
+}
+
+interface FeatureRow {
+  name: string;
+  essential: boolean | string;
+  professional: boolean | string;
+  enterprise: boolean | string;
+}
+
+const comparisonFeatures: FeatureRow[] = [
+  { name: 'Remote Monitoring', essential: true, professional: true, enterprise: true },
+  { name: 'Help Desk Support', essential: '8x5', professional: '24x7', enterprise: '24x7 Priority' },
+  { name: 'Patch Management', essential: true, professional: true, enterprise: true },
+  { name: 'Antivirus Protection', essential: 'Basic', professional: 'Advanced', enterprise: 'Advanced' },
+  { name: 'Backup & Recovery', essential: false, professional: true, enterprise: true },
+  { name: 'Network Monitoring', essential: false, professional: true, enterprise: true },
+  { name: 'On-Site Support', essential: false, professional: 'Limited', enterprise: 'Unlimited' },
+  { name: 'Vendor Management', essential: false, professional: true, enterprise: true },
+  { name: 'Dedicated Account Manager', essential: false, professional: false, enterprise: true },
+  { name: 'Virtual CIO Services', essential: false, professional: false, enterprise: true },
+  { name: 'Compliance Management', essential: false, professional: false, enterprise: true },
+  { name: 'Security Training', essential: false, professional: false, enterprise: true },
+  { name: 'Business Reviews', essential: 'Annual', professional: 'Quarterly', enterprise: 'Monthly' },
+];
+
+export function TierComparison({ tiers, selectedTier, onSelectTier }: TierComparisonProps) {
+  const renderCell = (value: boolean | string) => {
+    if (typeof value === 'boolean') {
+      return value ? (
+        <Check className="w-5 h-5 text-green-500 mx-auto" />
+      ) : (
+        <X className="w-5 h-5 text-gray-300 mx-auto" />
+      );
+    }
+    return <span className="text-sm text-[#333d49]">{value}</span>;
+  };
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full border-collapse">
+        <thead>
+          <tr>
+            <th className="text-left p-4 border-b border-gray-200 bg-gray-50">
+              <span className="font-semibold text-[#333d49]">Feature</span>
+            </th>
+            {tiers.map((tier) => (
+              <th
+                key={tier.id}
+                className={cn(
+                  'p-4 border-b border-gray-200 text-center cursor-pointer transition-colors',
+                  selectedTier === tier.id
+                    ? 'bg-[#fe7400]/10'
+                    : 'bg-gray-50 hover:bg-gray-100'
+                )}
+                onClick={() => onSelectTier(tier.id)}
+              >
+                <span
+                  className={cn(
+                    'font-semibold',
+                    selectedTier === tier.id ? 'text-[#fe7400]' : 'text-[#333d49]'
+                  )}
+                >
+                  {tier.name}
+                </span>
+                {tier.recommended && (
+                  <span className="block text-xs text-[#fe7400] mt-1">Recommended</span>
+                )}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {comparisonFeatures.map((feature, index) => (
+            <tr key={feature.name} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'}>
+              <td className="p-4 border-b border-gray-100 text-sm text-gray-600">
+                {feature.name}
+              </td>
+              <td
+                className={cn(
+                  'p-4 border-b border-gray-100 text-center',
+                  selectedTier === 'essential' && 'bg-[#fe7400]/5'
+                )}
+              >
+                {renderCell(feature.essential)}
+              </td>
+              <td
+                className={cn(
+                  'p-4 border-b border-gray-100 text-center',
+                  selectedTier === 'professional' && 'bg-[#fe7400]/5'
+                )}
+              >
+                {renderCell(feature.professional)}
+              </td>
+              <td
+                className={cn(
+                  'p-4 border-b border-gray-100 text-center',
+                  selectedTier === 'enterprise' && 'bg-[#fe7400]/5'
+                )}
+              >
+                {renderCell(feature.enterprise)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

projects/msp-tools/quote-wizard/frontend/src/components/pricing/index.ts

@@ -0,0 +1,3 @@
+export { PricingCard, type PricingCardProps } from './PricingCard';
+export { ExpandableInfo, type ExpandableInfoProps } from './ExpandableInfo';
+export { TierComparison, type TierComparisonProps } from './TierComparison';