build ok,

002_source/cms/src/components/dashboard/tasks/column-item.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import * as React from 'react';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { DotsThree as DotsThreeIcon } from '@phosphor-icons/react/dist/ssr/DotsThree';
+
+import { usePopover } from '@/hooks/use-popover';
+
+import { ColumnDroppable } from './column-droppable';
+import type { Column, Task } from './types';
+
+export interface ColumnItemProps {
+  column: Omit<Column, 'taskIds'>;
+  onColumnEdit?: (columnId: string) => void;
+  onColumnClear?: (columnId: string) => void;
+  onColumnDelete?: (columnId: string) => void;
+  onTaskOpen?: (taskId: string) => void;
+  onTaskCreate?: (columnId: string) => void;
+  tasks: Task[];
+}
+
+export function ColumnItem({
+  column,
+  onColumnEdit,
+  onColumnClear,
+  onColumnDelete,
+  onTaskOpen,
+  onTaskCreate,
+  tasks = [],
+}: ColumnItemProps): React.JSX.Element {
+  const { id, name } = column;
+
+  const morePopover = usePopover<HTMLButtonElement>();
+
+  return (
+    <React.Fragment>
+      <Stack spacing={3} sx={{ flex: '0 0 auto', width: '360px' }}>
+        <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+            <Typography variant="h6">{name}</Typography>
+            <Chip label={tasks.length} size="small" variant="soft" />
+          </Stack>
+          <IconButton onClick={morePopover.handleOpen} ref={morePopover.anchorRef}>
+            <DotsThreeIcon weight="bold" />
+          </IconButton>
+        </Stack>
+        <ColumnDroppable
+          id={id}
+          onTaskCreate={() => {
+            onTaskCreate?.(id);
+          }}
+          onTaskOpen={onTaskOpen}
+          tasks={tasks}
+        />
+      </Stack>
+      <Menu
+        anchorEl={morePopover.anchorRef.current}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        onClose={morePopover.handleClose}
+        open={morePopover.open}
+        slotProps={{ paper: { sx: { width: '200px' } } }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      >
+        <MenuItem
+          onClick={(): void => {
+            morePopover.handleClose();
+            onColumnEdit?.(id);
+          }}
+        >
+          Edit
+        </MenuItem>
+        <MenuItem
+          onClick={(): void => {
+            morePopover.handleClose();
+            onColumnClear?.(id);
+          }}
+        >
+          Clear
+        </MenuItem>
+        <MenuItem
+          onClick={(): void => {
+            morePopover.handleClose();
+            onColumnDelete?.(id);
+          }}
+        >
+          Delete
+        </MenuItem>
+      </Menu>
+    </React.Fragment>
+  );
+}