"use client";
import { useState } from "react";
import Avatar from "@mui/material/Avatar";
import AvatarGroup from "@mui/material/AvatarGroup";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";
import AddIcon from "@mui/icons-material/Add";
import BusinessIcon from "@mui/icons-material/Business";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlineOutlined";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
import type {
Stakeholder,
StakeholderUser,
} from "@/features/stakeholder/stakeholder-data";
const API_URL =
process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/api/v1";
function resolveLogoSrc(value: string | null | undefined) {
if (!value) {
return undefined;
}
if (value.startsWith("/uploads/")) {
const backendUrl = API_URL.replace(/\/api(?:\/v\d+)?\/?$/, "");
return `${backendUrl}${value}`;
}
return value;
}
const typeStyles: Record<
string,
{ color: string; backgroundColor: string; borderColor: string }
> = {
MINISTRY: {
color: "#175cd3",
backgroundColor: "#eff8ff",
borderColor: "#b2ddff",
},
PRIVATE_SECTOR: {
color: "#6941c6",
backgroundColor: "#f9f5ff",
borderColor: "#e9d7fe",
},
OTHER: {
color: "#414651",
backgroundColor: "#fafafa",
borderColor: "#e9eaeb",
},
};
function resolveAvatarSrc(value: string | null | undefined) {
return resolveLogoSrc(value);
}
function getUserName(user: StakeholderUser) {
return user.name?.trim() || user.email || `User #${user.id}`;
}
function getUserInitial(user: StakeholderUser) {
return getUserName(user).charAt(0).toUpperCase();
}
const USER_AVATAR_GROUP_MAX = 6;
function getTypeStyle(type: string) {
const normalizedType = type.toUpperCase().replace(/\s+/g, "_");
return typeStyles[normalizedType] ?? typeStyles.OTHER;
}
export function TableText({
value,
fontSize = 13,
fontWeight = 500,
align = "left",
}: {
value: string;
fontSize?: number;
fontWeight?: number;
align?: "left" | "center";
}) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
{value}
);
}
export function LogoCell({
name,
logo,
}: {
name: string;
logo: string | null;
}) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
{logo ? null : }
);
}
export function StakeholderCell({ name }: { name: string }) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
{name}
);
}
export function TypeBadge({ type }: { type: string }) {
const style = getTypeStyle(type);
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
{type}
);
}
export function StatusBadge({ active }: { active: boolean }) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
const style = active
? {
color: "#12b76a",
backgroundColor: "#ecfdf3",
borderColor: "#d1fadf",
}
: {
color: "#f04438",
backgroundColor: "#fef3f2",
borderColor: "#fee4e2",
};
return (
{active ? "Active" : "Inactive"}
);
}
export function DescriptionCell({ value }: { value: string | null }) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
{value && value.length > 0 ? value : "-"}
);
}
export function UsersCell({
users,
align = "center",
}: {
users: StakeholderUser[];
align?: "left" | "center";
}) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
const avatarBorderColor = isDark ? "#101828" : "#ffffff";
if (users.length === 0) {
return ;
}
return (
{users.map((user) => (
{getUserInitial(user)}
))}
);
}
type ActionCellProps = {
stakeholder: Stakeholder;
onView: (stakeholder: Stakeholder) => void;
onAddUser: (stakeholder: Stakeholder) => void;
onEdit: (stakeholder: Stakeholder) => void;
onDelete: (stakeholder: Stakeholder) => void;
};
export function ActionCell({
stakeholder,
onView,
onAddUser,
onEdit,
onDelete,
}: ActionCellProps) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
const [menuAnchorEl, setMenuAnchorEl] = useState(null);
function closeMenu() {
setMenuAnchorEl(null);
}
return (
<>
setMenuAnchorEl(event.currentTarget)}
size="small"
sx={{
width: 28,
height: 28,
borderRadius: "4px",
color: isDark ? alpha("#ffffff", 0.72) : "#717680",
}}
>
);
}