Final fixes 2.0.0

client/src/pages/Businesses.jsx

@@ -193,30 +193,54 @@ function UnifiedBusinessCard({
   const isImporting = !isScraped && creatingSalesChannelId === channelId;
   const isLoadingReview = isScraped && reviewLoadingBusinessId === businessId;
   const hasWebsiteUrl = Boolean(item.channel?.websiteUrl);
-  const canOpenBusiness = isScraped && item.business && !isOpening;
+  const isCardInteractive = isScraped ? Boolean(item.business) && !isOpening : !isImporting;
+  const cardActionLabel = isScraped
+    ? `Open ${name}`
+    : hasWebsiteUrl
+      ? `Start onboarding for ${name}`
+      : `Use fallback URL for ${name}`;
+
+  function triggerCardAction() {
+    if (!isCardInteractive) return;
+
+    if (isScraped) {
+      if (!item.business) return;
+      onSelect(item.business);
+      return;
+    }
+
+    if (hasWebsiteUrl) {
+      onImport(item.channel);
+      return;
+    }
+
+    onFallback();
+  }
 
   function handleCardClick() {
-    if (!canOpenBusiness) return;
+    triggerCardAction();
-    onSelect(item.business);
   }
 
   function handleCardKeyDown(event) {
-    if (!canOpenBusiness) return;
+    if (!isCardInteractive) return;
 
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
-      onSelect(item.business);
+      triggerCardAction();
     }
   }
 
   return (
     <div
-      className={`group rounded-lg bg-white border border-gray-200 transition-all overflow-hidden ${isScraped ? 'cursor-pointer hover:border-primary-blue hover:shadow-sm' : 'hover:border-primary-blue'}`}
+      className={`group rounded-lg bg-white border border-gray-200 transition-all overflow-hidden ${isCardInteractive
+          ? 'cursor-pointer hover:border-primary-blue hover:shadow-sm'
+          : 'cursor-default'
+        }`}
       onClick={handleCardClick}
       onKeyDown={handleCardKeyDown}
-      role={isScraped ? 'button' : undefined}
+      role={isCardInteractive ? 'button' : undefined}
-      tabIndex={isScraped ? 0 : undefined}
+      tabIndex={isCardInteractive ? 0 : undefined}
-      aria-label={isScraped ? `Open ${name}` : undefined}
+      aria-label={isCardInteractive ? cardActionLabel : undefined}
     >
       <div className="p-5">
         <div className="flex items-start justify-between gap-3">
@@ -283,7 +307,8 @@ function UnifiedBusinessCard({
         ) : (
           <>
             <button
-              onClick={() => {
+              onClick={(event) => {
+                event.stopPropagation();
                 if (hasWebsiteUrl) {
                   onImport(item.channel);
                   return;

client/src/pages/Events.jsx

@@ -19,90 +19,67 @@ const SUPPORTED_DLT_VARIABLE_OPTIONS = DLT_VARIABLE_OPTIONS;
 const DLT_TOKEN_SET = new Set(SUPPORTED_DLT_VARIABLE_OPTIONS.map((option) => option.token));
 const DLT_TOKEN_REGEX = /\{#(?:var|numeric|url|urlott|cbn|email|alphanumeric)#\}/g;
 const DLT_TOKEN_LIKE_REGEX = /\{#[^{}]*#\}/g;
-const DELIVERY_EVENT_SLUGS = new Set([
+const ORDER_PAYMENT_EVENT_SLUGS = [
-  'out_for_pickup',
+  'placed',
-  'bag_picked',
+  'payment_failed',
-  'bag_reached_drop_point',
+];
-  'in_transit',
+const DELIVERY_EVENT_SLUGS = [
   'out_for_delivery',
   'delivery_attempt_failed',
   'delivery_done',
-  'handed_over_to_customer',
+];
-  'bag_lost',
+const CANCELLATION_EVENT_SLUGS = [
-]);
-const CANCELLATION_EVENT_SLUGS = new Set([
-  'bag_not_confirmed',
   'cancelled_at_dp',
   'cancelled_customer',
-  'cancelled_failed_at_dp',
-  'cancelled_fynd',
   'rejected_by_customer',
-]);
+];
-const REFUND_EVENT_SLUGS = new Set([
+const RETURN_EVENT_SLUGS = [
-  'credit_note_generated',
+  'return_initiated',
-  'partial_refund_completed',
+  'return_bag_picked',
-  'refund_acknowledged',
+  'return_bag_delivered',
-  'refund_approved',
+];
+const REFUND_EVENT_SLUGS = [
   'refund_completed',
   'refund_failed',
   'refund_initiated',
-  'refund_on_hold',
+];
-  'refund_pending',
+const CUSTOMER_EVENT_SECTIONS = [
-  'refund_pending_for_approval',
-  'refund_retry',
-]);
-const RETURN_EVENT_SLUGS = new Set([
-  'assigning_return_dp',
-  'internal_return_dp_reassign',
-  'deadstock_defective',
-  'deadstock_defective_lost',
-]);
-const EVENT_GROUPS = [
   {
-    id: 'fulfillment',
+    id: 'order_payment',
-    label: 'Order & Fulfillment',
+    label: 'Order & Payment',
-    description: 'Core order confirmation, allocation, packing, and dispatch readiness stages.',
+    description: 'Core order confirmation and critical payment updates customers genuinely care about.',
-    defaultExpanded: false,
+    slugs: ORDER_PAYMENT_EVENT_SLUGS,
   },
   {
     id: 'delivery',
     label: 'Delivery Journey',
-    description: 'Courier pickup, in-transit updates, and final handover milestones.',
+    description: 'The moments that matter most once an order is close to the doorstep.',
-    defaultExpanded: false,
+    slugs: DELIVERY_EVENT_SLUGS,
   },
   {
     id: 'cancellations',
     label: 'Cancellations & Rejections',
-    description: 'Customer, merchant, and delivery-partner driven cancellations and rejections.',
+    description: 'Critical order-stop events that customers should be notified about immediately.',
-    defaultExpanded: false,
+    slugs: CANCELLATION_EVENT_SLUGS,
   },
   {
-    id: 'returns',
+    id: 'returns_refunds',
-    label: 'Returns',
+    label: 'Returns & Refunds',
-    description: 'Return initiation, pickup, transit, and merchant-side return handling.',
+    description: 'Only the key return and refund milestones worth notifying customers about.',
-    defaultExpanded: false,
+    slugs: [...RETURN_EVENT_SLUGS, ...REFUND_EVENT_SLUGS],
-  },
-  {
-    id: 'refunds',
-    label: 'Refunds',
-    description: 'Refund processing and credit-note states across payment flows.',
-    defaultExpanded: false,
-  },
-  {
-    id: 'rto',
-    label: 'RTO',
-    description: 'Return-to-origin movement and completion states after failed delivery.',
-    defaultExpanded: false,
   },
   {
     id: 'custom',
     label: 'Custom Events',
     description: 'Business-specific events you added manually for your own messaging flows.',
-    defaultExpanded: false,
+    slugs: [],
   },
 ];
-const DEFAULT_EXPANDED_GROUPS = EVENT_GROUPS.reduce((acc, group) => {
+const CUSTOMER_EVENT_SECTION_BY_SLUG = new Map(
-  acc[group.id] = group.defaultExpanded;
+  CUSTOMER_EVENT_SECTIONS.flatMap((section) => section.slugs.map((slug) => [slug, section.id])),
+);
+const CUSTOMER_EVENT_SECTION_ORDER = CUSTOMER_EVENT_SECTIONS.reduce((acc, section) => {
+  acc[section.id] = new Map(section.slugs.map((slug, index) => [slug, index]));
   return acc;
 }, {});
 const EVENT_TEMPLATE_STATUS_CONFIG = {
@@ -123,37 +100,6 @@ const EVENT_TEMPLATE_STATUS_CONFIG = {
   },
 };
 
-const EVENT_GROUP_STYLE_CONFIG = {
-  fulfillment: {
-    markerShell: 'border-slate-200 bg-slate-50',
-    markerDot: 'bg-slate-500',
-  },
-  delivery: {
-    markerShell: 'border-sky-200 bg-sky-50',
-    markerDot: 'bg-sky-500',
-  },
-  cancellations: {
-    markerShell: 'border-rose-200 bg-rose-50',
-    markerDot: 'bg-rose-500',
-  },
-  returns: {
-    markerShell: 'border-indigo-200 bg-indigo-50',
-    markerDot: 'bg-indigo-500',
-  },
-  refunds: {
-    markerShell: 'border-emerald-200 bg-emerald-50',
-    markerDot: 'bg-emerald-500',
-  },
-  rto: {
-    markerShell: 'border-fuchsia-200 bg-fuchsia-50',
-    markerDot: 'bg-fuchsia-500',
-  },
-  custom: {
-    markerShell: 'border-indigo-200 bg-indigo-50',
-    markerDot: 'bg-indigo-500',
-  },
-};
-
 function normalizeTemplateStatus(status) {
   return status === 'whitelisted' ? 'whitelisted' : 'pending_whitelisting';
 }
@@ -174,16 +120,11 @@ function buildSelectedTemplatePreview(template = {}) {
   };
 }
 
-function getEventGroupId(event) {
+function getCustomerFacingSectionId(event) {
   const slug = String(event?.slug || '');
 
   if (!event?.isDefault) return 'custom';
-  if (slug.startsWith('rto_') || slug === 'return_to_origin') return 'rto';
+  return CUSTOMER_EVENT_SECTION_BY_SLUG.get(slug) || null;
-  if (slug.startsWith('return_') || RETURN_EVENT_SLUGS.has(slug)) return 'returns';
-  if (slug.startsWith('refund_') || REFUND_EVENT_SLUGS.has(slug)) return 'refunds';
-  if (CANCELLATION_EVENT_SLUGS.has(slug)) return 'cancellations';
-  if (DELIVERY_EVENT_SLUGS.has(slug)) return 'delivery';
-  return 'fulfillment';
 }
 
 function matchesEventSearch(event, searchTerm) {
@@ -195,11 +136,33 @@ function matchesEventSearch(event, searchTerm) {
     .some((value) => String(value).toLowerCase().includes(query));
 }
 
-function buildGroupedEvents(events, searchTerm) {
+function sortSectionEvents(sectionId, events) {
-  return EVENT_GROUPS.map((group) => ({
+  if (sectionId === 'custom') {
-    ...group,
+    return [...events].sort((left, right) => String(left?.label || '').localeCompare(String(right?.label || '')));
-    events: events.filter((event) => getEventGroupId(event) === group.id && matchesEventSearch(event, searchTerm)),
+  }
-  })).filter((group) => group.events.length > 0);
+
+  const orderMap = CUSTOMER_EVENT_SECTION_ORDER[sectionId] || new Map();
+  return [...events].sort((left, right) => {
+    const leftRank = orderMap.get(String(left?.slug || '')) ?? Number.MAX_SAFE_INTEGER;
+    const rightRank = orderMap.get(String(right?.slug || '')) ?? Number.MAX_SAFE_INTEGER;
+
+    if (leftRank !== rightRank) return leftRank - rightRank;
+    return String(left?.label || '').localeCompare(String(right?.label || ''));
+  });
+}
+
+function buildVisibleEventSections(events, searchTerm) {
+  return CUSTOMER_EVENT_SECTIONS.map((section) => {
+    const filteredEvents = events.filter((event) => (
+      getCustomerFacingSectionId(event) === section.id
+      && matchesEventSearch(event, searchTerm)
+    ));
+
+    return {
+      ...section,
+      events: sortSectionEvents(section.id, filteredEvents),
+    };
+  }).filter((section) => section.events.length > 0);
 }
 
 function getVariantKey(slug, index) {
@@ -684,7 +647,6 @@ export default function Events() {
   const [searchTerm, setSearchTerm] = useState('');
   const [addingEvent, setAddingEvent] = useState(false);
   const [showAddForm, setShowAddForm] = useState(false);
-  const [expandedGroups, setExpandedGroups] = useState(DEFAULT_EXPANDED_GROUPS);
   const [genState, setGenState] = useState({});
   const [variants, setVariants] = useState({});
   const [variantDrafts, setVariantDrafts] = useState({});
@@ -1216,13 +1178,6 @@ export default function Events() {
     handleGenerate(slug, { sessionId });
   }
 
-  function toggleGroup(groupId) {
-    setExpandedGroups((current) => ({
-      ...current,
-      [groupId]: !current[groupId],
-    }));
-  }
-
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -1231,8 +1186,8 @@ export default function Events() {
     );
   }
 
-  const groupedEvents = buildGroupedEvents(events, searchTerm);
+  const eventSections = buildVisibleEventSections(events, searchTerm);
-  const totalVisibleEvents = groupedEvents.reduce((count, group) => count + group.events.length, 0);
+  const totalVisibleEvents = eventSections.reduce((count, section) => count + section.events.length, 0);
   const workspaceSlug = templateWorkspace.slug;
   const workspaceEvent = workspaceSlug ? events.find((event) => event.slug === workspaceSlug) : null;
   const workspaceVariants = workspaceSlug ? (variants[workspaceSlug] || []) : [];
@@ -1260,7 +1215,7 @@ export default function Events() {
         <div className="flex flex-col gap-4 pb-5 mb-6 border-b border-gray-200">
           <div>
             <h1 className="text-2xl font-bold text-gray-800 tracking-tight">Events</h1>
-            <p className="text-sm text-gray-500 mt-1 font-medium">Generate SMS templates for each order event.</p>
+            <p className="text-sm text-gray-500 mt-1 font-medium">Generate SMS templates for customer-facing lifecycle events.</p>
           </div>
           <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div className="relative flex-1 sm:max-w-md">
@@ -1336,50 +1291,27 @@ export default function Events() {
           </form>
         )}
 
-        {groupedEvents.length === 0 ? (
+        {eventSections.length === 0 ? (
           <div className="rounded-lg border border-dashed border-gray-300 bg-white px-6 py-12 text-center ">
             <p className="text-base font-semibold text-gray-800">No events match your search.</p>
-            <p className="mt-2 text-sm text-gray-500">Try a different keyword or clear the search to see the full lifecycle list.</p>
+            <p className="mt-2 text-sm text-gray-500">Try a different keyword or clear the search to see the customer-facing lifecycle list.</p>
           </div>
         ) : (
-          <div className="space-y-4">
+          <div className="space-y-8">
-            {groupedEvents.map((group) => {
+            {eventSections.map((section) => (
-              const isExpanded = searchTerm.trim() ? true : !!expandedGroups[group.id];
+              <section key={section.id} className="space-y-3">
-              const groupStyle = EVENT_GROUP_STYLE_CONFIG[group.id] || EVENT_GROUP_STYLE_CONFIG.custom;
+                <div className="px-1">
-
-              return (
-                <section key={group.id} className="overflow-hidden rounded-lg border border-gray-200 bg-white ">
-                  <button
-                    type="button"
-                    onClick={() => toggleGroup(group.id)}
-                    className="group flex w-full items-start justify-between gap-4 px-6 py-5 text-left transition hover:bg-gray-50"
-                  >
-                    <div className="flex min-w-0 items-start gap-4">
-                      <div className={`mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border ${groupStyle.markerShell}`}>
-                        <span className={`h-2.5 w-2.5 rounded-full ${groupStyle.markerDot}`} />
-                      </div>
-                      <div className="min-w-0">
                   <div className="flex flex-wrap items-center gap-2">
-                          <h2 className="text-lg font-bold tracking-tight text-gray-800">{group.label}</h2>
+                    <h2 className="text-lg font-bold tracking-tight text-gray-800">{section.label}</h2>
                     <span className="rounded-full border border-gray-200 bg-gray-50 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider text-gray-500">
-                            {group.events.length} events
+                      {section.events.length} events
                     </span>
                   </div>
-                        <p className="mt-1 text-sm font-medium text-gray-500">{group.description}</p>
+                  <p className="mt-1 text-sm font-medium text-gray-500">{section.description}</p>
                 </div>
-                    </div>
-                    <span className={`mt-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-gray-200 bg-gray-50 text-gray-600 shadow-sm transition group-hover:border-gray-300 group-hover:bg-white group-hover:text-gray-800 ${isExpanded ? 'rotate-180' : ''
-                      }`}>
-                      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m19 9-7 7-7-7" />
-                      </svg>
-                    </span>
-                  </button>
 
-                  {isExpanded && (
-                    <div className="border-t border-gray-100 bg-white px-4 py-4 sm:px-6">
                 <div className="space-y-4">
-                        {group.events.map((event) => {
+                  {section.events.map((event) => {
                     const state = genState[event.slug] || 'idle';
                     const eventVariants = variants[event.slug] || [];
                     const templateStatus = templateStatusBySlug[event.slug] || 'unselected';
@@ -1416,9 +1348,8 @@ export default function Events() {
                             <span
                               title={statusConfig.label}
                               aria-label={statusConfig.label}
-                                    className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold ${statusConfig.badge}`}
+                              className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-semibold ${statusConfig.badge}`}
                             >
-                                    <span className={`h-2 w-2 rounded-full ${statusConfig.dot}`} />
                               {statusConfig.label}
                             </span>
                             <button
@@ -1458,11 +1389,8 @@ export default function Events() {
                     );
                   })}
                 </div>
-                    </div>
-                  )}
               </section>
-              );
+            ))}
-            })}
           </div>
         )}
       </div>

client/src/pages/Providers.jsx

@@ -3,16 +3,6 @@ import { useNavigate, useParams } from 'react-router-dom';
 import apiClient from '../api/client';
 import { useBusiness } from '../context/BusinessContext';
 
-const DESKTOP_SPLIT_QUERY = '(min-width: 1100px)';
-const DEFAULT_LIST_PANE_WIDTH = 340;
-const MIN_LIST_PANE_WIDTH = 280;
-const MAX_LIST_PANE_WIDTH = 420;
-const MIN_DETAIL_PANE_WIDTH = 440;
-
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-
 function getMissingProviderFields(profile) {
   const provider = profile?.provider || {};
   const missing = [];
@@ -52,7 +42,8 @@ function buildProviderSummary(profile) {
 function ProfileStatusPill({ complete }) {
   return (
     <span
-      className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] ${complete
+      className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] ${
+        complete
           ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
           : 'border-amber-200 bg-amber-50 text-amber-700'
       }`}
@@ -80,9 +71,6 @@ export default function Providers() {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
   const [copiedProfileId, setCopiedProfileId] = useState('');
-  const [isDesktopSplit, setIsDesktopSplit] = useState(false);
-  const [listPaneWidth, setListPaneWidth] = useState(DEFAULT_LIST_PANE_WIDTH);
-  const layoutRef = useRef(null);
   const copyTimeoutRef = useRef(null);
 
   const globalSmsPath = `/${businessId}/global-sms`;
@@ -112,21 +100,6 @@ export default function Providers() {
     loadProfiles();
   }, [loadProfiles]);
 
-  useEffect(() => {
-    const mediaQuery = window.matchMedia(DESKTOP_SPLIT_QUERY);
-    const syncLayoutMode = (event) => setIsDesktopSplit(event.matches);
-
-    setIsDesktopSplit(mediaQuery.matches);
-
-    if (typeof mediaQuery.addEventListener === 'function') {
-      mediaQuery.addEventListener('change', syncLayoutMode);
-      return () => mediaQuery.removeEventListener('change', syncLayoutMode);
-    }
-
-    mediaQuery.addListener(syncLayoutMode);
-    return () => mediaQuery.removeListener(syncLayoutMode);
-  }, []);
-
   useEffect(() => () => {
     if (copyTimeoutRef.current) {
       clearTimeout(copyTimeoutRef.current);
@@ -165,37 +138,10 @@ export default function Providers() {
     setSuccess('');
   }
 
-  function handleResizeStart(event) {
+  function handleReturnToList() {
-    if (!isDesktopSplit) return;
+    setSelectedProfileId('');
-
+    setError('');
-    event.preventDefault();
+    setSuccess('');
-    const containerBounds = layoutRef.current?.getBoundingClientRect();
-    if (!containerBounds) return;
-
-    const maxAllowedWidth = clamp(
-      containerBounds.width - MIN_DETAIL_PANE_WIDTH,
-      MIN_LIST_PANE_WIDTH,
-      MAX_LIST_PANE_WIDTH,
-    );
-
-    function handlePointerMove(moveEvent) {
-      const nextWidth = clamp(
-        moveEvent.clientX - containerBounds.left,
-        MIN_LIST_PANE_WIDTH,
-        maxAllowedWidth,
-      );
-      setListPaneWidth(nextWidth);
-    }
-
-    function handlePointerUp() {
-      document.body.style.userSelect = '';
-      window.removeEventListener('mousemove', handlePointerMove);
-      window.removeEventListener('mouseup', handlePointerUp);
-    }
-
-    document.body.style.userSelect = 'none';
-    window.addEventListener('mousemove', handlePointerMove);
-    window.addEventListener('mouseup', handlePointerUp);
   }
 
   async function handleActivate(profile) {
@@ -274,19 +220,19 @@ export default function Providers() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-64">
+      <div className="flex h-64 items-center justify-center">
-        <div className="w-8 h-8 border-2 border-gray-200 border-t-indigo-600 rounded-full animate-spin" />
+        <div className="h-8 w-8 rounded-full border-2 border-gray-200 border-t-indigo-600 animate-spin" />
       </div>
     );
   }
 
   return (
-    <div className="mx-auto max-w-7xl space-y-6 pb-12">
+    <div className="mx-auto max-w-6xl space-y-6 pb-12">
       <div className="flex flex-col gap-4 border-b border-gray-200 pb-5 lg:flex-row lg:items-end lg:justify-between">
         <div>
           <h1 className="text-2xl font-bold tracking-tight text-gray-800">Provider Configuration</h1>
           <p className="mt-1 text-sm font-medium text-gray-500">
-            Pick a saved profile to review its complete request and manage the provider details stored against it.
+            Review the provider details stored against each saved cURL profile.
           </p>
         </div>
         <button
@@ -299,23 +245,23 @@ export default function Providers() {
       </div>
 
       {error && (
-        <div className="px-4 py-2 rounded-md bg-white border border-gray-200 text-gray-700 font-medium text-sm flex items-center justify-between">
+        <div className="flex items-center justify-between rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700">
           {error}
-          <button onClick={() => setError('')} className="text-gray-600 hover:text-gray-700 font-bold">&times;</button>
+          <button type="button" onClick={() => setError('')} className="font-bold text-gray-600 hover:text-gray-700">
+            &times;
+          </button>
         </div>
       )}
       {success && (
-        <div className="px-4 py-2 rounded-md bg-white border border-gray-200 text-gray-700 font-medium text-sm flex items-center justify-between">
+        <div className="flex items-center justify-between rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700">
           {success}
-          <button onClick={() => setSuccess('')} className="text-gray-600 hover:text-gray-700 font-bold">&times;</button>
+          <button type="button" onClick={() => setSuccess('')} className="font-bold text-gray-600 hover:text-gray-700">
+            &times;
+          </button>
         </div>
       )}
 
-      <div
+      {!selectedProfile ? (
-        ref={layoutRef}
-        className={`grid gap-4 ${isDesktopSplit ? 'items-start' : ''}`}
-        style={isDesktopSplit ? { gridTemplateColumns: `${listPaneWidth}px 12px minmax(0, 1fr)` } : undefined}
-      >
         <section className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
           <div className="border-b border-gray-200 px-5 py-4">
             <div className="flex items-start justify-between gap-4">
@@ -343,11 +289,10 @@ export default function Providers() {
               </button>
             </div>
           ) : (
-            <div className="max-h-[70vh] overflow-y-auto overscroll-contain p-3">
+            <div className="p-3">
               <div className="space-y-3">
                 {profiles.map((profile) => {
                   const isActive = profile.id === activeProfileId;
-                  const isSelected = profile.id === selectedProfileId;
                   const complete = isProviderSetupComplete(profile);
 
                   return (
@@ -355,15 +300,12 @@ export default function Providers() {
                       key={profile.id}
                       type="button"
                       onClick={() => handleSelectProfile(profile.id)}
-                      className={`w-full rounded-xl border p-4 text-left transition ${isSelected
+                      className="w-full rounded-xl border border-gray-200 bg-white p-4 text-left transition hover:border-primary-blue hover:bg-gray-50"
-                        ? 'border-primary-blue bg-indigo-50/40 shadow-sm'
-                        : 'border-gray-200 bg-white hover:border-primary-blue hover:bg-gray-50'
-                        }`}
                     >
                       <div className="flex items-start justify-between gap-3">
                         <div className="min-w-0">
                           <p className="truncate text-sm font-semibold text-gray-900">{profile.name}</p>
-                          <p className="mt-1 text-sm text-gray-500">{buildProviderSummary(profile)}</p>
+                          <p className="mt-1 text-sm leading-relaxed text-gray-500">{buildProviderSummary(profile)}</p>
                         </div>
                         <div className="flex shrink-0 flex-wrap justify-end gap-2">
                           {isActive && (
@@ -387,34 +329,20 @@ export default function Providers() {
             </div>
           )}
         </section>
-
+      ) : (
-        {isDesktopSplit && (
+        <section className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
-          <div className="hidden self-stretch lg:flex items-stretch justify-center">
+          <div className="border-b border-gray-200 px-6 py-5">
+            <div className="flex flex-col gap-4">
               <button
                 type="button"
-              onMouseDown={handleResizeStart}
+                onClick={handleReturnToList}
-              className="group relative flex h-full w-3 cursor-col-resize items-stretch justify-center bg-transparent"
+                className="inline-flex w-fit items-center gap-2 text-sm font-semibold text-gray-500 transition hover:text-primary-blue"
-              aria-label="Resize provider profile list"
               >
-              <span className="pointer-events-none absolute inset-y-2 left-1/2 w-[0.5px] -translate-x-1/2 rounded-full bg-gray-300 transition group-hover:bg-primary-blue" />
+                <span>Saved Profiles</span>
+                <span className="text-gray-300">/</span>
+                <span className="text-gray-900">{selectedProfile.name}</span>
               </button>
-          </div>
-        )}
 
-        <section className="min-w-0 overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
-          {!selectedProfile ? (
-            <div className="flex min-h-[520px] items-center justify-center px-6 py-10 text-center">
-              <div className="max-w-md">
-                <p className="text-sm font-semibold uppercase tracking-[0.18em] text-gray-400">Select a profile</p>
-                <h2 className="mt-3 text-2xl font-semibold tracking-tight text-gray-900">Choose a saved profile to review</h2>
-                <p className="mt-3 text-sm leading-relaxed text-gray-500">
-                  The selected profile will open here with a complete cURL preview, provider details, and activation controls.
-                </p>
-              </div>
-            </div>
-          ) : (
-            <>
-              <div className="border-b border-gray-200 px-6 py-5">
               <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
                 <div>
                   <div className="flex flex-wrap items-center gap-2">
@@ -458,9 +386,10 @@ export default function Providers() {
                 </div>
               </div>
             </div>
+          </div>
 
           <div className="space-y-6 px-6 py-6">
-                <div className="rounded-2xl border border-gray-200 bg-gray-950 overflow-hidden">
+            <div className="overflow-hidden rounded-2xl border border-gray-200 bg-gray-950">
               <div className="flex items-center justify-between gap-4 border-b border-gray-800 px-4 py-3">
                 <div>
                   <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-400">Preview</p>
@@ -475,7 +404,7 @@ export default function Providers() {
             </div>
 
             <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_260px]">
-                  <form onSubmit={handleSave} className="rounded-2xl border border-gray-200 bg-white overflow-hidden">
+              <form onSubmit={handleSave} className="overflow-hidden rounded-2xl border border-gray-200 bg-white">
                 <div className="border-b border-gray-200 px-5 py-4">
                   <p className="text-sm font-semibold text-gray-900">Provider Details</p>
                   <p className="mt-1 text-sm text-gray-500">
@@ -485,21 +414,21 @@ export default function Providers() {
 
                 <div className="space-y-5 px-5 py-5">
                   <div>
-                        <label className={`block text-sm font-semibold mb-1.5 tracking-wide ${!form.providerName ? 'text-error-text' : 'text-text-primary'}`}>
+                    <label className={`mb-1.5 block text-sm font-semibold tracking-wide ${!form.providerName ? 'text-error-text' : 'text-text-primary'}`}>
                       Provider Name {!form.providerName && <span className="text-error-text">*</span>}
                     </label>
                     <input
                       type="text"
                       value={form.providerName}
                       onChange={(event) => handleChange('providerName', event.target.value)}
-                          className={`w-full px-4 py-2 rounded-lg bg-surface-white border ${!form.providerName ? 'border-error-text focus:ring-error-text' : 'border-border-main focus:ring-primary-blue'} text-text-primary placeholder-placeholder-bg font-medium focus:outline-none focus:ring-2 focus:border-transparent transition text-sm`}
+                      className={`w-full rounded-lg border px-4 py-2 text-sm font-medium text-text-primary placeholder-placeholder-bg transition focus:border-transparent focus:outline-none focus:ring-2 ${!form.providerName ? 'border-error-text focus:ring-error-text' : 'border-border-main focus:ring-primary-blue'} bg-surface-white`}
                       placeholder="e.g. MSG91, Gupshup"
                     />
                   </div>
 
                   <div className="grid gap-5 sm:grid-cols-2">
                     <div>
-                          <label className={`block text-sm font-semibold mb-1.5 tracking-wide ${!form.senderId ? 'text-error-text' : 'text-text-primary'}`}>
+                      <label className={`mb-1.5 block text-sm font-semibold tracking-wide ${!form.senderId ? 'text-error-text' : 'text-text-primary'}`}>
                         DLT Sender ID {!form.senderId && <span className="text-error-text">*</span>}
                       </label>
                       <input
@@ -507,38 +436,40 @@ export default function Providers() {
                         value={form.senderId}
                         onChange={(event) => handleChange('senderId', event.target.value.toUpperCase())}
                         maxLength={6}
-                            className={`w-full px-4 py-2 rounded-lg bg-surface-white border ${!form.senderId ? 'border-error-text focus:ring-error-text' : 'border-border-main focus:ring-primary-blue'} text-text-primary font-mono tracking-widest placeholder-placeholder-bg focus:outline-none focus:ring-2 focus:border-transparent transition text-sm uppercase`}
+                        className={`w-full rounded-lg border px-4 py-2 font-mono text-sm uppercase tracking-widest text-text-primary placeholder-placeholder-bg transition focus:border-transparent focus:outline-none focus:ring-2 ${!form.senderId ? 'border-error-text focus:ring-error-text' : 'border-border-main focus:ring-primary-blue'} bg-surface-white`}
                         placeholder="6 CHARS"
                       />
                       <p className="mt-2 text-xs font-medium text-gray-500">Exactly 6 alphabetic characters.</p>
                     </div>
 
                     <div>
-                          <label className={`block text-sm font-semibold mb-1.5 tracking-wide ${!form.dltEntityId ? 'text-error-text' : 'text-text-primary'}`}>
+                      <label className={`mb-1.5 block text-sm font-semibold tracking-wide ${!form.dltEntityId ? 'text-error-text' : 'text-text-primary'}`}>
                         DLT Entity ID {!form.dltEntityId && <span className="text-error-text">*</span>}
                       </label>
                       <input
                         type="text"
                         value={form.dltEntityId}
                         onChange={(event) => handleChange('dltEntityId', event.target.value)}
-                            className={`w-full px-4 py-2 rounded-lg bg-surface-white border ${!form.dltEntityId ? 'border-error-text focus:ring-error-text' : 'border-border-main focus:ring-primary-blue'} text-text-primary font-mono placeholder-placeholder-bg focus:outline-none focus:ring-2 focus:border-transparent transition text-sm`}
+                        className={`w-full rounded-lg border px-4 py-2 font-mono text-sm text-text-primary placeholder-placeholder-bg transition focus:border-transparent focus:outline-none focus:ring-2 ${!form.dltEntityId ? 'border-error-text focus:ring-error-text' : 'border-border-main focus:ring-primary-blue'} bg-surface-white`}
                         placeholder="19-digit DLT PE ID"
                       />
                     </div>
                   </div>
 
                   <div>
-                        <label className="block text-sm font-semibold text-text-primary mb-1.5 tracking-wide">
+                    <label className="mb-1.5 block text-sm font-semibold tracking-wide text-text-primary">
-                          API Auth Key <span className="text-text-muted font-normal text-xs">(Optional)</span>
+                      API Auth Key <span className="text-xs font-normal text-text-muted">(Optional)</span>
                     </label>
                     <input
                       type="password"
                       value={form.authKey}
                       onChange={(event) => handleChange('authKey', event.target.value)}
-                          className="w-full px-4 py-2 rounded-lg bg-surface-white border border-border-main text-text-primary font-mono placeholder-placeholder-bg focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent transition text-sm"
+                      className="w-full rounded-lg border border-border-main bg-surface-white px-4 py-2 font-mono text-sm text-text-primary placeholder-placeholder-bg transition focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-blue"
                       placeholder="Authorization key for your SMS provider"
                     />
-                        <p className="mt-2 text-xs font-medium text-gray-500">Used as the Authorization header in your SMS requests.</p>
+                    <p className="mt-2 text-xs font-medium text-gray-500">
+                      Used as the Authorization header in your SMS requests.
+                    </p>
                   </div>
                 </div>
 
@@ -546,9 +477,14 @@ export default function Providers() {
                   <button
                     type="submit"
                     disabled={saving}
-                        className="px-6 py-2 rounded-lg bg-primary-blue hover:bg-primary-dark text-white font-semibold text-sm transition disabled:opacity-50 flex items-center justify-center gap-2"
+                    className="flex items-center justify-center gap-2 rounded-lg bg-primary-blue px-6 py-2 text-sm font-semibold text-white transition hover:bg-primary-dark disabled:opacity-50"
                   >
-                        {saving ? <><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Saving…</> : 'Save Configuration'}
+                    {saving ? (
+                      <>
+                        <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                        Saving…
+                      </>
+                    ) : 'Save Configuration'}
                   </button>
                 </div>
               </form>
@@ -580,10 +516,8 @@ export default function Providers() {
               </aside>
             </div>
           </div>
-            </>
-          )}
         </section>
-      </div>
+      )}
     </div>
   );
 }

client/src/pages/Templates.jsx

@@ -278,7 +278,7 @@ export default function Templates() {
           </p>
         </div>
       ) : (
-        <div className="grid gap-5 md:grid-cols-2">
+        <div className="grid gap-3 md:grid-cols-2">
           {visibleTemplates.map((template) => {
             const appearance = getCardAppearance(template);
             const boundProfile = template.curlProfileId ? profilesById[template.curlProfileId] || null : null;
@@ -297,26 +297,26 @@ export default function Templates() {
                     delete templateCardRefs.current[template.eventSlug];
                   }
                 }}
-                className={`overflow-hidden rounded-[28px] border border-gray-200 border-l-4 bg-white px-6 py-5 shadow-[0_12px_30px_rgba(15,23,42,0.06)] transition-all duration-300 ${appearance.accentClassName} ${
+                className={`overflow-hidden rounded-[22px] border border-gray-200 border-l-4 bg-white px-4 py-3.5 shadow-[0_8px_22px_rgba(15,23,42,0.05)] transition-all duration-300 ${appearance.accentClassName} ${
                   highlightedEventSlug === template.eventSlug
                     ? 'ring-2 ring-primary-blue/30'
-                    : 'hover:-translate-y-0.5 hover:shadow-[0_16px_34px_rgba(15,23,42,0.08)]'
+                    : 'hover:-translate-y-0.5 hover:shadow-[0_12px_24px_rgba(15,23,42,0.07)]'
                 }`}
               >
-                <div className="flex items-start justify-between gap-4">
+                <div className="flex items-start justify-between gap-3">
                   <div className="min-w-0">
                     <div className="flex flex-wrap items-center gap-2">
-                      <h3 className="text-[1.35rem] font-semibold tracking-tight text-gray-900">
+                      <h3 className="text-base font-semibold tracking-tight text-gray-900">
                         {getTemplateDisplayName(template)}
                       </h3>
-                      <span className={`inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-semibold ${appearance.pillClassName}`}>
+                      <span className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold ${appearance.pillClassName}`}>
                         {isPublished && (
-                          <span className={`h-2.5 w-2.5 rounded-full ${isRuntimeEnabled ? 'bg-current opacity-80' : 'bg-current opacity-55'}`} />
+                          <span className={`h-2 w-2 rounded-full ${isRuntimeEnabled ? 'bg-current opacity-80' : 'bg-current opacity-55'}`} />
                         )}
                         {appearance.pillLabel}
                       </span>
                     </div>
-                    <p className="mt-3 max-w-[34ch] text-sm leading-7 text-gray-400">
+                    <p className="mt-1.5 max-w-[28ch] text-[12.5px] leading-5 text-gray-400">
                       {appearance.description}
                     </p>
                   </div>
@@ -328,38 +328,38 @@ export default function Templates() {
                     aria-label={`Set runtime ${isRuntimeEnabled ? 'paused' : 'active'} for ${getTemplateDisplayName(template)}`}
                     disabled={!isPublished || isRuntimeUpdating}
                     onClick={() => isPublished && handleRuntimeToggle(template)}
-                    className={`relative inline-flex h-7 w-12 items-center rounded-full border transition ${
+                    className={`relative inline-flex h-6 w-10 items-center rounded-full border transition ${
                       isPublished
                         ? `${appearance.switchTrackClassName} ${isRuntimeUpdating ? 'cursor-wait opacity-70' : 'cursor-pointer'}`
                         : 'cursor-not-allowed border-[#d8dee8] bg-[#eef1f5] opacity-95'
                     }`}
                   >
                     <span
-                      className={`inline-block h-5 w-5 rounded-full bg-white shadow-sm transition ${
+                      className={`inline-block h-4 w-4 rounded-full bg-white shadow-sm transition ${
-                        isPublished && isRuntimeEnabled ? 'translate-x-6' : 'translate-x-1'
+                        isPublished && isRuntimeEnabled ? 'translate-x-5' : 'translate-x-1'
                       }`}
                     />
                   </button>
                 </div>
 
-                <div className="mt-5 border-t border-gray-100 pt-5">
+                <div className="mt-3 border-t border-gray-100 pt-3">
-                  <div className="flex items-end justify-between gap-4">
+                  <div className="flex items-end justify-between gap-3">
-                    <div className="flex flex-wrap items-start gap-8">
+                    <div className="flex flex-wrap items-start gap-4">
                       <div>
-                        <p className="text-xs font-medium text-gray-400">Profile</p>
+                        <p className="text-[11px] font-medium text-gray-400">Profile</p>
-                        <p className="mt-1 text-base font-semibold text-gray-900">
+                        <p className="mt-0.5 text-[13px] font-semibold text-gray-900">
                           {getBoundProfileSummary(template, boundProfile)}
                         </p>
                       </div>
                       <div>
-                        <p className="text-xs font-medium text-gray-400">DLT Template ID</p>
+                        <p className="text-[11px] font-medium text-gray-400">DLT Template ID</p>
-                        <p className="mt-1 font-mono text-sm font-semibold text-gray-900">
+                        <p className="mt-0.5 font-mono text-[11px] font-semibold text-gray-900">
                           {formatDltTemplateId(template.templateId)}
                         </p>
                       </div>
                     </div>
 
-                    <div className="flex flex-wrap items-center justify-end gap-3">
+                    <div className="flex flex-wrap items-center justify-end gap-2">
                       <button
                         type="button"
                         onClick={() => setWorkspaceSlug(template.eventSlug)}
@@ -372,7 +372,7 @@ export default function Templates() {
                         <button
                           type="button"
                           onClick={() => setWhitelistTarget(template)}
-                          className="rounded-full border border-orange-200 bg-[#fff4ea] px-4 py-2 text-sm font-semibold text-orange-700 transition hover:border-orange-300 hover:bg-[#ffeddc]"
+                          className="rounded-full border border-orange-200 bg-[#fff4ea] px-3 py-1 text-[13px] font-semibold text-orange-700 transition hover:border-orange-300 hover:bg-[#ffeddc]"
                         >
                           Publish
                         </button>
@@ -382,7 +382,7 @@ export default function Templates() {
                         <button
                           type="button"
                           onClick={() => setTestTarget(template)}
-                          className="rounded-full border border-[#c7d6ff] bg-[#f5f8ff] px-4 py-2 text-sm font-semibold text-[#4563d5] transition hover:border-[#afc3ff] hover:bg-[#ebf1ff]"
+                          className="rounded-full border border-[#c7d6ff] bg-[#f5f8ff] px-3 py-1 text-[13px] font-semibold text-[#4563d5] transition hover:border-[#afc3ff] hover:bg-[#ebf1ff]"
                         >
                           Test SMS
                         </button>
@@ -391,7 +391,7 @@ export default function Templates() {
                   </div>
 
                   {isBoundProfileMissing && (
-                    <p className="mt-4 text-sm font-medium leading-6 text-gray-500">
+                    <p className="mt-3 text-[13px] font-medium leading-5 text-gray-500">
                       {template.curlProfileId
                         ? 'The cURL profile used for this template no longer exists. Re-select this template from Events to continue.'
                         : 'This template is not bound to a cURL profile. Re-select it from Events to continue.'}