@ammarkhalidfarooq/dashboard-package 0.4.43 → 0.4.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs.js +114 -44
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +114 -44
  4. package/dist/index.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -5928,65 +5928,100 @@ var PaidSection = function PaidSection() {
5928
5928
  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
5929
5929
  var metricInfo = {
5930
5930
  "Total Spent": {
5931
- value: "$80,313",
5931
+ value: "$".concat(formatNumber(80313)),
5932
5932
  subValue: "12% vs last month",
5933
5933
  chartLabel: "Daily Spend",
5934
5934
  data: [800, 950, 700, 1100, 900, 1200, 1300],
5935
- icon: iconsMaterial.IndeterminateCheckBoxOutlined
5935
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.IndeterminateCheckBoxOutlined, {}),
5936
+ money: true,
5937
+ error: false,
5938
+ warning: false
5936
5939
  },
5937
5940
  "Revinue Raised": {
5938
- value: "$240,398",
5941
+ value: "$".concat(formatNumber(240398)),
5939
5942
  subValue: "12% vs last month",
5940
5943
  chartLabel: "Daily Revenue",
5941
5944
  data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
5942
- icon: iconsMaterial.PaidOutlined
5945
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
5946
+ money: true,
5947
+ error: false,
5948
+ warning: false
5943
5949
  },
5944
5950
  ROAS: {
5945
5951
  value: "3.0",
5946
5952
  subValue: "12% vs last month",
5947
5953
  chartLabel: "ROAS Trend",
5948
5954
  data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
5949
- icon: iconsMaterial.TrendingUp
5955
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.TrendingUp, {}),
5956
+ money: false,
5957
+ error: false,
5958
+ warning: false
5950
5959
  },
5951
5960
  "Cost per donor": {
5952
- value: "$373",
5961
+ value: "$".concat(formatNumber(373)),
5953
5962
  subValue: "12% vs last month",
5954
5963
  chartLabel: "CPA Trend",
5955
5964
  data: [350, 380, 360, 410, 390, 370, 373],
5956
- icon: iconsMaterial.PersonOutlined
5965
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PersonOutlined, {}),
5966
+ money: true,
5967
+ error: false,
5968
+ warning: false
5957
5969
  },
5958
5970
  "Conversion rate": {
5959
5971
  value: "3.1%",
5960
5972
  subValue: "12% vs last month",
5961
5973
  chartLabel: "Conversion Rate",
5962
5974
  data: [2.8, 3.0, 2.9, 3.4, 3.2, 3.1, 3.1],
5963
- icon: iconsMaterial.Adjust
5975
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
5976
+ money: false,
5977
+ error: false,
5978
+ warning: false
5964
5979
  },
5965
5980
  "Avg donation": {
5966
- value: "$130.58",
5981
+ value: "$".concat(formatNumber(130.58)),
5967
5982
  subValue: "12% vs last month",
5968
5983
  chartLabel: "Average Donation",
5969
5984
  data: [120, 135, 125, 140, 130, 128, 130.58],
5970
- icon: iconsMaterial.PaidOutlined
5985
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
5986
+ money: true,
5987
+ error: false,
5988
+ warning: false
5971
5989
  }
5972
5990
  };
5973
5991
  var renderCard = function renderCard(title) {
5974
- return /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
5992
+ return /*#__PURE__*/jsxRuntime.jsx(MetricCard
5993
+ // key={title}
5994
+ , {
5975
5995
  title: title,
5976
- value: metricInfo[title].value,
5977
- subValue: metricInfo[title].subValue,
5996
+ value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
5997
+ caption: metricInfo[title].subValue,
5978
5998
  icon: metricInfo[title].icon,
5999
+ error: metricInfo[title].error,
6000
+ active: activeMetric === title,
5979
6001
  onClick: function onClick() {
5980
6002
  return setActiveMetric(title);
5981
6003
  },
5982
- isActive: activeMetric === title,
5983
- sx: {
5984
- // border:
5985
- // activeMetric === title
5986
- // ? "2px solid rgb(99, 99, 230)"
5987
- // : "2px solid #f0f0f0",
5988
- }
5989
- }, title);
6004
+ sx: metricInfo[title].error ? {
6005
+ border: "2px solid #ef4444",
6006
+ bgcolor: "#fffafa"
6007
+ } : {}
6008
+ })
6009
+ // <DisplayCard
6010
+ // key={title}
6011
+ // title={title}
6012
+ // value={metricInfo[title].value}
6013
+ // subValue={metricInfo[title].subValue}
6014
+ // icon={metricInfo[title].icon}
6015
+ // onClick={() => setActiveMetric(title)}
6016
+ // isActive={activeMetric === title}
6017
+ // sx={{
6018
+ // // border:
6019
+ // // activeMetric === title
6020
+ // // ? "2px solid rgb(99, 99, 230)"
6021
+ // // : "2px solid #f0f0f0",
6022
+ // }}
6023
+ // />
6024
+ ;
5990
6025
  };
5991
6026
  var selectedInfo = metricInfo[activeMetric];
5992
6027
  var mainChart = {
@@ -6205,40 +6240,58 @@ var OrganicSection = function OrganicSection(_ref) {
6205
6240
  var categories = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
6206
6241
  var metricInfo = {
6207
6242
  "Organic Users": {
6208
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaised) || "$240.9K",
6243
+ value: "".concat(formatNumber(8420)),
6209
6244
  subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
6210
6245
  data: [3200, 4100, 2800, 5600, 4200, 6100, 7500],
6211
- icon: iconsMaterial.PeopleAltOutlined
6246
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PeopleAltOutlined, {}),
6247
+ money: false,
6248
+ warning: false,
6249
+ error: false
6212
6250
  },
6213
6251
  "Search Clicks": {
6214
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaised) || "$222.3K",
6252
+ value: "".concat(formatNumber(5842)),
6215
6253
  subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.netRaisedSub) || "92.3% pass-through",
6216
6254
  data: [1500, 1800, 1600, 2200, 2000, 2400, 2800],
6217
- icon: iconsMaterial.SearchOutlined
6255
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.SearchOutlined, {}),
6256
+ money: false,
6257
+ warning: false,
6258
+ error: false
6218
6259
  },
6219
6260
  Donations: {
6220
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.totalDonors) || "215",
6261
+ value: "".concat(formatNumber(420)),
6221
6262
  subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
6222
6263
  data: [15, 22, 18, 30, 25, 35, 42],
6223
- icon: iconsMaterial.FavoriteOutlined
6264
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.FavoriteOutlined, {}),
6265
+ money: false,
6266
+ warning: false,
6267
+ error: false
6224
6268
  },
6225
6269
  "Conversion Rate": {
6226
6270
  value: "3.1%",
6227
6271
  subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.avgDonationTrend) || "8.4% vs last month",
6228
6272
  data: [2.5, 2.7, 2.6, 3.1, 3.0, 2.9, 3.1],
6229
- icon: iconsMaterial.Adjust
6273
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
6274
+ money: false,
6275
+ warning: false,
6276
+ error: false
6230
6277
  },
6231
6278
  "Revenue raised": {
6232
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.roas) || "3.0x",
6279
+ value: "$".concat(formatNumber(240398)),
6233
6280
  subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.roasTrend) || "0.4x vs last month",
6234
6281
  data: [2.5, 3.1, 2.8, 4.2, 3.8, 4.5, 5.2],
6235
- icon: iconsMaterial.PaidOutlined
6282
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
6283
+ money: true,
6284
+ warning: false,
6285
+ error: false
6236
6286
  },
6237
6287
  "Avg donation": {
6238
- value: (apiData === null || apiData === void 0 ? void 0 : apiData.conversion) || "1.7%",
6288
+ value: "$".concat(formatNumber(130.58)),
6239
6289
  subValue: (apiData === null || apiData === void 0 ? void 0 : apiData.totalRaisedTrend) || "18% vs last month",
6240
6290
  data: [110, 125, 120, 135, 130, 128, 130.58],
6241
- icon: iconsMaterial.PaidOutlined
6291
+ icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
6292
+ money: true,
6293
+ warning: false,
6294
+ error: false
6242
6295
  }
6243
6296
  };
6244
6297
  var selectedInfo = metricInfo[activeMetric];
@@ -6258,23 +6311,40 @@ var OrganicSection = function OrganicSection(_ref) {
6258
6311
  flexWrap: "wrap"
6259
6312
  },
6260
6313
  children: Object.keys(metricInfo).map(function (title) {
6261
- return /*#__PURE__*/jsxRuntime.jsx(DisplayCard, {
6314
+ return /*#__PURE__*/jsxRuntime.jsx(MetricCard
6315
+ // key={title}
6316
+ , {
6262
6317
  title: title,
6263
- value: metricInfo[title].value,
6264
- subValue: metricInfo[title].subValue,
6318
+ value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
6319
+ caption: metricInfo[title].subValue,
6265
6320
  icon: metricInfo[title].icon,
6321
+ error: metricInfo[title].error,
6322
+ active: activeMetric === title,
6266
6323
  onClick: function onClick() {
6267
6324
  return setActiveMetric(title);
6268
6325
  },
6269
- isActive: activeMetric === title,
6270
- sx: {
6271
- flex: 1
6272
- // border:
6273
- // activeMetric === title
6274
- // ? "2px solid rgb(99, 99, 230)"
6275
- // : "2px solid #f0f0f0",
6276
- }
6277
- }, title);
6326
+ sx: metricInfo[title].error ? {
6327
+ border: "2px solid #ef4444",
6328
+ bgcolor: "#fffafa"
6329
+ } : {}
6330
+ })
6331
+ // <DisplayCard
6332
+ // key={title}
6333
+ // title={title}
6334
+ // value={metricInfo[title].value}
6335
+ // subValue={metricInfo[title].subValue}
6336
+ // icon={metricInfo[title].icon}
6337
+ // onClick={() => setActiveMetric(title)}
6338
+ // isActive={activeMetric === title}
6339
+ // sx={{
6340
+ // flex: 1,
6341
+ // // border:
6342
+ // // activeMetric === title
6343
+ // // ? "2px solid rgb(99, 99, 230)"
6344
+ // // : "2px solid #f0f0f0",
6345
+ // }}
6346
+ // />
6347
+ ;
6278
6348
  })
6279
6349
  }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
6280
6350
  container: true,