|
1 | | -// import { gql } from 'urql'; |
| 1 | +import { use } from 'react'; |
| 2 | +import { |
| 3 | + FaFileAlt, |
| 4 | + FaFileAudio, |
| 5 | + FaHighlighter, |
| 6 | + FaMoneyCheck, |
| 7 | + FaProjectDiagram, |
| 8 | + FaQuestionCircle, |
| 9 | + FaRegNewspaper, |
| 10 | + FaSuitcase, |
| 11 | + FaThinkPeaks, |
| 12 | + FaUserFriends, |
| 13 | + FaWarehouse, |
| 14 | + FaWindowMaximize, |
| 15 | +} from 'react-icons/fa'; |
| 16 | +import { useNavigate } from 'react-router'; |
| 17 | +import { |
| 18 | + Button, |
| 19 | + Container, |
| 20 | + Heading, |
| 21 | +} from '@ifrc-go/ui'; |
| 22 | + |
| 23 | +import Page from '#components/Page'; |
| 24 | +import UserContext from '#contexts/UserContext'; |
| 25 | +import { useCountsQuery } from '#generated/types/graphql'; |
2 | 26 |
|
3 | 27 | import styles from './styles.module.css'; |
4 | 28 |
|
5 | | -function Home() { |
6 | | -// const ORGANIZATION_LIST_QUERY = gql` |
7 | | -// query DepartmentList { |
8 | | -// departments { |
9 | | -// title |
10 | | -// slug |
11 | | -// id |
12 | | -// description |
13 | | -// } |
14 | | -// } |
15 | | -// `; |
| 29 | +function Dashboards() { |
| 30 | + const { user } = use(UserContext); |
| 31 | + const [{ data }] = useCountsQuery(); |
| 32 | + const navigate = useNavigate(); |
| 33 | + |
| 34 | + const card = [ |
| 35 | + { |
| 36 | + title: 'Featured blogs', |
| 37 | + count: data?.blogs.totalCount || 0, |
| 38 | + icon: <FaFileAlt />, |
| 39 | + addLink: '/blog/add', |
| 40 | + }, |
| 41 | + { |
| 42 | + title: 'Departments', |
| 43 | + count: data?.departments.totalCount || 0, |
| 44 | + icon: <FaMoneyCheck />, |
| 45 | + addLink: '/departments/add', |
| 46 | + |
| 47 | + }, |
| 48 | + { |
| 49 | + title: 'FAQs', |
| 50 | + count: data?.faqs.totalCount || 0, |
| 51 | + icon: <FaQuestionCircle />, |
| 52 | + addLink: '/faqs/add', |
| 53 | + }, |
| 54 | + { |
| 55 | + title: 'Highlights', |
| 56 | + count: data?.highlights.totalCount || 0, |
| 57 | + icon: <FaHighlighter />, |
| 58 | + addLink: '/highlights/add', |
| 59 | + }, |
| 60 | + { |
| 61 | + title: 'Vacancies', |
| 62 | + count: data?.jobVacancies.totalCount || 0, |
| 63 | + icon: <FaSuitcase />, |
| 64 | + addLink: '/job-vacancies/add', |
| 65 | + }, |
| 66 | + { |
| 67 | + title: 'News', |
| 68 | + count: data?.news.totalCount || 0, |
| 69 | + icon: <FaRegNewspaper />, |
| 70 | + addLink: '/news/add', |
| 71 | + }, |
| 72 | + { |
| 73 | + title: 'Partners', |
| 74 | + count: data?.partners.totalCount || 0, |
| 75 | + icon: <FaUserFriends />, |
| 76 | + addLink: '/partners/add', |
| 77 | + }, |
| 78 | + { |
| 79 | + title: 'Radio Programs', |
| 80 | + count: data?.radioProgram.totalCount || 0, |
| 81 | + icon: <FaFileAudio />, |
| 82 | + addLink: '/radio-programs/add', |
| 83 | + }, |
| 84 | + { |
| 85 | + title: 'Strategic Directives', |
| 86 | + count: data?.strategicDirectives.totalCount || 0, |
| 87 | + icon: <FaThinkPeaks />, |
| 88 | + addLink: '/strategic-directives/add', |
| 89 | + }, |
| 90 | + { |
| 91 | + title: 'Resources', |
| 92 | + count: data?.resources.totalCount || 0, |
| 93 | + icon: <FaWarehouse />, |
| 94 | + addLink: '/resources/add', |
| 95 | + }, |
| 96 | + { |
| 97 | + title: 'Projects', |
| 98 | + count: data?.projects.totalCount || 0, |
| 99 | + icon: <FaProjectDiagram />, |
| 100 | + addLink: '/projects/add', |
| 101 | + }, |
| 102 | + { |
| 103 | + title: 'Procurements', |
| 104 | + count: data?.procurements.totalCount || 0, |
| 105 | + icon: <FaWindowMaximize />, |
| 106 | + addLink: '/procurements/add', |
| 107 | + }, |
| 108 | + ]; |
| 109 | + |
16 | 110 | return ( |
17 | | - <div className={styles.homePage}> |
18 | | - Home |
19 | | - </div> |
| 111 | + <Page className={styles.page}> |
| 112 | + <Container |
| 113 | + heading="Dashboards" |
| 114 | + headingLevel={1} |
| 115 | + headerDescription={( |
| 116 | + <> |
| 117 | + Welcome back |
| 118 | + {' '} |
| 119 | + <strong> |
| 120 | + {user?.firstName} |
| 121 | + {' '} |
| 122 | + {user?.lastName} |
| 123 | + </strong> |
| 124 | + {' '} |
| 125 | + to the NRC CMS Dashboard. |
| 126 | + <br /> |
| 127 | + Use the navigation menu to access different sections of the CMS. |
| 128 | + </> |
| 129 | + )} |
| 130 | + childrenContainerClassName={styles.childContainer} |
| 131 | + className={styles.container} |
| 132 | + > |
| 133 | + <div className={styles.content}> |
| 134 | + <div className={styles.cards}> |
| 135 | + {card.map((item) => ( |
| 136 | + <div key={item.title} className={styles.card}> |
| 137 | + <Heading level={6}> |
| 138 | + {item.title} |
| 139 | + </Heading> |
| 140 | + <div className={styles.cardCount}> |
| 141 | + {item.icon} |
| 142 | + {item.count} |
| 143 | + </div> |
| 144 | + </div> |
| 145 | + ))} |
| 146 | + </div> |
| 147 | + <div className={styles.cards}> |
| 148 | + <div className={styles.card}> |
| 149 | + <Heading level={3}>Quick Action</Heading> |
| 150 | + {card.map((item) => ( |
| 151 | + <div key={item.title}> |
| 152 | + <Button variant="secondary" name={undefined} onClick={() => navigate(item.addLink)}> |
| 153 | + New |
| 154 | + {' '} |
| 155 | + {item.title} |
| 156 | + </Button> |
| 157 | + </div> |
| 158 | + ))} |
| 159 | + </div> |
| 160 | + </div> |
| 161 | + </div> |
| 162 | + |
| 163 | + </Container> |
| 164 | + </Page> |
20 | 165 | ); |
21 | 166 | } |
22 | 167 |
|
23 | | -export default Home; |
| 168 | +export default Dashboards; |
0 commit comments