@pfm-platform/accounts-ui-mui 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -7,6 +7,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var iconsMaterial = require('@mui/icons-material');
 var LineChart = require('@mui/x-charts/LineChart');
+var AccountBalanceWalletIcon = require('@mui/icons-material/AccountBalanceWallet');
+var AddIcon = require('@mui/icons-material/Add');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var AccountBalanceWalletIcon__default = /*#__PURE__*/_interopDefault(AccountBalanceWalletIcon);
+var AddIcon__default = /*#__PURE__*/_interopDefault(AddIcon);
 
 // src/components/AccountList.tsx
 function AccountList({
@@ -699,6 +706,114 @@ function AccountBalanceChart({
     }
   );
 }
+function AccountsEmptyState({
+  onAddAccount,
+  title = "No Accounts Yet",
+  message = "Get started by adding your first account to track your finances.",
+  minHeight = 400
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      "data-testid": "accounts-empty-state",
+      sx: {
+        minHeight,
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 3,
+        py: 6,
+        px: 2
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AccountBalanceWalletIcon__default.default,
+          {
+            sx: {
+              fontSize: 80,
+              color: "primary.main",
+              opacity: 0.6
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "h5",
+            component: "h2",
+            color: "text.primary",
+            sx: { fontWeight: "medium" },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "body1",
+            color: "text.secondary",
+            align: "center",
+            sx: { maxWidth: 480, px: 2 },
+            children: message
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 1,
+              mt: 1,
+              mb: 2
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { color: "success.main", fontWeight: "bold" }, children: "\u2713" }),
+                "Track checking, savings, and credit card accounts"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { color: "success.main", fontWeight: "bold" }, children: "\u2713" }),
+                "Monitor your net worth over time"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { color: "success.main", fontWeight: "bold" }, children: "\u2713" }),
+                "View account balances and transaction history"
+              ] })
+            ]
+          }
+        ),
+        onAddAccount && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
+          {
+            variant: "contained",
+            color: "primary",
+            size: "large",
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(AddIcon__default.default, {}),
+            onClick: onAddAccount,
+            "aria-label": "Add your first account",
+            sx: {
+              mt: 2,
+              px: 4,
+              py: 1.5,
+              fontSize: "1rem",
+              fontWeight: "medium",
+              textTransform: "none",
+              boxShadow: 2,
+              "&:hover": {
+                boxShadow: 4
+              }
+            },
+            children: "Add Your First Account"
+          }
+        )
+      ]
+    }
+  );
+}
 function NetWorthSummary({
   userId,
   title = "Net Worth Summary",
@@ -2077,6 +2192,7 @@ exports.AccountDeleteButton = AccountDeleteButton;
 exports.AccountEditForm = AccountEditForm;
 exports.AccountList = AccountList;
 exports.AccountSummary = AccountSummary;
+exports.AccountsEmptyState = AccountsEmptyState;
 exports.NetWorthAccountDeleteButton = NetWorthAccountDeleteButton;
 exports.NetWorthAccountEnhancedForm = NetWorthAccountEnhancedForm;
 exports.NetWorthAccountForm = NetWorthAccountForm;