component-shared 1.0.0

package/Components/Views/DashBoard/Common/index.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Typography } from '@mui/material';
+
+var ChannelImage = function ChannelImage(props) {
+  return jsx("img", {
+    src: props.Thumb ? props.Thumb : "/api/user/v2/YoutubeReport/ChannelAvatar?Id=".concat(props.Id),
+    style: {
+      width: "30px",
+      marginRight: "10px",
+      borderRadius: '50%'
+    }
+  });
+};
+var VideoImage = function VideoImage(props) {
+  return jsx("img", {
+    src: props.Thumb ? props.Thumb : "/api/user/v2/YoutubeReport/VideoThumb?Id=".concat(props.Id),
+    style: {
+      width: "50px",
+      marginRight: "10px",
+      borderRadius: "5px"
+    }
+  });
+};
+var RowTitle = function RowTitle(props) {
+  var getUrl = function getUrl() {
+    return props.type === "Channel" ? "https://youtube.com/channel/".concat(props.Id) : "https://youtu.be/".concat(props.Id);
+  };
+  return jsxs(Box, {
+    component: 'a',
+    target: '_blank',
+    href: getUrl(),
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      textDecoration: 'none'
+    },
+    children: [props.type === "Channel" ? jsx(ChannelImage, {
+      Thumb: props.Thumb,
+      Id: props.Id
+    }) : jsx(VideoImage, {
+      Thumb: props.Thumb,
+      Id: props.Id
+    }), jsx(Typography, {
+      variant: 'subtitle2',
+      noWrap: true,
+      sx: {
+        maxWidth: '250px'
+      },
+      children: props.children
+    })]
+  });
+};
+
+export { ChannelImage, RowTitle, VideoImage };
+//# sourceMappingURL=index.js.map

package/Components/Views/DashBoard/Common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/Components/Views/DashBoard/Common/index.tsx"],"sourcesContent":["import React, { Component, FC } from 'react'\r\nimport { Box, Button, Typography } from '@mui/material';\r\ninterface IChannelImageProps {\r\n    Id: string\r\n    Thumb?: string\r\n}\r\nexport const ChannelImage: FC<IChannelImageProps> = (props) => {\r\n    return <img src={props.Thumb ? props.Thumb : `/api/user/v2/YoutubeReport/ChannelAvatar?Id=${props.Id}`}\r\n        style={{ width: \"30px\", marginRight: \"10px\", borderRadius: '50%' }} />\r\n}\r\ninterface IVideoImageProps {\r\n    Id: string\r\n    Thumb?: string\r\n}\r\nexport const VideoImage: FC<IVideoImageProps> = (props) => {\r\n    return <img src={props.Thumb ? props.Thumb : `/api/user/v2/YoutubeReport/VideoThumb?Id=${props.Id}`}\r\n        style={{ width: \"50px\", marginRight: \"10px\", borderRadius: \"5px\" }} />\r\n}\r\n\r\ninterface TitleProps {\r\n    Id: string,\r\n    type: \"Channel\" | \"Video\"\r\n    Thumb?: string\r\n}\r\n\r\nexport const RowTitle: FC<TitleProps> = (props) => {\r\n    const getUrl = () => {\r\n        return props.type === \"Channel\" ? `https://youtube.com/channel/${props.Id}` : `https://youtu.be/${props.Id}`\r\n    }\r\n    return <Box component={'a'} target={'_blank'} href={getUrl()} sx={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>\r\n        {props.type === \"Channel\" ? <ChannelImage Thumb={props.Thumb} Id={props.Id} /> : <VideoImage Thumb={props.Thumb} Id={props.Id} />}\r\n        <Typography variant='subtitle2' noWrap sx={{ maxWidth: '250px' }}>{props.children}</Typography>\r\n    </Box>\r\n}"],"names":["ChannelImage","props","_jsx","src","Thumb","concat","Id","style","width","marginRight","borderRadius","VideoImage","RowTitle","getUrl","type","_jsxs","Box","component","target","href","sx","display","alignItems","textDecoration","children","Typography","variant","noWrap","maxWidth"],"mappings":";;;IAMaA,YAAY,GAA2B,SAAvCA,YAAYA,CAA4BC,KAAK,EAAI;EAC1D,OAAOC;AAAKC,IAAAA,GAAG,EAAEF,KAAK,CAACG,KAAK,GAAGH,KAAK,CAACG,KAAK,GAAA,8CAAA,CAAAC,MAAA,CAAkDJ,KAAK,CAACK,EAAE,CAAE;AAClGC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,KAAK,EAAE,MAAM;AAAEC,MAAAA,WAAW,EAAE,MAAM;AAAEC,MAAAA,YAAY,EAAE;AAAK;IAAM;AAC9E;IAKaC,UAAU,GAAyB,SAAnCA,UAAUA,CAA0BV,KAAK,EAAI;EACtD,OAAOC;AAAKC,IAAAA,GAAG,EAAEF,KAAK,CAACG,KAAK,GAAGH,KAAK,CAACG,KAAK,GAAA,2CAAA,CAAAC,MAAA,CAA+CJ,KAAK,CAACK,EAAE,CAAE;AAC/FC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,KAAK,EAAE,MAAM;AAAEC,MAAAA,WAAW,EAAE,MAAM;AAAEC,MAAAA,YAAY,EAAE;AAAK;IAAM;AAC9E;IAQaE,QAAQ,GAAmB,SAA3BA,QAAQA,CAAoBX,KAAK,EAAI;AAC9C,EAAA,IAAMY,MAAM,GAAG,SAATA,MAAMA,GAAQ;AAChB,IAAA,OAAOZ,KAAK,CAACa,IAAI,KAAK,SAAS,kCAAAT,MAAA,CAAkCJ,KAAK,CAACK,EAAE,CAAAD,GAAAA,mBAAAA,CAAAA,MAAA,CAAyBJ,KAAK,CAACK,EAAE,CAAE;GAC/G;EACD,OAAOS,IAAA,CAACC,GAAG,EAAC;AAAAC,IAAAA,SAAS,EAAE,GAAG;AAAEC,IAAAA,MAAM,EAAE,QAAQ;IAAEC,IAAI,EAAEN,MAAM,EAAE;AAAEO,IAAAA,EAAE,EAAE;AAAEC,MAAAA,OAAO,EAAE,MAAM;AAAEC,MAAAA,UAAU,EAAE,QAAQ;AAAEC,MAAAA,cAAc,EAAE;KAAQ;IAAAC,QAAA,EAAA,CAC9HvB,KAAK,CAACa,IAAI,KAAK,SAAS,GAAGZ,GAAA,CAACF,YAAY,EAAC;MAAAI,KAAK,EAAEH,KAAK,CAACG,KAAK;MAAEE,EAAE,EAAEL,KAAK,CAACK;MAAM,GAAGJ,GAAC,CAAAS,UAAU;MAACP,KAAK,EAAEH,KAAK,CAACG,KAAK;MAAEE,EAAE,EAAEL,KAAK,CAACK;AAAE,KAAA,CAAI,EACjIJ,GAAC,CAAAuB,UAAU;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,MAAM;AAACP,MAAAA,EAAE,EAAE;AAAEQ,QAAAA,QAAQ,EAAE;OAAS;MAAAJ,QAAA,EAAGvB,KAAK,CAACuB;AAAsB,KAAA,CAAA;AAAA,GAAA,CAC7F;AACV;;;;"}

package/Components/Views/DashBoard/DeliveryInfo/index.d.ts

@@ -0,0 +1,17 @@
+import { Component } from 'react';
+import { ChartDataset, ScatterDataPoint } from 'chart.js';
+export interface IDeliveryInfoProps {
+    data?: ChartDataset<'line', (number | ScatterDataPoint | null)[]>[];
+    IsLoading?: boolean;
+}
+export default class DeliveryInfo extends Component<IDeliveryInfoProps> {
+    static defaultProps: {
+        data: {
+            label: string;
+            data: number[];
+            borderColor: string;
+            backgroundColor: string;
+        }[];
+    };
+    render(): JSX.Element;
+}

package/Components/Views/DashBoard/DeliveryInfo/index.js

@@ -0,0 +1,92 @@
+import { defineProperty as _defineProperty, inherits as _inherits, createClass as _createClass, classCallCheck as _classCallCheck, callSuper as _callSuper } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Stack, Box, Typography } from '@mui/material';
+import { Component } from 'react';
+import AnalyticsOutlinedIcon from '@mui/icons-material/AnalyticsOutlined';
+import { SkeletonLazyWrap } from '../../../SkeletonLazyView/index.js';
+import { Line } from 'react-chartjs-2';
+import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
+
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+var defaultData = [{
+  label: 'Audios',
+  data: [0, 200, 300, 500, 250, 300, 400, 600, 550],
+  borderColor: 'rgb(255, 99, 132)',
+  backgroundColor: 'rgba(255, 99, 132, 0.5)'
+}, {
+  label: 'Albums',
+  data: [0, 100, 150, 400, 480, 400, 420, 500, 400],
+  borderColor: 'rgb(53, 162, 235)',
+  backgroundColor: 'rgba(53, 162, 235, 0.5)'
+}];
+var labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+var options = {
+  responsive: true,
+  plugins: {
+    legend: {
+      position: 'top'
+    },
+    title: {
+      display: true,
+      text: 'Chart.js Line Chart'
+    }
+  }
+};
+var DeliveryInfo = /*#__PURE__*/function (_Component) {
+  function DeliveryInfo() {
+    _classCallCheck(this, DeliveryInfo);
+    return _callSuper(this, DeliveryInfo, arguments);
+  }
+  _inherits(DeliveryInfo, _Component);
+  return _createClass(DeliveryInfo, [{
+    key: "render",
+    value: function render() {
+      return jsxs(Stack, {
+        sx: {
+          flex: 1,
+          padding: '12px',
+          gap: '6px',
+          border: '1px solid rgba(0,0,0,0.12)',
+          borderRadius: '4px'
+        },
+        children: [jsxs(Box, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px'
+          },
+          children: [jsx(AnalyticsOutlinedIcon, {
+            color: "primary"
+          }), jsx(Typography, {
+            variant: "subtitle1",
+            color: "primary",
+            sx: {
+              fontWeight: 700
+            },
+            children: "Audios"
+          })]
+        }), jsx(SkeletonLazyWrap, {
+          IsLoading: this.props.IsLoading !== false,
+          component: Box,
+          sx: {
+            flex: 1,
+            minHeight: '400px'
+          },
+          children: this.props.data && jsx(Line, {
+            options: options,
+            data: {
+              labels: labels,
+              datasets: this.props.data
+            }
+          })
+        })]
+      });
+    }
+  }]);
+}(Component);
+_defineProperty(DeliveryInfo, "defaultProps", {
+  data: defaultData
+});
+
+export { DeliveryInfo as default };
+//# sourceMappingURL=index.js.map

package/Components/Views/DashBoard/DeliveryInfo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/Components/Views/DashBoard/DeliveryInfo/index.tsx"],"sourcesContent":["import { Box, Stack, Typography } from '@mui/material'\r\nimport React, { Component } from 'react'\r\nimport AnalyticsOutlinedIcon from '@mui/icons-material/AnalyticsOutlined'\r\nimport { SkeletonLazyWrap } from '../../../SkeletonLazyView'\r\nimport { LineChart } from '../../../Charts/LineChart'\r\nimport { Line } from 'react-chartjs-2'\r\nimport {\r\n  Chart as ChartJS,\r\n  CategoryScale,\r\n  LinearScale,\r\n  PointElement,\r\n  LineElement,\r\n  Title,\r\n  Tooltip,\r\n  Legend,\r\n  ChartDataset,\r\n  ScatterDataPoint,\r\n} from 'chart.js'\r\n\r\nChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)\r\n\r\nconst defaultData = [\r\n  {\r\n    label: 'Audios',\r\n    data: [0, 200, 300, 500, 250, 300, 400, 600, 550],\r\n    borderColor: 'rgb(255, 99, 132)',\r\n    backgroundColor: 'rgba(255, 99, 132, 0.5)',\r\n  },\r\n  {\r\n    label: 'Albums',\r\n    data: [0, 100, 150, 400, 480, 400, 420, 500, 400],\r\n    borderColor: 'rgb(53, 162, 235)',\r\n    backgroundColor: 'rgba(53, 162, 235, 0.5)',\r\n  },\r\n]\r\nconst labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\r\nconst options = {\r\n  responsive: true,\r\n  plugins: {\r\n    legend: { position: 'top' as const },\r\n    title: { display: true, text: 'Chart.js Line Chart' },\r\n  },\r\n}\r\n\r\nexport interface IDeliveryInfoProps {\r\n  data?: ChartDataset<'line', (number | ScatterDataPoint | null)[]>[]\r\n  IsLoading?: boolean\r\n}\r\nexport default class DeliveryInfo extends Component<IDeliveryInfoProps> {\r\n  static defaultProps = { data: defaultData }\r\n\r\n  render() {\r\n    return (\r\n      <Stack sx={{ flex: 1, padding: '12px', gap: '6px', border: '1px solid rgba(0,0,0,0.12)', borderRadius: '4px' }}>\r\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: '6px' }}>\r\n          <AnalyticsOutlinedIcon color=\"primary\" />\r\n          <Typography variant=\"subtitle1\" color=\"primary\" sx={{ fontWeight: 700 }}>\r\n            Audios\r\n          </Typography>\r\n        </Box>\r\n        <SkeletonLazyWrap IsLoading={this.props.IsLoading !== false} component={Box} sx={{ flex: 1, minHeight: '400px' }}>\r\n          {this.props.data && <Line options={options} data={{ labels, datasets: this.props.data }} />}\r\n        </SkeletonLazyWrap>\r\n      </Stack>\r\n    )\r\n  }\r\n}\r\n"],"names":["ChartJS","register","CategoryScale","LinearScale","PointElement","LineElement","Title","Tooltip","Legend","defaultData","label","data","borderColor","backgroundColor","labels","options","responsive","plugins","legend","position","title","display","text","DeliveryInfo","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_jsxs","Stack","sx","flex","padding","gap","border","borderRadius","children","Box","alignItems","_jsx","AnalyticsOutlinedIcon","color","Typography","variant","fontWeight","SkeletonLazyWrap","IsLoading","props","component","minHeight","Line","datasets","Component","_defineProperty"],"mappings":"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"}

package/Components/Views/DashBoard/OverViewInfo/index.d.ts

@@ -0,0 +1,29 @@
+import { Component } from 'react';
+import { ChartData } from 'chart.js';
+export type CardKey = string | 'Revenue' | 'LastMonth' | 'Balance';
+export type ItemKey = string | 'Asset' | 'Claimed' | 'Content';
+export interface IChartData {
+    Year: number;
+    Datasets: {
+        [key: ItemKey]: number[];
+    };
+    Labels: string[];
+    CardData: ICardData;
+}
+export interface ICardData {
+    [key: CardKey]: {
+        Value: number;
+        Data: {
+            [key: ItemKey]: number;
+        };
+    };
+}
+export interface IOverViewInfoProps {
+    Year: number;
+    data?: IChartData;
+    IsLoading?: boolean;
+}
+export declare class OverViewInfo extends Component<IOverViewInfoProps> {
+    generateBarChart: () => ChartData<'bar', number[], string>;
+    render(): JSX.Element;
+}

package/Components/Views/DashBoard/OverViewInfo/index.js

@@ -0,0 +1,237 @@
+import { inherits as _inherits, createClass as _createClass, classCallCheck as _classCallCheck, callSuper as _callSuper, defineProperty as _defineProperty } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { Component } from 'react';
+import { Stack, Box, Typography, Divider } from '@mui/material';
+import { FormatterUSD, CreateUseMediaQuery } from 'partner-local-lib/helper';
+import DataUsageOutlinedIcon from '@mui/icons-material/DataUsageOutlined';
+import { BarChart } from '../../../Charts/BarChart.js';
+import AnalyticsOutlinedIcon from '@mui/icons-material/AnalyticsOutlined';
+import PaidOutlinedIcon from '@mui/icons-material/PaidOutlined';
+import DonutSmallOutlinedIcon from '@mui/icons-material/DonutSmallOutlined';
+import { SkeletonLazyWrap } from '../../../SkeletonLazyView/index.js';
+import { HtmlTooltip } from '../../../HtmlTooltip/index.js';
+
+var formatUSD = FormatterUSD().format;
+// const colors = ["#95d469", "#5db4f9", "#ee955b"]
+var colors = ['#92e2e3', '#5db4f9', '#5774f4'];
+var OverViewInfo = /*#__PURE__*/function (_Component) {
+  function OverViewInfo() {
+    var _this;
+    _classCallCheck(this, OverViewInfo);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, OverViewInfo, [].concat(args));
+    _defineProperty(_this, "generateBarChart", function () {
+      var _this$props$data, _this$props$data$Data, _this$props$data2;
+      return {
+        labels: (_this$props$data = _this.props.data) === null || _this$props$data === void 0 ? void 0 : _this$props$data.Labels,
+        datasets: Object.keys((_this$props$data$Data = (_this$props$data2 = _this.props.data) === null || _this$props$data2 === void 0 ? void 0 : _this$props$data2.Datasets) !== null && _this$props$data$Data !== void 0 ? _this$props$data$Data : {}).reduce(function (result, key, index) {
+          var _this$props$data$Data2, _this$props$data3;
+          var data = (_this$props$data$Data2 = (_this$props$data3 = _this.props.data) === null || _this$props$data3 === void 0 ? void 0 : _this$props$data3.Datasets[key]) !== null && _this$props$data$Data2 !== void 0 ? _this$props$data$Data2 : [];
+          result.push({
+            label: key,
+            data: data,
+            backgroundColor: colors[index % colors.length]
+          });
+          return result;
+        }, [])
+      };
+    });
+    return _this;
+  }
+  _inherits(OverViewInfo, _Component);
+  return _createClass(OverViewInfo, [{
+    key: "render",
+    value: function render() {
+      var _this$props$data4, _CardData, _CardData2, _CardData3, _CardData4, _CardData5, _CardData6;
+      var _ref = (_this$props$data4 = this.props.data) !== null && _this$props$data4 !== void 0 ? _this$props$data4 : {},
+        CardData = _ref.CardData;
+      CardData = CardData !== null && CardData !== void 0 ? CardData : {};
+      return jsxs(Stack, {
+        sx: {
+          flex: 1,
+          padding: '12px',
+          gap: '6px',
+          border: '1px solid rgba(0,0,0,0.12)',
+          borderRadius: '4px'
+        },
+        children: [jsxs(Box, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px'
+          },
+          children: [jsx(AnalyticsOutlinedIcon, {
+            color: 'primary'
+          }), jsx(Typography, {
+            variant: 'subtitle1',
+            color: 'primary',
+            sx: {
+              fontWeight: 700
+            },
+            children: "Earnings"
+          })]
+        }), jsxs(Typography, {
+          variant: 'body2',
+          sx: {
+            color: '#979797'
+          },
+          children: ["Year ", this.props.Year]
+        }), jsx(Box, {}), jsxs(Box, {
+          sx: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'wrap'
+          },
+          children: [jsx(InfoItem, {
+            Title: 'All revenue',
+            Value: formatUSD((_CardData = CardData) === null || _CardData === void 0 || (_CardData = _CardData.Revenue) === null || _CardData === void 0 ? void 0 : _CardData.Value),
+            Description: "All revenue in the year ".concat(this.props.Year, "."),
+            TitleColor: '#1976d2',
+            data: (_CardData2 = CardData) === null || _CardData2 === void 0 || (_CardData2 = _CardData2.Revenue) === null || _CardData2 === void 0 ? void 0 : _CardData2.Data,
+            IsLoading: this.props.IsLoading !== false,
+            Icon: function Icon(isMobile) {
+              return jsx(DonutSmallOutlinedIcon, {
+                sx: {
+                  fontSize: isMobile ? '3rem' : '6rem',
+                  color: '#1976d2'
+                }
+              });
+            }
+          }), jsx(InfoItem, {
+            Title: 'Last month',
+            Value: formatUSD((_CardData3 = CardData) === null || _CardData3 === void 0 || (_CardData3 = _CardData3.LastMonth) === null || _CardData3 === void 0 ? void 0 : _CardData3.Value),
+            Description: "The most recent month has been paid in the year ".concat(this.props.Year, "."),
+            data: (_CardData4 = CardData) === null || _CardData4 === void 0 || (_CardData4 = _CardData4.LastMonth) === null || _CardData4 === void 0 ? void 0 : _CardData4.Data,
+            IsLoading: this.props.IsLoading !== false,
+            Icon: function Icon(isMobile) {
+              return jsx(DataUsageOutlinedIcon, {
+                sx: {
+                  fontSize: isMobile ? '3rem' : '6rem',
+                  color: '#1976d2'
+                }
+              });
+            },
+            TitleColor: '#1976d2'
+          }), jsx(InfoItem, {
+            Title: 'Balances',
+            Value: formatUSD((_CardData5 = CardData) === null || _CardData5 === void 0 || (_CardData5 = _CardData5.Balance) === null || _CardData5 === void 0 ? void 0 : _CardData5.Value),
+            Description: 'All revenue has not been paid.',
+            data: (_CardData6 = CardData) === null || _CardData6 === void 0 || (_CardData6 = _CardData6.Balance) === null || _CardData6 === void 0 ? void 0 : _CardData6.Data,
+            IsLoading: this.props.IsLoading !== false,
+            Icon: function Icon(isMobile) {
+              return jsx(PaidOutlinedIcon, {
+                sx: {
+                  fontSize: isMobile ? '3rem' : '6rem',
+                  color: '#ffc107'
+                }
+              });
+            },
+            TitleColor: '#ffc107'
+          })]
+        }), jsx(Box, {
+          height: '12px'
+        }), jsx(SkeletonLazyWrap, {
+          IsLoading: this.props.IsLoading !== false,
+          component: Box,
+          sx: {
+            flex: 1,
+            minHeight: '400px'
+          },
+          children: jsx(BarChart, {
+            data: this.generateBarChart()
+          })
+        })]
+      });
+    }
+  }]);
+}(Component);
+var InfoItem = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var _props$data;
+  var isMobile = CreateUseMediaQuery();
+  return jsx(HtmlTooltip, {
+    placement: 'top',
+    title: jsx(TooltipItem, {
+      data: (_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : {},
+      Description: props.Description
+    }),
+    arrow: true,
+    children: jsxs(SkeletonLazyWrap, {
+      IsLoading: props.IsLoading,
+      component: Box,
+      ref: ref,
+      sx: {
+        flex: 1,
+        minWidth: '250px',
+        minHeight: '100px',
+        display: 'flex',
+        border: '1px solid white',
+        background: '#e0e0e0'
+      },
+      children: [jsx(Box, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          margin: '12px 8px'
+        },
+        children: props.Icon(isMobile)
+      }), jsxs(Box, {
+        sx: {
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'center',
+          flexDirection: 'column'
+        },
+        children: [jsx(Typography, {
+          sx: {
+            fontWeight: 'bold',
+            color: props.TitleColor
+          },
+          children: props.Title
+        }), jsx(Typography, {
+          variant: 'h6',
+          children: props.Value
+        })]
+      })]
+    })
+  });
+});
+var GenerateItem = function GenerateItem(data) {
+  return Object.keys(data).map(function (key) {
+    var _data$key;
+    return jsxs(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'space-between'
+      },
+      children: [jsx(Typography, {
+        sx: {
+          fontWeight: '600',
+          minWidth: '100px'
+        },
+        children: key
+      }), jsx(Typography, {
+        fontWeight: '500',
+        children: formatUSD((_data$key = data[key]) !== null && _data$key !== void 0 ? _data$key : 0)
+      })]
+    }, key);
+  });
+};
+var TooltipItem = function TooltipItem(props) {
+  return jsxs(Box, {
+    sx: {
+      maxWidth: '300px',
+      minWidth: '200px'
+    },
+    children: [GenerateItem(props.data), jsx(Divider, {}), jsx(Typography, {
+      variant: 'caption',
+      children: props.Description
+    })]
+  });
+};
+
+export { OverViewInfo };
+//# sourceMappingURL=index.js.map

package/Components/Views/DashBoard/OverViewInfo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/Components/Views/DashBoard/OverViewInfo/index.tsx"],"sourcesContent":["import React, { Component, FC } from 'react'\r\nimport { Box, Divider, Stack, Typography } from '@mui/material'\r\nimport { CreateUseMediaQuery, FormatterUSD } from 'partner-local-lib/helper'\r\nimport DataUsageOutlinedIcon from '@mui/icons-material/DataUsageOutlined'\r\nimport { BarChart } from '../../../Charts/BarChart'\r\nimport { ChartData, ChartDataset } from 'chart.js'\r\nimport AnalyticsOutlinedIcon from '@mui/icons-material/AnalyticsOutlined'\r\nimport PaidOutlinedIcon from '@mui/icons-material/PaidOutlined'\r\nimport DonutSmallOutlinedIcon from '@mui/icons-material/DonutSmallOutlined'\r\nimport { SkeletonLazyWrap } from '../../../SkeletonLazyView'\r\nimport { HtmlTooltip } from '../../../HtmlTooltip'\r\n\r\nexport type CardKey = string | 'Revenue' | 'LastMonth' | 'Balance'\r\nexport type ItemKey = string | 'Asset' | 'Claimed' | 'Content'\r\nexport interface IChartData {\r\n  Year: number\r\n  Datasets: { [key: ItemKey]: number[] }\r\n  Labels: string[]\r\n  CardData: ICardData\r\n}\r\nexport interface ICardData {\r\n  [key: CardKey]: {\r\n    Value: number\r\n    Data: { [key: ItemKey]: number }\r\n  }\r\n}\r\nexport interface IOverViewInfoProps {\r\n  Year: number\r\n  data?: IChartData\r\n  IsLoading?: boolean\r\n}\r\nconst formatUSD = FormatterUSD().format\r\n\r\n// const colors = [\"#95d469\", \"#5db4f9\", \"#ee955b\"]\r\nconst colors = ['#92e2e3', '#5db4f9', '#5774f4']\r\n\r\nexport class OverViewInfo extends Component<IOverViewInfoProps> {\r\n  generateBarChart = (): ChartData<'bar', number[], string> => {\r\n    return {\r\n      labels: this.props.data?.Labels,\r\n      datasets: Object.keys(this.props.data?.Datasets ?? {}).reduce<ChartDataset<'bar', number[]>[]>((result, key, index) => {\r\n        const data = this.props.data?.Datasets[key] ?? []\r\n        result.push({ label: key, data: data, backgroundColor: colors[index % colors.length] })\r\n        return result\r\n      }, [])\r\n    }\r\n  }\r\n  render() {\r\n    let { CardData } = this.props.data ?? {}\r\n    CardData = CardData ?? {}\r\n    return (\r\n      <Stack sx={{ flex: 1, padding: '12px', gap: '6px', border: '1px solid rgba(0,0,0,0.12)', borderRadius: '4px' }}>\r\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: '6px' }}>\r\n          <AnalyticsOutlinedIcon color='primary' />\r\n          <Typography variant='subtitle1' color='primary' sx={{ fontWeight: 700 }}>\r\n            Earnings\r\n          </Typography>\r\n        </Box>\r\n        <Typography variant='body2' sx={{ color: '#979797' }}>\r\n          Year {this.props.Year}\r\n        </Typography>\r\n        <Box />\r\n        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>\r\n          <InfoItem\r\n            Title='All revenue'\r\n            Value={formatUSD(CardData?.Revenue?.Value)}\r\n            Description={`All revenue in the year ${this.props.Year}.`}\r\n            TitleColor={'#1976d2'}\r\n            data={CardData?.Revenue?.Data}\r\n            IsLoading={this.props.IsLoading !== false}\r\n            Icon={(isMobile) => <DonutSmallOutlinedIcon sx={{ fontSize: isMobile ? '3rem' : '6rem', color: '#1976d2' }} />}\r\n          />\r\n          <InfoItem\r\n            Title='Last month'\r\n            Value={formatUSD(CardData?.LastMonth?.Value)}\r\n            Description={`The most recent month has been paid in the year ${this.props.Year}.`}\r\n            data={CardData?.LastMonth?.Data}\r\n            IsLoading={this.props.IsLoading !== false}\r\n            Icon={(isMobile) => <DataUsageOutlinedIcon sx={{ fontSize: isMobile ? '3rem' : '6rem', color: '#1976d2' }} />}\r\n            TitleColor={'#1976d2'}\r\n          />\r\n          <InfoItem\r\n            Title='Balances'\r\n            Value={formatUSD(CardData?.Balance?.Value)}\r\n            Description='All revenue has not been paid.'\r\n            data={CardData?.Balance?.Data}\r\n            IsLoading={this.props.IsLoading !== false}\r\n            Icon={(isMobile) => <PaidOutlinedIcon sx={{ fontSize: isMobile ? '3rem' : '6rem', color: '#ffc107' }} />}\r\n            TitleColor={'#ffc107'}\r\n          />\r\n        </Box>\r\n        <Box height='12px' />\r\n        <SkeletonLazyWrap IsLoading={this.props.IsLoading !== false} component={Box} sx={{ flex: 1, minHeight: '400px' }}>\r\n          <BarChart data={this.generateBarChart()} />\r\n        </SkeletonLazyWrap>\r\n      </Stack>\r\n    )\r\n  }\r\n}\r\n\r\ninterface InfoItemProps {\r\n  isFirst?: boolean\r\n  Title: string\r\n  Value: string\r\n  TitleColor: string\r\n  Description: string\r\n  data?: { [key: ItemKey]: number }\r\n  Icon: (isMobile: boolean) => JSX.Element\r\n  IsLoading: boolean\r\n}\r\nconst InfoItem: FC<InfoItemProps> = React.forwardRef((props, ref) => {\r\n  const isMobile = CreateUseMediaQuery()\r\n  return (\r\n    <HtmlTooltip placement='top' title={<TooltipItem data={props.data ?? {}} Description={props.Description} />} arrow>\r\n      <SkeletonLazyWrap\r\n        IsLoading={props.IsLoading}\r\n        component={Box}\r\n        ref={ref}\r\n        sx={{ flex: 1, minWidth: '250px', minHeight: '100px', display: 'flex', border: '1px solid white', background: '#e0e0e0' }}\r\n      >\r\n        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '12px 8px' }}>{props.Icon(isMobile)}</Box>\r\n        <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>\r\n          <Typography sx={{ fontWeight: 'bold', color: props.TitleColor }}>{props.Title}</Typography>\r\n          <Typography variant='h6'>{props.Value}</Typography>\r\n        </Box>\r\n      </SkeletonLazyWrap>\r\n    </HtmlTooltip>\r\n  )\r\n})\r\n\r\ninterface ITooltipItem {\r\n  Description: string\r\n  data: { [key: ItemKey]: number }\r\n}\r\nconst GenerateItem = (data: { [key: ItemKey]: number }) => {\r\n  return Object.keys(data).map((key) => {\r\n    return (\r\n      <Box key={key} sx={{ display: 'flex', justifyContent: 'space-between' }}>\r\n        <Typography sx={{ fontWeight: '600', minWidth: '100px' }}>{key}</Typography>\r\n        <Typography fontWeight={'500'}>{formatUSD(data[key] ?? 0)}</Typography>\r\n      </Box>\r\n    )\r\n  })\r\n}\r\nconst TooltipItem: FC<ITooltipItem> = (props) => {\r\n  return (\r\n    <Box sx={{ maxWidth: '300px', minWidth: '200px' }}>\r\n      {GenerateItem(props.data)}\r\n      <Divider />\r\n      <Typography variant='caption'>\r\n        {props.Description}\r\n        {/* All revenue has been paid in the year 2023. */}\r\n        {/* The most recent month has been paid in the year 2023. */}\r\n        {/* All revenue has not been paid */}\r\n      </Typography>\r\n    </Box>\r\n  )\r\n}\r\n"],"names":["formatUSD","FormatterUSD","format","colors","OverViewInfo","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","_this$props$data","_this$props$data$Data","_this$props$data2","labels","props","data","Labels","datasets","Object","keys","Datasets","reduce","result","key","index","_this$props$data$Data2","_this$props$data3","push","label","backgroundColor","_inherits","_createClass","value","render","_this$props$data4","_CardData","_CardData2","_CardData3","_CardData4","_CardData5","_CardData6","_ref","CardData","_jsxs","Stack","sx","flex","padding","gap","border","borderRadius","Box","display","alignItems","children","_jsx","AnalyticsOutlinedIcon","color","Typography","variant","fontWeight","Year","flexDirection","flexWrap","InfoItem","Title","Value","Revenue","Description","TitleColor","Data","IsLoading","Icon","isMobile","DonutSmallOutlinedIcon","fontSize","LastMonth","DataUsageOutlinedIcon","Balance","PaidOutlinedIcon","height","SkeletonLazyWrap","component","minHeight","BarChart","generateBarChart","Component","React","forwardRef","ref","_props$data","CreateUseMediaQuery","HtmlTooltip","placement","title","TooltipItem","arrow","minWidth","background","justifyContent","margin","GenerateItem","map","_data$key","maxWidth","Divider"],"mappings":"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"}

package/Components/Views/DashBoard/PanelIntro/index.d.ts

@@ -0,0 +1,4 @@
+import { Component } from 'react';
+export default class PanelIntro extends Component {
+    render(): JSX.Element;
+}

package/Components/Views/DashBoard/PanelIntro/index.js

@@ -0,0 +1,76 @@
+import { inherits as _inherits, createClass as _createClass, classCallCheck as _classCallCheck, callSuper as _callSuper } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { Grow, Box, Grid, Typography } from '@mui/material';
+
+var PanelIntro = /*#__PURE__*/function (_Component) {
+  function PanelIntro() {
+    _classCallCheck(this, PanelIntro);
+    return _callSuper(this, PanelIntro, arguments);
+  }
+  _inherits(PanelIntro, _Component);
+  return _createClass(PanelIntro, [{
+    key: "render",
+    value: function render() {
+      return jsx(Grow, {
+        "in": true,
+        timeout: {
+          enter: 800
+        },
+        children: jsx(Box, {
+          sx: {
+            background: '#c8facd',
+            padding: '5px 10px 5px 30px',
+            borderRadius: '4px'
+          },
+          children: jsxs(Grid, {
+            container: true,
+            children: [jsx(Grid, {
+              item: true,
+              xs: 8,
+              children: jsxs(Box, {
+                sx: {
+                  display: 'flex',
+                  justifyContent: 'center',
+                  flexDirection: 'column',
+                  height: '100%'
+                },
+                children: [jsx(Typography, {
+                  variant: "h6",
+                  children: "Welcome back!"
+                }), jsx(Typography, {
+                  variant: "h6",
+                  children: "Dinocollab"
+                }), jsx(Typography, {
+                  variant: "body1",
+                  children: "Thank you for your business, your trust, and your confidence. It is our pleasure to work with you."
+                })]
+              })
+            }), jsx(Grid, {
+              item: true,
+              xs: 4,
+              children: jsx(Box, {
+                sx: {
+                  display: 'flex',
+                  justifyContent: 'center'
+                },
+                children: jsx(Box, {
+                  component: "img",
+                  src: "assets/images/illustration_dashboard.png",
+                  alt: "illustration_dashboard",
+                  sx: {
+                    maxWidth: '100%',
+                    maxHeight: '285px'
+                  }
+                })
+              })
+            })]
+          })
+        })
+      });
+    }
+  }]);
+}(Component);
+
+export { PanelIntro as default };
+//# sourceMappingURL=index.js.map

package/Components/Views/DashBoard/PanelIntro/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/Components/Views/DashBoard/PanelIntro/index.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport { Box, Grid, Grow, Typography } from '@mui/material'\r\n\r\nexport default class PanelIntro extends Component {\r\n  render() {\r\n    return (\r\n      <Grow in timeout={{ enter: 800 }}>\r\n        <Box sx={{ background: '#c8facd', padding: '5px 10px 5px 30px', borderRadius: '4px' }}>\r\n          <Grid container>\r\n            <Grid item xs={8}>\r\n              <Box sx={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', height: '100%' }}>\r\n                <Typography variant=\"h6\">Welcome back!</Typography>\r\n                <Typography variant=\"h6\">Dinocollab</Typography>\r\n                <Typography variant=\"body1\">\r\n                  Thank you for your business, your trust, and your confidence. It is our pleasure to work with you.\r\n                </Typography>\r\n              </Box>\r\n            </Grid>\r\n            <Grid item xs={4}>\r\n              <Box sx={{ display: 'flex', justifyContent: 'center' }}>\r\n                <Box\r\n                  component=\"img\"\r\n                  src=\"assets/images/illustration_dashboard.png\"\r\n                  alt=\"illustration_dashboard\"\r\n                  sx={{ maxWidth: '100%', maxHeight: '285px' }}\r\n                />\r\n              </Box>\r\n            </Grid>\r\n          </Grid>\r\n        </Box>\r\n      </Grow>\r\n    )\r\n  }\r\n}\r\n"],"names":["PanelIntro","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_jsx","Grow","timeout","enter","children","Box","sx","background","padding","borderRadius","_jsxs","Grid","container","item","xs","display","justifyContent","flexDirection","height","Typography","variant","component","src","alt","maxWidth","maxHeight","Component"],"mappings":";;;;;AAGqBA,IAAAA,UAAW,0BAAAC,UAAA,EAAA;AAAA,EAAA,SAAAD,UAAA,GAAA;AAAAE,IAAAA,eAAA,OAAAF,UAAA,CAAA;AAAA,IAAA,OAAAG,UAAA,CAAA,IAAA,EAAAH,UAAA,EAAAI,SAAA,CAAA;AAAA;EAAAC,SAAA,CAAAL,UAAA,EAAAC,UAAA,CAAA;EAAA,OAAAK,YAAA,CAAAN,UAAA,EAAA,CAAA;IAAAO,GAAA,EAAA,QAAA;AAAAC,IAAAA,KAAA,EAC9B,SAAAC,MAAMA,GAAA;MACJ,OACEC,GAAA,CAACC,IAAI,EAAA;AAAC,QAAA,IAAA,EAAG,IAAA;AAAAC,QAAAA,OAAO,EAAE;AAAEC,UAAAA,KAAK,EAAE;SAAK;AAAAC,QAAAA,QAAA,EAC9BJ,IAACK,GAAG,EAAA;AAACC,UAAAA,EAAE,EAAE;AAAEC,YAAAA,UAAU,EAAE,SAAS;AAAEC,YAAAA,OAAO,EAAE,mBAAmB;AAAEC,YAAAA,YAAY,EAAE;WAAO;AACnFL,UAAAA,QAAA,EAAAM,IAAA,CAACC,IAAI,EAAC;AAAAC,YAAAA,SAAS,EACb,IAAA;AAAAR,YAAAA,QAAA,EAAA,CAAAJ,GAAA,CAACW,IAAI,EAAA;AAACE,cAAAA,IAAI,EAAA,IAAA;AAACC,cAAAA,EAAE,EAAE,CAAC;AACdV,cAAAA,QAAA,EAAAM,IAAA,CAACL,GAAG,EAAC;AAAAC,gBAAAA,EAAE,EAAE;AAAES,kBAAAA,OAAO,EAAE,MAAM;AAAEC,kBAAAA,cAAc,EAAE,QAAQ;AAAEC,kBAAAA,aAAa,EAAE,QAAQ;AAAEC,kBAAAA,MAAM,EAAE;iBAAQ;AAC7Fd,gBAAAA,QAAA,EAAA,CAAAJ,GAAA,CAACmB,UAAU,EAAA;AAACC,kBAAAA,OAAO,EAAC,IAAI;AAA2BhB,kBAAAA,QAAA,EAAA;AAAA,iBAAA,CAAA,EACnDJ,GAAC,CAAAmB,UAAU,EAAC;AAAAC,kBAAAA,OAAO,EAAC,IAAI;AAAAhB,kBAAAA,QAAA,EAAA;AAAA,iBAAA,CAAwB,EAChDJ,GAAA,CAACmB,UAAU,EAAC;AAAAC,kBAAAA,OAAO,EAAC,OAAO;;kBAEd;eACT;AAAA,aAAA,CACD,EACPpB,GAAA,CAACW,IAAI,EAAC;AAAAE,cAAAA,IAAI,EAAC,IAAA;AAAAC,cAAAA,EAAE,EAAE,CAAC;AAAAV,cAAAA,QAAA,EACdJ,GAAC,CAAAK,GAAG;AAACC,gBAAAA,EAAE,EAAE;AAAES,kBAAAA,OAAO,EAAE,MAAM;AAAEC,kBAAAA,cAAc,EAAE;iBAAU;AAAAZ,gBAAAA,QAAA,EACpDJ,GAAC,CAAAK,GAAG;AACFgB,kBAAAA,SAAS,EAAC,KAAK;AACfC,kBAAAA,GAAG,EAAC,0CAA0C;AAC9CC,kBAAAA,GAAG,EAAC,wBAAwB;AAC5BjB,kBAAAA,EAAE,EAAE;AAAEkB,oBAAAA,QAAQ,EAAE,MAAM;AAAEC,oBAAAA,SAAS,EAAE;AAAS;iBAAA;;AAG3C,aAAA,CAAA;WAAA;SAEL;AAAA,OAAA,CACD;AAEX;AAAC,GAAA,CAAA,CAAA;AAAA,CAAA,CA7BqCC,SAAS;;;;"}

package/Components/Views/DashBoard/SummaryPanel/index.d.ts

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+import { IItemSummary } from '../../../Models';
+interface SummaryPanelProps {
+    GetSummary: (signal?: AbortSignal | undefined) => Promise<IItemSummary | null>;
+}
+interface SummaryPanelState {
+    ItemSummary: IItemSummary | null;
+}
+export default class SummaryPanel extends Component<SummaryPanelProps, SummaryPanelState> {
+    /**
+     *
+     */
+    constructor(props: SummaryPanelProps);
+    _isMounted: boolean;
+    GenerateItems: () => JSX.Element[];
+    componentWillUnmount(): void;
+    componentDidMount(): Promise<void>;
+    render(): JSX.Element;
+}
+export {};