chore: dashboard

src/view/dashboard/index.scss

@@ -5,6 +5,30 @@
   overflow-y: auto;
   padding: 15px;
 
+  &-no-data {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+    font-weight: bold;
+
+    .icon {
+      color: #989898;
+      font-size: 24px;
+    }
+
+    .txt {
+      font-size: 12px;
+
+      a {
+        color: #1677ff;
+        cursor: pointer;
+      }
+    }
+  }
+
   &.dark {
     background-color: #000;
   }

src/view/dashboard/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { Row, Col, Card } from 'antd';
+import { InboxOutlined } from '@ant-design/icons';
 import { os, invoke } from '@tauri-apps/api';
 
 import useInit from '@/hooks/useInit';
@@ -10,7 +11,7 @@ import './index.scss';
 
 export default function Dashboard() {
   const { json } = useJson<Record<string, any>[]>(CHAT_AWESOME_JSON);
-  const [list, setList] = useState<Array<[string, Record<string, any>[]]>>([]);
+  const [list, setList] = useState<Array<[string, Record<string, any>[]]>>();
   const [hasClass, setClass] = useState(false);
   const [theme, setTheme] = useState('');
 
@@ -23,6 +24,7 @@ export default function Dashboard() {
   });
 
   useEffect(() => {
+    if (!json) return;
     const categories = new Map();
 
     json?.forEach((i) => {
@@ -43,6 +45,23 @@ export default function Dashboard() {
     });
   };
 
+  if (!list) return null;
+  if (list?.length === 0) {
+    return (
+      <div className="dashboard-no-data">
+        <div className="icon">
+          <InboxOutlined style={{ fontSize: 80, marginBottom: 5 }} />
+          <br />
+          No data
+        </div>
+        <div className="txt">
+          Go to <a onClick={() => invoke('control_window')}>{'Control Center -> Awesome'}</a> to add
+          data
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={clsx('dashboard', theme, { 'has-top-dom': hasClass })}>
       <div>