@medusajs/dashboard 0.0.1

package/src/v2-routes/taxes/tax-region-detail/components/tax-rate-list/tax-rate-list.tsx

@@ -0,0 +1,214 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { TaxRateResponse, TaxRegionResponse } from "@medusajs/types"
+import { Button, Container, Heading, usePrompt } from "@medusajs/ui"
+import { keepPreviousData } from "@tanstack/react-query"
+import { RowSelectionState, createColumnHelper } from "@tanstack/react-table"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { DataTable } from "../../../../../components/table/data-table"
+import {
+  useDeleteTaxRate,
+  useTaxRates,
+} from "../../../../../hooks/api/tax-rates"
+import { useDeleteTaxRegion } from "../../../../../hooks/api/tax-regions"
+import { useTaxRateTableColumns } from "../../../../../hooks/table/columns/use-tax-rates-table-columns"
+import { useTaxRateTableFilters } from "../../../../../hooks/table/filters/use-tax-rate-table-filters"
+import { useTaxRateTableQuery } from "../../../../../hooks/table/query/use-tax-rate-table-query"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+
+const PAGE_SIZE = 10
+
+type TaxRateListProps = {
+  taxRegion: TaxRegionResponse
+  isDefault: boolean
+}
+
+export const TaxRateList = ({
+  taxRegion,
+  isDefault = false,
+}: TaxRateListProps) => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const { searchParams, raw } = useTaxRateTableQuery({ pageSize: PAGE_SIZE })
+  const childrenIds = taxRegion.children?.map((c) => c.id) || []
+  const {
+    tax_rates: taxRates,
+    count,
+    isLoading,
+    isError,
+    error,
+  } = useTaxRates(
+    {
+      ...searchParams,
+      tax_region_id: [taxRegion.id, ...childrenIds],
+      is_default: isDefault,
+    },
+    {
+      placeholderData: keepPreviousData,
+    }
+  )
+
+  const columns = useColumns()
+  const filters = useTaxRateTableFilters()
+
+  const { table } = useDataTable({
+    data: taxRates ?? [],
+    columns,
+    count,
+    enablePagination: true,
+    enableRowSelection: true,
+    pageSize: PAGE_SIZE,
+    getRowId: (row) => row.id,
+    rowSelection: {
+      state: rowSelection,
+      updater: setRowSelection,
+    },
+    meta: {
+      taxRegionId: taxRegion.id,
+    },
+  })
+
+  const { mutateAsync } = useDeleteTaxRegion(taxRegion.id)
+
+  const prompt = usePrompt()
+  const { t } = useTranslation()
+
+  const handleRemove = async () => {
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("taxRegions.removeWarning", {
+        tax_region_name: taxRegion.name,
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        setRowSelection({})
+      },
+    })
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">
+          {isDefault ? `Default ${t("taxRates.domain")}` : `Tax Rate Overrides`}
+        </Heading>
+
+        <Link
+          to={
+            isDefault
+              ? `/settings/taxes/${taxRegion.id}/create-default`
+              : `/settings/taxes/${taxRegion.id}/create-override`
+          }
+        >
+          <Button size="small" variant="secondary">
+            Create
+          </Button>
+        </Link>
+      </div>
+
+      <DataTable
+        table={table}
+        columns={columns}
+        pageSize={PAGE_SIZE}
+        commands={[
+          {
+            action: handleRemove,
+            label: t("actions.remove"),
+            shortcut: "r",
+          },
+        ]}
+        count={count}
+        pagination
+        search
+        filters={filters}
+        navigateTo={(row) =>
+          `/settings/taxes/${taxRegion.id}/tax-rates/${row.id}/edit`
+        }
+        isLoading={isLoading}
+        orderBy={["is_default", "rate", "created_at", "updated_at"]}
+        queryObject={raw}
+      />
+    </Container>
+  )
+}
+
+const columnHelper = createColumnHelper<TaxRateResponse>()
+
+const useColumns = () => {
+  const base = useTaxRateTableColumns()
+
+  return useMemo(
+    () => [
+      ...base,
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row, table }) => {
+          const { taxRegionId } = table.options.meta as {
+            taxRegionId: string
+          }
+
+          return (
+            <TaxRateListActions
+              taxRateId={row.original.id}
+              taxRegionId={taxRegionId}
+            />
+          )
+        },
+      }),
+    ],
+    [base]
+  )
+}
+
+const TaxRateListActions = ({
+  taxRateId,
+  taxRegionId,
+}: {
+  taxRateId: string
+  taxRegionId: string
+}) => {
+  const { t } = useTranslation()
+
+  const { mutateAsync } = useDeleteTaxRate(taxRateId)
+
+  const onRemove = async () => await mutateAsync()
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              icon: <PencilSquare />,
+              label: t("actions.edit"),
+              to: `/settings/taxes/${taxRegionId}/tax-rates/${taxRateId}/edit`,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              icon: <Trash />,
+              label: t("actions.remove"),
+              onClick: onRemove,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}

package/src/v2-routes/taxes/tax-region-detail/components/tax-region-general-detail/index.ts

@@ -0,0 +1 @@
+export * from "./tax-region-general-detail"

package/src/v2-routes/taxes/tax-region-detail/components/tax-region-general-detail/tax-region-general-detail.tsx

@@ -0,0 +1,41 @@
+import { TaxRegionResponse } from "@medusajs/types"
+import { Container, Heading, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { formatDate } from "../../../../../components/common/date"
+import { getCountryByIso2 } from "../../../../../lib/countries"
+
+type TaxRegionGeneralDetailProps = {
+  taxRegion: TaxRegionResponse
+}
+
+export const TaxRegionGeneralDetail = ({
+  taxRegion,
+}: TaxRegionGeneralDetailProps) => {
+  const { t } = useTranslation()
+  const countryCode = taxRegion.parent?.country_code || taxRegion.country_code
+  const displayName = getCountryByIso2(countryCode)?.display_name || countryCode
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div>
+          <Heading>{displayName}</Heading>
+
+          <Text className="text-ui-fg-subtle" size="small">
+            {t("taxRegions.description")}
+          </Text>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 items-center px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.created")}
+        </Text>
+
+        <Text size="small" leading="compact">
+          {formatDate(taxRegion.created_at)}
+        </Text>
+      </div>
+    </Container>
+  )
+}

package/src/v2-routes/taxes/tax-region-detail/index.ts

@@ -0,0 +1,4 @@
+export * from "./tax-region-detail"
+
+export { taxRegionLoader as loader } from "./loader"
+export { TaxRegionDetail as Component } from "./tax-region-detail"

package/src/v2-routes/taxes/tax-region-detail/loader.ts

@@ -0,0 +1,21 @@
+import { LoaderFunctionArgs } from "react-router-dom"
+
+import { AdminTaxRegionResponse } from "@medusajs/types"
+import { taxRegionsQueryKeys } from "../../../hooks/api/tax-regions"
+import { client } from "../../../lib/client"
+import { queryClient } from "../../../lib/medusa"
+
+const taxRegionDetailQuery = (id: string) => ({
+  queryKey: taxRegionsQueryKeys.detail(id),
+  queryFn: async () => client.taxes.retrieveTaxRegion(id),
+})
+
+export const taxRegionLoader = async ({ params }: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = taxRegionDetailQuery(id!)
+
+  return (
+    queryClient.getQueryData<AdminTaxRegionResponse>(query.queryKey) ??
+    (await queryClient.fetchQuery(query))
+  )
+}

package/src/v2-routes/taxes/tax-region-detail/tax-region-detail.tsx

@@ -0,0 +1,30 @@
+import { Outlet, useParams } from "react-router-dom"
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { useTaxRegion } from "../../../hooks/api/tax-regions"
+import { TaxRateList } from "./components/tax-rate-list"
+import { TaxRegionGeneralDetail } from "./components/tax-region-general-detail"
+
+export const TaxRegionDetail = () => {
+  const { id } = useParams()
+  const { tax_region: taxRegion, isLoading, isError, error } = useTaxRegion(id!)
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    taxRegion && (
+      <div className="flex flex-col gap-y-2">
+        <TaxRegionGeneralDetail taxRegion={taxRegion} />
+        <TaxRateList taxRegion={taxRegion} isDefault={true} />
+        <TaxRateList taxRegion={taxRegion} isDefault={false} />
+        <JsonViewSection data={taxRegion} root="tax_region" />
+        <Outlet />
+      </div>
+    )
+  )
+}

package/src/v2-routes/taxes/tax-region-list/components/region-list-table/index.ts

@@ -0,0 +1 @@
+export * from "./tax-region-list-table"

package/src/v2-routes/taxes/tax-region-list/components/region-list-table/tax-region-list-table.tsx

@@ -0,0 +1,131 @@
+import { Trash } from "@medusajs/icons"
+import { AdminTaxRegionResponse } from "@medusajs/types"
+import { Button, Container, Heading } from "@medusajs/ui"
+import { createColumnHelper } from "@tanstack/react-table"
+import { t } from "i18next"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router-dom"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { DataTable } from "../../../../../components/table/data-table"
+import {
+  useDeleteTaxRegion,
+  useTaxRegions,
+} from "../../../../../hooks/api/tax-regions"
+import { useTaxRegionTableQuery } from "../../../../../hooks/table/query/use-tax-region-table-query copy"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { getCountryByIso2 } from "../../../../../lib/countries"
+
+const PAGE_SIZE = 20
+
+export const TaxRegionListTable = () => {
+  const { t } = useTranslation()
+
+  const { searchParams, raw } = useTaxRegionTableQuery({
+    pageSize: PAGE_SIZE,
+  })
+  const { tax_regions, count, isLoading, isError, error } = useTaxRegions({
+    ...searchParams,
+    parent_id: "null",
+  })
+
+  const columns = useColumns()
+
+  const { table } = useDataTable({
+    data: tax_regions ?? [],
+    columns,
+    count,
+    enablePagination: true,
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("taxes.domain")}</Heading>
+        <Button size="small" variant="secondary" asChild>
+          <Link to="/settings/taxes/create">{t("actions.create")}</Link>
+        </Button>
+      </div>
+      <DataTable
+        table={table}
+        columns={columns}
+        count={count}
+        pageSize={PAGE_SIZE}
+        isLoading={isLoading}
+        navigateTo={(row) => `${row.original.id}`}
+        pagination
+        queryObject={raw}
+      />
+    </Container>
+  )
+}
+
+const TaxRegionActions = ({
+  taxRegion,
+}: {
+  taxRegion: AdminTaxRegionResponse["tax_region"]
+}) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { mutateAsync } = useDeleteTaxRegion(taxRegion.id)
+
+  const handleDelete = async () => {
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        navigate("/settings/taxes", { replace: true })
+      },
+    })
+  }
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              icon: <Trash />,
+              label: t("actions.delete"),
+              onClick: handleDelete,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}
+
+const columnHelper = createColumnHelper<AdminTaxRegionResponse["tax_region"]>()
+
+const useColumns = () => {
+  return useMemo(
+    () => [
+      columnHelper.accessor("country_code", {
+        header: t("fields.country"),
+        cell: ({ getValue }) => {
+          const countryCode = getValue()
+          const displayName =
+            getCountryByIso2(countryCode)?.display_name || countryCode
+
+          return (
+            <div className="flex size-full items-center">
+              <span className="truncate">{displayName}</span>
+            </div>
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          return <TaxRegionActions taxRegion={row.original as any} />
+        },
+      }),
+    ],
+    [t]
+  )
+}

package/src/v2-routes/taxes/tax-region-list/index.ts

@@ -0,0 +1 @@
+export { TaxRegionsList as Component } from "./tax-region-list"

package/src/v2-routes/taxes/tax-region-list/tax-region-list.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom"
+import { TaxRegionListTable } from "./components/region-list-table"
+
+export const TaxRegionsList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <TaxRegionListTable />
+      <Outlet />
+    </div>
+  )
+}

package/src/v2-routes/users/user-detail/components/user-general-section/index.ts

@@ -0,0 +1 @@
+export * from "./user-general-section"

package/src/v2-routes/users/user-detail/components/user-general-section/user-general-section.tsx

@@ -0,0 +1,88 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { UserDTO } from "@medusajs/types"
+import { Container, Heading, Text, clx, usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { useDeleteUser } from "../../../../../hooks/api/users"
+
+type UserGeneralSectionProps = {
+  user: UserDTO
+}
+
+export const UserGeneralSection = ({ user }: UserGeneralSectionProps) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const prompt = usePrompt()
+
+  const { mutateAsync } = useDeleteUser(user.id)
+
+  const name = [user.first_name, user.last_name].filter(Boolean).join(" ")
+
+  const handleDeleteUser = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("users.deleteUserWarning", {
+        name: name ?? user.email,
+      }),
+      verificationText: name ?? user.email,
+      verificationInstruction: t("general.typeToConfirm"),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        navigate("..")
+      },
+    })
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{user.email}</Heading>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "edit",
+                  icon: <PencilSquare />,
+                },
+              ],
+            },
+            {
+              actions: [
+                {
+                  label: t("actions.delete"),
+                  onClick: handleDeleteUser,
+                  icon: <Trash />,
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+      <div className="grid grid-cols-2 items-center px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.name")}
+        </Text>
+        <Text
+          size="small"
+          leading="compact"
+          className={clx({
+            "text-ui-fg-subtle": !name,
+          })}
+        >
+          {name ?? "-"}
+        </Text>
+      </div>
+    </Container>
+  )
+}

package/src/v2-routes/users/user-detail/index.ts

@@ -0,0 +1,2 @@
+export { userLoader as loader } from "./loader"
+export { UserDetail as Component } from "./user-detail"

package/src/v2-routes/users/user-detail/loader.ts

@@ -0,0 +1,21 @@
+import { adminProductKeys } from "medusa-react"
+import { LoaderFunctionArgs } from "react-router-dom"
+
+import { client } from "../../../lib/client"
+import { queryClient } from "../../../lib/medusa"
+import { UserRes } from "../../../types/api-responses"
+
+const userDetailQuery = (id: string) => ({
+  queryKey: adminProductKeys.detail(id),
+  queryFn: async () => client.users.retrieve(id),
+})
+
+export const userLoader = async ({ params }: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = userDetailQuery(id!)
+
+  return (
+    queryClient.getQueryData<UserRes>(query.queryKey) ??
+    (await queryClient.fetchQuery(query))
+  )
+}

package/src/v2-routes/users/user-detail/user-detail.tsx

@@ -0,0 +1,39 @@
+import { Outlet, json, useLoaderData, useParams } from "react-router-dom"
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { useUser } from "../../../hooks/api/users"
+import { UserGeneralSection } from "./components/user-general-section"
+import { userLoader } from "./loader"
+
+export const UserDetail = () => {
+  const initialData = useLoaderData() as Awaited<ReturnType<typeof userLoader>>
+
+  const { id } = useParams()
+  const {
+    user,
+    isPending: isLoading,
+    isError,
+    error,
+  } = useUser(id!, undefined, {
+    initialData,
+  })
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError || !user) {
+    if (error) {
+      throw error
+    }
+
+    throw json("An unknown error has occured", 500)
+  }
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <UserGeneralSection user={user} />
+      <JsonViewSection data={user} />
+      <Outlet />
+    </div>
+  )
+}