feat: first draft

2025-01-25 20:39:55 +01:00
parent 78c69dbc1a
commit 06fbbab24d
53 changed files with 13416 additions and 123 deletions
--- a/components/BackupControls.tsx
+++ b/components/BackupControls.tsx
@@ -0,0 +1,133 @@
+import { useState } from 'react';
+import { Loader2, Copy, Check, RotateCcw } from 'lucide-react';
+import { Button } from '@components/ui/button';
+import { Input } from '@components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
+import { Alert, AlertDescription } from '@components/ui/alert';
+import { useStorage } from '@utils/useStorage';
+import { useGlobalState } from '@contexts/state/StateContext';
+
+export function LoadingSpinner() {
+  return <Loader2 className="h-4 w-4 animate-spin" />;
+}
+
+export default function BackupControls() {
+  const [key, setKey] = useState('');
+  const [backupKey, setBackupKey] = useState('');
+  const [isBackingUp, setIsBackingUp] = useState(false);
+  const [isRestoring, setIsRestoring] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { state, dispatch, resetState } = useGlobalState();
+  const { backupState, restoreState } = useStorage();
+
+  const handleBackup = async () => {
+    setIsBackingUp(true);
+    setError(null);
+    try {
+      const result = await backupState(state);
+      if (result?.key) {
+        setBackupKey(result.key);
+      }
+    } catch (error) {
+      console.error(error);
+      setError('Failed to backup data. Please try again.');
+    } finally {
+      setIsBackingUp(false);
+    }
+  };
+
+  const handleRestore = async () => {
+    if (!key) {
+      setError('Please enter a key');
+      return;
+    }
+    setIsRestoring(true);
+    setError(null);
+    try {
+      const restored = await restoreState(key);
+      if (restored) {
+        dispatch({ type: 'SET_STATE', payload: restored });
+        setKey('');
+      } else {
+        setError('No data found for this key');
+      }
+    } catch (error) {
+      console.error(error);
+      setError('Failed to restore data. Please check your key and try again.');
+    } finally {
+      setIsRestoring(false);
+    }
+  };
+
+  const copyKey = async () => {
+    try {
+      await navigator.clipboard.writeText(backupKey);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error(error);
+      setError('Failed to copy key to clipboard');
+    }
+  };
+
+  return (
+    <Card className="mb-6">
+      <CardHeader>
+        <CardTitle>Backup Controls</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        <div className="flex gap-4">
+          <Button onClick={handleBackup} disabled={isBackingUp}>
+            {isBackingUp ? <LoadingSpinner /> : 'Backup  data'}
+          </Button>
+          <Button onClick={resetState} variant="outline">
+            <RotateCcw className="h-4 w-4 mr-2" />
+            Reset data
+          </Button>
+          {backupKey && (
+            <div className="flex-1 flex items-center rounded-md border bg-card text-card-foreground h-9 px-3">
+              <div className="flex items-center gap-2 flex-1">
+                <span className="text-sm font-medium">Your backup key:</span>
+                <code className="bg-muted px-1.5 rounded text-sm">
+                  {backupKey}
+                </code>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={copyKey}
+                disabled={copied}
+                className="h-7 w-7"
+              >
+                {copied ? (
+                  <Check className="h-4 w-4" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          )}
+        </div>
+
+        <div className="flex gap-4">
+          <Input
+            placeholder="Enter backup key"
+            value={key}
+            onChange={(e) => setKey(e.target.value)}
+            disabled={isRestoring}
+          />
+          <Button onClick={handleRestore} disabled={isRestoring}>
+            {isRestoring ? <LoadingSpinner /> : 'Restore data'}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { ThemeToggle } from '@components/ThemeToggle';
+import { WavesIcon } from 'lucide-react';
+
+export default function Header() {
+  return (
+    <header className="relative overflow-hidden bg-gradient-to-r from-cyan-500 via-blue-500 to-cyan-500 h-32">
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="swell">
+          <div className="wave"></div>
+          <div className="wave wave-2"></div>
+          <div className="wave wave-3"></div>
+        </div>
+      </div>
+
+      <div className="relative px-4 h-full">
+        <div className="absolute right-4 top-3">
+          <ThemeToggle />
+        </div>
+        <div className="container max-w-4xl mx-auto h-full flex flex-col items-center justify-center text-white">
+          <div className="flex items-center gap-2">
+            <WavesIcon className="h-6 w-6" />
+            <h1 className="text-2xl font-bold tracking-tight">
+              Blue Ocean Strategy
+            </h1>
+          </div>
+          <p className="text-cyan-100 text-sm">
+            Navigate to new market spaces and create uncontested growth
+          </p>
+        </div>
+      </div>
+    </header>
+  );
+}
--- a/components/ThemeProvider.tsx
+++ b/components/ThemeProvider.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export function ThemeProvider({
+  children,
+  ...props
+}: {
+  children: React.ReactNode;
+  [key: string]: unknown;
+}) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Button } from '@components/ui/button';
+
+export function ThemeToggle() {
+  const { setTheme, resolvedTheme } = useTheme();
+
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" className="w-9 px-0">
+        <Sun className="h-5 w-5 opacity-50" />
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+      className="w-9 px-0"
+    >
+      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}
--- a/components/core/FourActions.tsx
+++ b/components/core/FourActions.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
+import { Button } from '@components/ui/button';
+import { Input } from '@components/ui/input';
+import { useGlobalState } from '@contexts/state/StateContext';
+import { Trash2, Plus } from 'lucide-react';
+
+const FourActions = () => {
+  const { state, dispatch } = useGlobalState();
+  const [newItems, setNewItems] = useState({
+    eliminate: '',
+    reduce: '',
+    raise: '',
+    create: '',
+  });
+
+  const addItem = (actionType: keyof typeof newItems) => {
+    if (!newItems[actionType]) return;
+
+    dispatch({
+      type: 'ADD_ACTION',
+      payload: {
+        actionType,
+        value: newItems[actionType],
+      },
+    });
+    setNewItems((prev) => ({ ...prev, [actionType]: '' }));
+  };
+
+  const removeItem = (
+    actionType: keyof typeof state.fourActions,
+    index: number
+  ) => {
+    dispatch({
+      type: 'SET_STATE',
+      payload: {
+        ...state,
+        fourActions: {
+          ...state.fourActions,
+          [actionType]: state.fourActions[actionType].filter(
+            (_, i) => i !== index
+          ),
+        },
+      },
+    });
+  };
+
+  const renderActionSection = (
+    title: string,
+    actionType: keyof typeof state.fourActions,
+    description: string,
+    colorClasses: string
+  ) => (
+    <Card className={`${colorClasses} border-2`}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground mb-4">{description}</p>
+        <div className="flex gap-2 mb-4">
+          <Input
+            placeholder={`Add ${title.toLowerCase()} factor...`}
+            value={newItems[actionType]}
+            onChange={(e) =>
+              setNewItems((prev) => ({ ...prev, [actionType]: e.target.value }))
+            }
+            className="flex-1"
+          />
+          <Button onClick={() => addItem(actionType)} variant="secondary">
+            <Plus className="h-4 w-4" />
+          </Button>
+        </div>
+        <div className="space-y-2">
+          {state.fourActions[actionType].map((item, index) => (
+            <div
+              key={index}
+              className="flex items-center gap-2 p-2 bg-background rounded-lg border"
+            >
+              <span className="flex-1">{item}</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => removeItem(actionType, index)}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      {renderActionSection(
+        'Eliminate',
+        'eliminate',
+        'Which factors should be eliminated?',
+        'border-red-500/50 dark:border-red-500/30 bg-red-50/50 dark:bg-red-950/10'
+      )}
+      {renderActionSection(
+        'Reduce',
+        'reduce',
+        'Which factors should be reduced well below the industry standard?',
+        'border-yellow-500/50 dark:border-yellow-500/30 bg-yellow-50/50 dark:bg-yellow-950/10'
+      )}
+      {renderActionSection(
+        'Raise',
+        'raise',
+        'Which factors should be raised well above the industry standard?',
+        'border-green-500/50 dark:border-green-500/30 bg-green-50/50 dark:bg-green-950/10'
+      )}
+      {renderActionSection(
+        'Create',
+        'create',
+        'Which factors should be created that the industry has never offered?',
+        'border-blue-500/50 dark:border-blue-500/30 bg-blue-50/50 dark:bg-blue-950/10'
+      )}
+    </div>
+  );
+};
+
+export default FourActions;
--- a/components/core/PriceCorridor.tsx
+++ b/components/core/PriceCorridor.tsx
@@ -0,0 +1,301 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
+import { Button } from '@components/ui/button';
+import { Input } from '@components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@components/ui/select';
+import { useGlobalState } from '@contexts/state/StateContext';
+import { Trash2, Plus } from 'lucide-react';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ReferenceLine,
+  ReferenceArea,
+  ResponsiveContainer,
+} from 'recharts';
+
+const PriceCorridor = () => {
+  const { state, dispatch } = useGlobalState();
+  const [newCompetitor, setNewCompetitor] = useState<{
+    name: string;
+    price: number;
+    category: 'same-form' | 'different-form' | 'different-function';
+  }>({
+    name: '',
+    price: 0,
+    category: 'same-form',
+  });
+
+  const setTargetPrice = (price: number) => {
+    dispatch({
+      type: 'UPDATE_TARGET_PRICE',
+      payload: price,
+    });
+  };
+
+  const addCompetitor = () => {
+    if (!newCompetitor.name || !newCompetitor.price) return;
+    dispatch({
+      type: 'ADD_COMPETITOR',
+      payload: {
+        name: newCompetitor.name,
+        price: newCompetitor.price,
+        category: newCompetitor.category,
+      },
+    });
+    setNewCompetitor({ name: '', price: 0, category: 'same-form' });
+  };
+
+  const removeCompetitor = (index: number) => {
+    dispatch({
+      type: 'SET_STATE',
+      payload: {
+        ...state,
+        priceCorridor: {
+          ...state.priceCorridor,
+          competitors: state.priceCorridor.competitors.filter(
+            (_, i) => i !== index
+          ),
+        },
+      },
+    });
+  };
+
+  const sortedCompetitors = [...state.priceCorridor.competitors].sort(
+    (a, b) => a.price - b.price
+  );
+
+  const prices = sortedCompetitors.map((c) => c.price);
+  const upperBound = Math.max(...prices, 0);
+  const lowerBound = Math.min(...prices, 0);
+  const range = upperBound - lowerBound;
+
+  const corridorLower = lowerBound + range * 0.3;
+  const corridorUpper = lowerBound + range * 0.8;
+
+  const chartData = sortedCompetitors.map((comp) => ({
+    name: comp.name,
+    price: comp.price,
+    category: comp.category,
+  }));
+
+  const categorizedCompetitors = {
+    'same-form': sortedCompetitors.filter((c) => c.category === 'same-form'),
+    'different-form': sortedCompetitors.filter(
+      (c) => c.category === 'different-form'
+    ),
+    'different-function': sortedCompetitors.filter(
+      (c) => c.category === 'different-function'
+    ),
+  };
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Price Corridor of the Mass</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="h-[400px] w-full flex justify-center">
+            <ResponsiveContainer width="100%" height="100%" maxHeight={400}>
+              <LineChart
+                data={chartData}
+                margin={{ top: 20, right: 110, left: 50, bottom: 20 }}
+                className="[&_.recharts-cartesian-grid-horizontal]:stroke-muted [&_.recharts-cartesian-grid-vertical]:stroke-muted [&_.recharts-cartesian-axis-line]:stroke-muted [&_.recharts-cartesian-axis-tick-line]:stroke-muted [&_.recharts-cartesian-axis-tick-value]:fill-foreground"
+              >
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="name" stroke="currentColor" />
+                <YAxis stroke="currentColor" />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: 'var(--background)',
+                    borderColor: 'var(--border)',
+                    color: 'var(--foreground)',
+                  }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="price"
+                  stroke="hsl(var(--primary))"
+                />
+                {state.priceCorridor.targetPrice > 0 && (
+                  <ReferenceLine
+                    y={state.priceCorridor.targetPrice}
+                    stroke="hsl(var(--destructive))"
+                    strokeDasharray="3 3"
+                    label={{
+                      value: 'Target Price',
+                      position: 'insideRight',
+                      fill: 'hsl(var(--destructive))',
+                      offset: 100,
+                    }}
+                  />
+                )}
+                {chartData.length > 0 && (
+                  <ReferenceArea
+                    y1={corridorLower}
+                    y2={corridorUpper}
+                    fill="hsl(var(--primary))"
+                    fillOpacity={0.1}
+                    stroke="hsl(var(--primary))"
+                    strokeDasharray="3 3"
+                    label={{
+                      value: 'Price Corridor',
+                      position: 'insideRight',
+                      offset: 90,
+                    }}
+                  />
+                )}
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-2 gap-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Strategic Price</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {chartData.length > 0 && (
+                <div className="text-sm space-y-2">
+                  <p>
+                    Suggested price corridor: {corridorLower.toFixed(2)} -{' '}
+                    {corridorUpper.toFixed(2)}
+                  </p>
+                  <p>This range typically captures 70-80% of target buyers</p>
+                </div>
+              )}
+              <div className="flex gap-2 items-center">
+                <Input
+                  type="number"
+                  value={state.priceCorridor.targetPrice || ''}
+                  onChange={(e) => setTargetPrice(Number(e.target.value))}
+                  placeholder="Set target price..."
+                  className="w-48"
+                />
+                <span className="text-sm text-muted-foreground">
+                  Current target: {state.priceCorridor.targetPrice || 'Not set'}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Add Alternative</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex gap-2">
+              <Input
+                placeholder="Name"
+                value={newCompetitor.name}
+                onChange={(e) =>
+                  setNewCompetitor((prev) => ({
+                    ...prev,
+                    name: e.target.value,
+                  }))
+                }
+                className="flex-1"
+              />
+              <Input
+                type="number"
+                placeholder="Price"
+                value={newCompetitor.price || ''}
+                onChange={(e) =>
+                  setNewCompetitor((prev) => ({
+                    ...prev,
+                    price: Number(e.target.value),
+                  }))
+                }
+                className="w-32"
+              />
+              <Select
+                value={
+                  newCompetitor.category as
+                    | 'same-form'
+                    | 'different-form'
+                    | 'different-function'
+                }
+                onValueChange={(
+                  value: 'same-form' | 'different-form' | 'different-function'
+                ) => setNewCompetitor((prev) => ({ ...prev, category: value }))}
+              >
+                <SelectTrigger className="w-48">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="same-form">Same Form</SelectItem>
+                  <SelectItem value="different-form">Different Form</SelectItem>
+                  <SelectItem value="different-function">
+                    Different Function
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <Button onClick={addCompetitor}>
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Price Alternatives Analysis</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-6">
+            {Object.entries(categorizedCompetitors).map(
+              ([category, competitors]) => (
+                <div key={category} className="space-y-2">
+                  <h3 className="font-semibold capitalize">
+                    {category.replace('-', ' ')} Alternatives
+                  </h3>
+                  {competitors.length > 0 ? (
+                    <div className="space-y-2">
+                      {competitors.map((comp, index) => (
+                        <div
+                          key={index}
+                          className="flex items-center gap-2 p-2 bg-muted rounded-lg"
+                        >
+                          <span className="flex-1">{comp.name}</span>
+                          <span className="w-32 text-right">{comp.price}</span>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => removeCompetitor(index)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      No alternatives added
+                    </p>
+                  )}
+                </div>
+              )
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default PriceCorridor;
--- a/components/core/SixPaths.tsx
+++ b/components/core/SixPaths.tsx
@@ -0,0 +1,156 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
+import { Button } from '@components/ui/button';
+import { Input } from '@components/ui/input';
+import { Textarea } from '@components/ui/textarea';
+import { useGlobalState } from '@contexts/state/StateContext';
+import { Trash2, Plus } from 'lucide-react';
+import type { PathType } from '@utils/types';
+
+const pathDefinitions = {
+  industries: {
+    title: 'Alternative Industries',
+    description: 'Look across substitute and alternative industries',
+  },
+  groups: {
+    title: 'Strategic Groups',
+    description: 'Look across strategic groups within your industry',
+  },
+  buyers: {
+    title: 'Buyer Groups',
+    description: 'Look across chain of buyers',
+  },
+  complementary: {
+    title: 'Complementary Products',
+    description: 'Look across complementary product and service offerings',
+  },
+  functional: {
+    title: 'Functional/Emotional Appeal',
+    description: 'Look across functional or emotional appeal to buyers',
+  },
+  trends: {
+    title: 'Time Trends',
+    description: 'Look across time and market trends',
+  },
+};
+
+const SixPaths = () => {
+  const { state, dispatch } = useGlobalState();
+  const [newOpportunities, setNewOpportunities] = useState<
+    Record<PathType, string>
+  >({
+    industries: '',
+    groups: '',
+    buyers: '',
+    complementary: '',
+    functional: '',
+    trends: '',
+  });
+
+  const addOpportunity = (pathType: PathType) => {
+    if (!newOpportunities[pathType]) return;
+
+    dispatch({
+      type: 'ADD_OPPORTUNITY',
+      payload: {
+        pathType,
+        value: newOpportunities[pathType],
+      },
+    });
+    setNewOpportunities((prev) => ({ ...prev, [pathType]: '' }));
+  };
+
+  const removeOpportunity = (pathType: PathType, index: number) => {
+    dispatch({
+      type: 'SET_STATE',
+      payload: {
+        ...state,
+        sixPaths: {
+          ...state.sixPaths,
+          [pathType]: {
+            ...state.sixPaths[pathType],
+            opportunities: state.sixPaths[pathType].opportunities.filter(
+              (_, i) => i !== index
+            ),
+          },
+        },
+      },
+    });
+  };
+
+  const updateNotes = (pathType: PathType, notes: string) => {
+    dispatch({
+      type: 'UPDATE_PATH_NOTES',
+      payload: { pathType, notes },
+    });
+  };
+
+  const renderPath = (pathType: PathType) => {
+    const { title, description } = pathDefinitions[pathType];
+
+    return (
+      <Card key={pathType}>
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-gray-600 mb-4">{description}</p>
+
+          <Textarea
+            placeholder="Add notes about this path..."
+            value={state.sixPaths[pathType].notes}
+            onChange={(e) => updateNotes(pathType, e.target.value)}
+            className="mb-4"
+          />
+
+          <div className="flex gap-2 mb-4">
+            <Input
+              placeholder="Add opportunity..."
+              value={newOpportunities[pathType]}
+              onChange={(e) =>
+                setNewOpportunities((prev) => ({
+                  ...prev,
+                  [pathType]: e.target.value,
+                }))
+              }
+              className="flex-1"
+            />
+            <Button onClick={() => addOpportunity(pathType)}>
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="space-y-2">
+            {state.sixPaths[pathType].opportunities.map(
+              (opportunity, index) => (
+                <div
+                  key={index}
+                  className="flex items-center gap-2 p-2 bg-background rounded-lg"
+                >
+                  <span className="flex-1">{opportunity}</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => removeOpportunity(pathType, index)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              )
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  };
+
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      {(Object.keys(pathDefinitions) as PathType[]).map((pathType) =>
+        renderPath(pathType)
+      )}
+    </div>
+  );
+};
+
+export default SixPaths;
--- a/components/core/StrategyCanvas.tsx
+++ b/components/core/StrategyCanvas.tsx
@@ -0,0 +1,386 @@
+import React, { useState, useCallback } from 'react';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  TooltipProps,
+} from 'recharts';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
+import { Button } from '@components/ui/button';
+import { Input } from '@components/ui/input';
+import { Textarea } from '@components/ui/textarea';
+import { useGlobalState } from '@contexts/state/StateContext';
+import { Trash2, Plus, MoveUp, MoveDown } from 'lucide-react';
+import {
+  NameType,
+  ValueType,
+} from 'recharts/types/component/DefaultTooltipContent';
+
+interface Factor {
+  id: string;
+  name: string;
+  marketScore: number;
+  ideaScore: number;
+}
+
+interface NewFactor {
+  name: string;
+  marketScore: number;
+  ideaScore: number;
+}
+
+interface ChartDataPoint {
+  name: string;
+  Market: number;
+  'Your Idea': number;
+  tooltip: string;
+}
+
+interface CustomTooltipProps extends TooltipProps<ValueType, NameType> {
+  active?: boolean;
+  payload?: Array<{
+    name: string;
+    value: number;
+    color: string;
+  }>;
+  label?: string;
+}
+
+const StrategyCanvas: React.FC = () => {
+  const { state, dispatch } = useGlobalState();
+  const [newFactor, setNewFactor] = useState<NewFactor>({
+    name: '',
+    marketScore: 5,
+    ideaScore: 5,
+  });
+  const [error, setError] = useState<string>('');
+
+  const validateFactor = (factor: NewFactor): boolean => {
+    if (!factor.name.trim()) {
+      setError('Factor name is required');
+      return false;
+    }
+    if (factor.marketScore < 0 || factor.marketScore > 10) {
+      setError('Market score must be between 0 and 10');
+      return false;
+    }
+    if (factor.ideaScore < 0 || factor.ideaScore > 10) {
+      setError('Idea score must be between 0 and 10');
+      return false;
+    }
+    setError('');
+    return true;
+  };
+
+  const addFactor = useCallback((): void => {
+    if (!validateFactor(newFactor)) return;
+
+    dispatch({
+      type: 'ADD_FACTOR',
+      payload: {
+        id: `factor-${Date.now()}`,
+        ...newFactor,
+      },
+    });
+    setNewFactor({ name: '', marketScore: 5, ideaScore: 5 });
+  }, [newFactor, dispatch]);
+
+  const moveFactor = useCallback(
+    (id: string, direction: 'up' | 'down'): void => {
+      const factors = [...state.strategyCanvas.factors];
+      const index = factors.findIndex((f) => f.id === id);
+      if (
+        (direction === 'up' && index === 0) ||
+        (direction === 'down' && index === factors.length - 1)
+      )
+        return;
+
+      const newIndex = direction === 'up' ? index - 1 : index + 1;
+      [factors[index], factors[newIndex]] = [factors[newIndex], factors[index]];
+
+      dispatch({
+        type: 'SET_STATE',
+        payload: {
+          ...state,
+          strategyCanvas: {
+            ...state.strategyCanvas,
+            factors,
+          },
+        },
+      });
+    },
+    [state, dispatch]
+  );
+
+  const updateFactorField = useCallback(
+    (id: string, field: keyof Factor, value: string | number): void => {
+      dispatch({
+        type: 'SET_STATE',
+        payload: {
+          ...state,
+          strategyCanvas: {
+            ...state.strategyCanvas,
+            factors: state.strategyCanvas.factors.map((f) =>
+              f.id === id
+                ? {
+                    ...f,
+                    [field]: field === 'name' ? value : Number(value),
+                  }
+                : f
+            ),
+          },
+        },
+      });
+    },
+    [state, dispatch]
+  );
+
+  const updateNotes = useCallback(
+    (id: string, notes: string): void => {
+      dispatch({
+        type: 'SET_STATE',
+        payload: {
+          ...state,
+          strategyCanvas: {
+            ...state.strategyCanvas,
+            notes: {
+              ...state.strategyCanvas.notes,
+              [id]: notes,
+            },
+          },
+        },
+      });
+    },
+    [state, dispatch]
+  );
+
+  const deleteFactor = useCallback(
+    (id: string): void => {
+      dispatch({
+        type: 'SET_STATE',
+        payload: {
+          ...state,
+          strategyCanvas: {
+            ...state.strategyCanvas,
+            factors: state.strategyCanvas.factors.filter((f) => f.id !== id),
+          },
+        },
+      });
+    },
+    [state, dispatch]
+  );
+
+  const chartData: ChartDataPoint[] = state.strategyCanvas.factors.map((f) => ({
+    name: f.name,
+    Market: f.marketScore,
+    'Your Idea': f.ideaScore,
+    tooltip: `${f.name}\nMarket: ${f.marketScore}\nYour Idea: ${f.ideaScore}`,
+  }));
+
+  const CustomTooltip: React.FC<CustomTooltipProps> = ({
+    active,
+    payload,
+    label,
+  }) => {
+    if (!active || !payload?.length) return null;
+
+    return (
+      <div className="bg-background border rounded p-2 shadow-lg">
+        <p className="font-medium">{label}</p>
+        {payload.map((entry, index) => (
+          <p key={index} style={{ color: entry.color }}>
+            {entry.name}: {entry.value}
+          </p>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Strategy Canvas</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="h-96">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart
+                data={chartData}
+                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+                className="[&_.recharts-cartesian-grid-horizontal]:stroke-muted [&_.recharts-cartesian-grid-vertical]:stroke-muted [&_.recharts-cartesian-axis-line]:stroke-muted [&_.recharts-cartesian-axis-tick-line]:stroke-muted [&_.recharts-cartesian-axis-tick-value]:fill-foreground"
+              >
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis
+                  dataKey="name"
+                  stroke="currentColor"
+                  padding={{ left: 50, right: 50 }}
+                  height={60}
+                  interval={0}
+                  angle={-45}
+                  textAnchor="end"
+                />
+                <YAxis
+                  domain={[0, 10]}
+                  stroke="currentColor"
+                  ticks={[0, 2, 4, 6, 8, 10]}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Legend />
+                <Line
+                  type="monotone"
+                  dataKey="Market"
+                  stroke="hsl(var(--primary))"
+                  strokeWidth={2}
+                  dot={{ strokeWidth: 2 }}
+                  activeDot={{ r: 8 }}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="Your Idea"
+                  stroke="hsl(var(--destructive))"
+                  strokeWidth={2}
+                  dot={{ strokeWidth: 2 }}
+                  activeDot={{ r: 8 }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Factors</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-2">
+              <Input
+                placeholder="Factor name"
+                value={newFactor.name}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setNewFactor({ ...newFactor, name: e.target.value })
+                }
+                className="flex-1"
+              />
+              <Input
+                type="number"
+                placeholder="Market score (0-10)"
+                value={newFactor.marketScore}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setNewFactor({
+                    ...newFactor,
+                    marketScore: Number(e.target.value),
+                  })
+                }
+                min={0}
+                max={10}
+                className="w-32"
+              />
+              <Input
+                type="number"
+                placeholder="Your score (0-10)"
+                value={newFactor.ideaScore}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setNewFactor({
+                    ...newFactor,
+                    ideaScore: Number(e.target.value),
+                  })
+                }
+                min={0}
+                max={10}
+                className="w-32"
+              />
+              <Button onClick={addFactor}>
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+            {error && <p className="text-destructive text-sm">{error}</p>}
+          </div>
+
+          <div className="space-y-2 mt-4">
+            {state.strategyCanvas.factors.map((factor, index) => (
+              <div key={factor.id} className="p-4 border rounded-lg bg-card">
+                <div className="flex items-center gap-2 mb-2">
+                  <div className="flex flex-col gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => moveFactor(factor.id, 'up')}
+                      disabled={index === 0}
+                    >
+                      <MoveUp className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => moveFactor(factor.id, 'down')}
+                      disabled={
+                        index === state.strategyCanvas.factors.length - 1
+                      }
+                    >
+                      <MoveDown className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <Input
+                    value={factor.name}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      updateFactorField(factor.id, 'name', e.target.value)
+                    }
+                    className="flex-1"
+                  />
+                  <Input
+                    type="number"
+                    value={factor.marketScore}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      updateFactorField(
+                        factor.id,
+                        'marketScore',
+                        e.target.value
+                      )
+                    }
+                    min={0}
+                    max={10}
+                    className="w-32"
+                  />
+                  <Input
+                    type="number"
+                    value={factor.ideaScore}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      updateFactorField(factor.id, 'ideaScore', e.target.value)
+                    }
+                    min={0}
+                    max={10}
+                    className="w-32"
+                  />
+                  <Button
+                    variant="destructive"
+                    onClick={() => deleteFactor(factor.id)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                <Textarea
+                  placeholder="Notes about this factor..."
+                  value={state.strategyCanvas.notes[factor.id] || ''}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                    updateNotes(factor.id, e.target.value)
+                  }
+                  className="w-full"
+                />
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default StrategyCanvas;
--- a/components/core/UtilityMap.tsx
+++ b/components/core/UtilityMap.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
+import { Textarea } from '@components/ui/textarea';
+import { Toggle } from '@components/ui/toggle';
+import { useGlobalState } from '@contexts/state/StateContext';
+
+const stages = [
+  'Purchase',
+  'Delivery',
+  'Use',
+  'Supplements',
+  'Maintenance',
+  'Disposal',
+];
+const utilities = [
+  'Customer Productivity',
+  'Simplicity',
+  'Convenience',
+  'Risk',
+  'Environmental Friendliness',
+  'Fun',
+];
+
+const UtilityMap = () => {
+  const { state, dispatch } = useGlobalState();
+
+  const toggleCell = (key: string) => {
+    dispatch({
+      type: 'TOGGLE_UTILITY',
+      payload: { key },
+    });
+  };
+
+  const updateNotes = (key: string, notes: string) => {
+    dispatch({
+      type: 'UPDATE_UTILITY_NOTES',
+      payload: { key, notes },
+    });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Buyer Utility Map</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse">
+            <thead>
+              <tr>
+                <th className="p-2 border"></th>
+                {stages.map((stage) => (
+                  <th key={stage} className="p-2 border text-center">
+                    {stage}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {utilities.map((utility) => (
+                <tr key={utility}>
+                  <td className="p-2 border font-medium">{utility}</td>
+                  {stages.map((stage) => {
+                    const key = `${utility}-${stage}`;
+                    return (
+                      <td key={stage} className="p-2 border">
+                        <div className="flex flex-col gap-2">
+                          <Toggle
+                            pressed={state.utilityMap[key]?.value || false}
+                            onPressedChange={() => toggleCell(key)}
+                            className="w-full"
+                          >
+                            {state.utilityMap[key]?.value
+                              ? 'Opportunity'
+                              : 'No opportunity'}
+                          </Toggle>
+                          <Textarea
+                            placeholder="Add notes..."
+                            value={state.utilityMap[key]?.notes || ''}
+                            onChange={(e) => updateNotes(key, e.target.value)}
+                            className="h-24 text-sm"
+                          />
+                        </div>
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default UtilityMap;
--- a/components/core/Validation.tsx
+++ b/components/core/Validation.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
+import { Checkbox } from '@components/ui/checkbox';
+import { Textarea } from '@components/ui/textarea';
+import { useGlobalState } from '@contexts/state/StateContext';
+
+const nonCustomerTiers = [
+  {
+    id: 'soon',
+    label: 'Soon-to-be non-customers who are on the edge of your market',
+  },
+  {
+    id: 'refusing',
+    label: 'Refusing non-customers who consciously choose against your market',
+  },
+  {
+    id: 'unexplored',
+    label: 'Unexplored non-customers who are in markets distant from yours',
+  },
+];
+
+const sequenceSteps = [
+  {
+    id: 'utility',
+    label: 'Does your offering deliver exceptional utility to buyers?',
+  },
+  { id: 'price', label: 'Is your price accessible to the mass of buyers?' },
+  {
+    id: 'cost',
+    label: 'Can you attain your cost target to profit at your strategic price?',
+  },
+  {
+    id: 'adoption',
+    label: 'Are there adoption hurdles in actualizing your idea?',
+  },
+];
+
+const Validation = () => {
+  const { state, dispatch } = useGlobalState();
+
+  const toggleNonCustomer = (key: string) => {
+    dispatch({
+      type: 'TOGGLE_NON_CUSTOMER',
+      payload: { key },
+    });
+  };
+
+  const toggleSequence = (key: string) => {
+    dispatch({
+      type: 'TOGGLE_SEQUENCE',
+      payload: { key },
+    });
+  };
+
+  const updateNotes = (notes: string) => {
+    dispatch({
+      type: 'UPDATE_VALIDATION_NOTES',
+      payload: notes,
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Non-Customer Analysis</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {nonCustomerTiers.map((tier) => (
+              <div key={tier.id} className="flex items-start space-x-2">
+                <Checkbox
+                  id={tier.id}
+                  checked={state.validation.nonCustomers[tier.id] || false}
+                  onCheckedChange={() => toggleNonCustomer(tier.id)}
+                />
+                <label
+                  htmlFor={tier.id}
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  {tier.label}
+                </label>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Strategic Sequence</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {sequenceSteps.map((step) => (
+              <div key={step.id} className="flex items-start space-x-2">
+                <Checkbox
+                  id={step.id}
+                  checked={state.validation.sequence[step.id] || false}
+                  onCheckedChange={() => toggleSequence(step.id)}
+                />
+                <label
+                  htmlFor={step.id}
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  {step.label}
+                </label>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Notes</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Textarea
+            placeholder="Add validation notes..."
+            value={state.validation.notes}
+            onChange={(e) => updateNotes(e.target.value)}
+            className="min-h-[200px]"
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default Validation;
--- a/components/ui/alert.tsx
+++ b/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@utils/cn';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@utils/cn';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+
+import { cn } from '@utils/cn';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-xl border bg-card text-card-foreground shadow',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from '@utils/cn';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '@utils/cn';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
--- a/components/ui/editable-list.tsx
+++ b/components/ui/editable-list.tsx
@@ -0,0 +1,32 @@
+import { Input } from '@components/ui/input';
+import { Button } from '@components/ui/button';
+import { X } from 'lucide-react';
+
+export function EditableList({
+  items,
+  onAdd,
+  onRemove,
+  onUpdate,
+}: {
+  items: string[];
+  onAdd: () => void;
+  onRemove: (index: number) => void;
+  onUpdate: (index: number, value: string) => void;
+}) {
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => (
+        <div key={index} className="flex gap-2">
+          <Input
+            value={item}
+            onChange={(e) => onUpdate(index, e.target.value)}
+          />
+          <Button variant="ghost" size="icon" onClick={() => onRemove(index)}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+      <Button onClick={onAdd}>Add</Button>
+    </div>
+  );
+}
--- a/components/ui/factor-input.tsx
+++ b/components/ui/factor-input.tsx
@@ -0,0 +1,48 @@
+import { Label } from '@components/ui/label';
+import { Input } from '@components/ui/input';
+import { Slider } from '@components/ui/slider';
+
+export function FactorInput({
+  name,
+  marketScore,
+  ideaScore,
+  onNameChange,
+  onMarketChange,
+  onIdeaChange,
+}: {
+  name: string;
+  marketScore: number;
+  ideaScore: number;
+  onNameChange: (value: string) => void;
+  onMarketChange: (value: number) => void;
+  onIdeaChange: (value: number) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label>Factor Name</Label>
+        <Input value={name} onChange={(e) => onNameChange(e.target.value)} />
+      </div>
+      <div>
+        <Label>Market Score</Label>
+        <Slider
+          value={[marketScore]}
+          min={0}
+          max={10}
+          step={1}
+          onValueChange={([value]) => onMarketChange(value)}
+        />
+      </div>
+      <div>
+        <Label>Idea Score</Label>
+        <Slider
+          value={[ideaScore]}
+          min={0}
+          max={10}
+          step={1}
+          onValueChange={([value]) => onIdeaChange(value)}
+        />
+      </div>
+    </div>
+  );
+}
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '@utils/cn';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@utils/cn';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
--- a/components/ui/notes-field.tsx
+++ b/components/ui/notes-field.tsx
@@ -0,0 +1,23 @@
+import { Textarea } from '@components/ui/textarea';
+import { Label } from '@components/ui/label';
+
+export function NotesField({
+  value,
+  onChange,
+  label = 'Notes',
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+}) {
+  return (
+    <div className="space-y-2">
+      <Label>{label}</Label>
+      <Textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="min-h-[100px]"
+      />
+    </div>
+  );
+}
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -0,0 +1,159 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '@utils/cn';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+import { cn } from '@utils/cn';
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex w-full touch-none select-none items-center',
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '@utils/cn';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '@utils/cn';
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<'textarea'>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
--- a/components/ui/toggle.tsx
+++ b/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@utils/cn';
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
--- a/components/ui/tool-card.tsx
+++ b/components/ui/tool-card.tsx
@@ -0,0 +1,18 @@
+import { Card, CardHeader, CardTitle, CardContent } from '@components/ui/card';
+
+export function ToolCard({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}