@evenicanpm/admin-integrate 1.1.0

package/src/components/layouts/root-container.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import { Theme, useTheme } from "@mui/material";
+import { Container, Box, Stack } from "@mui/material";
+import { SxProps, Breakpoint } from "@mui/system";
+
+import { IntegrateFooter } from "@evenicanpm/admin-integrate/components/footer";
+
+interface Props {
+  maxWidth?: false | Breakpoint;
+  children: React.ReactNode;
+  sx?: SxProps;
+}
+
+export default function RootContainer(props: Props) {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const defaultMaxWidth = "xl";
+
+  return (
+    <Container
+      maxWidth={props.maxWidth !== undefined ? props.maxWidth : defaultMaxWidth}
+      sx={props.sx}
+    >
+      <Box sx={styles.root}>
+        <Stack spacing={2}>{props.children}</Stack>
+        <IntegrateFooter />
+      </Box>
+    </Container>
+  );
+}
+
+const getStyles = (theme: Theme) => {
+  return {
+    root: {
+      margin: theme.spacing(3, 4),
+      display: "flex",
+      flexDirection: "column",
+      minHeight: `calc(100vh - ${theme.spacing(20)})`,
+    },
+  };
+};

package/src/components/link-cards/index.ts

@@ -0,0 +1 @@
+export { default } from "./link-card";

package/src/components/link-cards/link-card.tsx

@@ -0,0 +1,36 @@
+// STYLED COMPONENTS
+import { BodyText, TitleText, Wrapper } from "./styles";
+import React from "react";
+import { redirect, RedirectType } from "next/navigation";
+import { Box, CardActionArea } from "@mui/material";
+
+// ============================================================
+type Props = {
+  title: string;
+  description?: string;
+  url?: string;
+  children?: React.ReactNode;
+};
+// ============================================================
+export default function LinkCard({ title, description, url, children }: Props) {
+  const handleRedirect = () => {
+    if (url) {
+      redirect(url, RedirectType.push);
+    }
+  };
+
+  return (
+    <Box sx={{ height: "100%" }}>
+      <CardActionArea onClick={handleRedirect} sx={{ height: "100%" }}>
+        <Wrapper>
+          {/* Add the icon as a child */}
+          {children}
+          <TitleText variant="h5" sx={{ textAlign: "center" }}>
+            {title}
+          </TitleText>
+          <BodyText variant="body1">{description}</BodyText>
+        </Wrapper>
+      </CardActionArea>
+    </Box>
+  );
+}

package/src/components/link-cards/styles.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import styled from "@mui/material/styles/styled";
+import { Card, Typography } from "@mui/material";
+
+// STYLED COMPONENTS
+export const Wrapper = styled(Card)(({ theme }) => ({
+  display: "flex",
+  height: "100%",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  border: `1px solid ${theme.palette.grey[300]}`,
+  borderRadius: theme.shape.borderRadius,
+  paddingLeft: theme.spacing(4),
+  paddingRight: theme.spacing(4),
+  paddingTop: theme.spacing(3),
+  paddingBottom: theme.spacing(3),
+  backgroundColor: theme.palette.common.white,
+}));
+
+export const TitleText = styled(Typography)({
+  textAlign: "center",
+});
+
+export const BodyText = styled(Typography)(({ theme }) => ({
+  color: theme.palette.grey[600],
+  textAlign: "center",
+}));

package/src/components/list-filter/date-filter.tsx

@@ -0,0 +1,55 @@
+import { Typography, Theme, useTheme, FormControl } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import React, { useState } from "react";
+import { DateFilter, FilterProps } from "./list-filter-types";
+import { useTranslations } from "next-intl";
+
+const DateFilterComponent: React.FC<FilterProps<DateFilter>> = ({
+  filter,
+  onSet,
+  onError,
+  current,
+}) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+  const t = useTranslations("Integrate.Filter");
+
+  const [value, setValue] = useState(current);
+  const [error, setError] = useState<string | null>(null);
+
+  const updateValue = (date: null | Date | string) => {
+    const newValue =
+      typeof date !== "string" && !isNaN(date?.getTime())
+        ? date.toISOString()
+        : null;
+
+    setValue(newValue);
+    onSet(newValue);
+  };
+
+  const updateError = (error: string | null) => {
+    setError(error ? t("invalidDate") : null);
+    onError(!!error);
+  };
+
+  return (
+    <FormControl>
+      <Typography>{filter.label}</Typography>
+      <DatePicker
+        value={value && new Date(value as string)}
+        onChange={updateValue}
+        onError={updateError}
+        slotProps={{
+          field: { clearable: true },
+          textField: {
+            helperText: error,
+          },
+        }}
+      />
+    </FormControl>
+  );
+};
+
+const getStyles = (theme: Theme) => ({});
+
+export default DateFilterComponent;

package/src/components/list-filter/date-range-filter.tsx

@@ -0,0 +1,101 @@
+import { Box, Typography, Theme, useTheme, FormControl } from "@mui/material";
+import { useTranslations } from "next-intl";
+
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import React, { useState } from "react";
+import { DateRangeFilter, FilterProps } from "./list-filter-types";
+
+const DateRangeFilterComponent: React.FC<FilterProps<DateRangeFilter>> = ({
+  filter,
+  onSet,
+  onError,
+  current,
+}) => {
+  const t = useTranslations("Integrate.Filter");
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const [value, setValue] = useState(current);
+  const [error, setError] = useState<{ start?: string; end?: string } | null>(
+    null,
+  );
+
+  const updateValue = (part: "start" | "end", date: null | Date | string) => {
+    const dateValue =
+      typeof date !== "string" && !isNaN(date?.getTime())
+        ? date.toISOString()
+        : null;
+
+    let dateRangeValue = {
+      start: null,
+      end: null,
+      ...value,
+      [part]: dateValue,
+    };
+
+    if (!dateRangeValue.start && !dateRangeValue.end) dateRangeValue = null;
+
+    setValue(dateRangeValue);
+    onSet(dateRangeValue);
+  };
+
+  const updateError = (part: "start" | "end", newError: string | null) => {
+    let errorValue = {
+      start: null,
+      end: null,
+      ...(error ? error : {}),
+      [part]: newError ? t("invalidDate") : null,
+    };
+
+    if (!errorValue.start && !errorValue.end) errorValue = null;
+
+    setError(errorValue);
+    onError(!!errorValue);
+  };
+
+  return (
+    <FormControl>
+      <Typography>{filter.label}</Typography>
+      <Box sx={styles.dateRange}>
+        <DatePicker
+          value={value?.start ? new Date(value.start) : null}
+          label={t("dateStartLabel")}
+          onChange={(v) => updateValue("start", v)}
+          onError={(e) => updateError("start", e)}
+          slotProps={{
+            field: { clearable: true },
+            textField: {
+              helperText: error?.start || "",
+            },
+          }}
+          maxDate={(value?.end && new Date(value.end)) || ""}
+        />
+        <DatePicker
+          value={value?.end ? new Date(value.end) : null}
+          label={t("dateEndLabel")}
+          onChange={(v) => updateValue("end", v)}
+          onError={(e) => updateError("end", e)}
+          slotProps={{
+            field: { clearable: true },
+            textField: {
+              helperText: error?.end || "",
+            },
+          }}
+          minDate={(value?.start && new Date(value.start)) || ""}
+        />
+      </Box>
+    </FormControl>
+  );
+};
+
+const getStyles = (theme: Theme) => ({
+  dateRange: {
+    display: "flex",
+    width: "100%",
+    columnGap: theme.spacing(2),
+    marginTop: theme.spacing(1),
+    "& > *": { flex: "1" },
+  },
+});
+
+export default DateRangeFilterComponent;

package/src/components/list-filter/index.ts

@@ -0,0 +1,6 @@
+export { default as DateFilter } from "./date-filter";
+export { default as DateRangeFilter } from "./date-range-filter";
+export { default as ListFilter } from "./list-filter";
+export { default as MultiSelectFilterComponent } from "./multi-select-filter";
+export { default as SelectFilterComponent } from "./select-filter";
+export * from "./list-filter-types";

package/src/components/list-filter/list-filter-types.ts

@@ -0,0 +1,70 @@
+export interface FilterOption {
+  id: number | string;
+  value: string;
+}
+
+interface FilterBase {
+  label: string;
+  sort?: number;
+}
+
+export interface DateFilter extends FilterBase {
+  type: "date";
+  value: string | null;
+}
+
+export interface DateRangeFilter extends FilterBase {
+  type: "dateRange";
+  value: { start: string | null; end: string | null } | null;
+}
+
+export interface SelectFilter extends FilterBase {
+  type: "select";
+  value: [FilterOption] | null;
+  options: FilterOption[];
+}
+
+export interface MultiSelectFilter extends FilterBase {
+  type: "multiSelect";
+  value: FilterOption[] | null;
+  options: FilterOption[];
+}
+
+export interface Filters {
+  [filterName: string]:
+    | DateFilter
+    | DateRangeFilter
+    | SelectFilter
+    | MultiSelectFilter;
+}
+
+export type FilterResult<FilterShape extends Filters> = {
+  [Property in keyof FilterShape]: FilterShape[Property]["value"];
+};
+
+export interface ListFilterOutput<FilterShape extends Filters> {
+  filters: FilterResult<FilterShape>;
+  search: string | null;
+  itemsPerPage: number | null;
+}
+
+export interface FilterConfig {
+  pagination:
+    | {
+        pageOptions?: number[];
+        pageDefault?: number;
+      }
+    | false;
+  search?:
+    | {
+        label?: string;
+      }
+    | false;
+}
+
+export interface FilterProps<Filter extends { value: unknown }> {
+  filter: Filter;
+  onSet: (value: Filter["value"]) => void;
+  onError: (error: boolean) => void;
+  current: Filter["value"];
+}