From d21865bc324088a7dbd1e6e7d3da9387808a4eb0 Mon Sep 17 00:00:00 2001 From: Yash Sehgal Date: Thu, 12 Oct 2023 07:54:27 +0530 Subject: [PATCH] Dashboard UI Implementation (#14) * feat: dashboard sections boilerplate (#9) * feat: created view container * feat: created navbar for review with some fixes to be addressed * fix: view-container type / merge conflict * style: view container breakpoints * fix(style): remove bg-red for testing * style: tracking-tight for headings * style: theme switch upgrade * feat: page container layout, feature options added * chore: add icons in features list data * style: feature list responsive layout * style: test logo in navbar * Recent Q/A Sessions in Q/A Tab (#20) * fix: add link support for option type * feat: flow for new qna session * style: sessions page header layout * chore: add env file to .gitignore * chore: add environment variables to shared commons * feat: add methods for handling data requests, with mock data support * feat: add UI for empty state, recent sessions view * fix: created a new recent-qna-session-list component in section folder and imported it in page.tsx, changed the values of sessionID in qna-session-mock.ts to make all of them unique * fix: changed the data of qna-session-mocks.ts file from function returning array of interface to object of type array of interfaces (reference: FeatureList object from dashboard-features-list) * feat: a rough design of the recent-qna-sessions * fix-styles: fixed a hover brightness style * fix style: created a common class box-card to reduce css repitition * feat: add component for listing items in flex * fix: vercel key-prop issue resolved * fix: recent sessions list rendering * chore: feature list data shifted to common * feat: created a box-card component in layout * chore: changed name component-list to box-card-slider * chore: file name changed and box-card style removed * fix: build error fixed * fix: build error fixed * chore: used usestate as prop in recent-qna-sessions-list * fix: prop error fix in recent-qna-session * fix: Style changes * style: update text size in recent q/a session cards * feat: add prettier config * chore: prettier fix * style: remove ring on links and buttons * style: add dialog content bg * feat: mock data manager for topics & depth --------- Co-authored-by: Shristi Gupta --------- Co-authored-by: Shristi Gupta --- .gitignore | 1 + .prettierrc.js | 9 ++ .vscode/settings.json | 18 +++ app/dashboard/page.tsx | 25 +-- app/globals.css | 28 +++- app/layout.tsx | 16 +- app/page.tsx | 18 ++- app/qna/page.tsx | 120 ++++++++++++++ common/dashboard-feature-list.tsx | 38 +++++ common/environment-variables.ts | 6 + common/index.ts | 10 ++ components.json | 2 +- components/layouts/box-card-slider.tsx | 19 +++ components/layouts/box-card.tsx | 20 +++ components/layouts/page-content.tsx | 13 ++ components/layouts/view-container.tsx | 13 ++ .../dashboard-features-list/index.tsx | 26 +++ .../dashboard-recent-activity/index.tsx | 9 ++ components/sections/navbar/index.tsx | 38 +++++ .../recent-qna-sessions-list/index.tsx | 32 ++++ .../sections/topic-suggestions/index.tsx | 5 + components/ui/alert.tsx | 37 ++--- components/ui/avatar.tsx | 32 ++-- components/ui/badge.tsx | 26 +-- components/ui/button.tsx | 54 ++++--- components/ui/card.tsx | 53 +++--- components/ui/dialog.tsx | 118 ++++++++++++++ components/ui/empty-states/index.tsx | 1 + .../ui/empty-states/no-recent-sessions.tsx | 29 ++++ components/ui/feature-option.tsx | 35 ++++ components/ui/input.tsx | 18 +-- components/ui/label.tsx | 20 +-- components/ui/navigation-menu.tsx | 80 +++++---- components/ui/progress.tsx | 21 ++- components/ui/recent-session.tsx | 32 ++++ components/ui/select.tsx | 81 +++++----- components/ui/status-alert.tsx | 14 +- components/ui/toast.tsx | 76 ++++----- components/ui/toaster.tsx | 12 +- components/ui/use-toast.ts | 153 +++++++++--------- lib/utils.ts | 8 +- middleware/qna/recent-sessions.ts | 16 ++ middleware/qna/sessions.ts | 16 ++ mocks/qna-session-mocks.ts | 64 ++++++++ next.config.js | 4 +- package-lock.json | 24 ++- package.json | 7 +- postcss.config.js | 2 +- public/media/empty-state-graphic.svg | 7 + tailwind.config.js | 24 +-- tailwind.config.ts | 6 +- types/feature-card.d.ts | 11 ++ types/qna-session.d.ts | 5 + types/user.d.ts | 8 + 54 files changed, 1173 insertions(+), 387 deletions(-) create mode 100644 .prettierrc.js create mode 100644 .vscode/settings.json create mode 100644 app/qna/page.tsx create mode 100644 common/dashboard-feature-list.tsx create mode 100644 common/environment-variables.ts create mode 100644 common/index.ts create mode 100644 components/layouts/box-card-slider.tsx create mode 100644 components/layouts/box-card.tsx create mode 100644 components/layouts/page-content.tsx create mode 100644 components/layouts/view-container.tsx create mode 100644 components/sections/dashboard-features-list/index.tsx create mode 100644 components/sections/dashboard-recent-activity/index.tsx create mode 100644 components/sections/navbar/index.tsx create mode 100644 components/sections/recent-qna-sessions-list/index.tsx create mode 100644 components/sections/topic-suggestions/index.tsx create mode 100644 components/ui/dialog.tsx create mode 100644 components/ui/empty-states/index.tsx create mode 100644 components/ui/empty-states/no-recent-sessions.tsx create mode 100644 components/ui/feature-option.tsx create mode 100644 components/ui/recent-session.tsx create mode 100644 middleware/qna/recent-sessions.ts create mode 100644 middleware/qna/sessions.ts create mode 100644 mocks/qna-session-mocks.ts create mode 100644 public/media/empty-state-graphic.svg create mode 100644 types/feature-card.d.ts create mode 100644 types/qna-session.d.ts create mode 100644 types/user.d.ts diff --git a/.gitignore b/.gitignore index 8f322f0..45c1abc 100644 --- a/.gitignore +++ b/.gitignore @@ -26,6 +26,7 @@ yarn-error.log* # local env files .env*.local +.env # vercel .vercel diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..df60d30 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,9 @@ +module.exports = { + semi: true, + singleQuote: true, + trailingComma: 'all', + bracketSameLine: true, + tabWidth: 2, + useTabs: false, + arrowParens: 'always', +}; diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..843f0c2 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,18 @@ +{ + "[javascript]": { + "editor.formatOnSave": false + }, + "eslint.alwaysShowStatus": true, + "javascript.validate.enable": false, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "workbench.colorCustomizations": { + "titleBar.activeBackground": "#3770FF", + "titleBar.activeForeground": "#ffffff", + "titleBar.inactiveBackground": "#3770FF", + "titleBar.inactiveForeground": "#ffffff" + } + // Enables TypeScript check for all files, but instantly kills RAM so only enable when needed + // "typescript.tsserver.experimental.enableProjectDiagnostics": true +} diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index a3c8586..3dd02ca 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -1,10 +1,17 @@ -import StatusAlert from "@/components/ui/status-alert"; +import PageContent from '@/components/layouts/page-content'; +import DashboardFeatureList from '@/components/sections/dashboard-features-list'; +import DashboardRecentActivity from '@/components/sections/dashboard-recent-activity'; +import TopicSuggestions from '@/components/sections/topic-suggestions'; -const Dashboard: React.FunctionComponent = () =>{ - return( -
- -
- ) -} -export default Dashboard; \ No newline at end of file +const Dashboard: React.FunctionComponent = () => { + return ( + +
+ + {/* */} + {/* */} +
+ + ); +}; +export default Dashboard; diff --git a/app/globals.css b/app/globals.css index bd6213e..af525c0 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,29 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +body, +html { + @apply text-neutral-800; +} + +.view-container { + @apply box-border mx-auto; + @apply w-[1250px] max-2xl:w-[1200px] max-xl:w-[920px] max-lg:w-[720px] max-md:w-[600px] max-sm:w-[440px]; +} + +h1, +h2, +h3, +h4 { + @apply tracking-tight; +} + +.hide-scrollbar::-webkit-scrollbar { + width: 0; /* Remove scrollbar space */ + background: transparent; /* Optional: just make scrollbar invisible */ +} + +.form-input-wrapper { + @apply grid grid-cols-1 gap-2 my-6; +} diff --git a/app/layout.tsx b/app/layout.tsx index 7870e8b..a9fd906 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,16 +1,20 @@ -import './globals.css' -import { Inter } from 'next/font/google' +import Navbar from '@/components/sections/navbar'; +import './globals.css'; +import { Inter } from 'next/font/google'; -const inter = Inter({ subsets: ['latin'] }) +const inter = Inter({ subsets: ['latin'] }); export default function RootLayout({ children, }: { - children: React.ReactNode + children: React.ReactNode; }) { return ( - {children} + + + {children} + - ) + ); } diff --git a/app/page.tsx b/app/page.tsx index 18f3e06..25d9f69 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,11 +1,15 @@ -import StatusAlert from "@/components/ui/status-alert"; +import PageContent from '@/components/layouts/page-content'; +import ViewContainer from '@/components/layouts/view-container'; +import StatusAlert from '@/components/ui/status-alert'; const App: React.FunctionComponent = () => { return ( -
- -
- ) -} + + + + + + ); +}; -export default App; \ No newline at end of file +export default App; diff --git a/app/qna/page.tsx b/app/qna/page.tsx new file mode 100644 index 0000000..8a3880f --- /dev/null +++ b/app/qna/page.tsx @@ -0,0 +1,120 @@ +'use client'; +import PageContent from '@/components/layouts/page-content'; +import ViewContainer from '@/components/layouts/view-container'; + +import { Button } from '@/components/ui/button'; + +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '@/components/ui/dialog'; + +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; + +import { Label } from '@/components/ui/label'; +import { useState } from 'react'; +import { fetchRecentQNASessions } from '@/middleware/qna/recent-sessions'; +import { RecentSessionsEmptyStateView } from '@/components/ui/empty-states'; +import { RecentQnASessionsList } from '@/components/sections/recent-qna-sessions-list'; +import { fetchTopics } from '@/middleware/qna/sessions'; +import { getTopicDepthLevels } from '@/common'; + +const TopicBasedQNA: React.FunctionComponent = () => { + const [recentQNASessions, setRecentQNASessions] = useState< + Array + >(fetchRecentQNASessions()); + + const [userTopics, setUserTopics] + = useState>(fetchTopics()); + + return ( + +
+ +

{'Your Q/A Sessions'}

+
+ + + + + + + Start a new Q/A Session + + Provide information related to new session. This helps us to + gather topics for you + + +
+
+ + +
+
+ + +
+
+ + + + + + + +
+ +
+ {recentQNASessions.length ? ( + + ) : ( + + )} + + ); +}; + +export default TopicBasedQNA; diff --git a/common/dashboard-feature-list.tsx b/common/dashboard-feature-list.tsx new file mode 100644 index 0000000..d77b882 --- /dev/null +++ b/common/dashboard-feature-list.tsx @@ -0,0 +1,38 @@ +import { cn } from '@/lib/utils'; +import { + Briefcase, + FileSearch, + MessagesSquare, + PencilLine, + Video, +} from 'lucide-react'; + +const FeatureList: Array = [ + { + featureName: 'Video Interview', + icon: