feat(dashoard): implement page dashboard (#4)

Co-authored-by: Hoang Nguyen <hoangnt@inspirelab.vn>

package-lock.json

@@ -30,6 +30,7 @@
         "react-dom": "19.0.0",
         "react-hook-form": "^7.54.0",
         "tailwind-merge": "^2.6.0",
+        "usehooks-ts": "^3.1.1",
         "zod": "^3.24.0"
       },
       "devDependencies": {
@@ -24392,7 +24393,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.escaperegexp": {
@@ -37429,6 +37429,20 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.1.tgz",
+      "integrity": "sha512-I4diPp9Cq6ieSUH2wu+fDAVQO43xwtulo+fKEidHUwZPnYImbtkTjzIJYcDcJqxgmX31GVqNFURodvcgHcW0pA==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",

package.json

@@ -49,6 +49,7 @@
     "react-dom": "19.0.0",
     "react-hook-form": "^7.54.0",
     "tailwind-merge": "^2.6.0",
+    "usehooks-ts": "^3.1.1",
     "zod": "^3.24.0"
   },
   "devDependencies": {

src/app/dashboard/page.tsx

@@ -0,0 +1,76 @@
+import JobCard from '@/components/dashboard/JobCard';
+import JobFilters from '@/components/dashboard/JobFilters';
+import SubscribeJob from '@/components/dashboard/SubscribeJob';
+import { Suspense } from 'react';
+
+const jobCategories = [
+  'Design',
+  'Full-stack',
+  'Back-end',
+  'Front-end',
+  'QA Engineer',
+  'Data Engineer',
+  'Mobile',
+  'AI Training & Labeling',
+  'DevOps',
+];
+
+const jobs = [
+  {
+    id: 1,
+    title: 'Software Engineer - Confidential Computing',
+    company: 'Nethermind',
+    logo: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-02-15%20at%2021.58.09-ZsGA1DKAeyYCxqdocTlWoRuaKkhrH1.png',
+    location: 'Anywhere',
+    type: 'Freelancer',
+    postedAt: '2 days ago',
+  },
+  {
+    id: 2,
+    title: 'Marketing Manager - Payments Industry',
+    company: 'HitPay',
+    logo: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-02-15%20at%2021.58.09-ZsGA1DKAeyYCxqdocTlWoRuaKkhrH1.png',
+    location: 'Anywhere',
+    type: 'Full-time',
+    postedAt: '2 days ago',
+  },
+  // Add more jobs as needed
+];
+
+export default function Page() {
+  return (
+    <main className="min-h-screen bg-background pt-20">
+      <div className="container mx-auto px-4 py-8">
+        {/* Categories */}
+        <div className="mb-8 flex flex-wrap gap-2">
+          {jobCategories.map(category => (
+            <button type="button" key={category} className="rounded-full bg-muted px-4 py-2 transition-colors hover:bg-muted/80">
+              {category}
+            </button>
+          ))}
+        </div>
+
+        {/* Filters and Search */}
+        <Suspense fallback={<div>Loading filters...</div>}>
+          <JobFilters />
+        </Suspense>
+
+        {/* Job Listings */}
+        <div className="mt-8 grid grid-cols-1 gap-8 lg:grid-cols-3">
+          <div className="space-y-4 lg:col-span-2">
+            {jobs.map(job => (
+              <JobCard key={job.id} job={job} />
+            ))}
+          </div>
+
+          {/* Newsletter Signup */}
+          <div className="lg:col-span-1">
+            <div className="sticky top-4">
+              <SubscribeJob />
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/page.tsx

@@ -6,52 +6,6 @@ export default function Home() {
   return (
     <main className="flex min-h-screen flex-col">
       <div className="flex-1 space-y-16 pb-8 pt-20 md:pb-12 md:pt-24 lg:py-32">
-        <div className="container flex flex-col items-center gap-4 text-center">
-          <Badge className="rounded-lg" variant="secondary">
-            NEW
-            {' '}
-            <span className="mx-1">+</span>
-            {' '}
-            v0.5.14 is now live on GitHub. Check it out!
-          </Badge>
-
-          <span className="text-4xl">❝</span>
-
-          <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
-            Chat with AI
-            <br />
-            without privacy concerns
-          </h1>
-
-          <p className="max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
-            Jan is an open source ChatGPT-alternative that runs 100% offline.
-          </p>
-
-          <div className="space-y-4">
-            <Button className="h-11 px-8" size="lg">
-              <Download className="mr-2 size-4" />
-              Download for Windows
-              <ChevronDown className="ml-2 size-4" />
-            </Button>
-            <p className="text-xs text-muted-foreground">
-              <span className="font-semibold text-yellow-500">2.5M+</span>
-              {' '}
-              downloads | Free & Open Source
-            </p>
-          </div>
-        </div>
-
-        <div className="container">
-          <div className="relative mx-auto aspect-video max-w-5xl overflow-hidden rounded-xl border bg-background shadow-xl">
-            <Image
-              src="https://sjc.microlink.io/-ax0tIqUfnMYpO1Y6sFNuRcGN_Oe6cQwpzrnQR5q5pzkpfA29UGKZ228lDnpeQCpNANORBcNBmQgFoOtLn18vw.jpeg"
-              alt="Jan AI Interface"
-              fill
-              className="object-cover"
-              priority
-            />
-          </div>
-        </div>
         <AnnouncementBanner />
         <FeaturesSection />
         <CustomizationSection />

src/components/HeroSection.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/atoms';
+import { Button } from '@/components/base';
 import { Download } from 'lucide-react';
 import Image from 'next/image';
 

src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 'use client';
-import { Button, Input } from '@/components/atoms';
-import { Search, Settings } from 'lucide-react';
+import { Button, Input } from '@/components/base';
+import { Search } from 'lucide-react';
 import Link from 'next/link';
 
 export function Navbar() {
@@ -15,11 +15,8 @@ export function Navbar() {
         </div>
 
         <div className="flex items-center gap-6 text-sm">
-          <Link href="/documentation" className="hover:text-foreground/80">
-            Documentation
-          </Link>
-          <Link href="/changelog" className="hover:text-foreground/80">
-            Changelog
+          <Link href="/dashboard" className="hover:text-foreground/80">
+            Dashboard
           </Link>
           <Link href="/about" className="hover:text-foreground/80">
             About
@@ -31,12 +28,15 @@ export function Navbar() {
             <Search className="absolute left-2 top-2.5 size-4 text-muted-foreground" />
             <Input placeholder="Search documentation..." className="pl-8" />
           </div>
-          <Link href="/blog" className="hover:text-foreground/80">
-            Blog
-          </Link>
-          <Button variant="ghost" size="icon">
-            <Settings className="size-5" />
-          </Button>
+          <div className="flex gap-4">
+            <Button variant="default" size="default">
+              <Link href="/sign-in">Sign In</Link>
+            </Button>
+            <Button variant="secondary" size="default">
+              <Link href="/sign-up">Sign Up</Link>
+            </Button>
+          </div>
+
         </div>
       </div>
     </nav>

src/components/{atoms → base}/Badge/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type * as React from 'react';
 import { cn } from '@/utils/Helpers';
 import { cva, type VariantProps } from 'class-variance-authority';

src/components/{atoms → base}/Button/index.tsx

@@ -1,4 +1,5 @@
-/* eslint-disable react-refresh/only-export-components */
+'use client';
+
 import { cn } from '@/utils/Helpers';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { type ButtonHTMLAttributes, type FC, memo, type PropsWithChildren, type Ref } from 'react';
@@ -49,4 +50,5 @@ const Button: FC<ButtonProps> = memo(({
 
 Button.displayName = 'Button';
 
+// eslint-disable-next-line react-refresh/only-export-components
 export { Button, buttonVariants };

src/components/{atoms → base}/Card/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { cn } from '@/utils/Helpers';
 import * as React from 'react';
 

src/components/{atoms → base}/Input/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { cn } from '@/utils/Helpers';
 import { type FC, type InputHTMLAttributes, memo, type Ref } from 'react';
 

src/components/base/Label/index.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { cn } from '@/utils/Helpers';
+import * as React from 'react';
+
+export type LabelProps = {} & React.LabelHTMLAttributes<HTMLLabelElement>;
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ className, ...props }, ref) => {
+  return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    <label
+      ref={ref}
+      className={cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Label.displayName = 'Label';
+
+export { Label };

src/components/base/Select/Select.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import * as React from 'react';
+import { useOnClickOutside } from 'usehooks-ts';
+import { SelectContext } from './SelectContext';
+
+export default function Select({
+  children,
+  value: controlledValue,
+  onChange,
+  defaultValue,
+}: {
+  children: React.ReactNode;
+  value?: string;
+  onChange?: (value: string) => void;
+  defaultValue?: string;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState(defaultValue || '');
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = () => {
+    setOpen(false);
+  };
+
+  useOnClickOutside<HTMLDivElement>(ref as React.RefObject<HTMLDivElement>, handleClickOutside);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const handleChange = onChange || setInternalValue;
+
+  return (
+    // eslint-disable-next-line react/no-unstable-context-value
+    <SelectContext.Provider value={{ open, setOpen, value, onChange: handleChange }}>
+      <div className="relative" ref={ref}>{children}</div>
+    </SelectContext.Provider>
+  );
+}

src/components/base/Select/SelectContent.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { cn } from '@/utils/Helpers';
+import * as React from 'react';
+import { SelectContext } from './SelectContext';
+
+export default function SelectContent({ children, className }: { children: React.ReactNode; className?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error('SelectContent must be used within Select');
+  }
+
+  if (!context.open) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'absolute top-full z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover text-popover-foreground shadow-md',
+        className,
+      )}
+    >
+      <div className="p-1">{children}</div>
+    </div>
+  );
+}

src/components/base/Select/SelectContext.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+
+export const SelectContext = React.createContext<SelectContextType | undefined>(undefined);
+
+type SelectContextType = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  value: string;
+  onChange: (value: string) => void;
+};

src/components/base/Select/SelectItem.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { cn } from '@/utils/Helpers';
+import * as React from 'react';
+import { SelectContext } from './SelectContext';
+
+export default function SelectItem({
+  children,
+  value,
+  className,
+}: {
+  children: React.ReactNode;
+  value: string;
+  className?: string;
+}) {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error('SelectItem must be used within Select');
+  }
+
+  const isSelected = context.value === value;
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        context.onChange(value);
+        context.setOpen(false);
+      }}
+      className={cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground',
+        isSelected && 'bg-accent text-accent-foreground',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}

src/components/base/Select/SelectTrigger.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { cn } from '@/utils/Helpers';
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
+import { SelectContext } from './SelectContext';
+
+export default function SelectTrigger({ children, className }: { children: React.ReactNode; className?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error('SelectTrigger must be used within Select');
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => context.setOpen(!context.open)}
+      className={cn(
+        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+    >
+      {children}
+      <ChevronDown className="size-4 opacity-50" />
+    </button>
+  );
+}

src/components/base/Select/SelectValue.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+import { SelectContext } from './SelectContext';
+
+export default function SelectValue({ placeholder }: { placeholder?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error('SelectValue must be used within Select');
+  }
+
+  return <span>{context.value || placeholder}</span>;
+}

src/components/base/Select/index.tsx

@@ -0,0 +1,5 @@
+export { default as Select } from './Select';
+export { default as SelectContent } from './SelectContent';
+export { default as SelectItem } from './SelectItem';
+export { default as SelectTrigger } from './SelectTrigger';
+export { default as SelectValue } from './SelectValue';

src/components/base/Switch/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { cn } from '@/utils/Helpers';
+import * as React from 'react';
+
+type SwitchProps = {
+  onCheckedChange?: (checked: boolean) => void;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(({ className, onCheckedChange, ...props }, ref) => {
+  return (
+    <label className="relative inline-flex cursor-pointer items-center">
+      <input
+        type="checkbox"
+        className="peer sr-only"
+        ref={ref}
+        onChange={e => onCheckedChange?.(e.target.checked)}
+        {...props}
+      />
+      <div
+        className={cn(
+          'relative h-6 w-11 rounded-full bg-muted transition-colors peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ring peer-focus:ring-offset-2 peer-checked:bg-primary',
+          className,
+        )}
+      >
+        <div className="absolute left-[2px] top-[2px] size-5 rounded-full bg-white transition-transform peer-checked:translate-x-5" />
+      </div>
+    </label>
+  );
+});
+Switch.displayName = 'Switch';
+
+export { Switch };

src/components/{atoms → base}/index.ts

@@ -2,3 +2,6 @@ export { Badge } from './Badge';
 export { Button } from './Button';
 export * from './Card';
 export { Input } from './Input';
+export { Label } from './Label';
+export * from './Select';
+export { Switch } from './Switch';

src/components/dashboard/JobCard.tsx

@@ -0,0 +1,45 @@
+import { Button, Card } from '@/components/base';
+import { Clock, Globe } from 'lucide-react';
+import Image from 'next/image';
+
+type JobCardProps = {
+  job: {
+    id: number;
+    title: string;
+    company: string;
+    logo: string;
+    location: string;
+    type: string;
+    postedAt: string;
+  };
+};
+
+export default function JobCard({ job }: JobCardProps) {
+  return (
+    <Card className="rounded-lg border bg-card p-6">
+      <div className="flex items-start gap-4">
+        <div className="relative size-12 overflow-hidden rounded-full border">
+          <Image src={job.logo || '/placeholder.svg'} alt={`${job.company} logo`} fill className="object-cover" />
+        </div>
+        <div className="flex-1">
+          <h3 className="text-lg font-semibold">{job.title}</h3>
+          <p className="text-muted-foreground">{job.company}</p>
+          <div className="mt-2 flex items-center gap-4 text-sm text-muted-foreground">
+            <div className="flex items-center gap-1">
+              <Globe className="size-4" />
+              {job.location}
+            </div>
+            <div className="flex items-center gap-1">
+              <Clock className="size-4" />
+              {job.type}
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Button variant="outline">View</Button>
+          <Button>Apply</Button>
+        </div>
+      </div>
+    </Card>
+  );
+}

src/components/dashboard/JobFilters.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch } from '@/components/base';
+import { Search } from 'lucide-react';
+
+export default function JobFilters() {
+  return (
+    <div className="rounded-lg bg-card p-4">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Location" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="anywhere">Anywhere</SelectItem>
+            <SelectItem value="vietnam">Vietnam</SelectItem>
+            <SelectItem value="usa">USA</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Job type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="fulltime">Full-time</SelectItem>
+            <SelectItem value="freelancer">Freelancer</SelectItem>
+            <SelectItem value="contract">Contract</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Experience" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="entry">Entry Level</SelectItem>
+            <SelectItem value="mid">Mid Level</SelectItem>
+            <SelectItem value="senior">Senior Level</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input className="pl-9" placeholder="E.g. Front-end developer" type="search" />
+        </div>
+      </div>
+
+      <div className="mt-4 flex items-center justify-end space-x-2">
+        <Switch id="closed-jobs" />
+        <Label htmlFor="closed-jobs">Hide closed jobs</Label>
+      </div>
+    </div>
+  );
+}

src/components/dashboard/SubscribeJob.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { Button, Input } from '@/components/base';
+import { Send } from 'lucide-react';
+
+export default function SubscribeJob() {
+  return (
+    <div className="rounded-lg border bg-card p-6">
+      <div className="mb-6">
+        <div className="mb-4 flex size-10 items-center justify-center rounded-full bg-primary/10">
+          <Send className="size-5 text-primary" />
+        </div>
+        <h2 className="mb-2 text-xl font-semibold">New remote jobs in your inbox, every Monday!</h2>
+        <p className="text-muted-foreground">Subscribe to get your 5-minute brief on tech remote jobs every Monday</p>
+      </div>
+      <form className="space-y-4">
+        <Input type="email" placeholder="Enter your email" />
+        <Button className="w-full">Subscribe</Button>
+      </form>
+    </div>
+  );
+}

src/components/homepage/AnnouncementBanner.tsx

@@ -1,4 +1,4 @@
-import { Badge, Button } from '@/components/atoms';
+import { Badge, Button } from '@/components/base';
 import { ChevronDown, Download } from 'lucide-react';
 import Image from 'next/image';
 

src/components/homepage/CustomizationSection.tsx

@@ -1,4 +1,4 @@
-import { Badge, Card } from '@/components/atoms';
+import { Badge, Card } from '@/components/base';
 import Image from 'next/image';
 
 export function CustomizationSection() {

src/components/homepage/FeatureSection.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@/components/atoms';
+import { Badge } from '@/components/base';
 import { Cloud, FileText, Grid, MessageCircle, Server } from 'lucide-react';
 import Image from 'next/image';