Skip to content

Commit

Permalink
changes: new themes
Browse files Browse the repository at this point in the history
feat:
- changed back to using HSL (easier compatibility with shadcn tooling)
- new light and dark themes
- removal of navbar specific color (uses card variable now)
- new subcomponents in active location selector
- detailed count in status endpoint reponse

fix:
- readability
- some syntax
  • Loading branch information
Sampiiiii committed Apr 17, 2024
1 parent d6f3454 commit 7ea0976
Show file tree
Hide file tree
Showing 25 changed files with 451 additions and 303 deletions.
11 changes: 8 additions & 3 deletions apps/anvil/src/sign-in/sign-in.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,19 +58,24 @@ export class SignInService implements OnModuleInit {
}

async getStatusForLocation(location: Location): Promise<LocationStatus> {
const [on_shift_count, count, max, can_sign_in, count_in_queue] = await Promise.all([
const [on_shift_rep_count, off_shift_rep_count, total_count, max, can_sign_in, count_in_queue] = await Promise.all([
this.onShiftReps(location),
this.offShiftReps(location),
this.totalCount(location),
this.maxCount(location),
this.canSignIn(location),
this.countInQueue(location),
this.outOfHours(),
]);

const user_count = total_count - off_shift_rep_count - on_shift_rep_count;

return {
locationName: location,
open: on_shift_count > 0,
count,
open: on_shift_rep_count > 0,
on_shift_rep_count,
off_shift_rep_count,
user_count,
max,
out_of_hours: this.outOfHours(),
needs_queue: !can_sign_in,
Expand Down
12 changes: 5 additions & 7 deletions apps/forge/src/components/navbar/appNav/appLinkDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState } from "react";
import { Link, useNavigate } from "@tanstack/react-router";
import { AppLink } from "@/components/navbar/appNav/appLinks.ts";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { Button } from "@ui/components/ui/button.tsx";

type DropdownLinkProps = {
link: AppLink;
Expand All @@ -15,7 +16,7 @@ const DropdownLink: React.FC<DropdownLinkProps> = ({ link, onClick, activeId })
const isActive = linkItem.id === activeId;

// Link styles
const linkClasses = `block px-4 py-2 text-sm rounded-md text-navbar-foreground hover:bg-accent ${
const linkClasses = `block px-4 py-2 text-sm rounded-md text-card-foreground hover:bg-accent ${
isActive ? "border-2 border-accent" : ""
}`;

Expand Down Expand Up @@ -45,7 +46,7 @@ const DropdownLink: React.FC<DropdownLinkProps> = ({ link, onClick, activeId })
<DropdownMenu.Content
align="start"
sideOffset={5}
className="bg-navbar shadow-lg rounded-md border border-gray-200 z-50"
className="bg-card shadow-lg rounded-md border border-gray-200 z-50"
>
{/* Children links */}
{linkItem.children!.map((child) => renderLink(child, level + 1))}
Expand All @@ -58,12 +59,9 @@ const DropdownLink: React.FC<DropdownLinkProps> = ({ link, onClick, activeId })
return (
<DropdownMenu.Sub key={linkItem.id}>
<DropdownMenu.SubTrigger asChild>
<button className={linkClasses}>{linkItem.displayName}</button>
<Button className={linkClasses}>{linkItem.displayName}</Button>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
sideOffset={5}
className="bg-navbar shadow-lg rounded-md border border-gray-200 z-50"
>
<DropdownMenu.SubContent sideOffset={5} className="bg-card shadow-lg rounded-md border border-gray-200 z-50">
{linkItem.children!.map((child) => renderLink(child, level + 1))}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
Expand Down
2 changes: 1 addition & 1 deletion apps/forge/src/components/navbar/appNav/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function AppNav() {
<Link
key={link.displayName}
to={link.path ?? "#"}
className="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-navbar-foreground hover:bg-accent"
className="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-card-foreground hover:bg-accent"
>
{link.displayName}
</Link>
Expand Down
2 changes: 1 addition & 1 deletion apps/forge/src/components/navbar/appSwitcher/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function AppSwitcher() {
<NavigationMenuList>
<NavigationMenuItem>
<ContextMenuWrapper>
<NavigationMenuTrigger className="bg-navbar">iForge | {currentapp}</NavigationMenuTrigger>
<NavigationMenuTrigger className="bg-card">iForge | {currentapp}</NavigationMenuTrigger>
</ContextMenuWrapper>
<NavigationMenuContent>
<ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
Expand Down
2 changes: 1 addition & 1 deletion apps/forge/src/components/navbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import AppNav from "@/components/navbar/appNav";

export default function NavBar() {
return (
<div className="flex items-center justify-between h-[60px] p-3 w-full bg-navbar backdrop-filter shadow-lg dark:shadow-none">
<div className="flex items-center justify-between h-[60px] p-3 w-full bg-card text-card-foreground backdrop-filter shadow-lg dark:shadow-none">
<div className="flex flex-1">
<AppSwitcher />
</div>
Expand Down
6 changes: 5 additions & 1 deletion apps/forge/src/components/routing/GenericError.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import React from "react";
export const GenericError = () => {
const navigate = useNavigate();
const goToHome = () => navigate({ to: "/" });
const reload = () => navigate({ search: {} });

return (
<React.Fragment>
Expand All @@ -27,7 +28,10 @@ export const GenericError = () => {
</div>
<div className="flex justify-center">
<Button variant="outline" onClick={goToHome}>
Or go to Homepage
Go to Homepage
</Button>
<Button variant="outline" onClick={reload}>
Reload
</Button>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from "react";
import { Ban } from "lucide-react";

interface QueueStatusProps {
queue_needed: boolean;
count_in_queue: number;
}

export const QueueStatus: React.FC<QueueStatusProps> = ({ queue_needed, count_in_queue }) => {
if (!queue_needed) {
return (
<div className="rounded-sm flex text-primary-foreground bg-green-600 dark:bg-green-900 p-2 space-x-2">
<Ban />
<span className="text-white">QUEUE DISABLED</span>
</div>
);
}
return (
<div className="rounded-sm flex text-primary-foreground bg-primary p-2 space-x-2">
<span> {count_in_queue}</span>
<span>in Queue</span>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from "react";
import { Separator } from "@ui/components/ui/separator.tsx";
import { Moon } from "lucide-react";

interface StatusBadgeProps {
is_open: boolean;
is_out_of_hours: boolean;
}

export const StatusBadge: React.FC<StatusBadgeProps> = ({ is_open, is_out_of_hours }) => {
return (
<div className="rounded-sm flex bg-card text-card-foreground p-2 space-x-2">
<span className="text-gray-500 dark:text-gray-400">Status</span>
{/* Open Status */}
{is_open ? <span className="text-green-500">OPEN</span> : <span className="text-red-500">CLOSED</span>}
{is_out_of_hours ? (
<>
<Separator orientation="vertical" />
<Moon /> <span>Out of Hours</span>
</>
) : undefined}
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React, { useState } from "react";

interface UserCountProps {
rep_count: number;
off_shift_rep_count: number;
user_count: number;
max_count: number;
}

export const UserCount: React.FC<UserCountProps> = ({ rep_count, off_shift_rep_count, max_count, user_count }) => {
const [showDetails, setShowDetails] = useState(false);
const total_count = rep_count + off_shift_rep_count + user_count;

const handleClick = () => {
setShowDetails(!showDetails);
};

return (
<div
className="rounded-sm flex bg-card text-card-foreground p-2 space-x-2 cursor-pointer"
onClick={handleClick}
onKeyUp={(event) => {
// Handle the 'Enter' key to mimic mouse click interaction
if (event.key === "Enter") {
handleClick();
}
}}
>
{showDetails ? (
<>
<span> {rep_count}</span>
<span className="text-gray-500 dark:text-gray-400 uppercase font-mono">rep(s)</span>
<span>{off_shift_rep_count}</span>
<span className="text-gray-500 dark:text-gray-400 uppercase font-mono">off-shift rep(s)</span>
<span>{user_count}</span>
<span className="text-gray-500 dark:text-gray-400 uppercase font-mono">user(s)</span>
</>
) : (
<>
<span className="text-gray-500 dark:text-gray-400 uppercase font-mono">user count</span>
<span>
{total_count}|{max_count}
</span>
<span className="text-gray-500 dark:text-gray-400 uppercase font-mono">max</span>
</>
)}
</div>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@ import { useQuery } from "@tanstack/react-query";
import { Separator } from "@ui/components/ui/separator.tsx";
import { PulseLoader } from "react-spinners";
import { Location } from "@ignis/types/sign_in.ts";
import { Moon } from "lucide-react";
import { UserCount } from "@/components/signin/ActiveLocationSelector/UserCount.tsx";
import { StatusBadge } from "@/components/signin/ActiveLocationSelector/StatusBadge.tsx";
import { QueueStatus } from "@/components/signin/ActiveLocationSelector/QueueStatus.tsx";
import { Skeleton } from "@ui/components/ui/skeleton.tsx";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ui/components/ui/tooltip.tsx";
import { Link } from "@tanstack/react-router";

const ActiveLocationSelector = () => {
const [open, setOpen] = useState<boolean>(false);
Expand Down Expand Up @@ -60,9 +65,9 @@ const ActiveLocationSelector = () => {

return (
<>
<div className="flex items-center justify-between p-3 space-x-4 bg-navbar text-navbar-foreground mt-4 mb-4 drop-shadow-lg dark:shadow-none flex-col md:flex-row">
<div className="flex items-center justify-between p-3 space-x-4 bg-card text-card-foreground mt-4 mb-4 drop-shadow-lg dark:shadow-none flex-col md:flex-row">
<div>
<span className="text-gray-700 dark:text-white font-medium mr-2">Select Location</span>
<span className="font-medium mr-2">Select Location</span>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
Expand All @@ -87,7 +92,7 @@ const ActiveLocationSelector = () => {
) : (
<>
{locationStatuses &&
locationStatuses!.map((location, _) => (
locationStatuses!.map((location) => (
<CommandItem
key={location.locationName}
value={location.locationName}
Expand All @@ -113,41 +118,63 @@ const ActiveLocationSelector = () => {
</PopoverContent>
</Popover>
</div>
{isLoading && <PulseLoader color="#e11d48" size={10} />}
{activeLocationStatus && !isLoading && (
{isLoading && (
<div className="flex items-center gap-2 mt-2 lg:mt-0">
<span className="text-gray-500 dark:text-gray-400">Status</span>
{/* Open Status */}
{activeLocationStatus.open ? (
<span className="text-green-500">OPEN</span>
) : (
<span className="text-red-500">CLOSED</span>
)}
{activeLocationStatus.out_of_hours ? (
<>
<Separator orientation="vertical" />
<Moon /> <span>Out of Hours</span>
</>
) : undefined}
<Separator orientation="vertical" />
{/* Count and Max Count Status */}

<span className="text-gray-500 dark:text-gray-400">Current Users </span>
<span className="text-navbar-foreground">
{" "}
{activeLocationStatus.count}/{activeLocationStatus.max}
</span>
<span className="text-gray-500 dark:text-gray-400">Max Users </span>
{/* Queue Status */}

{activeLocationStatus.needs_queue ? (
<span className="text-red-500">Queue Needed</span>
) : (
<span className="text-green-500">No Queue Needed</span>
)}
<Skeleton className="w-[110px] h-[40px]" />
<Separator orientation="vertical" />
<span className="text-navbar-foreground"> {activeLocationStatus.count_in_queue}</span>
<span className="text-gray-500 dark:text-gray-400">in Queue</span>
<Skeleton className="w-[240px] h-[40px]" />
<Skeleton className="w-[250px] h-[40px]" />
</div>
)}
{activeLocationStatus && !isLoading && (
<div className="flex items-center gap-2 mt-2 lg:mt-0">
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<StatusBadge
is_open={activeLocationStatus.open}
is_out_of_hours={activeLocationStatus.out_of_hours}
/>
</TooltipTrigger>
<TooltipContent>
<p>The space is marked as OPEN when there is at least one rep signed in.</p>
<p>It is closed otherwise</p>
<p>Current opening hours are: 12:00 - 20:00</p>
</TooltipContent>
</Tooltip>
<Separator orientation="vertical" />
<Tooltip>
<TooltipTrigger>
<UserCount
rep_count={activeLocationStatus.on_shift_rep_count}
off_shift_rep_count={activeLocationStatus.off_shift_rep_count}
user_count={activeLocationStatus.user_count}
max_count={activeLocationStatus.max}
/>
</TooltipTrigger>
<TooltipContent>
<p>Click to view a more detailed breakdown of the count</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>
<QueueStatus
queue_needed={activeLocationStatus.needs_queue}
count_in_queue={activeLocationStatus.count_in_queue}
/>
</TooltipTrigger>
<TooltipContent>
<p>The Queue is only enabled when capacity is reached.</p>
<p>
The view detailed queue status visit the{" "}
<Link className="underline" to={"/signin/dashboard"}>
dashboard
</Link>
.
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
)}
</div>
Expand Down
11 changes: 5 additions & 6 deletions apps/forge/src/components/signin/actions/SignInManager/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -169,14 +169,13 @@ const SignInActionsManager: React.FC<SignInManagerProps> = ({ initialFlow }) =>

if (StepComponent) {
// This is to stop the case where a rep is backtracking and then step 3 auto navigates them forwards again
if (currentStep == SignInSteps.Step3) {
if (currentStep === SignInSteps.Step3) {
dispatch(signinActions.updateSignInSessionField("navigation_is_backtracking", true));
}
return StepComponent ? <StepComponent onPrimary={moveToNextStep} onSecondary={moveToPreviousStep} /> : null;
} else {
// Handle the end of the flow or an invalid step
return <div>Flow completed or invalid step</div>;
}
// Handle the end of the flow or an invalid step
return <div>Flow completed or invalid step</div>;
};

const getTotalSteps = (flow: FlowType): number => {
Expand All @@ -190,7 +189,7 @@ const SignInActionsManager: React.FC<SignInManagerProps> = ({ initialFlow }) =>
<div className="border-2 p-4">
<h1 className="text-xl font-bold mb-4 text-center">Sign In Actions</h1>
{currentFlow && (
<div className="flex items-center justify-between p-3 space-x-4 bg-navbar text-navbar-foreground mt-4 mb-4 drop-shadow-lg dark:shadow-none flex-col md:flex-row">
<div className="flex items-center justify-between p-3 space-x-4 bg-card text-card-foreground mt-4 mb-4 drop-shadow-lg dark:shadow-none flex-col md:flex-row">
<div className="flex items-center">
<span className="text-lg font-bold mr-2">Current Flow:</span>
<span className="text-ring uppercase text-xl">{flowTypeToPrintTable(currentFlow)}</span>
Expand Down Expand Up @@ -218,7 +217,7 @@ const SignInActionsManager: React.FC<SignInManagerProps> = ({ initialFlow }) =>
<Button variant="default" className="h-20" onClick={() => startFlow(FlowType.SignIn)}>
Start Sign In
</Button>
<Button variant="secondary" className="h-20" onClick={() => startFlow(FlowType.SignOut)}>
<Button variant="default" className="h-20" onClick={() => startFlow(FlowType.SignOut)}>
Start Sign Out
</Button>
<Button variant="outline" className="h-20" onClick={() => startFlow(FlowType.Register)}>
Expand Down
Loading

0 comments on commit 7ea0976

Please sign in to comment.