Update ui

components/Empty.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Link from 'next/link';
+
+const Empty = () => {
+
+    return (
+        <div className="warp-empty">
+            <div className="content-empty">
+                <img src="/static/empty.jpg" alt="empty" />
+                <div className="title-empty">
+                    <h4>ความผิดพลาด 401 ข้อมูลไม่พร้อมใช้งาน</h4>
+                    <h4>โปรดกลับสู่หน้าแรก</h4>
+                </div>
+            </div>
+            <Link href="/">
+                <h5>หน้าแรก</h5>
+            </Link>
+        </div>
+    )
+}
+export default Empty;

components/about.js

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { useMediaQuery } from 'react-responsive';
+
+const About = () => {
+
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+
+    const [data, setData] = useState([
+        {
+            title: "ระดับเริ่มต้น (Aging society)",
+            text: "สังคมที่มีประชากรอายุ 60 ปีขึ้นไปมากกว่าร้อยละ 10 ของประชากรทั้งประเทศ",
+            subtext: "หรือมีประชากรอายุตั้งแต่ 65 ปีมากกว่าร้อยละ 7 ของประชากรทั้งประเทศ"
+        },
+        {
+            title: "ระดับสมบูรณ์ (Aged society)",
+            text: "สังคมที่มีประชากรอายุ 60 ปีขึ้นไป มากกว่าร้อยละ 20 ของประชากรทั้งประเทศ",
+            subtext: "หรือมีประชากรอายุตั้งแต่ 65 ปี มากกว่าร้อยละ 14 ของประชากรทั้งประเทศ"
+        },
+        {
+            title: "ระดับสูง (Super-aged society)",
+            text: "สังคมที่มีประชากรอายุ 65 ปีขึ้นไปมากกว่า ร้อยละ 20 ของประชากรทั้งประเทศ",
+            subtext: ""
+        },
+    ])
+
+    return (
+        <div className="warp-about">
+            <div className="page-content">
+                {
+                    isSmallScreen ?
+                        <div className="container-fluid">
+                            <div className="head-content">
+                                <h4>สังคมผู้สูงอายุ <br />และระดับของการเข้าสู่สังคมผู้สูงอายุ</h4>
+                                <h5> ถูกแบ่งออกเป็น 3 ระดับ</h5>
+                            </div>
+
+                            <div className="detail-content">
+                                <img src="/static/gifcover.gif" />
+                                <div className="data-detail-content">
+                                    {
+                                        data.map((item, index) => (
+                                            <div className="title-content" key={index}>
+                                                <h6 className="header-title-content">{item.title}</h6>
+                                                <h6>{item.text}</h6>
+                                                <h6>{item.subtext}</h6>
+                                            </div>
+                                        ))
+                                    }
+                                    <div className="more-content">
+                                        <h6>อ่านต่อ</h6>
+                                        <a href="/index/society">
+                                            <img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        :
+                        <div className="container-fluid">
+                            <div className="head-content">
+                                <h3>สังคมผู้สูงอายุ และระดับของการเข้าสู่สังคมผู้สูงอายุ</h3>
+                                <h3> ถูกแบ่งออกเป็น 3 ระดับ</h3>
+                            </div>
+
+                            <div className="detail-content">
+                                <img src="/static/gifcover.gif" />
+                                <div className="data-detail-content">
+                                    {
+                                        data.map((item, index) => (
+                                            <div className="title-content" key={index}>
+                                                <h6 className="header-title-content">{item.title}</h6>
+                                                <h6>{item.text}</h6>
+                                                <h6>{item.subtext}</h6>
+                                            </div>
+                                        ))
+                                    }
+                                    <div className="more-content">
+                                        <h6>อ่านต่อ</h6>
+                                        <a href="/index/society">
+                                            <img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
+                                        </a>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                }
+            </div>
+        </div>
+    )
+}
+export default About;

components/agency.js

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { useMediaQuery } from 'react-responsive';
+import { Steps } from 'antd';
+const { Step } = Steps;
+
+const Agency = () => {
+
+    const isTablet = useMediaQuery({ maxDeviceWidth: 1025 })
+    const isMobile = useMediaQuery({ maxDeviceWidth: 768 })
+    const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
+
+    const [card, setCard] = useState([
+        {
+            img: "/static/box1.jpg",
+            box: "1",
+            content: "ตรวจเช็คคุณสมบัติ",
+            description: "สัญชาติไทย อายุ 59 ปีบริบูรณ์ เเละไม่เป็นผู้ได้รับสิทธิประโยชน์จากหน่วยงานรัฐ หรือวิสาหกิจ",
+        },
+        {
+            img: "/static/box2.jpg",
+            box: "2",
+            content: "เตรียมเอกสาร",
+            description: "บัตรประชาชน ทะเบียนบ้าน สมุดบัญชีเงินฝาก",
+        },
+        {
+            img: "/static/box3.jpg",
+            box: "3",
+            content: "ยื่นคำขอลงทะเบียน",
+            description: "ที่สำนักงานเขต หรือเทศบาล ที่มีชื่ออยู่ในทะเบียนบ้าน",
+        },
+        {
+            img: "/static/box4.jpg",
+            box: "4",
+            content: "รออนุมัติ เพื่อรับเงิน",
+            description: `รับเป็นเงินสดหรือโอนเข้าบัญชีธนาคารด้วยตนเองหรือโดยผู้เเเทน`
+        },
+    ])
+
+    return (
+        <div className="warp-agency">
+            {
+                isSmallScreen ?
+                    <React.Fragment>
+                        <div className="head-agency">
+                            <h3>วิธีการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h3>
+                            <div className="title-agency">
+                                <h6>โดยการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                <h6>ไม่จำเป็นต้องไปลงทะเบียนใหม่ทุกปี ลงเพียงครั้งเดียวก็ได้รับสิทธิไปตลอด</h6>
+                                <h6><sup>*</sup>เว้นแต่กรณีที่ผู้สูงอายุย้ายที่อยู่อาศัย</h6>
+                            </div>
+                        </div>
+                        <div className="content-agency-mobile">
+                            <Steps progressDot current={3} direction="vertical">
+                                {
+                                    card.map((items, index) => (
+                                        <Step key={index} title={items.content} description={items.description} />
+                                    ))
+                                }
+                            </Steps>
+                        </div>
+                    </React.Fragment>
+                    :
+                    isMobile || isTablet ?
+                        <React.Fragment>
+                            <div className="head-agency">
+                                <h3>วิธีการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h3>
+                                <div className="title-agency">
+                                    <h6>โดยการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                    <h6>ไม่จำเป็นต้องไปลงทะเบียนใหม่ทุกปี ลงเพียงครั้งเดียวก็ได้รับสิทธิไปตลอด</h6>
+                                    <h6><sup>*</sup>เว้นแต่กรณีที่ผู้สูงอายุย้ายที่อยู่อาศัย</h6>
+                                </div>
+                            </div>
+                            <div className="content-agency-mobile">
+                                <Steps progressDot current={3} direction="vertical">
+                                    {
+                                        card.map((items, index) => (
+                                            <Step key={index} title={items.content} description={items.description} />
+                                        ))
+                                    }
+                                </Steps>
+                                <img src="/static/agency.jpg" alt="img-agency" />
+                            </div>
+                        </React.Fragment>
+                        :
+                        <React.Fragment>
+                            <div className="head-agency">
+                                <h3>วิธีการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h3>
+                                <svg>
+                                    <line x1="100" y1="0" x2="200" y2="0" />
+                                </svg>
+                                <div className="title-agency">
+                                    <h6>โดยการลงทะเบียนรับเบี้ยยังชีพผู้สูงอายุ</h6>
+                                    <h6>ไม่จำเป็นต้องไปลงทะเบียนใหม่ทุกปี ลงเพียงครั้งเดียวก็ได้รับสิทธิไปตลอด</h6>
+                                    <h6><sup>*</sup>เว้นแต่กรณีที่ผู้สูงอายุย้ายที่อยู่อาศัย</h6>
+                                </div>
+                            </div>
+                            <div className="content-agency">
+                                {
+                                    card.map((items, index) => (
+                                        <div className="content-agency-card" key={index}>
+                                            <img src={items.img} alt={`box${index}`} />
+                                            <div className="agency-box">
+                                                <h6>{items.box}</h6>
+                                            </div>
+                                            <p>{items.content}</p>
+                                        </div>
+                                    ))
+                                }
+                            </div>
+                        </React.Fragment>
+
+            }
+
+        </div>
+    )
+}
+export default Agency;

components/chart/barChart.js

@@ -1,15 +1,26 @@
 import React, { useState, useEffect } from 'react'
 import Chart from 'react-apexcharts'
 import Sheetapi from '../../config/api'
-
+import { useMediaQuery } from 'react-responsive';
 
 const Barchart = () => {
 
+  const isSmallScreen = useMediaQuery({ maxWidth: 768 })
+
   const [options, setOptions] = useState({
     title: {
       text: 'สถานภาพของผู้สูงอายุ',
       align: 'left'
     },
+    responsive: [{
+      breakpoint: 575.98,
+      options: {
+        legend: {
+          position: "bottom",
+          offsetY: 5
+        },
+      },
+    }],
     chart: {
       stacked: true,
       toolbar: {
@@ -19,16 +30,6 @@ const Barchart = () => {
         enabled: true
       }
     },
-    responsive: [{
-      breakpoint: 1000,
-      options: {
-        legend: {
-          position: 'bottom',
-          offsetX: -10,
-          offsetY: 0
-        }
-      }
-    }],
     plotOptions: {
       bar: {
         horizontal: false,
@@ -47,11 +48,27 @@ const Barchart = () => {
           return val + " คน"
         }
       }
+    },
+    xaxis: {
+      categories: ["โสด",
+        "สมรส",
+        "หม้าย",
+        "หย่าร้าง",
+        "เเยกกันอยู่",
+        "อื่นๆ"]
     }
   })
 
-  const [series, setSeries] = useState([])
-  const [dataName, setDataName] = useState([])
+  const [series, setSeries] = useState([
+    {
+      name: 'เพศชาย',
+      data: [50, 50, 50, 50, 50]
+    },
+    {
+      name: 'เพศหญิง',
+      data: [50, 50, 50, 50, 50]
+    }
+  ])
 
   useEffect(() => {
     fetchData()
@@ -67,7 +84,6 @@ const Barchart = () => {
   const namelist = async (token, value) => {
     try {
       var list = await Sheetapi.getSheet(token, value)
-      setDataName(_.flatten(list))
 
       setOptions({
         xaxis: {
@@ -93,52 +109,25 @@ const Barchart = () => {
 
   return (
     <React.Fragment>
-      <div className="warp-chart-small">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="300"
-          width="250"
-        />
-      </div>
-
-      <div className="warp-chart-mobile">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="200"
-          width="450"
-        />
-      </div>
-
-      <div className="warp-chart-tablets">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="220"
-          width="500"
-        />
-      </div>
-
-      <div className="warp-chart-desktops">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="245"
-          width="550"
-        />
-      </div>
-
-      <div className="warp-chart-large">
-        <Chart
-          options={options}
-          series={series}
-          type="bar" height="285"
-          width="600"
-        />
-      </div>
-    </React.Fragment>
-
+      {
+        isSmallScreen ?
+          <Chart
+            options={options}
+            series={series}
+            type="bar"
+            height="300"
+            width="300"
+          />
+          :
+          <Chart
+            options={options}
+            series={series}
+            type="bar"
+            height="285"
+            width="600"
+          />
+      }
+    </React.Fragment >
   )
 }
- export default Barchart;
+export default Barchart;