Skip to content

Commit

Permalink
Taskbar Calendar Update (#477)
Browse files Browse the repository at this point in the history
* feat: integrated calendar into sidebar (#476)

* added new features in taskbar

* added coming soon page

* integrated calendar

* changed the position of calendar

* gets orgId from user context

* error fix

* removed pnpm pre-commit

* removed pnpm pre-commit

---------

Co-authored-by: Arjun A <146703387+arjun-mec@users.noreply.github.com>
  • Loading branch information
subru-37 and arjun-mec authored Oct 2, 2024
1 parent 7bb9bfe commit d7c805c
Show file tree
Hide file tree
Showing 12 changed files with 14,847 additions and 73 deletions.
4 changes: 2 additions & 2 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
# . "$(dirname -- "$0")/_/husky.sh"

pnpm dlx lint-staged
# pnpm dlx lint-staged
10 changes: 7 additions & 3 deletions apps/web-admin/components.json
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"rsc": false,
"tsx": false,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/styles/globals.css",
"baseColor": "neutral",
"cssVariables": true
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
}
12 changes: 10 additions & 2 deletions apps/web-admin/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,33 +20,41 @@
"@mui/icons-material": "^5.15.10",
"@mui/material": "^5.15.9",
"@mui/x-data-grid": "^6.19.3",
"autoprefixer": "10.4.16",
"@radix-ui/react-slot": "^1.1.0",
"axios": "^1.5.1",
"canvas": "^2.11.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"database": "workspace:*",
"date-fns": "^4.1.0",
"eslint": "8.56.0",
"eslint-config-custom": "workspace:*",
"eslint-config-next": "14.0.4",
"framer-motion": "^11.0.6",
"konva": "^9.3.15",
"lucide-react": "^0.441.0",
"next": "14.0.4",
"papaparse": "^5.4.1",
"postcss": "8.4.31",
"react": "18.2.0",
"react-csv": "^2.2.2",
"react-day-picker": "8.10.1",
"react-dom": "18.2.0",
"react-hook-form": "^7.49.0",
"react-icons": "^5.0.1",
"react-konva": "^18.2.10",
"react-qr-reader": "3.0.0-beta-1",
"react-remove-scroll": "^2.6.0",
"sass": "^1.69.1",
"tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7",
"zod": "^3.23.8"
},
"devDependencies": {
"@types/node": "22.5.0",
"@types/react": "18.3.4",
"autoprefixer": "10.4.16",
"postcss": "8.4.31",
"tailwindcss": "^3.4.12",
"typescript": "^5.0.4"
}
}
50 changes: 29 additions & 21 deletions apps/web-admin/src/components/Sidebar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ import {
DrawerCloseButton,
useMediaQuery,
} from '@chakra-ui/react';
import Link from 'next/link';
import { MdOutlineEvent } from 'react-icons/md';
import SidebarCalendar from './SidebarCalendar';
import { PiCertificate } from 'react-icons/pi';
import { MdOutlineEmail } from 'react-icons/md';
import { MdOutlineSettings } from 'react-icons/md';
Expand All @@ -31,7 +30,7 @@ const Sidebar = ({ isOpen, onClose }) => {
// const isUser = accountDetails.role === 'USER';

const router = useRouter();
const { orgId } = router.query;
const orgId = accountDetails.orgId;

const handleLogout = (e) => {
e.preventDefault();
Expand Down Expand Up @@ -64,6 +63,7 @@ const Sidebar = ({ isOpen, onClose }) => {
<SidebarContents />

<Box flex="1"></Box>
<SidebarCalendar scale={1.05} />
{isAdmin && (
<Button
onClick={() => {
Expand Down Expand Up @@ -99,23 +99,31 @@ const Sidebar = ({ isOpen, onClose }) => {
</Text>
</DrawerHeader>
<DrawerBody>
<EventsDisplay />
<SidebarContents />
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
}}
>
<EventsDisplay />
<SidebarContents />
<Box flex="1"></Box>
<SidebarCalendar scale={1.1} />
{isAdmin && (
<Button
onClick={() => {
router.push(`/${orgId}/settings`);
}}
isLoading={loading}
width="100%"
margin="20px 0px 10px 0px"
>
Organization Settings
</Button>
)}

<Box flex="1"></Box>
{isAdmin && (
<Button
onClick={() => {
router.push(`/${orgId}/settings`);
}}
isLoading={loading}
width="100%"
>
Organization Settings
</Button>
)}

<Box paddingY={4}>
<Button
onClick={handleLogout}
isLoading={loading}
Expand All @@ -124,7 +132,7 @@ const Sidebar = ({ isOpen, onClose }) => {
>
Logout
</Button>
</Box>
</div>
</DrawerBody>
</DrawerContent>
</DrawerOverlay>
Expand All @@ -137,10 +145,10 @@ const Sidebar = ({ isOpen, onClose }) => {

const SidebarContents = () => {
const router = useRouter();
const { orgId } = router.query;

const { accountDetails } = useContext(account);
const isUser = accountDetails.role === 'USER';
const orgId = accountDetails.orgId;

const sidebarItems = [
// { label: 'Events', path: `/${orgId}/events`, icon: <MdOutlineEvent /> },
Expand Down
14 changes: 14 additions & 0 deletions apps/web-admin/src/components/SidebarCalendar.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import { Calendar } from '@/components/ui/calendar';
import { useState } from 'react';

const SidebarCalendar = ({ scale }) => {
const [date, setDate] = useState(new Date());
return (
<div style={{ marginTop: '10px' }}>
<Calendar mode="single" selected={date} onSelect={setDate} scale={scale} />
</div>
);
};

export default SidebarCalendar;
39 changes: 39 additions & 0 deletions apps/web-admin/src/components/ui/button.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';

import { cn } from '@/lib/utils';

const buttonVariants = cva(
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
},
);

const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : 'button';
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
});
Button.displayName = 'Button';

export { Button, buttonVariants };
64 changes: 64 additions & 0 deletions apps/web-admin/src/components/ui/calendar.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import * as React from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { DayPicker } from 'react-day-picker';

import { cn } from '@/lib/utils';
import { buttonVariants } from '@/components/ui/button';

function Calendar({ className, classNames, showOutsideDays = true, scale = 1, ...props }) {
return (
<div
style={{
transform: `scale(${scale})`,
width: '100%',
display: 'flex',
justifyContent: 'center',
}}
>
<DayPicker
showOutsideDays={showOutsideDays}
className={cn('p-2.5', className)}
classNames={{
months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
month: 'space-y-2',
caption: 'flex justify-center pt-1 relative items-center',
caption_label: 'text-sm font-medium',
nav: 'space-x-1 flex items-center',
nav_button: cn(
buttonVariants({ variant: 'outline' }),
'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
),
nav_button_previous: 'absolute left-1',
nav_button_next: 'absolute right-1',
table: 'w-full border-collapse space-y-1',
head_row: 'flex',
head_cell: 'text-muted-foreground rounded-md w-7 font-normal text-[0.8rem]',
row: 'flex w-full mt-1',
cell: 'h-7 w-7 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
day: cn(
buttonVariants({ variant: 'ghost' }),
'h-7 w-7 p-0 font-normal aria-selected:opacity-100',
),
day_range_end: 'day-range-end',
day_selected:
'bg-teal text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-teal focus:text-primary-foreground',
day_today: 'bg-accent text-accent-foreground',
day_outside:
'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
day_disabled: 'text-muted-foreground opacity-50',
day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
day_hidden: 'invisible',
...classNames,
}}
components={{
IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
}}
{...props}
/>
</div>
);
}
Calendar.displayName = 'Calendar';

export { Calendar };
6 changes: 6 additions & 0 deletions apps/web-admin/src/lib/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs) {
return twMerge(clsx(inputs));
}
1 change: 1 addition & 0 deletions apps/web-admin/src/pages/_app.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import MyContext from '@/contexts/MyContext';
import { extendTheme, ChakraProvider, withDefaultColorScheme } from '@chakra-ui/react';
import { Auth0Provider } from '@auth0/auth0-react';
import { ProtectedRoute } from '@/components/ProtectedRoute';
import '../styles/globals.css';

const theme = extendTheme(
withDefaultColorScheme({
Expand Down
66 changes: 66 additions & 0 deletions apps/web-admin/src/styles/globals.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
Loading

0 comments on commit d7c805c

Please sign in to comment.