@schandlergarcia/sf-web-components 1.9.17 → 1.9.19

package/.a4drules/features/command-center-dashboard-rule.md

@@ -1,13 +1,13 @@
 ---
 paths:
-  - "**/components/pages/*.jsx"
-  - "**/components/pages/*.tsx"
-  - "**/components/pages/CommandCenter.tsx"
+  - "**/pages/*.jsx"
+  - "**/pages/*.tsx"
+  - "**/components/workspace/CommandCenter.tsx"
 ---
 
 # Command Center Dashboard Rules (MANDATORY)
 
-These rules are non-negotiable for all files in `src/components/pages/`.
+These rules are non-negotiable for all dashboard files in `src/pages/` and workspace files in `src/components/workspace/`.
 
 ## Before writing ANY code, load these skills
 
@@ -15,7 +15,7 @@ You MUST load the **command-center-builder** and **component-library** skills be
 
 ## Critical constraints
 
-1. **File extension should be `.tsx`** — TypeScript is preferred for type safety. Use `.jsx` only if types are not available.
+1. **File extension MUST be `.tsx`** — This is a TypeScript project. All React components MUST use `.tsx` extension, never `.jsx`. All type definitions are available from the component library.
 
 2. **Use ONLY library components** from `@/components/library` for cards, charts, tables, lists. Never hand-roll HTML cards (`<div className="bg-white border rounded...">`).
 

package/.a4drules/skills/command-center-builder/SKILL.md

@@ -15,7 +15,7 @@ These rules apply when building dashboards rendered by `CommandCenter.tsx`. For
 
 **Every time you build a dashboard, you MUST follow these non-negotiable rules. Violations are the #1 cause of rejected dashboards.**
 
-1. **Actually write files to disk.** Use the file-writing tools to create `.jsx` files in `src/components/pages/` and update `CommandCenter.tsx` to import your dashboard. If you only describe what you would build without creating the files, the dashboard will not render. Verify the files exist after writing them.
+1. **Actually write files to disk.** Use the file-writing tools to create `.tsx` files (NOT `.jsx`) in `src/pages/` and update `CommandCenter.tsx` to import your dashboard. This is a TypeScript project - all React components MUST use `.tsx` extension. If you only describe what you would build without creating the files, the dashboard will not render. Verify the files exist after writing them.
 
 2. **Use ONLY library components** from `@/components/library` for all cards, charts, tables, lists, and feeds. The library has 30+ components — there is no reason to hand-roll HTML. See the component table below.
 

package/README.md

@@ -302,15 +302,15 @@ bash node_modules/@schandlergarcia/sf-web-components/scripts/reset-command-cente
 ```
 
 **What it does:**
-- Removes custom dashboard pages
+- Removes custom dashboard pages (including those created at SFDX project root)
 - Reinstalls BlankDashboard.tsx with EmptyState
 - Resets CommandCenter.tsx (preserves theme mode)
-- Updates Home.tsx to render CommandCenter (blank dashboard)
+- Updates Home.tsx to render search interface
 - Creates Search.tsx for search interface at `/search` route
 - Resets routes to baseline configuration
 - Preserves: component library, authentication, all dependencies
 
-**Result:** Home route (`/`) displays the CommandCenter with BlankDashboard, ready for customization
+**Result:** Home route (`/`) displays the search interface (baseline state)
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.17",
+  "version": "1.9.19",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",

package/scripts/reset-command-center.sh

@@ -164,20 +164,73 @@ WRAPPER_EOF
 echo "  ✓ Wired up BlankDashboard"
 echo ""
 
-# ── 4. Reset Home.tsx to render CommandCenter ────────────────────────────────
+# ── 4. Reset Home.tsx to render search interface ────────────────────────────
 
 HOME="src/pages/Home.tsx"
 echo "→ Updating ${HOME}..."
 
 cat > "$HOME" << 'HOME_EOF'
-import CommandCenter from "@/components/workspace/CommandCenter";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import UIInput from '@/components/library/ui/UIInput';
+import UIButton from '@/components/library/ui/UIButton';
+import { Search } from "lucide-react";
 
 export default function HomePage() {
-	return <CommandCenter />;
+	const [searchQuery, setSearchQuery] = useState("");
+	const navigate = useNavigate();
+
+	const handleSearch = () => {
+		const trimmed = searchQuery.trim();
+		if (trimmed) {
+			navigate(`/accounts?search=${encodeURIComponent(trimmed)}`);
+		} else {
+			navigate('/accounts');
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			handleSearch();
+		}
+	};
+
+	return (
+		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
+			<div className="w-full max-w-4xl">
+				<div className="text-center mb-8">
+					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
+					<p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
+				</div>
+				<div className="flex flex-col gap-4">
+					<div className="relative">
+						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
+						<UIInput
+							type="text"
+							value={searchQuery}
+							onChange={(e) => setSearchQuery(e.target.value)}
+							onKeyDown={handleKeyDown}
+							placeholder="Search..."
+							className="pl-10 w-full"
+						/>
+					</div>
+					<div className="flex gap-3 justify-center">
+						<UIButton onClick={handleSearch} variant="primary">
+							Search
+						</UIButton>
+						<UIButton onClick={() => navigate('/accounts')} variant="secondary">
+							Browse All
+						</UIButton>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 }
 HOME_EOF
 
-echo "  ✓ Home renders CommandCenter (dashboard)"
+echo "  ✓ Home renders search interface"
 echo ""
 
 # ── 5. Ensure Search.tsx page exists ─────────────────────────────────────────
@@ -311,14 +364,14 @@ echo "║     • Authentication features                  ║"
 echo "║     • All styles & dependencies                ║"
 echo "║                                                ║"
 echo "║   Layout:                                      ║"
-echo "║     /         → CommandCenter (blank dashboard)║"
-echo "║     /search   → Search interface               ║"
+echo "║     /         → Search interface               ║"
+echo "║     /search   → Search interface (duplicate)   ║"
 echo "║     /accounts → Account search and browse      ║"
 echo "║                                                ║"
-echo "║   Command Center setup:                        ║"
-echo "║     • Home renders BlankDashboard              ║"
-echo "║     • Theme and data providers configured      ║"
-echo "║     • Ready to build custom dashboards         ║"
+echo "║   Search functionality:                        ║"
+echo "║     • Search button navigates to /accounts     ║"
+echo "║     • Enter key triggers search                ║"
+echo "║     • Browse All shows all accounts            ║"
 echo "║                                                ║"
 echo "║   Start building:                              ║"
 echo "║     npm run dev                                 ║"