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 <shristiguptawork@gmail.com>

---------

Co-authored-by: Shristi Gupta <shristiguptawork@gmail.com>

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSameLine: true,
+  tabWidth: 2,
+  useTabs: false,
+  arrowParens: 'always',
+};

.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
+}

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(
-        <div className="dashboard m-12">
-            <StatusAlert />
-        </div>
-    )
-}
-export default Dashboard;
+const Dashboard: React.FunctionComponent = () => {
+  return (
+    <PageContent>
+      <div className="dashboard grid grid-cols-1 gap-20">
+        <DashboardFeatureList />
+        {/* <DashboardRecentActivity /> */}
+        {/* <TopicSuggestions /> */}
+      </div>
+    </PageContent>
+  );
+};
+export default Dashboard;

app/globals.css

@@ -1,3 +1,29 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@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;
+}

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 (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Navbar />
+        {children}
+      </body>
     </html>
-  )
+  );
 }

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 (
-    <div className="app m-12">
-      <StatusAlert />
-    </div>
-  )
-}
+    <PageContent>
+      <ViewContainer>
+        <StatusAlert />
+      </ViewContainer>
+    </PageContent>
+  );
+};
 
-export default App;
+export default App;

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<QNASessionCardInterface>
+  >(fetchRecentQNASessions());
+
+  const [userTopics, setUserTopics]
+    = useState<Array<TopicInterface>>(fetchTopics());
+
+  return (
+    <PageContent>
+      <header className="topic-based-qna-header">
+        <ViewContainer className="flex flex-row items-center justify-between">
+          <h1 className="text-4xl font-semibold">{'Your Q/A Sessions'}</h1>
+          <div className="my-6 flex flex-row items-center gap-4">
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button>Start new session</Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Start a new Q/A Session</DialogTitle>
+                  <DialogDescription>
+                    Provide information related to new session. This helps us to
+                    gather topics for you
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="new-session-form-container">
+                  <div className="select-topic-wrapper form-input-wrapper">
+                    <Label>Select topic</Label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Choose topic, domain" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {userTopics.map((topic, topicIndex) => {
+                            return (
+                              <SelectItem value={topic.title} key={topicIndex}>
+                                {topic.emoji + " " + topic.title}
+                              </SelectItem>
+                            )
+                          })}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="select-level-wrapper form-input-wrapper">
+                    <Label>Diversity & Depth</Label>
+                    <Select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Choose level of diversity" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {getTopicDepthLevels().map((depthLevel, depthLevelIndex) => {
+                            return (
+                              <SelectItem value={depthLevel} key={depthLevelIndex}>
+                                {depthLevel}
+                              </SelectItem>
+                            )
+                          })}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <DialogFooter>
+                  <DialogTrigger>
+                    <Button>Create new session</Button>
+                  </DialogTrigger>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </ViewContainer>
+      </header>
+      {recentQNASessions.length ? (
+        <RecentQnASessionsList data={recentQNASessions} />
+      ) : (
+        <RecentSessionsEmptyStateView />
+      )}
+    </PageContent>
+  );
+};
+
+export default TopicBasedQNA;

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<FeatureOptionInterface> = [
+  {
+    featureName: 'Video Interview',
+    icon: <Video className={cn('max-md:w-4 h-auto')} />,
+    link: '#',
+  },
+  {
+    featureName: 'ATS Resume Review',
+    icon: <FileSearch className={cn('max-md:w-4 h-auto')} />,
+    link: '#',
+  },
+  {
+    featureName: 'Topic Based Q/A',
+    icon: <MessagesSquare className={cn('max-md:w-4 h-auto')} />,
+    link: '/qna',
+  },
+  {
+    featureName: 'Mock Aptitude',
+    icon: <PencilLine className={cn('max-md:w-4 h-auto')} />,
+    link: '#',
+  },
+  {
+    featureName: 'Behavioural Rounds',
+    icon: <Briefcase className={cn('max-md:w-4 h-auto')} />,
+    link: '#',
+  },
+];
+
+export { FeatureList };

common/environment-variables.ts

@@ -0,0 +1,6 @@
+const Environment = {
+  // env variable for checking development environment
+  ENVIRONMENT_TYPE: process.env.NEXT_PUBLIC_ENVIRONMENT_TYPE,
+};
+
+export { Environment };

common/index.ts

@@ -0,0 +1,10 @@
+/**
+ * method to return a list of levels, portraying topic depth/diversity
+ */
+function getTopicDepthLevels() {
+  return ['Basic', 'Intermediate', 'Advanced', 'Professional'];
+}
+
+export {
+  getTopicDepthLevels
+}

components.json

@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

components/layouts/box-card-slider.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils';
+
+const BoxCardSlider: React.FunctionComponent<
+  React.HTMLAttributes<HTMLDivElement>
+> = ({ className, children, ...props }) => {
+  return (
+    <div
+      className={cn(
+        'mt-3 py-2 flex flex-row gap-4 overflow-x-scroll hide-scrollbar',
+        'max-md:grid max-md:grid-cols-2 max-md:gap-y-4 max-md:gap-x-4 max-md:overflow-visible max-md:w-fit',
+        className,
+      )}
+      {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default BoxCardSlider;

components/layouts/box-card.tsx

@@ -0,0 +1,20 @@
+import { ReactHTMLElement } from 'react';
+import { cn } from '@/lib/utils';
+
+const BoxCard: React.FunctionComponent<
+  React.HTMLAttributes<HTMLDivElement>
+> = ({ className, children, ...props }) => (
+  <div
+    className={cn(
+      'relative w-[240px] h-[140px] rounded-2xl border-transparent shadow transition-all hover:shadow-md',
+      'max-xl:w-[220px] max-xl:h-[120px]',
+      'max-lg:w-[200px] max-lg:h-[100px]',
+      'max-sm:rounded-xl',
+      className,
+    )}
+    {...props}>
+    {children}
+  </div>
+);
+
+export { BoxCard };

components/layouts/page-content.tsx

@@ -0,0 +1,13 @@
+import { cn } from '@/lib/utils';
+
+const PageContent: React.FunctionComponent<
+  React.HTMLAttributes<HTMLDivElement>
+> = ({ className, children, ...props }) => {
+  return (
+    <div className={cn('page-content my-10', className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default PageContent;