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/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;