bananas-commerce-admin 0.21.2 → 0.22.0

package/src/extensions/user/components/InviteUserModal.tsx

@@ -0,0 +1,179 @@
+import React, { useEffect, useState } from "react";
+
+import {
+  Autocomplete,
+  Box,
+  Button,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+
+import { useSnackbar } from "notistack";
+
+import { useApi } from "../../../contexts/ApiContext";
+import { useI18n } from "../../../contexts/I18nContext";
+import { PageProps } from "../../../types";
+import { GroupOption, StaffOptions } from "../types/staff";
+
+export interface InviteUserModalProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  refresh: PageProps["refresh"];
+}
+
+export const InviteUserModal: React.FC<InviteUserModalProps> = ({ open, setOpen, refresh }) => {
+  const { t } = useI18n();
+  const api = useApi();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const [email, setEmail] = useState("");
+  const [selectedGroups, setSelectedGroups] = useState<GroupOption[]>([]);
+  const [availableGroups, setAvailableGroups] = useState<GroupOption[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [emailError, setEmailError] = useState("");
+
+  useEffect(() => {
+    const fetchOptions = async () => {
+      const response = await api.operations["user.staff:options"].call({});
+      if (response.ok) {
+        const options: StaffOptions = await response.json();
+        setAvailableGroups(options.groups);
+      }
+    };
+    if (open) {
+      fetchOptions();
+    }
+  }, [api, open]);
+
+  const handleClose = () => {
+    setEmail("");
+    setSelectedGroups([]);
+    setEmailError("");
+    setOpen(false);
+  };
+
+  const validateEmail = (email: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleSubmit = async () => {
+    // Validate email
+    if (!email) {
+      setEmailError(t("Email is required"));
+      return;
+    }
+
+    if (!validateEmail(email)) {
+      setEmailError(t("Please enter a valid email address"));
+      return;
+    }
+
+    if (selectedGroups.length === 0) {
+      enqueueSnackbar(t("Please select at least one group"), { variant: "error" });
+      return;
+    }
+
+    setLoading(true);
+    setEmailError("");
+
+    try {
+      const response = await api.operations["user.staff:invite"].call({
+        body: {
+          email,
+          groups: selectedGroups.map((g) => g.id),
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        enqueueSnackbar(data.message || t("Invite sent successfully"), { variant: "success" });
+        handleClose();
+        refresh();
+      } else {
+        const errorData = await response.json();
+        if (errorData.detail && Array.isArray(errorData.detail)) {
+          const emailErrors = errorData.detail.filter((err: { loc?: string[]; msg?: string }) =>
+            err.loc?.includes("email"),
+          );
+          if (emailErrors.length > 0) {
+            setEmailError(emailErrors[0].msg);
+          } else {
+            enqueueSnackbar(errorData.detail[0]?.msg || t("Failed to send invite"), {
+              variant: "error",
+            });
+          }
+        } else {
+          enqueueSnackbar(t("Failed to send invite"), { variant: "error" });
+        }
+      }
+    } catch (error) {
+      console.error("[INVITE_USER]", error);
+      enqueueSnackbar(t("Failed to send invite"), { variant: "error" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} sx={{ "& .MuiPaper-rounded": { borderRadius: 3 } }} onClose={handleClose}>
+      <DialogTitle sx={{ p: 3 }}>{t("Invite Staff User")}</DialogTitle>
+      <DialogContent sx={{ p: 3, minWidth: 500 }}>
+        <Box display="flex" flexDirection="column" gap={3}>
+          <TextField
+            fullWidth
+            error={!!emailError}
+            helperText={emailError || t("Enter the email address of the user to invite")}
+            label={t("Email")}
+            type="email"
+            value={email}
+            onChange={(e) => {
+              setEmail(e.target.value);
+              setEmailError("");
+            }}
+          />
+
+          <Autocomplete
+            fullWidth
+            multiple
+            getOptionLabel={(option) => option.name}
+            isOptionEqualToValue={(option, value) => option.id === value.id}
+            options={availableGroups}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                helperText={t("Select one or more groups for the user")}
+                label={t("Groups")}
+              />
+            )}
+            renderTags={(value, getTagProps) =>
+              value.map((option, index) => (
+                <Chip
+                  {...getTagProps({ index })}
+                  key={option.id}
+                  label={option.name}
+                  size="small"
+                />
+              ))
+            }
+            size="small"
+            value={selectedGroups}
+            onChange={(_, newValue) => setSelectedGroups(newValue)}
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions sx={{ px: 3, py: 3 }}>
+        <Button onClick={handleClose}>{t("Cancel")}</Button>
+        <Button disabled={loading} variant="contained" onClick={handleSubmit}>
+          {loading ? t("Sending...") : t("Send Invite")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default InviteUserModal;

package/src/extensions/user/index.tsx

@@ -0,0 +1,51 @@
+import PeopleIcon from "@mui/icons-material/People";
+
+import { OpenAPI } from "openapi-types";
+
+import { RouterExtension } from "../../router/Router";
+import { NavigationOverrides, PageComponent } from "../../types";
+
+const routes: Record<
+  string,
+  Record<
+    string,
+    {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      page: () => PageComponent<any> | Promise<PageComponent<any>>;
+      request?: OpenAPI.Request;
+      defaultRequest?: OpenAPI.Request;
+      offline?: boolean;
+    }
+  >
+> = {
+  staff: {
+    list: { page: async () => (await import("./pages/staff/list")).default },
+    detail: {
+      page: async () => (await import("./pages/staff/detail")).default,
+    },
+  },
+};
+
+export const router: RouterExtension = {
+  app: "user",
+  pages: (route) => {
+    const { page, ...hit } = routes[route.view]?.[route.action] ?? {};
+
+    if (page != null) {
+      return {
+        page: page(),
+        ...hit,
+      };
+    }
+
+    return undefined;
+  },
+};
+
+export const navigation: NavigationOverrides = {
+  "user.staff:list": {
+    icon: PeopleIcon,
+    title: "Staff",
+    permission: "user.view_user",
+  },
+} as const;

package/src/extensions/user/pages/staff/detail.tsx

@@ -0,0 +1,262 @@
+import React, { useEffect, useState } from "react";
+
+import { Autocomplete, Button, Chip, Stack, TextField } from "@mui/material";
+
+import { DateTime } from "luxon";
+import { useSnackbar } from "notistack";
+
+import ActionBar from "../../../../components/ActionBar";
+import Card from "../../../../components/Card";
+import CardActions from "../../../../components/Card/CardActions";
+import CardCancelButton from "../../../../components/Card/CardCancelButton";
+import CardContent from "../../../../components/Card/CardContent";
+import CardFieldSwitch from "../../../../components/Card/CardFieldSwitch";
+import CardFieldText from "../../../../components/Card/CardFieldText";
+import CardHeader from "../../../../components/Card/CardHeader";
+import CardRow from "../../../../components/Card/CardRow";
+import CardSaveButton from "../../../../components/Card/CardSaveButton";
+import { Header } from "../../../../components/Header";
+import { Page } from "../../../../components/Page";
+import { TitleBar } from "../../../../components/TitleBar";
+import Content, {
+  ContentWrapperWithActionBar,
+  LeftColumn,
+  RightColumn,
+} from "../../../../containers/Content";
+import { useApi } from "../../../../contexts/ApiContext";
+import { useCardContext } from "../../../../contexts/CardContext";
+import { useI18n } from "../../../../contexts/I18nContext";
+import { useUser } from "../../../../contexts/UserContext";
+import { PageComponent } from "../../../../types";
+import { hasPermission } from "../../../../util/has_permission";
+import { GroupOption, StaffDetail, StaffOptions } from "../../types/staff";
+
+interface StaffUpdateValues {
+  is_active: string;
+  groups: string;
+}
+
+const StaffDetailPage: PageComponent<StaffDetail> = ({ data }) => {
+  const { t } = useI18n();
+  const api = useApi();
+  const { user: currentUser } = useUser();
+  const { enqueueSnackbar } = useSnackbar();
+  const [user, setUser] = useState<StaffDetail>(data);
+  const [availableGroups, setAvailableGroups] = useState<GroupOption[]>([]);
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+
+  const formatDateTime = (dateString: string | null) => {
+    if (!dateString) return t("Never");
+    return DateTime.fromISO(dateString as string).toISODate() ?? undefined;
+  };
+
+  useEffect(() => {
+    const fetchOptions = async () => {
+      const response = await api.operations["user.staff:options"].call({});
+      if (response.ok) {
+        const options: StaffOptions = await response.json();
+        setAvailableGroups(options.groups);
+      }
+    };
+    fetchOptions();
+  }, [api]);
+
+  const handleSubmit = async (values: StaffUpdateValues) => {
+    const response = await api.operations["user.staff:update"].call({
+      params: { id: user.id },
+      body: {
+        is_active: values.is_active === "on",
+        groups: values.groups
+          ? values.groups
+              .split(",")
+              .map((id) => parseInt(id.trim(), 10))
+              .filter((id) => !isNaN(id))
+          : [],
+      },
+    });
+
+    if (response.ok) {
+      const updatedUser = await response.json();
+      setUser(updatedUser);
+      return t("User updated successfully");
+    }
+
+    throw new Error("Failed to update user");
+  };
+
+  const handlePasswordReset = async () => {
+    setIsResettingPassword(true);
+
+    try {
+      const response = await api.operations["user.staff:password-reset-request"].call({
+        body: {
+          email: user.email,
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        enqueueSnackbar(data.message || t("Password reset link sent successfully"), {
+          variant: "success",
+        });
+      } else {
+        const errorData = await response.json();
+        if (errorData.detail && Array.isArray(errorData.detail)) {
+          enqueueSnackbar(errorData.detail[0]?.msg || t("Failed to send password reset link"), {
+            variant: "error",
+          });
+        } else {
+          enqueueSnackbar(t("Failed to send password reset link"), { variant: "error" });
+        }
+      }
+    } catch (error) {
+      console.error("[PASSWORD_RESET]", error);
+      enqueueSnackbar(t("Failed to send password reset link"), { variant: "error" });
+    } finally {
+      setIsResettingPassword(false);
+    }
+  };
+
+  const GroupsField = () => {
+    const { isEditing } = useCardContext();
+    const [selectedGroups, setSelectedGroups] = useState<GroupOption[]>(
+      availableGroups.filter((g) => user.groups.includes(g.name)),
+    );
+
+    if (isEditing) {
+      return (
+        <>
+          <Autocomplete
+            fullWidth
+            multiple
+            getOptionLabel={(option) => option.name}
+            isOptionEqualToValue={(option, value) => option.id === value.id}
+            options={availableGroups}
+            renderInput={(params) => (
+              <TextField {...params} helperText={t("Select user groups")} label={t("Groups")} />
+            )}
+            renderTags={(value, getTagProps) =>
+              value.map((option, index) => (
+                <Chip
+                  {...getTagProps({ index })}
+                  key={option.id}
+                  label={option.name}
+                  size="small"
+                />
+              ))
+            }
+            size="small"
+            value={selectedGroups}
+            onChange={(_, newValue) => setSelectedGroups(newValue)}
+          />
+          <input name="groups" type="hidden" value={selectedGroups.map((g) => g.id).join(", ")} />
+        </>
+      );
+    }
+
+    return (
+      <Stack direction="column" spacing={1}>
+        <strong>{t("Groups")}</strong>
+        <Stack direction="row" flexWrap="wrap" gap={1}>
+          {user.groups.length > 0 ? (
+            user.groups.map((group) => <Chip key={group} label={group} size="small" />)
+          ) : (
+            <span style={{ fontSize: "0.875rem", color: "#666" }}>{t("No groups")}</span>
+          )}
+        </Stack>
+      </Stack>
+    );
+  };
+
+  return (
+    <Page>
+      <Header>
+        <TitleBar title={user.email} />
+      </Header>
+
+      <ContentWrapperWithActionBar>
+        <Content layout="fixedWidth">
+          <LeftColumn>
+            <Card isEditable={false}>
+              <CardHeader title={t("User Details")} />
+
+              <CardContent>
+                <CardRow>
+                  <CardFieldText
+                    formName="email"
+                    isEditable={false}
+                    label={t("Email")}
+                    value={user.email}
+                  />
+                </CardRow>
+                <CardRow>
+                  <CardFieldText
+                    formName="last_login"
+                    isEditable={false}
+                    label={t("Last Login")}
+                    value={formatDateTime(user.last_login)}
+                  />
+                </CardRow>
+                <CardRow>
+                  <CardFieldText
+                    formName="date_created"
+                    isEditable={false}
+                    label={t("Date Joined")}
+                    value={formatDateTime(user.date_created)}
+                  />
+                </CardRow>
+              </CardContent>
+            </Card>
+          </LeftColumn>
+
+          <RightColumn>
+            <Card<StaffUpdateValues>
+              isCompact={true}
+              isEditable={hasPermission(currentUser, "user.change_user")}
+              onSubmit={handleSubmit}
+            >
+              <CardHeader title={t("Permissions")} />
+
+              <CardContent>
+                <CardRow>
+                  <CardFieldSwitch
+                    formName="is_active"
+                    helperText={t(
+                      "Indicates whether the user should be considered active. Uncheck this instead of deleting accounts.",
+                    )}
+                    label={t("Active")}
+                    value={user.is_active}
+                  />
+                </CardRow>
+
+                <CardRow>
+                  <GroupsField />
+                </CardRow>
+              </CardContent>
+
+              <CardActions>
+                <CardCancelButton />
+                <CardSaveButton />
+              </CardActions>
+            </Card>
+          </RightColumn>
+        </Content>
+
+        {hasPermission(currentUser, "user.change_user") && (
+          <ActionBar>
+            <Button
+              color="primary"
+              disabled={isResettingPassword}
+              variant="contained"
+              onClick={handlePasswordReset}
+            >
+              {isResettingPassword ? t("Sending...") : t("Reset Password")}
+            </Button>
+          </ActionBar>
+        )}
+      </ContentWrapperWithActionBar>
+    </Page>
+  );
+};
+
+export default StaffDetailPage;

package/src/extensions/user/pages/staff/list.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { Button, TableBody } from "@mui/material";
+
+import ActionBar from "../../../../components/ActionBar";
+import { Header } from "../../../../components/Header";
+import { Page } from "../../../../components/Page";
+import SearchBar from "../../../../components/SearchBar";
+import { Table } from "../../../../components/Table";
+import { TableCell } from "../../../../components/Table/TableCell";
+import TableHead from "../../../../components/Table/TableHead";
+import TableHeading from "../../../../components/Table/TableHeading";
+import { NavigatingTableRow } from "../../../../components/Table/TableRow";
+import TableCard from "../../../../components/TableCard";
+import { TitleBar } from "../../../../components/TitleBar";
+import Content, { ContentWrapperWithActionBar } from "../../../../containers/Content";
+import { useI18n } from "../../../../contexts/I18nContext";
+import { useRouter } from "../../../../contexts/RouterContext";
+import { useUser } from "../../../../contexts/UserContext";
+import { LimitOffset, PageComponent } from "../../../../types";
+import { hasPermission } from "../../../../util/has_permission";
+import InviteUserModal from "../../components/InviteUserModal";
+import { StaffList } from "../../types/staff";
+
+const StaffListPage: PageComponent<LimitOffset<StaffList>> = ({ data, refresh }) => {
+  const { t } = useI18n();
+  const { navigate } = useRouter();
+  const { user } = useUser();
+  const [inviteModalOpen, setInviteModalOpen] = useState(false);
+
+  return (
+    <Page>
+      <Header>
+        <TitleBar title="Staff">
+          <SearchBar
+            defaultValue={new URLSearchParams(window.location.search).get("search") ?? ""}
+            placeholder={t("Search users…")}
+            onSubmit={(input) => {
+              if (input === "") {
+                navigate("user.staff:list", {
+                  replace: true,
+                });
+              } else {
+                navigate("user.staff:list", {
+                  query: {
+                    search: input,
+                  },
+                  replace: true,
+                });
+              }
+            }}
+          />
+        </TitleBar>
+      </Header>
+
+      <ContentWrapperWithActionBar>
+        <Content layout="fullWidth">
+          <TableCard>
+            <Table pagination count={data?.count}>
+              <TableHead>
+                <TableHeading>{t("Email")}</TableHeading>
+                <TableHeading>{t("Permissions")}</TableHeading>
+                <TableHeading>{t("Active")}</TableHeading>
+              </TableHead>
+
+              <TableBody>
+                {data?.results.map((user) => (
+                  <NavigatingTableRow
+                    key={user.id}
+                    route="user.staff:detail"
+                    routeParams={{ id: user.id }}
+                  >
+                    <TableCell>{user.email}</TableCell>
+                    <TableCell>{user.groups.join(", ")}</TableCell>
+                    <TableCell>
+                      {user.is_active ? <CheckCircleIcon color="success" fontSize="small" /> : null}
+                    </TableCell>
+                  </NavigatingTableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableCard>
+        </Content>
+
+        {hasPermission(user, "user.add_user") && (
+          <ActionBar>
+            <Button color="primary" variant="contained" onClick={() => setInviteModalOpen(true)}>
+              {t("Invite")}
+            </Button>
+          </ActionBar>
+        )}
+      </ContentWrapperWithActionBar>
+
+      <InviteUserModal open={inviteModalOpen} refresh={refresh} setOpen={setInviteModalOpen} />
+    </Page>
+  );
+};
+
+export default StaffListPage;

package/src/extensions/user/types/staff.ts

@@ -0,0 +1,27 @@
+export interface StaffList {
+  id: number;
+  email: string;
+  is_active: boolean;
+  groups: string[];
+}
+
+export interface StaffDetail {
+  id: number;
+  email: string;
+  is_staff: boolean;
+  is_active: boolean;
+  is_superuser: boolean;
+  groups: string[];
+  permissions: string[];
+  last_login: string | null;
+  date_created: string;
+}
+
+export interface GroupOption {
+  id: number;
+  name: string;
+}
+
+export interface StaffOptions {
+  groups: GroupOption[];
+}

package/src/index.ts

@@ -70,6 +70,7 @@ export * as pos from "./extensions/pos";
 export * as pricing from "./extensions/pricing";
 export * as report from "./extensions/report";
 export * as subscription from "./extensions/subscription";
+export * as user from "./extensions/user";
 export * as mui from "./mui";
 export type { RouterExtension } from "./router/Router";
 export * as themes from "./themes";