feat(dashboard,js-sdk,admin-shared): add customer addresses + layout change (#11871)

what:

- changes customer layout from 1 layout to 2
- adds ability to create and delete customer addresses
- adds 2 customer widget locations
- adds is_giftcard=false by default to products list

<img width="1663" alt="Screenshot 2025-03-08 at 21 34 02" src="https://github.com/user-attachments/assets/e66f05da-718c-4c25-81ce-67ba0a814ca3" />

packages/admin/dashboard/src/components/common/empty-table-content/empty-table-content.tsx

@@ -1,5 +1,6 @@
 import { ExclamationCircle, MagnifyingGlass, PlusMini } from "@medusajs/icons"
 import { Button, Text, clx } from "@medusajs/ui"
+import React from "react"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 
@@ -44,6 +45,7 @@ type NoRecordsProps = {
   message?: string
   className?: string
   buttonVariant?: string
+  icon?: React.ReactNode
 } & ActionProps
 
 const DefaultButton = ({ action }: ActionProps) =>
@@ -70,18 +72,19 @@ export const NoRecords = ({
   action,
   className,
   buttonVariant = "default",
+  icon = <ExclamationCircle className="text-ui-fg-subtle" />,
 }: NoRecordsProps) => {
   const { t } = useTranslation()
 
   return (
     <div
       className={clx(
-        "flex h-[400px] w-full flex-col items-center justify-center gap-y-4",
+        "flex h-[150px] w-full flex-col items-center justify-center gap-y-4",
         className
       )}
     >
       <div className="flex flex-col items-center gap-y-3">
-        <ExclamationCircle className="text-ui-fg-subtle" />
+        {icon}
 
         <div className="flex flex-col items-center gap-y-1">
           <Text size="small" leading="compact" weight="plus">

packages/admin/dashboard/src/components/common/listicle/index.ts

@@ -0,0 +1 @@
+export * from "./listicle"

packages/admin/dashboard/src/components/common/listicle/listicle.tsx

@@ -0,0 +1,34 @@
+import { Text } from "@medusajs/ui"
+import { ReactNode } from "react"
+
+export interface ListicleProps {
+  labelKey: string
+  descriptionKey: string
+  children?: ReactNode
+}
+
+export const Listicle = ({
+  labelKey,
+  descriptionKey,
+  children,
+}: ListicleProps) => {
+  return (
+    <div className="flex flex-col gap-2 px-2 pb-2">
+      <div className="shadow-elevation-card-rest bg-ui-bg-component transition-fg hover:bg-ui-bg-component-hover active:bg-ui-bg-component-pressed group-focus-visible:shadow-borders-interactive-with-active rounded-md px-4 py-2">
+        <div className="flex items-center gap-4">
+          <div className="flex flex-1 flex-col">
+            <Text size="small" leading="compact" weight="plus">
+              {labelKey}
+            </Text>
+            <Text size="small" leading="compact" className="text-ui-fg-subtle">
+              {descriptionKey}
+            </Text>
+          </div>
+          <div className="flex size-7 items-center justify-center">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/admin/dashboard/src/components/common/sidebar-link/sidebar-link.tsx

@@ -1,9 +1,9 @@
 import { ReactNode } from "react"
 import { Link } from "react-router-dom"
 
-import { IconAvatar } from "../icon-avatar"
-import { Text } from "@medusajs/ui"
 import { TriangleRightMini } from "@medusajs/icons"
+import { Text } from "@medusajs/ui"
+import { IconAvatar } from "../icon-avatar"
 
 export interface SidebarLinkProps {
   to: string